/* Quiet Luxury Color Palette */
:root {
    --sand-bg: #ECE5DA; /* Main Background */
    --ink-text: #0E1B1B; /* Primary Text */
    --card-bg: #F5F1E9;  /* Card Background */
    --forest-accent: #1F5E36; /* Forest (Primary Action) */
    --sage-line: #9DAA96; /* Sage (Subtle UI/Lines) */
    --hairline-border: rgba(14, 27, 27, 0.06); /* Lines */
    /* Featured carousel sizing controls (with safe fallbacks below) */
    --carousel-items: 3;        /* default ~3 items in view */
    --carousel-gap: 0.5rem;     /* gap between items (paired with margin-right) */
}

/* CRITICAL FIX: content-visibility causes glitching during scroll */
/* Browser recalculates layout as sections enter viewport - DISABLED */
/*
#featured,
#buy,
#contact {
  content-visibility: auto;
  contain-intrinsic-size: 1000px 800px;
}
*/

/* Ensure featured carousel keeps exact dimensions (no intrinsic placeholders) */
#featured .plate-card-container {
  content-visibility: visible;
  contain-intrinsic-size: auto;
  contain: none;
}
#featured .carousel-item-outer {
  content-visibility: visible;
  contain-intrinsic-size: auto;
  contain: none;
}

/* Ensure search inputs and sort dropdown text are always visible */
.search-input,
.sort-select {
  color: var(--ink-text) !important;
  -webkit-text-fill-color: var(--ink-text) !important;
  caret-color: var(--ink-text);
  background-color: #fff;
}
.sort-select option {
  color: var(--ink-text);
  background: #fff;
}

/* Desktop/tablet: enforce same plate proportions inside wishlist as grid */
@media (min-width: 641px) {
  .wishlist-content .plate-reg {
    width: 92%;
    max-width: 92%;
    margin: 0.35rem auto 1rem;
    padding: 4px 16px;
    aspect-ratio: 4.7 / 1;
    border-width: 2px;
    letter-spacing: 0.12em;
    font-size: clamp(1.25rem, 3.8vw, 1.75rem);
  }
}

  /* Prevent Safari/iOS auto text zoom that causes layout jumps */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  
  /* Extra fine-tuning for very small phones */
  @media (max-width: 400px) { :root { --carousel-items: 2.3; } }
  /* Ultra-common 360–390px devices: slightly larger cards for ~2.7 items.
     Placed after 400px rule and before 340px rule so <=340px still resolves to 2.0. */
  @media (max-width: 390px) and (min-width: 360px) { :root { --carousel-items: 2.7; } }
  @media (max-width: 340px) { :root { --carousel-items: 2.0; } }
/* Charles Wright / UK number plate font (place files in fonts/) */
  @font-face {
    font-family: 'UKNumberPlate';
    src: url('fonts/UKNumberPlate.woff2') format('woff2'),
       url('fonts/UKNumberPlate.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
@font-face {
  font-family: 'CharlesWright';
  src: url('fonts/CharlesWright-Bold.woff2') format('woff2'),
       url('fonts/CharlesWright-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Plate Grid Layout (moved from inline) */
#plate-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 2.25rem; /* ample separation to avoid overlap illusion */
        padding: 1rem 0;
        /* Prevent layout thrashing during scroll */
        /* CRITICAL: containment without content-visibility */
        /* contain: layout style; */
        /* will-change: contents; */
}

/* Constrain single search result cards so they don't appear oversized */
.search-result-card { 
  justify-self: center; 
  max-width: 560px; 
  width: 100%;
}
.search-result-card .plate-reg { 
  font-size: clamp(1rem, 1.6vw, 1.6rem) !important; 
}

/* Mobile Grid Enhancements - 50% smaller plates */
@media (max-width: 480px) {
    #plate-grid {
        grid-template-columns: repeat(2, 1fr); /* Maintain two columns */
        gap: 0.375rem; /* 50% reduction */
        padding: 0.125rem 0;
    }
    
    .plate-card-container {
        padding: 0.25rem 0.125rem 0.1875rem; /* 50% reduction */
    }
    
    .plate-reg {
        /* Match search page plate proportions */
        width: 84%;
        max-width: 84%;
        margin: 0.25rem auto; /* center */
        display: grid;
        place-items: center;
        box-sizing: border-box;
        font-size: clamp(0.95rem, 3vw, 1.15rem);
        font-weight: 900;
        letter-spacing: 0.09em; /* align with search */
        padding: 2px 8px;
        min-width: 0;
        aspect-ratio: 4.7 / 1; /* true UK ratio */
        border-width: 2px; /* consistent border on phones */
    }
    
    .price-chip {
        font-size: 0.65rem; /* Smaller */
        margin: 0 0 0.125rem 0; /* 50% reduction */
    }
    
    .view-details {
        font-size: 0.5rem; /* Much smaller */
        margin-top: 0.125rem; /* 50% reduction */
    }
}

/* Ensure cards calculate dimensions including borders/padding */
.plate-card-container, .soft-card { box-sizing: border-box; }

/* Keep hover stable, but ensure z-order is safe */
.soft-card:hover { z-index: 1; }

/* Nudge spacing for buttons to avoid crowding */
.plate-actions { margin-top: 0.25rem; }

/* Mobile Typography and Spacing Improvements */
@media (max-width: 640px) {
    /* Grid optimizations - 50% smaller for two-column layout */
    #plate-grid { 
        gap: 0.5rem; 
        grid-template-columns: repeat(2, 1fr); /* Force exactly 2 columns */
        padding: 0.25rem 0;
    }
    .plate-card-container { 
        padding: 0.375rem 0.25rem 0.25rem; /* 50% reduction */
    }
    .plate-actions { 
        margin-top: 0.0625rem; /* 50% reduction */
    }
    
    /* Typography improvements - much more compact */
    h1 {
        font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
        line-height: 1.05 !important;
        margin-bottom: 0.5rem !important;
    }
    
    h2 {
        font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h3 {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }
    
    /* Better mobile paragraph spacing */
    p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem;
    }
    /* Unify plate size across all phones up to 640px (grid + featured) */
    .plate-reg {
        width: 92% !important;
        max-width: 92% !important;
        margin: 0.35rem auto 0.9rem !important;
        padding: 2px 8px !important;
        aspect-ratio: 4.7 / 1 !important;
        border-width: 2px !important;
        letter-spacing: 0.09em !important;
        font-size: clamp(0.9rem, 2.4vw, 1.05rem) !important;
        line-height: 1 !important;
        display: grid !important; place-items: center !important;
    }
    
    /* Touch-friendly buttons but smaller */
    .cta-button {
        min-height: 40px;
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
        touch-action: manipulation;
    }
    /* Keep Find Plate and input the same size responsively */
    #search-button { font-size: clamp(1rem, 2.4vw, 1.25rem) !important; font-weight: 800 !important; }
    
    /* Improved section spacing - much more compact */
    section {
        padding: 1.5rem 0 !important;
    }
    
    #home {
        padding-top: 0.5rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Better mobile container padding */
    .max-w-7xl {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* How it works mobile optimization - much more compact */
    #hiw-mini-tabs {
        max-width: 100% !important;
        margin: 0 auto 1rem !important;
        padding: 0.25rem !important;
    }
    
    #hiw-mini-tabs button {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.8rem !important;
    }
    
    .hiw-mini-panel > div {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .hiw-mini-panel .soft-card {
        padding: 0.5rem 0.5rem 0.625rem !important;
    }
    
    .hiw-mini-panel .soft-card h3 {
        font-size: 0.85rem !important;
        margin: 0 0 0.25rem !important;
    }
    
    .hiw-mini-panel .soft-card p {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    #home h1, #home p { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }
    #home form { align-items: center !important; }
    #home .plate-search-input, #home #search-button { margin-left: auto !important; margin-right: auto !important; }
}

/* Base & Typography */
html {
    scroll-behavior: auto; /* Changed from smooth to auto to prevent glitching with JS scroll handlers */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--sand-bg);
    color: var(--ink-text);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Ensure page background is consistent; allow native pull-to-refresh */
html { background-color: var(--sand-bg); }

/* On phones, explicitly allow overscroll so users can pull-to-refresh */
@media (max-width: 768px) {
  html { overscroll-behavior-y: auto; }
}

/* Utility Classes */
.max-w-7xl { max-width: 1280px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* Global Link Styles */
a {
    color: var(--ink-text);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover, a:focus {
    color: var(--forest-accent);
}

/* Accessibility: Focus State */
:focus-visible {
    outline: 2px solid var(--forest-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* HEADER */
#header {
    background: var(--card-bg);
    position: sticky;
    top: 0;
    z-index: 50;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease;
    border-bottom: 1px solid var(--hairline-border);
}

/* Mobile header improvements */
@media (max-width: 768px) {
    /* Make top banner more compact */
    #header > div:first-child {
        padding: 0.125rem 0 !important;
    }
    /* Disable backdrop blur on mobile to avoid GPU scroll jank */
    #header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: rgba(236, 229, 218, 0.98) !important; }
    
    #header > div:first-child p {
        font-size: 0.6rem !important;
        letter-spacing: 0.05em !important;
    }
}
#header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
#header nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-grow: 1;
    justify-content: flex-end;
}
#header nav a {
    font-weight: 500;
    opacity: 0.9;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    white-space: nowrap;
}

.nav-linklike {
  background: none;
  border: 0;
  font: inherit;
  color: var(--ink-text);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  white-space: nowrap;
  border-radius: 10px;
  cursor: pointer;
}
.nav-linklike:hover, .nav-linklike:focus {
  background: rgba(31,94,54,0.10);
  color: var(--forest-accent);
}

/* Active nav state for accessibility and clarity */
#header nav a[aria-current="page"],
.mobile-nav-link[aria-current="page"] {
    color: var(--forest-accent) !important;
    background: rgba(31, 94, 54, 0.10);
    border-radius: 10px;
    font-weight: 600;
}

/* Subtle emphasized link style used occasionally in nav/body */
.cta-link {
    color: var(--forest-accent);
    font-weight: 600;
}

/* Dropdown (Buy) */
.nav-dropdown { position: relative; }
.dropdown-toggle {
    background: none;
    border: none;
    font: inherit;
    color: var(--ink-text);
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}
.dropdown-toggle:hover, .dropdown-toggle:focus { color: var(--forest-accent); }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: white;
    border: 1px solid var(--hairline-border);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    padding: 0.35rem;
    display: none;
    z-index: 60;
}
.dropdown-menu a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--ink-text);
    font-weight: 500;
}
.dropdown-menu a[aria-current="page"] {
    background: rgba(31,94,54,0.08);
    color: var(--forest-accent);
    font-weight: 600;
}
.dropdown-menu a:hover, .dropdown-menu a:focus { background: rgba(31,94,54,0.08); color: var(--forest-accent); }
.nav-dropdown.open .dropdown-menu { display: block; }

/* Desktop hover open */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .dropdown-menu { display: block; }
}
.cta-button {
    padding: 0.6rem 1.25rem;
    border-radius: 12px;
    background-color: var(--forest-accent);
    color: white !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color 0.2s;
    display: inline-flex;           /* center text perfectly */
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
}
.cta-button:hover { background-color: #164728; }

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s;
    position: relative;
    box-sizing: border-box; /* keep total height consistent across contexts */
    z-index: 1101; /* ensure it is always clickable above header contents */
}

.mobile-menu-btn:hover {
    background-color: rgba(31, 94, 54, 0.08);
}

.hamburger-line {
    width: 24px;
    height: 3px; /* keep consistent across breakpoints */
    background-color: var(--ink-text);
    margin: 2px 0;
    transition: 0.3s;
    border-radius: 2px;
}
/* No X animation on active: keep lines static */
.mobile-menu-btn.active .hamburger-line { transform: none; opacity: 1; }

/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: fixed;
    top: var(--header-offset, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(236, 229, 218, 0.98);
    z-index: 2000;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    overflow-y: auto;
    pointer-events: none; /* don't intercept when hidden */
}

.mobile-nav.active {
    opacity: 1;
    transform: translateY(0);
    display: block; /* ensure visible when active */
    pointer-events: auto; /* clickable when open */
}

.mobile-nav-content {
    padding: 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 1280px;
    margin: 0 auto;
    text-align: left;              /* left-align all items */
}

.mobile-nav-link {
    display: block;
    padding: 0.6rem 0.75rem;
    color: var(--ink-text);
    text-decoration: none;
    font-weight: 600;              /* key sections bold */
    border-radius: 10px;
    transition: all 0.2s;
    font-size: 1rem;
    line-height: 1.3;
    text-align: left;              /* left-aligned items */
}

.mobile-nav-link:hover {
    background-color: rgba(31, 94, 54, 0.08);
    color: var(--forest-accent);
}

/* Mobile Buy toggle (collapsible) */
.mobile-buy-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* keep left */
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.75rem; /* exactly match .mobile-nav-link */
    background: transparent; /* remove pill */
    border: none; /* remove pill border */
    border-radius: 12px; /* keep hover rounding consistent */
    font-weight: 600; /* equal to top-level links */
    color: var(--ink-text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
    border-bottom: 0; /* remove divider under Buy */
    margin-bottom: 0;
    line-height: 1.3; /* match link line-height */
}
.mobile-buy-toggle .arrow { font-size: 0.8rem; color: #6b7280; margin-left: auto; }
.mobile-submenu { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.2rem 0 0.35rem 0; margin-top: 0.1rem; }
.mobile-submenu .mobile-nav-link { padding-left: 0; display: block; text-align: left; font-weight: 400; }
.mobile-submenu[hidden] { display: none !important; }

.mobile-nav-cta {
    padding: 0.9rem 1.25rem;
    background-color: var(--forest-accent);
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    border-radius: 10px;
    text-align: left;              /* match left layout */
    margin-top: 0.35rem;
    transition: background-color 0.2s;
    font-size: 1rem;
}

.mobile-nav-cta:hover {
    background-color: #164728;
}

@media (max-width: 768px) {
    .mobile-menu-btn { display: flex !important; }
    
    .hamburger-line {
        width: 20px;
        height: 3px; /* match desktop thickness */
    }
    
    /* Hide desktop nav; center brand */
    #desktop-nav.desktop-nav { display: none !important; }
    
    /* Mobile nav is hidden until activated */
    .mobile-nav { display: none; }
    .mobile-nav.active { display: block !important; }
    
    #header-content {
        justify-content: center; /* center brand when hamburger hidden */
        align-items: center;
        min-height: 3rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        position: relative; /* allow absolute burger */
    }
    /* Place hamburger at top-right */
    #mobile-menu-btn { position: absolute; right: 0.5rem; top: 0.25rem; }
    
    /* Make logo and header much smaller */
    #header-content img {
        height: 2rem !important;
        margin-right: 0.5rem !important;
    }
    
    #header-content span {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
    }
    
    /* Compact mobile nav */
    .mobile-nav-content {
        padding: 0.75rem;
        gap: 0.45rem;
    }
    
    .mobile-nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }
    
    .mobile-nav-cta {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        margin-top: 0.2rem;
    }
}

/* HERO */
#home {
    min-height: auto; /* remove tall hero */
    padding-top: 0.5rem; /* tuck under nav */
    padding-bottom: 1.25rem; /* tighten gap above carousel */
    display: flex;
    align-items: flex-start; /* align content to top instead of vertical center */
    justify-content: center;
}
#home form { width: 100%; max-width: 24rem; margin-left: auto; margin-right: auto; }
.plate-search-input {
    width: 100%;
    max-width: 24rem;
    padding: 0.9rem 1rem;
    background-color: white;
    color: var(--ink-text);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    /* Desktop looked too large on some screens due to vw scaling. Use stable rem. */
    font-size: clamp(1rem, 1.125rem, 1.25rem);
    text-transform: uppercase;
    border: 3px solid var(--forest-accent);
    border-radius: 0.75rem;
    text-align: center;
    outline: none;
    transition: box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.plate-search-input:focus { box-shadow: 0 0 0 3px rgba(31,94,54,0.12); }
.plate-search-input:focus-visible { outline: none; }
.plate-search-input::placeholder {
     color: rgba(14, 27, 27, 0.6);
     text-transform: none;
}

/* General Card Style */
.soft-card {
    background-color: #ffffff; /* Use white for crisper card edges like featured */
    border: 1px solid var(--hairline-border);
    border-radius: 18px;
    transition: box-shadow 0.2s ease;
    overflow: hidden; /* Ensures all content respects rounded corners */
    /* CRITICAL: containment removed - causes glitching */
    /* contain: layout style paint; */
}
.soft-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transform: none; /* Remove lift to prevent visual overlap in grid */
}

/* Grid cards now use the same soft-card container structure as featured cards */

/* Plate Card */
.plate-card-container {
    /* Extra spacing within cards to avoid any cropped feel */
    padding: 2rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    border-radius: 18px; /* Match soft-card rounding */
    text-align: center;
    /* CRITICAL FIX: All performance hints removed - they cause glitching during scroll */
    /* contain: layout style paint; */
    /* contain-intrinsic-size: 320px; */
    /* content-visibility: auto; */
    /* will-change: auto; */
    /* transform: translateZ(0); */
}
.plate-reg {
    /* Realistic UK Yellow Plate Styling */
    background-color: #FFD200; /* Fallback to solid yellow to prevent white/transparent flash */
    background: linear-gradient(145deg, #FFD200 0%, #FFC400 100%);
    color: #000000;
    font-family: 'UKNumberPlate', 'CharlesWright', 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    border: 2px solid #333333; /* Slightly slimmer for a refined look */
    border-radius: 6px;
    /* Reduce vertical padding to keep overall height realistic */
    padding: 4px 16px;
    font-size: clamp(1.25rem, 3.8vw, 1.75rem);
    letter-spacing: 0.12em;
    line-height: 1; /* keep consistent across devices */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Consistent centering and width across all contexts */
    width: 92%;
    max-width: 92%;
    margin: 0.35rem auto 1rem; /* center horizontally */
    display: grid;            /* perfect text centering */
    place-items: center;
    box-sizing: border-box;
    box-shadow: 
        0 1.5px 3px rgba(0,0,0,0.10), /* Slightly softer seam */
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.08);
    text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.1);
    text-align: center;
    position: relative;
    
    /* True UK plate proportions (approx 520x111 -> ~4.7:1) */
    aspect-ratio: 4.7 / 1;
}
/* Add subtle reflection effect for realism */
.plate-reg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
    border-radius: 5px 5px 0 0;
    pointer-events: none;
}
.price-chip {
    font-weight: 700;
    font-size: 1.1rem; /* slightly smaller default for consistency */
    color: var(--ink-text);
    margin: 0 0 0.4rem 0;
}
.view-details {
    font-weight: 600;
    color: var(--forest-accent);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s, transform 0.2s;
}
.plate-card-container:hover .view-details {
    opacity: 1;
    transform: translateY(0);
}

/* Joined heart + enquire row (shared across cards) */
.plate-actions {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-top: 0.25rem;
    gap: 0;
    border-radius: 8px;           /* unified outer pill */
    overflow: hidden;             /* remove seam between segments */
}
.heart-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 94, 54, 0.75);
    color: #fff;
    border: 0;
    border-radius: 0; /* outer container handles rounding */
    padding: 0.4rem;
    cursor: pointer;
    margin: 0; /* ensure no visual gap when joined */
    line-height: 1; /* tighter vertical rhythm */
}
.enquire-btn {
    flex: 1;
    background: var(--forest-accent);
    color: #fff;
    border: 0;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 0; /* outer container handles rounding */
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.1;
    display: inline-flex; /* vertically center like heart */
    align-items: center;
    justify-content: center;
    margin: 0; /* remove default button margins to perfectly join */
    white-space: nowrap; /* prevent vertical stacking of text */
}

/* Wishlist Heart */
.wishlist-heart {
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wishlist-heart:hover {
    background: var(--sage-line) !important;
}
.wishlist-heart svg {
    fill: #d1d5db;
    transition: fill 0.2s;
}
.wishlist-heart.favorited svg {
    fill: #ef4444;
}

/* Default heart sizing (desktop/tablet) */
.plate-actions .wishlist-heart {
    width: 24px;
    min-width: 24px;
    padding: 0;
}
.plate-actions .wishlist-heart svg {
    width: 12px;
    height: 12px;
}

/* Wishlist Modal */
.wishlist-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4000; /* above WhatsApp FAB (1500) */
    align-items: center;
    justify-content: center;
}
.wishlist-modal.show {
    display: flex;
}
.wishlist-content {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    max-width: 820px; /* allow two grid cards side-by-side */
    width: 90%;
    max-height: 70vh;
    overflow-y: auto;
    position: relative;
    overscroll-behavior: contain;  /* smoother iOS scroll */
    -webkit-overflow-scrolling: touch;
}
.wishlist-content .wishlist-heart {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent !important; /* no chip background */
    border: 0 !important;
    border-radius: 6px;
    padding: 0.15rem;
    box-shadow: none !important;
    z-index: 5;
}
.wishlist-content .wishlist-heart svg {
    width: 14px;
    height: 14px;
}
.wishlist-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--ink-text);
}
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 320px); /* fixed track width so single item cannot stretch */
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center; /* center when 1 column */
    justify-items: center;   /* center items in their tracks */
    align-items: stretch;    /* equalize card heights across a row */
    grid-auto-rows: 1fr;     /* consistent heights */
}
/* Ensure wishlist cards don't grow too wide when alone */
.wishlist-content .plate-card-container { width: clamp(260px, 36vw, 320px); }
/* Ensure wishlist cards use a consistent vertical layout */
.wishlist-content .plate-card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}
.wishlist-content .view-details {
    background: var(--forest-accent);
    color: #fff;
    border: 0;
    margin-top: auto; /* push to bottom for alignment */
}
/* If there is exactly one item, keep a 2-column footprint so it looks identical to multi-item layout */
.wishlist-content.single .wishlist-grid { grid-template-columns: repeat(2, 320px); }
.wishlist-content.single .plate-card-container { width: 320px; }
.empty-wishlist {
    text-align: center;
    color: #6b7280;
    padding: 2rem;
}

/* Wishlist modal: compact layout on phones */
@media (max-width: 640px) {
    .wishlist-content { width: 94%; padding: 0.85rem; max-height: 82vh; }
    @supports (padding: env(safe-area-inset-bottom)) {
      .wishlist-content { padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
    }
    .wishlist-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 0.4rem; }
    /* Ensure 'single' mode stays compact on phones as well */
    .wishlist-content.single .wishlist-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .wishlist-content.single .plate-card-container { width: auto; }
    .wishlist-content .plate-card-container { padding: 0.4rem 0.45rem 0.35rem; gap: 0.25rem; width: 100% !important; }
    .wishlist-content .plate-reg {
        width: 84% !important;
        max-width: 84% !important;
        margin: 0.2rem auto 0.45rem !important;
        padding: 2px 8px !important;
        border-width: 2px !important;
        font-size: clamp(0.82rem, 2.3vw, 0.96rem) !important;
        letter-spacing: 0.09em !important;
    }
    .wishlist-content .price-chip { font-size: 0.72rem; margin: 0 0 0.2rem; text-align:center; }
    .wishlist-content .view-details { opacity: 1 !important; transform: none !important; width: 100% !important; display: inline-flex; align-items:center; justify-content:center; padding: 0.38rem 0.5rem !important; font-size: 0.78rem !important; border-radius: 8px !important; min-height: 34px; }
    .wishlist-content .plate-actions .wishlist-heart { width: 22px; min-width: 22px; }
    .wishlist-content .plate-actions .wishlist-heart svg { width: 11px; height: 11px; }
    .wishlist-content .wishlist-heart { top: 4px; right: 6px; padding: 0.15rem; background: transparent !important; }
    .wishlist-content .wishlist-heart svg { width: 12px; height: 12px; }
}

/* Scrolling Carousel */
.scrolling-wrapper {
    overflow: hidden;
    /* Prevent horizontal touch drag to avoid iOS transform glitches */
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    -webkit-user-select: none; user-select: none;
    -webkit-user-drag: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    position: relative;
    padding: 0.25rem 0; /* gentle vertical breathing room */
}
@media (max-width: 639px) {
    .scrolling-wrapper {
        padding: 0; /* remove container padding on mobile */
        /* Remove masks on iOS Safari to avoid invisible content during transform animations */
        -webkit-mask-image: none;
        mask-image: none;
    }
    .carousel-item-outer {
        /* Aim for ~3 cards across on phones */
        width: calc((100vw - (var(--carousel-gap, 0.5rem) * 2)) / 3);
        max-width: 220px;
        min-width: 110px;
    }
}

.scrolling-content {
    display: inline-flex; /* ensure content width is defined by children on iOS Safari */
    width: auto;         /* avoid fit-content collapsing issues on some mobile browsers */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.carousel-item-outer {
    flex-shrink: 0;
    /* Variable-driven sizing */
    margin-right: var(--carousel-gap, 1rem);
    /* Responsive width target: container width minus gaps divided by desired items */
    width: clamp(220px,
      calc((100vw - (2 * var(--carousel-hpad, 0rem)) - (var(--carousel-gap, 1rem) * (var(--carousel-items, 3) - 1))) / var(--carousel-items, 3)),
      360px);
    /* CRITICAL: content-visibility disabled - causes glitching during scroll */
    /* contain: content; */
    /* contain-intrinsic-size: 260px; */
    /* content-visibility: auto; */
}

@media (max-width: 640px) {
    /* Control items-per-view via variables (used by width calc on .carousel-item-outer) */
    :root { --carousel-items: 3; --carousel-gap: 0.5rem; }
    
    /* Make featured section more compact */
    #featured {
        padding: 1.125rem 0 2rem !important; /* 50% reduction */
    }
    
    .scrolling-wrapper {
        margin-bottom: 1rem !important; /* 50% reduction */
    }
    /* Ensure ~3 across at typical phone widths (wins cascade over general rule) */
    .carousel-item-outer {
        width: calc((100vw - (var(--carousel-gap, 0.5rem) * 2)) / 3) !important;
        max-width: 220px !important;
        min-width: 110px !important;
    }
    /* Ensure featured plates match grid proportions and are centered on phones */
    #featured .plate-reg {
        width: 92%;
        max-width: 92%;
        margin: 0.35rem auto 1rem;
        font-size: clamp(0.95rem, 3vw, 1.15rem);
        letter-spacing: 0.09em;
        padding: 2px 8px;
        aspect-ratio: 4.7 / 1;
        border-width: 2px;
    }
}
.scroll-to-left { animation: scroll-left var(--scroll-duration, 180s) linear infinite; }
/* Use the same keyframes but reverse direction so initial position is 0, preventing blank-on-load on iOS */
.scroll-to-right { animation: scroll-left var(--scroll-duration, 180s) linear infinite reverse; }

@keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* Skeleton placeholders (used while data loads) */
.skeleton-card { position: relative; }
.skeleton-block,
.skeleton-line,
.skeleton-pill {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  pointer-events: none;
}
/* Override plate visual while skeletoning */
.skeleton-card .plate-reg.skeleton-block {
  background: #e5e7eb !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
  /* Ensure exact same centering and sizing as live plates */
  margin: 0.35rem auto 1rem !important;
  width: inherit !important;
  max-width: inherit !important;
  aspect-ratio: 4.7 / 1 !important;
}
.skeleton-line { height: 12px; width: 60%; margin: 8px auto; border-radius: 6px; background: #e5e7eb; }
.skeleton-pill { height: 28px; background: #e5e7eb; border-radius: 999px; }
/* Make action row skeletons mirror joined heart + enquire layout */
.plate-actions .heart-segment.skeleton-pill { width: 36px; min-width: 36px; }
.plate-actions .enquire-btn.skeleton-pill { flex: 1; }
@media (max-width: 640px) {
  .skeleton-card .plate-reg.skeleton-block { width: 92% !important; max-width: 92% !important; }
}

/* Shimmer effect */
.skeleton-block::after,
.skeleton-line::after,
.skeleton-pill::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: skeleton-shimmer 1.2s infinite;
}
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-block::after, .skeleton-line::after, .skeleton-pill::after { animation: none; }
}

/* Laptop: make plate visuals nearly full-card width for a real UK plate feel */
@media (min-width: 1024px) {
  .plate-card-container .plate-reg {
    width: 94%;
    margin: 0.35rem auto 1rem;
    /* Match search page plate padding */
    padding: 4px 16px;
  }
  /* Ensure featured carousel plates also stretch nicely */
  #featured .plate-reg {
    width: 94%;
    margin: 0.35rem auto 1rem;
    /* Match grid and search plate proportions exactly */
    padding: 4px 16px;
    aspect-ratio: 4.7 / 1;
    font-size: clamp(1.25rem, 3.8vw, 1.75rem);
    border-width: 2px;
  }
}

/* Tablet: make carousel cards similar to grid cards */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --carousel-items: 3; --carousel-gap: 1rem; }
  .carousel-item-outer {
    /* Replace vw with rem to avoid zoomy appearance on laptops */
    width: clamp(260px, 20rem, 340px);
  }
}

/* Desktop/laptop: align carousel card width with grid card feel */
@media (min-width: 1024px) {
  :root { --carousel-items: 4; --carousel-gap: 1.25rem; }
  .carousel-item-outer {
    /* Use rem so cards look identical across laptop DPIs and zoom */
    width: clamp(280px, 21rem, 340px);
  }
}

/* Large desktop: prevent overgrowth but keep healthy size */
@media (min-width: 1280px) {
  :root { --carousel-items: 4; --carousel-gap: 1.25rem; }
  .carousel-item-outer {
    width: clamp(300px, 22rem, 360px);
  }
}

/* Smoother hover pause is handled via a small JS debounce and .paused class */
.scrolling-content.paused { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .scrolling-content { animation-play-state: paused !important; }
}

/* Contact Form */
.form-segment-toggle {
    display: flex;
    align-items: stretch;
    background-color: transparent; /* avoid beige showing under selected */
    border: 1px solid var(--sage-line);
    border-radius: 14px;
    padding: 0; /* remove internal padding to avoid beige gap */
    gap: 0;  /* no gap so selected fills edge-to-edge */
    overflow: hidden; /* clip any radius/offset to remove bottom gap */
    height: 44px; /* ensure vertical centering across the site */
}
.form-segment-toggle input[type="radio"] { display: none; }
.form-segment-toggle label {
    flex: 1;
    text-align: center;
    padding: 0 1rem; /* rely on fixed control height for vertical centering */
    cursor: pointer;
    border-radius: 0; /* outer corners handled below */
    font-weight: 600;
    color: var(--ink-text);
    transition: background-color 0.2s, color 0.2s;
    position: relative;
    display: grid !important;  /* enforce true centering */
    place-items: center !important;
    height: 100%;
    line-height: 1;
    box-sizing: border-box;
    background: var(--card-bg);
    margin: 0 !important; /* prevent global label margin affecting centering */
}
.form-segment-toggle label:first-of-type { border-radius: 14px 0 0 14px; }
.form-segment-toggle label:last-of-type { border-radius: 0 14px 14px 0; }
.form-segment-toggle input[type="radio"]:checked + label {
    background-color: var(--forest-accent) !important;
    color: #fff !important;
    box-shadow: none !important; /* avoid shadow causing visible under-strip */
}
/* Green border when any option is selected */
.form-segment-toggle:has(input[type="radio"]:checked) {
    border-color: var(--forest-accent);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.contact-grid > div { width: 100%; }
.contact-grid label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
/* Ensure contact-form segmented labels stay flex-centered (override generic label rule above) */
.contact-grid .form-segment-toggle label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    line-height: 1 !important;
}
.contact-grid input[type="text"],
.contact-grid input[type="email"],
.contact-grid input[type="tel"],
.contact-grid textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: white;
}
.contact-grid input[type="text"],
.contact-grid input[type="email"],
.contact-grid input[type="tel"] {
    height: 48px;
}
.contact-grid textarea { min-height: 140px; resize: vertical; }
.contact-full-span { grid-column: 1 / -1; }

/* Mobile Form Improvements - 50% More Compact */
@media (max-width: 639px) {
    /* Mobile-first contact form */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 0.375rem; /* 50% smaller */
    }
    
    .contact-grid input[type="text"],
    .contact-grid input[type="email"],
    .contact-grid input[type="tel"],
    .plate-search-input {
        min-height: 40px; /* compact but readable */
        font-size: 16px; /* avoids iOS zoom */
        padding: 0.5rem 0.75rem; /* balanced padding */
        border-radius: 8px;
        touch-action: manipulation;
    }
    
    .contact-grid textarea {
        min-height: 100px; /* start smaller but expandable */
        font-size: 16px;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        resize: vertical;
    }
    
    /* Better mobile checkboxes and radio buttons - smaller */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 14px; /* Smaller */
        min-height: 14px; /* Smaller */
        transform: scale(1.0); /* No scaling */
    }
    
    /* Mobile-friendly labels - smaller */
    label {
        font-size: 0.75rem; /* Smaller font */
        font-weight: 600;
        margin-bottom: 0.125rem; /* 50% smaller */
        display: block;
    }
    
    /* Hero search improvements - much smaller */
    .plate-search-input {
        max-width: 100%;
        width: 100%;
        margin-bottom: 0.125rem; /* 50% smaller */
        font-size: 0.875rem; /* Smaller font */
        letter-spacing: 0.05em;
        height: 2rem; /* Smaller height */
    }
    
    /* Filter panel mobile optimization - much smaller */
    .soft-card {
        border-radius: 8px; /* Smaller radius */
        padding: 0.375rem !important; /* 50% smaller */
    }
    
    #filter-panel {
        margin-bottom: 0.375rem; /* 50% smaller */
        max-width: 100%;
    }
    
    /* Smaller form segment toggles */
    .form-segment-toggle { padding: 0 !important; border-radius: 10px !important; height: 42px !important; }
    .form-segment-toggle label { padding: 0 10px !important; border-radius: 0 !important; font-size: 0.95rem !important; height: 100% !important; min-height: 0 !important; line-height: 1 !important; }
    
    /* Mobile dropdown improvements */
    .dropdown-menu {
        min-width: 150px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
    
    .dropdown-menu a {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

@media (min-width: 640px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    #contact-name-group, #contact-name-group-h, .contact-full-span {
        grid-column: 1 / -1;
    }
}

/* Footer */
.whatsapp-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background-color: #25D366;
    color: white !important;
    font-weight: 600;
    transition: background-color 0.2s;
}
.whatsapp-pill:hover { background-color: #1DA851; }
.whatsapp-pill svg { margin-right: 0.5rem; }

.whatsapp-fab {
    position: fixed;
    right: 18px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #25D366;
    color: white !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border: 0;
    box-shadow: 0 8px 16px rgba(0,0,0,0.14);
    z-index: 1500;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    line-height: 0;
    aspect-ratio: 1 / 1;
}
.whatsapp-fab:hover { background-color: #1DA851; }
.whatsapp-fab:active { transform: scale(0.965); box-shadow: 0 6px 14px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.06); }
.whatsapp-fab svg { width: 24px; height: 24px; fill: white; display:block; transform: none; transform-origin:center; }
@media (max-width: 640px) {
  .whatsapp-fab {
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.14);
  }
  .whatsapp-fab svg { width: 22px; height: 22px; display:block; transform: none; }
}
/* Hide floating WhatsApp FAB when overlays are open */
body.menu-open .whatsapp-fab,
body.wishlist-open .whatsapp-fab { opacity: 0; pointer-events: none; }

/* Remove header hairline while the mobile drawer is open */
body.menu-open #header { border-bottom: 0 !important; box-shadow: none !important; }
@media print { .whatsapp-fab { display: none !important; } }

/* Provide bottom breathing room for content on phones when FAB is present */
@media (max-width: 640px) {
  body.has-whatsapp-fab main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

#filter-arrow { transition: transform 0.3s; }

/* Mobile-Specific Enhancements */
/* Neutral grey range sliders site-wide */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: #e5e7eb; border-radius: 999px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: #6b7280; border-radius: 50%; margin-top: -6px; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
input[type="range"]::-moz-range-track { height: 6px; background: #e5e7eb; border-radius: 999px; }
input[type="range"]::-moz-range-progress { height: 6px; background: var(--forest-accent); border-radius: 999px; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: #6b7280; border: 2px solid #fff; border-radius: 50%; }
@media (max-width: 768px) {
    /* Better modal handling on mobile */
    .wishlist-modal {
        padding: 0.5rem;
        align-items: flex-end;
    }
    
    .wishlist-content {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        margin: 0;
        border-radius: 20px 20px 0 0;
        overflow-y: auto;
    }
    
    .wishlist-close {
        top: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
        font-size: 24px;
    }
    
    /* Touch-friendly scrolling */
    .scrolling-wrapper {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        scroll-behavior: auto;
    }
    
    /* Ultra-compact joined actions (~20px height) */
    .plate-actions { margin-top: 0.12rem; border-radius: 10px; overflow: hidden; }
    .plate-actions .heart-segment { padding: 0; min-height: 20px; width: auto; flex: 0 0 auto; }
    .plate-actions .enquire-btn { padding: 0.16rem 0.34rem; font-size: 0.64rem; min-height: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
    /* Keep side breathing room inside cards; center plate visuals */
    .plate-card-container .plate-reg { width: 92%; max-width: 92%; margin: 0.35rem auto 1rem; }
}

/* Footer improvements on mobile */
@media (max-width: 768px) {
  footer .max-w-7xl > div:first-child {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
  }
  footer .max-w-7xl > div:last-child > div:first-child {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 0.75rem !important;
  }
  footer .max-w-7xl > div:last-child > div:last-child {
      flex-direction: column !important;
      gap: 0.75rem !important;
  }
  /* Make footer more compact */
  footer {
      padding: 1rem 0 !important;
  }
  footer .max-w-7xl {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
  }
}

/* Mobile: smaller wishlist heart inside plate actions */
@media (max-width: 768px) {
  .plate-actions .wishlist-heart { width: 16px; min-width: 16px; padding: 0; }
  .plate-actions .wishlist-heart svg { width: 9px; height: 9px; }
}

/* Mobile: smaller plate text and tracking */
@media (max-width: 640px) {
  .plate-reg { 
    font-weight: 600; 
    letter-spacing: 0.09em; 
    font-size: clamp(0.85rem, 3.4vw, 1.1rem) !important; /* ~30% smaller than desktop min */
    aspect-ratio: 4.7 / 1; /* ensure same proportion on phones */
  }
  /* Shrink Find Plate button by ~30% */
  #search-button { 
    padding: 0.6rem 0.8rem !important; 
    min-height: 34px !important; 
    font-size: 0.85rem !important; 
  }
}

/* Very small mobile screens - ultra compact */
@media (max-width: 360px) {
    .mobile-nav-content {
        padding: 0.5rem 0.25rem; /* Even smaller */
    }
    
    .mobile-nav-link {
        padding: 0.25rem 0.375rem; /* Much smaller */
        font-size: 0.75rem; /* Smaller font */
    }
    
    .plate-search-input {
        font-size: clamp(1rem, 4.5vw, 1.1rem); /* match button */
        padding: 0.375rem; /* Smaller padding */
        height: 1.75rem; /* Much smaller */
    }
    
    .cta-button {
        padding: 0.375rem 0.75rem !important; /* Much smaller */
        font-size: clamp(0.95rem, 4.5vw, 1.1rem) !important; /* match input */
        min-height: 28px; /* Smaller height */
    }
    
    #plate-grid {
        gap: 0.25rem; /* Minimal gap */
    }
    
    .plate-card-container {
        padding: 0.1875rem 0.125rem 0.125rem; /* Ultra small */
    }
    
    .plate-reg {
        font-size: clamp(0.55rem, 3vw, 0.7rem); /* Much smaller */
        padding: 1px 3px; /* Minimal padding */
        margin-bottom: 0.1875rem; /* Smaller margin */
    }
    
    .price-chip {
        font-size: 0.6rem; /* Much smaller */
    }
    
    /* Ultra small carousel items: still target ~3 across */
    .carousel-item-outer {
        width: calc((100vw - (var(--carousel-gap, 0.375rem) * 2)) / 3) !important;
        max-width: 160px !important;
        min-width: 96px !important;
        margin-right: 0.5rem !important;
    }
    
    /* Smaller form elements */
    /* Enquiry inputs: larger readable font for typed text */
    .contact-grid input[type="text"],
    .contact-grid input[type="email"],
    .contact-grid input[type="tel"],
    .contact-grid textarea {
        font-size: 17px !important; /* avoids iOS zoom & improves readability */
    }
    /* Extra top breathing room in the white enquiry card */
    #contact-form.soft-card { padding-top: 0.75rem !important; }
}

/* Touch Device Enhancements */
.touch-device button,
.touch-device .cta-button,
.touch-device .mobile-nav-link {
    transition: transform 0.15s ease;
}

.touch-device .soft-card:hover {
    transform: none; /* Disable hover transforms on touch devices */
}

/* Viewport Height for Mobile Browsers */
:root {
    --vh: 1vh;
}

/* Better mobile viewport handling */
@media (max-width: 768px) {
    .mobile-nav {
        max-height: calc(var(--vh, 1vh) * 100 - 80px);
        overflow-y: auto;
    }
}

/* Improved touch targets */
@media (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    .wishlist-heart {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .dropdown-toggle,
    .mobile-nav-link,
    .cta-button {
        min-height: 44px;
    }
}
@media (hover: none) and (pointer: coarse) {
    /* Keep joined actions slim on touch devices */
    .plate-actions .wishlist-heart,
    .plate-actions .heart-segment,
    .plate-actions .enquire-btn {
        min-height: 20px !important;
    }
}

/* Ensure mobile nav is clickable when open */
.mobile-nav.active { pointer-events: auto; }

/* Footer social icon sizing to prevent cropping */
.footer-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ————————————————————————————————————————————————
   Final Mobile Overrides (<=640px)
   Goal: much smaller plates/cards on phones, stable 2-col grid,
   comes last to consolidate previous scattered mobile rules.
———————————————————————————————————————————————— */
@media (max-width: 640px) {
  /* Stable 2-column grid on phones */
  #plate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.25rem 0;
  }

  /* Tighter cards */
  .plate-card-container {
    padding: 0.3rem 0.2rem 0.25rem;
    border-radius: 10px;
  }

    /* Taller plate visual for phones (about 2x height), but overflow-safe */
  .plate-reg {
    min-width: 0;
    width: 92%;
    max-width: 92%;
    padding: 4px 9px;
    font-size: clamp(0.92rem, 3.0vw, 1.15rem);
    font-weight: 600; /* lighter on phones */
    letter-spacing: 0.10em; /* less intense */
    margin: 0.35rem auto 0.35rem;
    aspect-ratio: 4.7 / 1; /* match laptop/search proportion */
    border-width: 2px;
    display: grid;            /* perfect centering */
    place-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .price-chip {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500; /* slightly lighter on phones (~30% less bold) */
    line-height: 1.2;
    margin: 0.2rem 0 0.25rem 0;
  }

  /* Strong overrides for any inline-styled buttons inside plate cards */
  .plate-card-container button {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.68rem !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }
  /* But keep joined actions ultra-compact inside cards */
  .plate-card-container .plate-actions button {
    min-height: 20px !important;
    padding: 0.12rem 0.30rem !important;
    font-size: 0.62rem !important;
    border-radius: 0 !important;
  }
  .view-details {
    font-size: 0.68rem !important;
    margin-top: 0.2rem !important;
    padding: 0.35rem 0.5rem !important;
    min-height: 36px !important;
  }

  /* Ensure media never breaks narrow columns */
  img, video { max-width: 100%; height: auto; }

  /* Enforce touch target min-heights for plate action buttons */
  .touch-device .plate-actions button {
    min-height: 20px; /* ultra-compact joined controls on phones */
  }

  /* Keep heart small in joined actions on touch devices */
  .touch-device .plate-actions .wishlist-heart {
    min-width: 16px;
    min-height: 20px;
  }

  /* Prevent price wrapping on phones */
  .price-chip {
    white-space: nowrap;
  }

  /* Compact the inline index search results header */
  .search-results-header { padding: 0.5rem 0.75rem !important; margin: 0.25rem 0 0.5rem !important; border-radius: 10px !important; }
  .search-results-header h3 { font-size: 1rem !important; margin: 0 0 0.25rem 0 !important; }
  .search-results-header p { font-size: 0.8rem !important; margin: 0 !important; }

  /* Add a touch of breathing room between label and segmented control */
  .contact-grid .form-segment-toggle { margin-top: 0.25rem; }

  /* Polish mobile carousel speed via app.js separately */
}

/* Collections chips (homepage + filter page) */
.chip { position: relative; display:inline-flex; align-items:center; margin-right: .35rem; }
.chip input { position:absolute; inset:0; opacity:0; pointer-events:auto; cursor:pointer; }
.chip span { border:1px solid var(--hairline-border); background:white; color:var(--ink-text); padding:.32rem .6rem; border-radius:999px; font-size:.85rem; }
.chip input:checked + span { background: var(--forest-accent); color:white; border-color: var(--forest-accent); }

/* Lightweight inline checkboxes (faster than chips) */
.attr-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 .75rem .5rem 0;
  color: #4b5563;
  font-size: .9rem;
  line-height: 1.3;
}
.attr-check input { width: 1.1em; height: 1.1em; }
.attr-grid .attr-check { display: inline-flex; }

/* Reusable mobile filter drawer (overlay; does not push grid) */
@media (max-width: 768px){
  .filters-btn { display:inline-flex; align-items:center; justify-content:center; background: var(--forest-accent); color:#fff; border:none; border-radius:8px; padding:.5rem .9rem; font-weight:600; }
  .filters-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 85vw; max-width: 360px; transform: translateX(-100%); transition: transform .28s ease; z-index: 1001; box-shadow: 4px 0 18px rgba(0,0,0,0.1); border-radius: 0; }
  .drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1000; opacity: 0; pointer-events: none; display: block; transition: opacity .2s ease; }
  body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
  body.drawer-open .filters-sidebar { transform: translateX(0); }
}