/* ==========================================================================
   JJS CINE RENTALS — SHARED STYLESHEET
   Design language: cinema black + tally-light red, condensed display type
   paired with a clean grotesk body face. One stylesheet, every page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Design tokens ---------- */
:root {
  --ink:        #0B0B0C;   /* near-black, header/hero/footer */
  --ink-soft:   #1C1C1E;   /* raised black surfaces */
  --paper:      #F6F5F2;   /* page background */
  --white:      #FFFFFF;
  --red:        #E31E24;   /* brand accent: red */
  --red-dark:   #B8171C;
  --red-bright: #E31E24;   /* red for dark surfaces (header/hero) */
  --on-dark:    #FF4B50;   /* light red text/lines on dark surfaces */
  --danger:      #E31E24;  /* errors / decline / cancel stay red */
  --danger-dark: #B8171C;
  --danger-bg:   #FBE3E3;
  --gray-900:   #1A1A1A;
  --gray-600:   #5C5C5E;
  --gray-400:   #8C8C8E;
  --gray-200:   #E3E2DE;
  --gray-100:   #EFEEEA;

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
  --container: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html {
  max-width: 100%;
  overflow-x: hidden; /* safety net: stops any stray element from pushing the page sideways on mobile */
}
body {
  max-width: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--gray-900);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 700; }
p { margin: 0 0 1em; color: var(--gray-600); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.7em 0.9em;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  width: 100%;
}
html { -webkit-tap-highlight-color: transparent; }
input:focus, select:focus, textarea:focus, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 2px;
}
.logo, .logo-title, .logo-subtitle,
.logo *, .logo-title *, .logo-subtitle * {
  outline: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
input[type="checkbox"], input[type="radio"] {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 1px solid var(--gray-200);
  flex-shrink: 0;
  accent-color: var(--red);
}
label { display: block; font-size: 0.85rem; font-weight: 600; margin: 1em 0 0.35em; }
table { width: 100%; border-collapse: collapse; }

/* ---------- Buttons (shared) ---------- */
.btn-primary,
.btn-secondary,
.btn-primary-sm,
.btn-checkout,
.btn-add-cart,
.btn-add-cart-large,
.btn-rent-now,
.btn-view-product,
.btn-google,
.btn-load-more,
.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75em 1.4em;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}
.btn-primary, .btn-primary-sm, .auth-submit, .btn-checkout, .btn-add-cart-large {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover, .btn-primary-sm:hover, .auth-submit:hover, .btn-checkout:hover, .btn-add-cart-large:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--gray-400);
}
.btn-secondary:hover { border-color: var(--ink); background: var(--gray-100); }
.btn-add-cart, .btn-view-product, .btn-rent-now, .btn-load-more {
  background: var(--ink);
  color: var(--white);
  width: 100%;
  margin-top: 0.5em;
}
.btn-add-cart:hover, .btn-view-product:hover, .btn-rent-now:hover, .btn-load-more:hover {
  background: var(--red);
}
.btn-google {
  background: var(--white);
  color: var(--gray-900);
  border: 1px solid var(--gray-200);
  width: 100%;
}
.btn-google:hover { border-color: var(--gray-400); }
.google-icon { width: 18px; height: 18px; }
.btn-load-more { width: auto; padding: 0.85em 2.5em; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.85rem 3vw;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo-icon { width: 48px; height: 48px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-title { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.44em; font-weight: 400; }
.logo-subtitle { 
  font-family: var(--font-display); 
  font-size: 0.7rem; 
  letter-spacing: 0.27em; 
  color: var(--gray-400); 
  text-transform: uppercase;
  position: relative;
  left: -2px;
}

.main-nav { flex: 1; }
.main-nav ul { display: flex; align-items: center; gap: 1.75rem; }
.main-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-400);
  padding: 0.4em 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a.active { color: var(--white); border-bottom-color: var(--on-dark); }

/* ---------- "INDIERECTORY" nav highlight ---------- */
.nav-indierectory {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4em;
  color: var(--white) !important;
  background: var(--red-bright);
  padding: 0.4em 0.9em !important;
  border-radius: 999px;
  border-bottom: none !important;
  font-weight: 700;
}
.nav-indierectory:hover, .nav-indierectory.active { background: var(--red); }
.nav-indierectory svg { flex-shrink: 0; }
.nav-badge {
  background: var(--white); color: var(--red);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em;
  padding: 0.1em 0.4em; border-radius: 999px; line-height: 1.4;
}
@media (max-width: 900px) {
  .nav-indierectory { display: inline-flex !important; margin: 0.4rem 0; }
}

.search-bar {
  display: flex;
  align-items: stretch;
  min-width: 240px;
  flex: 1;
  max-width: 320px;
}
.search-bar input {
  background: var(--ink-soft);
  border: 1px solid #333;
  border-right: none;
  border-radius: 999px 0 0 999px;
  color: var(--white);
  padding: 0.5em 0 0.5em 1em;
  width: 100%;
}
.search-bar input:focus { outline: none; border-color: var(--gray-400); }
.search-bar input::placeholder { color: var(--gray-400); }
.search-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-soft);
  border: 1px solid #333;
  border-left: 1px solid #3a3a3a;
  border-radius: 0 999px 999px 0;
  width: 46px;
  flex-shrink: 0;
  font-size: 0;
  cursor: pointer;
}
.search-bar button:hover { background: #2a2a2c; }
.search-bar button .search-icon {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.auth-links { display: flex; align-items: center; gap: 1rem; white-space: nowrap; }
.auth-links a { font-size: 0.9rem; color: var(--gray-400); }
.auth-links a:hover { color: var(--white); }
.auth-links .btn-signin {
  background: var(--red-bright);
  color: var(--white);
  padding: 0.55em 1.2em;
  border-radius: var(--radius-sm);
}
.auth-links .btn-signin:hover { background: var(--red); }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.25rem 3vw 0;
  font-size: 0.85rem;
  color: var(--gray-400);
}
.breadcrumb a { color: var(--gray-600); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb span { margin: 0 0.4em; }

.shop-breadcrumb {
  padding-top: 2rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.shop-breadcrumb a {
  font-family: var(--font-display);
  font-size: 2.1rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-weight: 400;
  text-transform: uppercase;
}
.shop-breadcrumb a:hover { color: var(--ink); }
.shop-breadcrumb span { margin: 0; font-size: 0.95rem; color: var(--gray-400); }

/* ==========================================================================
   HOME — HERO SLIDESHOW (swipeable photo montage)
   ========================================================================== */
.hero-slideshow {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  height: 560px;
  touch-action: pan-y;
}
.hero-slide-track {
  display: flex;
  height: 100%;
  width: 500%; /* 5 slides */
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero-slide {
  position: relative;
  flex: 0 0 20%; /* 100% / 5 slides */
  width: 20%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--ink-soft); /* shows while the image loads */
  display: flex;
  align-items: center;
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,11,12,0.88) 0%, rgba(11,11,12,0.55) 45%, rgba(11,11,12,0.15) 100%);
}
.hero-slide-content {
  position: relative;
  z-index: 1;
  color: var(--white);
  padding: 2rem 4.5vw;
  max-width: 620px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: 3.8rem;
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.hero-title-big { font-size: 5.5rem; color: var(--red); }
.hero-description { color: var(--gray-200); max-width: 42ch; margin-bottom: 1.5rem; font-size: 1.05rem; }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(11,11,12,0.35);
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}
.hero-arrow:hover { background: rgba(227,30,36,0.85); border-color: var(--red); }
.hero-arrow-prev { left: 1.25rem; }
.hero-arrow-next { right: 1.25rem; }

.hero-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  z-index: 2;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; }
.dot.active { background: var(--red); width: 22px; border-radius: 999px; }

/* ==========================================================================
   EXPLORE PRODUCTION GEAR / PRODUCT GRIDS
   ========================================================================== */
.explore-gear { max-width: var(--container); margin: 0 auto; padding: 4rem 3vw 2rem; text-align: center; }
.explore-gear h2 { font-family: var(--font-display); font-size: 2.5rem; letter-spacing: 0.02em; }
.section-subtitle { color: var(--gray-600); margin-bottom: 2.5rem; }

.gear-category { text-align: left; margin-bottom: 3rem; }
.gear-category-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.gear-category-header h3 { font-size: 1.3rem; }
.see-more { font-size: 0.85rem; color: var(--red); font-weight: 600; }
.see-more:hover { text-decoration: underline; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 1.25rem;
}
.shop-category-heading {
  grid-column: 1 / -1;
  list-style: none;
  margin-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gray-200);
}
.shop-category-heading:first-child { margin-top: 0; }
.shop-category-heading h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  color: var(--gray-900);
  border-left: 4px solid var(--red);
  padding-left: 0.6rem;
}
.product-grid-scroll {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(195px, 1fr);
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0.9rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.1); }
.product-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--gray-100); border-radius: var(--radius-sm); margin-bottom: 0.75rem; }
.product-price { color: var(--red); font-weight: 800; font-size: 1rem; margin: 0 0 0.3em; }
.product-name { font-size: 0.8rem; color: var(--gray-900); min-height: 2.6em; margin-bottom: 0.5em; }
.shop-main .product-card .product-name,
.explore-gear .product-card .product-name { font-weight: 700; }

/* Whole card opens the product page: the name link stretches over the card,
   and the cart icon sits above that layer so it adds to cart instead. */
.product-card { position: relative; cursor: pointer; }
.product-card { display: flex; flex-direction: column; }
.product-card-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.45rem; }
.product-card-row .product-price { margin: 0; min-width: 0; font-size: 1.05rem; }
.shop-main .product-card-row .product-price,
.explore-gear .product-card-row .product-price { font-size: 1.2rem; }
.product-card-link { display: block; font-size: 0.86rem; line-height: 1.4; min-height: 2.8em; margin-bottom: 0.1rem; }
.product-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.product-card:hover .product-card-link { color: var(--red); }
.product-card-link:focus-visible { outline: none; }
.product-card:has(.product-card-link:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.btn-card-cart {
  position: relative; z-index: 2; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: none; border-radius: 12px;
  color: var(--white); cursor: pointer;
  background: linear-gradient(145deg, var(--ink-soft), var(--ink));
  box-shadow: 0 4px 12px rgba(11,11,12,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn-card-cart::after {
  content: "+"; position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--red); color: var(--white); border: 2px solid var(--white);
  font-size: 0.7rem; font-weight: 800; line-height: 13px; text-align: center;
}
.btn-card-cart:hover, .btn-card-cart:focus-visible {
  background: linear-gradient(145deg, var(--red-bright), var(--red-dark));
  box-shadow: 0 6px 16px rgba(227,30,36,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-2px);
  outline: none;
}
.btn-card-cart:hover::after, .btn-card-cart:focus-visible::after { background: var(--ink); }
.btn-card-cart:active { transform: translateY(0) scale(0.95); }
.btn-card-cart.is-disabled {
  cursor: not-allowed; opacity: 0.5; box-shadow: none; transform: none;
  background: var(--gray-200); color: var(--gray-600);
}
.btn-card-cart.is-disabled::after { display: none; }

/* Currently in use: black & white, blurred card with a centered label */
.product-card.is-in-use > img,
.product-card.is-in-use > .product-card-row,
.product-card.is-in-use > .product-card-link { filter: grayscale(1) blur(2px); opacity: 0.7; }
.product-card.is-in-use:hover .product-card-link { color: var(--gray-900); }
.product-inuse-overlay {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 1rem; text-align: center; border-radius: inherit;
  background: rgba(255,255,255,0.18);
}
.product-inuse-label {
  display: inline-flex; align-items: center; gap: 0.45em;
  background: var(--ink); color: var(--white);
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.4em 1em; border-radius: 999px; box-shadow: 0 6px 18px rgba(11,11,12,0.3);
}
.product-inuse-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red-bright); box-shadow: 0 0 0 3px rgba(227,30,36,0.3);
}
.product-inuse-dates {
  background: var(--white); color: var(--gray-900);
  font-size: 0.74rem; font-weight: 700; line-height: 1.3;
  padding: 0.35em 0.8em; border-radius: 999px; box-shadow: 0 3px 10px rgba(11,11,12,0.15);
}

/* "In use" (currently rented out) state — shop grid + product detail */
.product-badge-inuse {
  display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--danger-dark); background: var(--danger-bg);
  border-radius: 999px; padding: 0.2em 0.6em; margin-bottom: 0.5em;
}
.btn-add-cart.is-disabled,
.btn-add-cart-large.is-disabled,
.btn-rent-now.is-disabled {
  display: inline-block; opacity: 0.55; cursor: not-allowed; pointer-events: none;
  background: var(--gray-100); color: var(--gray-600); border-color: var(--gray-200);
}
.product-availability { font-size: 0.85rem; font-weight: 700; color: var(--danger-dark); margin: -0.5em 0 0.8em; }
.rental-dates-note { font-size: 0.78rem; color: var(--gray-600); margin: 0.5em 0 0; flex-basis: 100%; }
.rental-dates-note.has-conflict { color: var(--danger-dark); font-weight: 700; }

/* ==========================================================================
   TAGLINE + STATS (Home)
   ========================================================================== */
.tagline-section { text-align: center; padding: 3rem 3vw; max-width: 760px; margin: 0 auto; }
.tagline-section h2 { font-family: var(--font-display); font-size: 2.3rem; letter-spacing: 0.01em; }

.stats-bar {
  background: var(--gray-100);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  padding: 2.5rem 3vw;
  text-align: center;
}
.stat-icon {
  width: 56px; height: 56px; padding: 14px; margin: 0 auto 0.75rem;
  border-radius: 14px; background: var(--red); color: var(--white);
  box-shadow: 0 6px 14px rgba(227,30,36,0.25);
}
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-number { font-family: var(--font-display); font-size: 2rem; color: var(--red); }
.stat-label { font-weight: 600; font-size: 0.9rem; }
.stat-sub { font-size: 0.75rem; color: var(--gray-400); }

/* ==========================================================================
   HOW IT WORKS (Home)
   ========================================================================== */
.how-it-works { max-width: var(--container); margin: 0 auto; padding: 4rem 3vw 1rem; text-align: center; }
.how-it-works h2 { font-family: var(--font-display); font-size: 2.5rem; letter-spacing: 0.02em; }

.steps-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: left;
  counter-reset: none;
}
.step-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  position: relative;
}
.step-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--gray-200);
  display: block;
  margin-bottom: 0.5rem;
}
.step-card h3 { font-size: 1.05rem; margin: 0 0 0.4em; }
.step-card p { font-size: 0.85rem; color: var(--gray-600); margin: 0; }

/* ==========================================================================
   WHY CHOOSE US (Home)
   ========================================================================== */
.why-us { max-width: var(--container); margin: 0 auto; padding: 3rem 3vw 1rem; text-align: center; }
.why-us h2 { font-family: var(--font-display); font-size: 2.5rem; letter-spacing: 0.02em; }

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: left;
}
.why-card {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 1rem;
  border-radius: 14px; background: var(--red); color: var(--white);
  box-shadow: 0 6px 14px rgba(227,30,36,0.25);
}
.why-icon .why-svg { width: 28px; height: 28px; display: block; }
.why-card h3 { font-size: 1rem; margin: 0 0 0.4em; }
.why-card p { font-size: 0.85rem; color: var(--gray-600); margin: 0; }

/* ---------- Header notification bell (logged-in only) ---------- */
/* static on purpose: the dropdown anchors to the (sticky) black header, so it opens BELOW the header instead of covering the nav */
.header-notif-wrap { position: static; display: inline-flex; align-items: center; }
.header-notif-btn {
  position: relative; /* badge anchors to the bell button */
  background: none; border: none; cursor: pointer;
  color: var(--gray-400); display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  transition: color .2s ease, background .2s ease;
}
.header-notif-btn:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.header-notif-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--red); color: var(--white);
  font-size: 0.62rem; font-weight: 700; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  pointer-events: none;
}
.header-notif-panel {
  position: absolute; top: 100%; right: 3vw; margin-top: 0.4rem; width: 320px; max-width: 92vw;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18); z-index: 200; overflow: hidden;
  animation: notif-pop .18s ease;
}
.header-notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65em 1em; border-bottom: 1px solid var(--gray-200);
  font-weight: 700; font-size: 0.88rem; color: var(--gray-900);
}
.header-notif-list { max-height: none; overflow: visible; }
/* .auth-links is white-space:nowrap — without this the panel text never wraps and gets cut off */
.header-notif-panel, .header-notif-panel * { white-space: normal; }
.header-notif-btn.is-ringing { animation: notif-ring 0.6s ease; }

/* ==========================================================================
   TESTIMONIALS (Home)
   ========================================================================== */
.testimonials { max-width: var(--container); margin: 0 auto; padding: 4rem 3vw 1rem; text-align: center; }
.testimonials h2 { font-family: var(--font-display); font-size: 2.5rem; letter-spacing: 0.02em; }

.testimonial-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  text-align: left;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  margin: 0;
}
.testimonial-card p { font-size: 0.88rem; color: var(--gray-900); margin: 0 0 1rem; }
.testimonial-card footer { display: flex; flex-direction: column; font-style: normal; }
.testimonial-card footer strong { font-size: 0.85rem; }
.testimonial-card footer span { font-size: 0.75rem; color: var(--gray-400); }

/* ==========================================================================
   NEWSLETTER CTA (Home)
   ========================================================================== */
.newsletter-cta {
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 3rem 3vw;
  margin-top: 2rem;
}
.newsletter-copy h2 { font-family: var(--font-display); font-size: 2rem; margin-bottom: 0.3em; }
.newsletter-copy p { color: var(--gray-400); margin: 0; }
.newsletter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter-form input {
  padding: 0.75em 1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-600);
  background: var(--ink-soft);
  color: var(--white);
  min-width: 260px;
}
.newsletter-form input::placeholder { color: var(--gray-400); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: var(--gray-400);
  padding: 3rem 3vw 1.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
}
.footer-col h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 0.75em; }
.footer-col ul li { margin-bottom: 0.5em; }
.footer-col a:hover { color: var(--white); }
.social-links { display: flex; gap: 1rem; }
.copyright {
  grid-column: 1 / -1;
  border-top: 1px solid #2A2A2C;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
}

/* ==========================================================================
   SHOP PAGE
   ========================================================================== */
.shop-layout {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem 3vw 3rem;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.shop-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.shop-main { min-width: 0; }
/* All Equipment only: categories + price range follow the scroll, stay inside
   the shop layout (stop above the footer) and return when scrolling back up. */
@media (min-width: 961px) {
  .shop-sidebar.is-floating { position: sticky; top: 6.5rem; }
}
.shop-card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem;
}
.sidebar-title { font-size: 1.05rem; margin-bottom: 0.75em; }
.category-list { margin-bottom: 0; }
.category-list li a {
  display: block;
  font-size: 0.9rem;
  color: var(--gray-600);
  padding: 0.55em 0;
}
.category-list li a:hover { color: var(--red); }
.category-list li a.active { color: var(--red); font-weight: 700; }

.price-filter { padding-bottom: 1.5rem; }
.price-filter .sidebar-title { text-transform: uppercase; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.03em; }
.price-filter form { display: flex; flex-direction: column; gap: 0; }
.price-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0;
  position: relative;
}
.price-field:first-child::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 100%;
  width: 1px;
  height: 0.5rem;
  background: var(--gray-200);
}
.price-filter label { margin: 0; font-size: 0.75rem; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.05em; }
.price-filter input { width: 100%; font-weight: 700; }
.price-filter .btn-primary-sm {
  margin-top: 0.75rem;
  align-self: flex-start;
}
.shop-main-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.shop-main-header h1 { font-family: var(--font-display); font-size: 2rem; }
.shop-sort { display: flex; align-items: center; gap: 1rem; }
.shop-sort { gap: 0.6rem; }
.shop-sort label { font-size: 0.9rem; font-weight: 600; color: var(--gray-600); white-space: nowrap; }
.shop-sort select {
  width: auto;
  min-width: 11.5rem;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.6em 2.4em 0.6em 1em;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-900);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.9em center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.shop-sort select:hover { border-color: var(--gray-400); }
.shop-sort select:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.15); }
.pagination { display: flex; gap: 0.4rem; }
.pagination a {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--gray-600);
}
.pagination a.active { background: var(--red); color: var(--white); }
.pagination a:hover:not(.active) { background: var(--gray-100); }

.load-more-wrap { text-align: center; margin-top: 2.5rem; }

/* ==========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================== */
.product-detail {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem 3vw 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.product-gallery, .product-info { min-width: 0; }
.product-main-image { border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--gray-200); margin-bottom: 0.75rem; }
.product-thumbnails { display: flex; gap: 0.6rem; }
.product-thumbnails img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); cursor: pointer; }

.product-title { font-size: 1.6rem; }
.product-sku { font-size: 0.8rem; color: var(--gray-400); }
.product-rating { color: var(--red); font-size: 0.9rem; }
.product-price-large { font-family: var(--font-display); font-size: 2.2rem; color: var(--red); }
.price-unit { font-family: var(--font-body); font-size: 0.9rem; color: var(--gray-400); }

.rental-dates { display: flex; gap: 1rem; align-items: center; }
.rental-dates label { white-space: nowrap; }
.quantity-selector { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
.quantity-selector label { font-weight: 600; white-space: nowrap; }
.product-actions { display: flex; gap: 1rem; margin: 1.5rem 0; }
.product-actions a { flex: 1; padding: 0.9em; }

.product-description, .product-specs, .product-terms { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200); }
.product-specs table th { text-align: left; color: var(--gray-400); font-weight: 600; width: 40%; padding: 0.5em 0; }
.product-specs table td { padding: 0.5em 0; border-bottom: 1px solid var(--gray-100); }
.product-terms li { color: var(--gray-600); font-size: 0.9rem; margin-bottom: 0.4em; }

.related-products { max-width: var(--container); margin: 0 auto; padding: 0 3vw 3rem; }
.related-products h2 { font-size: 1.4rem; margin-bottom: 1rem; }

/* ==========================================================================
   INDIERECTORY (portfolio directory of regular renters)
   Feed of expandable director cards; each card opens to its profile.
   ========================================================================== */
.indie-page { max-width: var(--container); margin: 0 auto; padding: 2rem 3vw 3rem; }
.indie-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.indie-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--red); margin-bottom: 0.4em; }
.indie-header h1 { font-family: var(--font-display); font-size: 2.4rem; letter-spacing: 0.01em; margin-bottom: 0.15em; }
.indie-header p { margin: 0; max-width: 52ch; }

/* Feed */
.indie-directory { display: flex; flex-direction: column; gap: 0.9rem; max-width: 860px; margin: 0 auto 2rem; }
.indie-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
}
.indie-card:hover, .indie-card.is-open { border-color: var(--red); box-shadow: var(--shadow-card); }
.indie-card { scroll-margin-top: 165px; }
.indie-card.is-placeholder { border-style: dashed; color: var(--gray-400); }
.indie-card.is-placeholder:hover { border-color: var(--gray-200); box-shadow: none; }

.indie-card-head {
  width: 100%; display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 1.1rem;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.indie-card.is-placeholder .indie-card-head { cursor: default; }
.indie-card-head:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.indie-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--white); font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.02em;
}
.indie-card-text { flex: 1; min-width: 0; }
.indie-card-text strong { display: block; font-size: 1rem; }
.indie-card-text .indie-meta { font-size: 0.8rem; color: var(--gray-600); }
.indie-card-count {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gray-600); background: var(--gray-100); padding: 0.25em 0.7em; border-radius: 999px; white-space: nowrap;
}
.indie-chevron {
  width: 10px; height: 10px; flex-shrink: 0; margin: 0 0.3rem 0.2rem 0.2rem;
  border-right: 2px solid var(--gray-600); border-bottom: 2px solid var(--gray-600);
  transform: rotate(45deg); transition: transform .2s ease;
}
.indie-card.is-open .indie-chevron { transform: rotate(-135deg); margin-bottom: -0.2rem; }

/* Expanded profile */
.indie-card-body { border-top: 1px solid var(--gray-200); }
.indie-card-body[hidden] { display: none; }
.indie-profile-top { position: relative; background: var(--ink); color: var(--white); padding: 1.75rem 1.5rem 1.25rem; display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.indie-profile-top::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--white) 10px 20px);
}
.indie-profile-top h2 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.01em; margin: 0 0 0.15em; color: var(--white); }
.indie-role { color: var(--gray-200); font-size: 0.9rem; margin: 0 0 0.6rem; }
.indie-sample-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--red); color: var(--white); padding: 0.15em 0.6em; border-radius: 999px; }
.indie-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.indie-stats div { text-align: center; }
.indie-stats strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--white); }
.indie-stats span { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-400); }

.indie-profile-body { padding: 1.5rem; }
.indie-bio { max-width: 70ch; color: var(--gray-600); margin-bottom: 1.5rem; }
.indie-section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); margin: 0 0 0.7em; }

/* Films with posters */
.indie-films { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.9rem; margin-bottom: 1.75rem; }
.indie-film {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.indie-film:hover, .indie-film.is-active { border-color: var(--red); }
.indie-film.is-active { box-shadow: var(--shadow-card); }
.indie-film-poster { display: block; aspect-ratio: 2 / 3; background: var(--ink); overflow: hidden; }
.indie-film-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.indie-film:hover .indie-film-poster img { transform: scale(1.04); }
.indie-film-info { display: block; padding: 0.85rem 0.9rem 1rem; }
.indie-film-year { display: block; font-size: 0.72rem; font-weight: 700; color: var(--red); letter-spacing: 0.04em; }
.indie-film h3 { font-size: 1.02rem; margin: 0.2em 0 0.3em; }
.indie-film p { font-size: 0.82rem; color: var(--gray-600); margin: 0 0 0.6em; }
.indie-film-tag { font-size: 0.72rem; color: var(--gray-400); }

/* Kit */
.indie-kit { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.25rem; background: var(--gray-100); }
.indie-kit[hidden] { display: none; }
.indie-kit-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.9rem; }
.indie-kit-head h3 { font-size: 1.05rem; margin: 0 0 0.15em; }
.indie-kit-head p { font-size: 0.82rem; color: var(--gray-600); margin: 0; }
.indie-kit ul { margin: 0 0 1rem; }
.indie-kit li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5em 0; border-bottom: 1px dashed var(--gray-200); font-size: 0.88rem; }
.indie-kit li span:last-child { color: var(--gray-400); font-size: 0.78rem; white-space: nowrap; }
.indie-kit-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.indie-kit-total span:first-child { font-size: 0.85rem; color: var(--gray-600); }
.indie-kit-total span:last-child { font-family: var(--font-display); font-size: 1.8rem; color: var(--red); letter-spacing: 0.01em; }
.indie-try-kit { width: 100%; }

.indie-cta { margin-top: 2rem; text-align: center; padding: 2rem 1rem; border: 1px dashed var(--gray-200); border-radius: var(--radius-md); }
.indie-cta h2 { font-size: 1.3rem; margin-bottom: 0.4em; }
.indie-cta p { color: var(--gray-600); margin: 0 auto 1rem; max-width: 52ch; }

@media (max-width: 700px) {
  .indie-header h1 { font-size: 1.9rem; }
  .indie-card-count { display: none; }
  .indie-films { grid-template-columns: repeat(2, 1fr); }
  .indie-profile-top { padding: 1.5rem 1rem 1rem; }
  .indie-profile-body { padding: 1.1rem 1rem; }
}

/* ==========================================================================
   CART / CHECKOUT
   ========================================================================== */
.cart-page, .checkout-page { max-width: var(--container); margin: 0 auto; padding: 2rem 3vw 3rem; }
.cart-page h1, .checkout-page h1 { font-family: var(--font-display); font-size: 2.2rem; }

.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }

.cart-table { background: var(--white); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--gray-200); margin-bottom: 0; }
.cart-table th, .cart-table td { padding: 1em; text-align: left; border-bottom: 1px solid var(--gray-100); font-size: 0.9rem; }
.cart-table th { color: var(--gray-400); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.cart-product { display: flex; align-items: center; gap: 0.75rem; }
.cart-product img { width: 50px; height: 50px; object-fit: contain; background: var(--gray-100); border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-product span { min-width: 0; overflow-wrap: break-word; }

/* Lets wide tables (cart, orders) scroll horizontally within their own box
   instead of stretching the whole page sideways on small screens. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.table-scroll .cart-table,
.table-scroll .account-orders-table { border-radius: 0; }
/* Cart table now shares the row with a sidebar order summary, so above the
   700px card-layout breakpoint it needs its own minimum width — otherwise
   the columns get squeezed and text/links clip instead of the box scrolling.
   Below 700px both tables switch to a stacked card layout instead (see the
   mobile card-table rules), so no min-width/scrolling is needed there. */
@media (min-width: 701px) {
  .table-scroll .cart-table { min-width: 620px; }
}
.cart-row td input { width: 60px; }
.cart-remove { color: var(--danger); font-size: 0.85rem; font-weight: 600; }

.cart-summary { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.5rem; position: sticky; top: 90px; max-width: 100%; }
.cart-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.cart-summary dt { color: var(--gray-600); }
.cart-summary dd { margin: 0; font-weight: 700; }
.cart-summary a { display: block; width: 100%; text-align: center; margin-bottom: 0.75rem; }

.checkout-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; }
.checkout-form { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.75rem; }
.checkout-form h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.checkout-form h2:first-child { margin-top: 0; }
.checkout-form fieldset { border: none; padding: 0; margin: 0.5em 0; }
.checkout-form fieldset legend { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5em; padding: 0; }
.checkout-form fieldset label { display: flex; align-items: center; gap: 0.5em; font-weight: 400; font-size: 0.9rem; margin: 0.4em 0; }
.checkbox-label { 
  display: flex; 
  align-items: flex-start;
   gap: 1.5em;
   font-weight: 500;
   font-size: 0.85rem;
   }
.checkbox-label input { margin: 0.15em 0 0; }
.checkbox-label input:focus { outline: none; }
.checkbox-label input:focus { outline: none; }

.checkout-summary { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.5rem; position: sticky; top: 90px; max-width: 100%; }
.checkout-items li { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; padding: 0.5em 0; border-bottom: 1px dashed var(--gray-200); }
.checkout-items li span:first-child { flex: 1; min-width: 0; overflow-wrap: break-word; }
.checkout-items li span:last-child { flex-shrink: 0; white-space: nowrap; }
.checkout-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; margin: 1rem 0; }
.checkout-summary dt { color: var(--gray-600); }
.checkout-summary dd { margin: 0; font-weight: 700; }
.checkout-days-hint { font-size: 0.78rem; color: var(--gray-400); margin: -0.5rem 0 1rem; }

/* ==========================================================================
   AUTH (LOGIN / REGISTER)
   ========================================================================== */
.auth-body {
  background: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.auth-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 3vw;
  color: var(--white);
}
.auth-title { font-family: var(--font-display); letter-spacing: 0.08em; font-size: 1rem; }
.auth-back { font-size: 0.8rem; color: var(--gray-400); }
.auth-back:hover { color: var(--white); }

.auth-card {
  position: relative;
  top: -75px;
  background: var(--white);
  max-width: 400px;
  width: 90%;
  margin: 2rem auto;
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.507);
}
.auth-logo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; margin-bottom: 1.5rem; }
.auth-logo .logo-title { color: var(--white);}
.auth-logo .logo-subtitle { color: var(--gray-400); }
.forgot-password { display: block; text-align: right; font-size: 0.8rem; color: var(--red); margin: 0.4em 0 1.25em; }
.auth-submit { width: 100%; margin-top: 0.5rem; }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--gray-400); font-size: 0.75rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--gray-200); }
.auth-switch { text-align: center; font-size: 0.85rem; margin-top: 1.25rem; }
.auth-switch a { color: var(--red); font-weight: 600; }
.auth-consent { text-align: center; font-size: 0.7rem; color: var(--gray-400); margin-top: 1.5rem; }
.auth-consent a { color: var(--gray-600); text-decoration: underline; }
.auth-step-hint { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 0.5rem; text-align: center; }

/* ---------- PASSWORD SHOW/HIDE TOGGLE ---------- */
.password-field { position: relative; }
.password-field input { padding-right: 42px !important; }
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
}
.password-toggle:hover { opacity: 0.9; }
.password-toggle img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ---------- LOGIN PAGE (black theme) ---------- */
.login-page.auth-body { background: var(--paper); }
.login-page .auth-topbar { color: var(--ink); }
.login-page .auth-back { color: var(--ink); font-weight: 700; font-size: 24px; }
.login-page .auth-back:hover { color: var(--gray-600); }
.login-page .auth-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 613px;
  height: 888px; 
  max-width: 92vw;
  border-radius: 50px;
  box-shadow: 0 35px 90px rgba(0,0,0,0.4); }
.login-page input { width: 400px; max-width: 72%; height: 42px; display: block; margin-left: auto; margin-right: auto; }
.login-page .auth-submit,
.login-page .btn-google { width: 336px; max-width: 72%; height: 41px; margin-left: auto; margin-right: auto; }
.login-page .quick-contact { display: none; }
.auth-topbar-logo { 
  display: flex; 
  align-items: center; 
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.auth-topbar-logo:hover { transform: translateY(-2px); opacity: 0.85; }
.auth-topbar-logo-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: block; }

.login-page .auth-card {
  background: var(--ink);
  color: var(--white);
}
.login-page .auth-logo { 
    position: relative;
    top: 30px;
    flex-direction: column; 
    text-align: center; 
    align-items: center;
    justify-content: center; 
    gap: 0.5rem; 
  }
.login-page .auth-logo .logo-text { line-height: 1.4; }
.login-page .auth-logo .logo-icon { 
    position: relative;
    top: 15px;
    width: 80px; 
    height: 80px; 
  }
.login-page .auth-logo .logo-title { 
    position: relative;
    top: 10px;
    font-size: 1.6rem;
  }
.login-page .auth-logo .logo-subtitle {
  position: relative;
  top: 10px;
  left: -6px;
  font-size: 0.85rem;
   }
.login-page .auth-logo .logo-title { color: var(--white); }
.login-page .auth-logo .logo-subtitle { color: var(--white); }
.login-page label {
    position: relative;
    top: 60px;
    color: var(--white);
    text-align: left;
    display: block;
    width: 72%;
}
.login-page .forgot-password { 
  position: relative;
  top: 60px;
  color: var(--white);
    text-align: right;
    display: block;
    width: 72%; }
.login-page input {
    position: relative;
    top: 60px;
    border-radius: 10px;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--gray-400);
}
.login-page input::placeholder { 
    color: var(--gray-600); 
  }
.login-page input:focus { border-color: var(--white); }

.login-page .password-field {
  position: relative;
  top: 60px;
  width: 400px;
  max-width: 72%;
  margin-left: auto;
  margin-right: auto;
}
.login-page .password-field input {
  position: static;
  top: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.login-page .auth-submit,
.login-page .btn-google {
    position: relative;
    top: 90px;
    background: var(--white);
    color: var(--ink);
}
.login-page .auth-submit:hover,
.login-page .btn-google:hover {
  background: var(--gray-200);
  color: var(--ink);
}
.login-page .btn-google { border: 1px solid var(--gray-600); }
.login-page .auth-form { display: flex; flex-direction: column; align-items: center; }
.login-page .auth-divider { 
    position: relative;
    top: 90px;
    color: var(--gray-400); 
    width: 463px;
    max-width: 72%;
   }
.login-page .auth-divider::before,
.login-page .auth-divider::after { background: var(--gray-600); }
.login-page .auth-switch { 
  position: relative;
    top: 75px;
    color: var(--white);
    font-weight: 400;
    font-size: 13px;
    font-family: var(--font-body);
   }
.login-page .auth-switch a { color: var(--white); font-weight: 800; font-size: 16px; text-decoration: none; font-family: var(--font-body); }
.login-page .auth-consent { 
  position: relative;
    top: 200px;
    color: var(--white); 
    font-weight: 50; 
    font-size: 13px; 
    font-family: var(--font-body); }
.login-page .auth-consent a { color: var(--white); font-weight: 800; font-size: 13px; text-decoration: none; font-family: var(--font-body); }

/* ---------- REGISTER PAGE (same black theme as login, natural flow) ---------- */
/* Mirrors .login-page's colors/shapes, but register has more fields across
   several steps, so it uses normal flow instead of the fixed-size/absolute-
   position layout used on the login card. */
.register-page.auth-body { background: var(--paper); }
.register-page .auth-topbar { color: var(--ink); }
.register-page .auth-back { color: var(--ink); font-weight: 700; font-size: 24px; }
.register-page .auth-back:hover { color: var(--gray-600); }
.register-page .quick-contact { display: none; }

.register-page .auth-card {
  background: var(--ink);
  color: var(--white);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 613px;
  max-width: 90%;
  border-radius: 50px;
  padding: 2.75rem 3rem 3rem;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.4);
}
.register-page .auth-logo { margin-bottom: 1rem; }
.register-page .auth-logo .logo-text { line-height: 1.4; }
.register-page .auth-logo .logo-icon { width: 80px; height: 80px; }
.register-page .auth-logo .logo-title { color: var(--white); font-size: 1.6rem; }
.register-page .auth-logo .logo-subtitle { color: var(--white); font-size: 0.85rem; }

.register-page label {
  color: var(--white);
  text-align: left;
  width: 72%;
  margin-left: auto;
  margin-right: auto;
}
.register-page input:not([type="checkbox"]):not([type="radio"]) {
  width: 400px;
  max-width: 72%;
  height: 42px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--gray-400);
}
.register-page input::placeholder { color: var(--gray-600); }
.register-page input:focus { border-color: var(--white); }

.register-page .password-field {
  width: 400px;
  max-width: 72%;
  margin-left: auto;
  margin-right: auto;
}
.register-page .password-field input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.register-page input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0.15em 0 0;
}
.register-page .auth-form { display: flex; flex-direction: column; align-items: center; }

.register-page .checkbox-label {
  width: 72%;
  color: var(--white);
  margin: 1em auto 0;
}
.register-page .checkbox-label a { color: var(--white); text-decoration: underline; }

.register-page .field-error { width: 72%; margin: 0.5rem auto 0; text-align: left; }

.register-page .auth-submit,
.register-page .btn-google {
  width: 336px;
  max-width: 72%;
  height: 41px;
  margin: 1.5rem auto 0;
  background: var(--white);
  color: var(--ink);
}
.register-page .auth-submit:hover,
.register-page .btn-google:hover { background: var(--gray-200); color: var(--ink); }
.register-page .btn-google { border: 1px solid var(--gray-600); margin-top: 0; }

.register-page .auth-divider { color: var(--gray-400); width: 463px; max-width: 72%; margin: 1.5rem auto; }
.register-page .auth-divider::before,
.register-page .auth-divider::after { background: var(--gray-600); }

.register-page .auth-switch { color: var(--white); font-weight: 400; font-size: 13px; font-family: var(--font-body); margin-top: 1.5rem; }
.register-page .auth-switch a { color: var(--white); font-weight: 800; font-size: 16px; text-decoration: none; font-family: var(--font-body); }

.register-page .auth-step-hint { color: var(--white); }
.register-page .auth-step-hint strong { color: var(--white); }

/* ---------- FORGOT PASSWORD POP-UP (floats over the page, glass backdrop) ---------- */
/* Reuses the .register-page .auth-card look from forgot-password.html; the
   container keeps the same layout and spot, just scaled to 90%. */
.fp-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fp-modal[hidden] { display: none; }
.fp-modal.is-open { opacity: 1; }
.fp-modal .auth-card {
  transform: translate(-50%, -50%) scale(0.9);
  max-height: calc(100vh / 0.9 - 2rem);
  overflow-y: auto;
}
body.fp-modal-open { overflow: hidden; }
@media print { .fp-modal { display: none !important; } }

/* ==========================================================================
   SERVICES / SUPPORT / ABOUT (generic content pages)
   ========================================================================== */
.page-hero { text-align: center; padding: 3.5rem 3vw 2rem; max-width: 760px; margin: 0 auto; }
.page-hero h1 { font-family: var(--font-display); font-size: 2.8rem; letter-spacing: 0.01em; }

.services-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem 3vw 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.service-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--white); border: 1px solid var(--gray-200); border-top: 3px solid var(--red);
  border-radius: var(--radius-md); padding: 1.75rem; text-align: left; box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
.service-card h2 { font-size: 1.15rem; }
.service-card p { flex: 1; }
.service-icon, .card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 1.1rem;
  border-radius: 14px; background: var(--red); color: var(--white);
  box-shadow: 0 6px 14px rgba(227,30,36,0.25);
}
.service-icon svg, .card-icon svg { width: 28px; height: 28px; }

/* Services page heading: larger, sits close to its subtitle */
.services-page .page-hero { padding: 3.5rem 3vw 1rem; }
.services-page .page-hero h1 { font-size: 4.2rem; line-height: 1; margin-bottom: 0.1em; }
.services-page .page-hero p { margin-top: 0; }
@media (max-width: 640px) { .services-page .page-hero h1 { font-size: 3rem; } }

.support-page { max-width: var(--container); margin: 0 auto; padding: 0 3vw 4rem; }
.support-options { display: grid; grid-template-columns: 1fr 1.3fr; gap: 2rem; margin-bottom: 3rem; }
.support-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.75rem; }
.contact-details li { padding: 0.4em 0; font-size: 0.9rem; color: var(--gray-600); }
.contact-form button { margin-top: 1.25rem; width: 100%; }

.faq-section { max-width: 760px; margin: 0 auto; }
.faq-section h2 { text-align: center; font-size: 1.6rem; margin-bottom: 1.5rem; }
.faq-section details { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1em 1.25em; margin-bottom: 0.75rem; }
.faq-section summary { cursor: pointer; font-weight: 600; }
.faq-section details p { margin-top: 0.75em; margin-bottom: 0; }

.about-page { max-width: var(--container); margin: 0 auto; padding: 0 3vw 4rem; }
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-bottom: 3rem; }
.about-story img { border-radius: var(--radius-lg); }
.about-stats {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  padding: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
}
.about-stats .stat-label { color: var(--gray-400); }
.about-values { text-align: center; margin-bottom: 3rem; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; text-align: left; }
.values-grid article { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.5rem; }
.about-cta { text-align: center; padding: 3rem; background: var(--gray-100); border-radius: var(--radius-lg); }
.about-cta h2 { font-family: var(--font-display); font-size: 2rem; }

/* ---------- Shared box-card look: white box + red top bar + icon badge ---------- */
.product-card, .step-card, .why-card, .testimonial-card, .support-card,
.values-grid article, .shop-card, .faq-section details, .about-cta,
.stats-bar .stat-item, .support-chatbot-section, .indie-card {
  border-top: 3px solid var(--red);
}
.why-card, .support-card, .values-grid article, .shop-card, .faq-section details, .support-chatbot-section {
  background: var(--white); border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-card);
}
.testimonial-card { border-left: 1px solid var(--gray-200); }
.about-cta { border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.indie-card.is-placeholder { border-top: 1px dashed var(--gray-200); }

.stats-bar .stat-item {
  background: var(--white); border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: 1.5rem 1rem; box-shadow: var(--shadow-card);
}
.about-stats .stat-item {
  background: var(--ink-soft); border-top: 3px solid var(--red); border-radius: var(--radius-md); padding: 1.5rem 1rem;
}

.card-icon-sm { width: 44px; height: 44px; margin-bottom: 0.9rem; border-radius: 12px; }
.card-icon-sm svg { width: 22px; height: 22px; }
.step-card .step-number { position: absolute; top: 1rem; right: 1.25rem; margin: 0; }
.support-chatbot-section { padding: 1.75rem; }
.support-chatbot-section .card-icon { margin-bottom: 0.9rem; }

.step-card, .why-card, .values-grid article, .testimonial-card, .stats-bar .stat-item { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.step-card:hover, .why-card:hover, .values-grid article:hover, .testimonial-card:hover, .stats-bar .stat-item:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.12); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  .hero-slideshow { height: 460px; }
  .hero-title { font-size: 3rem; }
  .hero-title-big { font-size: 4.4rem; }
  .hero-arrow { width: 36px; height: 36px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid-scroll { grid-auto-columns: minmax(150px, 1fr); }
  .shop-layout { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; }
  .checkout-layout, .cart-layout { grid-template-columns: 1fr; }
  .support-options { grid-template-columns: 1fr; }
  .about-story { grid-template-columns: 1fr; }
  .services-grid, .values-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar, .about-stats { grid-template-columns: repeat(3, 1fr); }
  .steps-grid, .why-us-grid, .testimonial-track { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-header { padding: 0.75rem 4vw; gap: 0.75rem; }
  .header-notif-panel { right: 3vw; left: auto; }
  .auth-links { gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.4rem; margin-left: auto; }
  .main-nav ul { gap: 1rem; flex-wrap: wrap; }
  .search-bar { order: 3; max-width: 100%; }
  .hero-slideshow { height: 400px; }
  .hero-title { font-size: 2.4rem; }
  .hero-title-big { font-size: 3rem; }
  .hero-description { font-size: 0.85rem; }
  .hero-arrow { display: none; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid-scroll { grid-auto-columns: minmax(140px, 1fr); }
  .services-grid, .values-grid, .stats-bar, .about-stats { grid-template-columns: 1fr 1fr; }
  .steps-grid, .why-us-grid, .testimonial-track { grid-template-columns: 1fr; }
  .newsletter-cta { flex-direction: column; align-items: flex-start; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { min-width: 0; flex: 1; }
  .site-footer { grid-template-columns: 1fr; }
}

/* ==========================================================================
   JAVASCRIPT-POWERED UI (added)
   ========================================================================== */

/* ---------- Mobile nav toggle ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--white); margin: 0 auto; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .main-nav { flex-basis: 100%; order: 4; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .main-nav.is-open { max-height: 400px; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; }
  .main-nav ul li { width: 100%; }
  .main-nav ul li a { display: block; padding: 0.6rem 0; }
}

/* ---------- Header shadow on scroll ---------- */
.site-header.is-scrolled { box-shadow: var(--shadow-card); }

/* ---------- Trust bar (under header, every page) ---------- */
.trust-bar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 2rem;
  background: var(--gray-100); color: var(--gray-600);
  font-size: 0.78rem; font-weight: 600;
  padding: 0.55rem 3vw;
  border-bottom: 1px solid var(--gray-200);
}
@media (max-width: 700px) {
  .trust-bar { gap: 0.4rem 1rem; font-size: 0.72rem; }
}

/* ---------- Floating quick-contact button ---------- */
.quick-contact {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 999;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--red); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
  transition: background .2s ease, transform .2s ease;
}
.quick-contact:hover { background: var(--red-dark); transform: translateY(-2px); }

/* ---------- Account icon ---------- */
.account-link { display: inline-flex; align-items: center; }
.account-link svg { display: block; }

/* ---------- AI chat toggle icon (in nav) ---------- */
.ai-chat-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--gray-400);
  width: 22px; height: 22px;
}
.ai-chat-toggle:hover { color: var(--white); }
.ai-chat-toggle.has-avatar { border-radius: 50%; overflow: hidden; }
.ai-chat-toggle.has-avatar:hover { outline: 2px solid var(--red); outline-offset: 1px; }

/* ---------- AI chat panel ---------- */
.ai-chat-panel {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1000;
  width: 340px; max-width: calc(100vw - 2.5rem);
  height: 460px; max-height: calc(100vh - 2.5rem);
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.98);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.ai-chat-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ai-chat-header {
  background: var(--ink); color: var(--white);
  padding: 0.9rem 1.1rem; display: flex; align-items: center; justify-content: space-between;
}
.ai-chat-header-identity { display: flex; align-items: center; gap: 0.6rem; }
.ai-chat-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--red); color: var(--white);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ai-chat-header strong { display: block; font-size: 0.95rem; font-weight: 600; }
.ai-chat-status { font-size: 0.72rem; color: #6FCF97; font-weight: 400; }
.ai-chat-status::before { content: none; }
.ai-chat-close { background: none; border: none; color: var(--white); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.ai-chat-messages {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem;
  background: var(--gray-100);
}
.ai-chat-row { display: flex; align-items: flex-end; gap: 0.4rem; max-width: 100%; }
.ai-chat-row-bot { align-self: flex-start; padding-right: 10%; }
.ai-chat-row-user { align-self: flex-end; padding-left: 14%; }
.ai-chat-bubble-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--red); color: var(--white);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ai-chat-bubble {
  max-width: 100%; padding: 0.6em 0.85em; border-radius: var(--radius-md);
  font-size: 0.85rem; font-weight: 400; line-height: 1.5;
}
.ai-chat-bot { background: var(--white); color: var(--gray-900); border-bottom-left-radius: 4px; }
.ai-chat-user { background: var(--red); color: var(--white); border-bottom-right-radius: 4px; }
.ai-chat-action {
  border: 1px solid var(--red); color: var(--red); background: var(--white);
  cursor: pointer; font-weight: 600; transition: background .15s ease, color .15s ease;
}
.ai-chat-action:hover { background: var(--red); color: var(--white); }
.ai-chat-action.is-used { opacity: .55; cursor: default; pointer-events: none; }
.ai-chat-action:disabled { cursor: default; }
.ai-chat-typing { display: flex; gap: 4px; align-items: center; padding: 0.7em 0.9em; }
.ai-chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400);
  animation: ai-chat-bounce 1.2s infinite ease-in-out;
}
.ai-chat-typing span:nth-child(2) { animation-delay: .15s; }
.ai-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.ai-chat-form { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--gray-200); }
.ai-chat-input { flex: 1; border: 1px solid var(--gray-200); border-radius: 999px; padding: 0.5em 1em; font-size: 0.85rem; }
.ai-chat-form button[type="submit"] {
  width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--red); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ai-chat-form button[type="submit"]:hover { background: var(--red-dark); }
@media (max-width: 480px) {
  .ai-chat-panel { right: 0.75rem; bottom: 0.75rem; }
}

/* ---------- Receipt page ---------- */
.receipt-page { max-width: var(--container); margin: 0 auto; padding: 2rem 3vw 4rem; }
.receipt-empty { display: none; }
.receipt-hero { text-align: center; max-width: 560px; margin: 0 auto 2.5rem; }
.receipt-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #E7F6EC; color: #1E7B3B; font-size: 1.6rem; font-weight: 700;
  margin-bottom: 1rem;
}
.receipt-hero h1 { font-family: var(--font-display); font-size: 2.2rem; }
.receipt-meta { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--gray-600); margin-top: 1rem; }
.receipt-meta strong { color: var(--gray-900); }
.receipt-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; }
.receipt-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.75rem; }
.receipt-panel h2 { font-size: 1.05rem; margin-top: 0; }
.receipt-totals { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); }
.receipt-totals dt { color: var(--gray-600); }
.receipt-totals dd { margin: 0; font-weight: 700; }
.receipt-details { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; font-size: 0.9rem; }
.receipt-details dt { color: var(--gray-600); }
.receipt-details dd { margin: 0; font-weight: 600; text-align: right; }
.receipt-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
@media (max-width: 860px) { .receipt-layout { grid-template-columns: 1fr; } }
/* Print layout: one continuous sheet whose height follows the content (see printReceipt in main.js). */
@media print {
  .site-header, .trust-bar, .quick-contact, .ai-chat-toggle, .ai-chat-panel,
  .back-to-top, .site-footer, .receipt-actions { display: none !important; }
  html, body { height: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .receipt-page { width: 100%; max-width: none; margin: 0; padding: 20px 24px; }
  .receipt-hero { margin-bottom: 1rem; }
  .receipt-hero h1 { font-size: 1.6rem; }
  .receipt-layout { display: block; }
  .receipt-panel { border: 0; padding: 0; margin-bottom: 1rem; box-shadow: none; }
  .receipt-panel, .receipt-hero, .receipt-totals, .receipt-details,
  .receipt-items li { break-inside: avoid; page-break-inside: avoid; }
  .receipt-details dd, .receipt-items li span:first-child { overflow-wrap: anywhere; }
}
/* Same look on screen while measuring the height right before printing. */
body.receipt-printing .site-header, body.receipt-printing .trust-bar, body.receipt-printing .quick-contact,
body.receipt-printing .ai-chat-toggle, body.receipt-printing .ai-chat-panel, body.receipt-printing .back-to-top,
body.receipt-printing .site-footer, body.receipt-printing .receipt-actions { display: none !important; }
body.receipt-printing .receipt-page { width: 560px; max-width: none; margin: 0; padding: 20px 24px; box-sizing: border-box; }
body.receipt-printing .receipt-hero { margin-bottom: 1rem; }
body.receipt-printing .receipt-hero h1 { font-size: 1.6rem; }
body.receipt-printing .receipt-layout { display: block; }
body.receipt-printing .receipt-panel { border: 0; padding: 0; margin-bottom: 1rem; }
body.receipt-printing .receipt-details dd,
body.receipt-printing .receipt-items li span:first-child { overflow-wrap: anywhere; }

/* ---------- Account / My Info page ---------- */
.account-page { max-width: var(--container); margin: 0 auto; padding: 2rem 3vw 3rem; }
.account-page h1 { font-family: var(--font-display); font-size: 2.2rem; }
.account-page > p { margin-top: -0.5em; margin-bottom: 2rem; }
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
.account-nav { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 0.75rem; min-width: 0; }
.account-nav a { display: block; padding: 0.6em 0.7em; font-size: 0.9rem; color: var(--gray-600); border-radius: var(--radius-sm); }
.account-nav a:hover, .account-nav a.active { color: var(--red); background: var(--gray-100); font-weight: 700; }
.account-nav a.account-signout { color: var(--red); margin-top: 0.5em; border-top: 1px solid var(--gray-200); padding-top: 0.75em; }
.account-main { min-width: 0; }
.account-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.75rem; margin-bottom: 1.5rem; }
.account-panel h2 { font-size: 1.1rem; margin-top: 0; margin-bottom: 1.25em; }
.account-panel h2.account-subheading { margin-top: 2em; padding-top: 1.75em; border-top: 1px solid var(--gray-200); }
.account-panel .auth-step-hint { text-align: left; margin-top: -0.75em; margin-bottom: 1.25em; }
.account-form-grid input:disabled { background: var(--gray-100, #f2f2f2); color: var(--gray-600); cursor: not-allowed; }
.account-profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.account-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--gray-100); color: var(--gray-400);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.5rem;
}
.account-profile-head h3 { margin: 0; font-size: 1.15rem; color: var(--gray-900); }
.account-profile-head p { margin: 0.2em 0 0; font-size: 0.85rem; }
.account-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.account-form-grid .full-width { grid-column: 1 / -1; }
.account-orders-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.9rem; table-layout: auto; }
.account-orders-table th, .account-orders-table td { text-align: left; padding: 0.65em 0.5em; border-bottom: 1px solid var(--gray-200); color: var(--gray-600); overflow-wrap: break-word; }
.account-orders-table th { color: var(--gray-900); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
/* Fixed layout so the columns split the panel's full width on their own
   instead of auto-sizing to content and leaving dead space on one side
   while Rental Dates / Action get squeezed into tall, cramped columns. */
.account-status { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.25em 0.75em; border-radius: 999px; white-space: nowrap; line-height: 1.4; }
/* Rent history: keep order no., dates, total and status on one line each */
.account-orders-table td:nth-child(1), .account-orders-table td:nth-child(3),
.account-orders-table td:nth-child(4), .account-orders-table td:nth-child(5),
.account-orders-table th { white-space: nowrap; }
.account-orders-table td:nth-child(2) { min-width: 160px; }
.account-orders-table td:nth-child(6) { min-width: 150px; }
.account-orders-table td { vertical-align: middle; }
.account-status.is-active { background: #E7F6EC; color: #1E7B3B; }
.account-status.is-done { background: var(--gray-100); color: var(--gray-600); }
.account-status.is-pending { background: #FFF3D6; color: #8A6100; }
.account-status.is-declined { background: var(--danger-bg); color: var(--danger-dark); }

/* ---------- Rent history: clickable order number ---------- */
.order-number-link { color: var(--red); font-weight: 700; text-decoration: underline; }
.order-number-link:hover { color: var(--red-dark); }

/* ==========================================================================
   ADMIN — orders dashboard
   ========================================================================== */
.admin-shell {
  width: 100%;                 /* body.auth-body is a flex column: without this, margin:auto shrink-wraps the panel to its content, so its width changed on every admin page */
  max-width: var(--container);
  margin: 0 auto;
  flex: 1 0 auto;
  background: var(--paper);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.75rem 3vw 4rem;
}
.admin-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
.admin-summary-card { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1rem 1.25rem; box-shadow: var(--shadow-card); }
.admin-summary-card .num { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.02em; line-height: 1; }
.admin-summary-card .label { font-size: 0.78rem; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.03em; }

.admin-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.admin-tab { background: var(--white); border: 1px solid var(--gray-200); border-radius: 999px; padding: 0.45em 1.1em; font-size: 0.85rem; font-weight: 600; color: var(--gray-600); }
.admin-tab:hover { border-color: var(--ink); color: var(--ink); }
.admin-tab.active { background: var(--ink); border-color: var(--ink); color: var(--white); }

.admin-orders-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: var(--white); }
.admin-orders-table th, .admin-orders-table td { text-align: left; padding: 0.75em 0.6em; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.admin-orders-table th { color: var(--gray-900); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; background: var(--gray-100); }
.admin-orders-table td { color: var(--gray-600); }
.admin-order-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.admin-order-actions button {
  font-size: 0.78rem; font-weight: 700; padding: 0.35em 0.8em; border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200); background: var(--white); color: var(--ink);
}
.admin-order-actions button:hover { border-color: var(--ink); }
.admin-order-actions button.is-accept { background: #1E7B3B; border-color: #1E7B3B; color: var(--white); }
.admin-order-actions button.is-accept:hover { background: #17612e; }
.admin-order-actions button.is-decline { background: var(--white); border-color: var(--danger); color: var(--danger); }
.admin-order-actions button.is-decline:hover { background: var(--danger-bg); }
.admin-order-actions button.is-complete { background: var(--ink); border-color: var(--ink); color: var(--white); }
.admin-order-actions button:disabled { opacity: 0.5; cursor: not-allowed; }

.admin-empty { text-align: center; padding: 3rem 1rem; color: var(--gray-600); }
/* ---------- Admin: shared chrome (top bar, section nav, buttons) ---------- */
body.auth-body.admin-pending .admin-shell { visibility: hidden; } /* until admin-guard.js confirms the session */

.admin-topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: 1.1rem 3vw; color: var(--white);
}
.admin-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.admin-brand .logo-icon { flex-shrink: 0; object-fit: contain; }
.admin-brand .logo-title { color: var(--white); }      /* the logo + wordmark are white: they only show on the dark bar */
.admin-brand .logo-subtitle { color: var(--gray-400); }
.admin-user { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.admin-user-email { font-size: 0.82rem; color: var(--gray-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.admin-user-email strong { color: var(--white); font-weight: 600; }
.admin-signout {
  font-size: 0.8rem; font-weight: 700; white-space: nowrap; color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-md); padding: 0.55em 1.05em;
  transition: background 0.15s, border-color 0.15s;
}
.admin-signout:hover { background: var(--red); border-color: var(--red); }

.admin-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.admin-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0.55em 1.2em; line-height: 1;
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--radius-md);
  font-size: 0.88rem; font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.admin-nav a:hover { background: var(--gray-100); }
.admin-nav a.active { background: var(--ink); color: var(--white); }

.admin-page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.admin-page-head h1 { margin: 0; font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.1; }
.admin-note { margin: 0 0 1rem; font-size: 0.85rem; color: var(--gray-600); max-width: 75ch; }
.admin-field { margin: 1.25rem 0 0; max-width: 360px; }
.admin-field label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.4rem; }
.admin-field select { width: 100%; }

.admin-refresh {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-height: 40px; padding: 0.5em 1.1em; line-height: 1;
  font-size: 0.85rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--white);
  border: 1.5px solid var(--gray-400); border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-refresh:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--white); }
.admin-refresh:disabled { opacity: 0.55; cursor: not-allowed; }

.admin-refresh.is-primary { background: var(--red-dark); border-color: var(--red-dark); color: var(--white); }
.admin-refresh.is-primary:hover:not(:disabled) { background: #8F1216; border-color: #8F1216; color: var(--white); }

.admin-toolbar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 1.25rem; }
.admin-toolbar .admin-field { margin: 0; flex: 1 1 240px; }
.admin-alert { margin: 1rem 0 0; padding: 0.75rem 1rem; border: 1px solid #E8C36A; background: #FFF3D6; color: #6B4B00; border-radius: var(--radius-md); font-size: 0.85rem; }

/* Products table: clickable photo + editable name */
.product-thumb {
  position: relative; display: block; width: 72px; height: 72px; padding: 0; overflow: hidden;
  background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); cursor: pointer;
}
.product-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-thumb-badge {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.22em 0; text-align: center;
  background: rgba(11, 11, 12, 0.75); color: var(--white); font-size: 0.65rem; font-weight: 700;
  opacity: 0; transition: opacity 0.15s;
}
.product-thumb:hover:not(:disabled) { border-color: var(--ink); }
.product-thumb:hover .product-thumb-badge, .product-thumb:focus-visible .product-thumb-badge, .product-thumb.is-uploading .product-thumb-badge { opacity: 1; }
@media (hover: none) { .product-thumb-badge { opacity: 1; } } /* no hover on touch screens: always show the hint */
.product-thumb:disabled { cursor: not-allowed; opacity: 0.55; }
.product-thumb.is-uploading { cursor: progress; }
.name-input { width: 100%; min-width: 0; }
.product-thumb:focus-visible, .add-product-photo:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@keyframes adminRowFlash { from { background: #FFF3D6; } to { background: transparent; } }
.admin-row-flash { animation: adminRowFlash 2s ease-out; }

/* Add-product dialog */
.admin-dialog { border: none; border-radius: var(--radius-lg); padding: 1.5rem; width: min(460px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; color: var(--gray-900); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.admin-dialog [hidden] { display: none !important; } /* .admin-dialog-field input { display:block } would otherwise un-hide the file input */
.admin-dialog::backdrop { background: rgba(11, 11, 12, 0.6); }
.admin-dialog h2 { margin: 0 0 0.25rem; font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: 0.02em; }
.admin-dialog-sub { margin: 0 0 1.1rem; font-size: 0.85rem; }
.admin-dialog-field { display: block; margin-bottom: 0.95rem; font-size: 0.8rem; font-weight: 700; }
.admin-dialog-field input, .admin-dialog-field textarea { display: block; width: 100%; margin-top: 0.35rem; font-weight: 400; }
.admin-dialog-field textarea { resize: vertical; min-height: 4.5rem; font-family: inherit; font-size: 0.95rem; padding: 0.7em 0.9em; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); }
.add-product-photo {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 150px; margin-top: 0.35rem; padding: 0; overflow: hidden;
  background: var(--gray-100); color: var(--gray-600); font-size: 0.85rem; font-weight: 600;
  border: 1.5px dashed var(--gray-400); border-radius: var(--radius-md); cursor: pointer;
}
.add-product-photo:hover { border-color: var(--ink); }
.add-product-photo img { width: 100%; height: 100%; object-fit: contain; }
.admin-dialog-error { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--danger-dark); }
.admin-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }

.admin-nav a:focus-visible, .admin-signout:focus-visible, .admin-refresh:focus-visible, .admin-tab:focus-visible,
.admin-order-actions button:focus-visible, .chat-admin-reply-form button:focus-visible, .chat-admin-list-item:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

@media (min-width: 701px) {
  /* wide tables scroll inside their own box instead of crushing the columns */
  .admin-shell .table-scroll { border: 1px solid var(--gray-200); background: var(--white); }
  .table-scroll .admin-orders-table { min-width: 880px; }
  #products-table-wrap .admin-orders-table { min-width: 1080px; }
}
@media (max-width: 700px) {
  .admin-topbar { padding: 0.9rem 4vw; }
  .admin-brand .logo-icon { width: 40px; height: 40px; }
  .admin-brand .logo-title { font-size: 1.05rem; letter-spacing: 0.3em; }
  .admin-brand .logo-subtitle { font-size: 0.62rem; }
  .admin-user { width: 100%; justify-content: space-between; }
  .admin-user-email { max-width: none; flex: 1; }
  .admin-user-label { display: none; }
  .admin-nav { flex-wrap: nowrap; gap: 0.4rem; }
  .admin-nav a { flex: 1 1 auto; padding: 0.55em 0.4em; font-size: 0.8rem; white-space: nowrap; }
  .admin-cell { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .admin-page-head h1 { font-size: 1.8rem; }
}

/* ---------- Admin: mobile layout (summary cards + card-style tables) ---------- */
@media (max-width: 700px) {
  .admin-shell { padding: 1.25rem 4vw 3rem; }
  .admin-summary { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .admin-summary-card { padding: 0.85rem 1rem; }
  .admin-summary-card .num { font-size: 1.6rem; }
  .admin-tabs { gap: 0.4rem; }
  .admin-tab { padding: 0.4em 0.85em; font-size: 0.8rem; }

  /* Card-style table: header row hidden, each row becomes a card,
     each cell becomes a labeled line using data-label from the JS.
     Applies to admin tables plus the cart and account rent-history tables,
     so none of them ever need to scroll sideways on a phone screen. */
  .table-scroll { overflow-x: visible; }
  .admin-orders-table, .admin-orders-table thead, .admin-orders-table tbody,
  .admin-orders-table th, .admin-orders-table td, .admin-orders-table tr,
  .cart-table, .cart-table thead, .cart-table tbody,
  .cart-table th, .cart-table td, .cart-table tr,
  .account-orders-table, .account-orders-table thead, .account-orders-table tbody,
  .account-orders-table th, .account-orders-table td, .account-orders-table tr {
    display: block;
  }
  .admin-orders-table thead, .cart-table thead, .account-orders-table thead {
    position: absolute; top: -9999px; left: -9999px;
  }
  .admin-orders-table tr, .cart-table tr, .account-orders-table tr {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    margin-bottom: 0.85rem; padding: 0.75rem 0.85rem; box-shadow: var(--shadow-card);
  }
  .admin-orders-table td, .cart-table td, .account-orders-table td {
    border-bottom: none; padding: 0.4em 0; display: flex; gap: 0.6rem; align-items: flex-start;
    width: auto !important; white-space: normal;
  }
  .admin-orders-table td::before, .cart-table td::before, .account-orders-table td::before {
    content: attr(data-label); flex: 0 0 40%; max-width: 40%;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--gray-400);
  }
  .admin-orders-table td:not([data-label])::before,
  .cart-table td:not([data-label])::before,
  .account-orders-table td:not([data-label])::before { content: none; }
  .account-orders-table { min-width: 0; }
  .account-orders-table td:nth-child(n) { white-space: normal; min-width: 0; }
  .account-orders-table td::before { flex-basis: 32%; max-width: 32%; }
  .account-orders-table td[data-label="Action"] { flex-wrap: wrap; }
  .account-orders-table td[data-label="Action"] .order-cancel-note { flex: 1 1 100%; margin: 0; padding-left: calc(32% + 0.6rem); }
  .admin-orders-table td:empty, .cart-table td:empty, .account-orders-table td:empty { display: none; }
  .admin-orders-table td[colspan], .cart-table td[colspan], .account-orders-table td[colspan] {
    display: block; text-align: center;
  }
  .admin-orders-table .price-input { max-width: 100%; }
  .admin-order-actions { padding-top: 0.2rem; }

  /* Cart-specific: product cell drops its data-label row (image+name already
     says what it is) and keeps its image vertically centered next to the
     name; qty stepper/remove link stay compact. */
  .cart-table .cart-product { gap: 0.6rem; align-items: center; }
  .cart-table .cart-row-subtotal { font-weight: 700; }
  .cart-table td:last-child { justify-content: flex-end; }
}

/* ==========================================================================
   ADMIN — live chat dashboard
   ========================================================================== */
button.admin-refresh.is-offline::before { content: '\25CF'; color: var(--gray-400); }
button.admin-refresh.is-online { background: #1E7B3B; border-color: #1E7B3B; color: var(--white); }
button.admin-refresh.is-online:hover:not(:disabled) { background: #17612e; border-color: #17612e; }
button.admin-refresh.is-online::before { content: '\25CF'; }

.chat-admin-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 1rem; margin-top: 1.25rem;
  height: 560px; max-height: 70vh;
}
.chat-admin-list {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  overflow-y: auto; padding: 0.4rem;
}
.chat-admin-list-empty { padding: 1.5rem 0.75rem; color: var(--gray-400); font-size: 0.85rem; text-align: center; }
.chat-admin-list-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-radius: var(--radius-sm); padding: 0.65em 0.7em; cursor: pointer;
}
.chat-admin-list-item:hover { background: var(--gray-100); }
.chat-admin-list-item.active { background: var(--gray-100); box-shadow: inset 3px 0 0 var(--red); }
.chat-admin-list-item.is-closed { opacity: 0.55; }
.chat-admin-list-item-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.chat-admin-list-name { font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.chat-admin-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.chat-admin-list-preview {
  font-size: 0.8rem; color: var(--gray-600); margin-top: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-admin-list-time { font-size: 0.72rem; color: var(--gray-400); margin-top: 0.2rem; }

.chat-admin-thread {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-admin-thread-header { padding: 0.8em 1em; border-bottom: 1px solid var(--gray-200); font-size: 0.9rem; }
.chat-admin-thread-messages {
  flex: 1; overflow-y: auto; padding: 1rem; background: var(--gray-100);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.chat-admin-thread-placeholder { color: var(--gray-400); font-size: 0.85rem; text-align: center; margin-top: 2rem; }
.chat-admin-bubble-row { display: flex; max-width: 100%; }
.chat-admin-bubble-row.is-user { justify-content: flex-start; }
.chat-admin-bubble-row.is-admin { justify-content: flex-end; }
.chat-admin-bubble {
  max-width: 75%; padding: 0.6em 0.85em; border-radius: var(--radius-md);
  font-size: 0.85rem; line-height: 1.5;
}
.chat-admin-bubble-row.is-user .chat-admin-bubble { background: var(--white); color: var(--gray-900); border-bottom-left-radius: 4px; }
.chat-admin-bubble-row.is-admin .chat-admin-bubble { background: var(--red); color: var(--white); border-bottom-right-radius: 4px; }
.chat-admin-reply-form { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--gray-200); flex-wrap: wrap; }
.chat-admin-reply-form input {
  flex: 1; min-width: 120px; border: 1px solid var(--gray-200); border-radius: 999px; padding: 0.5em 1em; font-size: 0.85rem;
}
.chat-admin-reply-form button[type="submit"] {
  border: none; background: var(--red); color: var(--white); border-radius: 999px; padding: 0.5em 1.2em; font-weight: 700; cursor: pointer;
}
.chat-admin-reply-form button[type="submit"]:hover { background: var(--red-dark); }
.chat-admin-close-btn {
  border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-600);
  border-radius: 999px; padding: 0.5em 1.1em; font-size: 0.8rem; cursor: pointer;
}
.chat-admin-close-btn:hover { border-color: var(--red); color: var(--red); }
.chat-admin-back-btn { display: none; }
@media (max-width: 720px) {
  .chat-admin-layout { grid-template-columns: 1fr; height: auto; max-height: none; position: relative; }
  .chat-admin-list { max-height: none; height: calc(100vh - 380px); height: calc(100dvh - 380px); min-height: 340px; }
  .chat-admin-thread { display: none; height: calc(100vh - 380px); height: calc(100dvh - 380px); min-height: 340px; }
  .chat-admin-thread-messages { min-height: 0; }
  .chat-admin-layout.show-thread .chat-admin-list { display: none; }
  .chat-admin-layout.show-thread .chat-admin-thread { display: flex; }
  .chat-admin-back-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.6rem;
    background: none; border: none; color: var(--red); font-weight: 700; font-size: 0.85rem; cursor: pointer; padding: 0;
  }
  .chat-admin-thread-header { display: flex; align-items: center; }
}
@media (max-width: 860px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-form-grid { grid-template-columns: 1fr; }
}

/* ---------- Cart badge ---------- */
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
.cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--red); color: var(--white);
  font-size: 0.7rem; font-weight: 700; border-radius: 999px;
  line-height: 1;
}

/* ---------- Toast notifications ---------- */
/* top sits just below the sticky header (--header-h is measured live in main.js)
   so toasts never cover the logo/nav; 96px is a safe fallback before JS runs. */
.toast-stack {
  position: fixed; top: calc(var(--header-h, 96px) + 0.75rem); right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem;
  max-width: min(90vw, 360px);
}
.toast {
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.1rem; border-radius: var(--radius-md);
  font-size: 0.9rem; box-shadow: var(--shadow-card);
  opacity: 0; transform: translateX(20px);
  transition: opacity .25s ease, transform .25s ease;
  border-left: 3px solid var(--red);
  word-break: break-word;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.toast-error { border-left-color: #d32f2f; }

/* ---------- Notification bell (dashboard) ---------- */
.account-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.account-page-head h1 { margin-bottom: 0; }
.account-page-head > div > p { margin-top: 0.2em; margin-bottom: 0; }
.notif-bell-wrap { position: relative; flex-shrink: 0; margin-top: 0.3rem; }
.notif-bell {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--gray-200); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.notif-bell:hover { border-color: var(--red); color: var(--red); }
.notif-bell.is-ringing { animation: notif-ring 0.6s ease; }
@keyframes notif-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--red); color: var(--white);
  font-size: 0.68rem; font-weight: 700; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper);
}
.notif-panel {
  position: absolute; top: calc(100% + 0.6rem); right: 0; width: 320px; max-width: 83vw;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); z-index: 50; overflow: hidden;
  animation: notif-pop .18s ease;
}
@keyframes notif-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75em 1em; border-bottom: 1px solid var(--gray-200);
  font-weight: 700; font-size: 0.9rem; color: var(--gray-900);
}
.notif-mute-toggle { background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.2em; }
.notif-list { max-height: none; overflow: visible; }
.notif-empty { padding: 2rem 1rem; text-align: center; color: var(--gray-400); font-size: 0.85rem; }
.notif-item {
  display: flex; gap: 0.65rem; padding: 0.75em 1em;
  border-bottom: 1px solid var(--gray-100); align-items: flex-start;
}
.notif-item { color: inherit; text-decoration: none; transition: background .15s ease; }
.notif-item:hover { background: var(--gray-100); }
.notif-item:last-child { border-bottom: none; }
.notif-item { border-left: 4px solid var(--gray-200); }
/* color = what the admin decided (same light colors as the pop-up toast):
   green approved · blue completed · red declined/cancelled · amber pending · violet receipt updated */
.notif-item-accepted { border-left-color: rgb(34, 197, 94); background: rgb(240, 253, 244); }
.notif-item-completed { border-left-color: rgb(59, 130, 246); background: rgb(239, 246, 255); }
.notif-item-declined, .notif-item-cancelled, .notif-item-cancel-rejected { border-left-color: rgb(248, 113, 113); background: rgb(254, 242, 242); }
.notif-item-pending { border-left-color: rgb(251, 191, 36); background: rgb(255, 251, 235); }
.notif-item-receipt-updated { border-left-color: rgb(167, 139, 250); background: rgb(245, 243, 255); }
.notif-item.is-unread { font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.notif-item:hover { filter: brightness(0.97); }
.notif-item-body strong, .notif-toast strong { font-weight: 800; }
.notif-item-body { min-width: 0; }
.notif-item-body p { margin: 0; font-size: 0.85rem; color: var(--gray-900); line-height: 1.4; overflow-wrap: break-word; }
.notif-item-time { font-size: 0.72rem; color: var(--gray-400); }

.notif-toast { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; color: var(--gray-900); border-left-width: 5px; }
.notif-toast-accepted { border-left-color: rgb(34, 197, 94); background: rgb(220, 252, 231); }
.notif-toast-completed { border-left-color: rgb(59, 130, 246); background: rgb(219, 234, 254); }
.notif-toast-declined, .notif-toast-cancelled { border-left-color: rgb(248, 113, 113); background: rgb(254, 226, 226); }
.notif-toast-pending { border-left-color: rgb(251, 191, 36); background: rgb(254, 243, 199); }
.notif-toast-receipt-updated { border-left-color: rgb(167, 139, 250); background: rgb(237, 233, 254); }

@media (max-width: 860px) {
  .account-page-head { flex-wrap: wrap; }
  .notif-panel { right: -4.5vw; }
}

/* ---------- Form field errors ---------- */
.field-error { color: var(--danger-dark); font-size: 0.8rem; margin: -0.5rem 0 0.5rem; display: none; }
.field-error.show { display: block; }
.has-error input, .has-error textarea, .has-error select { border-color: var(--danger) !important; }

/* ---------- Quantity stepper ---------- */
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.qty-stepper button { width: 32px; height: 32px; border: none; background: var(--gray-100); cursor: pointer; font-size: 1rem; }
.qty-stepper button:hover { background: var(--gray-200); }
.qty-stepper input { width: 48px; text-align: center; border: none; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Product gallery thumbnails ---------- */
.product-thumbnails li { cursor: pointer; opacity: 0.6; transition: opacity .2s ease, outline .2s ease; }
.product-thumbnails li.active, .product-thumbnails li:hover { opacity: 1; outline: 2px solid var(--red); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--white); border: none;
  font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gray-600); }
.empty-state a { color: var(--red); font-weight: 600; }

/* ---------- Studio pickup location (checkout) ---------- */
.studio-info { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 0.9rem 1rem; margin: 0.75rem 0 1rem; }
.studio-info strong { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-600); }
.studio-info p { margin: 0.25rem 0 0; }
.studio-info-name { font-weight: 700; }
.studio-map-link { display: inline-block; margin-top: 0.5rem; color: var(--red); font-weight: 600; font-size: 0.9rem; }
.studio-map-link:hover { text-decoration: underline; }

/* ==========================================================================
   Order cancellation requests (customer modal + admin notes)
   ========================================================================== */
.order-cancel-btn {
  background: var(--white); border: 1px solid var(--danger); color: var(--danger);
  border-radius: var(--radius-sm); padding: 0.35em 0.8em; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.order-cancel-btn:hover { background: var(--danger-bg); }
.order-cancel-note { font-size: 0.78rem; color: var(--gray-400); margin: 0.3em 0; }

.cancel-modal {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(11, 11, 12, 0.6);
}
.cancel-modal.is-open { display: flex; }
.cancel-modal-card {
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  width: 100%; max-width: 460px; padding: 1.5rem; max-height: 90vh; overflow-y: auto;
}
.cancel-modal-card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--gray-900); }
.cancel-modal-hint { margin: 0 0 1rem; font-size: 0.88rem; color: var(--gray-600); }
.cancel-modal-warning {
  margin: -0.3rem 0 1rem; padding: 0.55em 0.8em; border-radius: 8px;
  font-size: 0.85rem; font-weight: 600; background: #FFF3D6; color: #8A6100;
}
.order-cancel-note.is-limit { color: var(--danger-dark); font-weight: 600; }
.cancel-modal-card label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gray-900); margin-bottom: 0.4em; }
.cancel-modal-card textarea {
  width: 100%; padding: 0.7em 0.8em; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font: inherit; resize: vertical; min-height: 96px;
}
.cancel-modal-card textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.cancel-modal-error { margin: 0.6em 0 0; font-size: 0.85rem; color: var(--danger-dark); }
.cancel-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.cancel-modal-actions button:disabled { opacity: 0.6; cursor: not-allowed; }

.notif-toast-cancel-rejected { border-left-color: rgb(248, 113, 113); background: rgb(254, 226, 226); }

.admin-tab-count {
  display: inline-block; min-width: 1.4em; padding: 0 0.4em; margin-left: 0.25em;
  border-radius: 999px; background: var(--red); color: var(--white);
  font-size: 0.72rem; line-height: 1.5; text-align: center;
}
.admin-cancel-note {
  margin-top: 0.5rem; padding: 0.45em 0.6em; border-radius: var(--radius-sm);
  background: var(--gray-100); color: var(--gray-600); font-size: 0.8rem; line-height: 1.4;
}
.admin-cancel-note.is-open { background: #FFF3D6; color: #8A6100; }
.admin-cancel-note span { font-size: 0.92em; opacity: 0.8; }

/* ==========================================================================
   FLOATING LOG IN (guests) — replaces the header LOG IN button
   ========================================================================== */
.float-login {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 998;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 52px; padding: 0.4rem 0.5rem 0.4rem 0.45rem;
  background: var(--ink); color: var(--white);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.08);
  animation: float-login-in 0.35s ease both;
}
.float-login[hidden] { display: none; }
@keyframes float-login-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.float-login-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--red); color: var(--white);
}
.float-login-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.float-login-text strong { font-size: 0.85rem; color: var(--white); }
.float-login-text span { font-size: 0.72rem; color: var(--gray-400); }
.float-login .float-login-btn {
  border: none; cursor: pointer; font-family: inherit;
  background: var(--red); color: var(--white);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.65em 1.4em; border-radius: 999px; white-space: nowrap;
  transition: background 0.2s ease;
}
.float-login .float-login-btn:hover { background: var(--red-dark); }
/* keep the footer text clear of the floating container */
body.has-float-login .site-footer { padding-bottom: 5.5rem; }

/* phones: always the small pill, sits between the two round buttons */
@media (max-width: 640px) {
  .float-login { gap: 0; padding: 0.3rem; }
  .float-login-badge, .float-login-text { display: none !important; }
}
@media print { .float-login, .login-pop { display: none !important; } }

/* hide the LOG IN bar while the pop-up is up */
body.login-pop-open .float-login { opacity: 0; pointer-events: none; }

/* ==========================================================================
   LOG IN POP-UP — black floating container, no white background
   ========================================================================== */
.login-pop {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 1000;
  width: 420px; max-width: calc(100vw - 1.5rem);
  max-height: calc(100vh - 2.5rem); overflow-y: auto;
  padding: 1.6rem 1.75rem 1.5rem;
  background: var(--ink); color: var(--white);
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
  transform: translate(-50%, 40px); opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.login-pop[hidden] { display: none; }
.login-pop.is-open { transform: translate(-50%, 0); opacity: 1; }

.login-pop-close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: var(--gray-400); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.login-pop-close:hover { background: rgba(255,255,255,0.2); color: var(--white); }

.login-pop-logo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; margin-bottom: 1.1rem; }
.login-pop-logo img { width: 56px; height: 56px; }
.login-pop-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--white); }
.login-pop-sub { font-size: 0.66rem; letter-spacing: 0.04em; color: var(--white); }

.login-pop-form { display: flex; flex-direction: column; }
.login-pop-form label { font-size: 0.85rem; color: var(--white); margin: 0.6rem 0 0.3rem; }
.login-pop-form input {
  width: 100%; height: 42px; padding: 0 0.85rem;
  border-radius: 10px; border: 1px solid var(--gray-400);
  background: var(--white); color: var(--ink); font-size: 0.95rem;
}
.login-pop-form input:focus { outline: none; border-color: var(--red); }
.login-pop-pass { position: relative; }
.login-pop-pass input { padding-right: 42px; }
.login-pop-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: none; background: none;
  cursor: pointer; opacity: 0.55;
}
.login-pop-eye:hover { opacity: 0.9; }
.login-pop-eye img { width: 100%; height: 100%; display: block; object-fit: contain; }
.login-pop-error { display: none; margin: 0.3rem 0 0; font-size: 0.78rem; color: #ff8a8a; }
.login-pop-error.show { display: block; }
.login-pop-forgot { align-self: flex-end; margin: 0.5rem 0 0.9rem; font-size: 0.8rem; color: var(--white); }
.login-pop-submit, .login-pop-google {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; height: 42px; border-radius: 10px; cursor: pointer;
  background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  transition: background 0.2s ease;
}
.login-pop-submit { border: none; }
.login-pop-google { border: 1px solid var(--gray-600); }
.login-pop-submit:hover, .login-pop-google:hover { background: var(--gray-200); }
.login-pop-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.login-pop-google img { width: 18px; height: 18px; }
.login-pop-or { display: flex; align-items: center; gap: 0.75rem; margin: 0.9rem 0; color: var(--gray-400); font-size: 0.75rem; }
.login-pop-or::before, .login-pop-or::after { content: ""; flex: 1; height: 1px; background: var(--gray-600); }
.login-pop-switch { text-align: center; font-size: 0.85rem; margin: 1rem 0 0; color: var(--white); }
.login-pop-switch a { color: var(--white); font-weight: 800; }

/* ==========================================================================
   REGISTER POP-UP — same container as LOG IN (same width, same spot);
   only taller because it has more fields
   ========================================================================== */
.login-pop-form[hidden] { display: none; }
.register-pop .login-pop-logo { margin-bottom: 0.7rem; }
.register-pop .login-pop-form label { margin: 0.4rem 0 0.25rem; }
.register-pop .login-pop-form input { height: 40px; }
.register-pop .login-pop-error { margin-top: 0.2rem; }
.register-pop .login-pop-error a { color: var(--white); font-weight: 800; text-decoration: underline; }
.register-pop .login-pop-form label.login-pop-check {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin: 0.8rem 0 0.5rem; font-size: 0.8rem; line-height: 1.4; color: var(--white);
}
.register-pop .login-pop-check input {
  width: 16px; height: 16px; padding: 0; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--red);
}
.register-pop .login-pop-check a { color: var(--white); font-weight: 700; text-decoration: underline; }
.register-pop .login-pop-submit { margin-top: 0.6rem; }
.login-pop-hint { margin: 0 0 0.8rem; font-size: 0.88rem; line-height: 1.5; color: var(--white); }
.register-pop .login-pop-switch a { cursor: pointer; }


/* ==========================================================================
   HEADING + SUBTITLE STYLE (same look as the Services page)
   Larger heading, subtitle sits close underneath. Applied site-wide.
   ========================================================================== */
.explore-gear h2,
.how-it-works h2,
.why-us h2,
.testimonials h2,
.indie-header h1,
.account-page-head h1,
.page-hero h1 {
  font-size: 4.2rem;
  line-height: 1;
  margin-bottom: 0.1em;
}
.explore-gear .section-subtitle,
.how-it-works .section-subtitle,
.why-us .section-subtitle,
.testimonials .section-subtitle { margin-top: 0; }
.page-hero { padding-bottom: 1rem; }
.page-hero p { margin-top: 0; }
.indie-header p,
.account-page-head p { margin-top: 0; }
@media (max-width: 640px) {
  .explore-gear h2,
  .how-it-works h2,
  .why-us h2,
  .testimonials h2,
  .indie-header h1,
  .account-page-head h1,
  .page-hero h1 { font-size: 3rem; }
}

/* Home: "Built for creators" heading, same heading + subtitle style */
.tagline-section h2 { font-size: 4.2rem; line-height: 1; margin-bottom: 0.15em; }
.tagline-section p { margin-top: 0; }
@media (max-width: 640px) { .tagline-section h2 { font-size: 3rem; } }

/* ==========================================================================
   Terms and Agreements page
   ========================================================================== */
.terms-page { max-width: var(--container); margin: 0 auto; padding: 0 3vw 4rem; }
.terms-hero {
  position: relative; overflow: hidden; text-align: center;
  margin: 2rem 0 0; padding: 3.5rem 1.5rem 5rem;
  background: radial-gradient(circle at 50% -20%, rgba(227,30,36,0.35), transparent 60%), var(--ink);
  color: var(--white); border-radius: var(--radius-lg);
}
.terms-eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-dark); border: 1px solid rgba(255,75,80,0.4); border-radius: 999px; padding: 0.35em 1em; margin-bottom: 1rem;
}
.terms-hero h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; letter-spacing: 0.02em; color: var(--white); margin: 0 0 0.3em; }
.terms-hero p { max-width: 560px; margin: 0 auto; color: rgba(255,255,255,0.72); }

.terms-highlights {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  max-width: 880px; margin: -2.75rem auto 2.5rem; padding: 0 1rem;
}
.terms-highlight {
  background: var(--white); border: 1px solid var(--gray-200); border-top: 3px solid var(--red);
  border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  padding: 1.1rem 1rem; text-align: center; display: flex; flex-direction: column; gap: 0.2rem;
}
.terms-highlight-value { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--red); letter-spacing: 0.02em; }
.terms-highlight-label { font-size: 0.78rem; font-weight: 600; color: var(--gray-600); }

.terms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.terms-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.terms-card:last-child { grid-column: 1 / -1; }
.terms-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.1); border-color: rgba(227,30,36,0.35); }
.terms-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.terms-num { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--gray-200); letter-spacing: 0.04em; }
.terms-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--white); background: linear-gradient(145deg, var(--red-bright), var(--red-dark));
  box-shadow: 0 6px 14px rgba(227,30,36,0.25);
}
.terms-card h2 { font-size: 1.05rem; margin: 0 0 0.5em; color: var(--gray-900); }
.terms-card p { font-size: 0.9rem; line-height: 1.6; margin: 0; }
.terms-card strong { color: var(--gray-900); }

.terms-ack {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding: 1.75rem 2rem; border-radius: var(--radius-lg);
  background: var(--ink); color: var(--white); border-left: 4px solid var(--red);
}
.terms-ack h2 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.02em; margin: 0 0 0.15em; color: var(--white); }
.terms-ack p { margin: 0; color: rgba(255,255,255,0.7); }

@media (max-width: 640px) {
  .terms-hero { padding: 2.5rem 1.25rem 4.5rem; }
  .terms-highlights { grid-template-columns: 1fr; padding: 0 0.5rem; }
  .terms-grid { grid-template-columns: 1fr; }
  .terms-ack { padding: 1.5rem; }
}
@media (max-width: 640px) {
  .product-inuse-label { font-size: 0.95rem; padding: 0.35em 0.85em; }
  .product-inuse-dates { font-size: 0.66rem; white-space: nowrap; padding: 0.35em 0.65em; }
}

/* ==========================================================================
   Premium refresh: My Account, Rent History, Cart, Price Range, About
   ========================================================================== */
.account-eyebrow, .about-eyebrow {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--white); background: rgba(227,30,36,0.18); border: 1px solid rgba(227,30,36,0.55);
  border-radius: 999px; padding: 0.35em 1em; margin-bottom: 0.9rem;
}

/* ---------- My Account: header banner ---------- */
.account-page-head {
  position: relative; overflow: hidden; align-items: center;
  background: radial-gradient(circle at 85% -40%, rgba(227,30,36,0.45), transparent 55%), var(--ink);
  color: var(--white); border-radius: var(--radius-lg);
  padding: 2.25rem 2.5rem; margin-bottom: 2rem;
  border-bottom: 3px solid var(--red);
}
.account-page .account-page-head h1 { color: var(--white); font-size: 3.2rem; line-height: 1; margin: 0 0 0.15em; }
.account-page-head > div > p { color: rgba(255,255,255,0.7); margin: 0; }
.account-page-head .notif-bell { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--white); }
.account-page-head .notif-bell:hover { border-color: var(--red); color: var(--white); background: rgba(227,30,36,0.25); }

/* ---------- My Account: side navigation ---------- */
.account-nav {
  padding: 1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  position: sticky; top: 100px; display: flex; flex-direction: column; gap: 0.2rem;
}
.account-nav-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-400); padding: 0.2rem 0.75rem 0.6rem;
}
.account-nav a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.7em 0.75em;
  font-weight: 600; color: var(--gray-600); border-radius: var(--radius-sm);
  border-left: 3px solid transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.account-nav a svg { flex-shrink: 0; opacity: 0.8; }
.account-nav a:hover { background: var(--gray-100); color: var(--gray-900); font-weight: 600; }
.account-nav a.active { background: rgba(227,30,36,0.07); color: var(--red); border-left-color: var(--red); font-weight: 700; }
.account-nav a.account-signout { color: var(--red); margin-top: 0.6rem; border-top: 1px solid var(--gray-200); border-radius: 0; padding-top: 0.9em; }
.account-nav a.account-signout:hover { background: transparent; color: var(--red-dark); }

/* ---------- My Account: panels + profile ---------- */
.account-panel { border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 2rem; border-top: 3px solid var(--red); }
.account-section-title { display: flex; align-items: center; gap: 0.65rem; font-size: 1.15rem; letter-spacing: 0.01em; color: var(--gray-900); }
.account-section-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px; background: rgba(227,30,36,0.08); color: var(--red);
}
.account-panel .auth-step-hint { font-size: 0.85rem; color: var(--gray-400); margin-top: -0.6em; }
.account-profile-head {
  padding: 1.25rem 1.4rem; margin-bottom: 1.75rem; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--gray-100), var(--white)); border: 1px solid var(--gray-200);
}
.account-avatar {
  width: 68px; height: 68px; color: var(--white); font-size: 1.7rem; letter-spacing: 0.04em;
  background: linear-gradient(145deg, var(--red-bright), var(--red-dark));
  box-shadow: 0 6px 16px rgba(227,30,36,0.28), 0 0 0 4px var(--white);
}
.account-profile-head h3 { font-size: 1.25rem; }
.account-profile-head p { color: var(--gray-400); }
.account-form-grid label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-600); }
.account-form-grid input, .account-form-grid textarea {
  border-radius: var(--radius-sm); border: 1px solid var(--gray-200); background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-form-grid input:focus, .account-form-grid textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,30,36,0.12);
}
.account-panel h2.account-subheading { margin-top: 2.25em; padding-top: 2em; }

/* ---------- Rent History ---------- */
#orders .table-scroll { border: 1px solid var(--gray-200); border-radius: var(--radius-md); }
#orders .table-scroll > .auth-step-hint { margin: 0; padding: 0.8rem 1rem; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); font-size: 0.8rem; }
@media (min-width: 701px) {
  .account-orders-table th { background: var(--ink); color: var(--white); font-size: 0.72rem; letter-spacing: 0.08em; padding: 0.95em 0.9em; border-bottom: none; }
  .account-orders-table td { padding: 1em 0.9em; border-bottom: 1px solid var(--gray-100); }
  .account-orders-table tbody tr { transition: background 0.15s ease; }
  .account-orders-table tbody tr:hover { background: #FBFAF8; }
  .account-orders-table tbody tr:last-child td { border-bottom: none; }
  .account-orders-table td[data-label="Total"] { color: var(--gray-900); font-weight: 700; }
  .account-orders-table th, .account-orders-table td { padding-left: 0.7em; padding-right: 0.7em; }
  .account-orders-table td:nth-child(3) { white-space: normal; min-width: 96px; }
  .account-orders-table td:nth-child(2) { min-width: 150px; }
}
.account-orders-table .nowrap { white-space: nowrap; }
.order-number-link { text-decoration: none; letter-spacing: 0.02em; border-bottom: 1px dashed rgba(227,30,36,0.5); }
.order-number-link:hover { border-bottom-style: solid; }
.account-status { padding: 0.3em 0.85em; font-size: 0.74rem; letter-spacing: 0.03em; border: 1px solid transparent; }
.account-status.is-active { border-color: #BFE3CA; }
.account-status.is-done { border-color: var(--gray-200); }
.account-status.is-pending { border-color: #F2D58E; }
.account-status.is-declined { border-color: #F3B9BB; }
#orders .empty-state { border: 1px dashed var(--gray-200); border-radius: var(--radius-md); background: #FBFAF8; }

/* ---------- Cart ---------- */
.cart-page-head {
  background: radial-gradient(circle at 85% -40%, rgba(227,30,36,0.45), transparent 55%), var(--ink);
  color: var(--white); border-radius: var(--radius-lg); border-bottom: 3px solid var(--red);
  padding: 2.25rem 2.5rem; margin-bottom: 2rem;
}
.cart-page .cart-page-head h1 { color: var(--white); font-size: 3.2rem; line-height: 1; margin: 0 0 0.15em; }
.cart-page-head p { color: rgba(255,255,255,0.7); margin: 0; }
.cart-table { box-shadow: var(--shadow-card); }
.cart-page .table-scroll { box-shadow: var(--shadow-card); }
@media (min-width: 701px) {
  .cart-table th { background: var(--ink); color: var(--white); font-size: 0.72rem; letter-spacing: 0.08em; padding: 0.95em 1em; border-bottom: none; white-space: nowrap; }
  .cart-table td { padding: 1.1em 1em; vertical-align: middle; }
  .cart-table tbody tr:hover { background: #FBFAF8; }
  .cart-row-subtotal { color: var(--gray-900); font-weight: 700; }
}
.cart-product { font-weight: 600; color: var(--gray-900); }
.cart-product img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); }
.cart-remove { display: inline-flex; align-items: center; padding: 0.35em 0.8em; border-radius: 999px; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease; }
.cart-remove:hover { background: var(--danger-bg); border-color: #F3B9BB; }
.cart-summary { border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(0,0,0,0.08); border-top: 3px solid var(--red); padding: 1.75rem; }
.cart-summary h2 { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: 0.02em; margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--gray-200); }
.cart-summary dl { gap: 0.75rem 1rem; }
.cart-summary dt:last-of-type, .cart-summary dd:last-of-type {
  padding-top: 0.9rem; margin-top: 0.25rem; border-top: 1px dashed var(--gray-200);
  font-size: 1.1rem; color: var(--gray-900); font-weight: 800;
}
.cart-summary dd:last-of-type { color: var(--red); }
.cart-summary .checkout-days-hint { background: var(--gray-100); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; font-size: 0.78rem; }
.cart-summary .btn-checkout { padding: 0.95em 1.4em; letter-spacing: 0.02em; box-shadow: 0 6px 16px rgba(227,30,36,0.25); }

/* ---------- Checkout: prefilled-from-account note ---------- */
.checkout-prefill-note {
  font-size: 0.8rem; color: #1E7B3B; background: #E7F6EC; border: 1px solid #BFE3CA;
  border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: -0.25rem 0 1rem;
}

/* ---------- Shop: Price Range ---------- */
.price-filter { padding: 1.4rem 1.4rem 1.5rem; }
.price-filter .sidebar-title { margin-bottom: 0.1em; }
.price-filter-hint { font-size: 0.75rem; color: var(--gray-400); margin: 0 0 1rem; }
.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0.5rem; }
.price-inputs .price-field { padding: 0; gap: 0.3rem; min-width: 0; }
.price-inputs .price-field:first-child::after { content: none; }
.price-sep { color: var(--gray-400); font-weight: 700; padding-bottom: 0.6rem; }
.price-input-wrap {
  display: flex; align-items: center; background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.price-input-wrap:focus-within { background: var(--white); border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,30,36,0.12); }
.price-prefix { padding-left: 0.6rem; color: var(--red); font-weight: 800; font-size: 0.85rem; }
.price-filter .price-input-wrap input {
  border: none; background: transparent; box-shadow: none; padding: 0.55rem 0.5rem 0.55rem 0.3rem;
  min-width: 0; font-size: 0.88rem; -moz-appearance: textfield;
}
.price-filter .price-input-wrap input:focus { outline: none; }
.price-filter .price-input-wrap input::-webkit-outer-spin-button,
.price-filter .price-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-filter .btn-primary-sm {
  width: 100%; align-self: stretch; margin-top: 1rem; padding: 0.75em 1em; letter-spacing: 0.03em;
  box-shadow: 0 6px 14px rgba(227,30,36,0.22);
}

/* ---------- About ---------- */
.about-hero {
  text-align: center; margin: 2rem 0 3rem; padding: 3.75rem 1.5rem 3.5rem;
  background: radial-gradient(circle at 50% -30%, rgba(227,30,36,0.45), transparent 60%), var(--ink);
  color: var(--white); border-radius: var(--radius-lg); border-bottom: 3px solid var(--red);
}
.about-hero h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; letter-spacing: 0.02em; color: var(--white); margin: 0 0 0.3em; }
.about-hero p { max-width: 600px; margin: 0 auto; color: rgba(255,255,255,0.72); }
.about-kicker {
  display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 0.6rem;
}
.about-kicker::before { content: ""; width: 22px; height: 2px; background: var(--red); }
.about-section-head { text-align: center; margin-bottom: 1.75rem; }
.about-section-head h2, .about-story-copy h2 { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.05; letter-spacing: 0.02em; margin: 0; color: var(--gray-900); }
.about-story { gap: 3.5rem; margin-bottom: 3.5rem; }
.about-story-media { position: relative; }
.about-story-media img { width: 100%; box-shadow: 0 18px 40px rgba(0,0,0,0.15); }
.about-story-badge {
  position: absolute; right: -1rem; bottom: -1.25rem; display: flex; align-items: center; gap: 0.75rem;
  background: var(--ink); color: var(--white); border-radius: var(--radius-md); padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--red); box-shadow: 0 10px 24px rgba(0,0,0,0.25); max-width: 260px;
}
.about-story-badge-num { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--red); }
.about-story-badge-label { font-size: 0.78rem; line-height: 1.35; color: rgba(255,255,255,0.8); }
.about-story-copy h2 { margin-bottom: 0.6em; }
.about-story-copy p { line-height: 1.7; }

.about-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 3.5rem; }
.about-mission-card {
  background: var(--white); border: 1px solid var(--gray-200); border-top: 3px solid var(--red);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 2rem;
}
.about-mission-card h3 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.02em; margin: 0.9rem 0 0.35em; color: var(--gray-900); }
.about-mission-card p { margin: 0; line-height: 1.7; }
.about-mission-icon, .about-offer-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 12px; color: var(--white);
  background: linear-gradient(145deg, var(--red-bright), var(--red-dark)); box-shadow: 0 6px 14px rgba(227,30,36,0.25);
}

.about-offers { margin-bottom: 3.5rem; }
.about-offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.about-offer {
  display: flex; gap: 1rem; align-items: flex-start; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.4rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.about-offer:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); border-color: rgba(227,30,36,0.35); }
.about-offer-icon { width: 42px; height: 42px; }
.about-offer h3 { font-size: 1rem; margin: 0 0 0.3em; color: var(--gray-900); }
.about-offer p { font-size: 0.87rem; line-height: 1.6; margin: 0; }

.about-process { margin-bottom: 3.5rem; }
.about-steps {
  list-style: none; margin: 0; padding: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  background: var(--ink); border-radius: var(--radius-lg);
}
.about-step { position: relative; background: var(--ink-soft); border-radius: var(--radius-md); padding: 1.5rem 1.25rem; border-top: 3px solid var(--red); }
.about-step-num { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--red); }
.about-step h3 { color: var(--white); font-size: 1rem; margin: 0.6rem 0 0.35em; }
.about-step p { color: rgba(255,255,255,0.65); font-size: 0.85rem; line-height: 1.6; margin: 0; }

.about-values h2 { margin-bottom: 0; }
.about-cta { background: linear-gradient(135deg, var(--white), var(--gray-100)); box-shadow: var(--shadow-card); }
.about-cta p { max-width: 520px; margin: 0 auto 1.5rem; }
.about-cta .about-kicker { justify-content: center; }

@media (max-width: 960px) {
  .about-offers-grid { grid-template-columns: repeat(2, 1fr); }
  .about-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .account-nav { position: static; }
}
@media (max-width: 700px) {
  .account-page-head, .cart-page-head { padding: 1.75rem 1.4rem; }
  .account-page .account-page-head h1, .cart-page .cart-page-head h1 { font-size: 2.4rem; }
  .account-panel { padding: 1.4rem; }
  .about-story { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-story-badge { right: 0.75rem; }
  .about-mission, .about-offers-grid, .about-steps { grid-template-columns: 1fr; }
  .about-steps { padding: 1.25rem; }
  .about-section-head h2, .about-story-copy h2 { font-size: 2rem; }
}

/* ---------- Admin nav: 4 links (Receipts & Crew added) fit on phones as a 2×2 grid ---------- */
@media (max-width: 700px) {
  .admin-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Support: Sir Paul's Messenger + call / text (round 4) ---------- */
.support-card:target { scroll-margin-top: calc(var(--header-h, 96px) + 1rem); }
#contact { scroll-margin-top: calc(var(--header-h, 96px) + 1rem); }
.messenger-contact {
  display: flex; gap: 0.85rem; align-items: flex-start;
  margin: 1rem 0; padding: 0.95rem 1rem;
  border: 1px solid rgb(191, 219, 254); border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgb(239, 246, 255), rgb(245, 243, 255));
  color: var(--gray-900); text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
.messenger-contact:hover { box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18); transform: translateY(-1px); }
.messenger-contact-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, rgb(0, 132, 255), rgb(168, 85, 247));
}
.messenger-contact-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; font-size: 0.86rem; color: var(--gray-600); line-height: 1.45; }
.messenger-contact-text strong { color: var(--gray-900); font-size: 0.95rem; }
.messenger-contact-cta { color: rgb(37, 99, 235); font-weight: 700; margin-top: 0.15rem; }
.phone-contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  margin: 0 0 0.75rem; padding: 0.85rem 1rem;
  border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: rgb(240, 253, 244);
}
.phone-contact-label { width: 100%; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-600); }
.phone-contact-number { font-size: 1.2rem; font-weight: 800; color: var(--gray-900); text-decoration: none; letter-spacing: 0.02em; }
.phone-contact-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.phone-contact-actions .btn-secondary { padding: 0.5em 1em; font-size: 0.85rem; }
@media (max-width: 480px) {
  .phone-contact-actions { margin-left: 0; width: 100%; }
  .phone-contact-actions .btn-secondary { flex: 1 1 0; text-align: center; }
}

/* ---------- Order Confirmed page: even buttons, save as image / PDF, final receipt (round 4) ---------- */
.receipt-actions {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem;
  max-width: 980px; margin: 2.5rem auto 0; justify-content: stretch; align-items: stretch;
}
.receipt-actions > .btn-secondary, .receipt-actions > .btn-primary {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 48px; margin: 0; box-sizing: border-box; white-space: normal; line-height: 1.2;
  transform: none;
}
.receipt-actions > button:disabled { opacity: 0.6; cursor: progress; }
.receipt-save-status { min-height: 1.2em; margin: 0.75rem 0 0; text-align: center; font-size: 0.85rem; color: rgb(22, 163, 74); }
.receipt-save-status.is-error { color: var(--danger); }
@media (max-width: 860px) {
  .receipt-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-actions > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .receipt-actions { grid-template-columns: 1fr; }
}
.receipt-final-note {
  margin: 1rem auto 0; padding: 0.55em 0.9em; max-width: 480px;
  border-radius: var(--radius-md); background: rgb(245, 243, 255); border: 1px solid rgb(221, 214, 254);
  font-size: 0.85rem; color: var(--gray-900);
}
.receipt-final-item > span:first-child { display: flex; flex-direction: column; gap: 0.1rem; }
.receipt-final-calc { color: var(--gray-600); font-size: 0.78rem; }
.receipt-totals dd, .receipt-pay-status { text-align: right; }
.receipt-pay-status.is-paid { color: rgb(22, 163, 74); }
.receipt-pay-status.is-unpaid { color: var(--gray-600); }
/* Off-screen copy used for Save as Image / PDF (one narrow "receipt paper" column) */
.receipt-export-stage {
  position: absolute; top: 0; left: -12000px; width: 560px; padding: 20px 24px; box-sizing: border-box;
  background: #fff; pointer-events: none;
}
.receipt-export-stage .receipt-hero { margin-bottom: 1rem; }
.receipt-export-stage .receipt-hero h1 { font-size: 1.6rem; }
.receipt-export-stage .receipt-layout { display: block; }
.receipt-export-stage .receipt-panel { border: 0; padding: 0; margin-bottom: 1rem; box-shadow: none; }
.receipt-export-stage .receipt-details dd,
.receipt-export-stage .receipt-items li span:first-child { overflow-wrap: anywhere; }

/* ---------- Input rules: phone box that isn't 09 + 9 digits (round 4) ---------- */
input.input-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25); }
.input-rule-hint { display: block; margin-top: 0.3rem; font-size: 0.76rem; font-weight: 600; color: var(--danger); }

/* ---------- Admin Products: 1 to 3 photos per product, drag & drop (round 4) ---------- */
.product-thumb.is-dragover, .add-product-photo.is-dragover { border-color: rgb(59, 130, 246); border-style: solid; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); }
.product-thumb.is-dragover .product-thumb-badge { opacity: 1; }
.photos-dialog { width: min(620px, calc(100% - 2rem)); }
.photo-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.photo-slot { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.photo-slot-label { font-size: 0.78rem; font-weight: 700; color: var(--gray-600); }
.photo-slot[data-slot="0"] .photo-slot-label { color: var(--gray-900); }
.photo-slot-drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--gray-100); border: 2px dashed var(--gray-400); border-radius: var(--radius-md);
  color: var(--gray-600); font-size: 0.78rem; font-weight: 600; line-height: 1.35; text-align: center;
}
.photo-slot.is-filled .photo-slot-drop { border-style: solid; border-color: var(--gray-200); background: #fff; }
.photo-slot-drop img { width: 100%; height: 100%; object-fit: contain; }
.photo-slot-drop:hover, .photo-slot-drop:focus-visible { border-color: var(--ink); }
.photo-slot.is-filled .photo-slot-hint {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.3em 0.2em;
  background: rgba(11, 11, 12, 0.72); color: #fff; font-size: 0.68rem;
  opacity: 0; transition: opacity .15s;
}
.photo-slot.is-filled .photo-slot-drop:hover .photo-slot-hint,
.photo-slot.is-filled .photo-slot-drop:focus-visible .photo-slot-hint { opacity: 1; }
@media (hover: none) { .photo-slot.is-filled .photo-slot-hint { opacity: 1; } }
.photo-slot.is-dragover .photo-slot-drop { border-color: rgb(59, 130, 246); border-style: solid; background: rgb(239, 246, 255); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); }
.photo-slot-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 1.9rem; }
.photo-slot-btn {
  flex: 1 1 auto; padding: 0.35em 0.5em; font-size: 0.74rem; font-weight: 700; cursor: pointer;
  background: #fff; color: var(--gray-900); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
}
.photo-slot-btn:hover { border-color: var(--ink); }
.photo-slot-btn.is-remove { color: var(--danger); }
.photo-slot-btn:disabled, .photo-slot-drop:disabled { opacity: 0.6; cursor: progress; }
.photo-pick-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.photo-pick-list:empty { display: none; }
.photo-pick { position: relative; width: 96px; height: 96px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.photo-pick img { width: 100%; height: 100%; object-fit: contain; }
.photo-pick-tag { position: absolute; left: 0; bottom: 0; padding: 0.15em 0.45em; background: rgba(11, 11, 12, 0.72); color: #fff; font-size: 0.65rem; font-weight: 700; border-top-right-radius: var(--radius-sm); }
.photo-pick-remove {
  position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; line-height: 1;
  border: none; border-radius: 50%; background: rgba(11, 11, 12, 0.72); color: #fff; font-size: 1rem; cursor: pointer;
}
.photo-pick-list:not(:empty) + .add-product-photo { height: 96px; margin-top: 0.5rem; }
@media (max-width: 480px) {
  .photo-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   CART — item checkboxes + roomier table (no sideways scrolling)
   ========================================================================== */
.cart-select-box, .cart-select-all { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; margin: 0; }
.cart-table .cart-select, .cart-table .cart-select-th { width: 1%; padding-right: 0; text-align: center; vertical-align: middle; }
/* Order Summary sits BESIDE the table and stays floating (sticky) while you
   scroll, so the prices are always visible. The table is compacted so it fits
   its column without scrolling sideways. Below 1100px there's no room for two
   columns, so the summary stacks and sticks to the bottom of the screen
   instead (compact version) -- the totals never need a scroll to be seen. */
.cart-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.cart-summary { position: sticky; top: 90px; max-width: 100%; width: auto; margin-left: 0; padding: 1.4rem; }
.cart-summary h2 { font-size: 1.6rem; }
@media (min-width: 701px) {
  .cart-page .table-scroll { overflow-x: visible; }
  .table-scroll .cart-table { min-width: 0; width: 100%; table-layout: auto; }
  .cart-table th, .cart-table td { padding-left: 0.65em; padding-right: 0.65em; font-size: 0.85rem; }
  .cart-table th { white-space: nowrap; letter-spacing: 0.04em; font-size: 0.68rem; }
  .cart-table .cart-product { gap: 0.55rem; }
  .cart-table .cart-product img { width: 48px; height: 48px; }
  .cart-row td input[type="number"] { width: 36px; }
  .cart-table .qty-stepper button { width: 28px; }
  .cart-table td[data-label="Price / Day"], .cart-table td[data-label="Subtotal"] { white-space: nowrap; }
  .cart-table .cart-remove { padding: 0.3em 0.55em; }
}
@media (max-width: 1100px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: sticky; top: auto; bottom: 0; z-index: 20; width: 100%; max-width: none; padding: 0.9rem 1.1rem; }
  .cart-summary h2, .cart-summary .checkout-days-hint, .cart-summary .btn-secondary { display: none; }
  .cart-summary dl { margin-bottom: 0.75rem; }
  .cart-summary a { margin-bottom: 0; }
}
@media (max-width: 700px) {
  .cart-table td.cart-select { flex-direction: row; align-items: center; }
}


/* ---------- Optional profile photo (account, header, register pop-up) ---------- */
.account-avatar.has-photo, .header-avatar.has-photo, .reg-photo-circle.has-photo {
  background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent;
}
.account-avatar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.account-avatar-btn {
  padding: 0.35em 0.9em; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 0.78rem; font-weight: 700; border: 1px solid var(--red); background: var(--red); color: var(--white);
}
.account-avatar-btn.is-ghost { background: transparent; color: var(--gray-600); border-color: var(--gray-200); }
.account-avatar-btn[hidden] { display: none; }
.account-avatar-msg { margin: 0.4em 0 0; font-size: 0.78rem; color: var(--red); }
.account-avatar-msg:empty { display: none; }

.account-link .header-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(145deg, var(--red-bright), var(--red-dark));
  color: var(--white); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
}

.reg-photo { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 0.4rem; }
.reg-photo-circle {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; cursor: pointer; padding: 0;
  border: 2px solid var(--gray-400);
  background: linear-gradient(145deg, var(--red-bright), var(--red-dark));
  color: var(--white); font-family: inherit; font-size: 1.15rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.reg-photo-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.reg-photo-add, .reg-photo-remove {
  padding: 0; border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 0.85rem; font-weight: 700; color: var(--white); text-decoration: underline;
}
.reg-photo-add small { font-weight: 400; color: var(--gray-400); text-decoration: none; }
.reg-photo-remove { font-weight: 400; color: var(--gray-400); font-size: 0.78rem; }
.reg-photo-remove[hidden] { display: none; }
.reg-photo-err { margin: 0; }

/* Header photo: the shorthand `background` on .account-link .header-avatar was resetting
   background-size/position, so the photo showed at full size (top-left crop). Fit it to the circle. */
.account-link .header-avatar { flex-shrink: 0; overflow: hidden; background-clip: padding-box; }
.account-link .header-avatar.has-photo {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* ==========================================================================
   INDIERECTORY — directors list. Header reuses the About hero (red glow banner).
   ========================================================================== */
.indie-page { padding-top: 0; }
.dir-list { display: flex; flex-direction: column; gap: 1.25rem; max-width: 960px; margin: 0 auto 2rem; }
.dir-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; scroll-margin-top: 165px;
}
.dir-card:hover { border-color: var(--red); box-shadow: var(--shadow-card); }
.dir-card-head { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-200); }
.dir-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--white); font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.02em;
}
.dir-card-text { flex: 1; min-width: 0; }
.dir-card-text h2 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.01em; line-height: 1.1; margin: 0; }
.dir-card-text p { margin: 0.1em 0 0; font-size: 0.85rem; color: var(--gray-600); }
.dir-count {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: var(--gray-600); background: var(--gray-100); padding: 0.25em 0.7em; border-radius: 999px;
}
.dir-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; padding: 1.25rem; }
.dir-project { display: block; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.dir-poster { display: block; aspect-ratio: 2 / 3; background: var(--ink); overflow: hidden; }
.dir-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.dir-project:hover .dir-poster img { transform: scale(1.04); }
.dir-project-info { display: block; padding: 0.8rem 0.9rem 1rem; }
.dir-project-meta { display: block; font-size: 0.72rem; font-weight: 700; color: var(--red); letter-spacing: 0.04em; text-transform: uppercase; }
.dir-project h3 { font-size: 1.02rem; margin: 0.2em 0 0.3em; }
.dir-project p { font-size: 0.82rem; color: var(--gray-600); margin: 0; }
@media (max-width: 640px) {
  .dir-card-head { padding: 0.9rem 1rem; }
  .dir-count { display: none; }
  .dir-projects { grid-template-columns: repeat(2, 1fr); padding: 1rem; gap: 0.75rem; }
}

/* ==========================================================================
   INDIERECTORY — collaborations list (plain layout: cover + description per row)
   ========================================================================== */
.collab-list { display: flex; flex-direction: column; gap: 2.5rem; max-width: 1000px; margin: 0 auto 2.5rem; }
.collab { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.collab:nth-child(even) .collab-cover { order: 2; }
.collab-cover {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink); border-bottom: 3px solid var(--red); box-shadow: var(--shadow-card);
}
.collab-cover > img, .collab-cover-art { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.collab-cover-art {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% -20%, rgba(227,30,36,0.5), transparent 62%), var(--ink);
}
.collab-cover:hover > img, .collab-cover:hover .collab-cover-art { transform: scale(1.03); }
.collab-cover-logo { position: absolute; top: 1rem; left: 1rem; width: 44px; height: auto; opacity: 0.95; }
.collab-cover-num { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 9rem); line-height: 1; letter-spacing: 0.02em; color: rgba(255,255,255,0.12); }
.collab-cover-label {
  position: absolute; left: 1rem; bottom: 0.9rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.75);
}
.collab-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--red); color: var(--white);
  box-shadow: 0 8px 22px rgba(227,30,36,0.45); transition: transform .2s ease;
}
.collab-cover:hover .collab-play { transform: translate(-50%, -50%) scale(1.08); }
.collab-kicker { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 0.4rem; }
.collab-copy h2 { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.05; letter-spacing: 0.02em; margin: 0 0 0.3em; }
.collab-by { margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--gray-600); }
.collab-desc { margin: 0 0 0.8rem; }
.collab-gear { margin: 0 0 1.25rem; font-size: 0.88rem; color: var(--gray-600); }
@media (max-width: 760px) {
  .collab { grid-template-columns: 1fr; gap: 1.1rem; }
  .collab:nth-child(even) .collab-cover { order: 0; }
  .collab-copy h2 { font-size: 2rem; }
}

/* ==========================================================================
   RESPONSIVE FIXES — mobile + desktop pass
   (kept in one block at the end so it is easy to review / revert)
   ========================================================================== */

/* Safety net: media never forces the page wider than the screen */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, svg { max-width: 100%; }
.services-grid > *, .values-grid > *, .collab > * { min-width: 0; }

/* Product page — rental dates.
   Mobile / tablet-landscape: label + date field, one row each (no overflow).
   Wide single-column tablet and large desktop: Start + End side by side. */
.rental-dates {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem 1rem;
  align-items: center;
}
.rental-dates input[type="date"] { width: 100%; min-width: 0; box-sizing: border-box; }
@media (min-width: 701px) and (max-width: 960px), (min-width: 1280px) {
  .rental-dates { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
}

/* Services — one card per row on phones (2 columns was too tight at 390px) */
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { padding: 1.35rem; }
}

/* About — value cards: stack on very small phones */
@media (max-width: 400px) {
  .values-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Big page headings must fit narrow phones (e.g. "INDIERECTORY") */
@media (max-width: 480px) {
  .about-hero h1 { font-size: clamp(1.6rem, 9vw, 2.8rem); letter-spacing: 0.01em; }
  .services-page .page-hero h1 { font-size: clamp(2.2rem, 12vw, 3rem); }
}

/* ==========================================================================
   SEARCH BAR — mobile / tablet only (<= 960px, same breakpoint as the hamburger)
   Collapsed circle that expands into the full box on click.
   Desktop (>= 961px) keeps the original always-visible search box.
   (JS in main.js → initSearch toggles .is-open on the form)
   ========================================================================== */
@media (max-width: 960px) {
  .search-bar {
    --sb-h: 40px;
    --sb-w: 274px;
    position: relative;
    flex: 0 0 var(--sb-h);
    width: var(--sb-h);
    height: var(--sb-h);
    min-width: 0;
    max-width: none;
    margin-left: auto;           /* keeps the circle on the right edge of its row */
    z-index: 30;
  }
  .search-bar input {
    position: absolute;
    top: 0;
    right: calc(var(--sb-h) / 2);   /* starts hidden underneath the circle … */
    height: 100%;
    width: 0;                       /* … and grows to the left */
    box-sizing: border-box;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-radius: 999px;
    border-right: none;
    transition: width .45s cubic-bezier(.22,1,.36,1),
                padding .45s cubic-bezier(.22,1,.36,1),
                opacity .25s ease .05s,
                visibility 0s linear .45s;   /* hide from tab order once closed */
  }
  .search-bar button {
    position: absolute;
    top: 0; right: 0;
    z-index: 2;
    width: var(--sb-h);
    height: var(--sb-h);
    box-sizing: border-box;
    border: 1px solid #333;
    border-radius: 50%;
    transition: border-radius .45s cubic-bezier(.22,1,.36,1),
                width .45s cubic-bezier(.22,1,.36,1),
                background .2s ease,
                transform .15s ease;
  }
  .search-bar button:active { transform: scale(.92); }

  /* open state */
  .search-bar.is-open input {
    width: min(var(--sb-w), calc(100vw - 8vw - var(--sb-h)));
    padding: .5em calc(var(--sb-h) / 2 + .5em) .5em 1.1em;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s, 0s;
  }
  .search-bar.is-open button {
    width: 46px;
    border-radius: 0 999px 999px 0;
  }
}

@media (max-width: 640px) {
  .auth-links { margin-left: 0; }   /* cart stays beside the menu button; circle sits at far right */
  .search-bar.is-open input { width: min(var(--sb-w), calc(100vw - 8vw - var(--sb-h) - 48px)); }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .search-bar input, .search-bar button { transition: none; }
}

/* ==========================================================================
   HEADER LOGO — same design as desktop, scaled down on tablet + phone
   (icon, wide-spaced title, one-line subtitle of the same width — only the size changes).
   Scoped to the public .site-header; desktop, login and admin are untouched.
   Desktop reference: icon 48px · gap 12px · title 20.8px/.44em · subtitle 11.2px/.27em
   ========================================================================== */
@media (max-width: 960px) {            /* tablet: ~85% of desktop, one row with the menu/search/cart */
  .site-header .logo { gap: 10px; flex: 0 1 auto; min-width: 0; }
  .site-header .logo-icon { width: 41px; height: 41px; flex-shrink: 0; }
  .site-header .logo-text { min-width: 0; }
  .site-header .logo-title { font-size: 17.7px; letter-spacing: 0.44em; white-space: nowrap; }
  .site-header .logo-subtitle { font-size: 9.5px; letter-spacing: 0.27em; white-space: nowrap; }
}
@media (max-width: 640px) {            /* phone: logo + search circle share the top row.
                                          The logo is scaled (same proportions as desktop) to fill whatever
                                          width is left after the 40px search circle; capped at desktop size. */
  .site-header .logo { flex: 0 1 auto; gap: min(12px, calc(2.65vw - 1.55px)); order: 0; }
  .site-header .logo-icon { width: min(48px, calc(10.59vw - 6.21px)); height: min(48px, calc(10.59vw - 6.21px)); }
  .site-header .logo-title { font-size: min(20.8px, calc(4.59vw - 2.69px)); }
  .site-header .logo-subtitle { font-size: min(11.2px, calc(2.47vw - 1.45px)); }

  /* order: [logo][search]  /  [menu][cart] */
  .site-header .search-bar { order: 1; }
  .site-header .nav-toggle { order: 2; }
  .site-header .auth-links { order: 3; }

}

/* ==========================================================================
   HEADER — TABLET (641px–960px) = SAME AS MOBILE
   Layers in order: desktop (base) → tablet → phone. Tablet now reuses the phone header:
   row 1 = [logo][search circle]   row 2 = [menu][cart]   (menu list drops below when opened).
   Spacing/padding match the phone header, so there is no empty band under it.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 960px) {
  .site-header { padding: 0.75rem 4vw; gap: 0.75rem; row-gap: 0.75rem; }
  .header-notif-panel { right: 3vw; left: auto; }
  .auth-links { gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.4rem; margin-left: 0; }
  .site-header .logo { flex: 0 1 auto; gap: 12px; order: 0; }
  .site-header .logo-icon { width: 48px; height: 48px; }
  .site-header .logo-title { font-size: 20.8px; }
  .site-header .logo-subtitle { font-size: 11.2px; }
  .site-header .search-bar { order: 1; }
  .site-header .nav-toggle { order: 2; }
  .site-header .auth-links { order: 3; }
  .site-header .main-nav.is-open { margin-top: 0; }
}

/* ==========================================================================
   HEADER — DESKTOP, ONE ROW WHILE RESIZING (961px–1359px)
   Order of the layers: desktop (base) → tablet (<=960) → phone (<=640).
   Between 961px and ~1360px the desktop header used to wrap: the search box dropped
   to a second row and left an empty band under the header. Here the header stays on
   ONE row and everything scales smoothly with the viewport width instead
   (logo, nav spacing, search width). At >= 1360px it is exactly the original desktop.
   ========================================================================== */
@media (min-width: 961px) and (max-width: 1359px) {
  .site-header {
    flex-wrap: nowrap;
    gap: clamp(0.5rem, 1.5vw, 2rem);
    padding-left: 2.2vw;
    padding-right: 2.2vw;
  }
  .site-header .logo { flex: 0 0 auto; gap: clamp(7px, 0.88vw, 12px); }
  .site-header .logo-icon { width: clamp(34px, 3.53vw, 48px); height: clamp(34px, 3.53vw, 48px); }
  .site-header .logo-title { font-size: clamp(14px, 1.53vw, 20.8px); }
  .site-header .logo-subtitle { font-size: clamp(7.6px, 0.82vw, 11.2px); }

  .site-header .main-nav { flex: 1 1 auto; min-width: 0; }
  .site-header .main-nav ul { gap: clamp(0.55rem, 1.29vw, 1.75rem); flex-wrap: nowrap; }
  .site-header .main-nav a { font-size: clamp(0.78rem, 1.1vw, 0.95rem); white-space: nowrap; }
  .site-header .nav-indierectory { padding-left: clamp(0.5rem, 1vw, 0.85rem); padding-right: clamp(0.5rem, 1vw, 0.85rem); }

  .site-header .search-bar { flex: 0 1 clamp(130px, 19.8vw, 270px); min-width: 130px; max-width: 270px; }
  .site-header .search-bar input { min-width: 0; font-size: clamp(0.78rem, 1.1vw, 0.95rem); }
  .site-header .auth-links { flex: 0 0 auto; gap: 0.6rem; }
}

/* ==========================================================================
   SEARCH — FLOATS OVER THE LOGO ROW (tablet + phone, <= 960px)
   The opened search expands to the left on the same row and simply covers the logo
   text (opaque, with a shadow). The title + subtitle are NOT faded or hidden — they stay
   in place underneath and show again as soon as the search closes. Capped at desktop width.
   ========================================================================== */
@media (max-width: 960px) {
  .site-header .search-bar.is-open input {
    background: var(--ink-soft);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  }
}