@charset "UTF-8";
:root {
  --section-rotate: 9vw;
}

::selection,
::-moz-selection {
  background-color: var(--color-bb-black-bg);
  color: var(--color-white-font);
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html[lang=ua] {
  font-family: var(--font-main-ua);
}

html[lang=en] {
  font-family: var(--font-main-en);
}

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  line-height: 1.6;
  font-weight: 300;
  color: var(--color-bb-black-font);
  background-color: var(--color-page-bg);
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

:root {
  --color-bb-black-font: #171717;
  --color-bb-black-rgb: 23, 23, 23;
  --color-bb-accent: #002af7;
  --color-bb-accent-dark: #0a23d6; /* hover/pressed accent */
  --color-bb-accent-rgb: 0, 42, 247; /* for rgba() tints */
  --color-border-ccc: #ccc;
  --color-light-gray: #f0f0f0;
  --color-white-font: #ffffff;
  --color-muted-font: #6b6b6b;
  --color-progress-green: #5fd11e;
  --color-cream-bg: #f0eee9;
  --color-track-bg: #e6e4df;
  --color-input-bg: #ebe9e4;
  --color-surface-soft: #f4f3f1; /* soft card surface (PDP) */
  --color-footer-text: #cfcfcf;
  --color-text-body: #2b2b2b;
  --color-border-light: #e6e6e6;
  --color-link: #1a56db;
  --color-link-hover: #1039a0;
  --color-dropdown-bg: #1c1c1c;
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-badge-red: #ff3b30;
  --color-danger: #ff4d4f;
  --color-danger-rgb: 255, 77, 79;
  --color-admin-green: #2ecc71;
  --color-admin-green-rgb: 46, 204, 113;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --color-page-bg: #ffffff; /* whole-page background (flips in dark theme) */
  --color-bb-black-bg: #171717;
  --color-bb-accent-bg: #002af7;
  --color-ccc-bg: #ccc;
  --color-light-gray-bg: #eceae4;
  --color-white-bg: #ffffff;
  --color-444-bg: #444;
  --color-valid-bg: #31da31;
  --color-ok-bg: #bbebcb;
  --color-warning-bg: #cb9440;
  --color-blue-bg: #31a5da;
  --font-heading-en: "ValtechNeue", sans-serif;
  --font-main-en: "Helvetica", sans-serif;
  --font-heading-ua: "e-UkraineHead-LOGO", sans-serif;
  --font-main-ua: "e-Ukraine", sans-serif;
  --content-max: 1440px;
}

@font-face {
  font-family: "e-UkraineHead-LOGO", var(--font-heading-ua); /* Name your font family */
  src: url("./../fonts/e-UkraineHead/e-UkraineHead-LOGO.otf"); /* Locate the .ttf file within your directory*/
}
@font-face {
  font-family: "e-Ukraine-Regular", var(--font-main-ua);
  src: url("./../fonts/e-Ukraine/e-Ukraine-Regular.otf");
}
@font-face {
  font-family: "ValtechNeue", var(--font-heading-en); /* Headings only */
  src: url("./../fonts/ValtechNeue/ValtechNeue-Light.otf");
}
@font-face {
  font-family: "Helvetica", var(--font-main-en);
  src: url("./../fonts/Helvetica/Helvetica.woff");
}
/* ════════════════════════════════════════════════════════════
   DARK THEME
   Activated by `html.theme-dark` (toggled from the My Account
   sidebar, persisted in localStorage, applied before first paint).

   It only re-defines the design tokens from _typography.scss :root —
   every component that reads var(--color-*) flips automatically, so
   there are no per-component dark rules to maintain. If a component
   looks wrong in dark mode, the fix is almost always to make it read
   a token here instead of a hard-coded hex.
   ════════════════════════════════════════════════════════════ */
html.theme-dark {
  color-scheme: dark;
  --color-page-bg: #0f0f11;
  --color-bb-black-font: #e7e7ea;
  --color-text-body: #d4d4d8;
  --color-muted-font: #9b9ba1;
  --color-white-font: #ffffff;
  --color-white-bg: #1b1b1f;
  --color-cream-bg: #18181b;
  --color-surface-soft: #222227;
  --color-light-gray-bg: #26262b;
  --color-light-gray: #26262b;
  --color-input-bg: #26262b;
  --color-track-bg: #2e2e34;
  --color-ccc-bg: #3a3a40;
  --color-border-light: #303036;
  --color-border-ccc: #3a3a40;
  --color-link: #6ea8ff;
  --color-link-hover: #9cc4ff;
}

/* Lot-card overlays sit on the photo with a FIXED white pill background, so
   their text/icons must stay dark in dark mode (not follow the flipped fg
   token, which would be light-on-white = invisible). */
html.theme-dark .product-tile__badge,
html.theme-dark .product-tile__fav:not(.is-active),
html.theme-dark .pdp__badge {
  color: #171717;
}
html.theme-dark {
  /* Category filter: the selected pill (btn--black, fixed #171717) blends into
     the dark page — give it the accent so it clearly reads as selected. And
     lift the "clear all filters" (btn--gray) text off its dark surface. */
}
html.theme-dark .category-filter .btn.btn--black {
  background: var(--color-bb-accent);
  border-color: var(--color-bb-accent);
  color: var(--color-white-font);
}
html.theme-dark .category-filter .btn.btn--gray {
  color: var(--color-text-body);
}
html.theme-dark {
  /* Admin pills that keep a FIXED light pastel background (like the other
     status/role badges): their text uses --color-link, which brightens to a
     light blue in dark mode and would wash out on the light pill. Pin it to the
     light-mode blue so these read like the rest of the pastel badges. */
}
html.theme-dark .admin-table__action button,
html.theme-dark .admin-role--valtechie {
  color: #1a56db;
}

/*convert to css*/
/* ════════════════════════════════════════════════════════════
   HEADER — clean rewrite (no legacy)
   Mobile nav (hamburger) kicks in at $bp-desktop (1200px) — see abstracts/_breakpoints.
   ════════════════════════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: 1.6rem 2.4rem;
  background-color: var(--color-bb-black-bg);
}

.nav-container {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* wrapper: row on desktop */
.header__logos {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-shrink: 0;
}

.nav-menu {
  display: flex;
  flex: 1;
  align-items: center;
}

.nav__actions {
  margin-left: auto; /* push actions to the right */
}

/* ── Info pills (exchange rate + weather) ── */
.info-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(var(--color-white-rgb), 0.22);
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-white-font);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.weather-pill {
  gap: 0.4rem;
}

/* ── Mobile top-bar info group (hidden on desktop) ── */
.header__mobile-info {
  display: none;
}

/* ── Air-raid alert dot ── */
.alert-dot {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.alert-dot--active {
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  animation: alert-pulse 1.5s ease-in-out infinite;
}
.alert-dot--clear {
  background: #22c55e;
}
.alert-dot--topbar {
  display: none;
}

@keyframes alert-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}
/* ── Logo ── */
.header__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.header__logo-img {
  height: 3.2rem;
  width: auto;
  display: block;
}

/* ── Main nav links → pills (match "Login" button) ── */
.nav__list--main {
  display: flex;
  align-items: center;
  gap: 0.4rem; /* was 2.8rem — pills have own padding */
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-white-font);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav__link:hover {
  background-color: rgba(var(--color-white-rgb), 0.08);
}

/* current page — persistent fill */
.nav__link.is-active {
  background-color: rgba(var(--color-white-rgb), 0.12);
}

/* ── Right-side actions ── */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-left: auto;
}

/* ── Auth buttons (guest) ── */
.nav__auth {
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  transition: all 0.2s;
}

.nav__auth--login {
  color: var(--color-white-font);
}

.nav__auth--login:hover {
  background: rgba(var(--color-white-rgb), 0.08);
}

.nav__auth--signup {
  color: var(--color-white-font);
  background: var(--color-bb-accent);
}

.nav__auth--signup:hover {
  filter: brightness(1.12);
}

/* ── Wishlist ── */
.nav-wishlist {
  position: relative;
  display: inline-flex;
  padding: 0.6rem;
}

.nav-wishlist__icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: var(--color-white-font);
  transition: fill 0.2s;
}

.nav-wishlist:hover .nav-wishlist__icon {
  fill: var(--color-bb-accent);
}

.nav-wishlist__badge {
  position: absolute;
  top: -0.2rem;
  right: -0.4rem;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-badge-red);
  color: var(--color-white-font);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

/* ════ Shared dropdown: lang + user ════ */
.nav-dd {
  position: relative;
}

/* Toggle */
.nav-dd__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--color-white-font);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s;
}

.nav-dd__toggle:hover,
.nav-dd__toggle:focus-visible {
  background-color: rgba(var(--color-white-rgb), 0.08);
  outline: none;
}

.nav-dd__toggle--pill {
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(var(--color-white-rgb), 0.22);
  font-size: 1.4rem;
  font-weight: 600;
}

.nav-dd__avatar {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  object-fit: cover;
}

.nav-dd__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bb-accent);
  color: var(--color-white-font);
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-dd__name {
  font-size: 1.6rem;
  font-weight: 500;
}

.nav-dd__badge {
  padding: 0.2rem 0.8rem;
  border-radius: 0.6rem;
  background: var(--color-bb-accent);
  color: var(--color-white-font);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-dd__chevron {
  font-size: 2rem;
  color: rgba(var(--color-white-rgb), 0.7);
  transition: transform 0.2s;
}

/* Panel */
.nav-dd__panel {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  min-width: 26rem;
  max-width: calc(100vw - 2rem);
  padding: 0.4rem 0;
  background: var(--color-dropdown-bg);
  border: 1px solid var(--color-divider);
  border-radius: 1.2rem;
  box-shadow: 0 1.2rem 3rem rgba(var(--color-black-rgb), 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.6rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}

.nav-dd__panel--narrow {
  min-width: 18rem;
}

/* Open states */
.nav-dd:hover .nav-dd__panel,
.nav-dd:focus-within .nav-dd__panel,
.nav-dd.is-open .nav-dd__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dd:hover .nav-dd__chevron,
.nav-dd:focus-within .nav-dd__chevron,
.nav-dd.is-open .nav-dd__chevron {
  transform: rotate(180deg);
}

/* Panel header */
.nav-dd__header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.2rem 1.8rem 1.4rem;
  border-bottom: 1px solid var(--color-divider);
}

.nav-dd__header-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-white-font);
}

.nav-dd__header-email {
  font-size: 1.3rem;
  color: rgba(var(--color-white-rgb), 0.55);
}

/* List + items */
.nav-dd__list {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
}

.nav-dd__item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.8rem;
  font-size: 1.5rem;
  color: rgba(var(--color-white-rgb), 0.85);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.nav-dd__item .material-symbols-outlined {
  font-size: 2rem;
  flex-shrink: 0;
}

.nav-dd__item:hover {
  background-color: rgba(var(--color-white-rgb), 0.06);
  color: var(--color-white-font);
}

.nav-dd__item--admin {
  color: var(--color-admin-green);
}

.nav-dd__item--admin:hover {
  color: var(--color-admin-green);
  background-color: rgba(var(--color-admin-green-rgb), 0.12);
}

.nav-dd__item--logout {
  color: var(--color-danger);
}

.nav-dd__item--logout:hover {
  color: var(--color-danger);
  background-color: rgba(var(--color-danger-rgb), 0.12);
}

.nav-dd__item--lang {
  justify-content: space-between;
}

.nav-dd__item--lang.is-current {
  color: var(--color-white-font);
  font-weight: 600;
}

.nav-dd__check {
  color: var(--color-bb-accent);
  font-size: 1.4rem;
}

.nav-dd__footer {
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-divider);
}

/* ── Hamburger (desktop hidden) ── */
.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 4rem;
  height: 4rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger-menu__bar {
  width: 2.4rem;
  height: 2px;
  margin: 0 auto;
  background: var(--color-white-font);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* ════════ MOBILE NAV (hamburger) ≤ $bp-desktop (1200px) ════════
   The desktop nav has many items (logos, 4 links, weather, currency,
   wishlist, user) and gets cramped below ~1200px — switch to the hamburger
   here rather than letting it wrap. */
@media (max-width: 1200px) {
  .header {
    overflow-x: clip;
  }
  .nav-container {
    gap: 1.2rem;
  }
  /* top bar */
  .header__logos {
    position: relative;
    z-index: 2001;
  }
  .hamburger-menu {
    display: flex;
    margin-left: auto;
    position: relative;
    z-index: 2002;
  }
  /* overlay */
  .nav-menu {
    position: fixed;
    top: 7.2rem; /* top-bar height: 1.6rem*2 padding + 4rem burger */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.6rem 0 4rem;
    background: var(--color-bb-black-bg);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 2000;
  }
  .header.is-nav-open .nav-menu {
    transform: translateX(0);
  }
  /* single column */
  .nav,
  .nav-menu .nav-dd--lang,
  .nav-menu .nav-dd--user {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
  }
  /* ── SECTION 1: nav links (no per-item dividers) ── */
  .nav__list--main {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.2rem 0;
  }
  .nav__item {
    border: none;
  }
  .nav__link {
    display: block;
    padding: 1.4rem 2.4rem;
    font-size: 1.8rem;
    font-weight: 600;
    border-radius: 0;
  }
  .nav__link:hover {
    background-color: transparent;
  }
  /* actions wrapper */
  .nav-menu .nav__actions {
    display: contents;
  }
  .nav__actions > .nav-wishlist {
    display: none;
  }
  /* info pills + alert dot: hide inside overlay — top-bar group handles mobile */
  .nav-menu .nav__actions > .info-pill,
  .nav-menu .nav__actions > .alert-dot:not(.alert-dot--topbar) {
    display: none;
  }
  /* info group: shown as a centered row inside the menu overlay */
  .header__mobile-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.2rem 0;
    order: 2;
  }
  .alert-dot--topbar {
    display: inline-block;
  }
  /* 🆕 ORDER: account → nav → language */
  .nav-menu .nav-dd--user {
    order: -1;
  }
  .nav-menu .nav {
    order: 0;
  }
  .nav-menu .nav-dd--lang {
    order: 1;
  }
  /* dropdowns inline */
  .nav-menu .nav-dd {
    width: 100%;
  }
  .nav-menu .nav-dd__chevron {
    display: none;
  }
  .nav-menu .nav-dd__panel,
  .nav-menu .nav-dd__panel--narrow {
    position: static;
    min-width: 0;
    width: 100%;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  /* ── SECTION 2: language ── */
  .nav-menu .nav-dd--lang {
    padding: 1rem 0;
    border-top: 1px solid var(--color-divider);
    border-bottom: none; /* was both — bottom not needed at end */
  }
  .nav-menu .nav-dd--lang .nav-dd__toggle {
    display: none;
  }
  /* ── SECTION 3: account ── */
  .nav-menu .nav-dd--user .nav-dd__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 1.4rem;
    padding: 1.6rem 2.4rem;
    border-radius: 0;
    background-color: rgba(var(--color-white-rgb), 0.04);
  }
  .nav-menu .nav-dd--user .nav-dd__header {
    display: none;
  }
  .nav-menu .nav-dd--user.is-open .nav-dd__toggle {
    background-color: rgba(var(--color-white-rgb), 0.07);
  }
  /* all clickable rows — same rhythm + left edge */
  .nav-dd__item {
    justify-content: flex-start;
    gap: 1.6rem;
    padding: 1.4rem 2.4rem;
    font-size: 1.6rem;
  }
  .nav-dd__item--lang {
    gap: 1.2rem;
  }
  .nav-dd__item--lang .nav-dd__check {
    margin-left: auto; /* check to the right edge */
  }
  /* logout sits apart */
  .nav-menu .nav-dd--user .nav-dd__footer {
    margin-top: 0.6rem;
    border-top: 1px solid var(--color-divider);
  }
  /* hamburger → X */
  .header.is-nav-open .hamburger-menu__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .header.is-nav-open .hamburger-menu__bar:nth-child(2) {
    opacity: 0;
  }
  .header.is-nav-open .hamburger-menu__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* hidden on desktop, shown in mobile overlay */
  .nav-dd__section-label {
    display: none;
  }
  /* USER menu: collapsible, closed by default */
  .nav-menu .nav-dd--user .nav-dd__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
  }
  .nav-menu .nav-dd--user.is-open .nav-dd__panel {
    max-height: 60rem; /* generous; fits all items */
  }
  /* profile row reads as a button */
  .nav-menu .nav-dd--user .nav-dd__toggle:hover {
    background-color: rgba(var(--color-white-rgb), 0.05);
  }
  /* chevron: hide for lang */
  .nav-menu .nav-dd--lang .nav-dd__chevron {
    display: none;
  }
  /* USER chevron — drawn in CSS (no font dependency) */
  .nav-menu .nav-dd--user .nav-dd__chevron {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    font-size: 0; /* kill "expand_more" text if font fails */
    border-right: 2px solid rgba(var(--color-white-rgb), 0.7);
    border-bottom: 2px solid rgba(var(--color-white-rgb), 0.7);
    transform: rotate(45deg); /* ▾ points down (collapsed) */
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }
  .nav-menu .nav-dd--user.is-open .nav-dd__chevron {
    transform: rotate(-135deg); /* ▴ points up (expanded) */
  }
  /* account block sits at top → divider below it */
  .nav-menu .nav-dd--user {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: 0.6rem;
  }
}
.nav-lang-dropdown {
  position: relative;
}
.nav-lang-dropdown .dropdown-toggle {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--color-white-bg);
  padding: 0.5rem 1rem;
  width: 100%;
  text-align: left;
}
.nav-lang-dropdown .dropdown-menu {
  list-style: none;
  font-size: 1.8rem;
  margin: 0;
  padding: 0;
  background: var(--color-white-bg);
  border: 1px solid var(--color-border-ccc);
  border-radius: 0.25rem;
  box-shadow: 0 4px 6px rgba(var(--color-bb-black-rgb), 0.1);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1000;
  min-width: 180px;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-lang-dropdown .dropdown-menu li {
  width: 100%;
}
.nav-lang-dropdown .dropdown-menu li a.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  color: var(--color-bb-black);
  text-decoration: none;
}
.nav-lang-dropdown .dropdown-menu li a.dropdown-item:hover {
  background: rgba(var(--color-bb-black-rgb), 0.05);
}
.nav-lang-dropdown.open .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 768px) {
  .nav-lang-dropdown {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1rem;
  }
  .nav-lang-dropdown .dropdown-toggle {
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--color-white-font);
  }
  .nav-lang-dropdown .dropdown-menu {
    position: static;
    border: none;
    box-shadow: none;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    width: 100%;
    padding: 0;
    background: var(--color-white-font);
  }
  .nav-lang-dropdown .dropdown-menu li a.dropdown-item {
    display: flex;
    width: 100%;
  }
  .nav-lang-dropdown.open .dropdown-menu {
    max-height: 300px;
    opacity: 1;
    padding: 0.25rem 0;
  }
}

.accordion {
  cursor: pointer;
  background-color: var(--color-bb-bg);
  padding: 2rem 0.5rem;
  width: 100%;
  font-size: 2rem;
  text-align: left;
  border: none;
  outline: none;
  color: var(--color-bb-black);
  transition: all 0.5s;
}
.accordion:hover {
  color: var(--color-bb-accent);
  transition: all 0.5s;
}

.accordion-container .accordion {
  padding: 1rem 0.5rem;
}
.accordion-container p.description__text {
  font-size: 1.4rem;
}

.active {
  color: var(--color-bb-accent);
  transition: all 0.5s;
}

.panel {
  padding: 0 1rem;
  display: none;
  overflow: hidden;
}

button.accordion:after {
  content: "";
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "";
}

/* ---------- Chevron accordion (PDP + content pages) ---------- */
.pdp__accordions,
.content-page .html-content.faq {
  margin-top: 2.4rem;
  border: 1px solid var(--color-track-bg);
  border-radius: 16px;
  overflow: hidden;
}

.pdp .accordion,
.content-page .accordion {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 2rem 2.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-bb-black-font);
  text-align: left;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-track-bg);
  cursor: pointer;
  transition: color 0.15s ease;
}
.pdp .accordion:first-child,
.content-page .accordion:first-child {
  border-top: none;
}
.pdp .accordion:hover,
.content-page .accordion:hover {
  background-color: var(--color-light-gray-bg);
}
.pdp .accordion,
.content-page .accordion {
  /* replace the global "+ / −" with a rotating chevron */
}
.pdp .accordion::after,
.content-page .accordion::after {
  content: "";
  float: none;
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: -0.3rem;
  width: 0.9rem;
  height: 0.9rem;
  font-weight: normal;
  border-right: 2px solid var(--color-muted-font);
  border-bottom: 2px solid var(--color-muted-font);
  transform: rotate(45deg);
  transition: transform 0.25s ease, margin 0.25s ease, border-color 0.15s ease;
}
.pdp .accordion:hover::after,
.content-page .accordion:hover::after {
  border-color: var(--color-muted-font);
}
.pdp .accordion.active::after,
.content-page .accordion.active::after {
  margin-top: 0.3rem;
  transform: rotate(-135deg);
}

.pdp .panel,
.content-page .panel {
  display: none;
  padding: 1rem 2rem 1rem;
}
.pdp .panel .description__text,
.pdp .panel p,
.content-page .panel .description__text,
.content-page .panel p {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-muted-font);
}
.pdp .panel .description__text + .description__text,
.pdp .panel p + p,
.content-page .panel .description__text + .description__text,
.content-page .panel p + p {
  margin-top: 1rem;
}

/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */
/* draggable */
/* ---- flickity-button ---- */
/* ---- previous/next buttons ---- */
/* right to left */
/* ---- page dots ---- */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}
.flickity-slider .gallery-cell img {
  height: 100%;
  aspect-ratio: 1/1;
}
.flickity-slider .gallery-cell {
  margin-left: 1px;
  margin-right: 1px;
  border: 1px solid var(--color-border-ccc);
}

.main-image .flickity-slider .gallery-cell img {
  aspect-ratio: 1/1;
}

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.flickity-button {
  position: absolute;
  background: var(--color-bb-accent-bg);
  border: 2px solid var(--color-border-ccc);
  color: var(--color-white-font);
}
.flickity-button:hover {
  background: var(--color-white-bg);
  color: var(--color-bb-accent);
  cursor: pointer;
}
.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 0.5rem var(--color-bb-accent);
}
.flickity-button:active {
  opacity: 0.6;
}
.flickity-button:disabled {
  display: none;
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

.flickity-prev-next-button {
  top: 50%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
}
.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button.previous {
  left: 2rem;
}

.flickity-prev-next-button.next {
  right: 2rem;
}

.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 1rem;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 1rem;
}
.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -2.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}
.flickity-page-dots .dot {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin: 0 1rem;
  background: var(--color-bb-black-bg);
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/*convert to css*/
.footer {
  background-color: var(--color-bb-black-bg);
  color: var(--color-footer-text);
  font-size: 1.6rem;
}
.footer__container {
  margin: 0 auto;
  padding: 5rem 4rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4rem;
}
.footer__logo {
  grid-row: 1/4;
  -ms-flex-item-align: center;
  align-self: center;
}
.footer__logo img {
  height: 6rem;
}
.footer__social {
  margin-top: 2.5rem;
}
.footer__heading {
  margin-bottom: 2rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-footer-text);
}
.footer__social-list {
  display: flex;
  gap: 1.25rem;
  list-style: none;
}
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  color: var(--color-footer-text);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.footer__social-link svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}
.footer__social-link:hover, .footer__social-link:focus-visible {
  transform: translateY(-3px);
  background-color: #333;
}
.footer__nav {
  list-style: none;
}
.footer__nav li:not(:last-child) {
  margin-bottom: 1.25rem;
}
.footer__nav a {
  color: var(--color-footer-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__nav a:hover, .footer__nav a:focus-visible {
  color: var(--color-white-font);
}
.footer__bottom {
  padding: 1.75rem 4rem;
  background-color: #4a4a52;
}
.footer__copyright {
  margin: 0;
  color: var(--color-footer-text);
  font-size: 1.4rem;
}
.footer__copyright a {
  color: var(--color-white-font);
  text-decoration: underline;
  transition: opacity 0.2s ease;
}
.footer__copyright a:hover, .footer__copyright a:focus-visible {
  opacity: 0.8;
}

/* Планшет: бренд на весь рядок, посилання у 2 колонки */
@media (max-width: 992px) {
  .footer__container {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .footer__col--brand {
    grid-column: 1/-1;
  }
}
/* Мобайл: усе в одну колонку */
@media (max-width: 768px) {
  .footer__container {
    grid-template-columns: 1fr;
    padding: 3rem 2rem;
  }
  .footer__bottom {
    padding: 1.75rem 3rem;
  }
}
.footer__contact {
  display: inline-block;
  margin-top: 1rem;
  color: var(--color-footer-text);
  text-decoration: none;
  font-size: 1.4rem;
}
.footer__contact:hover {
  text-decoration: underline;
}

/*convert to css*/
.btn,
.btn:link,
.btn:visited {
  font-size: 1.6rem;
  padding: 1.1rem 4rem;
  text-transform: none;
  display: inline-block;
  text-decoration: none;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  font-weight: 400;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /*Add later when we use this for the button in form*/
  border: none;
  cursor: pointer;
}

.category-filter .btn,
.category-filter + .btn {
  font-size: 1.4rem;
  padding: 1rem;
  text-align: center;
}

.btn:hover {
  /* -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15); */
  background-color: var(--color-white-bg);
  color: var(--color-bb-accent);
}

.btn:active {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.btn:focus {
  outline: 2px solid var(--color-bb-black-bg);
}

/* CTA state for the highest BID owner  */
.top-bid::after {
  content: " Your bid is the highest now";
}

.top-bid:hover::after {
  content: " Raise";
}

.btn--white {
  background-color: var(--color-white-bg);
  color: var(--color-bb-accent);
  box-shadow: inset 0 0 0 2px var(--color-bb-accent);
}

.btn--white::after {
  background-color: var(--color-white-bg);
}

.btn--gary {
  background-color: #0d241e;
  color: var(--color-white-font);
}

.btn--gray {
  /* gray Valtech */
  background-color: #d1d3ca;
  color: var(--color-white-font);
}

.btn--gary::after {
  background-color: #0d241e;
}

.btn--blue {
  /* gray Valtech */
  background-color: var(--color-bb-accent-bg);
  box-shadow: inset 0 0 0 2px var(--color-bb-accent);
  color: var(--color-white-font);
}

.btn--blue::after {
  background-color: var(--color-bb-black-bg);
}

.btn--black {
  background-color: var(--color-bb-black-bg);
  box-shadow: inset 0 0 0 2px var(--color-bb-black-bg);
  color: var(--color-white-font);
}

.btn--blue::after {
  background-color: #0d241e;
}

.btn--green {
  background-color: #0d241e;
  color: var(--color-white-font);
}

.btn--green::after {
  /* background-color: #b2ff60; */
}

.back-cta {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

.back-cta:hover {
  color: var(--color-bb-accent);
}

/*convert to css*/
.alert {
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 9999;
  color: var(--color-bb-black-font);
  font-size: 1.8rem;
  font-weight: 400;
  text-align: center;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 3rem;
  width: 100%;
  -webkit-box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
}

.alert--success {
  background-color: var(--color-admin-green);
}

.msg--success {
  color: var(--color-admin-green);
}

.alert--info {
  background-color: var(--color-admin-green);
}

.msg--info {
  color: var(--color-admin-green);
}

.alert--warning {
  background-color: var(--color-warning-bg);
}

.msg--warning {
  color: var(--color-warning-bg);
}

.alert--error {
  background-color: var(--color-danger);
}

.msg--error {
  color: var(--color-danger);
}

/* ===== Toast notifications (replaces the full-width .alert banner) ===== */
.toast-container {
  position: fixed;
  top: 8rem;
  right: 1.6rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: auto;
  max-width: min(38rem, 100vw - 3.2rem);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-radius: 12px;
  background: var(--color-white-bg);
  color: var(--color-bb-black-font);
  font-size: 1.4rem;
  line-height: 1.45;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18);
  border-left: 7px solid var(--color-muted-font);
  opacity: 0;
  transform: translateX(120%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast--show {
  opacity: 1;
  transform: translateX(0);
}
.toast--hide {
  opacity: 0;
  transform: translateX(120%);
}
.toast__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.toast__title {
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: capitalize;
}
.toast__msg {
  word-break: break-word;
}
.toast__close {
  flex: 0 0 auto;
  margin: -0.2rem -0.4rem 0 0;
  padding: 0 0.4rem;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-muted-font);
  cursor: pointer;
  transition: color 0.12s ease;
}
.toast__close:hover {
  color: var(--color-bb-black-font);
}
.toast--success {
  border-left-color: var(--color-admin-green);
}
.toast--success .toast__title {
  color: var(--color-admin-green);
}
.toast--info {
  border-left-color: var(--color-link);
}
.toast--info .toast__title {
  color: var(--color-link);
}
.toast--warning {
  border-left-color: var(--color-warning-bg);
}
.toast--warning .toast__title {
  color: var(--color-warning-bg);
}
.toast--error {
  border-left-color: var(--color-danger);
}
.toast--error .toast__title {
  color: var(--color-danger);
}

@media (max-width: 768px) {
  .toast-container {
    left: 1.6rem;
    right: 1.6rem;
    max-width: none;
  }
}
/* admin top header — self-contained, beats base .header via tag+class */
header.admin-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 6rem;
  padding: 0 2.4rem;
  color: var(--color-white-font);
  font-size: 1.5rem;
}
header.admin-header .nav {
  display: flex;
  align-items: center;
}
header.admin-header .header__logo {
  order: -1;
  margin-right: 1rem;
}
header.admin-header .header__logo img {
  height: 3.6rem;
  width: auto;
  display: block;
}
header.admin-header .nav--user {
  order: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
header.admin-header .nav--user > a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
header.admin-header .nav__el,
header.admin-header .nav--user span {
  font-size: 1.5rem;
  color: var(--color-white-font);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
header.admin-header .nav__el:hover,
header.admin-header .nav--user span:hover {
  opacity: 0.75;
}
header.admin-header .nav__user-img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  object-fit: cover;
}
header.admin-header .nav__user--checkmark {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}

/* admin header: extend the dark .header base, fix admin bits */
.admin-header {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  color: var(--color-white-font);
}
.admin-header .header__logo {
  order: -1;
}
.admin-header .header__logo img {
  height: 3.6rem;
  width: auto;
}
.admin-header .nav--user {
  order: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.admin-header .nav__el {
  color: var(--color-white-font);
  text-decoration: none;
  transition: opacity 0.15s;
}
.admin-header .nav__el:hover {
  opacity: 0.75;
}
.admin-header .nav__user-img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}
.admin-header .nav__user--checkmark {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}
.admin-header {
  /* markup renders user-nav twice → hide the duplicate */
}
.admin-header .nav--user ~ .nav--user {
  display: none;
}

body.admin-panel {
  padding: 0;
}

.admin-nav {
  margin-top: 5.5rem;
}

.admin-nav__heading {
  margin: 0 5rem 1.5rem 4rem;
  padding-bottom: 3px;
  font-size: 1.2rem;
  text-transform: none;
  color: var(--color-bb-black-font);
  border-bottom: 1px solid currentColor;
}

.admin-view__content .not-visible {
  display: none !important;
}
.admin-view__content form {
  display: flex;
  flex-wrap: wrap;
}
.admin-view__content form .form__group {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
}
.admin-view__content form .form__group > label {
  font-size: 1.4rem;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
  align-items: center;
}
.admin-view__content form .form__group > input {
  font-size: 1.4rem;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
  align-items: center;
}
.admin-view__content form .form__group > textarea {
  font-size: 1.4rem;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
  align-items: center;
}
.admin-view__content .bid-detailed-page ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 6rem 0 3rem;
  font-size: 1.6rem;
}
.admin-view__content .bid-detailed-page ul li {
  flex: 0 0 100%;
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--color-bb-black-font);
  padding: 0.75rem;
}

.admin-view__cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.admin-view__cards-container .admin-view__card-item {
  background: var(--color-white-bg);
  border-radius: 16px;
  padding: 2.4rem 2.6rem 2rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.06);
}
.admin-view__cards-container .admin-view__card-item .title {
  margin: 0 0 1.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}
.admin-view__cards-container .admin-view__card-item .details {
  display: flex;
  flex-direction: column;
}
.admin-view__cards-container .admin-view__card-item .details span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.6rem;
  flex: 0 0 auto;
  text-align: left;
  padding: 0.6rem 0;
  font-size: 1.5rem;
  color: var(--color-text-body);
}
.admin-view__cards-container .admin-view__card-item .details span > *:last-child {
  color: var(--color-bb-black-font);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.admin-view__cards-container .admin-view__card-item .details span > a {
  flex: 0 0 auto;
  margin: 1.2rem 0 0;
  padding: 0;
  background: none !important;
  border: 0 !important;
  font-weight: 700;
  color: var(--color-blue-bg);
  text-decoration: none;
}
.admin-view__cards-container .admin-view__card-item .details span > a:hover {
  text-decoration: underline;
}

.admin-view__rows_container {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.2rem;
  color: var(--color-text-body);
}
.admin-view__rows_container .heading-row {
  background-color: var(--color-bb-black-bg);
  color: var(--color-white-font);
  font-weight: 800;
}
.admin-view__rows_container .moderated,
.admin-view__rows_container .not-fraud,
.admin-view__rows_container .verified {
  background-color: var(--color-ok-bg);
}
.admin-view__rows_container .not-moderated,
.admin-view__rows_container .not-verified {
  background-color: var(--color-warning-bg);
}
.admin-view__rows_container .contributor-user span:nth-child(3) {
  background-color: var(--color-valid-bg);
}
.admin-view__rows_container .does-not-exist,
.admin-view__rows_container .not-invites {
  background-color: var(--color-blue-bg);
}
.admin-view__rows_container .does-not-exist a,
.admin-view__rows_container .not-invites a {
  color: var(--color-white-font);
}
.admin-view__rows_container .admin-user span:nth-child(3) {
  background-color: var(--color-blue-bg);
}
.admin-view__rows_container .fraud-user {
  background-color: inherit;
}
.admin-view__rows_container .do-not-reply {
  background-color: var(--color-ccc-bg);
  color: var(--color-white-font);
}
.admin-view__rows_container > div {
  color: inherit;
  flex: 0 0 80%;
  display: flex;
  justify-content: space-between;
}
.admin-view__rows_container div > div.title {
  flex: 0 0 50%;
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.admin-view__rows_container div > div.details {
  flex: 0 0 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-view__rows_container div > div.details > span {
  width: 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.admin-view__rows_container div div {
  border-top: 1px solid var(--color-444-bg);
  border-left: 1px solid var(--color-444-bg);
}
.admin-view__rows_container div > span {
  border-right: 1px solid var(--color-444-bg);
}

.admin-view__rows_container.feedback-message div > div.title {
  white-space: wrap;
}

.admin_main {
  display: flex;
}
.admin_main .side-nav--active {
  border-left: 0px solid var(--color-white-font) !important;
}

.admin_nav-menu {
  flex: 0 0 24rem;
  padding: 1.6rem 1.2rem;
  background-color: var(--color-white-bg);
  border-right: 1px solid var(--color-border-ccc);
}
.admin_nav-menu .admin_slide-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin_nav-menu .admin_slide-nav * {
  color: var(--color-bb-black-font);
}
.admin_nav-menu .admin_slide-nav svg {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  fill: currentColor;
}
.admin_nav-menu .admin_slide-nav li {
  margin-bottom: 0.2rem;
}
.admin_nav-menu .admin_slide-nav a {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.admin_nav-menu .admin_slide-nav a:hover {
  background: var(--color-light-gray);
}
.admin_nav-menu .admin_slide-nav .side-nav--active a {
  background: var(--color-light-gray);
}
.admin_nav-menu .admin_slide-nav .side-nav--active * {
  color: var(--color-blue-bg);
}
.admin_nav-menu .admin_slide-nav__heading {
  display: block;
  margin: 1.8rem 0 0.4rem;
  padding: 0 1.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-body);
}

/* ===== reusable admin content shell (matches dashboard mockup) ===== */
.admin_content-section {
  flex: 1;
  min-height: 100vh;
  padding: 3.2rem;
  background: var(--color-light-gray-bg);
}
.admin_content-section > form input,
.admin_content-section .form__group input {
  width: 100%;
  padding: 1rem;
}
.admin_content-section > form textarea,
.admin_content-section .form__group textarea {
  width: 100%;
  padding: 1rem;
}

.admin-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}

.admin-page__title {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}

.admin-page__link {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
}
.admin-page__link:hover {
  text-decoration: underline;
}

footer.admin-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2.4rem;
  background: var(--color-white-bg);
  border-top: 1px solid var(--color-border-ccc);
  font-size: 1.2rem;
  color: var(--color-text-body);
}
footer.admin-panel .footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.6rem;
}
footer.admin-panel .footer__copyright {
  margin: 0;
}
footer.admin-panel a {
  color: var(--color-blue-bg);
  text-decoration: none;
}
footer.admin-panel a:hover {
  text-decoration: underline;
}

.admin-view__heading > button,
.admin-view__content > button {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-body);
  margin: 1rem 1rem 1rem 0;
  padding: 1rem;
  border-radius: 5px;
}

.admin_filter-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0.5rem 0;
  align-items: center;
  font-weight: bold;
  font-size: 2rem;
}

.admin-filter__btn {
  padding: 1rem;
  border: 1px solid var(--color-border-light);
  border-radius: 5rem;
  background: var(--color-white-bg);
  color: var(--color-bb-black-font);
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.admin-filter__btn:hover {
  border-color: var(--color-bb-black-font);
}
.admin-filter__btn.active {
  background: var(--color-bb-black-bg);
  color: var(--color-white-font);
  border-color: var(--color-bb-black-bg);
}

.admin-filter__count {
  margin-left: auto;
  font-size: 1.5rem;
}

.admin-view__bulk-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  margin: 2rem 0;
  flex-direction: column;
  border: 1px solid var(--color-border-ccc);
  border-radius: 8px;
  background: var(--color-light-gray);
}
.admin-view__bulk-dates form.admin-view__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-view__bulk-dates select,
.admin-view__bulk-dates input[type=datetime-local] {
  width: auto;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  border: 1px solid var(--color-border-ccc);
  border-radius: 5px;
  background: var(--color-white-bg);
}
.admin-view__bulk-dates span {
  font-size: 1.5rem;
  color: var(--color-text-body);
}

.admin-view__actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}

/* topbar: Dashboard … APP View site */
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.4rem;
}
.admin-topbar__title {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}
.admin-topbar__right {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
}
.admin-topbar__app {
  color: var(--color-text-body);
}
.admin-topbar__site {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-blue-bg);
  font-weight: 600;
  text-decoration: none;
}
.admin-topbar__site:hover {
  text-decoration: underline;
}
.admin-topbar__chev {
  width: 1.4rem;
  height: 1.4rem;
}

.campaign-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.6rem;
}
.campaign-switch__label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text-body);
}
.campaign-switch__select {
  padding: 0.6rem 1rem;
  font-size: 1.4rem;
  border: 1px solid var(--color-border-ccc);
  border-radius: 8px;
  background: var(--color-white-bg);
  color: var(--color-bb-black-font);
  cursor: pointer;
}
.campaign-switch__apply {
  padding: 0.6rem 1.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid var(--color-bb-black-bg);
  border-radius: 8px;
  background: var(--color-bb-black-bg);
  color: var(--color-white-font);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.campaign-switch__apply:hover {
  background: var(--color-444-bg);
  border-color: var(--color-text-body);
}

/* ===== reusable card ===== */
.admin-card {
  background: var(--color-white-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 2.4rem;
}
.admin-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 2.4rem;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}
.admin-card__body {
  padding: 0.4rem 0;
}

/* ===== reusable grid "table" — columns align via subgrid, row-hover works ===== */
.admin-grid {
  display: grid;
  grid-template-columns: var(--admin-grid-cols, repeat(5, 1fr));
  font-size: 1.45rem;
}
.admin-grid__row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/-1;
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.12s;
}
.admin-grid__row:hover {
  background: var(--color-surface-soft);
}
.admin-grid__row:last-child {
  border-bottom: 0;
}
.admin-grid__row--head {
  border-bottom: 1px solid var(--color-border-light);
}
.admin-grid__row--head:hover {
  background: transparent;
}
.admin-grid__row {
  /* accent bar reuses existing filter classes → filters keep working */
}
.admin-grid__row.moderated, .admin-grid__row.verified {
  box-shadow: inset 10px 0 0 var(--color-admin-green);
}
.admin-grid__row.not-moderated, .admin-grid__row.not-invites {
  box-shadow: inset 10px 0 0 var(--color-danger);
}
.admin-grid__row.not-verified {
  box-shadow: inset 10px 0 0 var(--color-warning-bg);
}
.admin-grid__cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.3rem 2.4rem;
  color: var(--color-bb-black-font);
  min-width: 0;
}
.admin-grid__cell--head {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted-font);
}
.admin-grid__empty {
  grid-column: 1/-1;
  justify-content: center;
  color: var(--color-muted-font);
  padding: 3rem;
}
@media (max-width: 768px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-grid__row {
    grid-template-columns: 1fr;
    padding: 0.8rem 0;
  }
  .admin-grid__row--head {
    display: none;
  }
}

.admin-table__status {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 600;
}
.admin-table__status--ok {
  background: #e7f6ec;
  color: var(--color-admin-green);
}
.admin-table__status--no {
  background: #fdecec;
  color: var(--color-danger);
}

.admin-table__action a,
.admin-table__action button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 1rem;
  border: 0;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 600;
  background: #e8effd;
  color: var(--color-link);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.admin-table__action a:hover,
.admin-table__action button:hover {
  background: #d6e4fc;
}

/* role pill — same shape as status/action pills, color per role */
.admin-role {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--color-light-gray);
  color: var(--color-text-body);
}
.admin-role--super-admin {
  background: #f3e8fd;
  color: #7c3aed;
}
.admin-role--admin {
  background: #fdecec;
  color: var(--color-danger);
}
.admin-role--contributor {
  background: #e7f6ec;
  color: var(--color-admin-green);
}
.admin-role--valtechie {
  background: #e8effd;
  color: var(--color-link);
}

/* roles cell: let pills wrap instead of overflowing into next column */
.admin-grid__cell--roles {
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

/* ===== buttons (CTAs) ===== */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.8rem;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white-bg);
  color: var(--color-bb-black-font);
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.admin-btn:hover {
  background: var(--color-surface-soft);
  border-color: var(--color-border-ccc);
}
.admin-btn:active {
  transform: translateY(1px);
}
.admin-btn--primary {
  background: var(--color-link);
  border-color: var(--color-link);
  color: var(--color-white-font);
}
.admin-btn--primary:hover {
  background: var(--color-link-hover);
  border-color: var(--color-link-hover);
}
.admin-btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white-font);
}
.admin-btn--danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

/* danger-zone card variant */
.admin-card--danger {
  border-color: #f5c6c0;
}
.admin-card--danger .admin-card__header {
  color: var(--color-danger);
  border-bottom-color: #f5c6c0;
}

/* action stack for button-only cards */
.admin-actions-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem 2.4rem;
}

/* form wrapper inside .admin-card (for config-form etc.) */
.admin-form-wrap {
  padding: 2rem 2.4rem;
  /* generic styled form for detail/edit pages (no .admin-view__content needed) */
}
.admin-form-wrap .form__group {
  margin-bottom: 1.6rem;
}
.admin-form-wrap .form__group label {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text-body);
  margin-bottom: 0.5rem;
}
.admin-form-wrap .form__group input[type=text],
.admin-form-wrap .form__group input[type=number],
.admin-form-wrap .form__group input[type=email],
.admin-form-wrap .form__group select,
.admin-form-wrap .form__group textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-size: 1.4rem;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  background: var(--color-white-bg);
  color: var(--color-bb-black-font);
}
.admin-form-wrap .form__group input[type=text]:focus,
.admin-form-wrap .form__group input[type=number]:focus,
.admin-form-wrap .form__group input[type=email]:focus,
.admin-form-wrap .form__group select:focus,
.admin-form-wrap .form__group textarea:focus {
  outline: none;
  border-color: var(--color-link);
}
.admin-form-wrap .form__group input[type=text]:disabled,
.admin-form-wrap .form__group input[type=number]:disabled,
.admin-form-wrap .form__group input[type=email]:disabled,
.admin-form-wrap .form__group select:disabled,
.admin-form-wrap .form__group textarea:disabled {
  background: var(--color-surface-soft);
  color: var(--color-muted-font);
  cursor: not-allowed;
}
.admin-form-wrap .form__group input[type=checkbox] {
  width: auto;
  transform: scale(1.2);
  margin-left: 0.4rem;
}
.admin-form-wrap .form__group textarea {
  resize: vertical;
  min-height: 9rem;
}
.admin-form-wrap .admin-form__meta {
  font-size: 1.4rem;
  color: var(--color-bb-black-font);
}
.admin-form-wrap .admin-inline {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.admin-form-wrap .admin-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* lot edit form reuses the frontend .lot-creation-form styling, but in the
   admin panel it should span the full content width (the 78rem cap is a
   frontend reading-width constraint, not wanted here) */
.admin_content-section .lot-creation-form {
  max-width: none;
  margin: 0;
  padding: 0 0 4rem;
  /* small image thumbnails (uploaded previews) instead of full-size images */
}
.admin_content-section .lot-creation-form .form__label-for-upload img {
  display: block;
  width: 9rem;
  height: 9rem;
  margin: 0.6rem 0;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--color-border-ccc);
}
.admin_content-section .lot-creation-form {
  /* additional images: thumbnails laid out in a row */
}
.admin_content-section .lot-creation-form .upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.admin_content-section .lot-creation-form .upload-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.admin_content-section .lot-creation-form .upload-col .form__label-for-upload {
  font-size: 1.05rem;
  line-height: 1.2;
}
.admin_content-section .lot-creation-form .upload-col .form__label-for-upload img {
  width: 7rem;
  height: 7rem;
}
.admin_content-section .lot-creation-form .upload-col input[type=file] {
  width: auto;
  max-width: 14rem;
  font-size: 1rem;
}
.admin_content-section .lot-creation-form .upload-col input[type=file]::file-selector-button {
  padding: 0.6rem 1rem;
  font-size: 1.1rem;
}

/* read-only key/value detail rows inside .admin-card */
.admin-detail {
  padding: 0.6rem 0;
}
.admin-detail__row {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 1.6rem;
  align-items: baseline;
  padding: 1.1rem 2.4rem;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 1.45rem;
}
.admin-detail__row:last-child {
  border-bottom: none;
}
.admin-detail__key {
  color: var(--color-muted-font);
  font-weight: 600;
}
.admin-detail__val {
  color: var(--color-bb-black-font);
  word-break: break-word;
}
.admin-detail__val a {
  color: var(--color-link);
  text-decoration: none;
}
.admin-detail__val a:hover {
  text-decoration: underline;
}

/* winners totals row */
.admin-grid__row--total {
  font-weight: 700;
  background: var(--color-surface-soft);
  border-top: 2px solid var(--color-border-ccc);
}
.admin-grid__row--total .admin-grid__cell {
  color: var(--color-bb-black-font);
}

/* lot status pill (winners page) */
.admin-status {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: capitalize;
}
.admin-status--pending {
  background: #fff4e5;
  color: var(--color-warning-bg);
}
.admin-status--live {
  background: #e7f6ec;
  color: var(--color-admin-green);
}
.admin-status--finished {
  background: #eceff3;
  color: #475569;
}

.admin-hint {
  font-size: 1.3rem;
  color: var(--color-muted-font);
  margin: 0 0 1.2rem;
  max-width: 70rem;
}

/* notes block under a detail card */
.admin-notes {
  margin-top: 1.6rem;
  padding: 1.6rem 2rem;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  font-size: 1.35rem;
  color: var(--color-text-body);
}
.admin-notes__title {
  font-weight: 700;
  color: var(--color-bb-black-font);
  margin-bottom: 0.8rem;
}
.admin-notes p {
  margin: 0 0 0.5rem;
}

/* ensure cursor on ALL CTAs (catches mixins I don't see too) */
button,
.admin-btn,
.admin-page__link,
.admin-table__action a,
.admin-filter__btn,
.back-button,
[role=button] {
  cursor: pointer;
}

.ach-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 4rem;
  height: 2.2rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: var(--color-ccc-bg);
  transition: background 0.2s ease;
}
.ach-switch__thumb {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-white-bg);
  box-shadow: 0 1px 3px rgba(var(--color-black-rgb), 0.3);
  transition: transform 0.2s ease;
}
.ach-switch.is-on {
  background: var(--color-admin-green);
}
.ach-switch.is-on .ach-switch__thumb {
  transform: translateX(1.8rem);
}

.admin-filter__sep {
  align-self: stretch;
  width: 1px;
  margin: 0 0.4rem;
  background: var(--color-border-light);
}

.users-stats-export,
.lots-stats-export,
.user-stats-export {
  margin: 0.4rem 0 1.6rem;
}

/* ─── Site Config page ─────────────────────────────────────────────────── */
.admin-btn--ghost {
  background: transparent;
  border-color: var(--color-border-ccc);
  color: var(--color-muted-font);
}

.site-config__subhead {
  margin: 2rem 0 1rem;
  font-size: 1.4rem;
  color: var(--color-muted-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-asset {
  padding: 1.6rem 0;
  border-top: 1px solid var(--color-border-light);
}
.site-asset:first-of-type {
  border-top: 0;
}
.site-asset__label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: var(--color-bb-black-font);
}
.site-asset__row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.site-asset__preview {
  width: 22rem;
  max-width: 100%;
  min-height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  /* dark tile so light/white logos are visible, mirroring header/footer */
  background: var(--color-bb-black-bg);
}
.site-asset__preview--icon {
  width: 9rem;
  min-height: 9rem;
}
.site-asset__img {
  max-width: 100%;
  max-height: 6rem;
  object-fit: contain;
}
.site-asset--icon .site-asset__img, .site-asset__preview--icon .site-asset__img {
  max-height: 7rem;
}
.site-asset__empty {
  color: var(--color-footer-text);
  font-size: 1.3rem;
}
.site-asset__controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* ─── Lot visibility status (admin lot detail) ─────────────────────────── */
.lot-visibility {
  font-weight: 600;
}
.lot-visibility--live {
  color: var(--color-admin-green);
}
.lot-visibility--hidden {
  color: var(--color-danger);
}
.lot-visibility__reason {
  display: inline-block;
  margin: 0.2rem 0 0 0.6rem;
  padding: 0.2rem 0.9rem;
  border: 1px solid var(--color-danger);
  border-radius: 5rem;
  color: var(--color-danger);
  font-size: 1.2rem;
  font-weight: 500;
}

/* ─── Lot lifecycle status badge (lots overview) ───────────────────────── */
.lot-status {
  display: inline-block;
  padding: 0.2rem 0.9rem;
  border-radius: 5rem;
  font-size: 1.2rem;
  font-weight: 600;
  border: 1px solid currentColor;
}
.lot-status--live {
  color: var(--color-admin-green);
}
.lot-status--finished {
  color: var(--color-muted-font);
}
.lot-status--not-started {
  color: var(--color-link);
}

.progress-section {
  max-width: var(--content-max);
  margin: 0 auto;
}
.progress-section__intro {
  margin: 2rem 0;
  font-size: 1.75rem;
  line-height: 1.5;
  color: var(--color-text-body);
}
@media (max-width: 768px) {
  .progress-section__intro {
    font-size: 1.7rem;
  }
}

.progress-card {
  padding: 2.4rem 3rem;
  background: var(--color-white-bg);
  border-radius: 1.6rem;
  box-shadow: 0 0.2rem 1.6rem rgba(var(--color-bb-black-rgb), 0.05);
}
.progress-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.4rem;
}
.progress-card__amounts {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.progress-card__raised {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-bb-black-font);
}
.progress-card__goal {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-muted-font);
}
.progress-card__percent {
  flex-shrink: 0;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-progress-green);
}
.progress-card__track {
  width: 100%;
  height: 1.2rem;
  background: var(--color-track-bg);
  border-radius: 5rem;
  overflow: hidden;
}
.progress-card__fill {
  height: 100%;
  width: 0;
  background: var(--color-progress-green);
  border-radius: 5rem;
  transition: width 1s ease-out;
}
.progress-card__description {
  margin-top: 1.4rem;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--color-text-body);
}
@media (max-width: 768px) {
  .progress-card {
    padding: 2rem;
  }
  .progress-card__raised {
    font-size: 2.4rem;
  }
}

.sort-dropdown {
  position: relative;
  display: inline-block;
}
.sort-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.4rem;
  font-size: 1.5rem;
  color: var(--color-bb-black-font);
  background: var(--color-white-bg);
  border: 1.5px solid var(--color-border-ccc);
  border-radius: 1rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.sort-dropdown__trigger::-webkit-details-marker {
  display: none;
}
.sort-dropdown__trigger strong {
  font-weight: 700;
}
.sort-dropdown__trigger::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.sort-dropdown[open] .sort-dropdown__trigger {
  border-color: var(--color-bb-black-font);
}
.sort-dropdown[open] .sort-dropdown__trigger::after {
  transform: rotate(-135deg);
}
.sort-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0.6rem;
  list-style: none;
  background: var(--color-white-bg);
  border-radius: 1.4rem;
  box-shadow: 0 1rem 3rem rgba(var(--color-bb-black-rgb), 0.12);
  z-index: 50;
}
.sort-dropdown__option {
  display: block;
  padding: 1rem 1.4rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-bb-black-font);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.9rem;
}
.sort-dropdown__option:hover {
  background: var(--color-light-gray);
}
li.is-selected .sort-dropdown__option {
  color: var(--color-bb-accent);
  background: var(--color-light-gray);
}

.content-page {
  margin: 0 auto;
  padding: 5rem 0;
  color: var(--color-text-body);
  font-size: 1.7rem;
  line-height: 1.75;
}
.content-page h1 {
  margin-bottom: 1.6rem;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-bb-black-font);
}
.content-page h2 {
  margin: 4.5rem 0 1.6rem;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}
.content-page h3 {
  margin: 4rem 0 1.4rem;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}
.content-page p {
  margin-bottom: 1.8rem;
}
.content-page a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}
.content-page a:hover, .content-page a:focus-visible {
  color: var(--color-link-hover);
}
.content-page ul,
.content-page ol {
  margin: 0 0 2.2rem;
  padding-left: 2.2rem;
}
.content-page ul li,
.content-page ol li {
  margin-bottom: 1rem;
}
.content-page ul {
  list-style: none;
  padding-left: 0;
}
.content-page ul li {
  position: relative;
  padding-left: 2.4rem;
}
.content-page ul li::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0.4rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: var(--color-link);
}
.content-page b,
.content-page strong {
  font-weight: 700;
  color: var(--color-bb-black-font);
}
.content-page .html-content > :first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .content-page {
    padding: 4rem 2rem 6rem;
    font-size: 1.6rem;
  }
  .content-page h1 {
    font-size: 2.8rem;
  }
  .content-page .description {
    font-size: 1.7rem;
  }
  .content-page h2 {
    font-size: 2.2rem;
  }
  .content-page h3 {
    font-size: 1.9rem;
  }
}
.card-overview {
  display: flex;
  flex-direction: column;
  background: var(--color-white-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 1.6rem;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-overview:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 1.2rem 2.6rem rgba(var(--color-bb-black-rgb), 0.12);
}
.card-overview .product-tile__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-cream-bg);
}
.card-overview .product-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-overview .product-tile__gallery {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.card-overview .product-tile__gallery::-webkit-scrollbar {
  display: none;
}
.card-overview .product-tile__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  display: block;
}
.card-overview .product-tile__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
}
.card-overview .product-tile__dot {
  pointer-events: auto;
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(var(--color-bb-black-rgb), 0.2);
  transition: background 0.2s ease, transform 0.2s ease;
}
.card-overview .product-tile__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}
.card-overview .product-tile__badge {
  position: absolute;
  top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-bb-black-font);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 5rem;
  box-shadow: 0 0.2rem 0.6rem rgba(var(--color-bb-black-rgb), 0.1);
}
.card-overview .product-tile__badge--ships {
  left: 1.2rem;
}
.card-overview .product-tile__badge--group {
  right: 1.2rem;
}
.card-overview .product-tile__badge svg {
  width: 1.5rem;
  height: 1.5rem;
}
.card-overview .product-tile__fav {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  box-shadow: 0 0.2rem 0.6rem rgba(var(--color-bb-black-rgb), 0.12);
  transition: transform 0.2s ease;
}
.card-overview .product-tile__fav svg {
  width: 2rem;
  height: 2rem;
}
.card-overview .product-tile__fav.is-active {
  background: #f02b4b;
  color: var(--color-white-font);
}
.card-overview .product-tile__fav.is-active svg {
  fill: currentColor;
}
.card-overview .product-tile__fav.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.card-overview .product-tile__fav.is-disabled::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.6rem);
  right: 0;
  z-index: 5;
  padding: 0.6rem 0.9rem;
  font-size: 1.2rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-white-font);
  background: rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.card-overview .product-tile__fav.is-disabled:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.card-overview .product-tile__body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem 1.6rem 2rem;
  flex: 1;
}
.card-overview .product-tile__title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-bb-black-font);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  min-height: 2.6em; /* reserve 2 lines so 1-line titles keep card height equal */
}
.card-overview .product-tile__title:hover {
  color: var(--color-bb-accent);
}
.card-overview .product-tile__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}
.card-overview .product-tile__bidders {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  color: var(--color-muted-font);
}
.card-overview .product-tile__bidders svg {
  width: 1.8rem;
  height: 1.8rem;
}
.card-overview .product-tile__bid {
  text-align: right;
}
.card-overview .product-tile__bid-label {
  display: block;
  font-size: 1.3rem;
  color: var(--color-muted-font);
}
.card-overview .product-tile__bid-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}
.card-overview .product-tile__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.3rem;
  border: none;
  border-radius: 1rem;
  background: var(--color-bb-accent-bg);
  color: var(--color-white-font);
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.card-overview .product-tile__action:hover {
  background: var(--color-link-hover);
}
.card-overview .product-tile__action--own {
  background: transparent;
  color: var(--color-bb-accent);
  border: 1px solid var(--color-bb-accent);
}
.card-overview .product-tile__action--own:hover {
  background: rgba(var(--color-bb-black-rgb), 0.04);
}

.cookie-banner {
  position: fixed;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 1000;
  background: var(--color-white-bg, #fff);
  border: 1px solid var(--color-border-light, #e5e5e5);
  border-radius: 14px;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12);
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.6rem 2rem;
}
.cookie-banner__text {
  flex: 1 1 30rem;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.5;
}
.cookie-banner__link {
  color: var(--color-link);
  text-decoration: underline;
}
.cookie-banner__actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}
.cookie-banner__btn {
  padding: 0.9rem 1.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}
.cookie-banner__btn--primary {
  background: var(--color-bb-accent-bg);
  color: var(--color-white-font);
}
.cookie-banner__btn--ghost {
  background: transparent;
  border-color: var(--color-border-light);
  color: var(--color-bb-black-font);
}

@media (max-width: 768px) {
  .cookie-banner__actions {
    width: 100%;
  }
  .cookie-banner__actions .cookie-banner__btn {
    flex: 1;
  }
}
/*convert to css*/
.main {
  background-color: var(--color-cream-bg);
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
}

.main__information.content-container,
.main__information {
  font-size: 1.5rem;
  padding-bottom: 0.3rem;
}

.card-container {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 1rem 0 3rem;
}
@media (max-width: 1200px) {
  .card-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .card-container {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

.cards__navigation-panel {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
  padding: 1.5rem 0;
}

.cards__result {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
  flex-shrink: 0;
  white-space: nowrap;
}

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.category-filter .btn {
  flex-shrink: 0;
  border-radius: 5rem;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 1rem;
  background: var(--color-white-bg);
  color: var(--color-bb-black-font);
  border: 1px solid var(--color-border-light);
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin: 0;
}
.category-filter .btn:hover {
  border-color: var(--color-bb-black-font);
}
.category-filter .btn.btn--black {
  background: var(--color-bb-black-bg);
  color: var(--color-white-font);
  border-color: var(--color-bb-black-bg);
}
.category-filter .btn.btn--gray {
  background: var(--color-light-gray);
  color: var(--color-muted-font);
  border-color: var(--color-border-light);
  font-weight: 500;
}
.category-filter .btn.btn--gray:hover {
  background: var(--color-border-light);
  color: var(--color-bb-black-font);
  border-color: var(--color-border-ccc);
}

.category-filter a,
.category-filter + a {
  margin: 0;
}

.sorting {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}
.sorting label {
  white-space: nowrap;
}
.sorting select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.9rem 3.6rem 0.9rem 1.8rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-bb-black-font);
  background: var(--color-white-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 5rem;
  transition: border-color 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
}
.sorting select:hover, .sorting select:focus {
  border-color: var(--color-bb-black-font);
  outline: none;
}

@media (max-width: 768px) {
  .cards__navigation-panel {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cards__result,
  .sorting {
    flex-basis: 100%;
    justify-content: center;
  }
  .sorting select {
    width: 100%;
  }
}
.card-no-results {
  display: flex;
  justify-content: center;
  padding: 4rem 0 6rem;
}

.placeholder {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 3.5rem;
  background: var(--color-white-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 1.6rem;
  box-shadow: 0 0.4rem 2.4rem rgba(var(--color-bb-black-rgb), 0.06);
  text-align: center;
}
@media (max-width: 576px) {
  .placeholder {
    padding: 3rem 2rem;
  }
}
.placeholder__icon {
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--color-bb-accent-rgb), 0.08);
  color: var(--color-bb-accent);
}
.placeholder__icon svg {
  width: 3rem;
  height: 3rem;
}
.placeholder__title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-bb-black-font);
  margin-bottom: 1rem;
}
.placeholder__text, .placeholder__body {
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--color-muted-font);
}
.placeholder__text:not(:last-child), .placeholder__body:not(:last-child) {
  margin-bottom: 0.8rem;
}
.placeholder__text a, .placeholder__body a {
  color: var(--color-bb-accent);
  font-weight: 600;
  text-decoration: none;
}
.placeholder__text a:hover, .placeholder__body a:hover {
  color: var(--color-bb-accent-dark);
  text-decoration: underline;
}
.placeholder__body p:not(:last-child) {
  margin-bottom: 0.8rem;
}
.placeholder__countdown {
  margin-top: 2.8rem;
  padding-top: 2.8rem;
  border-top: 1px solid var(--color-border-light);
}
.placeholder__countdown-label {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-font);
  margin-bottom: 1.4rem;
}
.placeholder__countdown-blocks {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
@media (max-width: 576px) {
  .placeholder__countdown-blocks {
    gap: 0.6rem;
  }
}
.placeholder .countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 7rem;
  padding: 1.4rem 0.8rem;
  background: var(--color-bb-black-bg);
  border-radius: 1rem;
}
@media (max-width: 576px) {
  .placeholder .countdown-block {
    min-width: 6rem;
    padding: 1.1rem 0.6rem;
  }
}
.placeholder .countdown-value {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white-font);
  font-variant-numeric: tabular-nums;
}
.placeholder .countdown-label {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--color-white-rgb), 0.6);
}
.placeholder .countdown-finished {
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-bb-accent);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 2.5rem 0;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 1.2rem;
  background: var(--color-white-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 5rem;
  text-decoration: none;
  color: var(--color-bb-black-font);
  font-size: 1.5rem;
  font-weight: 600;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pagination__btn:hover {
  border-color: var(--color-bb-black-font);
}
.pagination__btn--active {
  background: var(--color-bb-black-bg);
  color: var(--color-white-font);
  border-color: var(--color-bb-black-bg);
  pointer-events: none;
}
.pagination__btn--prev, .pagination__btn--next {
  font-weight: 700;
  font-size: 1.8rem;
}

.copy-container {
  display: flex;
  gap: 8px;
  align-items: center;
}
.copy-container #copyRefLinkBtn {
  transition: background-color 0.2s, color 0.2s;
}
.copy-container #copyRefLinkBtn.copied {
  background-color: var(--color-bb-accent-bg);
  color: var(--color-white-font);
}

/* ============================================================
   My Account redesign
   ============================================================ */
.user-view {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
  padding: 3.2rem 0;
}

/* ---------- Sidebar card ---------- */
.user-view__menu {
  flex: 0 0 32rem;
  position: sticky;
  top: 2rem;
  padding: 2rem 1.6rem;
  background: var(--color-white-bg, #fff);
  border-radius: 16px;
  box-shadow: 0 1rem 3rem rgba(var(--color-bb-black-rgb), 0.06);
}

@media (max-width: 992px) {
  .user-view {
    flex-direction: column;
  }
  .user-view__menu {
    flex: 0 0 auto;
    width: 100%;
    position: static;
    top: auto;
  }
}
.user-view__profile {
  display: flex;
  flex-direction: column;
  padding: 0.8rem 0.8rem 2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-track-bg);
}

.user-view__avatar {
  width: 4.8rem;
  height: 4.8rem;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  object-fit: cover;
}

.user-view__name {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-bb-black-font);
}

.user-view__email {
  margin-top: 0.2rem;
  font-size: 1.4rem;
  color: var(--color-muted-font);
}

/* ---------- Side navigation ---------- */
.user-view .side-nav,
.admin-nav .side-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  /* row = the <li>; color lives here → text + icon share currentColor.
     position: relative anchors the stretched-link overlay below. */
}
.user-view .side-nav li,
.admin-nav .side-nav li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.4rem;
  padding: 1rem;
  border-radius: 10px;
  color: var(--color-bb-black-font);
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.user-view .side-nav li::before,
.admin-nav .side-nav li::before {
  display: none;
}
.user-view .side-nav li,
.admin-nav .side-nav li {
  /* remove old Natours accent bar */
}
.user-view .side-nav,
.admin-nav .side-nav {
  /* link fills the row and inherits the li color */
}
.user-view .side-nav a,
.admin-nav .side-nav a {
  flex: 1 1 auto;
  font-size: 1.5rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
.user-view .side-nav,
.admin-nav .side-nav {
  /* Stretched link: make the WHOLE row clickable (icon + text + padding), not
     just the anchor text. A transparent overlay covers the li and forwards
     clicks to the link. Disabled rows are excluded. */
}
.user-view .side-nav li:not(.side-nav--disabled) > a::after,
.admin-nav .side-nav li:not(.side-nav--disabled) > a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.user-view .side-nav,
.admin-nav .side-nav {
  /* size EVERY icon — sprite + inline (no fill here!) */
}
.user-view .side-nav svg,
.admin-nav .side-nav svg {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
}
.user-view .side-nav,
.admin-nav .side-nav {
  /* inline OUTLINE icons (top menu) */
}
.user-view .side-nav__icon,
.admin-nav .side-nav__icon {
  fill: none;
  stroke: currentColor;
}
.user-view .side-nav,
.admin-nav .side-nav {
  /* sprite icons ONLY (admin <use>) — fill, never touches outline ones */
}
.user-view .side-nav svg:not(.side-nav__icon),
.admin-nav .side-nav svg:not(.side-nav__icon) {
  fill: currentColor;
}
.user-view .side-nav,
.admin-nav .side-nav {
  /* hover + active recolor BOTH text and icon */
}
.user-view .side-nav li:hover,
.admin-nav .side-nav li:hover {
  color: var(--color-bb-accent);
  background: var(--color-surface-soft);
}
.user-view .side-nav .side-nav--active, .user-view .side-nav__item--active,
.admin-nav .side-nav .side-nav--active,
.admin-nav .side-nav__item--active {
  color: var(--color-bb-accent);
  background: rgba(var(--color-bb-accent-rgb), 0.08);
}

/* logout CTA — danger-colored like the header's, no dividers around it */
.side-nav__footer {
  margin-top: 0.8rem;
}

.side-nav__logout {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem;
  border-radius: 10px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-danger);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.side-nav__logout svg {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
}
.side-nav__logout:hover {
  color: var(--color-danger);
  background: rgba(var(--color-danger-rgb), 0.12);
}

/* theme switch — top of the account sidebar (an on/off toggle, not a menu row) */
.theme-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  padding: 0.4rem 0.8rem 1.2rem;
  border-bottom: 1px solid var(--color-track-bg);
}
.theme-switch__label {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-bb-black-font);
}
.theme-switch__btn {
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
}
.theme-switch__track {
  display: inline-block;
  position: relative;
  width: 4.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--color-ccc-bg);
  transition: background 0.2s ease;
}
.theme-switch__thumb {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--color-white-bg);
  box-shadow: 0 1px 3px rgba(var(--color-black-rgb), 0.3);
  transition: transform 0.2s ease;
}
.theme-switch__btn[aria-checked=true] .theme-switch__track {
  background: var(--color-bb-accent);
}
.theme-switch__btn[aria-checked=true] .theme-switch__thumb {
  transform: translateX(2rem);
}

/* admin sub-menu — a <details> disclosure, collapsed by default. Tinted
   card + accent border (same idiom as .side-nav--active's accent tint,
   just using the admin-green token) so it reads as a distinct, privileged
   area rather than another regular sidebar row. */
.admin-nav {
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  background: rgba(var(--color-admin-green-rgb), 0.08);
  border: 1px solid rgba(var(--color-admin-green-rgb), 0.24);
  border-left: 3px solid var(--color-admin-green);
  border-radius: 12px;
}
.admin-nav__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.8rem 0;
  padding-bottom: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-admin-green);
  border-bottom: none;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.admin-nav__heading::-webkit-details-marker {
  display: none;
}
.admin-nav__heading::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.admin-nav[open] .admin-nav__heading::after {
  transform: rotate(-135deg);
}

/* ---------- Content card ---------- */
.user-view__content {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 3.2rem;
  background: var(--color-white-bg, #fff);
  border-radius: 16px;
  box-shadow: 0 1rem 3rem rgba(var(--color-bb-black-rgb), 0.06);
}

.user-view__form-container .heading-secondary {
  margin-bottom: 2.4rem;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}

/* ---------- Form: 2-column grid ---------- */
.form-user-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2.4rem;
  row-gap: 1.6rem;
  align-items: start;
}
.form-user-data .form__group {
  margin: 0;
}
.form-user-data {
  /* whole-row items */
}
.form-user-data > .delivery-message,
.form-user-data > .subscription-message,
.form-user-data > .delivery-info,
.form-user-data > .isSubscribed,
.form-user-data > .form__photo-upload,
.form-user-data > .form__group--full,
.form-user-data > .right {
  grid-column: 1/-1;
}
.form-user-data .delivery-message,
.form-user-data .subscription-message {
  margin-top: 0.8rem;
  font-weight: 600;
  color: var(--color-bb-black-font);
}
.form-user-data .delivery-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2.4rem;
  row-gap: 1.6rem;
}
.form-user-data .form__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 1.3rem;
  color: var(--color-muted-font);
}
.form-user-data .isSubscribed {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.form-user-data .isSubscribed .form__label {
  margin: 0;
}
.form-user-data .isSubscribed .form__input[type=checkbox] {
  flex: 0 0 auto;
  width: auto;
  height: auto;
}
.form-user-data .form__photo-upload {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 0.4rem;
}
.form-user-data .form__photo-upload .nav__user-img {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.form-user-data .form__photo-upload .form__upload {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}
.form-user-data .form__photo-upload .form__label-for-upload {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.9rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-link);
  background: transparent;
  border: 1px solid var(--color-link);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.form-user-data .form__photo-upload .form__label-for-upload:hover {
  background: var(--color-bb-accent-bg);
  color: var(--color-white-font);
}
.form__upload:focus-visible + .form-user-data .form__photo-upload .form__label-for-upload {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}
.form-user-data .right {
  margin-top: 0.8rem;
}
.form-user-data .subscription-lang-row {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.form-user-data .lang-col {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.form-user-data .lang-col .form__label {
  margin: 0;
  white-space: nowrap;
}
.form-user-data .lang-col .form__input {
  width: auto;
  min-width: 8rem;
}
.form-user-data .form__group.isSubscribed {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
}
.form-user-data .form__group.isSubscribed label.isSubscribed {
  margin: 0;
  cursor: pointer;
}
.form-user-data .form__group.isSubscribed .form__input[type=checkbox] {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  cursor: pointer;
}

.delivery-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem 2rem;
}
.delivery-info .form__group {
  margin: 0;
}

.delivery-message,
.subscription-message {
  margin: 0.6rem 0 -0.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}

/* labels + fields */
.user-view .form__label {
  margin-bottom: 0.6rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-muted-font);
}

.user-view .form__input:not([type=checkbox]) {
  width: 100%;
  padding: 1.2rem 1.4rem;
  font-family: inherit;
  font-size: 1.5rem;
  color: var(--color-bb-black-font);
  background: var(--color-input-bg);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.user-view .form__input:not([type=checkbox])::placeholder {
  color: var(--color-muted-font);
}
.user-view .form__input:not([type=checkbox]):focus {
  outline: none;
  background: var(--color-white-bg, #fff);
  border-color: var(--color-bb-accent);
}
.user-view .form__input:not([type=checkbox]) {
  /* keep read-only (disabled) text fully legible, not greyed */
}
.user-view .form__input:not([type=checkbox]):disabled {
  color: var(--color-bb-black-font);
  -webkit-text-fill-color: var(--color-bb-black-font);
  opacity: 1;
  cursor: default;
}

/* custom select arrow */
.user-view select.form__input {
  appearance: none;
  padding-right: 3.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
  background-size: 1.1rem;
}

/* subscription checkbox row */
.form__group.isSubscribed {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.form__group.isSubscribed .form__input[type=checkbox] {
  width: 2rem;
  height: 2rem;
  accent-color: var(--color-bb-accent);
}
.form__group.isSubscribed .form__label {
  margin-bottom: 0;
  font-weight: 500;
  color: var(--color-bb-black-font);
}

/* photo upload row */
.form__photo-upload {
  flex-flow: row wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
}
.form__photo-upload .nav__user-img {
  flex: 0 0 auto;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
}
.form__photo-upload .form__upload {
  font-size: 1.3rem;
  color: var(--color-muted-font);
}
.form__photo-upload .form__label {
  margin-bottom: 0;
}

/* ---------- Edit button ---------- */
.user-view__actions {
  margin-top: 2.4rem;
}

.btn-account {
  display: inline-block;
  padding: 1.3rem 2.6rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white-font);
  text-decoration: none;
  background: var(--color-bb-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-account:hover {
  background: var(--color-bb-accent-dark);
  color: var(--color-white-font);
}

/* ---------- Password field with toggle ---------- */
.form__password {
  position: relative;
}
.form__password .form__input {
  padding-right: 4.4rem;
}
.form__password .form__input-toggle {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  color: var(--color-muted-font);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.form__password .form__input-toggle:hover {
  color: var(--color-bb-accent);
  background: var(--color-surface-soft);
}
.form__password .form__input-toggle svg {
  width: 2rem;
  height: 2rem;
}
.form__password .form__input-toggle .icon-eye-off {
  display: none;
}
.form__password .form__input-toggle.is-visible .icon-eye {
  display: none;
}
.form__password .form__input-toggle.is-visible .icon-eye-off {
  display: block;
}

.form-user-password {
  max-width: 46rem;
}

/* ---------- Referral program ---------- */
.referral-intro {
  margin-bottom: 2.4rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-muted-font);
}

.copy-container {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}
.copy-container .form__group {
  flex: 1 1 auto;
  margin: 0;
}
.copy-container .form__input {
  width: 100%;
  padding: 1.2rem 1.4rem;
  font-size: 1.5rem;
  color: var(--color-bb-black-font);
  background: var(--color-input-bg);
  border: 1px solid transparent;
  border-radius: 10px;
}
.copy-container {
  /* monospace for the bare referral code */
}
.copy-container--code .form__input {
  font-family: monospace;
  letter-spacing: 0.12em;
}

.btn-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 1.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white-font);
  background: var(--color-bb-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-copy:hover {
  background: var(--color-bb-accent-dark);
}
.btn-copy svg {
  width: 1.8rem;
  height: 1.8rem;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.6rem;
}
.share-buttons__label {
  flex: 1 0 100%;
  margin-bottom: 0.2rem;
  font-size: 1.3rem;
  color: var(--color-muted-font);
}
.share-buttons a {
  padding: 1rem 1.8rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-white-font);
  text-decoration: none;
  background: var(--color-bb-black-bg);
  border-radius: 10px;
  transition: opacity 0.15s ease;
}
.share-buttons a:hover {
  opacity: 0.85;
}

/* ---------- Wishlist grid ---------- */
.user-view__wishlist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.user-view__wishlist .card-overview {
  margin: 0;
  width: 100%;
  width: 100%;
  min-width: 0; /* prevents grid blowout */
}

.user-view__content .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.wishlist-empty {
  padding: 4rem 0;
  font-size: 1.6rem;
  color: var(--color-muted-font);
  text-align: center;
}

@media (max-width: 1200px) {
  .user-view__wishlist {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .user-view__wishlist {
    grid-template-columns: 1fr;
  }
  .copy-container {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-copy {
    justify-content: center;
  }
  .form-user-data {
    grid-template-columns: 1fr;
  }
  .form-user-data .delivery-info {
    grid-template-columns: 1fr;
  }
  .form-user-data .subscription-lang-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .form-user-data .lang-col .form__input {
    width: 100%;
  }
  .delivery-info {
    grid-template-columns: 1fr;
  }
  .user-view__content .btn-account {
    display: block;
    width: 100%;
    text-align: center;
  }
}
/* ---------- Referral note ---------- */
.referral-note {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-muted-font);
}
.referral-note a {
  color: var(--color-bb-accent);
  font-weight: 600;
  text-decoration: none;
}
.referral-note a:hover {
  text-decoration: underline;
}

/* ---------- Empty states (placeholders) ---------- */
.card-no-results {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 2rem 0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  max-width: 46rem;
  padding: 4rem 3.2rem;
  text-align: center;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-track-bg);
  border-radius: 16px;
}
.empty-state__icon {
  display: grid;
  place-items: center;
  width: 7.2rem;
  height: 7.2rem;
  margin-bottom: 0.4rem;
  color: var(--color-bb-accent);
  background: rgba(var(--color-bb-accent-rgb), 0.1);
  border-radius: 50%;
}
.empty-state__icon svg {
  width: 3.4rem;
  height: 3.4rem;
}
.empty-state__title {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}
.empty-state__text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-muted-font);
}
.empty-state__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 0.8rem;
  padding: 1.3rem 2.6rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white-font);
  text-decoration: none;
  background: var(--color-bb-accent);
  border-radius: 10px;
  transition: background 0.15s ease;
}
.empty-state__cta:hover {
  background: var(--color-bb-accent-dark);
}

/* ── Info chips (weather + exchange rate) — compact single row in the profile ── */
.info-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: 1.2rem;
}
.info-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.info-card__icon {
  font-size: 1.6rem;
  line-height: 1;
}

/* ============================================================
   Lot detail page (PDP) — redesign
   ============================================================ */
/* non-color tokens stay as Sass values */
.pdp {
  padding-top: 2.5rem;
}
.pdp__back {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-muted-font);
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
}
.pdp__back svg {
  width: 1.7rem;
  height: 1.7rem;
}
.pdp__back:hover {
  color: var(--color-bb-black-font);
}
.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 4rem;
}
.pdp {
  /* ---------- Gallery ---------- */
}
.pdp__gallery {
  position: relative;
}
.pdp__badge {
  position: absolute;
  z-index: 6;
  top: 1.4rem;
  left: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.3rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-bb-black-font);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(6px);
}
.pdp__badge svg {
  width: 1.5rem;
  height: 1.5rem;
}
.pdp__carousel {
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface-soft);
}
.pdp__img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.pdp__gallery .carousel-cell {
  width: 100%;
}
.pdp {
  /* ---- thumbnail nav strip (asNavFor) ---- */
}
.pdp__thumbs {
  margin-top: 1.2rem;
  /* hide the focus outline flickity puts on the nav viewport */
}
.pdp__thumbs:focus,
.pdp__thumbs .flickity-viewport:focus {
  outline: none;
}
.pdp__thumb {
  width: 8rem;
  height: 6rem;
  margin-right: 1rem;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.pdp__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp__thumb:hover {
  opacity: 0.85;
}
.pdp__thumb {
  /* flickity marks the synced cell with .is-nav-selected */
}
.pdp__thumb.is-nav-selected {
  opacity: 1;
  border-color: var(--color-bb-accent);
}
@media (max-width: 576px) {
  .pdp__thumb {
    width: 6.4rem;
    height: 4.8rem;
    margin-right: 0.8rem;
  }
}
.pdp {
  /* ---- round white nav buttons (match recommendations) ---- */
}
.pdp .flickity-prev-next-button {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--color-white-bg);
  border-radius: 50%;
  box-shadow: 0 0.4rem 1.6rem rgba(var(--color-bb-black-rgb), 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.pdp .flickity-prev-next-button.previous {
  left: 1.2rem;
}
.pdp .flickity-prev-next-button.next {
  right: 1.2rem;
}
.pdp .flickity-prev-next-button:hover {
  background: var(--color-white-bg);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 0.6rem 2rem rgba(var(--color-bb-black-rgb), 0.2);
}
.pdp .flickity-prev-next-button:active {
  transform: translateY(-50%) scale(0.98);
}
.pdp .flickity-prev-next-button:disabled {
  opacity: 0;
  pointer-events: none;
}
.pdp .flickity-prev-next-button .flickity-button-icon {
  width: 38%;
  height: 38%;
  left: 31%;
  top: 31%;
  fill: var(--color-bb-black-font);
}
@media (max-width: 576px) {
  .pdp .flickity-prev-next-button {
    width: 4rem;
    height: 4rem;
  }
  .pdp .flickity-prev-next-button.previous {
    left: 0.6rem;
  }
  .pdp .flickity-prev-next-button.next {
    right: 0.6rem;
  }
}
.pdp .flickity-page-dots {
  bottom: 1.2rem;
}
.pdp .flickity-page-dots .dot {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0 0.4rem;
  background: var(--color-white-bg);
  opacity: 0.5;
}
.pdp .flickity-page-dots .dot.is-selected {
  opacity: 1;
}
.pdp {
  /* ---- video facade (no-JS, <details>) ---- */
}
.pdp__video {
  margin-top: 1.6rem;
}
.pdp__video summary {
  list-style: none;
}
.pdp__video { /* remove default triangle */ }
.pdp__video summary::-webkit-details-marker {
  display: none;
}
.pdp__video-card {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.4rem 1.8rem;
  background: var(--color-surface-soft);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pdp__video-card:hover {
  background: var(--color-white-bg);
  box-shadow: 0 1.2rem 3rem rgba(var(--color-bb-black-rgb), 0.06);
}
.pdp {
  /* once opened, drop the facade so only the player shows */
}
.pdp__video[open] .pdp__video-card {
  display: none;
}
.pdp__video-play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: var(--color-bb-accent);
}
.pdp__video-play svg {
  width: 2rem;
  height: 2rem;
  margin-left: 0.2rem;
}
.pdp__video-text {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
}
.pdp__video-frame-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
  border-radius: 16px;
  box-shadow: 0 1.2rem 3rem rgba(var(--color-bb-black-rgb), 0.06);
}
.pdp__video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.pdp {
  /* ---------- Info ---------- */
}
.pdp__info {
  display: flex;
  flex-direction: column;
}
.pdp__title {
  margin: 0 0 1rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-bb-black-font);
}
.pdp__bidders {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 2.4rem;
  font-size: 1.5rem;
  color: var(--color-muted-font);
}
.pdp__bidders svg {
  width: 1.8rem;
  height: 1.8rem;
}
.pdp__cta {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.pdp__bid-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 2rem 2.2rem;
  background: var(--color-white-bg);
  border-radius: 16px;
  box-shadow: 0 1.2rem 3rem rgba(var(--color-bb-black-rgb), 0.06);
}
.pdp__bid-card--sold {
  background: var(--color-surface-soft);
  box-shadow: none;
}
.pdp__bid-label {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-font);
}
.pdp__bid-value {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-bb-black-font);
}
.pdp__quick {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pdp__quick-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-muted-font);
}
.pdp__quick-buttons {
  display: flex;
  gap: 1rem;
}
.pdp__quick-buttons .btn {
  flex: 1 1 0;
  min-width: 0;
}
.pdp {
  /* ---------- New bid row (50% label / 50% input) ---------- */
}
.pdp__bid {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.pdp__bid > span {
  flex: 0 0 50%;
  max-width: 50%;
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-muted-font);
}
.pdp__bid .pdp__input {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0; /* let the number input shrink to 50% */
  margin: 0;
}
.pdp__note {
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--color-muted-font);
}
.pdp__note a {
  color: var(--color-bb-accent);
}
.pdp {
  /* ---------- Inputs ---------- */
}
.pdp .form__input {
  padding: 1.5rem 1.6rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-bb-black-font);
  background-color: var(--color-light-gray-bg);
  border: 2px solid transparent;
  border-radius: 12px;
}
.pdp .form__input::placeholder {
  color: var(--color-muted-font);
  font-weight: 500;
}
.pdp .form__input:focus {
  outline: none;
  background: var(--color-white-bg);
  border: 2px solid var(--color-bb-accent);
  border-bottom: 2px solid var(--color-bb-accent);
}
.pdp textarea.form__input {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.45;
}
.pdp {
  /* ---------- Buttons ---------- */
}
.pdp .btn {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: none;
  border-radius: 12px;
  transition: all 0.18s ease;
}
.pdp .btn--block {
  display: block;
  width: 100%;
  text-align: center;
}
.pdp .btn--outline {
  padding: 1.2rem 1.4rem;
  color: var(--color-bb-accent);
  background: var(--color-white-bg);
  border: 1.5px solid rgba(var(--color-bb-accent-rgb), 0.35);
}
.pdp .btn--outline:hover {
  border-color: var(--color-bb-accent);
  background: rgba(var(--color-bb-accent-rgb), 0.07);
  color: var(--color-bb-accent);
}
.pdp .btn--premium {
  position: relative;
  overflow: hidden;
  border-color: #c9973a;
  color: #8a6010;
  background: linear-gradient(135deg, #fffbf0 0%, #fff8e1 100%);
}
.pdp .btn--premium::before {
  content: "PREMIUM";
  position: absolute;
  top: 3px;
  right: -1px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px 0 0 3px;
  background: #c9973a;
  color: #fff;
}
.pdp .btn--premium::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: background-position 0.5s ease;
}
.pdp .btn--premium:hover {
  border-color: #a87928;
  background: linear-gradient(135deg, #fff8e1 0%, #ffeeba 100%);
  color: #6b4a0a;
}
.pdp .btn--premium:hover::after {
  background-position: 100% 0;
}
.pdp .btn--blue {
  padding: 1.6rem;
  color: var(--color-white-font);
  background: var(--color-bb-accent);
  border: none;
}
.pdp .btn--blue:hover {
  background: var(--color-bb-accent-dark);
}
.pdp .btn--blue:active {
  transform: scale(0.99);
}
.pdp .top-bid {
  padding: 1.6rem;
  color: var(--color-bb-accent);
  background: rgba(var(--color-bb-accent-rgb), 0.08);
  border: 1.5px solid rgba(var(--color-bb-accent-rgb), 0.35);
}
.pdp .btn--wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.5rem;
  color: var(--color-bb-black-font);
  background: var(--color-surface-soft);
  border: 1.5px solid var(--color-track-bg);
}
.pdp .btn--wishlist:hover {
  background: var(--color-light-gray-bg);
}
.pdp .btn--wishlist svg {
  width: 1.8rem;
  height: 1.8rem;
}
.pdp .btn--wishlist.is-active {
  color: var(--color-white-font);
  border-color: #f02b4b;
  background-color: #f02b4b;
}
.pdp .btn--wishlist.is-active .btn__icon {
  fill: currentColor;
}
.pdp {
  /* ---------- Map ---------- */
}
.pdp__map {
  position: relative;
  height: 42rem;
  margin-top: 3rem;
  border-radius: 16px;
  overflow: hidden;
}
.pdp__map #map {
  position: absolute;
  inset: 0;
  width: 100%;
}
.pdp__step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-radius: 16px;
  background: rgba(var(--color-bb-accent-rgb), 0.04);
  transition: background 0.15s ease;
}
.pdp__step-icon {
  flex: 0 0 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  color: var(--color-bb-accent);
  background: rgba(var(--color-bb-accent), 0.08);
  border-radius: 50%;
  box-shadow: 0 0.4rem 1.2rem rgba(var(--color-bb-black-rgb), 0.1);
}
.pdp__step-text {
  flex: 1;
  font-size: 1.6rem;
  color: var(--color-bb-black-font);
}
.pdp__step-check {
  flex: 0 0 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  color: var(--color-white-font);
  background: var(--color-bb-accent);
  border-radius: 50%;
  box-shadow: 0 0.4rem 1.2rem rgba(var(--color-bb-black-rgb), 0.1);
}
.pdp__step:hover {
  background: rgba(var(--color-bb-accent-rgb), 0.08);
}
.pdp__step:active {
  background: rgba(var(--color-bb-accent-rgb), 0.16);
}

/* Map markers (rendered by JS, kept global) */
.marker {
  width: 3.2rem;
  height: 4rem;
  background: url("../img/pin.png") center/cover no-repeat;
  cursor: pointer;
}

.mapboxgl-popup {
  max-width: 25rem;
}

.mapboxgl-popup-content {
  padding: 1.4rem !important;
  font-size: 1.4rem;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15) !important;
}

/* ---------- Recommendations carousel ---------- */
.recommendation {
  padding-top: 4rem;
}
.recommendation__title {
  margin-bottom: 2.4rem;
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-bb-black-font);
}
.recommendation {
  /* grab cursor while dragging the rail */
}
.recommendation .flickity-enabled.is-draggable .carousel-cell {
  cursor: default;
}
.recommendation .flickity-enabled.is-draggable .flickity-viewport {
  cursor: grab;
}
.recommendation .flickity-enabled.is-draggable.is-pointer-down .flickity-viewport {
  cursor: grabbing;
}
.recommendation {
  /* flickity needs an explicit cell width; .card-overview fills it */
}
.recommendation .carousel-cell {
  width: 30rem;
  margin-right: 2rem;
}
.recommendation .card-overview {
  width: 100%;
  margin: 0;
}
.recommendation {
  /* ---- round white nav buttons (match gallery) ---- */
}
.recommendation .flickity-prev-next-button {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--color-white-bg);
  border-radius: 50%;
  box-shadow: 0 0.4rem 1.6rem rgba(var(--color-bb-black-rgb), 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.recommendation .flickity-prev-next-button.previous {
  left: -1rem;
}
.recommendation .flickity-prev-next-button.next {
  right: -1rem;
}
.recommendation .flickity-prev-next-button:hover {
  background: var(--color-white-bg);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 0.6rem 2rem rgba(var(--color-bb-black-rgb), 0.2);
}
.recommendation .flickity-prev-next-button:active {
  transform: translateY(-50%) scale(0.98);
}
.recommendation .flickity-prev-next-button:disabled {
  opacity: 0;
  pointer-events: none;
}
.recommendation .flickity-prev-next-button .flickity-button-icon {
  width: 38%;
  height: 38%;
  left: 31%;
  top: 31%;
  fill: var(--color-bb-black-font);
}
@media (max-width: 576px) {
  .recommendation .carousel-cell {
    width: 30rem;
    margin-right: 1.4rem;
  }
  .recommendation .flickity-prev-next-button {
    width: 4rem;
    height: 4rem;
  }
  .recommendation .flickity-prev-next-button.previous {
    left: 0.4rem;
  }
  .recommendation .flickity-prev-next-button.next {
    right: 0.4rem;
  }
}

/* ---------- Support block (static) ---------- */
.pdp-support {
  padding-top: 4rem;
}
.pdp-support__inner {
  padding: 3.4rem 3.6rem;
  color: var(--color-white-font);
  background: var(--color-bb-black-bg);
  border-radius: 16px;
}
.pdp-support__title {
  margin: 0 0 1rem;
  font-size: 2.2rem;
  font-weight: 700;
}
.pdp-support__text {
  margin: 0 0 2rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.pdp-support__btn {
  display: inline-block;
  padding: 1.2rem 1.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-white-font);
  text-decoration: none;
  background: var(--color-bb-accent);
  border-radius: 12px;
  transition: background 0.2s ease;
}
.pdp-support__btn:hover {
  background: var(--color-bb-accent-dark);
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .pdp__grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
}
@media (max-width: 576px) {
  .pdp__title {
    font-size: 2.4rem;
  }
  .pdp__bid-value {
    font-size: 2.8rem;
  }
  .pdp-support__inner {
    padding: 2.4rem 2rem;
  }
}
.auth-page {
  display: flex;
  min-height: 100vh;
  width: 100%;
}
@media (max-width: 768px) {
  .auth-page {
    flex-direction: column;
    min-height: auto;
  }
}
.auth-page__aside {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  background: var(--color-bb-black-bg);
  color: var(--color-white-font);
}
@media (max-width: 768px) {
  .auth-page__aside {
    flex: none;
    padding: 5rem 2rem;
  }
}
.auth-page__main {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: var(--color-cream-bg);
  overflow-y: auto;
}

.auth-brand {
  max-width: 38rem;
  text-align: center;
}
.auth-brand__logo {
  display: inline-flex;
  margin-bottom: 2.2rem;
}
.auth-brand__logo svg {
  width: 4.2rem;
  height: 4.2rem;
}
.auth-brand__title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.auth-brand__text {
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

.auth-card {
  width: 100%;
  max-width: 42rem;
  padding: 3.5rem;
  background: var(--color-white-bg);
  border-radius: 1.6rem;
  box-shadow: 0 1rem 4rem rgba(var(--color-bb-black-rgb), 0.06);
}
.auth-card__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
  margin-bottom: 2.5rem;
}
.auth-card {
  margin: auto;
}
.auth-card--wide {
  max-width: 48rem;
}

.auth-page .form__group {
  margin-bottom: 1.8rem;
}
.auth-page .form__label {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
  margin-bottom: 0.8rem;
}
.auth-page .form__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-bb-black-font);
  padding: 1.3rem 1.6rem;
  background: var(--color-input-bg);
  border: 2px solid transparent;
  border-radius: 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.auth-page .form__input::placeholder {
  color: var(--color-muted-font);
}
.auth-page .form__input:focus {
  outline: none;
  background: var(--color-white-bg);
  border-color: var(--color-bb-black-font);
}
.auth-page .form__input:focus:invalid {
  border-color: #ff7730;
}
.auth-page .form__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-page .form__input-wrapper .form__input {
  padding-right: 4.5rem;
}
.auth-page .form__input-toggle {
  position: absolute;
  right: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted-font);
  transition: color 0.2s;
}
.auth-page .form__input-toggle svg {
  width: 2rem;
  height: 2rem;
}
.auth-page .form__input-toggle:hover {
  color: var(--color-bb-black-font);
}
.auth-page .form__input-toggle .icon--eye-off {
  display: none;
}
.auth-page .form__input-toggle.is-visible .icon--eye {
  display: none;
}
.auth-page .form__input-toggle.is-visible .icon--eye-off {
  display: block;
}
.auth-page .form__forgot_password {
  display: block;
  margin-top: 0.8rem;
  text-align: right;
  font-size: 1.3rem;
  color: var(--color-muted-font);
  text-decoration: none;
  transition: color 0.2s;
}
.auth-page .form__forgot_password:hover {
  color: var(--color-bb-black-font);
}
.auth-page .form__ctaBlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 0;
}
.auth-page .form__ctaBlock .form__forgot_password {
  margin-top: 0;
  text-align: left;
}
.auth-page .btn--blue {
  flex-shrink: 0;
  padding: 1.2rem 2.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white-font);
  background: var(--color-bb-accent-bg);
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.auth-page .btn--blue:hover {
  background: #0020c0;
}
.auth-page .btn--blue.btn--block {
  width: 100%;
  margin-top: 1rem;
}
.auth-page .form__hint {
  margin-top: 0.6rem;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--color-muted-font);
}
.auth-page .form__hint a {
  color: var(--color-bb-accent);
  text-decoration: underline;
}
.auth-page .form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.auth-page .form__checkbox .form__checkbox-input {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  accent-color: var(--color-bb-accent);
  cursor: pointer;
}
.auth-page .form__checkbox .form__label {
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.auth-page .form__checkbox .form__label a {
  color: var(--color-bb-accent);
  text-decoration: underline;
}

/* ── Lot creation form ─────────────────────────────── */
.lot-creation-form {
  /* swap these for your real tokens if you have them */
  --lcf-card: var(--color-white-bg);
  --lcf-field: var(--color-input-bg);
  --lcf-field-focus: var(--color-track-bg);
  --lcf-border: var(--color-border-ccc);
  --lcf-text: var(--color-bb-black-font, #1b1b1b);
  --lcf-muted: var(--color-muted-font, #8c8a82);
  --lcf-accent: var(--color-bb-accent, #2f2bff);
  --lcf-notice: var(--color-light-gray-bg);
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.6rem 6rem;
}
.lot-creation-form__title {
  margin: 2.4rem 0 2rem;
}

/* one card per section */
.form-card {
  background: var(--lcf-card);
  border-radius: 16px;
  padding: 2.4rem 2.4rem 2.8rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.form-card__heading {
  margin: 0 0 1.8rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--lcf-text);
}

/* groups */
.form__group {
  margin-bottom: 1.6rem;
}
.form__group:last-child {
  margin-bottom: 0;
}

.form__label {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lcf-text);
}

/* inputs / textarea / select */
.form__input {
  width: 100%;
  padding: 1.3rem 1.5rem;
  font-size: 1.5rem;
  color: var(--lcf-text);
  background: var(--lcf-field);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form__input::placeholder {
  color: var(--lcf-muted);
}
.form__input:focus {
  outline: none;
  background: var(--lcf-field-focus);
  border-color: var(--lcf-accent);
}

/* stacked en/ua pair */
.form__group .form__input + .form__input {
  margin-top: 0.8rem;
}

/* keep the gap when the per-field actions bar sits between stacked fields */
.form__group .field-actions + .form__input {
  margin-top: 0.8rem;
}

/* per-field actions bar — injected after a title/description field, shown only
   while the field has content (toggled inline by JS) */
.field-actions {
  display: flex; /* always visible; buttons disable when the field is empty */
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
}

.field-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lcf-muted);
  background: var(--lcf-field);
  border: 1px solid var(--lcf-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.field-action:hover:not(:disabled) {
  color: var(--lcf-text);
  background: var(--lcf-field-focus);
  border-color: var(--lcf-accent);
}
.field-action:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.field-action--rewrite {
  color: var(--lcf-accent);
}
.field-action--copy {
  color: var(--color-admin-green, #2ecc71);
}
.field-action--copy:hover:not(:disabled) {
  color: var(--color-admin-green, #2ecc71);
  border-color: var(--color-admin-green, #2ecc71);
}
.field-action--delete {
  color: var(--color-badge-red, #ff3b30);
}
.field-action--delete:hover:not(:disabled) {
  color: var(--color-badge-red, #ff3b30);
  border-color: var(--color-badge-red, #ff3b30);
}
.field-action .btn--ai__icon {
  font-size: 1.3rem;
  line-height: 1;
}

/* per-field model picker inside the actions bar */
/* AI provider chips — segmented toggle; the active chip uses its brand colour */
.ai-toolbar__label {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lcf-muted);
}

.ai-providers {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ai-provider {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lcf-muted);
  background: var(--lcf-field);
  border: 1px solid var(--lcf-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ai-provider__icon {
  display: block;
}
.ai-provider:hover:not(.is-active) {
  color: var(--lcf-text);
  border-color: var(--lcf-accent);
}
.ai-provider {
  /* brand colours when selected */
}
.ai-provider--openai.is-active {
  color: #fff;
  background: #10a37f;
  border-color: #10a37f;
}
.ai-provider--gemini.is-active {
  color: #fff;
  background: #4285f4;
  border-color: #4285f4;
}
.ai-provider--claude.is-active {
  color: #fff;
  background: #d97757;
  border-color: #d97757;
}

/* compact (icon-only) chips for the per-field rewrite picker */
.ai-providers--compact .ai-provider {
  padding: 0.5rem;
}

/* AI row: "Generate" button + model picker, between the label and textareas */
.ai-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0 0 1rem;
  /* when placed at the very top of the form */
}
.ai-toolbar--top {
  margin: 0 0 2rem;
}

/* "Generate with AI" button */
.btn--ai {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lcf-accent);
  background: var(--lcf-field);
  border: 1px solid var(--lcf-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn--ai:hover:not(:disabled) {
  background: var(--lcf-field-focus);
  border-color: var(--lcf-accent);
}
.btn--ai:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn--ai {
  /* "nothing to fill" state — aria-disabled, kept hoverable for the tooltip */
}
.btn--ai.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn--ai.is-disabled:hover {
  background: var(--lcf-field);
  border-color: var(--lcf-border);
}
.btn--ai__icon {
  font-size: 1.4rem;
  line-height: 1;
}

.form__input-textarea {
  min-height: 12rem;
  line-height: 1.5;
  resize: vertical;
}

/* select arrow */
select.form__input {
  appearance: none;
  cursor: pointer;
  padding-right: 4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c8a82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
}

/* grids */
.form__group-parent {
  display: grid;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
.form__group-parent:last-child {
  margin-bottom: 0;
}
.form__group-parent > .form__group {
  margin-bottom: 0;
}

.form__group2 {
  grid-template-columns: 1fr 1fr;
}

.form__group3 {
  grid-template-columns: 1fr 1fr;
}

.form__group1 {
  grid-template-columns: 1fr;
}

/* media: video spans full width under the two columns */
.form__group3 > .form__group:nth-child(3) {
  grid-column: 1/-1;
}

/* file inputs */
.form__group input[type=file] {
  width: 100%;
  font-size: 1.4rem;
  color: var(--lcf-muted);
}

input[type=file]::file-selector-button {
  margin-right: 1.2rem;
  padding: 0.9rem 1.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--lcf-text);
  background: var(--lcf-field);
  border: 1px solid var(--lcf-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

input[type=file]::file-selector-button:hover {
  background: var(--lcf-field-focus);
}

/* main image → dashed dropzone */
#lotImageMain {
  display: flex;
  align-items: center;
  min-height: 13rem;
  padding: 2rem;
  background: transparent;
  border: 2px dashed var(--lcf-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
#lotImageMain:hover {
  border-color: var(--lcf-accent);
}

/* stack the 3 "other images" */
#lotImage1,
#lotImage2 {
  margin-bottom: 0.8rem;
}

/* notice card + submit */
.form__publication-notice {
  background: var(--lcf-notice);
  border: 1px solid var(--lcf-border);
  border-radius: 16px;
  padding: 2.4rem;
}
.form__publication-notice p,
.form__publication-notice span {
  display: block;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--lcf-muted);
}
.form__publication-notice span {
  margin-top: 0.4rem;
}
.form__publication-notice a {
  color: var(--lcf-accent);
  font-weight: 600;
}

/* full-width submit (color comes from .btn--green) */
.btn--block {
  display: block;
  width: 100%;
  margin-top: 2rem;
  padding: 1.5rem;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 12px;
}

/* JS-toggled groups */
.lot-creation-form .not-visible {
  display: none !important;
}

/* mobile: collapse grids */
@media (max-width: 768px) {
  .form__group2,
  .form__group3 {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 2rem 1.6rem;
  }
}
/* Error pages (404 / 500 / generic) */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.6rem;
}
.error-page__card {
  width: 100%;
  max-width: 56rem;
  text-align: center;
  background: var(--color-white-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.06);
  padding: 4.8rem 3.2rem;
}
.error-page__code {
  display: block;
  font-size: 8rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.2rem;
  background: linear-gradient(135deg, #0d241e, #2f8f5b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-page__emoji {
  font-size: 3rem;
  margin: 0.8rem 0 1.6rem;
}
.error-page__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-bb-black-font);
  margin: 0 0 1rem;
}
.error-page__msg {
  font-size: 1.5rem;
  color: var(--color-text-body);
  margin: 0 0 1.2rem;
  word-break: break-word;
}
.error-page__meme {
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-muted-font);
  background: var(--color-surface-soft);
  border-radius: 12px;
  padding: 1.2rem 1.6rem;
  margin: 0 auto 2.4rem;
  max-width: 46rem;
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.error-page__actions .btn {
  display: inline-block;
  padding: 1.1rem 2.8rem;
  border: none;
  border-radius: 10px;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
  box-shadow: none;
}
.error-page__actions .btn--blue {
  background: #2563eb;
  color: var(--color-white-font);
}
.error-page__actions .btn--blue:hover {
  background: #1e54d1;
  color: var(--color-white-font);
}
.error-page__actions .btn--green {
  background: #0d241e;
  color: var(--color-white-font);
}
.error-page__actions .btn--green:hover {
  background: #16352b;
  color: var(--color-white-font);
}

.silence-page {
  margin: 0;
  padding: 0;
  background: #0e0e0e;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.silence {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 3rem;
  max-width: 52rem;
  gap: 2.4rem;
}
.silence__lang {
  position: fixed;
  top: 2rem;
  right: 2.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.silence__lang-link {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.2s;
}
.silence__lang-link:hover {
  color: rgba(255, 255, 255, 0.75);
}
.silence__lang-link--active {
  color: rgba(255, 255, 255, 0.85);
}
.silence__lang-sep {
  color: rgba(255, 255, 255, 0.2);
}
.silence__candle {
  width: 5rem;
  opacity: 0.9;
  filter: drop-shadow(0 0 1.2rem rgba(245, 200, 66, 0.5));
}
.silence__candle svg {
  width: 100%;
  height: auto;
}
.silence__title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin: 0;
}
.silence__body {
  font-size: 1.6rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  max-width: 40rem;
}
.silence__body p {
  margin: 0 0 0.8rem;
}
.silence__body a {
  color: rgba(255, 255, 255, 0.7);
}
.silence__body:last-child {
  margin-bottom: 0;
}
.silence__timer {
  margin-top: 0.8rem;
}
.silence #silenceCountdown {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.25);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: center;
}
.silence #silenceCountdown:not(:empty)::before {
  content: "— ";
}

/* ── Admin → Achievements ──────────────────────────── */
.ach-notice {
  margin-bottom: 1.4rem;
  padding: 1rem 1.4rem;
  border-radius: 10px;
  font-size: 1.35rem;
  font-weight: 600;
}
.ach-notice--success {
  color: #14532d;
  background: rgba(46, 204, 113, 0.16);
  border: 1px solid var(--color-admin-green, #2ecc71);
}
.ach-notice--error {
  color: #7f1d1d;
  background: rgba(255, 59, 48, 0.12);
  border: 1px solid var(--color-badge-red, #ff3b30);
}

.ach-admin-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

/* on-brand pill buttons across the achievements admin (overrides square .btn) */
.ach-admin-actions .btn,
.admin-table__action .btn,
.ach-grant-row .btn,
.ach-grant-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--color-border-ccc, #ccc);
  background: var(--color-white-bg, #fff);
  color: var(--color-bb-black-font, #1b1b1b);
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ach-admin-actions .btn:hover,
.admin-table__action .btn:hover,
.ach-grant-row .btn:hover,
.ach-grant-form .btn:hover {
  border-color: var(--color-bb-accent, #2f2bff);
}

.ach-admin-actions .btn--green,
.ach-grant-form .btn--green {
  color: #fff;
  background: var(--color-admin-green, #2ecc71);
  border-color: var(--color-admin-green, #2ecc71);
}
.ach-admin-actions .btn--green:hover,
.ach-grant-form .btn--green:hover {
  filter: brightness(0.95);
  border-color: var(--color-admin-green, #2ecc71);
}

.admin-table__action .btn--danger,
.ach-grant-row .btn--danger {
  color: #fff;
  background: var(--color-badge-red, #ff3b30);
  border-color: var(--color-badge-red, #ff3b30);
}
.admin-table__action .btn--danger:hover,
.ach-grant-row .btn--danger:hover {
  filter: brightness(0.95);
  border-color: var(--color-badge-red, #ff3b30);
}

.admin-table__action .btn--small,
.ach-grant-row .btn--small {
  padding: 0.5rem 1.1rem;
  font-size: 1.2rem;
}

/* Edit link + Delete button share the action cell */
.admin-table__action {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* hide the auto-grant rule fields when the achievement is Manual */
.form:has(#isManual:checked) .ach-rule-fields {
  display: none;
}

/* aligned checkbox rows in the Display card. .form__input (width:100%) and the
   admin checkbox scale rule both try to blow these up — pin them down hard. */
.ach-checks {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-start;
}

.ach-check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 100%;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
}
.ach-check input[type=checkbox] {
  flex: 0 0 auto;
  width: 1.7rem !important;
  height: 1.7rem !important;
  min-width: 0;
  margin: 0;
  padding: 0;
  transform: none;
  appearance: auto;
  -webkit-appearance: checkbox;
}
.ach-check span {
  min-width: 0;
}

.ach-muted {
  color: var(--color-muted-font, #8c8a82);
}

/* grant/revoke on the admin user page — align with .admin-detail__row spacing */
.ach-grant-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 2.4rem;
  border-bottom: 1px solid var(--color-border-light, #ededed);
  font-size: 1.45rem;
  flex-wrap: wrap;
}
.ach-grant-row__name {
  font-weight: 600;
}
.ach-grant-row__tag {
  padding: 0.1rem 0.7rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 999px;
  color: var(--color-bb-accent, #2f2bff);
  background: var(--color-track-bg, #f0f0f0);
}
.ach-grant-row__tag--auto {
  color: var(--color-muted-font, #8c8a82);
}
.ach-grant-row code {
  font-family: monospace;
  color: var(--color-muted-font, #8c8a82);
}

.ach-grant-empty {
  margin: 1rem 2.4rem;
  padding: 0.7rem 1.1rem;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--color-muted-font, #8c8a82);
  background: var(--color-surface-soft, #f7f7f5);
  border-left: 3px solid var(--color-border-ccc, #d8d8d8);
  border-radius: 0 6px 6px 0;
}

.ach-grant-form {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.4rem 2.4rem;
  flex-wrap: wrap;
}
.ach-grant-form .form__input {
  max-width: 30rem;
  padding: 0.7rem 1.1rem;
  font-size: 1.4rem;
  color: var(--color-bb-black-font, #1b1b1b);
  background: var(--color-white-bg, #fff);
  border: 1px solid var(--color-border-ccc, #ccc);
  border-radius: 8px;
  cursor: pointer;
}
.ach-grant-form .form__input:focus {
  outline: none;
  border-color: var(--color-bb-accent, #2f2bff);
}

/* ── My Account → Achievements ─────────────────────── */
.achievements {
  margin-top: 2.8rem;
}
.achievements__heading {
  margin: 0 0 1.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-bb-black-font, #1b1b1b);
}
.achievements__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 1.2rem;
}

.ach {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.2rem;
  border-radius: 14px;
  background: var(--color-white-bg, #fff);
  border: 1px solid var(--color-border-ccc, #e3e3e3);
}
.ach__icon {
  flex: 0 0 auto;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-track-bg, #f0f0f0);
  color: var(--color-bb-accent, #2f2bff);
}
.ach__svg {
  width: 2.6rem;
  height: 2.6rem;
}
.ach__img {
  width: 2.8rem;
  height: 2.8rem;
  object-fit: contain;
}
.ach__body {
  flex: 1;
  min-width: 0;
}
.ach__title {
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--color-bb-black-font, #1b1b1b);
}
.ach__desc {
  margin-top: 0.2rem;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--color-muted-font, #8c8a82);
}
.ach__meta {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  color: var(--color-muted-font, #8c8a82);
}
.ach__meta--earned {
  color: var(--color-admin-green, #2ecc71);
  font-weight: 700;
}
.ach__progress {
  height: 6px;
  margin-top: 0.6rem;
  border-radius: 999px;
  background: var(--color-track-bg, #eee);
  overflow: hidden;
}
.ach__bar {
  height: 100%;
  border-radius: 999px;
  background: var(--color-bb-accent, #2f2bff);
}
.ach--earned .ach__icon {
  background: rgba(46, 204, 113, 0.14);
  color: var(--color-admin-green, #2ecc71);
}
.ach--locked .ach__icon {
  filter: grayscale(1);
  color: var(--color-muted-font, #8c8a82);
}
.ach--locked .ach__title {
  color: var(--color-muted-font, #8c8a82);
}

/* ── My Account → Rating (coins leaderboard) ───────── */
.rating__summary {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.6rem 2rem;
  margin-bottom: 2rem;
  border-radius: 14px;
  background: var(--color-white-bg, #fff);
  border: 1px solid var(--color-border-ccc, #e3e3e3);
}
.rating__coins {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.rating__coins-value {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--color-bb-accent, #2f2bff);
  line-height: 1;
}
.rating__coins-label {
  font-size: 1.4rem;
  color: var(--color-muted-font, #8c8a82);
}
.rating__rank {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-bb-black-font, #1b1b1b);
}
.rating__heading {
  margin: 0 0 1rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-bb-black-font, #1b1b1b);
}
.rating__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rating__row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 0.4rem;
  border-bottom: 1px solid var(--color-border-ccc, #eee);
}
.rating__row:last-child {
  border-bottom: none;
}
.rating__row--me {
  background: rgba(47, 43, 255, 0.08);
}
.rating__pos {
  flex: 0 0 2.4rem;
  font-weight: 700;
  color: var(--color-muted-font, #8c8a82);
  text-align: right;
}
.rating__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating__val {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-bb-accent, #2f2bff);
}
.rating__sep {
  list-style: none;
  text-align: center;
  color: var(--color-muted-font, #8c8a82);
  letter-spacing: 0.3em;
  padding: 0.4rem 0;
}
.rating__empty {
  color: var(--color-muted-font, #8c8a82);
}

/* ── Admin → Crons ─────────────────────────────────── */
/* header row: label + description on the left, status pill on the right */
.cron-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.cron-head__info {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.8rem;
  min-width: 0;
}

.cron-head__title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--lcf-text, #1b1b1b);
}

.cron-pill {
  flex: 0 0 auto;
  padding: 0.4rem 1.1rem;
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
}
.cron-pill--ok {
  color: #fff;
  background: var(--color-admin-green, #2ecc71);
}
.cron-pill--err {
  color: #fff;
  background: var(--color-badge-red, #ff3b30);
}
.cron-pill--none {
  color: var(--lcf-muted, #8c8a82);
  background: var(--lcf-field, #f3f3f3);
}

.cron-meta {
  display: inline-block;
  margin: 0 0.6rem 0.4rem 0;
  font-size: 1.3rem;
  color: var(--lcf-muted, #8c8a82);
}
.cron-meta code {
  font-family: monospace;
  color: var(--lcf-text, #1b1b1b);
}

/* schedule input + buttons on one row, buttons pushed to the end */
.cron-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0;
  flex-wrap: wrap;
}

/* technical job name, sits at the start of the controls row */
.cron-name {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  font-family: monospace;
  font-size: 1.3rem;
  color: var(--lcf-text, #1b1b1b);
  background: var(--lcf-field, #f3f3f3);
  border-radius: 8px;
}

.cron-schedule {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 22rem;
  gap: 0.8rem;
}
.cron-schedule .form__input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1.2rem;
  font-family: monospace;
  font-size: 1.4rem;
}

.cron-run {
  flex: 0 0 auto;
}

/* compact pill buttons, on-brand */
.cron-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--lcf-text, #1b1b1b);
  background: var(--lcf-field, #f3f3f3);
  border: 1px solid var(--lcf-border, #ccc);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cron-btn:hover {
  background: var(--lcf-field-focus, #e9e9e9);
  border-color: var(--lcf-accent, #2f2bff);
}
.cron-btn--primary {
  color: #fff;
  background: var(--color-admin-green, #2ecc71);
  border-color: var(--color-admin-green, #2ecc71);
}
.cron-btn--primary:hover {
  filter: brightness(0.95);
  background: var(--color-admin-green, #2ecc71);
  border-color: var(--color-admin-green, #2ecc71);
}

.cron-error {
  flex-basis: 100%;
  margin: 0.4rem 0 0;
  font-size: 1.3rem;
  color: var(--color-badge-red, #ff3b30);
}

.cron-hint {
  margin-top: 1.6rem;
  font-size: 1.3rem;
  color: var(--lcf-muted, #8c8a82);
}
.cron-hint code {
  padding: 0.1rem 0.5rem;
  font-family: monospace;
  color: var(--lcf-text, #1b1b1b);
  background: var(--lcf-field, #f3f3f3);
  border-radius: 6px;
}

/* ── Nova Poshta delivery autocomplete (My Account) ── */
.np-field {
  position: relative;
}

.np-suggest {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.3rem 0 0;
  padding: 0.4rem 0;
  list-style: none;
  max-height: 26rem;
  overflow-y: auto;
  background: var(--color-white-bg, #fff);
  border: 1px solid var(--color-border-ccc, #ccc);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.np-suggest[hidden] {
  display: none;
}
.np-suggest__item {
  padding: 0.9rem 1.4rem;
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--color-bb-black-font, #1b1b1b);
  cursor: pointer;
}
.np-suggest__item:hover {
  background: var(--color-track-bg, #f0f0f0);
}

/*# sourceMappingURL=style.css.map */