/* ===================================================================
   main.css — Cycle Docs Workshop
   Extracted from index.html. Do not edit index.html styles directly.
   =================================================================== */

/* === BLOCK 1: Featured grid, hero overlay fix, reviews === */
/* Featured products grid - standalone class to avoid conflict with shop-grid */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  min-height: 100px;
}
@media (max-width: 1024px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .featured-grid { grid-template-columns: 1fr; }
}
/* Featured section - reserve space to prevent layout reflow */
.featured-bg {
  background: #111827;
  color: #fff;
  border-top: 3px solid var(--teal);
  min-height: 210px;
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
}
/* Scale down the Featured Products section content by ~50% */
#featured-products {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
#featured-products .shop-header {
  margin-bottom: 1.25rem;
}
#featured-products .section-label {
  font-size: 0.65rem;
  margin-bottom: 0.35rem;
}
#featured-products .section-title {
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  margin-bottom: 0.35rem;
}
#featured-products .section-desc {
  font-size: 0.78rem;
  margin-bottom: 0;
}
/* Shrink the product cards inside the featured grid */
#home-featured-grid .product-card {
  border-radius: 12px;
}
#home-featured-grid .product-img {
  aspect-ratio: 2 / 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#home-featured-grid .product-img img {
  object-fit: contain;
  object-position: center;
  padding: 0.5rem;
  transform: none !important;
}
#home-featured-grid .product-card:hover .product-img img {
  transform: scale(1.04) !important;
}
#home-featured-grid .product-info {
  padding: 0.65rem 0.85rem 0.75rem;
}
#home-featured-grid .product-name {
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
}
#home-featured-grid .product-price {
  font-size: 0.78rem;
}
#home-featured-grid .product-cat {
  font-size: 0.6rem;
  padding: 0.2rem 0.5rem;
  top: 0.5rem;
  left: 0.5rem;
}

/* ---- HERO OVERLAY DEFENSIVE FIX ---- */
/* Prevents dark overlay getting stuck in Brave/Firefox */
.hero-content {
  opacity: 1 !important; /* always visible regardless of font load */
}
.hero-bg img {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-bg img.loaded {
  opacity: 0.65;
}
/* Pure CSS fallback: auto-show after 1s via animation */
@keyframes heroImgReveal {
  0% { opacity: 0; }
  100% { opacity: 0.65; }
}
.hero-bg img {
  animation: heroImgReveal 1s ease 0.5s forwards;
}
.hero-bg img.loaded {
  animation: none;
  opacity: 0.65;
}
/* Ensure hero text is always readable even if bg loads late */
.hero-content h1,
.hero-content p,
.hero-content .hero-badge,
.hero-content .hero-actions {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---- Reviews ---- */
.reviews-bg{background:var(--cream);padding:5rem 2rem}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.review-card{background:#fff;border:1px solid var(--warm-gray);border-radius:20px;padding:2rem;display:flex;flex-direction:column;gap:1rem}
.review-stars{display:flex;gap:3px}
.review-stars svg{width:16px;height:16px}
.review-text{font-size:0.95rem;color:var(--slate);line-height:1.6;flex:1}
.reviewer-name{font-weight:600;font-size:0.9rem;color:var(--black)}
.reviewer-meta{font-size:0.78rem;color:var(--slate-light);margin-top:2px}
@media(max-width:768px){.reviews-grid{grid-template-columns:1fr}}
@media(max-width:1024px){.reviews-grid{grid-template-columns:1fr 1fr}}

/* === BLOCK 2: Cross-browser fixes, CSS variables, shared layout, nav,
   footer, buttons, all section styles, all responsive breakpoints === */
/* ============================================================
   CROSS-BROWSER RESILIENCE FIXES
   ============================================================ */

/* 1. Global box-sizing & overflow-wrap */
body {
  /* overflow-x:clip set on html/body above — do NOT re-add overflow-x:hidden here.
     hidden creates a scroll container that blocks touch-swipe on child overflow-x:auto elements. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2. Prevent long words / URLs breaking layouts */
h1, h2, h3, h4, h5, h6,
p, li, td, th, label,
.section-title, .section-desc,
.hero-sub, .service-card,
.product-name, .sh-card-name,
.sh-card-desc {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 3. Images always responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 4. Nav resilience - prevent overflow at odd zoom levels */
nav {
  min-height: 64px;
  height: auto !important;
  padding-top: 0;
  padding-bottom: 0;
}
.nav-inner {
  min-height: 72px;
  height: auto;
}

/* 5. Section padding - use clamp for zoom resilience */
section:not(.hero) {
  padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 4vw, 2rem);
}

/* 6. Hero resilience */
.hero {
  min-height: 100svh;
  min-height: 100vh; /* fallback */
  padding: clamp(6rem, 10vw, 9rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 5vw, 4rem);
}
.hero h1 {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.hero-sub {
  max-width: min(520px, 100%);
}

/* 7. Grid resilience - prevent overflow at any zoom */
/* services-grid uses original CSS - do not auto-fit override */
.reviews-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.stats-inner {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
/* featured grid handled by .featured-grid class */

/* 8. Card resilience */
.service-card,
.sh-card,
.product-card {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 9. Button resilience */
.btn-primary,
.btn-ghost,
.btn-dark {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-actions {
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* 10. Stat numbers - prevent overflow */
.stat-number {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 11. Footer grid resilience */
.footer-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* 12. Specialist / Brompton / Cargo grid */
/* specialist-grid uses fixed 2-col layout - do not override with auto-fit */
.specialist-img {
  min-width: 0;
  max-width: 100%;
  overflow: hidden; /* contain float-badge within bounds */
}

/* 13. Section inner max-width */
.section-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* 14. Contact grid */
.contact-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* 15. Price row text */
.price-row {
  min-width: 0;
}
.price-row-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}
.price-row-val {
  flex-shrink: 0;
  margin-left: 1rem;
}

/* 16. Booking grid */
.bk-main {
  min-width: 0;
}

/* 17. Loyalty grid */
.loyalty-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* 18. Shop sidebar at mid-sizes */
@media (max-width: 900px) {
  .sh-layout {
    grid-template-columns: 1fr !important;
  }
  .sh-sidebar {
    position: static !important;
  }
}

/* 19. Prevent horizontal scroll from fixed elements */
.admin-lock-btn,
#admin-lock-btn,
#sh-cart-btn {
  max-width: calc(100vw - 3rem);
}

/* 20. Text containers - no fixed heights */
.section-desc,
.hero-sub,
.service-desc,
.lock-desc,
.specialist-desc {
  height: auto !important;
  min-height: unset !important;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#2b2b2b;
  --white:#ffffff;
  --yellow:#f5e642;
  --yellow-dark:#d4c500;
  --yellow-pale:#fdfbe6;
  --teal:#3a8c6e;
  --teal-dark:#2e7057;
  --teal-pale:#e0f4ed;
  --red:#d42b2b;
  --red-dark:#b02020;
  --red-pale:#fdecea;
  --slate:#2b2b2b;
  --slate-mid:#555555;
  --slate-light:#767676;
  --cream:#f9f9f9;
  --warm-gray:#ebebeb;
  --font-display:'Bebas Neue','Arial Black','Impact',sans-serif;
  --font-body:'DM Sans',sans-serif;
  --font-mono:'DM Mono',monospace;
}

/* ── DISPLAY FONT FALLBACK ──────────────────────────────────────────────────────
   Bebas Neue renders as uppercase by design. If the font fails to load, fallback
   fonts (Arial Black / Impact) will show the raw HTML case (mixed) instead.
   This rule enforces uppercase on every element using the display font variable
   so the layout is consistent regardless of font load status.           ──────── */
.nav-logo-text,
.section-title,
.hero h1, .hero h2,
.bk-hero h1, .bk-hero h2, .sh-hero h1, .sh-hero h2, .ly-hero h1, .ly-hero h2,
.eb-hero h1, .eb-section-title, .eb-prices-title,
.pl-hero h1, .pl-section-title, .pl-cta-bar h3,
.contact-form-card h3,
.bk-summary h3, .bk-form-card h2, .bk-sum-price,
.sh-sidebar h3, .sh-cart-head h3, .sh-cart-grand-val,
.ly-card h2, .ly-card-name, .ly-card-pts-val, .ly-perks h3, .ly-tiers h3,
.float-badge-val, .lock-price-badge-val,
.cargo-price-val, .stat-number, .service-price,
.loyalty-card-name, .loyalty-card-points,
.loyalty-collapse-title, .reviews-collapse-title,
.faq-collapse-title, .contact-collapse-title, .msg-collapse-title,
.privacy-hero h1, .privacy-section h2,
.eb-card-price, .eb-cert-tick, .eb-info-strip-text h3,
.marquee-track span {
  text-transform: uppercase;
}

html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font-body);background:var(--cream);color:var(--black);overflow-x:clip;font-size:16px;line-height:1.6}
/* overflow-x:clip prevents the page from scrolling sideways (same visual as hidden)
   but unlike hidden it does NOT create a new scroll container, so children with
   overflow-x:auto (e.g. the shop carousel) remain swipeable on mobile. */
/* overflow-x:clip applied globally on html/body above — no media-query needed */

/* ---- NAV ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 2rem;height:72px;display:flex;align-items:center;justify-content:space-between;background:rgba(58,140,110,0.95);transition:background 0.3s,backdrop-filter 0.3s}
nav.scrolled{background:rgba(42,112,87,0.98);backdrop-filter:blur(12px)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-text{font-family:var(--font-display);font-size:1.65rem;letter-spacing:0.05em;color:var(--black);line-height:1}
.nav-logo-text span{color:var(--black)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{color:rgba(255,255,255,0.9);text-decoration:none;font-size:0.85rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;transition:color 0.2s}
/* ---- SPECIAL SERVICES popup ---- */
.spsvc-wrap{position:relative}
.spsvc-btn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.9);font-family:var(--font-body);font-size:0.85rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;transition:color 0.2s;padding:0;line-height:inherit}
.spsvc-btn:hover{color:var(--yellow)}
.spsvc-popup{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:#1e293b;border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:0.6rem 1rem;min-width:160px;opacity:0;pointer-events:none;transition:opacity 0.18s,transform 0.18s;z-index:200;box-shadow:0 8px 28px rgba(0,0,0,0.35);transform:translateX(-50%) translateY(-4px)}
.spsvc-popup.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.spsvc-popup::before{content:'';position:absolute;top:-6px;left:50%;width:10px;height:10px;background:#1e293b;border-left:1px solid rgba(255,255,255,0.12);border-top:1px solid rgba(255,255,255,0.12);transform:translateX(-50%) rotate(45deg)}
.spsvc-popup-label{font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.38);text-align:center;padding:0.1rem 0 0.35rem;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:0.35rem}
.spsvc-popup-item{display:block;padding:0.45rem 0.25rem;color:rgba(255,255,255,0.55);font-size:0.8rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;text-align:center;white-space:nowrap;cursor:default}
/* ---- MOBILE Special Services tap panel ---- */
.mob-spsvc-wrap{display:flex;flex-direction:column;border-bottom:1px solid rgba(255,255,255,0.06)}
.mob-spsvc-btn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.8);font-family:var(--font-body);font-size:1.1rem;font-weight:500;text-align:left;padding:0.5rem 0;letter-spacing:0;text-transform:none;transition:color 0.2s;display:flex;align-items:center;justify-content:space-between}
.mob-spsvc-btn:hover{color:var(--yellow)}
.mob-spsvc-btn::after{content:'＋';font-size:0.9rem;opacity:0.45;transition:transform 0.2s,opacity 0.2s;display:inline-block}
.mob-spsvc-btn[aria-expanded="true"]::after{content:'－';opacity:0.6}
.mob-spsvc-panel{display:none;padding:0.4rem 0 0.6rem 0.75rem}
.mob-spsvc-panel.open{display:block}
.mob-spsvc-item{display:block;font-size:0.78rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.35);padding:0.3rem 0;cursor:default}
.nav-links a:hover{color:var(--yellow)}
.nav-cta{background:var(--red);color:#fff;padding:0.55rem 1.25rem;border-radius:100px;font-size:0.85rem;font-weight:600;text-decoration:none;letter-spacing:0.03em;transition:background 0.2s,transform 0.15s}
.nav-cta:hover{background:var(--red-dark);transform:translateY(-1px)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-hamburger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:all 0.3s}
/* ---- SEARCH BAR ---- */
.nav-search{position:relative;display:flex;align-items:center}
.nav-search-btn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.7);padding:6px;display:flex;align-items:center;justify-content:center;transition:color 0.2s;border-radius:8px}
.nav-search-btn:hover{color:#fff}
.nav-search-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-search-input-wrap{position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;overflow:hidden;transition:width 0.3s cubic-bezier(0.4,0,0.2,1);background:rgba(255,255,255,0.1);border-radius:100px;backdrop-filter:blur(8px)}
.nav-search-input-wrap.open{width:220px}
.nav-search-input{width:100%;background:none;border:none;outline:none;color:#fff;font-family:var(--font-body);font-size:0.82rem;padding:0.45rem 2rem 0.45rem 1rem;white-space:nowrap}
.nav-search-input::placeholder{color:rgba(255,255,255,0.45)}
.nav-search-clear{position:absolute;right:0.5rem;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,0.5);cursor:pointer;font-size:0.75rem;padding:2px 4px;display:none}
.nav-search-clear.visible{display:block}
.search-results{position:absolute;top:calc(100% + 10px);right:0;width:300px;background:#1e293b;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,0.4);overflow:hidden;z-index:99999;display:none;border:1px solid rgba(255,255,255,0.08)}
.search-results.open{display:block}
.search-result-item{display:flex;align-items:center;gap:10px;padding:0.65rem 1rem;cursor:pointer;transition:background 0.15s;text-decoration:none;color:inherit}
.search-result-item:hover{background:rgba(255,255,255,0.07)}
.search-result-icon{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,0.07);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.85rem}
.search-result-text{flex:1;min-width:0}
.search-result-title{font-size:0.82rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-sub{font-size:0.72rem;color:rgba(255,255,255,0.4);margin-top:1px}
.search-no-results{padding:1.25rem 1rem;text-align:center;font-size:0.82rem;color:rgba(255,255,255,0.35)}
.search-section-header{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.3);padding:0.5rem 1rem 0.25rem}
/* Mobile search */
.mobile-search-wrap{padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.08);display:none}
.mobile-search-input{width:100%;background:rgba(255,255,255,0.08);border:none;outline:none;color:#fff;font-family:var(--font-body);font-size:0.88rem;padding:0.55rem 1rem;border-radius:100px;box-sizing:border-box}
.mobile-search-input::placeholder{color:rgba(255,255,255,0.35)}
@media(max-width:768px){
  .nav-search{display:none}
  .mobile-search-wrap{display:block}
  .search-results{width:calc(100vw - 2rem);right:-0.5rem}
}

.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:rgba(10,10,10,0.97);backdrop-filter:blur(16px);padding:2rem;flex-direction:column;gap:1.25rem;z-index:99}
.mobile-menu.open{display:flex}
.mobile-menu a{color:rgba(255,255,255,0.8);text-decoration:none;font-size:1.1rem;font-weight:500;padding:0.5rem 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.mobile-menu a:hover{color:var(--yellow)}
.mobile-menu .nav-cta{margin-top:0.5rem;text-align:center;display:block;color:#fff}

/* ---- HERO ---- */
.hero{min-height:100svh;background:var(--black);display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden;padding:9rem 0 4rem}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0.65}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(43,43,43,0.97) 40%,rgba(43,43,43,0.5) 100%)}
.hero-content{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 clamp(1rem, 4vw, 3rem);width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(245,230,66,0.15);border:1px solid rgba(245,230,66,0.4);color:var(--yellow);padding:0.4rem 1rem;border-radius:100px;font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.5rem}
.hero-badge::before{content:'';width:6px;height:6px;background:var(--yellow);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.4)}}
.hero h1{font-family:var(--font-display);font-size:clamp(4rem,10vw,9rem);line-height:0.9;color:#fff;letter-spacing:0.02em;margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-sub{max-width:520px;font-size:1.1rem;color:rgba(255,255,255,0.7);line-height:1.7;margin-bottom:2.5rem;font-weight:300}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:0.9rem 2rem;border-radius:100px;font-weight:600;font-size:0.95rem;text-decoration:none;border:none;cursor:pointer;transition:all 0.2s;letter-spacing:0.02em}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,43,43,0.30)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;padding:0.9rem 2rem;border-radius:100px;font-weight:500;font-size:0.95rem;text-decoration:none;border:1px solid rgba(255,255,255,0.2);cursor:pointer;transition:all 0.2s}
.btn-ghost:hover{border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.06)}
.hero-scroll{position:absolute;bottom:2.5rem;right:2.5rem;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}
.hero-scroll span{font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.35)}
.hero-scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,rgba(255,255,255,0.35),transparent);animation:scrollline 1.5s ease-in-out infinite}
@keyframes scrollline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.01%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:768px){.hero-scroll{right:1rem}}

/* ---- MARQUEE ---- */
.marquee-wrap{background:var(--teal);padding:0.85rem 0;overflow:hidden}
.marquee-track{display:flex;white-space:nowrap;animation:marquee 25s linear infinite}
.marquee-track span{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.15em;color:rgba(255,255,255,0.85);padding:0 2.5rem;text-transform:uppercase}
.marquee-track span.dot{color:var(--yellow);padding:0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---- STATS ---- */
.stats{background:var(--black);padding:5rem 2rem}
.stats-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden}
.stat{padding:2.5rem;background:var(--slate);text-align:center}
.stat-number{font-family:var(--font-display);font-size:3.5rem;color:var(--yellow);line-height:1;letter-spacing:0.02em;margin-bottom:0.5rem}
.stat-label{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.4);font-weight:500}

/* ---- SECTION COMMON ---- */
section{padding:7rem 2rem}
.section-inner{max-width:1280px;margin:0 auto}
.section-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;color:var(--teal);margin-bottom:0.75rem;display:flex;align-items:center;gap:8px}
.section-label::before{content:'';display:block;width:24px;height:2px;background:var(--red)}
.section-title{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);line-height:1;letter-spacing:0.02em;color:var(--black);margin-bottom:1rem}
.section-title.light{color:#fff}
.section-desc{font-size:1.05rem;color:var(--slate-mid);max-width:520px;line-height:1.75;font-weight:300}

/* ---- SERVICES ---- */
.services-bg{background:var(--yellow-pale)}
.services-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
/* ---- SERVICE CAROUSEL ---- */
.svc-carousel-outer{position:relative}
.svc-carousel-track-wrap{overflow:hidden;border-radius:24px;margin:0 -0.5rem;padding:0 0.5rem 0.5rem}
.svc-carousel-track{display:flex;gap:1.5rem;transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);will-change:transform;cursor:grab;user-select:none}
.svc-carousel-track.is-dragging{cursor:grabbing;transition:none}
.svc-carousel-track .service-card{flex:0 0 calc((100% - 3rem) / 3);min-width:0;cursor:default}
/* ---- COMPACT (All Services) mode — 3 columns, all 9 cards visible ---- */
.svc-carousel-track .service-card{transition:transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94),box-shadow 0.3s,font-size 0.3s,padding 0.3s,width 0.3s,margin 0.3s,flex-basis 0.3s}
.svc-carousel-track.carousel-compact .service-card{flex:0 0 calc((100% - 2rem) / 3);font-size:0.84rem;line-height:1.25;padding:1.1rem 1rem}
.svc-carousel-track.carousel-compact .service-card .service-name{font-size:0.58rem;margin-bottom:0.45rem}
.svc-carousel-track.carousel-compact .service-card .service-price{font-size:1.6rem;margin-bottom:0.3rem}
.svc-carousel-track.carousel-compact .service-card .service-desc{font-size:0.65rem;line-height:1.3;margin-bottom:0.6rem}
.svc-carousel-track.carousel-compact .service-card .service-features{gap:0.2rem;margin-bottom:0.6rem}
.svc-carousel-track.carousel-compact .service-card .service-feature{font-size:0.62rem;padding:0.15rem 0}
.svc-carousel-track.carousel-compact .service-card .service-btn{padding:0.45rem 0.9rem;font-size:0.65rem}
.svc-carousel-track.carousel-compact .service-card .featured-badge{font-size:0.55rem;padding:0.15rem 0.45rem;top:0.75rem;right:0.75rem}
/* In compact mode wrap into grid so all 9 show at once */
.svc-carousel-track.carousel-compact{flex-wrap:wrap;gap:0.75rem;transform:none !important;cursor:default}
.svc-carousel-track.carousel-compact .service-card{flex:0 0 calc((100% - 1.5rem) / 3)}
@media(max-width:1280px){
  .svc-carousel-track.carousel-compact .service-card{flex:0 0 calc((100% - 1.5rem) / 3)}
}
@media(max-width:1024px){
  .svc-carousel-track.carousel-compact .service-card{flex:0 0 calc((100% - 0.75rem) / 2)}
}
@media(max-width:640px){
  .svc-carousel-track.carousel-compact .service-card{flex:0 0 100%}
}
/* Hide arrows in compact/all-services mode */
.svc-carousel-track.carousel-compact ~ .svc-carousel-arrow,
.carousel-compact-active .svc-carousel-arrow{display:none}
.svc-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--warm-gray);background:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;color:var(--black)}
.svc-carousel-arrow:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.svc-carousel-arrow:disabled{opacity:0.3;pointer-events:none}
.svc-carousel-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.svc-carousel-prev{left:-22px}
.svc-carousel-next{right:-22px}
.svc-carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:1.75rem}
.svc-dot{width:8px;height:8px;border-radius:50%;background:var(--warm-gray);border:none;padding:0;cursor:pointer;transition:all 0.2s}
.svc-dot.active{background:var(--teal);width:24px;border-radius:4px}
.svc-category-tabs{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:2rem}
.svc-tab{background:#fff;border:1.5px solid var(--warm-gray);color:var(--slate-mid);font-family:var(--font-body);font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;padding:0.45rem 1rem;border-radius:100px;cursor:pointer;transition:all 0.2s}
.svc-tab:hover{border-color:var(--teal);color:var(--teal)}
.svc-tab.active{background:var(--teal);border-color:var(--teal);color:#fff}
@media(max-width:1024px){
  .svc-carousel-track .service-card{flex:0 0 calc((100% - 1.5rem) / 2)}
  .svc-carousel-prev{left:-16px}
  .svc-carousel-next{right:-16px}
}
@media(max-width:640px){
  .svc-carousel-track .service-card{flex:0 0 85vw}
  .svc-carousel-prev,.svc-carousel-next{display:none}
}
.service-card{background:#fff;border:1px solid var(--warm-gray);border-radius:20px;padding:2.5rem;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform 0.3s,box-shadow 0.3s}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,0.08)}
.service-card.featured{background:var(--teal);border-color:var(--teal);color:#fff}
.service-card.featured .service-desc{color:rgba(255,255,255,0.55)}
.service-card.featured .service-feature{color:rgba(255,255,255,0.75);border-color:rgba(255,255,255,0.08)}
.service-card.featured .service-feature svg{stroke:var(--yellow)}
.featured-badge{position:absolute;top:1.5rem;right:1.5rem;background:var(--red);color:#fff;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.3rem 0.75rem;border-radius:100px}
.service-name{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--teal);margin-bottom:1rem}
.service-card.featured .service-name{color:var(--yellow)}
.service-price{font-family:var(--font-display);font-size:4rem;line-height:1;letter-spacing:0.02em;color:var(--black);margin-bottom:0.25rem}
.service-card.featured .service-price{color:#fff}
.service-desc{font-size:0.9rem;color:var(--slate-mid);margin-bottom:2rem;font-weight:300;line-height:1.65}
.service-features{list-style:none;margin-bottom:2.5rem;flex-grow:1;display:flex;flex-direction:column;gap:0.9rem}
.service-feature{display:flex;align-items:flex-start;gap:10px;font-size:0.88rem;color:var(--slate);padding-bottom:0.9rem;border-bottom:1px solid var(--warm-gray)}
.service-feature:last-child{border-bottom:none;padding-bottom:0}
.service-feature svg{width:16px;height:16px;flex-shrink:0;stroke:var(--red-dark);fill:none;stroke-width:2.5;margin-top:2px}
.service-btn{display:block;text-align:center;padding:0.85rem;border-radius:100px;font-weight:600;font-size:0.9rem;text-decoration:none;cursor:pointer;border:none;transition:all 0.2s;letter-spacing:0.02em}
.service-btn-outline{background:transparent;border:1.5px solid var(--warm-gray);color:var(--black)}
.service-btn-outline:hover{border-color:var(--red);color:var(--red-dark)}
.service-btn-solid{background:var(--red);color:#fff}
.service-btn-solid:hover{background:var(--red-dark)}

/* ---- SERVICES SECTION — 30% SMALLER ---- */
#services { padding-top: 0 !important; padding-bottom: clamp(2rem,4vw,3.5rem) !important; }
#services .services-header { margin-bottom: 1rem; }
#services .section-label { font-size: 0.58rem; margin-bottom: 0.4rem; }
#services .section-title { font-size: clamp(1.5rem,3vw,2.4rem); margin-bottom: 0.5rem; }
#services .section-desc { font-size: 0.78rem; line-height: 1.6; }
/* Category tabs */
#services .svc-tab { font-size: 0.6rem; padding: 0.32rem 0.75rem; }
#services .svc-category-tabs { gap: 0.35rem; margin-bottom: 1.2rem; }
/* Carousel dots */
#services .svc-dot { width: 6px; height: 6px; }
#services .svc-dot.active { width: 17px; }
#services .svc-carousel-dots { margin-top: 1.1rem; gap: 4px; }
/* Arrow buttons */
#services .svc-carousel-arrow { width: 32px; height: 32px; }
#services .svc-carousel-arrow svg { width: 13px; height: 13px; }
/* Cards */
#services .service-card { padding: 1.5rem; border-radius: 14px; }
#services .featured-badge { font-size: 0.52rem; padding: 0.2rem 0.55rem; top: 1rem; right: 1rem; }
#services .service-name { font-size: 0.58rem; margin-bottom: 0.6rem; }
#services .service-price { font-size: 2.6rem; margin-bottom: 0.15rem; }
#services .service-desc { font-size: 0.68rem; line-height: 1.5; margin-bottom: 1.2rem; }
#services .service-features { gap: 0.55rem; margin-bottom: 1.5rem; }
#services .service-feature { font-size: 0.65rem; padding-bottom: 0.55rem; gap: 7px; }
#services .service-feature svg { width: 11px; height: 11px; margin-top: 1px; }
#services .service-btn { padding: 0.6rem; font-size: 0.68rem; border-radius: 100px; }
/* Carousel track gap */
#services .svc-carousel-track { gap: 1rem; }
#services .svc-carousel-track .service-card { flex: 0 0 calc((100% - 2rem) / 3); }
@media(max-width:1024px){
  #services .svc-carousel-track .service-card { flex: 0 0 calc((100% - 1rem) / 2); }
}
@media(max-width:640px){
  #services .svc-carousel-track .service-card { flex: 0 0 80vw; }
}

/* ---- SHOP ---- */
.shop-bg{background:var(--black);color:#fff}
.shop-bg .section-title{color:#fff}
.shop-bg .section-desc{color:rgba(255,255,255,0.5)}
.featured-bg{background:#111827;color:#fff;border-top:3px solid var(--teal)}
.featured-bg .section-title{color:#fff}
.featured-bg .section-desc{color:rgba(255,255,255,0.5)}
.shop-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4rem;flex-wrap:wrap;gap:1.5rem}
.view-all{color:var(--yellow);font-weight:600;font-size:0.9rem;text-decoration:none;display:flex;align-items:center;gap:6px;letter-spacing:0.02em;transition:gap 0.2s}
.view-all:hover{gap:10px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem}
.product-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:20px;overflow:hidden;cursor:pointer;transition:all 0.3s}
.product-card:hover{border-color:rgba(200,16,46,0.20);transform:translateY(-4px)}
.product-img{aspect-ratio:1;overflow:hidden;position:relative}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.product-card:hover .product-img img{transform:scale(1.07)}
.product-cat{position:absolute;top:1rem;left:1rem;background:rgba(10,10,10,0.75);backdrop-filter:blur(8px);color:#fff;font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:0.3rem 0.75rem;border-radius:100px}
.product-info{padding:1.5rem}
.product-name{font-weight:600;font-size:1rem;color:#fff;margin-bottom:0.35rem}
.product-price{font-family:var(--font-mono);font-size:1rem;color:var(--yellow);font-weight:500}

/* ---- SPECIALIST (Brompton / Cargo) ---- */
.specialist-bg{background:#fff;position:relative;z-index:1;isolation:isolate;overflow:hidden}
.specialist-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.specialist-grid.reverse .specialist-img{order:2}
.specialist-img{border-radius:24px;overflow:hidden;aspect-ratio:4/3;position:relative;background:var(--cream);display:flex;align-items:center;justify-content:center}
.specialist-img img{width:100%;height:100%;object-fit:contain}
/* Cargo image — no fixed aspect ratio, show full bike */
.cargo-bg .specialist-img{aspect-ratio:unset;background:transparent;overflow:visible}
.cargo-bg .specialist-img img{width:100%;height:auto;object-fit:contain;border-radius:16px}
.specialist-img .float-badge{position:absolute;bottom:1.5rem;right:1.5rem;background:var(--black);color:#fff;padding:1.5rem 2rem;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,0.25)}
.float-badge-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.4);margin-bottom:4px}
.float-badge-val{font-family:var(--font-display);font-size:2rem;color:var(--yellow);line-height:1}
.specialist-content .section-title{color:var(--black)}
.specialist-prices{margin:2.5rem 0;display:flex;flex-direction:column;gap:0.75rem}
.price-row{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:#fff;border:1px solid var(--warm-gray);border-radius:12px}
.price-row-name{font-weight:500;font-size:0.95rem;color:var(--black)}
.price-row-val{font-family:var(--font-mono);font-size:1rem;color:var(--teal);font-weight:500}

/* ---- CARGO ---- */
.cargo-bg{background:var(--black)}
.cargo-bg .section-title{color:#fff}
.cargo-bg .section-desc{color:rgba(255,255,255,0.5)}
.cargo-bg .section-label{color:var(--yellow)}
.cargo-bg .section-label::before{background:var(--yellow)}
.cargo-prices{margin:2.5rem 0;display:flex;flex-direction:column;gap:1rem}
.cargo-price-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center;transition:border-color 0.2s}
.cargo-price-card:hover{border-color:rgba(58,140,110,0.4)}
.cargo-price-name{font-weight:600;color:#fff;font-size:0.95rem}
.cargo-price-desc{font-size:0.82rem;color:rgba(255,255,255,0.4);margin-top:2px}
.cargo-price-val{font-family:var(--font-display);font-size:2.2rem;color:var(--yellow);line-height:1}
.cargo-float{background:rgba(58,140,110,0.15);border:1px solid rgba(58,140,110,0.25);border-radius:14px;padding:1.25rem 1.5rem;display:flex;gap:10px;align-items:flex-start;margin-top:1.5rem}
.cargo-float-icon{color:var(--yellow);flex-shrink:0;margin-top:2px}
.cargo-float p{font-size:0.85rem;color:rgba(255,255,255,0.6);line-height:1.6}
.cargo-float strong{color:var(--red);font-weight:600}

/* ---- LOCK CUTTING ---- */
.lock-bg{background:var(--black);color:#fff}
.lock-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.lock-content .section-label{color:var(--yellow)}
.lock-content .section-label::before{background:var(--yellow)}
.lock-content .section-title{color:#fff}
.lock-desc{font-size:1.05rem;color:rgba(255,255,255,0.6);margin:1.5rem 0 2.5rem;line-height:1.75;font-weight:300}
.lock-points{list-style:none;display:flex;flex-direction:column;gap:0.85rem;margin-bottom:2.5rem}
.lock-point{display:flex;align-items:center;gap:12px;font-weight:500;font-size:0.95rem;color:rgba(255,255,255,0.85)}
.lock-point::before{content:'';width:8px;height:8px;background:var(--yellow);border-radius:50%;flex-shrink:0}
.btn-dark{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:0.9rem 2rem;border-radius:100px;font-weight:600;font-size:0.95rem;text-decoration:none;border:none;cursor:pointer;transition:all 0.2s}
.btn-dark:hover{background:var(--red-dark);transform:translateY(-2px)}
.lock-img-wrap{position:relative}
.lock-img{border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.lock-img img{width:100%;height:100%;object-fit:cover}
.lock-price-badge{position:absolute;top:-1.5rem;left:-1.5rem;background:var(--teal);color:#fff;padding:1.75rem 2rem;border-radius:16px}
.lock-price-badge-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.75);margin-bottom:4px}
.lock-price-badge-val{font-family:var(--font-display);font-size:3rem;color:var(--white);line-height:1}

/* ---- LOYALTY ---- */
.loyalty-bg{background:var(--yellow-pale)}
.loyalty-inner{background:var(--black);border-radius:32px;padding:5rem;overflow:hidden;position:relative}
.loyalty-inner::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(200,16,46,0.10) 0%,transparent 70%)}
.loyalty-inner .section-label{color:var(--yellow)}
.loyalty-inner .section-label::before{background:var(--yellow)}
.loyalty-inner .section-title{color:#fff}
.loyalty-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:1}
@media(max-width:768px){
  .loyalty-grid{grid-template-columns:1fr;gap:2.5rem}
  .loyalty-inner{padding:2.5rem 1.5rem}
  .loyalty-visual{margin-top:0}
  .loyalty-card{max-width:100%}
}
@media(max-width:480px){
  .loyalty-inner{padding:1.75rem 1.25rem;border-radius:20px}
  .loyalty-desc{margin:1rem 0 2rem;font-size:0.95rem}
}
.loyalty-desc{font-size:1.05rem;color:rgba(255,255,255,0.5);line-height:1.8;font-weight:300;margin:1.5rem 0 3rem}
.loyalty-perks{display:flex;flex-direction:column;gap:1.25rem}
.perk{display:flex;gap:1rem;align-items:flex-start}
.perk-icon{width:44px;height:44px;border-radius:10px;background:rgba(58,140,110,0.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perk-icon svg{width:20px;height:20px;stroke:var(--yellow);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.perk-title{font-weight:600;color:#fff;font-size:0.95rem;margin-bottom:4px}
.perk-desc{font-size:0.85rem;color:rgba(255,255,255,0.45);line-height:1.55}
.loyalty-visual{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:20px;padding:2.5rem;text-align:center}
.loyalty-card{background:linear-gradient(135deg,var(--teal) 0%,var(--black) 100%);border-radius:16px;padding:2rem;margin-bottom:2rem;text-align:left;position:relative;overflow:hidden}
.loyalty-card::after{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:rgba(200,16,46,0.12);border-radius:50%}
.loyalty-card-label{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:1.5rem}
.loyalty-card-name{font-family:var(--font-display);font-size:1.5rem;color:#fff;letter-spacing:0.05em;margin-bottom:0.25rem}
.loyalty-card-points{font-family:var(--font-mono);font-size:2.5rem;color:var(--yellow);font-weight:500}
.loyalty-card-pts-label{font-size:0.78rem;color:rgba(255,255,255,0.4);margin-top:4px}

/* ---- TESTIMONIALS ---- */



.review-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.06)}



.reviewer{display:flex;align-items:center;gap:12px}
.reviewer-avatar{width:42px;height:42px;border-radius:50%;background:var(--teal-pale);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.95rem;color:var(--teal-dark);flex-shrink:0}
.reviewer-name{font-weight:600;font-size:0.9rem;color:var(--black)}
.reviewer-role{font-size:0.8rem;color:var(--slate-light)}

/* ---- FAQ ---- */
.faq-bg{background:var(--black)}
.faq-bg .section-title{color:#fff}
.faq-list{max-width:760px;margin:4rem auto 0;display:flex;flex-direction:column;gap:1px}
.faq-item{border-bottom:1px solid rgba(255,255,255,0.07);overflow:hidden}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:1.75rem 0;cursor:pointer;gap:1rem}
.faq-q-text{font-size:1.05rem;font-weight:500;color:#fff;line-height:1.4}
.faq-icon{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.3s}
.faq-icon svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;transition:transform 0.3s}
.faq-item.open .faq-icon{background:var(--teal);border-color:var(--teal)}
.faq-item.open .faq-icon svg{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s ease}
.faq-item.open .faq-answer{max-height:200px}
.faq-ans-text{font-size:0.95rem;color:rgba(255,255,255,0.5);line-height:1.75;padding-bottom:1.75rem;font-weight:300}

/* ---- CONTACT ---- */
.contact-bg{background:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:2rem;margin:3rem 0}
.contact-row{display:flex;gap:1.25rem;align-items:flex-start}
.contact-icon{width:46px;height:46px;background:#fff;border:1px solid var(--warm-gray);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-icon svg{width:20px;height:20px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--slate-light);margin-bottom:4px}
.contact-val{font-size:0.95rem;color:var(--black);line-height:1.6}
.contact-val a{color:var(--black);text-decoration:none}
.contact-val a:hover{color:var(--red-dark)}
.contact-form-card{background:#fff;border:1px solid var(--warm-gray);border-radius:24px;padding:2.5rem}
.contact-form-card h3{font-family:var(--font-display);font-size:2rem;letter-spacing:0.03em;margin-bottom:2rem;color:var(--black)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:1rem}
.form-label{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--slate-mid)}
.form-input{padding:0.85rem 1rem;background:var(--cream);border:1.5px solid var(--warm-gray);border-radius:10px;font-family:var(--font-body);font-size:0.95rem;color:var(--black);outline:none;transition:border-color 0.2s;width:100%}
.form-input:focus{border-color:var(--teal)}
.form-input::placeholder{color:var(--slate-light)}
textarea.form-input{resize:vertical;min-height:120px}
@media(max-width:768px){
  .contact-grid{grid-template-columns:1fr;gap:2rem}
  .contact-info{margin:1.5rem 0}
  .contact-form-card{padding:1.5rem;border-radius:16px}
  .form-row{grid-template-columns:1fr}
  .form-input,textarea.form-input,select.form-input{font-size:16px;width:100%}
}

/* ---- FOOTER ---- */
footer{background:var(--black);padding:2rem 2rem 1rem;color:#fff}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:1.25rem}
.footer-brand .nav-logo{display:flex;align-items:center;gap:10px;margin-bottom:0.75rem;text-decoration:none}
.footer-tagline{font-size:0.75rem;color:rgba(255,255,255,0.35);line-height:1.55;max-width:260px;margin-bottom:0.85rem;font-weight:300}
.footer-socials{display:flex;gap:7px}
.social-btn{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;transition:background 0.2s;cursor:pointer;text-decoration:none}
.social-btn:hover{background:var(--teal)}
.social-btn svg{width:13px;height:13px;fill:#fff}
.footer-col h4{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.35);margin-bottom:0.7rem}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:0.4rem}
.footer-links a{color:rgba(255,255,255,0.5);text-decoration:none;font-size:0.76rem;transition:color 0.2s}
.footer-links a:hover{color:var(--red)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding-top:0.85rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem}
.footer-copy{font-size:0.7rem;color:rgba(255,255,255,0.25)}
.footer-legal{display:flex;gap:1.25rem}
.footer-legal a{font-size:0.7rem;color:rgba(255,255,255,0.25);text-decoration:none;transition:color 0.2s}
.footer-legal a:hover{color:var(--yellow)}

/* ---- UTILITY SVG ICONS ---- */
.icon{display:inline-block;vertical-align:middle}

/* ====================================================
   RESPONSIVE — full audit fix
   ==================================================== */

/* ---- 1024px tablet ---- */
@media(max-width:1024px){
  .services-grid,.shop-grid,.stats-inner{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > div:first-child{grid-column:1/-1}
  /* Specialist/Brompton/Cargo: reduce gap before it collapses */
  .specialist-grid{gap:2.5rem}
  .lock-inner{gap:2.5rem}
}

/* ---- 768px mobile ---- */
@media(max-width:768px){
  /* Nav */
  nav{padding:0 1.25rem}
  .nav-links{display:none}
  .nav-hamburger{display:flex}

  /* Section padding */
  section{padding:4rem 1.25rem}
  .stats{padding:3rem 1.25rem}
  .section-inner{padding:0}

  /* Hero */
  .hero{padding:6rem 0 3rem}
  .hero h1{font-size:clamp(3rem,12vw,5rem)}
  .hero-sub{max-width:100%}
  .hero-scroll{display:none}

  /* Stats — 2 columns on mobile */
  .stats-inner{grid-template-columns:repeat(2,1fr)}

  /* Services header — stack title + view-all */
  .services-header{flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:2rem}
  .shop-header{flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:2rem}

  /* Specialist (Brompton / Cargo) — stack image above content */
  .specialist-grid{grid-template-columns:1fr;gap:2rem}
  .specialist-grid.reverse .specialist-img{order:0}
  .specialist-img .float-badge{bottom:1rem;right:1rem}
  /* Brompton: keep aspect ratio contained on mobile */
  .specialist-bg .specialist-img{aspect-ratio:4/3}
  /* Cargo: let height be natural — no cropping */
  .cargo-bg .specialist-img{aspect-ratio:unset}

  /* Cargo price cards — already flex row; let price wrap */
  .cargo-price-card{flex-wrap:wrap;gap:0.5rem}
  .cargo-price-val{font-size:1.6rem}

  /* Lock / Trusted Mechanic section */
  .lock-inner{grid-template-columns:1fr;gap:2rem}
  .lock-img-wrap{order:-1} /* image on top */
  .lock-price-badge{top:1rem;left:1rem}
  .lock-img{aspect-ratio:16/9}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:0.75rem}
  .footer-legal{flex-wrap:wrap;gap:1rem}

  /* Shop product grid (non-carousel fallback) */
  .shop-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0.75rem}
@media(max-width:600px){.shop-grid{display:flex;overflow-x:auto;gap:20px;padding:20px 0;}}
  .product-info{padding:0.75rem}

  /* Price list table — tighten padding */
  .pl-table td{padding:0.7rem 0.35rem;font-size:0.85rem}
  .pl-section-title{font-size:1.4rem}
  .pl-section{padding-top:1.5rem}
}

/* ---- 480px small phones ---- */
@media(max-width:480px){
  section{padding:3rem 1rem}

  /* Stats — still 2 cols but smaller */
  .stat{padding:1.5rem 1rem}
  .stat-number{font-size:2.2rem}

  /* Hero actions — stack buttons full-width */
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn-primary,.btn-ghost,.btn-dark{width:100%;justify-content:center}

  /* Form — single column */
  .form-row{grid-template-columns:1fr}
  .form-input,textarea.form-input,select.form-input{font-size:16px} /* prevent iOS zoom */

  /* Cargo prices — stack completely */
  .cargo-price-card{flex-direction:column;align-items:flex-start;gap:0.25rem}
  .cargo-price-val{font-size:1.4rem}

  /* Loyalty card full width */
  .loyalty-card{padding:1.25rem}
  .loyalty-card-points{font-size:2rem}

  /* Footer legal links — stack */
  .footer-legal{flex-direction:column;gap:0.5rem}

  /* Specialist image — Brompton uses contained aspect ratio, cargo shows full */
  .specialist-bg .specialist-img{aspect-ratio:4/3}
  .cargo-bg .specialist-img{aspect-ratio:unset}

  /* Price list */
  .pl-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pl-section-title{font-size:1.2rem}

  /* Booking steps — smaller text, prevent step 4 clipping */
  .bk-steps{border-radius:8px}
  .bk-step{padding:0.45rem 0.15rem;font-size:0.6rem;min-width:0;flex:1}
  .bk-step-num{font-size:0.82rem;display:block}
}

/* ---- Admin modals — mobile safe ---- */
@media(max-width:600px){
  /* Overlay panels: reduce padding so they fit on phone */
  #mgmt-panel,
  #sp-panel {
    border-radius:12px;
    margin:0;
  }
  /* Tighten header/body/footer padding inside modals */
  #mgmt-overlay,
  #sp-overlay {
    padding:0.75rem 0.5rem;
  }
}

/* ---- Price list sections padding on mobile ---- */
@media(max-width:600px){
  .pl-sections{padding:1.5rem 1rem 3rem}
  .pl-hero{padding:2.5rem 1rem}
  .pl-section{margin-bottom:2rem}
}

/* ====================================================
   ADMIN OVERLAYS + REMAINING MOBILE FIXES
   ==================================================== */


/* Admin overlay panels — reduce padding, let inner grids collapse */
@media(max-width:600px){
  /* All admin overlay padding reduced */
  #mgmt-overlay,
  #shop-mgmt-overlay,
  #ly-admin-overlay,
  #style-editor-overlay{padding:0.5rem !important}

  /* Inner panel: no border-radius on very small screens */
  #mgmt-overlay > div,
  #shop-mgmt-overlay > div,
  #ly-admin-overlay > div,
  #style-editor-overlay > div{
    border-radius:12px !important;
    margin:0 !important;
  }

  /* All inline 1fr 1fr grids inside admin panels collapse to 1 col */
  #mgmt-overlay [style*="grid-template-columns:1fr 1fr"],
  #mgmt-overlay [style*="grid-template-columns: 1fr 1fr"],
  #shop-mgmt-overlay [style*="grid-template-columns:1fr 1fr"],
  #shop-mgmt-overlay [style*="grid-template-columns: 1fr 1fr"],
  #shop-mgmt-overlay [style*="grid-template-columns:1fr 1fr 1fr"],
  #ly-admin-overlay [style*="grid-template-columns:1fr 1fr"],
  #ly-admin-overlay [style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr !important
  }

  /* Style editor colour grids collapse */
  #style-editor-overlay [style*="grid-template-columns:1fr 1fr"],
  #style-editor-overlay [style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr !important
  }

  /* Admin inputs — prevent iOS zoom */
  #mgmt-overlay input,
  #mgmt-overlay select,
  #mgmt-overlay textarea,
  #shop-mgmt-overlay input,
  #shop-mgmt-overlay select,
  #shop-mgmt-overlay textarea,
  #ly-admin-overlay input,
  #ly-admin-overlay select,
  #ly-admin-overlay textarea{
    font-size:16px !important
  }

  /* Header flex inside admin panels — stack on tiny screens */
  #mgmt-overlay [style*="justify-content:space-between"],
  #shop-mgmt-overlay [style*="justify-content:space-between"]{
    flex-wrap:wrap;
    gap:0.5rem
  }

  /* Admin body scroll area — reduce max-height so footer always visible */
  #mgmt-overlay [style*="max-height:65vh"],
  #shop-mgmt-overlay [style*="max-height:70vh"]{
    max-height:50vh !important
  }
}

/* Loyalty admin panel — the member lookup section */
@media(max-width:600px){
  #ly-admin-overlay > div{
    max-height:90vh;
    overflow-y:auto
  }
}

/* Service/product edit rows rendered by JS — add class hook via CSS attr selector */
/* These are [style*="width:100%"] rows inside mgmt panels */
@media(max-width:480px){
  /* Ensure all admin footer buttons wrap */
  #mgmt-overlay [style*="justify-content:flex-end"],
  #shop-mgmt-overlay [style*="justify-content:flex-end"],
  #ly-admin-overlay [style*="justify-content:flex-end"]{
    flex-wrap:wrap;
    gap:0.5rem
  }
  #mgmt-overlay [style*="justify-content:flex-end"] button,
  #shop-mgmt-overlay [style*="justify-content:flex-end"] button,
  #ly-admin-overlay [style*="justify-content:flex-end"] button{
    flex:1;
    min-width:0;
    text-align:center;
    justify-content:center
  }
}

/* Section inner — reset any leftover padding:0 from 768px query on larger screens */
@media(min-width:769px){
  .section-inner{padding:unset}
}

/* Prevent any long product names, descriptions or emails overflowing cards */
.sh-card-name,
.sh-card-desc,
.sh-card-cat,
.bk-svc-name,
.bk-svc-desc,
.review-text,
.contact-val,
.footer-tagline{
  overflow-wrap:break-word;
  word-break:break-word
}

/* Fix: service carousel arrows disappear on very small screens — already hidden by CSS,
   ensure touch drag still works */
@media(max-width:480px){
  .svc-carousel-track-wrap{
    margin:0;
    padding:0 0 0.5rem
  }
  /* Service card full-width on tiny phones */
  .svc-carousel-track .service-card{
    flex-basis:88vw !important
  }
}

/* pl-table price column — allow wrap on tiny screens to avoid overflow */
@media(max-width:360px){
  .pl-table td:last-child{
    white-space:normal;
    text-align:left;
    padding-top:0
  }
  .pl-table tr{
    display:flex;
    flex-direction:column;
    padding:0.5rem 0
  }
  .pl-table td{
    padding:0.2rem 0.35rem
  }
}

/* FAQ answer text on narrow phones */
@media(max-width:480px){
  .faq-question{padding:1.25rem 0;font-size:0.9rem}
  .faq-answer p{font-size:0.88rem}
}

/* Contact form card heading size on mobile */
@media(max-width:480px){
  .contact-form-card h3{font-size:1.5rem}
  .contact-info{margin:1rem 0}
}

/* bk-form-card heading on mobile */
@media(max-width:480px){
  .bk-form-card h2{font-size:1.4rem;margin-bottom:1.25rem}
  .bk-summary{border-radius:14px;padding:1.25rem}
  .bk-sum-price{font-size:2rem}
}

/* Ensure all images in specialist/lock sections never overflow */
.specialist-img img,
.lock-img img{
  max-width:100%;
  height:auto
}

/* Float badge — prevent overflow on very small widths */
@media(max-width:380px){
  .float-badge{
    padding:1rem 1.25rem !important;
    border-radius:12px
  }
  .float-badge-val{font-size:1.5rem}
  .lock-price-badge-val{font-size:2rem}
}
.fade-up{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up:nth-child(1){transition-delay:0s}
.fade-up:nth-child(2){transition-delay:0.1s}
.fade-up:nth-child(3){transition-delay:0.2s}

/* === BLOCK 3: Loyalty collapse banner === */
/* ---- COLLAPSIBLE LOYALTY BANNER ---- */
.loyalty-collapse-wrap{background:var(--black);border-top:2px solid rgba(245,230,66,0.3)}
.loyalty-collapse-header{max-width:1280px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:1rem;user-select:none}
.loyalty-collapse-header:hover .loyalty-collapse-toggle{background:rgba(245,230,66,0.15)}
.loyalty-collapse-left{display:flex;align-items:center;gap:1rem}
.loyalty-collapse-icon{width:36px;height:36px;border-radius:8px;background:rgba(245,230,66,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.loyalty-collapse-icon svg{width:18px;height:18px;stroke:var(--yellow);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.loyalty-collapse-title{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.04em;color:#fff}
.loyalty-collapse-title em{font-style:normal;color:var(--yellow)}
.loyalty-collapse-sub{font-size:0.78rem;color:rgba(255,255,255,0.4);margin-top:1px}
.loyalty-collapse-right{display:flex;align-items:center;gap:1rem}
.loyalty-collapse-pill{background:rgba(245,230,66,0.1);border:1px solid rgba(245,230,66,0.25);color:var(--yellow);font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.3rem 0.85rem;border-radius:100px;white-space:nowrap}
.loyalty-collapse-toggle{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:transparent;display:flex;align-items:center;justify-content:center;transition:background 0.2s;flex-shrink:0}
.loyalty-collapse-toggle svg{width:14px;height:14px;stroke:rgba(255,255,255,0.5);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.35s}
.loyalty-collapse-wrap.open .loyalty-collapse-toggle svg{transform:rotate(180deg)}
.loyalty-collapse-body{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1)}
.loyalty-collapse-wrap.open .loyalty-collapse-body{max-height:600px}
.loyalty-collapse-inner{max-width:1280px;margin:0 auto;padding:0 2rem 2rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem}
@media(max-width:900px){.loyalty-collapse-inner{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.loyalty-collapse-inner{grid-template-columns:1fr}.loyalty-collapse-header{padding:0.9rem 1.25rem}.loyalty-collapse-pill{display:none}}
.loyalty-perk-mini{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:1.1rem 1.25rem;display:flex;gap:0.85rem;align-items:flex-start}
.loyalty-perk-mini-icon{width:34px;height:34px;border-radius:8px;background:rgba(58,140,110,0.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.loyalty-perk-mini-icon svg{width:16px;height:16px;stroke:var(--yellow);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.loyalty-perk-mini-title{font-weight:600;color:#fff;font-size:0.88rem;margin-bottom:2px}
.loyalty-perk-mini-desc{font-size:0.78rem;color:rgba(255,255,255,0.4);line-height:1.5}
.loyalty-collapse-cta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;background:rgba(245,230,66,0.06);border:1px solid rgba(245,230,66,0.15);border-radius:14px;padding:1.1rem 1.5rem}
.loyalty-collapse-cta-text{font-size:0.88rem;color:rgba(255,255,255,0.55);line-height:1.5}
.loyalty-collapse-cta-text strong{color:#fff}

/* === BLOCK 4: Reviews collapse banner === */
/* ---- COLLAPSIBLE REVIEWS BANNER ---- */
.reviews-collapse-wrap{background:var(--black);border-top:2px solid rgba(255,255,255,0.06)}
.reviews-collapse-header{max-width:1280px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:1rem;user-select:none}
.reviews-collapse-left{display:flex;align-items:center;gap:1rem}
.reviews-collapse-icon{width:36px;height:36px;border-radius:8px;background:rgba(245,230,66,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.reviews-collapse-icon svg{width:18px;height:18px;fill:var(--yellow);stroke:none}
.reviews-collapse-title{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.04em;color:#fff}
.reviews-collapse-sub{font-size:0.78rem;color:rgba(255,255,255,0.4);margin-top:1px}
.reviews-collapse-rating{display:flex;align-items:center;gap:6px;flex-shrink:0}
.reviews-collapse-stars{display:flex;gap:2px}
.reviews-collapse-stars svg{width:14px;height:14px;fill:var(--yellow);stroke:none}
.reviews-collapse-score{font-weight:700;font-size:0.88rem;color:#fff}
.reviews-collapse-toggle{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);background:transparent;display:flex;align-items:center;justify-content:center;transition:background 0.2s;flex-shrink:0}
.reviews-collapse-toggle svg{width:14px;height:14px;stroke:rgba(255,255,255,0.5);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.35s}
.reviews-collapse-wrap.open .reviews-collapse-toggle svg{transform:rotate(180deg)}
.reviews-collapse-body{max-height:0;overflow:hidden;transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1)}
.reviews-collapse-wrap.open .reviews-collapse-body{max-height:700px}
.reviews-collapse-inner{max-width:1280px;margin:0 auto;padding:0.5rem 2rem 2rem}
@media(max-width:600px){.reviews-collapse-header{padding:0.9rem 1.25rem}.reviews-collapse-inner{padding:0.5rem 1.25rem 1.75rem}.reviews-collapse-rating{display:none}}

/* === BLOCK 5: FAQ collapse banner === */
/* ---- COLLAPSIBLE FAQ BANNER ---- */
.faq-collapse-wrap{background:var(--black);border-top:2px solid rgba(255,255,255,0.06)}
.faq-collapse-header{max-width:1280px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:1rem;user-select:none}
.faq-collapse-left{display:flex;align-items:center;gap:1rem}
.faq-collapse-icon{width:36px;height:36px;border-radius:8px;background:rgba(58,140,110,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.faq-collapse-icon svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.faq-collapse-title{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.04em;color:#fff}
.faq-collapse-sub{font-size:0.78rem;color:rgba(255,255,255,0.4);margin-top:1px}
.faq-collapse-toggle{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:transparent;display:flex;align-items:center;justify-content:center;transition:background 0.2s;flex-shrink:0}
.faq-collapse-toggle svg{width:14px;height:14px;stroke:rgba(255,255,255,0.5);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.35s}
.faq-collapse-wrap.open .faq-collapse-toggle svg{transform:rotate(180deg)}
.faq-collapse-body{max-height:0;overflow:hidden;transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1)}
.faq-collapse-wrap.open .faq-collapse-body{max-height:700px}
.faq-collapse-inner{max-width:760px;margin:0 auto;padding:0.25rem 2rem 2rem}
@media(max-width:600px){.faq-collapse-header{padding:0.9rem 1.25rem}.faq-collapse-inner{padding:0.25rem 1.25rem 1.75rem}}
/* reuse existing faq-item styles but override border colour for light bg */
.faq-collapse-inner .faq-item{border-bottom:1px solid rgba(255,255,255,0.07)}

/* === BLOCK 6: Contact collapse === */
.contact-collapse-wrap{background:var(--black);border-top:2px solid rgba(255,255,255,0.06)}
.contact-collapse-header{max-width:1280px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:1rem;user-select:none}
.contact-collapse-left{display:flex;align-items:center;gap:1rem}
.contact-collapse-icon{width:36px;height:36px;border-radius:8px;background:rgba(58,140,110,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-collapse-icon svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-collapse-title{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.04em;color:#fff}
.contact-collapse-title em{font-style:normal;color:var(--teal)}
.contact-collapse-sub{font-size:0.78rem;color:rgba(255,255,255,0.4);margin-top:1px}
.contact-collapse-toggle{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);background:transparent;display:flex;align-items:center;justify-content:center;transition:background 0.2s;flex-shrink:0}
.contact-collapse-toggle svg{width:14px;height:14px;stroke:rgba(255,255,255,0.5);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.35s}
.contact-collapse-wrap.open .contact-collapse-toggle svg{transform:rotate(180deg)}
.contact-collapse-body{max-height:0;overflow:hidden;transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1)}
.contact-collapse-wrap.open .contact-collapse-body{max-height:600px}
.contact-collapse-inner{max-width:1280px;margin:0 auto;padding:0 2rem 2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){.contact-collapse-inner{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.contact-collapse-inner{grid-template-columns:1fr}.contact-collapse-header{padding:0.9rem 1.25rem}.contact-collapse-inner{padding:0 1.25rem 1.5rem}}
.contact-mini-card{background:var(--cream);border:1px solid var(--warm-gray);border-radius:14px;padding:1rem 1.1rem;display:flex;gap:0.75rem;align-items:flex-start}
.contact-mini-card-icon{width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--warm-gray);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-mini-card-icon svg{width:14px;height:14px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-mini-card-label{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--slate-light);margin-bottom:3px}
.contact-mini-card-val{font-size:0.8rem;color:var(--black);line-height:1.55}
.contact-mini-card-val a{color:var(--black);text-decoration:none}
.contact-mini-card-val a:hover{color:var(--teal)}

/* === BLOCK 7: Message collapse === */
.msg-collapse-wrap{background:var(--black);border-top:1px solid rgba(255,255,255,0.06)}
.msg-collapse-header{max-width:1280px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:1rem;user-select:none}
.msg-collapse-left{display:flex;align-items:center;gap:1rem}
.msg-collapse-icon{width:36px;height:36px;border-radius:8px;background:rgba(212,43,43,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.msg-collapse-icon svg{width:18px;height:18px;stroke:var(--red);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg-collapse-title{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.04em;color:#fff}
.msg-collapse-title em{font-style:normal;color:var(--red)}
.msg-collapse-sub{font-size:0.78rem;color:rgba(255,255,255,0.4);margin-top:1px}
.msg-collapse-toggle{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);background:transparent;display:flex;align-items:center;justify-content:center;transition:background 0.2s;flex-shrink:0}
.msg-collapse-toggle svg{width:14px;height:14px;stroke:rgba(255,255,255,0.5);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.35s}
.msg-collapse-wrap.open .msg-collapse-toggle svg{transform:rotate(180deg)}
.msg-collapse-body{max-height:0;overflow:hidden;transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1)}
.msg-collapse-wrap.open .msg-collapse-body{max-height:900px}
.msg-collapse-inner{max-width:760px;margin:0 auto;padding:0 2rem 2rem}
@media(max-width:600px){.msg-collapse-header{padding:0.9rem 1.25rem}.msg-collapse-inner{padding:0 1.25rem 1.5rem}}

/* === BLOCK 8: Price list page === */
.pl-hero{background:var(--teal);padding:4rem 2rem;text-align:center}
.pl-hero h1{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);color:#fff;letter-spacing:0.03em;margin-bottom:0.5rem}
.pl-hero p{color:rgba(255,255,255,0.75);font-size:1rem;font-weight:300}
.pl-note{max-width:860px;margin:2.5rem auto;padding:0 2rem}
.pl-note-box{background:#fff;border-left:4px solid var(--yellow);border-radius:0 12px 12px 0;padding:1.25rem 1.5rem;font-size:0.9rem;color:var(--slate-mid);line-height:1.7}
.pl-note-box strong{color:var(--black);font-weight:600}
.pl-sections{max-width:860px;margin:0 auto;padding:0 2rem 5rem;padding-top:0}
.pl-section{margin-bottom:3rem;padding-top:2rem}
.pl-section-title{font-family:var(--font-display);font-size:1.8rem;letter-spacing:0.04em;color:var(--black);margin-bottom:0.35rem;padding-bottom:0.75rem;border-bottom:2px solid var(--yellow);display:flex;align-items:center;gap:10px}
.pl-section-sub{font-size:0.85rem;color:var(--slate-mid);margin-bottom:1.25rem;font-weight:300}
.pl-table{width:100%;border-collapse:collapse}
.pl-table tr{border-bottom:1px solid var(--warm-gray)}
.pl-table tr:last-child{border-bottom:none}
.pl-table td{padding:0.85rem 0.5rem;font-size:0.92rem;color:var(--slate);line-height:1.5}
.pl-table td:last-child{text-align:right;font-family:var(--font-mono);font-weight:500;color:var(--teal);white-space:nowrap;font-size:0.95rem}
.pl-table tr.highlight{background:var(--yellow-pale)}
.pl-table tr.highlight td:last-child{color:var(--red)}
.pl-tag{display:inline-block;background:var(--red);color:#fff;font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.15rem 0.5rem;border-radius:100px;margin-left:8px;vertical-align:middle}
.pl-tag.teal{background:var(--teal)}
.pl-back{display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-weight:600;font-size:0.9rem;cursor:pointer;margin-bottom:2rem;text-decoration:none;border:none;background:none;padding:0}
.pl-back:hover{color:var(--teal-dark)}
.pl-back-hero{color:rgba(255,255,255,0.8);margin:0 auto 1rem;justify-content:center}
.pl-back-hero:hover{color:#fff}
.pl-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pl-cta-bar{background:var(--black);padding:3rem 2rem;text-align:center}
.pl-cta-bar h3{font-family:var(--font-display);font-size:2rem;color:#fff;letter-spacing:0.04em;margin-bottom:0.5rem}
.pl-cta-bar p{color:rgba(255,255,255,0.5);font-size:0.9rem;margin-bottom:1.5rem}
@media(max-width:600px){.pl-table td{font-size:0.85rem}.pl-table td:last-child{font-size:0.88rem}}

/* ---- Category Tab Bar ---- */
.pl-tab-bar{
  position:sticky;top:72px;z-index:50;
  background:var(--cream);
  border-bottom:1px solid var(--warm-gray);
  padding:0 2rem;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  white-space:nowrap;
  margin-bottom:0;
  display:block;
}
.pl-tab-bar::-webkit-scrollbar{display:none}
.pl-tab-bar-inner{
  display:flex;
  gap:0;
  max-width:860px;
  margin:0 auto;
  justify-content:center;
}
.pl-cat-tab{
  display:inline-block;
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  padding:0.9rem 1.1rem;
  font-family:var(--font-body);
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--slate-mid);
  cursor:pointer;
  white-space:nowrap;
  transition:color 0.2s,border-color 0.2s;
}
.pl-cat-tab:hover{color:var(--teal)}
.pl-cat-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.service-category{display:none}
.service-category.active{display:block}
@media(max-width:600px){
  .pl-tab-bar{padding:0 1rem}
  .pl-cat-tab{padding:0.85rem 0.85rem;font-size:0.75rem}
}

/* === BLOCK 9: Booking page === */
/* ---- Booking Hero ---- */
.bk-hero{background:var(--teal);padding:3.5rem 2rem 2.5rem}
.bk-hero-inner{max-width:960px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.bk-hero h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);color:#fff;letter-spacing:0.03em}
.bk-hero p{color:rgba(255,255,255,0.7);font-size:0.95rem;margin-top:0.4rem}
.bk-back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.8);font-size:0.85rem;font-weight:600;cursor:pointer;border:none;background:none;padding:0;transition:color 0.2s}
.bk-back:hover{color:var(--yellow)}
.bk-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ---- Layout ---- */
.bk-main{max-width:960px;margin:0 auto;padding:2.5rem 2rem 5rem;display:grid;grid-template-columns:1fr 300px;gap:2rem;align-items:start}
@media(max-width:768px){
  .bk-main{grid-template-columns:1fr;padding:1.5rem 1rem 4rem}
  .bk-hero{padding:2rem 1.25rem 1.75rem}
  .bk-summary{position:static} /* don't sticky on mobile — shows below form */
  .bk-form-card{padding:1.25rem}
}

/* ---- Form Card ---- */
.bk-form-card{background:#fff;border:1px solid var(--warm-gray);border-radius:20px;padding:2rem}
.bk-form-card h2{font-family:var(--font-display);font-size:1.8rem;letter-spacing:0.03em;color:var(--black);margin-bottom:1.75rem}

/* ---- Step Indicator ---- */
.bk-steps{display:flex;gap:0;margin-bottom:2rem;border-radius:10px;overflow:hidden;border:1px solid var(--warm-gray)}
.bk-step{flex:1;padding:0.65rem 0.5rem;text-align:center;font-size:0.75rem;font-weight:600;color:var(--slate-mid);background:var(--cream);border-right:1px solid var(--warm-gray);transition:all 0.2s}
.bk-step:last-child{border-right:none}
.bk-step-num{display:block;font-size:1rem;font-weight:700;margin-bottom:1px}
.bk-step.active{background:var(--teal);color:#fff}
.bk-step.done{background:var(--teal-pale);color:var(--teal-dark)}

/* ---- Service Cards ---- */
.bk-svc-list{display:flex;flex-direction:column;gap:0.6rem;margin-bottom:1.25rem}
.bk-svc-card{border:2px solid var(--warm-gray);border-radius:12px;padding:1rem 1.25rem;cursor:pointer;transition:all 0.2s;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.bk-svc-card:hover{border-color:var(--teal);background:var(--teal-pale)}
.bk-svc-card.selected{border-color:var(--teal);background:var(--teal-pale)}
.bk-svc-name{font-weight:700;font-size:0.95rem;color:var(--black)}
.bk-svc-desc{font-size:0.8rem;color:var(--slate-mid);margin-top:3px;line-height:1.4}
.bk-svc-price{font-family:var(--font-mono);font-size:1.1rem;color:var(--teal);font-weight:600;white-space:nowrap;flex-shrink:0}
.bk-popular{background:var(--red);color:#fff;font-size:0.62rem;padding:2px 7px;border-radius:100px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;margin-left:8px;vertical-align:middle}
.bk-cat-title{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--teal);margin:1.25rem 0 0.5rem;display:flex;align-items:center;gap:8px}
.bk-cat-title::after{content:'';flex:1;height:1px;background:var(--warm-gray)}

/* ---- Form Fields ---- */
.bk-field{margin-bottom:1.25rem}
.bk-label{display:block;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--slate-mid);margin-bottom:6px}
.bk-label span{color:var(--red)}
.bk-input{width:100%;padding:0.75rem 1rem;background:var(--cream);border:1.5px solid var(--warm-gray);border-radius:10px;font-family:var(--font-body);font-size:0.95rem;color:var(--black);outline:none;transition:border-color 0.2s}
.bk-input:focus{border-color:var(--teal);background:#fff}
.bk-input::placeholder{color:var(--slate-light)}
textarea.bk-input{resize:vertical;min-height:90px}

/* ---- Calendar ---- */
.bk-calendar{border:1.5px solid var(--warm-gray);border-radius:12px;overflow:hidden;margin-bottom:1rem}
.bk-cal-header{background:var(--teal);color:#fff;padding:0.75rem 1rem;display:flex;justify-content:space-between;align-items:center}
.bk-cal-header h4{font-weight:600;font-size:0.95rem}
.bk-cal-nav{background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem;padding:2px 10px;border-radius:6px;transition:background 0.2s;line-height:1}
.bk-cal-nav:hover{background:rgba(255,255,255,0.2)}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);background:#fff}
.bk-cal-day-name{text-align:center;font-size:0.68rem;font-weight:700;color:var(--slate-mid);padding:0.5rem 0;text-transform:uppercase;background:var(--cream)}
.bk-cal-day{text-align:center;padding:0.5rem 0;font-size:0.85rem;cursor:pointer;transition:all 0.15s;border-top:1px solid var(--warm-gray)}
.bk-cal-day:hover:not(.disabled):not(.empty){background:var(--teal-pale);color:var(--teal-dark)}
.bk-cal-day.selected{background:var(--teal);color:#fff;font-weight:700}
.bk-cal-day.today{font-weight:700;color:var(--red)}
.bk-cal-day.disabled{color:var(--slate-light);cursor:not-allowed;background:var(--cream)}
.bk-cal-day.empty{background:var(--cream);cursor:default}

/* ---- Time Slots ---- */
.bk-time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-top:0.75rem}
@media(max-width:480px){.bk-time-grid{grid-template-columns:repeat(3,1fr)}}
.bk-time-slot{padding:0.55rem;border:1.5px solid var(--warm-gray);border-radius:8px;text-align:center;font-size:0.82rem;cursor:pointer;transition:all 0.15s;background:#fff;font-weight:500}
.bk-time-slot:hover:not(.taken){border-color:var(--teal);color:var(--teal)}
.bk-time-slot.selected{background:var(--teal);border-color:var(--teal);color:#fff}
.bk-time-slot.taken{background:var(--cream);color:var(--slate-light);cursor:not-allowed;font-size:0.75rem}

/* ---- Nav Buttons ---- */
.bk-nav-btns{display:flex;gap:0.75rem;margin-top:1.75rem}
.bk-btn-next{flex:1;background:var(--teal);color:#fff;border:none;padding:0.85rem;border-radius:100px;font-family:var(--font-body);font-size:0.95rem;font-weight:700;cursor:pointer;transition:all 0.2s}
.bk-btn-next:hover{background:var(--teal-dark);transform:translateY(-1px)}
.bk-btn-back{background:var(--cream);color:var(--slate-mid);border:1.5px solid var(--warm-gray);padding:0.85rem 1.25rem;border-radius:100px;font-family:var(--font-body);font-size:0.95rem;font-weight:600;cursor:pointer;transition:all 0.2s}
.bk-btn-back:hover{border-color:var(--slate-mid)}
.bk-btn-submit{flex:1;background:var(--red);color:#fff;border:none;padding:0.85rem;border-radius:100px;font-family:var(--font-body);font-size:0.95rem;font-weight:700;cursor:pointer;transition:all 0.2s}
.bk-btn-submit:hover{background:var(--red-dark);transform:translateY(-1px)}

/* ---- Summary Sidebar ---- */
.bk-summary{background:var(--black);border-radius:20px;padding:1.75rem;position:sticky;top:90px}
.bk-summary h3{font-family:var(--font-display);font-size:1.5rem;letter-spacing:0.04em;color:#fff;margin-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:1rem}
.bk-sum-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.85rem;gap:1rem}
.bk-sum-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.4)}
.bk-sum-val{font-size:0.88rem;color:#fff;font-weight:500;text-align:right;max-width:170px}
.bk-sum-price{font-family:var(--font-display);font-size:2.5rem;color:var(--yellow);line-height:1;margin:1.25rem 0;text-align:center}
.bk-sum-note{font-size:0.78rem;color:rgba(255,255,255,0.35);line-height:1.6;margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.08)}
.bk-contact-bar{background:var(--teal-pale);border:1px solid var(--teal);border-radius:12px;padding:1rem;margin-top:1.25rem;font-size:0.82rem;color:var(--teal-dark);line-height:1.7}
.bk-contact-bar strong{display:block;font-weight:700;margin-bottom:2px}
.bk-contact-bar a{color:var(--teal-dark);font-weight:600}

/* ---- Validation ---- */
.bk-error{font-size:0.78rem;color:var(--red);margin-top:4px;display:none}
.bk-input.invalid{border-color:var(--red)}
.bk-note-box{background:var(--yellow-pale);border-left:4px solid var(--yellow-dark);border-radius:0 10px 10px 0;padding:1rem 1.25rem;font-size:0.85rem;color:var(--black);line-height:1.65;margin-bottom:1.5rem}

/* ---- Booking mobile fixes ---- */
@media(max-width:480px){
  .bk-name-row{grid-template-columns:1fr !important}
  .bk-input,textarea.bk-input,select.bk-input{font-size:16px} /* prevent iOS zoom */
  .bk-nav-btns{flex-direction:column}
  .bk-btn-back{width:100%;text-align:center}
  .bk-time-grid{grid-template-columns:repeat(3,1fr)}
  .bk-cal-day{padding:0.4rem 0;font-size:0.78rem}
  .bk-cal-day-name{font-size:0.6rem;padding:0.35rem 0}
}

/* ---- Confirmation ---- */
.bk-confirm-wrap{text-align:center;padding:1.5rem 0.5rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}
/* When showing the confirmation screen, centre the card and hide sidebar */
.bk-main.bk-confirmed{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;gap:0;padding-left:1rem;padding-right:1rem}
.bk-main.bk-confirmed .bk-summary{display:none}
.bk-main.bk-confirmed .bk-steps{display:none}
.bk-confirm-icon{width:72px;height:72px;background:var(--teal-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.bk-confirm-icon svg{width:32px;height:32px;stroke:var(--teal);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.bk-confirm-details{background:var(--cream);border-radius:12px;padding:1.25rem;text-align:left;margin-bottom:1.5rem}
.bk-confirm-details .bk-sum-row{border-bottom:1px solid var(--warm-gray);padding-bottom:0.75rem;margin-bottom:0.75rem}
.bk-confirm-details .bk-sum-row:last-child{border-bottom:none;margin-bottom:0}
.bk-confirm-details .bk-sum-label{color:var(--slate-mid)}
.bk-confirm-details .bk-sum-val{color:var(--black);max-width:none}

/* ---- Sections ---- */
.bk-section{display:none}
.bk-section.active{display:block}

/* === BLOCK 10: Loyalty page === */
/* ---- Loyalty Page ---- */
.ly-hero{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);padding:4rem 2rem 3rem;border-bottom:1px solid rgba(255,255,255,0.06)}
.ly-hero-inner{max-width:960px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.ly-hero h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);color:#fff;letter-spacing:0.03em;line-height:1}
.ly-hero p{color:rgba(255,255,255,0.5);font-size:0.95rem;margin-top:0.5rem;max-width:480px;line-height:1.6}
.ly-back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.5);font-size:0.85rem;font-weight:600;cursor:pointer;border:none;background:none;padding:0;transition:color 0.2s}
.ly-back:hover{color:var(--yellow)}
.ly-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ---- Main layout ---- */
.ly-main{max-width:960px;margin:0 auto;padding:3rem 2rem 5rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
@media(max-width:768px){
  .ly-main{grid-template-columns:1fr;padding:2rem 1rem 4rem}
  .ly-hero{padding:2rem 1.25rem 1.75rem}
  .ly-hero-inner{flex-direction:column;align-items:flex-start}
  .ly-card{padding:1.25rem}
  .ly-input{font-size:16px} /* prevent iOS zoom */
}

/* ---- Sign up card ---- */
.ly-card{background:#1e293b;border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:2rem}
.ly-card h2{font-family:var(--font-display);font-size:1.8rem;letter-spacing:0.03em;color:#fff;margin-bottom:0.35rem}
.ly-card-sub{font-size:0.85rem;color:rgba(255,255,255,0.4);margin-bottom:1.75rem;line-height:1.5}
.ly-field{margin-bottom:1.1rem}
.ly-label{display:block;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.4);margin-bottom:5px}
.ly-label span{color:var(--red)}
.ly-input{width:100%;padding:0.75rem 1rem;background:#0f172a;border:1.5px solid rgba(255,255,255,0.1);border-radius:10px;font-family:var(--font-body);font-size:0.95rem;color:#fff;outline:none;transition:border-color 0.2s}
.ly-input:focus{border-color:var(--teal)}
.ly-input::placeholder{color:rgba(255,255,255,0.2)}
.ly-btn{width:100%;background:var(--teal);color:#fff;border:none;padding:0.9rem;border-radius:100px;font-family:var(--font-body);font-size:0.95rem;font-weight:700;cursor:pointer;transition:all 0.2s;margin-top:0.5rem}
.ly-btn:hover{background:var(--teal-dark);transform:translateY(-1px)}
.ly-divider{display:flex;align-items:center;gap:1rem;margin:1.25rem 0}
.ly-divider::before,.ly-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.08)}
.ly-divider span{font-size:0.78rem;color:rgba(255,255,255,0.25);white-space:nowrap}
.ly-login-link{text-align:center;font-size:0.85rem;color:rgba(255,255,255,0.4)}
.ly-login-link button{background:none;border:none;color:var(--teal);font-weight:600;cursor:pointer;font-family:var(--font-body);font-size:0.85rem;text-decoration:underline}

/* ---- Preview card ---- */
.ly-preview{display:flex;flex-direction:column;gap:1.5rem}
.ly-membership-card{background:linear-gradient(135deg,var(--teal) 0%,#0f172a 100%);border-radius:16px;padding:1.75rem;position:relative;overflow:hidden}
.ly-membership-card::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:rgba(255,255,255,0.05);border-radius:50%}
.ly-membership-card::after{content:'';position:absolute;bottom:-30px;left:-30px;width:120px;height:120px;background:rgba(255,255,255,0.03);border-radius:50%}
.ly-card-logo{font-family:var(--font-display);font-size:0.9rem;letter-spacing:0.15em;color:rgba(255,255,255,0.5);margin-bottom:1.5rem;text-transform:uppercase}
.ly-card-name{font-family:var(--font-display);font-size:1.4rem;color:#fff;letter-spacing:0.05em;margin-bottom:0.25rem}
.ly-card-number{font-family:var(--font-mono);font-size:0.82rem;color:rgba(255,255,255,0.4);margin-bottom:1.5rem;letter-spacing:0.12em}
.ly-card-points-row{display:flex;justify-content:space-between;align-items:flex-end}
.ly-card-pts-val{font-family:var(--font-display);font-size:2.5rem;color:var(--yellow);line-height:1}
.ly-card-pts-label{font-size:0.7rem;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.1em;margin-top:4px}
.ly-card-tier{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;padding:3px 10px;border-radius:100px;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6)}

/* ---- Perks ---- */
.ly-perks{background:#1e293b;border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:1.5rem}
.ly-perks h3{font-family:var(--font-display);font-size:1.2rem;letter-spacing:0.04em;color:#fff;margin-bottom:1.25rem}
.ly-perk{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.06)}
.ly-perk:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.ly-perk-icon{width:36px;height:36px;border-radius:10px;background:rgba(58,140,110,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ly-perk-icon svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ly-perk-title{font-weight:600;font-size:0.9rem;color:#fff;margin-bottom:2px}
.ly-perk-desc{font-size:0.8rem;color:rgba(255,255,255,0.4);line-height:1.5}

/* ---- Tiers ---- */
.ly-tiers{background:#1e293b;border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:1.5rem;margin-top:0}
.ly-tiers h3{font-family:var(--font-display);font-size:1.2rem;letter-spacing:0.04em;color:#fff;margin-bottom:1.25rem}
.ly-tier-row{display:flex;align-items:center;gap:1rem;padding:0.85rem;border-radius:10px;margin-bottom:0.5rem;border:1px solid rgba(255,255,255,0.06)}
.ly-tier-row.bronze{background:rgba(205,127,50,0.1);border-color:rgba(205,127,50,0.2)}
.ly-tier-row.silver{background:rgba(192,192,192,0.1);border-color:rgba(192,192,192,0.2)}
.ly-tier-row.gold{background:rgba(255,215,0,0.08);border-color:rgba(255,215,0,0.2)}
.ly-tier-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.ly-tier-dot.bronze{background:#cd7f32}
.ly-tier-dot.silver{background:#c0c0c0}
.ly-tier-dot.gold{background:#ffd700}
.ly-tier-name{font-weight:700;font-size:0.88rem;color:#fff;min-width:60px}
.ly-tier-pts{font-family:var(--font-mono);font-size:0.82rem;color:rgba(255,255,255,0.4);flex:1}
.ly-tier-bonus{font-size:0.78rem;color:rgba(255,255,255,0.5);text-align:right}

/* ---- Success state ---- */
.ly-success{display:none;text-align:center;padding:1.5rem 0.5rem}
.ly-success-icon{width:72px;height:72px;background:rgba(58,140,110,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.ly-success-icon svg{width:32px;height:32px;stroke:var(--teal);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ---- Login form ---- */
.ly-login-form{display:none}

/* ---- Error ---- */
.ly-error{font-size:0.78rem;color:#f87171;margin-top:4px;display:none}
.ly-input.invalid{border-color:#f87171}

/* ---- Loyalty page mobile fixes ---- */
@media(max-width:480px){
  .ly-input{font-size:16px} /* prevent iOS zoom */
  .ly-card{padding:1rem}
  .ly-btn{font-size:0.9rem}
  .ly-tier-row{flex-wrap:wrap;gap:0.5rem}
  .ly-tier-bonus{text-align:left}
}

/* === BLOCK 11: Shop cart button === */
.sh-cart-btn{position:fixed;top:80px;right:1.5rem;z-index:9998;background:var(--black);color:#fff;border:none;padding:0.65rem 1.1rem;border-radius:100px;font-family:var(--font-body);font-size:0.82rem;font-weight:600;cursor:pointer;display:none;align-items:center;gap:7px;box-shadow:0 4px 16px rgba(0,0,0,0.25);transition:all 0.2s}
.sh-cart-btn:hover{background:var(--teal)}
.sh-cart-badge{background:var(--red);color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700}

/* Cart overlay */
.sh-cart-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99990;justify-content:flex-end}
.sh-cart-overlay.open{display:flex}
.sh-cart-panel{background:#fff;width:100%;max-width:420px;height:100%;overflow-y:auto;display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,0.2)}
@media(max-width:480px){.sh-cart-panel{max-width:100vw}}
.sh-cart-head{background:var(--black);padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center}
.sh-cart-head h3{font-family:var(--font-display);font-size:1.5rem;letter-spacing:0.04em;color:#fff;margin:0}
.sh-cart-close{background:none;border:none;color:rgba(255,255,255,0.6);font-size:1.4rem;cursor:pointer;padding:0 6px}
.sh-cart-body{flex:1;padding:1.25rem 1.5rem;overflow-y:auto}
.sh-cart-item{display:flex;gap:0.75rem;align-items:flex-start;padding:0.85rem 0;border-bottom:1px solid var(--warm-gray)}
.sh-cart-item:last-child{border-bottom:none}
.sh-cart-item-img{width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--cream);flex-shrink:0}
.sh-cart-item-info{flex:1}
.sh-cart-item-name{font-weight:600;font-size:0.9rem;color:var(--black);line-height:1.3}
.sh-cart-item-price{font-size:0.82rem;color:var(--slate-mid);margin-top:2px}
.sh-cart-qty{display:flex;align-items:center;gap:6px;margin-top:6px}
.sh-cart-qty-btn{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--warm-gray);background:#fff;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--black);transition:all 0.15s}
.sh-cart-qty-btn:hover{border-color:var(--teal);color:var(--teal)}
.sh-cart-qty-num{font-size:0.88rem;font-weight:600;min-width:20px;text-align:center}
.sh-cart-item-del{background:none;border:none;color:var(--slate-light);cursor:pointer;font-size:1rem;padding:0 4px;transition:color 0.15s}
.sh-cart-item-del:hover{color:var(--red)}
.sh-cart-empty{text-align:center;padding:3rem 1rem;color:var(--slate-mid)}

/* Loyalty redeem in cart */
.sh-cart-redeem{background:rgba(245,230,66,0.08);border:1.5px solid rgba(245,230,66,0.3);border-radius:12px;padding:1rem 1.1rem;margin:1rem 0}
.sh-cart-redeem-title{font-weight:700;font-size:0.88rem;color:var(--black);margin-bottom:4px}
.sh-cart-redeem-sub{font-size:0.78rem;color:var(--slate-mid);margin-bottom:0.75rem}

/* Cart footer */
.sh-cart-foot{padding:1.25rem 1.5rem;border-top:1px solid var(--warm-gray);background:var(--cream)}
.sh-cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}
.sh-cart-total-label{font-size:0.85rem;color:var(--slate-mid)}
.sh-cart-total-val{font-weight:700;font-size:0.95rem;color:var(--black)}
.sh-cart-grand{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-top:0.75rem;border-top:1px solid var(--warm-gray)}
.sh-cart-grand-label{font-weight:700;font-size:1rem;color:var(--black)}
.sh-cart-grand-val{font-family:var(--font-display);font-size:1.6rem;color:var(--teal)}
.sh-checkout-btn{width:100%;background:var(--teal);color:#fff;border:none;padding:0.9rem;border-radius:100px;font-family:var(--font-body);font-size:0.95rem;font-weight:700;cursor:pointer;transition:all 0.2s;margin-bottom:0.5rem}
.sh-checkout-btn:hover{background:var(--teal-dark)}
.sh-checkout-btn:disabled{background:var(--slate-light);cursor:not-allowed}
.sh-continue-btn{width:100%;background:none;border:1.5px solid var(--warm-gray);color:var(--slate-mid);padding:0.7rem;border-radius:100px;font-family:var(--font-body);font-size:0.88rem;font-weight:600;cursor:pointer;transition:all 0.2s}
.sh-continue-btn:hover{border-color:var(--black);color:var(--black)}

/* Checkout success */
.sh-checkout-success{text-align:center;padding:2rem 1rem}
.sh-checkout-success-icon{width:64px;height:64px;background:var(--teal-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.sh-checkout-success-icon svg{width:28px;height:28px;stroke:var(--teal);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* === BLOCK 12: Privacy page === */
#privacy-page {
  padding-top: 72px;
  background: var(--cream);
  min-height: 100vh;
}
.privacy-outer {
  max-width: 900px;
  margin: 0 auto;
  padding: 3.5rem clamp(1.5rem, 5vw, 4rem) 6rem;
}
.privacy-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-mid);
  cursor: pointer;
  margin-bottom: 2.5rem;
  padding: 0;
  transition: color 0.2s;
}
.privacy-back:hover { color: var(--teal); }
.privacy-hero { margin-bottom: 2.5rem; }
.privacy-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  letter-spacing: 0.04em;
  color: var(--black);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.privacy-meta {
  font-size: 0.88rem;
  color: var(--slate-mid);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: center;
}
.privacy-meta strong { color: var(--black); }
.privacy-divider {
  border: none;
  border-top: 3px solid var(--yellow);
  margin-bottom: 3rem;
}
/* Two-column layout on wide screens */
.privacy-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 720px) {
  .privacy-layout { grid-template-columns: 1fr; gap: 0; }
  .privacy-toc { display: none; }
}
/* Sticky TOC sidebar */
.privacy-toc {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.privacy-toc-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-mid);
  margin-bottom: 0.75rem;
  width: 100%;
}
.privacy-toc a {
  display: block;
  width: 100%;
  font-size: 0.82rem;
  color: var(--slate);
  text-decoration: none;
  padding: 0.3rem 0.75rem;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  line-height: 1.35;
}
.privacy-toc a:hover {
  color: var(--teal);
  border-left-color: var(--teal);
}
/* Sections */
.privacy-sections {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.privacy-section {
  scroll-margin-top: 100px;
}
.privacy-section h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--black);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.privacy-section p {
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.8;
  margin-top: 0.6rem;
}
.privacy-section ul {
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.8;
  padding-left: 1.25rem;
  margin-top: 0.5rem;
}
.privacy-section ul li { margin-bottom: 0.3rem; }
.privacy-section a { color: var(--teal); }
.privacy-updated {
  font-size: 0.82rem;
  color: var(--slate-mid);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* === BLOCK 13: eBike page === */
.eb-hero{background:var(--black);padding:3.5rem 2rem 3rem}
.eb-hero-inner{max-width:1200px;margin:0 auto}
.eb-back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.6);font-size:0.85rem;font-weight:600;cursor:pointer;border:none;background:none;padding:0;margin-bottom:2rem;transition:color 0.2s}
.eb-back:hover{color:var(--yellow)}
.eb-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.eb-hero-label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:var(--teal);margin-bottom:0.75rem;display:flex;align-items:center;gap:8px}
.eb-hero-label::before{content:'';display:block;width:24px;height:2px;background:var(--red)}
.eb-hero h1{font-family:var(--font-display);font-size:clamp(3rem,7vw,5.5rem);color:#fff;letter-spacing:0.02em;line-height:0.95;margin-bottom:1.25rem}
.eb-hero h1 em{font-style:normal;color:var(--yellow)}
.eb-hero-desc{font-size:1.05rem;color:rgba(255,255,255,0.55);max-width:560px;line-height:1.75;font-weight:300;margin-bottom:2rem}
.eb-hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.eb-body{max-width:1200px;margin:0 auto;padding:3.5rem 2rem 5rem}
.eb-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start;margin-bottom:3.5rem;max-width:600px}
@media(max-width:768px){.eb-hero{padding:2.5rem 1.25rem 2.25rem}.eb-body{padding:2.5rem 1.25rem 4rem}}
.eb-cert-panel{background:var(--black);border-radius:20px;padding:2rem;display:flex;flex-direction:column;gap:1rem}
.eb-cert-row{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center}
.eb-cert-name{font-weight:700;color:#fff;font-size:0.95rem}
.eb-cert-sub{font-size:0.8rem;color:rgba(255,255,255,0.4);margin-top:2px}
.eb-cert-tick{font-family:var(--font-display);font-size:1.6rem;color:var(--yellow);line-height:1}
.eb-cert-all{background:rgba(58,140,110,0.15);border:1px solid rgba(58,140,110,0.3);border-radius:14px;padding:1.25rem 1.5rem}
.eb-cert-all-label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--teal);margin-bottom:6px}
.eb-cert-all-text{font-size:0.85rem;color:rgba(255,255,255,0.6);line-height:1.6}
.eb-prices-panel{background:#fff;border:1px solid var(--warm-gray);border-radius:20px;padding:2rem}
.eb-prices-title{font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.04em;color:var(--black);margin-bottom:1.25rem}
.eb-price-row{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border:1px solid var(--warm-gray);border-radius:12px;margin-bottom:0.75rem}
.eb-price-row:last-child{margin-bottom:0}
.eb-price-name{font-weight:500;font-size:0.95rem;color:var(--black)}
.eb-price-val{font-family:var(--font-mono);font-size:1rem;color:var(--teal);font-weight:500}
.eb-services-section{margin-bottom:3.5rem}
.eb-section-title{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.5rem);letter-spacing:0.02em;color:var(--black);margin-bottom:0.5rem}
.eb-section-desc{font-size:1rem;color:var(--slate-mid);line-height:1.75;font-weight:300;margin-bottom:2rem;max-width:600px}
.eb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:900px){.eb-cards{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.eb-cards{grid-template-columns:1fr}}
.eb-card{background:#fff;border:1px solid var(--warm-gray);border-radius:18px;padding:2rem;display:flex;flex-direction:column;position:relative;transition:transform 0.3s,box-shadow 0.3s}
.eb-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,0.07)}
.eb-card.popular{background:var(--teal);border-color:var(--teal)}
.eb-card-badge{position:absolute;top:1.25rem;right:1.25rem;background:var(--red);color:#fff;font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.25rem 0.65rem;border-radius:100px}
.eb-card-tier{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--teal);margin-bottom:0.75rem}
.eb-card.popular .eb-card-tier{color:var(--yellow)}
.eb-card-price{font-family:var(--font-display);font-size:3.5rem;line-height:1;letter-spacing:0.02em;color:var(--black);margin-bottom:0.2rem}
.eb-card.popular .eb-card-price{color:#fff}
.eb-card-desc{font-size:0.88rem;color:var(--slate-mid);line-height:1.6;margin-bottom:1.5rem;font-weight:300}
.eb-card.popular .eb-card-desc{color:rgba(255,255,255,0.6)}
.eb-card-features{list-style:none;display:flex;flex-direction:column;gap:0.75rem;margin-bottom:2rem;flex:1}
.eb-card-feature{display:flex;align-items:flex-start;gap:10px;font-size:0.86rem;color:var(--slate);padding-bottom:0.75rem;border-bottom:1px solid var(--warm-gray)}
.eb-card.popular .eb-card-feature{color:rgba(255,255,255,0.8);border-color:rgba(255,255,255,0.1)}
.eb-card-feature:last-child{border-bottom:none;padding-bottom:0}
.eb-card-feature svg{width:15px;height:15px;flex-shrink:0;stroke:var(--red-dark);fill:none;stroke-width:2.5;margin-top:2px}
.eb-card.popular .eb-card-feature svg{stroke:var(--yellow)}
.eb-card-btn{display:block;text-align:center;padding:0.8rem;border-radius:100px;font-weight:600;font-size:0.88rem;cursor:pointer;border:none;transition:all 0.2s;text-decoration:none;letter-spacing:0.02em}
.eb-card-btn-outline{background:transparent;border:1.5px solid var(--warm-gray);color:var(--black)}
.eb-card-btn-outline:hover{border-color:var(--red);color:var(--red-dark)}
.eb-card-btn-solid{background:var(--red);color:#fff}
.eb-card-btn-solid:hover{background:var(--red-dark)}
.eb-info-strip{background:var(--black);border-radius:20px;padding:2.5rem;display:flex;gap:2rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.eb-info-strip-text h3{font-family:var(--font-display);font-size:1.6rem;color:#fff;letter-spacing:0.03em;margin-bottom:0.4rem}
.eb-info-strip-text p{font-size:0.9rem;color:rgba(255,255,255,0.5);line-height:1.65;max-width:480px}

/* === BLOCK 14: Spinner keyframe (was inline in price list loader) === */
@keyframes spin{to{transform:rotate(360deg)}}

/* === BLOCK 10b: Shop page — hero, sidebar, grid, cards (was lines 3639-3712) === */
.sh-hero{background:var(--black);padding:3.5rem 2rem 2.5rem}
.sh-hero-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.sh-hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,4rem);color:#fff;letter-spacing:0.03em;line-height:1}
.sh-hero p{color:rgba(255,255,255,0.5);font-size:0.95rem;margin-top:0.4rem}
.sh-back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.7);font-size:0.85rem;font-weight:600;cursor:pointer;border:none;background:none;padding:0}
.sh-back:hover{color:var(--yellow)}
.sh-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sh-main{max-width:1200px;margin:0 auto;padding:2.5rem 2rem 5rem;display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:start}
@media(max-width:900px){.sh-main{grid-template-columns:1fr}}
@media(max-width:768px){
  .sh-main{padding:1.5rem 1rem 4rem}
  .sh-hero{padding:2rem 1.25rem 1.75rem}
  .sh-price-input,.sh-sort-select{font-size:16px} /* prevent iOS zoom */
}
/* Shop page: no overflow-x restriction so the mobile carousel can scroll freely.
   The global html/body overflow-x:clip already prevents page-level horizontal scroll. */
#shop-page{overflow-x:visible}
.sh-sidebar{background:#fff;border:1px solid var(--warm-gray);border-radius:16px;padding:1.5rem;position:sticky;top:90px}
@media(max-width:900px){.sh-sidebar{position:static}}
.sh-sidebar h3{font-family:var(--font-display);font-size:1.3rem;letter-spacing:0.04em;color:var(--black);margin-bottom:1.25rem}
.sh-filter-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--warm-gray)}
.sh-filter-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.sh-filter-label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--slate-mid);margin-bottom:0.75rem}
.sh-cat-btn{display:block;width:100%;text-align:left;padding:0.55rem 0.85rem;border-radius:8px;font-family:var(--font-body);font-size:0.88rem;font-weight:500;color:var(--slate-mid);background:none;border:none;cursor:pointer;transition:all 0.15s;margin-bottom:2px}
.sh-cat-btn:hover{background:var(--cream);color:var(--black)}
.sh-cat-btn.active{background:var(--teal-pale);color:var(--teal-dark);font-weight:700}
.sh-price-inputs{display:flex;gap:0.5rem;align-items:center}
.sh-price-input{width:100%;padding:0.5rem 0.75rem;border:1.5px solid var(--warm-gray);border-radius:8px;font-family:var(--font-body);font-size:0.85rem;color:var(--black);outline:none;background:#fff}
.sh-price-input:focus{border-color:var(--teal)}
.sh-price-sep{color:var(--slate-light);font-size:0.85rem;flex-shrink:0}
.sh-sort-select{width:100%;padding:0.55rem 0.75rem;border:1.5px solid var(--warm-gray);border-radius:8px;font-family:var(--font-body);font-size:0.85rem;color:var(--black);outline:none;background:#fff;cursor:pointer}
.sh-clear-btn{display:block;width:100%;margin-top:1rem;padding:0.6rem;border-radius:100px;background:var(--cream);border:1.5px solid var(--warm-gray);font-family:var(--font-body);font-size:0.82rem;font-weight:600;color:var(--slate-mid);cursor:pointer;text-align:center;transition:all 0.2s}
.sh-clear-btn:hover{border-color:var(--red);color:var(--red)}
.sh-content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:0.75rem}
.sh-count{font-size:0.85rem;color:var(--slate-mid)}
.sh-count strong{color:var(--black)}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:1100px){.sh-grid{grid-template-columns:repeat(2,1fr)}}
/* Single-column stack on mobile — no carousel, no overflow tricks */
@media(max-width:600px){
  .sh-grid{
    grid-template-columns:1fr !important;
    display:grid !important;
    gap:1rem;
    overflow:visible;
  }
  .sh-grid .sh-card{
    width:100%;
    max-width:none;
  }
}
/* Mobile dots hidden — not needed for stacked layout */
.sh-mobile-dots{display:none !important}
.sh-mobile-dot{display:none}
.sh-card{background:#fff;border:1px solid var(--warm-gray);border-radius:16px;overflow:hidden;cursor:pointer;transition:all 0.25s;display:flex;flex-direction:column}
.sh-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.08);border-color:var(--teal)}
.sh-card-img{aspect-ratio:1;overflow:hidden;position:relative;background:var(--cream)}
.sh-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.sh-card:hover .sh-card-img img{transform:scale(1.06)}
.sh-badge{position:absolute;top:0.75rem;left:0.75rem;font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px}
.sh-badge.new{background:var(--teal);color:#fff}
.sh-badge.sale{background:var(--red);color:#fff}
.sh-badge.popular{background:var(--yellow);color:var(--black)}
.sh-card-body{padding:1rem 1.1rem 1.25rem;flex:1;display:flex;flex-direction:column}
.sh-card-cat{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--teal);margin-bottom:4px}
.sh-card-name{font-weight:700;font-size:0.95rem;color:var(--black);margin-bottom:4px;line-height:1.4}
.sh-card-desc{font-size:0.8rem;color:var(--slate-mid);line-height:1.5;margin-bottom:0.85rem;flex:1}
.sh-card-footer{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;margin-top:auto}
.sh-card-price{font-family:var(--font-mono);font-size:1.05rem;font-weight:600;color:var(--black)}
.sh-add-btn{background:var(--teal);color:#fff;border:none;padding:0.5rem 1rem;border-radius:100px;font-family:var(--font-body);font-size:0.8rem;font-weight:700;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.sh-add-btn:hover{background:var(--teal-dark)}
.sh-empty{text-align:center;padding:4rem 2rem;color:var(--slate-mid)}