/* ==========================================================================
   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); }
.quick-contact { border: none; padding: 0; cursor: pointer; }
.quick-contact-label {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--white); color: var(--ink);
  font-size: 0.82rem; font-weight: 700; white-space: nowrap;
  padding: 0.45rem 0.8rem; border-radius: 999px;
  box-shadow: var(--shadow-card);
  pointer-events: none;
}
.quick-contact-label::before {
  content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--white);
}

/* ---------- 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 .jaimes-j { opacity: 0.8; transition: opacity .15s ease, transform .15s ease; }
.ai-chat-toggle:hover .jaimes-j { opacity: 1; transform: translateY(-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: linear-gradient(135deg, #0B0B0C 0%, #1d1d21 100%); color: var(--white);
  padding: 0.9rem 1.1rem; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--red);
}
.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-identity { min-width: 0; }
.ai-chat-titleline { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.ai-chat-header strong {
  display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1;
  font-weight: 400; letter-spacing: 0.1em; white-space: nowrap;
}
.ai-chat-name-ai { color: var(--red-bright); }
.ai-chat-status {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 0.68rem; font-weight: 600; color: #6FCF97;
  background: rgba(111,207,151,0.14); padding: 0.2rem 0.55rem; border-radius: 999px;
}
.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; }

/* JAIME / Admin separate threads */
.ai-chat-header-actions { display: flex; align-items: center; gap: 0.25rem; }
.ai-chat-min {
  background: none; border: none; cursor: pointer; padding: 0.35rem; border-radius: 8px;
  display: inline-flex; color: rgba(255,255,255,0.75); transition: background .15s ease, color .15s ease;
}
.ai-chat-min:hover { color: var(--white); background: rgba(255,255,255,0.12); }
.ai-chat-avatar.is-ai, .ai-chat-bubble-avatar.is-ai {
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
}
.ai-chat-titleblock { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ai-chat-role {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray-400); line-height: 1;
}
.ai-chat-avatar.is-admin, .ai-chat-bubble-avatar.is-admin {
  background: #3b3b42; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.ai-chat-status.is-offline { color: var(--gray-400); background: rgba(255,255,255,0.1); }
.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-contact-options { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
a.ai-chat-action { display: inline-block; text-decoration: none; }
.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); }
.ai-chat-form button[type="submit"]:disabled { opacity: .5; cursor: default; background: var(--red); }

/* JAIME: New chat button, formatted answers, Continue / Retry, tool hints */
.ai-chat-new {
  background: none; border: none; cursor: pointer; padding: 0.35rem; border-radius: 8px;
  display: inline-flex; color: rgba(255,255,255,0.75); transition: background .15s ease, color .15s ease;
}
.ai-chat-new:hover { color: var(--white); background: rgba(255,255,255,0.12); }
.ai-chat-new:disabled { opacity: .4; cursor: default; background: none; }
.ai-chat-bubble { overflow-wrap: anywhere; }
.ai-chat-row-bot:has(.ai-md) { padding-right: 4%; }
.ai-md { min-width: 0; }
.ai-md p { margin: 0 0 0.55em; }
.ai-md p:last-child, .ai-md ul:last-child, .ai-md ol:last-child, .ai-md pre:last-child { margin-bottom: 0; }
.ai-md ul, .ai-md ol { margin: 0 0 0.55em; padding-left: 1.25em; }
.ai-md li { margin: 0.15em 0; }
.ai-md ul li { list-style: disc; }
.ai-md ol li { list-style: decimal; }
.ai-md a { color: var(--red); text-decoration: underline; }
.ai-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8em;
  background: var(--gray-100); border-radius: 4px; padding: 0.1em 0.35em;
}
.ai-md pre.ai-md-code {
  margin: 0 0 0.55em; padding: 0.6em 0.75em; border-radius: 8px; overflow-x: auto;
  background: #1A1A1C; color: #F2F2F2; font-size: 0.8rem; line-height: 1.45;
}
.ai-md pre.ai-md-code code { background: none; padding: 0; color: inherit; font-size: inherit; white-space: pre; }
.ai-md .ai-md-heading { margin-top: 0.3em; }
.ai-chat-followup-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ai-chat-followup-note { width: 100%; font-size: 0.75rem; color: var(--gray-400); }
.ai-chat-typing-row { align-items: center; }
.ai-chat-typing-hint { font-size: 0.72rem; color: var(--gray-400); }
@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, .receipt-content .receipt-hero h1 { font-family: var(--font-display); font-size: 3.4rem; line-height: 1.05; }
.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, .ai-chat-head,
  .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: 2.4rem; }
  .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 .ai-chat-head, 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: 2.4rem; }
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; }
/* plain look: no color coding by status */
.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); background: var(--white); border-left-color: var(--gray-200); }

@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; line-height: 1.35; margin: 0.5rem 0 0.35rem; 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; }

.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.83rem;
  min-height: 57px; padding: 0.44rem 0.55rem 0.44rem 0.5rem;
  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: 42px; height: 42px; 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.94rem; color: var(--white); }
.float-login-text span { font-size: 0.79rem; 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.94rem; 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.5rem 0 0; font-size: 0.78rem; line-height: 1.35; 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.45rem; }
.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); }
/* Total is the only row: the header line already sits above it, so skip the dashed one */
.cart-summary dt:only-of-type, .cart-summary dd:only-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.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: 2.4rem; }
.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.5rem; line-height: 1.35; 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; }
}

/* Minimized chat bubbles (Messenger-style) */
.ai-chat-head {
  position: fixed; right: 20px; z-index: 999;
  width: 52px; height: 52px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: linear-gradient(135deg, #0B0B0C, #232328); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), inset 0 0 0 2px var(--red);
  transition: transform .15s ease;
  animation: ai-head-in .2s ease;
}
.ai-chat-head:hover { transform: translateY(-2px) scale(1.04); }
.ai-chat-head-x {
  position: absolute; top: -5px; left: -5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); color: var(--gray-900); font-size: 13px; line-height: 18px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); opacity: 0; transition: opacity .15s ease;
}
.ai-chat-head:hover .ai-chat-head-x { opacity: 1; }
.ai-chat-head-dot {
  display: none; position: absolute; top: 1px; right: 1px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--red-bright); border: 2px solid var(--white);
}
.ai-chat-head.has-unread .ai-chat-head-dot { display: block; }
@keyframes ai-head-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

/* ==========================================================================
   DESKTOP / LAPTOP HEADER AUTO-FIT
   Keeps logo, nav, search and the icons on ONE row on laptop screens
   (no need to zoom out to 90%). Sizes scale with the window width.
   ========================================================================== */
@media (min-width: 961px) {
  .site-header { flex-wrap: nowrap; gap: clamp(0.75rem, 1.6vw, 2rem); padding-left: 2.5vw; padding-right: 2.5vw; }
  .logo { flex-shrink: 0; gap: clamp(0.5rem, 0.8vw, 0.75rem); }
  .logo-icon { width: clamp(38px, 3.4vw, 48px); height: clamp(38px, 3.4vw, 48px); }
  .logo-title { font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: clamp(0.18em, 0.32vw, 0.44em); white-space: nowrap; }
  .logo-subtitle { font-size: clamp(0.52rem, 0.75vw, 0.7rem); letter-spacing: clamp(0.1em, 0.2vw, 0.27em); white-space: nowrap; }
  .main-nav { flex: 1 1 auto; min-width: 0; }
  .main-nav ul { gap: clamp(0.7rem, 1.4vw, 1.75rem); flex-wrap: nowrap; white-space: nowrap; }
  .main-nav a { font-size: clamp(0.78rem, 1vw, 0.9rem); }
  .nav-indierectory { padding: 0.4em clamp(0.6em, 0.8vw, 0.9em) !important; }
  .search-bar { min-width: 130px; flex: 0 1 clamp(150px, 20vw, 320px); }
  .auth-links { flex-shrink: 0; gap: clamp(0.6rem, 1vw, 1rem); }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .logo-subtitle { display: none; }
  .search-bar { flex-basis: 140px; min-width: 110px; }
  .nav-badge { display: none; }
}

/* ==========================================================================
   MY ACCOUNT — profile & saved address layout polish
   ========================================================================== */
#profile .account-section-title { margin-bottom: 0.35rem; }
#profile .auth-step-hint { margin: 0 0 1.1rem; padding-left: calc(34px + 0.65rem); line-height: 1.5; }
#profile .account-form-grid {
  background: #FBFAF8; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  padding: 1.35rem 1.4rem; gap: 1.1rem 1.5rem; align-items: start;
}
#profile .account-form-grid > div > label { margin-top: 0; }
#profile .account-form-grid input,
#profile .account-form-grid textarea { width: 100%; margin: 0; }
#profile .account-form-grid textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
#profile .account-form-grid .full-width:last-child {
  display: flex; justify-content: flex-end; margin: 0.15rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--gray-200);
}
#profile .account-form-grid .full-width:last-child button { margin: 0; min-width: 150px; }
#profile .account-form-grid .full-width[style] { margin-top: 0.15rem !important; padding-top: 1.1rem; border-top: 1px solid var(--gray-200); }
#profile h2.account-subheading { margin-top: 2rem; padding-top: 0; border-top: none; }
#profile h2.account-subheading::before { content: none; }
#profile .account-profile-head { margin-bottom: 2rem; }
@media (max-width: 700px) {
  #profile .auth-step-hint { padding-left: 0; }
  #profile .account-form-grid { padding: 1.1rem; }
  #profile .account-form-grid .full-width:last-child button { width: 100%; }
}

/* Logged-in header (extra bell/avatar icons): let the search box give up
   space instead of overlapping the nav. */
@media (min-width: 961px) {
  .main-nav { flex: 1 0 auto; min-width: max-content; }
  .search-bar { min-width: 0; flex: 0 1 clamp(150px, 20vw, 320px); }
  .search-bar input { min-width: 0; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .search-bar { flex-basis: 140px; min-width: 0; }
}

/* ---------- Receipt card (image layout): black header, items table, totals ---------- */
.receipt-sheet {
  width: min(100%, 560px); margin: 0 auto; background: #fff; color: #111;
  font-family: Arial, Helvetica, sans-serif; border: 1px solid #d9d9d9; box-sizing: border-box; overflow: hidden;
}
.receipt-sheet * { box-sizing: border-box; }
.rs-head { background: #000; color: #fff; padding: 18px 20px 20px; font-size: 34px; line-height: 1; letter-spacing: 0.5px; text-align: left; }
.rs-head-bold { font-weight: 800; }
.rs-head-thin { font-weight: 300; }
.rs-info { padding: 12px 20px 10px; font-size: 15px; display: grid; gap: 6px; }
.rs-info > div { display: grid; grid-template-columns: 78px 1fr; align-items: baseline; }
.rs-info span { font-weight: 400; color: #222; }
.rs-info b { font-weight: 400; text-transform: uppercase; overflow-wrap: anywhere; }
.rs-items-bar { background: #111; color: #fff; text-align: center; font-weight: 700; font-size: 14px; padding: 4px 0; }
.rs-cols, .rs-row { display: grid; grid-template-columns: 1fr 76px 40px 84px; gap: 6px; padding: 0 20px; }
.rs-cols { background: #4a4a4a; color: #fff; font-weight: 700; font-size: 13px; padding-top: 5px; padding-bottom: 5px; }
.rs-cols span:not(:first-child), .rs-row span:not(:first-child) { text-align: right; }
.rs-rows { padding: 8px 0 14px; }
.rs-row { font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
.rs-name { overflow-wrap: anywhere; }
.rs-name small { display: block; font-size: 11px; color: #555; }
.rs-totals { padding: 6px 20px 18px; }
.rs-trow { display: flex; justify-content: flex-end; gap: 24px; font-size: 13px; padding: 3px 0; }
.rs-trow span:first-child { min-width: 120px; text-align: right; }
.rs-trow span:last-child { min-width: 84px; text-align: right; }
.rs-grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 2px solid #333; font-size: 22px; font-weight: 800; }
.rs-grand b { font-weight: 800; }
.receipt-export-stage .receipt-sheet { width: 560px; border: 0; }
@media (max-width: 480px) {
  .rs-head { font-size: 26px; }
  .rs-cols, .rs-row { grid-template-columns: 1fr 64px 32px 72px; padding: 0 14px; }
  .rs-info, .rs-totals { padding-left: 14px; padding-right: 14px; }
}
.receipt-export-stage { padding: 0; width: 560px; }
.receipt-sheet .rs-totals.receipt-totals { display: block; margin: 0; border: 0; padding: 6px 20px 18px; gap: 0; }
.receipt-sheet .rs-info b.receipt-dates { text-transform: none; }
.rs-trow span:first-child { min-width: 0; flex: 1; }
@media (max-width: 480px) { .receipt-sheet .rs-totals.receipt-totals { padding-left: 14px; padding-right: 14px; } }

/* Receipt: bigger header title, centered buttons */
.rs-head { font-size: 54px; padding: 20px 20px 22px; white-space: nowrap; }
@media (max-width: 480px) { .rs-head { font-size: 8.2vw; padding: 16px 14px 18px; } }
.receipt-export-stage .rs-head { font-size: 54px; padding: 20px 20px 22px; }
.receipt-export-stage .rs-cols, .receipt-export-stage .rs-row { grid-template-columns: 1fr 76px 40px 84px; padding-left: 20px; padding-right: 20px; }
.receipt-export-stage .rs-info { padding-left: 20px; padding-right: 20px; }
.receipt-export-stage .receipt-sheet .rs-totals.receipt-totals { padding-left: 20px; padding-right: 20px; }
.receipt-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0.75rem; max-width: 980px; }
.receipt-actions > .btn-secondary, .receipt-actions > .btn-primary { width: auto; min-width: 170px; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (max-width: 480px) { .receipt-actions > .btn-secondary, .receipt-actions > .btn-primary { width: 100%; } }


/* ---------- Receipt header: bold "JJS CINE" + light "RENTALS", centered, fills the bar evenly ---------- */
.rs-head, .receipt-export-stage .rs-head {
  text-align: center; white-space: nowrap; overflow: hidden;
  padding: 16px 20px 18px; line-height: 1; letter-spacing: 0; font-size: 56px;
}
.rs-head-line { display: inline-block; white-space: nowrap; }
.rs-head-bold { font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; }
.rs-head-thin { font-family: 'Roboto', Arial, sans-serif; font-weight: 300; }
@media (max-width: 480px) { .rs-head { padding: 14px 14px 16px; } }
/* wider label column so LOCATION fits */
.rs-info > div, .receipt-export-stage .rs-info > div { grid-template-columns: 92px 1fr; }
.receipt-sheet .rs-info b.receipt-time, .receipt-sheet .rs-info b.receipt-location { text-transform: none; }


/* ---------- Client receipt paper: same look as the admin receipt (copied from admin-receipts.css) ---------- */
.rc-doc { background: #FFFFFF; color: #1A1A1A; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; }
.rc-export-stage { position: absolute; top: 0; left: -12000px; width: 420px; pointer-events: none; }
.rc-doc-export { width: 420px; max-width: none; box-shadow: none; font-size: 13px; }

.rcd-head { text-align: center; padding: 24px 22px 14px; border-bottom: 2px solid #1A1A1A; margin: 0 22px; }
.rcd-logo { width: 40px; height: 40px; object-fit: contain; margin: 0 auto 8px; display: block; }
.rcd-brand-name { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.28em; padding-left: 0.28em; line-height: 1.2; color: #0B0B0C; }
.rcd-brand-sub { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #8C8C8E; margin-top: 2px; }
.rcd-kicker { margin-top: 14px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #E31E24; }
.rcd-title { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.1em; line-height: 1.2; color: #0B0B0C; }

.rcd-body { padding: 2px 22px 4px; }
.rcd-section { padding: 11px 0; border-bottom: 1px solid #E3E2DE; }
.rcd-section-meta { padding-top: 10px; }
.rcd-section-title { font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #5C5C5E; margin-bottom: 5px; }
.rcd-kv { display: flex; gap: 12px; justify-content: space-between; padding: 1.5px 0; }
.rcd-kv span { color: #6B6B6D; flex-shrink: 0; }
.rcd-kv strong { text-align: right; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.rcd-muted { color: #6B6B6D; font-weight: 400; }
.rcd-qty { white-space: nowrap; }

.rcd-item { padding: 6px 0; border-bottom: 1px dotted #E3E2DE; }
.rcd-item:last-child { border-bottom: none; }
.rcd-item-line { display: flex; justify-content: space-between; gap: 12px; }
.rcd-item-line strong:last-child { white-space: nowrap; }
.rcd-item-name { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.rcd-item-note { font-size: 0.9em; color: #6B6B6D; overflow-wrap: anywhere; }
.rcd-item-calc { font-size: 0.9em; color: #6B6B6D; }
.rcd-empty { color: #8C8C8E; }

.rcd-totals { padding: 10px 0 4px; }
.rcd-tline { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.rcd-tline span:last-child { white-space: nowrap; }
.rcd-grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding: 9px 0 2px;
  border-top: 2px solid #1A1A1A; }
/* Total alone (no subtotal / fees): the section line above is enough, no second line */
.rcd-totals > .rcd-grand:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.rcd-grand-label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
.rcd-grand-amount { font-size: 21px; font-weight: 800; white-space: nowrap; color: #0B0B0C; }

/* PAID stamp (rotated, like a rubber stamp). The text-baseline problem in the
   downloaded image is fixed in renderCanvas(), so the word stays centered. */
.rcd-stamp-wrap { text-align: center; padding: 16px 0 6px; }
.rcd-stamp { display: inline-block; transform: rotate(-8deg); padding: 6px 22px 7px;
  border: 3px solid #1E7B3B; border-radius: 8px; color: #1E7B3B; text-align: center; }
.rcd-stamp-word { font-weight: 800; font-size: 28px; letter-spacing: 0.3em; padding-left: 0.3em; line-height: 1.1; }
.rcd-stamp-date { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; }

.rcd-list { margin: 0; padding: 0 0 0 18px; list-style: decimal; }
.rcd-list li { padding: 2.5px 0; overflow-wrap: anywhere; }
.rcd-list li::marker { color: #8C8C8E; font-weight: 700; }

.rcd-notes { margin: 11px 0; padding: 9px 11px; border: 1px solid #E3E2DE; border-radius: 6px; overflow-wrap: anywhere; }
.rcd-foot { text-align: center; margin: 4px 22px 0; padding: 11px 0 18px; border-top: 1px solid #E3E2DE; font-size: 10px; color: #6B6B6D; line-height: 1.6; }
.receipt-doc { max-width: 420px; margin: 0 auto; font-size: 13px; border: 1px solid #E3E2DE; }
@media (max-width: 480px) { .receipt-doc { max-width: 100%; } }

/* HOT badge: item ordered 2+ times this month */
.product-hot-badge {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 4; pointer-events: none;
  background: var(--red); color: var(--white);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1;
  padding: 0.38em 0.7em; border-radius: 999px;
  border: 2px solid var(--white);
  box-shadow: 0 3px 10px rgba(227,30,36,0.4);
}

/* ---------- Receipt page: heading + buttons on the left, receipt on the right (desktop) ---------- */
.receipt-page .receipt-hero .receipt-check { margin-bottom: 0.6rem; }
.receipt-page .receipt-hero h1 { margin-bottom: 0.15em; }
.receipt-page .receipt-hero > p:not(.receipt-final-note) { margin: 0 0 0.4rem; }
.receipt-page .receipt-hero .receipt-meta { margin-top: 0.4rem; }
@media screen and (min-width: 861px) {
  body:not(.receipt-printing) .receipt-page .receipt-content {
    display: grid;
    grid-template-columns: minmax(280px, 400px) minmax(0, 420px);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "hero doc" "actions doc" "status doc" ". doc";
    column-gap: 3rem; justify-content: center; align-items: start;
  }
  .receipt-page .receipt-content .receipt-hero { grid-area: hero; margin: 0; max-width: none; }
  .receipt-page .receipt-content .receipt-doc { grid-area: doc; margin: 0; width: 100%; max-width: 420px; }
  .receipt-page .receipt-content .receipt-actions {
    grid-area: actions; display: grid; grid-template-columns: 1fr; gap: 0.6rem; max-width: none; margin: 1.25rem 0 0;
  }
  .receipt-page .receipt-content .receipt-actions > .btn-secondary,
  .receipt-page .receipt-content .receipt-actions > .btn-primary { width: 100%; min-width: 0; }
  .receipt-page .receipt-content .receipt-save-status { grid-area: status; }
}

/* ---------- Rent History: status tabs + roomy order cards ---------- */
.rh-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--gray-200); }
.rh-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.95rem; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-weight: 600; color: var(--gray-600); cursor: pointer; margin-bottom: -1px; }
.rh-tab:hover { color: var(--gray-900); }
.rh-tab.is-active { color: var(--gray-900); border-bottom-color: var(--red); }
.rh-tab-count { min-width: 1.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); font-size: 0.75rem; text-align: center; }
.rh-tab.is-active .rh-tab-count { background: var(--red); color: #fff; }
.rh-list { display: flex; flex-direction: column; gap: 1rem; }
.rh-card { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: #fff; padding: 1.1rem 1.25rem; }
.rh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--gray-200); }
.rh-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem 2rem; }
.rh-block { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.rh-block-right { text-align: right; align-items: flex-end; }
.rh-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); }
.rh-total { font-size: 1.15rem; }
.rh-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.rh-items li { line-height: 1.35; overflow-wrap: anywhere; }
.rh-qty { color: var(--gray-600); }
.rh-dates { font-weight: 600; }
.rh-times { color: var(--gray-600); font-size: 0.9rem; }
.rh-actions { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--gray-200); display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.rh-actions .order-cancel-note { margin: 0; }
.rh-empty { padding: 2rem 1rem; text-align: center; color: var(--gray-600); border: 1px dashed var(--gray-200); border-radius: var(--radius-md); }
@media (max-width: 600px) { .rh-body { grid-template-columns: 1fr; } .rh-card { padding: 1rem; } }

/* ---------- Admin search boxes (orders, products, live chat) ---------- */
.admin-search-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.admin-search { width: 260px; max-width: 100%; padding: 0.65em 0.85em; font-size: 0.9rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); color: var(--gray-900); box-sizing: border-box; }
.admin-search:focus { outline: none; border-color: var(--gray-400); }
.admin-toolbar .admin-field .admin-search { width: 100%; }
.admin-orders-table tr[hidden] { display: none; }
.admin-search-empty { margin: 1rem 0 0; padding: 1.5rem 1rem; text-align: center; color: var(--gray-600); border: 1px dashed var(--gray-200); border-radius: var(--radius-md); }
.chat-admin-search { display: block; position: sticky; top: 0; z-index: 1; width: 100%; box-sizing: border-box; margin: 0 0 0.4rem; padding: 0.6em 0.8em; font-size: 0.85rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); color: var(--gray-900); }
.chat-admin-search:focus { outline: none; border-color: var(--gray-400); }
@media (max-width: 640px) { .admin-search-tools { width: 100%; } .admin-search-tools .admin-search { flex: 1; width: auto; min-width: 0; } }

/* ---------- Admin Live Chat: customer photo / initials + delete ---------- */
.chat-admin-list-item { display: flex; align-items: flex-start; gap: 0.65rem; }
.chat-admin-list-main { flex: 1; min-width: 0; }
.chat-admin-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-200) center / cover no-repeat; color: var(--gray-900); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; user-select: none;
}
.chat-admin-avatar.has-photo { color: transparent; }
.chat-admin-avatar-sm { width: 30px; height: 30px; font-size: 0.7rem; margin-right: 0.6rem; vertical-align: middle; }
.chat-admin-thread-header { display: flex; align-items: center; }
#chat-admin-thread-name { display: inline-flex; align-items: center; min-width: 0; }
.chat-admin-delete-btn {
  margin-left: auto; padding: 0.4em 0.9em; border: 1px solid var(--danger, #B3261E); border-radius: var(--radius-md);
  background: var(--white); color: var(--danger, #B3261E); font-weight: 700; font-size: 0.8rem; cursor: pointer;
}
.chat-admin-delete-btn:hover { background: var(--danger, #B3261E); color: var(--white); }
.chat-admin-delete-btn[hidden] { display: none; }
.chat-admin-menu {
  position: fixed; z-index: 3000; min-width: 170px; padding: 0.3rem; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
.chat-admin-menu button { display: block; width: 100%; text-align: left; padding: 0.55em 0.8em; background: none; border: 0; border-radius: 6px; font: inherit; font-size: 0.88rem; color: var(--danger, #B3261E); cursor: pointer; }
.chat-admin-menu button:hover { background: var(--gray-100); }


/* ==========================================================================
   Live chat attachments (photos JPG/PNG + files) — customer widget & admin
   ========================================================================== */
.ai-chat-attach, .chat-attach-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; cursor: pointer; padding: 0;
  border: none; background: transparent; color: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .1s ease;
}
.ai-chat-attach svg, .chat-attach-btn svg { width: 22px; height: 22px; }
.ai-chat-attach:hover, .chat-attach-btn:hover { background: rgba(0,0,0,.06); }
.ai-chat-attach:active, .chat-attach-btn:active { transform: scale(.92); }
.ai-chat-attach:disabled, .chat-attach-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.ai-chat-form { align-items: center; gap: 0.25rem; }
.chat-admin-reply-form { align-items: center; gap: 0.25rem 0.35rem; }

.ai-chat-bubble.has-attachment, .chat-admin-bubble.has-attachment { padding: 0.35em; }
.ai-chat-attach-photo, .chat-attach-img {
  display: block; max-width: 100%; max-height: 220px; min-width: 60px; min-height: 40px;
  border-radius: calc(var(--radius-md) - 3px); cursor: zoom-in; object-fit: cover; background: rgba(0,0,0,.06);
}
.ai-chat-attach-doc, .chat-attach-file {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.4em 0.55em; border-radius: calc(var(--radius-md) - 3px);
  text-decoration: none; color: inherit; background: rgba(0,0,0,.07); cursor: pointer; max-width: 100%;
}
.ai-chat-user .ai-chat-attach-doc, .chat-admin-bubble-row.is-admin .chat-attach-file { background: rgba(255,255,255,.18); }
.ai-chat-attach-doc-icon, .chat-attach-file-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.ai-chat-attach-doc-meta, .chat-attach-file-meta { display: flex; flex-direction: column; min-width: 0; }
.ai-chat-attach-doc-meta strong, .chat-attach-file-meta strong {
  font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.ai-chat-attach-doc-meta small, .chat-attach-file-meta small { font-size: 0.7rem; opacity: .75; }


/* ==========================================================================
   SHOP FILTER — quick-filter bar + "Pick Preference" sheet
   Phone/tablet: bottom sheet. Desktop: centered dialog.
   ========================================================================== */

.fbar {
  display: flex; align-items: stretch; gap: 0.5rem;
  position: sticky; top: var(--header-h, 0px); z-index: 40;
  margin: 0 0 1rem; padding: 0.6rem 0;
  background: var(--paper);
  border-bottom: 1px solid var(--gray-200);
}
.fbar-chips {
  flex: 1; min-width: 0; display: flex; gap: 0.5rem; align-items: center;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fbar-chips::-webkit-scrollbar { display: none; }
.fbar-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.95rem; border: 1.5px solid transparent; border-radius: var(--radius-md);
  background: var(--gray-100); color: var(--gray-900);
  font: 600 0.9rem var(--font-body); white-space: nowrap; cursor: pointer;
}
.fbar-chip:hover { background: var(--gray-200); }
.fbar-chip.on, .fbar-filter.on { background: #FDECEC; border-color: var(--red); color: var(--red); }
.fbar-filter {
  flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: flex-start;
  width: 40px; padding: 0; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--gray-900); cursor: pointer;
}
.fbar-filter svg { width: 24px; height: 24px; fill: currentColor; }
.fbar-filter.on { background: transparent; color: var(--red); }
.fbar-chips { justify-content: flex-end; }
.fbar-sort { background: var(--gray-100); border-color: transparent; padding: 0.5rem 0.85rem; font-size: 0.8rem; }
.fbar-badge {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--red); color: #fff; font: 700 0.7rem/18px var(--font-body); text-align: center;
}
.fbar-badge[hidden] { display: none; }

/* sheet */
body.fs-lock { overflow: hidden; }
.fs-overlay {
  position: fixed; inset: 0; z-index: 2100; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0); transition: background .25s ease;
}
.fs-overlay[hidden] { display: none; }
.fs-overlay.on { background: rgba(0,0,0,.55); }
.fs-sheet {
  width: 100%; max-width: 640px; height: min(88vh, 760px); height: min(88dvh, 760px);
  display: flex; flex-direction: column; background: var(--white);
  border-radius: 20px 20px 0 0; overflow: hidden;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fs-overlay.on .fs-sheet { transform: none; }
.fs-head { position: relative; flex: 0 0 auto; padding: 1.1rem 3.5rem; text-align: center; border-bottom: 1px solid var(--gray-200); }
.fs-head h2 { margin: 0; font: 700 1.15rem var(--font-body); color: var(--gray-900); }
.fs-close {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: none; color: var(--gray-600); font-size: 2rem; line-height: 1; cursor: pointer;
}
.fs-body { flex: 1; min-height: 0; display: flex; }
.fs-nav { flex: 0 0 32%; max-width: 160px; min-width: 112px; overflow-y: auto; background: var(--gray-100); }
.fs-nav-item {
  position: relative; display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 1.15rem 0.9rem; font: 500 0.95rem/1.25 var(--font-body); color: var(--gray-600); cursor: pointer;
}
.fs-nav-item.on { background: var(--white); color: var(--red); font-weight: 600; }
.fs-nav-item.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); }
.fs-pane { position: relative; flex: 1; min-width: 0; overflow-y: auto; padding: 1rem 1rem 0; overscroll-behavior: contain; scroll-behavior: smooth; }
.fs-pane section { margin-bottom: 1.6rem; }
.fs-pane h3 { margin: 0 0 0.7rem; font: 700 1.05rem var(--font-body); color: var(--gray-900); }
.fs-hint { margin: -0.4rem 0 0.7rem; font-size: 0.8rem; color: var(--gray-400); }
.fs-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fs-list { display: flex; flex-direction: column; }
.fs-opt { display: block; width: 100%; text-align: left; padding: 0.85rem 0.25rem 0.85rem 1rem; border: 0; background: transparent; color: var(--gray-600); font: 500 0.95rem var(--font-body); cursor: pointer; }
.fs-opt:active { background: var(--gray-100); }
a.fs-opt { box-sizing: border-box; text-decoration: none; }
.fs-opt.on { color: var(--red); font-weight: 700; }
.fs-chip {
  padding: 0.7rem 1rem; border: 1.5px solid transparent; border-radius: var(--radius-md);
  background: var(--gray-100); color: var(--gray-900); font: 500 0.95rem var(--font-body); cursor: pointer; text-align: left;
}
.fs-chip.on { background: #FDECEC; border-color: var(--red); color: var(--red); font-weight: 600; }
.fs-range { display: flex; align-items: flex-end; gap: 0.6rem; margin-top: 1rem; }
.fs-range > span { padding-bottom: 0.7rem; color: var(--gray-400); }
.fs-range label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-600); }
.fs-money { display: flex; align-items: center; gap: 0.3rem; padding: 0 0.7rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); }
.fs-money:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,30,36,.15); }
.fs-money i { font-style: normal; color: var(--gray-600); }
.fs-money input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0.7rem 0; font: 700 1rem var(--font-body); background: transparent; }
.fs-spacer { height: 55%; }
.fs-foot { flex: 0 0 auto; display: flex; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--gray-200); background: var(--white); }
.fs-foot button { flex: 1; min-height: 48px; border-radius: var(--radius-md); font: 600 1rem var(--font-body); cursor: pointer; }
.fs-reset { background: var(--white); border: 1.5px solid var(--red); color: var(--red); }
.fs-apply { display: block; width: 100%; min-height: 48px; margin-top: 1.1rem; border-radius: var(--radius-md); font: 600 1rem var(--font-body); cursor: pointer; background: var(--red); border: 1.5px solid var(--red); color: #fff; box-shadow: 0 6px 14px rgba(230,30,40,.28); }
.fs-apply:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .fs-sheet, .fs-overlay { transition: none; } .fs-pane { scroll-behavior: auto; } }

/* tablet & phone: the old sidebar (long category list) is replaced by the sheet */
@media (max-width: 960px) {
  .shop-sidebar { display: none; }
  .price-filter, .shop-sort { display: none; }   /* these now live in the filter sheet */
  .shop-layout { padding-top: 0.75rem; }
  .shop-main-header { margin-bottom: 1rem; }
  .shop-main-header h1 { font-size: 1.6rem; }
}
@media (max-width: 640px) {
  .fbar { position: static; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .fbar-chip { padding: 0.65rem 0.85rem; font-size: 0.85rem; }
}
/* desktop: centered dialog */
@media (min-width: 769px) {
  .fs-overlay { align-items: center; }
  .fs-sheet { height: min(640px, 86vh); border-radius: 16px; transform: translateY(24px) scale(.97); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
  .fs-overlay.on .fs-sheet { transform: none; opacity: 1; }
}

/* desktop keeps the original sidebar (categories + price range) and sort dropdown */
@media (min-width: 961px) {
  .fbar, .fs-overlay { display: none !important; }
}

/* Sort dropdown (fixed so the chip row's horizontal scroll can't clip it) */
.fsort-menu {
  position: fixed; z-index: 2200; min-width: 200px; padding: 0.35rem;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.fsort-menu[hidden] { display: none; }
.fsort-item {
  display: block; width: 100%; text-align: left; padding: 0.8rem 0.9rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--gray-900); font: 500 0.95rem var(--font-body); cursor: pointer;
}
.fsort-item:hover { background: var(--gray-100); }
.fsort-item.on { color: var(--red); font-weight: 700; background: #FDECEC; }
@media (min-width: 961px) { .fsort-menu { display: none !important; } }


/* ==========================================================================
   MOBILE / TABLET HEADER  (<= 960px)
   One row: logo icon | search (round until tapped) | JAIME | cart | menu.
   Desktop header is untouched.
   ========================================================================== */
@media (max-width: 960px) {
  .site-header { flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 4vw; }
  .logo { order: 1; flex: 0 0 auto; gap: 0.6rem; margin-right: auto; }  /* the free space sits here, so search icon / JAIME / menu stay put while the search slides out */
  .logo-icon { width: 44px; height: 44px; }
  .logo-title { font-size: 1.05rem; letter-spacing: 0.3em; white-space: nowrap; }
  .logo-subtitle { display: block; font-size: clamp(0.5rem, 1.25vw, 0.66rem); letter-spacing: 0.16em; white-space: nowrap; left: 0; }   /* title + subtitle always show together */

  /* search: round icon button first; when tapped the field slides out to the LEFT (icon stays on the right), inline in the header row */
  .search-bar { order: 2; margin-left: 0.5rem; min-width: 0; max-width: none; flex: 0 0 40px; width: auto; height: 40px; gap: 0; transition: flex-grow .35s cubic-bezier(.22,.8,.3,1), flex-basis .35s cubic-bezier(.22,.8,.3,1), gap .3s ease; }
  .search-bar input { flex: 1 1 auto; width: 0; min-width: 0; padding: 0; border-width: 0; border-radius: 999px; background: var(--ink-soft); font-size: 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, padding .3s ease, visibility 0s linear .3s; }
  .search-bar button { width: 40px; height: 40px; border: 1px solid #333; border-radius: 50%; transition: background .25s ease, border-color .25s ease, border-radius .3s ease; }
  .search-bar.is-open { flex: 1 1 0%; gap: 0; }
  .search-bar.is-open input { width: 100%; padding: 0 1.1rem; border: 1px solid #3a3a3a; border-right: 0; border-radius: 999px 0 0 999px; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease .08s, padding .3s ease, visibility 0s; }
  .search-bar.is-open button { background: var(--ink-soft); border-color: #3a3a3a; border-left-width: 1px; border-radius: 0 999px 999px 0; }

  .auth-links { order: 3; margin-left: 0; gap: 0.35rem; flex-wrap: nowrap; row-gap: 0; justify-content: flex-end; }

  /* hamburger: plain three bars, no box */
  .nav-toggle { order: 4; width: 38px; height: 38px; border: 0; gap: 4px; background: transparent; }
  .nav-toggle span { width: 20px; height: 2px; border-radius: 2px; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* menu FLOATS over the page (dropdown under the header) instead of growing the header and pushing the content down */
  .main-nav {
    order: 5; flex-basis: auto; max-height: none; overflow: visible;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 0 4vw; background: var(--ink);
    border-top: 1px solid #2a2a2a; box-shadow: 0 14px 28px rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .main-nav.is-open {
    max-height: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }
  .main-nav ul { padding: 0.3rem 0; }
  .main-nav ul li a { font-size: 0.82rem; padding: 0.45rem 0; }
}
@media (prefers-reduced-motion: reduce) { .main-nav, .main-nav.is-open { transition: none; } }
@media (max-width: 640px) {
  .logo-text { display: none; }               /* phone: logo icon only */
  .auth-links .btn-signin { padding: 0.45em 0.9em; font-size: 0.8rem; }
}

/* Price Range inputs in the filter sheet: grey boxes with a peso prefix (like the shop card) */
.fs-money { background: var(--gray-100); border-color: transparent; border-radius: var(--radius-sm); }
.fs-money i { color: var(--red); font-weight: 700; }
.fs-money input { font-weight: 600; }
.fs-money input::placeholder { color: var(--gray-400); font-weight: 600; }
.fs-range { margin-top: 0.2rem; }


/* ==========================================================================
   TABLET / MOBILE POLISH
   1) INDIERECTORY pill sits in the MIDDLE of the dropdown menu
   2) Footer (tablet): brand on top, Quick Links on the left, Support +
      Follow Us stacked on the right (Support moves up, no empty gap)
   ========================================================================== */
@media (max-width: 960px) {
  .main-nav ul li.nav-indierectory-item { display: flex; justify-content: center; width: 100%; }
  .main-nav ul li.nav-indierectory-item .nav-indierectory { display: inline-flex !important; width: auto; margin: 0.5rem 0; padding: 0.4em 0.9em !important; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .site-footer { grid-template-columns: 1fr 1fr; align-items: start; }
  .site-footer > .footer-col:nth-child(1) { grid-column: 1 / -1; }                 /* JJS Cine Rentals */
  .site-footer > .footer-col:nth-child(2) { grid-column: 1; grid-row: 2 / span 2; } /* Quick Links */
  .site-footer > .footer-col:nth-child(3) { grid-column: 2; grid-row: 2; }          /* Support (moved up) */
  .site-footer > .footer-col:nth-child(4) { grid-column: 2; grid-row: 3; }          /* Follow Us */
}

/* ==========================================================================
   RESPONSIVE HARDENING (phones 320px+ and tablets up to 960px)
   Fixes cards / form fields that were wider than the screen.
   ========================================================================== */
img, video, canvas { max-width: 100%; }

/* grid / flex children may shrink instead of pushing the page wider */
.services-grid > *, .values-grid > *, .steps-grid > *, .why-us-grid > *, .stats-bar > *, .about-stats > *,
.about-story > *, .product-detail > *, .shop-layout > *, .checkout-layout > *, .cart-layout > *,
.support-options > *, .product-grid > * { min-width: 0; }

/* Product page: Rental Start / End sit side-by-side, label above its date field */
.rental-dates {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0.9rem; row-gap: 0.3rem; align-items: end;
}
.rental-dates label[for="rent-start"] { grid-column: 1; grid-row: 1; }
.rental-dates label[for="rent-end"]   { grid-column: 2; grid-row: 1; }
.rental-dates #rent-start             { grid-column: 1; grid-row: 2; }
.rental-dates #rent-end               { grid-column: 2; grid-row: 2; }
.rental-dates input { width: 100%; min-width: 0; }
.rental-dates .rental-dates-note { grid-column: 1 / -1; grid-row: 3; }

@media (max-width: 960px) {
  .services-grid, .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { padding: 1.35rem; }
}
@media (max-width: 520px) {
  .services-grid, .values-grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .services-page .page-hero h1 { font-size: clamp(2.4rem, 12vw, 3rem); }
}

/* scroll-reveal: slide up (not sideways) on tablets too, so nothing pokes out past the right edge */
@media (max-width: 960px) {
  html.mo-js [data-mo="out"][data-mo-from="left"],
  html.mo-js [data-mo="out"][data-mo-from="right"] { translate: 0 18px; }
}

/* Home hero: "THE INDIERECTORY" scales with the screen so it never gets cut off on small phones */
@media (max-width: 640px) {
  .hero-title { font-size: min(2.4rem, 9vw); }
  .hero-title-big { font-size: min(3rem, 11vw); }
}

/* Hero slideshow: hide the side arrows on tablets too (they covered the text) - swipe or use the dots */
@media (max-width: 960px) {
  .hero-arrow { display: none; }
}

/* ==========================================================================
   HOME PAGE — RESPONSIVE FIXES (any screen size)
   Appended last so it wins over the older rules above. Desktop (961px+) look
   is unchanged.
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }          /* nothing may push the page sideways */

/* 1) Product rows (Cameras / Lenses on Home).
      BUG: the generic ".product-grid { repeat(3,1fr) }" / "repeat(2,1fr)" rules from the
      tablet/phone breakpoints beat ".product-grid-scroll", so the first 2-3 cards in every
      row were squeezed into thin slivers while the rest stayed normal. Force the scroll row
      back to one-row, fixed-width cards on tablets and phones. */
@media (max-width: 960px) {
  .product-grid.product-grid-scroll {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(150px, 40vw, 220px);
    gap: 0.85rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 3vw;
    padding-bottom: 0.75rem;
  }
  .product-grid.product-grid-scroll > .product-card { scroll-snap-align: start; min-width: 0; }
  .explore-gear { padding-top: 3rem; }
  .gear-category { margin-bottom: 2rem; }
}

/* 2) Section headings: scale smoothly instead of jumping from 4.2rem to 3rem */
@media (min-width: 641px) and (max-width: 960px) {
  .explore-gear h2, .how-it-works h2, .why-us h2, .testimonials h2,
  .indie-header h1, .account-page-head h1, .page-hero h1, .tagline-section h2 {
    font-size: clamp(3rem, 7vw, 4.2rem);
  }
}
@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, .tagline-section h2 {
    font-size: clamp(1.9rem, 8.6vw, 3rem);
    overflow-wrap: anywhere;
  }
  .section-subtitle { font-size: 0.95rem; margin-bottom: 1.75rem; padding-inline: 0.25rem; }
  .how-it-works, .why-us, .testimonials { padding-left: 4vw; padding-right: 4vw; }
}

/* 3) Hero: height follows the screen, text always readable, never cut off */
@media (max-width: 960px) {
  .hero-slideshow { height: clamp(360px, 62svh, 560px); }
  @supports not (height: 1svh) { .hero-slideshow { height: clamp(360px, 62vh, 560px); } }
  .hero-slide::before {
    background: linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.78) 55%, rgba(11,11,12,0.92) 100%);
  }
  .hero-slide-content { padding: 1.5rem 5vw 3.25rem; max-width: 100%; }
  .hero-title { font-size: clamp(2rem, 8vw, 3.2rem); }
  .hero-title-big { font-size: clamp(2.3rem, 10.5vw, 4.4rem); overflow-wrap: anywhere; }
  .hero-description { font-size: clamp(0.85rem, 2.6vw, 1rem); max-width: 46ch; margin-bottom: 1.1rem; }
}
@media (max-width: 380px) {
  .hero-title-big { font-size: 9.8vw; }
}
/* phones held sideways (very short screens) */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-slideshow { height: min(100svh, 420px); min-height: 300px; }
  .hero-slide-content { padding-top: 1rem; padding-bottom: 2.5rem; }
  .hero-title { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-bottom: 0.5rem; }
  .hero-title-big { font-size: clamp(1.8rem, 6vw, 2.8rem); }
  .hero-description { margin-bottom: 0.75rem; }
}

/* 4) Floating buttons: the "Talk to Admin" bubble sat on top of the LOG IN pill on phones */
@media (max-width: 520px) {
  .quick-contact-label { display: none; }
  .quick-contact { left: 0.9rem; bottom: 0.9rem; }
  .back-to-top { right: 0.9rem; bottom: 0.9rem; }
  .float-login { bottom: 0.9rem; }
}

/* 5) Stats: 5 items look balanced on every width (last one centred, no orphan gap) */
@media (max-width: 640px) {
  .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-bar .stat-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-number { font-size: clamp(1.4rem, 7vw, 2rem); }
}
@media (min-width: 641px) and (max-width: 960px) {
  .stats-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats-bar .stat-item { grid-column: span 2; }
  .stats-bar .stat-item:nth-child(4) { grid-column: 2 / span 2; }
  .stats-bar .stat-item:nth-child(5) { grid-column: 4 / span 2; }
}

/* 6) Cards, buttons and footer on tiny phones (320px) */
@media (max-width: 380px) {
  .site-footer { padding-left: 5vw; padding-right: 5vw; }
  .btn-primary { padding-left: 1.2em; padding-right: 1.2em; }
}


/* ==========================================================================
   MODERN MOBILE / TABLET LOOK  (<= 960px)
   Frosted header, floating rounded menu card, pill filter chips, soft rounded
   cards, bigger tap targets, safe-area padding. Desktop is untouched.
   ========================================================================== */
@media (max-width: 960px) {
  :root { --radius-md: 12px; --m-radius: 18px; --m-shadow: 0 8px 28px rgba(0,0,0,.08); }
  body { -webkit-tap-highlight-color: transparent; }

  /* ----- header: frosted dark glass ----- */
  .site-header {
    background: rgba(11,11,12,.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
  }
  .nav-toggle { border-radius: 12px; transition: background .2s ease; }
  .nav-toggle:active, .nav-toggle.is-open { background: rgba(255,255,255,.1); }

  /* ----- menu: floating rounded card (not full-width, not pushing content) ----- */
  .main-nav {
    top: calc(100% + 8px); left: 3vw; right: 3vw; padding: 0.4rem;
    background: #1A1A1C;   /* solid: backdrop-filter doesn't stack inside the frosted header */
    border: 1px solid rgba(255,255,255,.08); border-radius: var(--m-radius);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    transform: translateY(-10px) scale(.98); transform-origin: top right;
  }
  .main-nav.is-open { transform: none; }
  .main-nav ul { padding: 0; gap: 2px; }
  .main-nav ul li a {
    display: flex; align-items: center; justify-content: center; text-align: center; gap: .55rem;
    min-height: 48px; padding: 0 1rem; font-size: 0.95rem; font-weight: 600;
    border: 0; border-radius: 12px; color: rgba(255,255,255,.78);
    transition: background .18s ease, color .18s ease;
  }
  .main-nav ul li a:hover, .main-nav ul li a:active { background: rgba(255,255,255,.07); color: #fff; }
  .main-nav ul li a.active { background: rgba(227,30,36,.16); color: #fff; border: 0; }
  .main-nav ul li a.nav-indierectory { min-height: 0; justify-content: center; border-radius: 999px; }
  .main-nav ul li a.nav-indierectory::after { display: none; }

  /* ----- shop: page title + filter bar ----- */
  .shop-breadcrumb { padding-top: 1.1rem; }
  .shop-breadcrumb, .breadcrumb { font-size: .8rem; }
  .shop-main-header h1 { font-size: 1.5rem; letter-spacing: .01em; }

  .fbar {
    margin: 0 -4vw 1rem; padding: .65rem 4vw;
    background: rgba(246,245,242,.86);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .fbar-filter {
    width: 44px; height: 44px; justify-content: center; border-radius: 50%;
    background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.12);
  }
  .fbar-filter svg { width: 20px; height: 20px; }
  .fbar-filter.on { background: #FDECEC; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
  .fbar-chip, .fbar-sort {
    min-height: 44px; padding: 0 1.1rem; border-radius: 999px; font-size: .85rem;
    background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.12);
  }
  .fbar-chip:active, .fbar-filter:active { transform: scale(.96); }
  .fbar-chip.on { background: #FDECEC; box-shadow: inset 0 0 0 1.5px var(--red); }

  /* ----- filter sheet: rounder, grabber handle, pill options ----- */
  .fs-overlay.on { background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .fs-sheet { border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.25); }
  .fs-head { padding-top: 1.5rem; border-bottom: 0; }
  .fs-head::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px;
    margin-left: -20px; border-radius: 4px; background: var(--gray-200);
  }
  .fs-close { width: 40px; height: 40px; right: .75rem; top: calc(50% + 6px); border-radius: 50%; background: var(--gray-100); font-size: 1.5rem; }
  .fs-nav { background: transparent; padding: .25rem 0 0 .6rem; }
  .fs-nav-item { border-radius: 12px; padding: .95rem .9rem; margin-bottom: 4px; }
  .fs-nav-item.on { background: #FDECEC; }
  .fs-nav-item.on::before { display: none; }
  .fs-pane { padding: .25rem .75rem 0 .5rem; }
  .fs-opt { min-height: 48px; margin-bottom: 2px; padding: .75rem 1rem; border-radius: 12px; display: flex; align-items: center; }
  .fs-opt.on { background: #FDECEC; }
  a.fs-opt-link { margin-top: 6px; border-top: 1px solid var(--gray-100); border-radius: 0 0 12px 12px; }
  .fs-opt-link::after { content: "\2192"; margin-left: auto; color: var(--gray-400); }
  .fs-money { border-radius: 12px; }
  .fs-apply { border-radius: 999px; min-height: 52px; }

  /* ----- product cards: soft rounded, no hard red top edge ----- */
  .product-grid { gap: .85rem; }
  .product-card {
    border-radius: var(--m-radius); border-top-width: 0; box-shadow: var(--m-shadow);
    padding: .65rem .65rem .85rem; overflow: hidden;
  }
  .product-card:hover { transform: none; }
  .product-card:active { transform: scale(.985); }
  .product-card img { border-radius: 12px; }
  .product-card-link { font-size: .88rem; }
  .shop-category-heading h2 { font-size: 1.35rem; }

  /* ----- other cards: same soft rounded style ----- */
  .service-card, .step-card, .why-card, .testimonial-card, .support-card {
    border-radius: var(--m-radius); border-top-width: 0; box-shadow: var(--m-shadow);
  }
  .service-card:hover { transform: none; }
  .service-icon { border-radius: 16px; }
  .btn-secondary, .btn-outline, .service-card .btn-secondary { border-radius: 999px; min-height: 46px; }

  /* ----- buttons & inputs: bigger, pill, thumb-friendly ----- */
  .btn-primary, .btn-primary-sm, .auth-submit, .btn-checkout, .btn-add-cart-large { border-radius: 999px; min-height: 46px; }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], select, textarea { font-size: 16px; border-radius: 12px; }

  /* ----- footer: rounded top sheet, comfy link rows ----- */
  .site-footer { border-radius: 26px 26px 0 0; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
  .footer-col ul li a { display: inline-block; padding: .35rem 0; }
}
@media (prefers-reduced-motion: reduce) { .product-card, .fbar-chip { transition: none; } }

/* ==========================================================================
   LOGO SPLASH — shown ONLY when the website / index file is opened directly
   (e.g. jjs127.pages.dev). Phone + tablet only (<= 960px), never on desktop.
   Not shown when moving between pages (Home link etc.).
   ========================================================================== */
@media (max-width: 960px) {
  html.splash-load::after {
    content: ""; position: fixed; inset: 0; z-index: 100000;
    background: #0B0B0C url("assets/jjslogo.png") center / var(--sp, 84px) auto no-repeat;
    pointer-events: all; transition: opacity .45s ease;
    animation: splashPulse 1s ease-in-out infinite;
  }
  html.splash-load.splash-hide::after { opacity: 0; pointer-events: none; }
}
@keyframes splashPulse { 0%, 100% { background-size: var(--sp, 84px) auto; } 50% { background-size: calc(var(--sp, 84px) * 1.14) auto; } }
@media (prefers-reduced-motion: reduce) { html.splash-load::after { animation: none; transition: none; } }


/* ==========================================================================
   LANDSCAPE (phones + tablets turned sideways, <= 960px wide)
   Not just the portrait layout stretched out: compact header, wider grids,
   menu in columns, smaller floating widgets, side-by-side footer.
   ========================================================================== */
@media (max-width: 960px) and (orientation: landscape) {
  /* splash logo a bit smaller on a short screen */
  html.splash-load { --sp: 64px; }

  /* compact header */
  .site-header { padding-top: calc(.35rem + env(safe-area-inset-top, 0px)); padding-bottom: .35rem; gap: 1rem; padding-left: max(3vw, env(safe-area-inset-left, 0px)); padding-right: max(3vw, env(safe-area-inset-right, 0px)); }
  .logo-icon { width: 36px; height: 36px; }
  .logo-title { font-size: 1.05rem; }
  .logo-subtitle { font-size: .6rem; }   /* title and subtitle always show together */
  .nav-toggle, .search-bar button, .search-toggle { transform-origin: center; }

  /* menu: fits the short screen, items in columns, scrolls if still too tall */
  .main-nav { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; left: auto; right: 3vw; width: min(560px, 94vw); }
  .main-nav ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .main-nav ul li a { min-height: 44px; }
  .main-nav ul li.nav-indierectory-item { grid-column: 1 / -1; }

  /* pages: tighter headings so content starts higher */
  .shop-breadcrumb, .page-hero { padding-top: .6rem; }
  .shop-breadcrumb a { font-size: 1.45rem; }
  .shop-main-header { margin-bottom: .6rem; }
  .shop-main-header h1, .page-hero h1 { font-size: 1.5rem; margin-bottom: .2rem; }
  .shop-category-heading { margin-top: .9rem; padding-bottom: .3rem; }
  .shop-category-heading h2 { font-size: 1.2rem; }
  .product-grid { gap: .8rem; }
  .page-hero { padding-bottom: 1rem; }
  .fbar { padding-top: .4rem; padding-bottom: .4rem; margin-bottom: .6rem; }
  .fbar-filter, .fbar-chip, .fbar-sort { min-height: 38px; }
  .fbar-filter { width: 38px; height: 38px; }

  /* more columns: use the width */
  .product-grid:not(.product-grid-scroll) { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .services-grid, .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.25rem; align-items: start; border-radius: 22px 22px 0 0; }
  .site-footer > .footer-col:nth-child(n) { grid-column: auto; grid-row: auto; }

  /* hero: fills the short screen, text never hidden under the buttons */
  .hero-slideshow { height: calc(100vh - 56px); height: calc(100dvh - 56px); min-height: 280px; max-height: 520px; }
  .hero-slide-content { padding: .75rem 6vw 2.4rem; }
  .hero-title { font-size: clamp(1.4rem, 4.5vw, 2.2rem); margin-bottom: .2rem; }
  .hero-title-big { font-size: clamp(1.7rem, 6vw, 3rem); }
  .hero-description { font-size: .85rem; margin-bottom: .6rem; max-width: 52ch; }

  /* floating widgets: smaller, out of the way of buttons */
  .quick-contact { left: .7rem; bottom: .6rem; }
  .quick-contact-label { display: none; }
  .back-to-top { right: .7rem; bottom: .6rem; }
  .float-login { bottom: .6rem; padding: .3rem .4rem .3rem .45rem; transform-origin: bottom center; }
  .float-login-text span { display: none; }
  .float-login-badge { width: 30px; height: 30px; }

  /* filter sheet: wider and taller on a short screen */
  .fs-sheet { height: 96vh; height: 96dvh; max-width: 760px; border-radius: 20px 20px 0 0; }
  .fs-head { padding-top: 1.1rem; padding-bottom: .5rem; }
  .fs-opt { min-height: 42px; padding-top: .55rem; padding-bottom: .55rem; }
}
/* very short landscape phones (e.g. 667x375) */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 420px) {
  .hero-description { display: none; }
  .hero-slide-content .btn-primary { min-height: 40px; padding-top: .45em; padding-bottom: .45em; }
}

/* Portrait phone + tablet: logo icon only (no title/subtitle). Landscape shows both together. */
@media (max-width: 960px) and (orientation: portrait) {
  .logo-text { display: none; }
}