:root {
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #8b5cf6;
  --primary-600: #7c3aed;
  --accent: #059669;
  --danger: #ef4444;
  --card: #f9fafb;
}

/* Busy indicator for video/image upload buttons (no inline scripts needed) */
.bw-dots {
  display: inline-block;
  width: 38px;
  height: 10px;
  position: relative;
}
.bw-dots::before,
.bw-dots::after {
  content: '';
}
.bw-dots,
.bw-dots::before,
.bw-dots::after {
  background: radial-gradient(circle closest-side, currentColor 90%, transparent) 0% 50%/10px 10px no-repeat,
              radial-gradient(circle closest-side, currentColor 90%, transparent) 50% 50%/10px 10px no-repeat,
              radial-gradient(circle closest-side, currentColor 90%, transparent) 100% 50%/10px 10px no-repeat;
  animation: bwDots 0.9s infinite ease-in-out;
}
@keyframes bwDots {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-1px); }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Ensure the HTML hidden attribute always hides elements.
   Some of our component classes (e.g. .btn) set display rules that can otherwise
   override the browser's default [hidden] styling. */
[hidden] { display: none !important; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

body:has(.terms-dialog[open]) {
  overflow: hidden;
}

.terms-dialog {
  width: min(920px, calc(100vw - 2rem));
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.terms-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.terms-dialog__surface {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  background: var(--bg);
}

.terms-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.terms-dialog__header h2 {
  margin: 0;
  font-size: 1.35rem;
}

.terms-dialog__close {
  flex: 0 0 auto;
}

.terms-dialog__status {
  padding: .75rem 1.25rem 0;
}

.terms-dialog__content {
  overflow: auto;
  padding: 1rem 1.25rem 1.25rem;
}

.terms-dialog__content > :first-child {
  margin-top: 0;
}

.terms-dialog__content > :last-child {
  margin-bottom: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Product page: seller link */
body[data-page="product"] .seller-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* User info (public seller page) */
body[data-page="user-info"] .seller-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body[data-page="user-info"] .seller-profile {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}

body[data-page="user-info"] .seller-avatar {
  width: 120px;
  height: 120px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: zoom-in;
}

body[data-page="user-info"] .seller-avatar:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body[data-page="user-info"] .seller-profile__name {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.15;
}

body[data-page="user-info"] .seller-profile__facts {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

body[data-page="user-info"] .seller-profile__facts .label {
  color: var(--text);
  font-weight: 650;
}

body[data-page="user-info"] .seller-location-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

body[data-page="user-info"] .seller-location-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* User-info: slightly smaller tiles so more fit per row on wide screens */
body[data-page="user-info"] .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

body[data-page="user-info"] .card-image {
  background: var(--card);
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body[data-page="user-info"] .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="user-info"] .seller-listings-title {
  margin: 1.25rem 0 .75rem;
}

body[data-page="user-info"] .seller-listings-actions {
  display: grid;
  justify-items: center;
  row-gap: 12px;
  width: 100%;
  margin: 16px 0 28px;
}

body[data-page="user-info"] .seller-paging__status {
  color: var(--muted);
  text-align: center;
  margin-left: 0; /* override global .muted left indent */
}

/* User-info paging button: match Home "load more" styling */
body[data-page="user-info"] .seller-listings-actions #load-more {
  justify-self: center;
  border: 2px solid #000;
  background: transparent;
  color: #000;
  border-radius: 999px;
  padding: .55rem 1.05rem;
}

body[data-page="user-info"] .seller-listings-actions #load-more:hover {
  background: #000;
  color: #fff;
}

body[data-page="user-info"] .seller-listings-actions #load-more:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

body[data-page="user-info"] .seller-listings-actions #load-more:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Small icon links (orders table actions, etc.) */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  vertical-align: middle;
}

.icon-link:hover {
  background: var(--card);
  border-color: var(--border);
}

.icon-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.icon-link .icon {
  width: 20px;
  height: 20px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

/* Accessiblity helpers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Country flag next to origin label on product page */
.origin-country .flag {
  display: inline-block;
  margin-left: .35rem;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -0.05em;
}

/* Product page: pickup-only label next to shipping cost */
.pickup-only-badge {
  color: var(--danger, #b00020);
  font-weight: 600;
  margin-left: .5rem;
}

/* Required-field star */
.req-star {
  color: var(--danger);
  font-weight: 800;
  margin-left: .25rem;
}

/* Header / Nav */
.site-header {
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Header row: brand (left), links (center), utilities (right) */
.navbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  /* Use .container gutters; navbar adds only vertical padding */
  padding: .75rem 0;
}

/* Ensure header content width/gutters always match page content (.container). */
.site-header .navbar.container {
  max-width: 1100px; /* match .container */
  margin: 0 auto;
  padding-left: 1rem;  /* match .container */
  padding-right: 1rem; /* match .container */
}

/* Header layout: brand left, links centered, utilities right */
.brand { flex: 0 0 auto; }
.nav-links { flex: 1 1 auto; justify-content: center; }
.header-right {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

/* Right-side cart icon + badge (sits left of language selector). */
.header-right .cart-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #111;
  text-decoration: none;
  border-radius: 8px;
}
.header-right .cart-chip:hover { background: var(--card); }
.header-right .cart-chip::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image:
    url("/images/icons/bag.png"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l-1.2 12.5a2 2 0 0 1-2 1.5H9.2a2 2 0 0 1-2-1.5L6 7z'/><path d='M9 7V5a3 3 0 1 1 6 0v2'/></svg>");
}
.header-right .cart-chip .cart-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  border: 2px solid #fff;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Header user menu trigger badge (Supplier Admin pending actions) */
.navbar #user-chip {
  position: relative;
}

.navbar #user-chip #user-menu-badge {
  position: absolute;
  right: -14px;
  bottom: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--danger);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  border: 2px solid #fff;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand {
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  margin-right: 0;
}

/* DEBUG: visualize left edges by appending ?debugLayout=1 */
@media (min-width: 769px) {
  body[data-debug-layout="1"] .site-header .navbar.container,
  body[data-debug-layout="1"] main.container {
    outline: 2px solid rgba(220, 38, 38, 0.65);
    outline-offset: -2px;
  }
  body[data-debug-layout="1"] .site-header .brand,
  body[data-debug-layout="1"] main.container > h1 {
    box-shadow: inset 4px 0 0 rgba(37, 99, 235, 0.75);
  }
}

/* Desktop: let the brand sit flush to the left edge of the header container. */
/* Desktop: keep site title aligned with page content container (e.g. H1). */

/* Social links (shown below site title) */
.social-links {
  display: flex;
  align-items: center;
  gap: 8px;
  /* SVGs use fill: currentColor; force black across layouts */
  color: #000;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: inherit;
  border-radius: 6px;
}

.social-links a:hover {
  background: var(--card);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-links a {
  color: var(--text);
  padding: .25rem .5rem;
  border-radius: .375rem;
}
.nav-links a:hover { background: var(--card); }

/* Active top-nav item (Home/About/Contact) */
.nav-links a.is-active {
  font-weight: 700;
}

/* Cart lives in the right utility cluster (injected by JS), not inside centered nav links. */
.nav-links a[data-i18n="nav.cart"],
.nav-links a[data-i18n="nav.cart"] + span {
  display: none !important;
}

/* Cart icon and count badge
   Keep the cart count visually close to the "My Cart" label and vertically centered,
   while still using the existing "(<span id='cart-count'>)" markup. */
.nav-links a[data-i18n="nav.cart"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  overflow: visible; /* allow badge to sit outside icon box */
}

/* Icon-only cart: hide the localized text, keep an accessible title/label. */
.nav-links a[data-i18n="nav.cart"] {
  font-size: 0; /* visually hide text node without changing markup */
}
.nav-links a[data-i18n="nav.cart"]::before {
  /* ensure icon remains visible when font-size is 0 */
  flex: 0 0 auto;
}

/* Cart icon to the left of the label */
.nav-links a[data-i18n="nav.cart"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Prefer the provided image under /images; fallback to inline SVG if not present */
  background-image:
    url("/images/icons/bag.png"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l-1.2 12.5a2 2 0 0 1-2 1.5H9.2a2 2 0 0 1-2-1.5L6 7z'/><path d='M9 7V5a3 3 0 1 1 6 0v2'/></svg>");
}

/* Use the existing "(<span id=cart-count>)" markup as a green badge.
   Pull it closer to the label and align vertically with the text baseline. */
.nav-links a[data-i18n="nav.cart"] + span {
  /* Badge wrapper: place it on top of the cart icon (bottom-right). */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;          /* hide literal parentheses characters */
  pointer-events: none;  /* clicks go to the cart link */
  z-index: 2;
  margin-left: -39px;    /* pull the badge over the icon */
  margin-top: 12px;      /* drop it to the bottom of the icon */
}
.nav-links a[data-i18n="nav.cart"] + span #cart-count {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;              /* allows 2+ digits gracefully (pill) */
  border-radius: 9999px;       /* circle for 1-digit, pill for 2+ */
  background: var(--accent);   /* green fill */
  color: #fff;
  font-weight: 700;
  line-height: 1;
  transform: none;             /* rely on flex centering instead of manual vertical offset */
  border: 2px solid #fff;      /* ring so it reads on top of the icon */
}

.lang-select {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}

/* Keep the cart link + count at the far right of the centered nav row. */
.nav-links a[data-i18n="nav.cart"] {
  margin-left: auto;
}
.lang-select select {
  padding: .25rem .45rem;
  border: 1px solid var(--border);
  border-radius: .375rem;
  background: #fff;
  color: var(--text);
  font-size: 1.1rem; /* emoji flags read better slightly larger */
  line-height: 1.1;
  min-width: 2.35rem; /* keep stable width for single glyph */
  text-align: center;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  background: #fff;
  margin-top: 2rem;
}
.site-footer .container {
  padding: 1.5rem 1rem;
  font-size: .9rem;
}

/* Footer socials above copyright */
.site-footer .social-links {
  justify-content: center;
  margin-bottom: .6rem;
}

.site-footer small {
  display: block;
  text-align: center;
}

/* Footer: match footer links + developer credit to copyright style */
.site-footer small,
#tc-link,
#footer-dev-credit {
  display: block;
  text-align: center;
  /* Match <small> default sizing so all footer lines are identical */
  font-size: .8em;
  color: var(--muted);
}

#tc-link a,
#footer-dev-credit a {
  color: inherit;
  text-decoration: none;
}

#tc-link a:hover,
#footer-dev-credit a:hover {
  text-decoration: underline;
}

/* Utilities */
.toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1rem 0;
}

/* Order confirmation: center the primary action on desktop */
body[data-page="order-confirmation"] #order-confirmation-card {
  padding: 1.25rem;
}

@media (min-width: 768px) {
  body[data-page="order-confirmation"] .toolbar {
    justify-content: center;
  }
}

/* Contact page */
.contact-actions {
  /* Let headings/paragraphs align with the page container's left edge */
  max-width: none;
  margin: 0;
}

.toolbar.contact-email {
  justify-content: center;
}

.contact-or {
  margin: .75rem 0;
  color: var(--muted);
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Two horizontal rules with a centered "OR" (matches attached mock). */
.contact-or::before,
.contact-or::after {
  content: "";
  height: 1px;
  background: #000;
  flex: 1 1 0;
}

.contact-or strong {
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: .12em;
}

/* Legacy separator (no longer used on contact page) */
.contact-sep { display: none; }

.contact-via {
  margin: 0 0 .75rem;
  text-align: left;
  color: var(--text);
  font-weight: 600;
}

.contact-form-wrap {
  /* Keep the form centered, but allow the "Via this form" label to align with page content */
  display: flex;
  justify-content: center;
}

.contact-form {
  border: 1px solid #000;
  border-radius: .75rem;
  width: min(720px, 100%);
  padding: 1.25rem;
  background: #fff;
}

.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .75rem;
}

.contact-form .form-row:first-child {
  margin-top: 0;
}

.contact-form label {
  font-weight: 600;
  display: block;
}

.contact-input {
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  width: 100%;
  background: #fff;
  color: var(--text);
}

.contact-form textarea.contact-input {
  resize: vertical;
}

/* Contact form (desktop): send button right (and status right) */
@media (min-width: 861px) {
  body[data-page="contact"] .contact-form {
    display: flex;
    flex-direction: column;
  }

  body[data-page="contact"] .contact-form > button[type="submit"] {
    align-self: flex-end;
  }

  body[data-page="contact"] .contact-form > #contact-form-status,
  body[data-page="contact"] .contact-form > #contact-send-guard {
    align-self: flex-end;
    text-align: right;
    margin-left: auto;
  }
}
input[type='search'], input[type='number'] {
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  width: 100%;
  max-width: 420px;
}

/* Supplier admin: promotion manage form controls should align in height */
body[data-page="supplier-admin"] #promo-details input[type="text"],
body[data-page="supplier-admin"] #promo-details input[type="number"],
body[data-page="supplier-admin"] #promo-details input[type="date"] {
  box-sizing: border-box;
  min-height: 42px;
  height: 42px;
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: #fff;
  color: var(--text);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem .9rem;
  border-radius: .5rem;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--card); }
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.btn.primary:hover { background: var(--primary-600); }

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Compact icon-only buttons (used for image delete/trash in admin UIs) */
.btn.icon {
  padding: .35rem;
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
  gap: 0;
  border-color: #000;
}
.btn.icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Trash (delete image) icon */
.btn.icon-trash {
  color: var(--danger);
  border-color: #000;
}

/* Cart page: smaller delete icon button */
body[data-page="checkout"] .btn.icon.icon-trash {
  color: #9ca3af; /* light gray trash icon on cart */
  padding: .2rem;
  min-width: 26px;
  min-height: 26px;
}
body[data-page="checkout"] .btn.icon.icon-trash svg {
  width: 14px;
  height: 14px;
}

body[data-page="checkout"] .btn.icon-trash:hover {
  background: rgba(156, 163, 175, 0.12);
}
.btn.icon-trash:hover {
  background: rgba(239, 68, 68, 0.06);
  border-color: #000;
}

/* "Set main image" icon – pure black & white */
.btn.icon-main {
  color: #000;               /* icon stroke/fill = black */
}
.btn.icon-main:hover {
  background: var(--card);   /* same neutral hover as regular buttons */
  border-color: var(--border);
}

/* Upload icon – pure black & white */
.btn.icon-upload {
  color: #000;
}
.btn.icon-upload:hover {
  background: var(--card);
  border-color: var(--border);
}

.btn.link {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: .25rem .4rem;
}
.btn.link:hover { color: var(--text); }

/* Cards / Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* Home paging footer (below product grid) */
.home-paging {
  display: grid;
  justify-items: center;
  row-gap: 12px;
  width: 100%;
  margin: 16px 0 28px;
}

.home-paging__status {
  color: var(--muted);
  text-align: center;
  margin-left: 0; /* override global .muted left indent */
}

/* Home paging button: black circled (pill) */
.home-paging #home-load-more {
  justify-self: center;
  border: 2px solid #000;
  background: transparent;
  color: #000;
  border-radius: 999px;
  padding: .55rem 1.05rem;
}

.home-paging #home-load-more:hover {
  background: #000;
  color: #fff;
}

.home-paging #home-load-more:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.home-paging #home-load-more:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Home page (catalog): allow more columns on wide screens without oversized cards */
@media (min-width: 1200px) {
  body[data-page="index"] main.container {
    max-width: 1320px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    justify-content: center;
  }
}

@media (min-width: 1500px) {
  body[data-page="index"] main.container {
    max-width: 1560px;
  }
}
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: #fff;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Collapsible cards (native <details>/<summary>) */
.card > summary.card-summary {
  list-style: none; /* Firefox */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  user-select: none;
}

.card > summary.card-summary::-webkit-details-marker {
  display: none;
}

.card > summary.card-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.card > summary.card-summary::after {
  content: "\25BE"; /* small down triangle */
  color: var(--muted);
  font-size: .95rem;
  line-height: 1;
  margin-left: .5rem;
}

/* When a badge is visible, keep the chevron at the far right. */
.card > summary.card-summary .count-badge + * {
  margin-left: .5rem;
}

.card > summary.card-summary .count-badge {
  margin-left: auto;
}

.card > summary.card-summary .count-badge + .card-summary-spacer {
  display: none;
}

.card[open] > summary.card-summary::after {
  content: "\25B4"; /* small up triangle */
}

.card-summary-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.card-details {
  padding-top: .5rem;
}

/* Pending count badge shown on collapsed summaries only */
.count-badge {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  letter-spacing: .01em;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.06);
}
.card-img {
  background: var(--card);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  overflow: hidden;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-body { padding: .75rem .9rem; }
.card-title { font-size: 1rem; margin: 0 0 .25rem; }
.card-price { font-weight: 600; color: var(--accent); }

/* Sold label used instead of numeric price on cards and product page */
.card-price.sold,
.info .price.sold {
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Home page: sold price label should be grey (localized via i18n + CSS uppercase) */
body[data-page="index"] .card-price.sold {
  color: var(--muted);
}

/* Home page: add a light grey layer over sold product tiles */
body[data-page="index"] .card.is-sold {
  position: relative; /* anchor overlay */
}

body[data-page="index"] .card.is-sold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(243, 244, 246, 0.55); /* light grey layer */
  pointer-events: none;
}

body[data-page="index"] .card .card-img {
  overflow: hidden;
}

body[data-page="index"] .card-sold-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  pointer-events: none;
}

/* Product detail */
.product-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.25rem;
}

/* Product page (desktop): reduce blank space before the Description section.
   The base `.toolbar { margin: 1rem 0; }` applies inside the product action buttons
   block and can add a large band of whitespace above the full-width description row. */
@media (min-width: 861px) {
  body[data-page="product"] .product-layout {
    row-gap: 0.75rem;
  }

  body[data-page="product"] .product-layout .q-wrap .toolbar {
    margin: 0.5rem 0;
  }
}

/* Product page: ensure product code label/value render in black */
body[data-page="product"] .specs li.muted {
  color: #000;
}

/* Product specs: show links as links (global <a> is not underlined) */
body[data-page="product"] .specs a.spec-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}
body[data-page="product"] .specs a.spec-link:hover {
  text-decoration-thickness: 2px;
}

/* Product page: slightly stronger borders for the Share/Watch/Ask buttons */
body[data-page="product"] .product-layout .q-wrap .btn {
  border-color: #9ca3af; /* darker grey for clearer separation */
}

/* Product title shown above carousel on mobile only (see mobile.css overrides) */
.product-title-mobile {
  display: none;
  margin: 0 0 .5rem;
}
.gallery {
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr 1fr;
}
.gallery img {
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--card);
}
.info .price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
}

/* Product page (desktop): remove top whitespace above the product title caused
   by default <h1> margins. */
@media (min-width: 861px) {
  body[data-page="product"] .product-layout .info > h1 {
    margin-top: 0;
  }

  /* Product page (desktop): allow the carousel to extend further down by making
     the left column stretch to the right column's height. */
  body[data-page="product"] .product-layout {
    align-items: stretch;
  }
}



.product-rating-block {
  display: grid;
  gap: .45rem;
  margin: .65rem 0 .35rem;
}

.product-rating-summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

.product-rating-summary-text,
.product-rating-label,
.product-rating-status,
.product-rating-empty {
  margin: 0;
}

.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: .12rem;
  line-height: 1;
}

.rating-star {
  color: #d1d5db;
  font-size: 1.15rem;
}

.rating-star.is-filled {
  color: #f5b301;
}

.rating-stars-input {
  gap: .18rem;
}

.rating-stars-input .rating-star {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 1.35rem;
}

.rating-stars-input.is-busy {
  opacity: .65;
  pointer-events: none;
}

.product-rating-input-wrap {
  display: grid;
  gap: .25rem;
}

/* Product page: live subtotal (unit × qty). Amount only, no label. */
.product-subtotal {
  font-weight: 800;
  white-space: nowrap;
}

/* Sticky buybar: center-emphasize subtotal */
#sticky-buybar-center .product-subtotal {
  display: block;
  text-align: center;
  font-size: 1.15rem;
}

/* Mobile-only "Price:" label (hidden by default; shown in mobile.css). */
.info .price .price-label {
  display: none;
}
.info .desc { color: var(--text); }

/* Preserve line breaks entered in the product description on the product page
   without affecting other description usages elsewhere. */
.product-layout .desc-full .desc {
  white-space: pre-line;
}

.specs ul { margin: .25rem 0; padding-left: 1.1rem; }
.specs li { margin: .15rem 0; }

/* Checkout table */
.table-wrap {
  overflow-x: auto;
}

/* Cart page: center the trash button in the Remove column */
body[data-page="checkout"] #cart-table th:last-child,
body[data-page="checkout"] #cart-table td:last-child {
  text-align: center;
}
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: .5rem;
}

/* My Offers (Desktop):
   Use separated borders to avoid collapsed-border paint glitches when the last cell
   becomes a flex container (Actions column). */
body[data-page="my-offers"] #my-offers-table {
  border-collapse: separate;
  border-spacing: 0;
}
thead th {
  text-align: left;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: .6rem .5rem;
  font-weight: 600;
}
tbody td {
  border-bottom: 1px solid var(--border);
  padding: .6rem .5rem;
  vertical-align: middle;
}

/* My Offers (Desktop):
   Fix zebra-row background misalignment near the Actions column.
   Force per-cell backgrounds from the row, and clip the table at the rounded edge.
   This avoids browser quirks with border-collapse + last-column rendering. */
body[data-page="my-offers"] .table-wrap {
  border-radius: .5rem;
  overflow: hidden; /* ensures row borders clip at the rounded edge */
}
body[data-page="my-offers"] #my-offers-table {
  border-radius: .5rem;
  overflow: hidden; /* clips cell backgrounds to rounded corners */
}
/* Actions column uses flex; ensure it stays vertically centered and doesn't affect row border painting */
body[data-page="my-offers"] #my-offers-table td:last-child {
  vertical-align: middle;
  border-bottom: none;
  background: transparent;
}
body[data-page="my-offers"] #my-offers-table tbody tr:nth-child(even) > td {
  background: var(--card);
}

.cart-product {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.cart-product img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: .375rem;
  border: 1px solid var(--border);
}

/* Cart table thumbnails live in .cart-thumb (not .cart-product). Ensure they never
   expand to full cell width (global img { max-width:100% } would otherwise enlarge them). */
#cart-table .cart-thumb img,
.cart-thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: .375rem;
  border: 1px solid var(--border);
  background: #fff;
}
.cart-total {
  /* Keep the label left, numbers right (works well on mobile too) */
  display: grid;
  gap: .25rem;
  margin: .75rem 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.cart-total > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: .75rem;
}

.cart-total > div > strong {
  justify-self: end;
  text-align: right;
}

/* Desktop cart totals: align label/colon, then "CHF" left and amount right. */
.cart-total.money-grid {
  display: grid;
  grid-template-columns: max-content 1ch max-content;
  column-gap: .35rem; /* visually ~one space */
  row-gap: .25rem;
  align-items: baseline;
}

.cart-total.money-grid > div {
  /* Flatten wrappers so each row participates in the parent grid */
  display: contents;
}

.cart-total.money-grid > div > span[data-i18n] {
  grid-column: 1;
  white-space: nowrap;
}

.cart-total.money-grid .cart-colon {
  grid-column: 2;
  justify-self: center;
}

.cart-total.money-grid .cart-money {
  grid-column: 3;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .12rem; /* tighter CHF-to-amount gap */
  min-width: 10ch; /* keep amounts close to the colon while still aligning */
}

/* Keep totals and CTA as one right-aligned block on desktop. */
.cart-block {
  display: grid;
  justify-content: end;
  justify-items: end;
  row-gap: .15rem;
  margin: .75rem 0;
}

.cart-block .cart-total {
  margin: 0;
}

/* `.cart-actions` lives below the addresses now; no special casing under `.cart-block`. */

.cart-total.money-grid .cart-cur {
  text-align: left;
  justify-self: start;
  white-space: nowrap;
}

.cart-total.money-grid .cart-amt {
  text-align: right;
  justify-self: end;
  white-space: nowrap;
}

/* Cart actions (Place order) aligned under totals on the right */
.cart-actions {
  margin-top: .75rem;      /* separate from Delivery & Billing */
  margin-bottom: 0;        /* avoid extra space below the block */
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* move button and message to the right side */
  gap: .15rem;             /* tighter spacing between button and message */
}

.cart-actions #order-msg {
  text-align: right;
  margin: .1rem 0 0;       /* minimal space above, none below */
  font-size: .9rem;
}

.cart-addresses {
  padding: 0;
  overflow: clip;
}

.cart-addresses-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cart-addresses-toggle:hover {
  background: rgba(15, 23, 42, 0.03);
}

.cart-addresses-toggle:focus-visible {
  outline: 2px solid var(--brand, #1d4ed8);
  outline-offset: -2px;
}

.cart-addresses-toggle-icon {
  flex: 0 0 auto;
  width: .8rem;
  height: .8rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-right: .2rem;
}

.cart-addresses-toggle[aria-expanded="true"] .cart-addresses-toggle-icon {
  transform: rotate(225deg);
}

.cart-addresses-content {
  padding: 0 1.1rem .75rem;
}

@media (min-width: 769px) {
  #checkout-identity-section .cart-addresses-content {
    padding-bottom: 0;
  }
}

/* Emphasize primary CTA "Proceed to checkout" / "To payment" on cart page */
#place-order {
  /* Base .btn padding is .6rem .9rem; double height and 1.5× width here */
  padding: 1.2rem 1.35rem;
  font-size: 1.05rem;          /* slightly larger text for prominence */
  min-width: 180px;            /* ensure visibly wider button */
  justify-content: center;     /* center the text inside the wider flex button */
  text-align: center;
}

/* Desktop checkout-type Next button should match the main cart CTA height */
@media (min-width: 769px) {
  body[data-page="checkout"] #checkout-identity-section .cart-addresses-content {
    padding-bottom: .2rem;
  }

  body[data-page="checkout"] #addresses-section .cart-addresses-content {
    padding-bottom: .2rem;
  }

  body[data-page="checkout"] #checkout-identity-section .card:last-of-type {
    margin-bottom: .25rem !important;
  }

  body[data-page="checkout"] #addresses-section .toolbar {
    margin-top: 0 !important;
    margin-bottom: 0;
  }

  body[data-page="checkout"] #addresses-section #addresses-actions {
    justify-content: flex-end;
    align-items: flex-start;
  }

  body[data-page="checkout"] #addresses-section .addresses-save-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
  }

  body[data-page="checkout"] #addresses-section #addresses-next {
    margin-top: 0;
    margin-bottom: 0;
  }

  body[data-page="checkout"] #addresses-section #addresses-msg {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    text-align: left;
  }

  body[data-page="checkout"] #checkout-identity-section .toolbar {
    margin-top: .35rem !important;
    margin-bottom: .15rem;
  }

  #checkout-identity-next,
  #addresses-next {
    padding: 1.2rem 1.35rem;
    font-size: 1.05rem;
    min-width: 180px;
    justify-content: center;
    text-align: center;
  }
}

/* States */
#empty-cart {
  padding: 1rem;
  background: #fff8f1;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: .5rem;
}

/* Animations */
.pulse { animation: pulse .3s ease; }
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Responsive */
@media (max-width: 860px) {
  .product-layout { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .navbar { flex-wrap: wrap; gap: .5rem; }
  .nav-links { gap: .6rem; }
  .gallery { grid-template-columns: 1fr; }
}

/* Shared mobile-header layout
   Applies on dedicated /Mobile/ pages via mobile.css and also on desktop routes
   when the viewport is narrow or the URL forces mobile mode (?mobile=true|1). */
@media (max-width: 768px) {
  :root {
    --mobile-brand-vspace: 2.35rem;
    --mobile-site-title-font: 1.55rem;
    --mobile-site-title-line: 1.78rem;
    --mobile-lang-select-width: 3.7rem;
    --mobile-lang-select-reserve: 4.6rem;
  }

  .navbar {
    flex-wrap: wrap;
    align-items: center;
    position: relative;
  }

  .navbar .brand { order: 1; }
  .navbar .nav-links { order: 2; }
  .navbar .header-right { order: 3; }

  .navbar .brand {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: var(--mobile-brand-vspace);
    margin-bottom: .35rem;
  }

  .navbar .brand #site-title {
    display: inline-block;
    font-size: var(--mobile-site-title-font);
    line-height: var(--mobile-site-title-line);
    max-width: 100%;
    padding-right: 0;
  }

  .navbar .header-right .lang-select {
    display: inline-flex;
    position: absolute;
    top: .8rem;
    right: .8rem;
    transform: none;
  }

  .navbar .header-right .lang-select select {
    width: var(--mobile-lang-select-width);
    min-width: var(--mobile-lang-select-width);
    max-width: var(--mobile-lang-select-width);
    padding: .24rem 1.45rem .24rem .6rem;
    text-align: left;
  }

  .navbar .header-right {
    flex: 0 0 auto;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    margin-top: .45rem;
    justify-content: flex-end;
  }

  .navbar .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: .25rem;
    margin-left: 0;
    justify-content: flex-start;
    gap: .35rem;
  }

  .navbar .nav-links a,
  .navbar .nav-links span {
    white-space: nowrap;
  }

  .navbar .nav-links a {
    padding: .45rem .55rem;
  }

  .navbar .lang-select {
    z-index: 2;
  }

  .navbar #user-name {
    display: none !important;
  }

  .navbar .auth-widget {
    gap: .32rem;
  }

  .navbar .auth-widget .auth-icon-btn {
    width: 2.2rem;
    height: 2.2rem;
    min-width: 2.2rem;
    min-height: 2.2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .navbar .auth-widget .auth-icon-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
  }
}

body[data-force-mobile-header="1"] .navbar {
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

body[data-force-mobile-header="1"] .navbar .brand { order: 1; }
body[data-force-mobile-header="1"] .navbar .nav-links { order: 2; }
body[data-force-mobile-header="1"] .navbar .header-right { order: 3; }

body[data-force-mobile-header="1"] .navbar .brand {
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 2.35rem;
  margin-bottom: .35rem;
}

body[data-force-mobile-header="1"] .navbar .brand #site-title {
  display: inline-block;
  font-size: 1.55rem;
  line-height: 1.78rem;
  max-width: 100%;
  padding-right: 0;
}

body[data-force-mobile-header="1"] .navbar .header-right .lang-select {
  display: inline-flex;
  position: absolute;
  top: .8rem;
  right: .8rem;
  transform: none;
}

body[data-force-mobile-header="1"] .navbar .header-right .lang-select select {
  width: 3.7rem;
  min-width: 3.7rem;
  max-width: 3.7rem;
  padding: .24rem 1.45rem .24rem .6rem;
  text-align: left;
}

body[data-force-mobile-header="1"] .navbar .header-right {
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  margin-top: .45rem;
  justify-content: flex-end;
}

body[data-force-mobile-header="1"] .navbar .nav-links {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: .25rem;
  margin-left: 0;
  justify-content: flex-start;
  gap: .35rem;
}

body[data-force-mobile-header="1"] .navbar .nav-links a,
body[data-force-mobile-header="1"] .navbar .nav-links span {
  white-space: nowrap;
}

body[data-force-mobile-header="1"] .navbar .nav-links a {
  padding: .45rem .55rem;
}

body[data-force-mobile-header="1"] .navbar .lang-select {
  z-index: 2;
}

body[data-force-mobile-header="1"] .navbar #user-name {
  display: none !important;
}

body[data-force-mobile-header="1"] .navbar .auth-widget {
  gap: .32rem;
}

body[data-force-mobile-header="1"] .navbar .auth-widget .auth-icon-btn {
  width: 2.2rem;
  height: 2.2rem;
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

body[data-force-mobile-header="1"] .navbar .auth-widget .auth-icon-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

/* Carousel */
.carousel {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

/* Product page: hide text prev/next controls (use dots/swipe/keyboard instead). */
body[data-page="product"] #carousel #c-prev,
body[data-page="product"] #carousel #c-next {
  display: none;
}
.carousel-viewport {
  flex: 1;
  aspect-ratio: 4/3;
  border: 1px solid var(--border);
  border-radius: .5rem;
  overflow: hidden; /* keep ribbons constrained to the carousel box */
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Prevent ugly blue selection highlight on rapid clicks (desktop) */
  -webkit-user-select: none;
  user-select: none;
}

/* Product page (desktop): let the carousel grow taller than the fixed 4:3 box
   so its border can extend down alongside the right column. */
@media (min-width: 861px) {
  body[data-page="product"] .carousel-viewport {
    aspect-ratio: auto;
    min-height: 560px;
  }
}



/* Overlays should never block video controls */
#c-overlays {
  pointer-events: none;
}

/* Sold/promo diagonal ribbons removed */
.carousel-viewport img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Product carousel: ensure video occupies the same box as images */
.carousel-viewport video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Safari: avoid "letterbox" showing the viewport background around video */
body[data-page="product"] .carousel-viewport {
  background: #000;
}

/* While video hasn't started, the native poster/controls can appear with a dark tint.
   Ensure it covers the full viewport by stretching the video element itself. */
body[data-page="product"] .carousel-viewport video {
  width: 100%;
  height: 100%;
}

.carousel-dots {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.carousel-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}
.carousel-dots button.active {
  background: var(--primary);
  border-color: var(--primary);
}

/* Product page: bottom related products horizontal carousel */
.related-products {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.related-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.related-products-title {
  margin: 0;
  font-size: 1.05rem;
}

.related-products-viewport {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.related-products-viewport::-webkit-scrollbar {
  height: 10px;
}

.related-products-viewport::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

.related-product-card {
  flex: 0 0 auto;
  width: 220px;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: #fff;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.related-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  border-color: #d1d5db;
}

.related-product-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.related-product-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Clip image corners inside the related-products carousel cards */
  border-radius: .6rem;
  overflow: hidden;
}

.related-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: inherit;
}

.related-product-thumb.is-empty {
  background: repeating-linear-gradient(
    135deg,
    #f3f4f6,
    #f3f4f6 10px,
    #ffffff 10px,
    #ffffff 20px
  );
}

.related-product-meta {
  padding: .6rem .65rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.related-product-title {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.5em;
}

.related-product-price {
  font-size: .95rem;
  color: var(--text);
}

.related-product-price.sold {
  color: var(--muted);
}

/* Reuse promo price styles on related cards */
.related-product-price .price-original {
  text-decoration: line-through;
  color: var(--muted);
}

.related-product-price .price-sale {
  color: var(--danger);
  font-weight: 700;
}

@media (max-width: 860px) {
  .related-products-head {
    align-items: flex-start;
  }
}

/* Layout with left sidebar for categories */
.layout {
  display: grid;
  grid-template-columns: minmax(220px, 24%) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.sidebar {
  position: sticky;
  top: 64px; /* below sticky header */
  max-height: calc(100vh - 64px);
  overflow: auto;
  background: #fff;
  border-radius: .25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sidebar h2 {
  margin: 0 0 .75rem;
  font-size: 1rem;
  color: var(--text);
}
.sidebar-panel {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #fff;
}
.sidebar-panel-body {
  min-width: 0;
}
.sidebar-panel-categories {
  padding-bottom: .9rem;
}
.category-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.cat-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border-radius: .5rem;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: .95rem;
}
.cat-item:hover {
  background: var(--card);
}
.cat-item.active {
  background: rgba(139, 92, 246, 0.10);
  border-color: var(--primary);
  color: var(--primary-600);
}

/* Responsive adjustments for sidebar layout */
@media (max-width: 860px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    max-height: none;
    margin-bottom: 1rem;
  }
  .category-list {
    flex-direction: column;
  }
}

/* Utility muted text */
.muted { color: var(--muted); font-size: .9rem; margin-left: .5rem; }

/* About page: subtitle should be left-aligned, black, and slightly larger */
body[data-page="about"] .about-subtitle {
  margin: .25rem 0 1rem;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
}

/* When subtitle moves inside .about-text, remove top gap */
body[data-page="about"] .about-text .about-subtitle {
  margin-top: 0;
}

/* About page: image (left) + text (right) */
body[data-page="about"] .about-layout {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-top: .5rem;
}

body[data-page="about"] .about-media {
  margin: 0;
}

body[data-page="about"] .about-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.16);
}

body[data-page="about"] .about-text p:first-child {
  margin-top: 0;
}

@media (max-width: 860px) {
  body[data-page="about"] .about-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="about"] .about-media {
    max-width: 520px;
  }
}

/* Auth header widget */
.auth-widget { display: inline-flex; align-items: center; gap: .5rem; }
.auth-widget #user-name { font-weight: 600; color: var(--text); }
.btn.rounded { border-radius: 9999px; }

/* Header right container (language + auth) */
.header-right { display: inline-flex; align-items: center; gap: .75rem; }

/* Avatar icon next to signed-in user name */
.avatar { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; color: #000; }
.avatar svg { width:20px; height:20px; display:block; }


/* Sold/promo diagonal ribbons removed */

.price-original {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 600;
  margin-right: .35rem;
}

.price-sale {
  color: var(--danger);
  font-weight: 800;
}

/* Sold/promo diagonal ribbon styles removed */

/* Sold-out purchase state */
.sold-out-msg {
  display: none;
  align-items: center;
  padding: .6rem .9rem;
  border-radius: .5rem;
  border: 1px solid var(--border);
  font-weight: 700;
  color: var(--danger); /* high-contrast text */
  min-height: 42px;    /* match button height to prevent layout shift */
  line-height: 1;
}
.actions[data-sold-out="1"] .btn-add-to-cart { display: none; }
.actions[data-sold-out="1"] .sold-out-msg { display: inline-flex; }
/* Safety net: never show offer/promo pricing while sold out */
.actions[data-sold-out="1"] .price-original,
.actions[data-sold-out="1"] .price-sale {
  display: none !important;
}

/* Filter bar (responsive, accessible) */
.filter-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .85rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible; /* allow dropdowns and popovers to escape */
}

.fb-section-title {
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
}

/* Home sidebar filters: enforce consistent control heights */
body[data-page="index"] .sidebar-panel {
  --home-filter-control-h: 38px;
}
body[data-page="index"] .layout-with-sidebar-toggle {
  --home-left-panel-width: 260px;
  --home-filters-section-height: auto;
  position: relative;
  display: block;
  gap: 0;
  align-items: start;
}
body[data-page="index"] .home-sidebar-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--home-left-panel-width);
  min-width: 0;
  max-width: min(420px, calc(100vw - 2rem));
  padding: .9rem;
  border: 1px solid #d9dee7;
  border-radius: 1.15rem;
  background: linear-gradient(180deg, #fafbfc 0%, #f6f8fb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 16px 32px rgba(15, 23, 42, 0.16);
  z-index: 4;
}
body[data-page="index"] .home-sidebar-shell-toggle {
  list-style: none;
  position: absolute;
  top: .45rem;
  left: .9rem;
  right: .9rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  width: auto;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  z-index: 2;
}
body[data-page="index"] .home-sidebar-shell-toggle-collapsed-icons {
  display: none;
}
body[data-page="index"] .home-sidebar-shell-toggle::-webkit-details-marker {
  display: none;
}
body[data-page="index"] .home-sidebar-shell-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
body[data-page="index"] .home-sidebar-shell > .home-sidebar-shell-toggle::after {
  content: none;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
}
body[data-page="index"] .home-sidebar-shell-toggle .sidebar-results-count {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: center;
  flex: 0 1 auto;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}
body[data-page="index"] .home-sidebar-shell-toggle > #fb-clear.icon-eraser {
  flex: 0 0 auto;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: .35rem;
  margin: 0;
  margin-left: .25rem;
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(255, 255, 255, 0.95);
  z-index: 1;
}
body[data-page="index"] .home-sidebar-shell:not([open]) > .home-sidebar-shell-toggle::after {
  content: none;
}
body[data-page="index"] .home-sidebar-shell:not([open]) > .home-sidebar-shell-toggle {
  top: .55rem;
  left: 50%;
  right: auto;
  width: 30px;
  height: auto;
  padding-top: 0;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .35rem;
}
body[data-page="index"] .home-sidebar-shell:not([open]) > .home-sidebar-shell-toggle::after {
  margin-left: 0;
}
body[data-page="index"] .home-sidebar-shell:not([open]) > .home-sidebar-shell-toggle .sidebar-results-count {
  display: none;
}
body[data-page="index"] .home-sidebar-shell:not([open]) > .home-sidebar-shell-toggle > #fb-clear.icon-eraser {
  display: none;
}
body[data-page="index"] .home-sidebar-shell:not([open]) > .home-sidebar-shell-toggle .home-sidebar-shell-toggle-collapsed-icons {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}
body[data-page="index"] .home-sidebar-shell[open] > .sidebar {
  display: flex;
}
body[data-page="index"] .home-sidebar-shell:not([open]) > .sidebar {
  display: none;
}
body[data-page="index"] .home-sidebar-shell-collapsed {
  display: none;
}
body[data-page="index"] .home-sidebar-shell-collapsed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #111;
}
body[data-page="index"] .home-sidebar-shell-collapsed-icon svg,
body[data-page="index"] .home-sidebar-shell-collapsed-icon img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
body[data-page="index"] .home-sidebar-shell:not([open]) {
  width: 42px;
  min-height: 100%;
  padding: .9rem .55rem;
  background: #fff;
  box-shadow: none;
}
body[data-page="index"] .home-sidebar-shell:not([open]) > .home-sidebar-shell-collapsed {
  display: none;
}
body[data-page="index"] .home-sidebar-shell-collapsed-title {
  display: none;
}
body[data-page="index"] .layout-with-sidebar-toggle > .content {
  position: relative;
  z-index: 1;
  min-width: 0;
}
body[data-page="index"] .sidebar {
  position: static;
  max-height: none;
  overflow: visible;
  gap: .85rem;
  padding-top: 2.25rem;
  min-width: 0;
}
body[data-page="index"] .sidebar-results-count {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0;
  text-align: left;
}
body[data-page="index"] .sidebar-results-count #fb-count {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
body[data-page="index"] .sidebar-panel-collapsible {
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(217, 222, 231, 0.9);
  border-radius: .95rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}
body[data-page="index"] .sidebar-panel-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem .95rem;
  cursor: pointer;
  user-select: none;
}
body[data-page="index"] .sidebar-panel-summary::-webkit-details-marker {
  display: none;
}
body[data-page="index"] .sidebar-panel-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
body[data-page="index"] .sidebar-panel-summary::after {
  content: "\25BE";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1;
  transition: transform .18s ease, color .18s ease;
}
body[data-page="index"] .sidebar-panel-collapsible[open] > .sidebar-panel-summary::after {
  transform: rotate(180deg);
  color: var(--text);
}
body[data-page="index"] .sidebar-panel-summary-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
}
body[data-page="index"] .sidebar-panel-filters > .sidebar-panel-summary > .sidebar-panel-summary-title {
  margin-right: 0;
  min-width: 0;
}
body[data-page="index"] .sidebar-panel-filters > .sidebar-panel-summary {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .5rem;
}
body[data-page="index"] .sidebar-panel-filters > .sidebar-panel-summary::after {
  justify-self: end;
}
body[data-page="index"] .sidebar-panel-collapsible > .sidebar-panel-body {
  padding: 0 .95rem .95rem;
}
body[data-page="index"] .sidebar-panel .filter-bar input,
body[data-page="index"] .sidebar-panel .filter-bar button {
  min-height: var(--home-filter-control-h);
}
body[data-page="index"] .sidebar-panel-filters {
  position: relative;
}
body[data-page="index"] .sidebar-panel-filters::before {
  display: none;
}
body[data-page="index"] .sidebar-panel-body-filters {
  max-height: min(30.6vh, 274px);
  overflow-y: auto;
  overflow-x: visible;
  padding-right: .3rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.9) transparent;
}
body[data-page="index"] .sidebar-panel-body-filters::-webkit-scrollbar {
  width: 8px;
}
body[data-page="index"] .sidebar-panel-body-filters::-webkit-scrollbar-track {
  background: transparent;
}
body[data-page="index"] .sidebar-panel-body-filters::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.72);
  border-radius: 999px;
}
body[data-page="index"] .sidebar-panel-body-filters .filter-bar {
  gap: .8rem;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-ops + .fb-search {
  margin-top: -.45rem;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-section {
  padding: .7rem .75rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: .9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
body[data-page="index"] .sidebar-panel-body-filters .fb-status {
  align-items: flex-start;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-ops {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 0;
  margin: -.3rem 0 -.55rem;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-ops .filter-toggle {
  display: inline-flex;
  min-height: 0;
  line-height: 1.1;
  margin: 0;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-ops .fb-status {
  display: none;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-ops .fb-status {
  min-height: 0;
  display: block;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-ops #fb-loading[aria-hidden="true"] {
  display: none;
}

/* Home sidebar: black borders for key filter controls */
body[data-page="index"] #fb-q {
  border-color: #555;
  width: 100%;
  max-width: 100%;
}
body[data-page="index"] #fb-price-min,
body[data-page="index"] #fb-price-max {
  border-color: #555;
}
body[data-page="index"] .fb-price-prefix {
  color: var(--text);
  font-weight: 600;
}
body[data-page="index"] .fb-to {
  color: var(--muted);
  font-weight: 600;
  padding: 0 .1rem;
}
body[data-page="index"] #fb-clear {
  border-color: #555;
}
body[data-page="index"] #fb-country-button {
  border-color: #555;
}
body[data-page="index"] .fb-dropdown {
  border-color: #555;
}
body[data-page="index"] #fb-country-menu.fb-dropdown {
  border: 1px solid #555;
}

body[data-page="index"] .fb-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .45rem;
  width: 100%;
  min-width: 0;
  white-space: normal;
}

body[data-page="index"] .fb-search,
body[data-page="index"] .fb-price,
body[data-page="index"] .fb-country,
body[data-page="index"] .fb-ops {
  width: 100%;
}

body[data-page="index"] .fb-ops {
  gap: 0;
}

body[data-page="index"] .fb-range {
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
  align-items: stretch;
  min-width: 0;
}

body[data-page="index"] .fb-range .fb-sliders {
  order: 3;
}

body[data-page="index"] .fb-range .fb-unit {
  order: 4;
  justify-self: end;
  color: var(--muted);
  font-size: .85rem;
}

body[data-page="index"] .fb-country-wrap,
body[data-page="index"] #fb-country-button {
  width: 100%;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-country {
  position: relative;
  z-index: 3;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-country-wrap {
  position: relative;
  z-index: 4;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-section input[type="search"],
body[data-page="index"] .sidebar-panel-body-filters .fb-section input[type="number"],
body[data-page="index"] .sidebar-panel-body-filters .fb-search input[type="search"],
body[data-page="index"] .sidebar-panel-body-filters #fb-country-filter,
body[data-page="index"] .sidebar-panel-body-filters #fb-country-button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-chip {
  max-width: 100%;
}
body[data-page="index"] .sidebar-panel-body-filters .fb-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-page="index"] .sidebar-panel-body-categories {
  max-height: none;
  overflow: visible;
}
body[data-page="index"] .panel-resizer {
  position: relative;
  flex: 0 0 auto;
}
body[data-page="index"] .panel-resizer::before {
  content: "";
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
}
body[data-page="index"] .panel-resizer-shell {
  position: absolute;
  top: .9rem;
  right: -.55rem;
  bottom: .9rem;
  width: 12px;
  cursor: col-resize;
}
body[data-page="index"] .panel-resizer-shell::before {
  display: none;
}

body[data-page="index"] .fb-ops {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .65rem;
}

@media (max-width: 860px) {
  body[data-page="index"] .layout-with-sidebar-toggle {
    display: block;
    gap: 0;
  }

  body[data-page="index"] .layout-with-sidebar-toggle {
    --home-left-panel-width: auto;
    --home-filters-section-height: auto;
    --home-categories-section-height: auto;
  }

  body[data-page="index"] .home-sidebar-shell {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    z-index: auto;
  }

  body[data-page="index"] .home-sidebar-shell > .home-sidebar-shell-toggle,
  body[data-page="index"] .home-sidebar-shell:not([open]) > .home-sidebar-shell-toggle,
  body[data-page="index"] .home-sidebar-shell:not([open]) > .home-sidebar-shell-collapsed {
    display: none;
  }

  body[data-page="index"] .home-sidebar-shell:not([open]) > .sidebar,
  body[data-page="index"] .home-sidebar-shell[open] > .sidebar {
    display: flex;
  }

  body[data-page="index"] .sidebar-panel-collapsible {
    padding: 1rem;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: #fff;
  }

  body[data-page="index"] .sidebar-panel-summary {
    padding: 0 0 .85rem;
  }

  body[data-page="index"] .sidebar-panel-collapsible > .sidebar-panel-body {
    padding: 0;
    height: auto;
  }

  body[data-page="index"] .panel-resizer {
    display: none;
  }

  body[data-page="index"] .sidebar-panel-body-filters {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  body[data-page="index"] .sidebar-panel-body-filters .fb-section {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="index"] .sidebar-panel-filters {
    box-shadow: none;
    background: #fff;
  }

  body[data-page="index"] .sidebar-panel-filters::before {
    display: none;
  }
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
}

body[data-page="index"] .fb-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 1.25rem;
}

/* Icon-only clear button (eraser) */
body[data-page="index"] #fb-clear.icon-eraser {
  padding: .35rem;
  width: 100%;
  min-width: 38px;
  min-height: 38px;
  justify-content: center;
  gap: 0;
}
body[data-page="index"] #fb-clear.icon-eraser img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.filter-bar *:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.fb-section {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.fb-section input[type="search"],
.fb-section input[type="number"] {
  max-width: 180px;
  min-width: 120px;
}
.fb-search input[type="search"] {
  max-width: 300px;
  min-width: 180px;
}

.fb-range {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.fb-range .fb-unit {
  color: var(--muted);
  font-size: .9rem;
}

/* Dual-handle sliders (two overlapping range inputs) */
.fb-sliders {
  display: none !important;         /* hide sliders to free up space */
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.fb-sliders input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none; /* interactions are via number inputs; range tracks are visual */
  -webkit-appearance: none;
  background: transparent;
  height: 26px;
}
.fb-sliders input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; /* allow keyboard focus */
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 1px solid var(--primary-600);
}
.fb-sliders input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 1px solid var(--primary-600);
}
.fb-sliders input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--border) 0 100%);
}
.fb-sliders input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}

/* Country multi-select dropdown */
.fb-country-wrap { position: relative; }

/* Make the country button visually larger and show a clear dropdown arrow */
#fb-country-button {
  min-width: 200px;                 /* roughly twice the default small-button width */
  padding-right: 2.1rem;            /* extra space for the arrow */
  justify-content: space-between;   /* text on left, arrow on right */
}
#fb-country-button::after {
  content: "▾";
  margin-left: .35rem;
  font-size: .85rem;
  color: var(--muted);
}
#fb-country-button[aria-expanded="true"]::after {
  content: "▴";
}

.fb-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 240px;
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  padding: .4rem;
}
.fb-dropdown[hidden] { display: none !important; }
.fb-dropdown-search {
  position: sticky;
  top: 0;
  background: #fff;
  padding-bottom: .35rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.fb-dropdown-search input {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: .4rem;
}
.fb-options {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.fb-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .4rem;
  border-radius: .35rem;
  cursor: pointer;
}
.fb-option:hover { background: var(--card); }
.fb-option input[type="checkbox"] { pointer-events: none; }

/* Chips for selected countries */
.fb-chips {
  display: inline-flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
  margin-left: .25rem;
}
.fb-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .5rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: #fff;
  font-size: .9rem;
}
.fb-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Loading spinner (subtle) */
.fb-loading {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: fb-spin 1s linear infinite;
  margin-left: .35rem;
}
@keyframes fb-spin {
  to { transform: rotate(360deg); }
}

/* Black & white dots-in-a-circle loader */
.bw-dots {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* 8 dots around a ring */
  box-shadow:
    0 -7px 0 0 rgba(0,0,0,1),
    5px -5px 0 0 rgba(0,0,0,.82),
    7px 0 0 0 rgba(0,0,0,.64),
    5px 5px 0 0 rgba(0,0,0,.46),
    0 7px 0 0 rgba(0,0,0,.28),
    -5px 5px 0 0 rgba(0,0,0,.18),
    -7px 0 0 0 rgba(0,0,0,.12),
    -5px -5px 0 0 rgba(0,0,0,.08);
  animation: bw-dots-spin .9s linear infinite;
}
@keyframes bw-dots-spin {
  to { transform: rotate(360deg); }
}

/* Clear button and status */
.fb-ops {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

body[data-page="index"] .sidebar-panel-body-filters .fb-ops {
  display: block;
  align-items: initial;
  gap: 0;
  line-height: 1;
}

body[data-page="index"] .sidebar-panel-body-filters .fb-ops .filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  line-height: 1;
}

body[data-page="index"] .sidebar-panel-body-filters .fb-ops .filter-toggle input {
  margin: 0;
}
#fb-count { color: var(--muted); font-size: .9rem; }

/* Narrow view handling: allow wrapping to keep control order while remaining touch-friendly */
@media (max-width: 820px) {
  .filter-bar {
    flex-wrap: wrap;
    row-gap: .6rem;
  }
  .fb-section {
    flex: 1 1 auto;
  }
  .fb-range .fb-sliders {
    width: 120px;
    min-width: 120px;
  }
}

/* Checkout • Supplier groups and pickup switch */
.sup-group {
  border: 1px solid #000;
  border-radius: .6rem;
  padding: .75rem;
  margin: .75rem 0;
  background: #fff;
}

.sup-package {
  margin-top: .75rem;
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: #fafafa;
}

.sup-package-title {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .35rem;
}
.sup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.sup-head-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  flex-wrap: wrap;
}

/* Supplier header: "Supplier: NAME  [pin] City, Country" */
.sup-head-main {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  font-size: .95rem;
}

.sup-supplier-label {
  font-weight: 600;
  margin-right: .15rem;
}

.sup-supplier-name {
  font-weight: 600;
}

.sup-location {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--muted);
  /* Match pickup switch label size */
  font-size: .9rem;
}

/* Ensure location button inherits the same typography as the pickup label */
.sup-location-link {
  font: inherit;
  font-size: inherit;
  color: inherit;
}

.sup-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--danger, #b00020);
}

.sup-pin svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Legacy bullet list (kept for fallback) */
.sup-items {
  margin: .25rem 0 .5rem;
  padding-left: 1rem;
}

/* Per-supplier table: thumbnail, product, unit, qty, line total, remove */
.sup-table {
  width: 100%;
  border-collapse: collapse;
  margin: .35rem 0 .5rem;
  border: none; /* avoid double border inside .sup-group card */
  table-layout: fixed; /* enforce consistent column widths across all supplier tables */
}

/* Order details page uses a different sup-table shape (no thumbnail/remove columns):
   1) product title
   2) product code
   3) qty
   4) unit price
   5) total
   The generic .sup-table rules above are tuned for the cart/checkout supplier tables (6 columns)
   and cause cramped/overlapping columns on orderdetails.html.
*/
body[data-page="order-details"] .sup-group {
  overflow-x: auto; /* allow horizontal scroll instead of text overlap on narrower viewports */
}
body[data-page="order-details"] .sup-table {
  min-width: 720px; /* enough room for amounts + long titles; scroll if container is narrower */
}
body[data-page="order-details"] .sup-table th:nth-child(1),
body[data-page="order-details"] .sup-table td:nth-child(1) {
  width: auto;
}
body[data-page="order-details"] .sup-table th:nth-child(2),
body[data-page="order-details"] .sup-table td:nth-child(2) {
  width: 140px;
  white-space: nowrap;
  padding-left: .9rem; /* add breathing room between title and code */
}
body[data-page="order-details"] .sup-table th:nth-child(3),
body[data-page="order-details"] .sup-table td:nth-child(3) {
  width: 64px;
  text-align: right;
  white-space: nowrap;
}
body[data-page="order-details"] .sup-table th:nth-child(4),
body[data-page="order-details"] .sup-table td:nth-child(4) {
  width: 120px;
  text-align: right;
  white-space: nowrap;
}
body[data-page="order-details"] .sup-table th:nth-child(5),
body[data-page="order-details"] .sup-table td:nth-child(5) {
  width: 120px;
  text-align: right;
  white-space: nowrap;
}
.sup-table thead th {
  background: var(--card);
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}
.sup-table th,
.sup-table td {
  padding: .45rem .4rem;
  vertical-align: middle;
}
.sup-table th:first-child,
.sup-table td:first-child {
  width: 52px; /* fixed thumb column so headers align with images */
}

/* Column widths are fixed so all supplier groups share the same layout:
   1) thumb (fixed px)
   2) product (flexes to fill remaining)
   3) price  (narrow, fixed px)
   4) qty    (narrow, fixed px)
   5) total  (narrow, fixed px)
   6) remove (narrow, fixed px)
*/
.sup-table th:nth-child(2),
.sup-table td:nth-child(2) {
  width: auto;           /* product column takes remaining space */
}
.sup-table th:nth-child(3),
.sup-table td:nth-child(3) {
  width: 90px;
  text-align: left;
  white-space: nowrap;
}
.sup-table th:nth-child(4),
.sup-table td:nth-child(4) {
  width: 70px;
  text-align: left;
}
.sup-table th:nth-child(5),
.sup-table td:nth-child(5) {
  width: 110px;
  text-align: left;
  white-space: nowrap;
}
.sup-table th:nth-child(6),
.sup-table td:nth-child(6) {
  width: 90px;
  text-align: left;
}

/* Cart page: supplier-group Remove column uses an icon button */
body[data-page="checkout"] .sup-table th:nth-child(6),
body[data-page="checkout"] .sup-table td:nth-child(6) {
  text-align: center;
}
 
.sup-table img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: .375rem;
  border: 1px solid var(--border);
  background: #fff;
}
.sup-table a {
  font-weight: 500;
}
.sup-table select.sup-qty {
  min-width: 64px;
  padding: .3rem .4rem;
  border: 1px solid var(--border);
  border-radius: .4rem;
  background: #fff;
}
.sup-table .btn.link.sup-remove {
  white-space: nowrap;
}
 
/* Supplier group totals – stacked rows aligned with the Total column */
.sup-totals {
  margin-top: .35rem;
  display: grid;
  /* Columns correspond to sup-table:
     1) thumb   52px
     2) product auto
     3) price   90px
     4) qty     70px
     5) total   110px  <-- values sit here
     6) remove  90px
  */
  grid-template-columns: 52px auto 90px 70px 110px 90px;
  row-gap: .15rem;
  column-gap: 0;
  font-size: .9rem;
}

/* Order details totals alignment (matches the 5-column order-details sup-table) */
body[data-page="order-details"] .sup-totals {
  grid-template-columns: auto 140px 64px 120px 120px;
}
body[data-page="order-details"] .sup-totals-label {
  grid-column: 4 / 5;
  text-align: right;
}
body[data-page="order-details"] .sup-totals-value {
  grid-column: 5 / 6;
  text-align: right;
  padding-left: 0;
}
 
.sup-totals-label {
  grid-column: 4 / 5;   /* label just to the left of the Total values */
  text-align: right;
  font-weight: 600;
}
 
.sup-totals-value {
  grid-column: 5 / 6;   /* same column as Total amounts in sup-table */
  text-align: left;
  padding-left: .4rem;  /* match sup-table cell left padding for perfect horizontal alignment */
}

/* Compact layout on small screens: hide unit column to save space */
@media (max-width: 640px) {
  .sup-table th:nth-child(3),
  .sup-table td:nth-child(3) {
    display: none; /* hide unit price column + header */
  }
}

/* Note above supplier groups */
#separate-suppliers-note {
  margin: .5rem 0 1rem;
  display: block;
}

/* Accessible slider-style toggle */
.switch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
}
.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: #d1d5db;
  border-radius: 9999px;
  transition: background .15s ease;
  box-shadow: inset 0 0 0 1px var(--border);
}
.switch-slider::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform .15s ease;
}
.switch-input:checked + .switch-slider {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.switch-input:checked + .switch-slider::after {
  transform: translateX(20px);
}
.switch-label {
  font-size: .9rem;
  color: var(--text);
}

/* Alerts */
.alert {
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: #fff;
  margin: .75rem 0;
}
.alert.danger {
  border-color: #fecaca;
  background: #fff1f2;
  color: #7f1d1d;
}

/* Field errors (shared) */
.field-error {
  color: var(--danger);
  font-size: .9rem;
  margin-top: .35rem;
  min-height: 1.1em;
}

/* Payment page: add consistent inner padding for the summary + payment cards */
body[data-page="payment"] .payment-layout .card,
body[data-page="checkout"] .embedded-payment-card {
  padding: 1rem 1.1rem;
}

body[data-page="payment"] .payment-layout .card > h2,
body[data-page="checkout"] .embedded-payment-card > h2 {
  margin: 0 0 .5rem;
}

/* .muted has a global left-margin; avoid extra indentation inside payment cards */
body[data-page="payment"] .payment-layout .card .muted,
body[data-page="checkout"] .embedded-payment-card .muted {
  margin-left: 0;
}

/* Payment page: totals + CTA layout (desktop + mobile) */
body[data-page="payment"],
body[data-page="checkout"] {
  --payment-total-value-col: 12ch;
}

body[data-page="payment"] .cart-total {
  /* One 3-column grid so colons align vertically */
  display: grid;
  grid-template-columns: max-content 1ch var(--payment-total-value-col);
  column-gap: .35rem;
  row-gap: .25rem;
  align-items: baseline;
  width: fit-content;
  margin: .75rem 0 0 auto;
  font-size: 1.1rem;
  font-weight: 700;
}

body[data-page="payment"] .cart-total > div {
  display: contents;
}

body[data-page="payment"] .cart-total > div > span[data-i18n] {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

body[data-page="payment"] .cart-total .cart-colon {
  justify-self: center;
}

body[data-page="payment"] .cart-total > div > strong {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

/* Payment page: supplier totals inside the summary card */
body[data-page="payment"] .sup-totals {
  margin-top: .5rem;
  display: grid;
  grid-template-columns: max-content 1ch var(--payment-total-value-col);
  column-gap: .35rem;
  row-gap: .2rem;
  align-items: baseline;
  width: fit-content;
  margin-left: auto;
  justify-content: end;
  font-size: .95rem;
}

body[data-page="payment"] .sup-totals-label {
  grid-column: auto;
  justify-self: end;
  text-align: right;
  font-weight: 700;
}

body[data-page="payment"] .sup-totals .cart-colon {
  justify-self: center;
}

body[data-page="payment"] .sup-totals-value {
  grid-column: auto;
  justify-self: end;
  text-align: right;
  padding-left: 0;
  white-space: nowrap;
}

/* Payment page: per-supplier item details table (Description / Qty / Unit / Subtotal) */
body[data-page="payment"] .sup-details {
  width: 100%;
  border-collapse: collapse;
  margin-top: .55rem;
  font-size: .95rem;
}

body[data-page="payment"] .sup-package {
  background: #fff;
}

body[data-page="payment"] .sup-details thead th {
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  text-align: left;
  padding: .35rem .4rem;
  border-bottom: 1px solid var(--border);
}

body[data-page="payment"] .sup-details tbody td {
  padding: .4rem .4rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Column sizing */
body[data-page="payment"] .sup-details-qty,
body[data-page="payment"] .sup-details-unit,
body[data-page="payment"] .sup-details-subtotal {
  white-space: nowrap;
}

body[data-page="payment"] .sup-details-qty {
  width: 4ch;
  text-align: right;
}

body[data-page="payment"] .sup-details-unit {
  width: 11ch;
  text-align: right;
}

/* Align Subtotal amounts with supplier totals (right edge) */
body[data-page="payment"] .sup-details-subtotal {
  width: var(--payment-total-value-col);
  text-align: right;
}

/* Keep Description readable */
body[data-page="payment"] .sup-details-desc {
  width: auto;
}

/* Mobile: keep layout stable, but allow the description to wrap */
@media (max-width: 520px) {
  body[data-page="payment"] .sup-details {
    font-size: .9rem;
  }
}

body[data-page="payment"] #payment-form .toolbar,
body[data-page="checkout"] #payment-form .toolbar {
  justify-content: flex-end;
  margin-top: 0;
  margin-bottom: 0;
}

body[data-page="payment"] #payment-form .payment-submit-stack,
body[data-page="checkout"] #payment-form .payment-submit-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
}

body[data-page="payment"] #pay-button,
body[data-page="checkout"] #pay-button {
  padding: 1rem 1.6rem;
  font-size: 1.2rem;
  min-height: 52px;
  min-width: 0;
  width: auto;
  justify-content: center;
}

body[data-page="payment"] #payment-msg,
body[data-page="checkout"] #payment-msg {
  margin-top: .1rem !important;
  margin-bottom: 0;
}

@media (min-width: 769px) {
  body[data-page="checkout"] #payment-form .payment-submit-row {
    align-items: flex-start;
  }

  body[data-page="checkout"] #payment-form .payment-submit-stack {
    align-items: flex-end;
  }

  body[data-page="checkout"] #payment-status {
    margin: 0;
    margin-left: 0;
    text-align: right;
    min-height: 1.1em;
  }
}

body[data-page="payment"] #payment-form .form-row,
body[data-page="checkout"] #payment-form .form-row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .75rem;
}

body[data-page="payment"] #payment-form label,
body[data-page="checkout"] #payment-form label {
  font-weight: 600;
  display: block;
}

body[data-page="payment"] .payment-input,
body[data-page="checkout"] .payment-input {
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  width: 100%;
  background: #fff;
  color: var(--text);
}

/* Prefer compact, content-appropriate widths for card fields (still responsive on mobile) */
body[data-page="payment"] #cardholder-name.payment-input,
body[data-page="checkout"] #cardholder-name.payment-input {
  width: 36ch;
  max-width: 100%;
}

body[data-page="payment"] .stripe-element,
body[data-page="checkout"] .stripe-element {
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  width: 100%;
  display: inline-block;
  background: #fff;
  margin-top: .35rem;
}

body[data-page="payment"] #card-number-element.stripe-element {
  width: 19ch;
  max-width: 100%;
}

body[data-page="payment"] #card-expiry-element.stripe-element {
  width: 9ch;
  max-width: 100%;
}

body[data-page="payment"] #card-cvc-element.stripe-element {
  width: 6ch;
  max-width: 100%;
}

body[data-page="payment"] .payment-card-grid {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

body[data-page="payment"] .payment-card-number {
  margin-top: .25rem;
}

body[data-page="payment"] .payment-card-row,
body[data-page="checkout"] .payment-card-row {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  gap: .75rem;
}

@media (min-width: 769px) {
  body[data-page="checkout"] #payment-section {
    margin-top: .35rem;
  }
}

body[data-page="checkout"] .embedded-payment-card {
  border-radius: .75rem;
  box-shadow: none;
}

body[data-page="checkout"] .payment-submit-row {
  justify-content: flex-end;
}

@media (max-width: 520px) {
  body[data-page="payment"] .payment-card-row {
    grid-template-columns: 1fr;
  }
}