/* --- 1. TYPOGRAPHY --- */
/* Oswald: industrial, workwear-catalog display face for headings.
   Inter: clean body. JetBrains Mono: utility labels / field tags. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Oswald:wght@500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    /* --- RIA Brand Colors (unchanged) --- */
    --ria-blue-main: #277CBD;
    --ria-blue-dark: #1E659C;    /* Used for Header */
    --ria-green-action: #74AC54; /* Used for Buy Buttons */
    --ria-red-accent: #CF1F3D;   /* Used for Badges/Jim's Faves */
    --ria-dark-grey: #31353F;    /* Used for Main Text */
    --ria-light-grey: #f4f6f8;
    --ria-white: #FFFFFF;
    --ria-border: #E3E3E3;

    /* Deep field-blue for immersive sections */
    --ria-navy: #12293d;
    --ria-blue-deep: #154a75;

    /* Type roles */
    --font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Field-tag eyebrow label — the signature structural device, used to
   introduce sections the way spec labels tag field equipment. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ria-green-action);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--ria-green-action);
    display: inline-block;
}

body {
    font-family: var(--font-body);
    background-color: var(--ria-light-grey);
    color: var(--ria-dark-grey);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Scroll-reveal: sections/cards fade-rise into view. Respects reduced motion. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.active { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero, .hero * { animation: none !important; }
    * { scroll-behavior: auto !important; }
}

a { text-decoration: none; color: inherit; transition: color 0.2s; }

/* --- Header Section (UPGRADED) --- */
header {
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent */
    backdrop-filter: blur(12px); /* Glass Effect */
    padding: 1rem 3rem; /* Wider padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Softer border */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Softer shadow */
    position: sticky; /* Sticks to top */
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

/* --- Updated Logo Container --- */
.logo-container {
    display: flex;
    align-items: center; 
    gap: 15px;            
}

/* Ensure the logo image doesn't get too huge */
.logo-container img {
    height: 60px; 
    width: auto;
    border-radius: 50%; 
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.logo-container h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.2rem;   
    font-weight: 700;
    line-height: 0.95;
    text-transform: uppercase;
    color: inherit; 
    letter-spacing: 0px;
}

/* --- Store Tagline (responsive so it never bleeds off the row) --- */
.store-tagline {
    display: block;
    font-size: clamp(0.8rem, 1.15vw, 1.1rem);
    font-weight: bold;
    color: #1E659C;
    letter-spacing: 0.5px;
    line-height: 1.3;
    max-width: 30ch;      /* keeps it to ~2 clean lines, wraps on whole words */
    margin-top: 4px;
}

/* --- New Description Style --- */
.desc {
    font-size: 0.88rem;
    color: #666;
    margin: 3px 0 10px 0;
    line-height: 1.4;
    min-height: 36px; 
}

.text-jims {
    color: var(--ria-blue-main);
    font-size: 4.0rem;
    /* Removed text shadow for cleaner look */
}

.text-closet {
    color: var(--ria-green-action);
    font-size: 4.0rem;
}

/* --- Hero Section (clean brand-statement direction) --- */
.hero {
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(39,124,189,0.55) 0%, transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(116,172,84,0.28) 0%, transparent 50%),
        linear-gradient(160deg, var(--ria-blue-dark) 0%, var(--ria-navy) 100%);
    color: white;
    text-align: center;
    padding: 6.5rem 1.5rem 6rem;
    position: relative;
    border-bottom: none;
    overflow: hidden;
}
/* Oversized ghost wordmark behind the content — an apparel-brand signature */
.hero::before {
    content: "INSPECTION SWAG";
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(5rem, 20vw, 13rem);
    letter-spacing: 0.5rem;
    line-height: 1;
    color: rgba(255,255,255,0.05);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    user-select: none;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Green accent rule above the headline */
.hero-content::before {
    content: "";
    width: 60px;
    height: 4px;
    background: var(--ria-green-action);
    border-radius: 2px;
    margin-bottom: 1.75rem;
}

.hero h2 {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 5.2vw, 4rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.5px;
    margin: 0 0 1.6rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
.hero p:not(#delivery-window) {
    color: rgba(255,255,255,0.78);
    font-size: 1.08rem;
    max-width: 600px;
    margin: 0 0 2rem;
    line-height: 1.6;
}
/* Order window: refined pill with a live "dot" */
.hero #delivery-window {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono) !important;
    font-size: 1rem !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff !important;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
    padding: 10px 20px;
    border-radius: 40px;
    text-shadow: none !important;
    margin: 0 !important;
    order: -1;               /* place the window chip ABOVE the headline */
    margin-bottom: 1.5rem !important;
}
.hero #delivery-window::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ria-green-action);
    box-shadow: 0 0 0 rgba(116,172,84,0.7);
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(116,172,84,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(116,172,84,0); }
    100% { box-shadow: 0 0 0 0 rgba(116,172,84,0); }
}

.quote-bar {
    background-color: var(--ria-dark-grey);
    color: rgba(255,255,255,0.92);
    text-align: center;
    padding: 1.1rem;
    font-size: 1rem;
    font-style: italic;
    border-bottom: 4px solid var(--ria-green-action);
}
.quote-bar blockquote { font-family: var(--font-body); }

/* --- Shop Layout (The Fix) --- */
.products {
    max-width: 1400px; /* Wider */
    margin: 0 auto;
    padding: 4rem 2rem;
}

.products h2 {
    text-align: left;
    font-family: var(--font-display);
    color: var(--ria-blue-dark);
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Shop header: title left, filter right --- */
.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 2.25rem;
}
.shop-header-title .eyebrow { margin-bottom: 10px; }

/* --- Category Filter Bar (compact, secondary) --- */
.category-bar {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 5px;
    background: #eef1f4;
    border-radius: 30px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.category-bar::-webkit-scrollbar { display: none; }
.cat-chip {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #5b6b78;
    background: transparent;
    border: none;
    border-radius: 30px;
    padding: 7px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}
.cat-chip i { font-size: 0.78rem; opacity: 0.7; }
.cat-chip:hover { color: var(--ria-blue-dark); background: rgba(255,255,255,0.6); }
.cat-chip.active {
    background: #fff;
    color: var(--ria-blue-dark);
    box-shadow: 0 1px 4px rgba(18,41,61,0.12);
}
.cat-chip.active i { opacity: 1; color: var(--ria-green-action); }

@media (max-width: 820px) {
    .shop-header { justify-content: center; text-align: center; }
    .products h2 { text-align: center; }
    .shop-header-title .eyebrow { justify-content: center; }
    .category-bar { justify-content: center; }
}
@media (max-width: 600px) {
    .cat-chip { font-size: 0.75rem; padding: 6px 11px; gap: 5px; }
    .cat-chip i { display: none; }  /* labels only on small screens to save space */
}

/* Renamed from .shop-container to match JS logic */
.product-grid {
    display: grid;
    /* 4 across on desktop; wraps down gracefully on smaller screens */
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    max-width: 1320px;
    margin: 0 auto;
}
@media (max-width: 1100px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* --- Product Cards --- */
.product-card {
    background: var(--ria-white);
    border: 1px solid var(--ria-border);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    position: relative !important; 
    overflow: visible !important;  
    z-index: 1;
    box-shadow: 0 2px 12px rgba(18, 41, 61, 0.05);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 40px rgba(18, 41, 61, 0.13);
    border-color: rgba(30, 101, 156, 0.25);
}

/* Image Handling (Crucial for Rotation) */
.product-img { 
    width: 100%; 
    height: 180px; 
    object-fit: contain; 
    border-radius: 8px; 
    margin-bottom: 10px; 
    transition: transform 0.3s ease;
}

.product-card:hover .product-img {
    transform: scale(1.05); /* Image grows slightly */
}

h3 {
    color: var(--ria-dark-grey);
    margin: 0.35rem 0 0.25rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.price {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ria-blue-dark);
    margin: 0.5rem 0 0.75rem;
}

/* Pin the Add button to the bottom so equal-height cards stay tidy
   without a big gap (replaces the old justify-content: space-between). */
.product-card .add-btn { margin-top: auto; }
.product-card .selectors { margin-bottom: 10px; }

/* --- BUTTONS (UPGRADED PILL SHAPE) --- */
button {
    background-color: var(--ria-green-action);
    color: var(--ria-white);
    border: none;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 50px; /* Pill shape */
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(116, 172, 84, 0.3);
}

button:hover { 
    background-color: #5e8f42; 
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(116, 172, 84, 0.4);
}

/* FORCE ADD TO CART BUTTON TO BE GREEN (Fix for product page transparency) */
#add-btn {
    background-color: var(--ria-green-action) !important;
    color: white !important;
    opacity: 1 !important;
}

/* Disabled button style */
button:disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* --- OUT OF STOCK (The "Not Dulled" Fix) --- */
.product-card.out-of-stock {
    position: relative;
    pointer-events: none; /* Prevents clicking */
}

/* Dim only the content inside */
.product-card.out-of-stock img,
.product-card.out-of-stock h3,
.product-card.out-of-stock p,
.product-card.out-of-stock button {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* The Stamp (Bright and on top) */
.product-card.out-of-stock::after {
    content: "SOLD OUT";
    position: absolute;
    top: 30%; 
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background-color: rgba(207, 31, 61, 1);
    color: white;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 10px 20px;
    border: 3px solid white;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 10;
}

@media (max-width: 768px) {
    .meet-jim-content { flex-direction: column-reverse; text-align: center; }
}

/* --- Cart & Footer --- */
.cart-container {
    background: var(--ria-blue-main);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}
.cart-container:hover { transform: scale(1.05); background: var(--ria-blue-dark); }
#cart-count { background: var(--ria-red-accent); padding: 2px 6px; border-radius: 50%; font-size: 0.8rem; border: 2px solid white; }

/* Cart Modal (ORIGINAL STRUCTRE + ANIMATION) */
.cart-modal {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1000;
    backdrop-filter: blur(5px); /* Added Blur */
}
.cart-content {
    background: white; width: 90%; max-width: 450px; margin: 80px auto; /* Pushed down slightly */
    padding: 30px; border-radius: 12px; position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.close-btn { position: absolute; top: 15px; right: 20px; font-size: 1.5rem; cursor: pointer; color: #999; transition: color 0.2s;}
.close-btn:hover { color: #333; }

ul#cart-items { list-style: none; padding: 0; margin: 20px 0; max-height: 300px; overflow-y: auto; }
ul#cart-items li { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; }

/* FIX: SPECIFIC STYLE FOR REMOVE BUTTON TO OVERRIDE GENERIC BUTTON STYLE */
.remove-btn {
    background-color: transparent !important;
    color: #cf1f3d !important;
    border: 1px solid #cf1f3d !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    width: auto !important;
    box-shadow: none !important;
    border-radius: 20px !important;
    text-transform: none;
}
.remove-btn:hover { background-color: #cf1f3d !important; color: white !important; transform: none; }

footer {
    text-align: center;
    padding: 3rem 2rem;
    background-color: var(--ria-navy);
    color: rgba(255,255,255,0.6);
    margin-top: 4rem;
    font-size: 0.9rem;
}
footer p:first-child { font-family: var(--font-mono); letter-spacing: 1px; color: rgba(255,255,255,0.75); }

/* Display headings across marketing sections */
.split-col h2,
.meet-jim h2,
.jim-bucks h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 700;
}

/* Product Detail Page Helpers */
.thumbnail-row { display: flex; gap: 10px; margin-top: 15px; justify-content: center; }
.thumb { width: 60px; height: 60px; object-fit: cover; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.thumb:hover { transform: scale(1.1); border-color: var(--ria-blue-dark); }
.thumb.active { border: 2px solid var(--ria-blue-main); opacity: 0.7; }

/* --- SPLIT SECTION (Forced Side-by-Side) --- */
.split-section {
    background: white;
    padding: 4rem 2rem;
    margin-top: 3rem;
}

.split-container {
    max-width: 1600px; /* Wider */
    margin: 0 auto;
    
    /* FLEXBOX MAGIC: This forces them side-by-side */
    display: flex; 
    flex-direction: row; 
    justify-content: space-between;
    align-items: stretch; 
    gap: 30px;
}

.split-col {
    flex: 1; /* This forces them to be equal width (50/50) */
    min-width: 320px;
    padding: 40px; /* More breathing room */
    border-radius: 16px; /* Smooth corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
}

.split-col:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* LEFT SIDE */
.meet-jim {
    background: #fdfdfd;
    border-top: 5px solid #1E659C;
}

.jim-avatar {
    width: 150px;
    float: right;
    margin-left: 20px;
    transform: rotate(10deg);
    border: 5px solid white;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* RIGHT SIDE */
.jim-bucks {
    background: #fff;
    color: #333;
    border-top: 5px solid #74AC54;
}

.jim-bucks h2 { 
    color: var(--ria-dark-grey); 
    border-bottom: 2px solid var(--ria-green-action); 
    padding-bottom: 15px; 
}

.earn-box { 
    background: #f8f9fa; 
    padding: 20px; 
    border-radius: 12px; 
    margin-top: 20px; 
}
.earn-box ul { padding-left: 20px; }
.earn-box li { margin-bottom: 8px; }

/* ONLY STACK ON MOBILE SCREENS */
@media (max-width: 768px) {
    .split-container {
        flex-direction: column;
    }
    .split-col {
        width: 100%; /* Full width on mobile */
    }
}

/* --- NOTIFICATIONS (UPGRADED PREMIUM TOAST) --- */
#notification-container {
    position: fixed;
    top: 180px; 
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.toast {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: #333;
    min-width: 300px;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.05);
    animation: toastSlideIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.toast.success { border-left: 6px solid #74AC54; }
.toast.error { border-left: 6px solid #cf1f3d; }

/* Increase icon size in toast */
.toast span:first-child { font-size: 1.4rem; }

@keyframes toastSlideIn {
    0% { opacity: 0; transform: translateX(50px) scale(0.9); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-20px); }
}

/* --- LOGIN MODAL MAKEOVER --- */

/* Fix alignment issues globally */
* { box-sizing: border-box; }

.modal-overlay {
    display: none; 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.6); 
    backdrop-filter: blur(8px); /* Blur */
    z-index: 2000; 
    align-items: center; justify-content: center;
}

.auth-box {
    background: white;
    padding: 40px; 
    border-radius: 20px; 
    width: 350px; 
    text-align: center; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    border-top: 5px solid #1E659C; /* Branding accent */
    animation: floatIn 0.3s ease-out;
}

@keyframes floatIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.auth-logo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid #f4f4f4;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.auth-box h2 {
    color: #1E659C;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* The "Flare" Inputs */
.auth-input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #fafafa;
    outline: none;
}

.auth-input:focus {
    border-color: #74AC54; /* Green Focus */
    background-color: white;
    box-shadow: 0 0 0 4px rgba(116, 172, 84, 0.1); /* Glow effect */
}

.auth-btn {
    width: 100%;
    background: #1E659C; /* Blue default */
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: transform 0.2s, background 0.2s;
    margin-top: 10px;
}

.auth-btn:hover {
    background: #154a75;
    transform: translateY(-2px);
}

.cancel-link {
    margin-top: 15px;
    cursor: pointer;
    color: #999;
    font-size: 0.9rem;
    text-decoration: underline;
    transition: color 0.2s;
}

.cancel-link:hover { color: #cf1f3d; }

/* --- PREMIUM DROPDOWNS --- */
select {
    appearance: none; /* Removes default arrow */
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 15px;
    font-size: 0.95rem;
    color: #333;
    width: 100%;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231E659C%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

select:focus {
    outline: none;
    border-color: #1E659C;
    box-shadow: 0 0 0 3px rgba(30, 101, 156, 0.1);
}

/* --- JIM'S PICK BADGE --- */
.product-card.jims-pick {
    border: 2px solid #CF1F3D; /* Red Outline */
    box-shadow: 0 10px 25px rgba(207, 31, 61, 0.15); /* Reddish Glow */
}

.jims-pick-badge {
    position: absolute;
    top: -15px;      /* Move it up */
    right: -15px;    /* Move it right */
    background: #CF1F3D;
    color: white;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 8px 15px;
    transform: rotate(15deg); /* Tilted */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    z-index: 100;    /* Force it on top of image */
    border: 2px solid white;
    text-transform: uppercase;
    white-space: nowrap; /* Prevents text wrapping */
}

/* --- PROFESSIONAL HEADER STYLES --- */

/* The container for the right side of the header */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between the pills */
}

/* Base Pill Style */
.header-pill {
    display: inline-flex;
    align-items: center;
    width: auto;               /* override the global button width:100% */
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    white-space: nowrap; /* Prevents wrapping */
}
/* Header pills wrap to their text on every screen size */
button.header-pill { width: auto; flex: 0 0 auto; }

/* 1. User Info Pill (Blue & Gold) */
.user-pill {
    background: transparent; /* Removed the blue background */
    color: #333; /* Dark text for better contrast against white header */
    gap: 15px;
    padding-right: 25px; /* Added extra spacing to the right */
    font-size: 1.2rem; /* Bigger text */
    font-weight: bold;
    cursor: default;
    border: none; /* Removes any default border */
}

.user-balance {
    background: #74AC54;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 1rem; /* Slightly larger balance pill */
    vertical-align: middle;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 2. Primary Action Button (Solid Blue - My Orders) */
.btn-primary-pill {
    background: #1E659C;
    color: white;
}
.btn-primary-pill:hover {
    background: #154a75;
    transform: translateY(-1px);
}

/* 3. Secondary Outline Button (Logout) */
.btn-outline-pill {
    background: transparent;
    color: #1E659C;
    border-color: #1E659C;
}
.btn-outline-pill:hover {
    background: #1E659C;
    color: white;
}

/* 4. Cart Button (Fixed Wrapping) */
.cart-pill {
    background: #1E659C;
    color: white;
    position: relative;
    padding: 8px 20px 8px 12px;
}
.cart-pill:hover {
    background: #154a75;
    transform: translateY(-1px);
}
.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #CF1F3D;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    border: 2px solid white;
}

/* --- MOBILE OPTIMIZATION (Responsive Design) --- */

@media (max-width: 768px) {
    
    /* 1. HEADER: Allow wrapping and stack items */
    header {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px;
    }

    .header-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap; /* Allows buttons to drop to next line */
        gap: 10px;
    }

    /* Adjust pill sizes for touch targets */
    .header-pill {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
    
    /* Hide the text "Current Balance" to save space, keep just the number */
    .user-pill div span:first-child {
        display: none; 
    }

    /* 2. PRODUCT GRID: 2 columns instead of 4 */
    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
        gap: 15px;
        padding: 10px;
    }

    .product-card h3 {
        font-size: 1rem;
    }
    
    /* Make buttons bigger for thumb tapping */
    .add-btn {
        padding: 12px;
        font-size: 1rem;
    }

    /* 3. MODALS: Full width on mobile */
    .auth-box {
        width: 95% !important;
        padding: 20px;
    }
    
    /* Order History Table - Allow scrolling if too wide */
    #history-modal div[style*="overflow-y"] {
        max-height: 60vh !important;
    }
    
    /* 4. CART SIDEBAR: Wider on mobile */
    .cart-sidebar {
        width: 85%; /* Cover most of the screen */
    }

    /* 5. ADMIN PANEL: Stack tabs */
    .admin-header {
        flex-direction: column;
        height: auto;
        padding: 10px;
    }
    
    .nav-tabs {
        width: 100%;
        overflow-x: auto; /* Allow horizontal scroll for tabs */
        white-space: nowrap;
        padding-bottom: 5px;
    }
    
    .tab-btn {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    /* Stack form inputs */
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
}

/* --- EXTRA SMALL SCREENS (Phones < 480px) --- */
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr; /* 1 item per row (Instagram style) */
    }
}

/* --- PRODUCT CARD OPTION DROPDOWNS --- */
/* Stack each option full-width so labels/"Choose" text always fit,
   regardless of 1, 2, 3, or 4 options and screen size. */
.selectors {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    text-align: left;
    width: 100%;
}
.selector-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.selector-group label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #444;
    margin-bottom: 4px;
}
.card-dropdown {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* Custom chevron so the native arrow doesn't crowd the text */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.card-dropdown:hover { border-color: #1E659C; }
.card-dropdown:focus {
    outline: none;
    border-color: #1E659C;
    box-shadow: 0 0 0 3px rgba(30, 101, 156, 0.15);
}

/* --- SWATCH STYLES --- */
.swatch-container { display: flex; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.swatch { 
    width: 35px; height: 35px; 
    border-radius: 50%; 
    border: 2px solid #ddd; 
    cursor: pointer; 
    transition: all 0.2s;
    position: relative;
}
.swatch:hover { transform: scale(1.1); }
.swatch.active { 
    border-color: #1E659C; 
    box-shadow: 0 0 0 2px white, 0 0 0 4px #1E659C; /* Double ring effect */
    transform: scale(1.1);
}
/* Tooltip for the color name on hover */
.swatch:after {
    content: attr(data-color);
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.8); color: white; padding: 4px 8px; border-radius: 4px;
    font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.swatch:hover:after { opacity: 1; }

/* Ensure the card looks interactive */
.product-card {
    cursor: pointer;
}

/* Ensure the cursor goes back to default/text when hovering over inputs */
.product-card select, 
.product-card button,
.product-card label {
    cursor: default; /* or pointer for buttons */
}
.product-card select.card-dropdown { cursor: pointer; }

/* --- MODERN VOTE SECTION STYLING --- */

/* 1. The Container Panel */
.panel {
    background: white;
    /* !important is needed here to override the inline HTML styles */
    border-radius: 20px !important; 
    padding: 50px 40px !important;
    border: 1px solid rgba(0,0,0,0.03);
    /* Soft, deep shadow */
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* The "Lift" Animation on Hover */
.panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.15) !important;
}

/* 2. The Header Text */
.panel h2 {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 15px !important;
}

/* 3. The Vote Buttons */
#voting-area button, 
.panel :not(.tab-content) .btn:not(.btn-sm) {
    border-radius: 50px !important; /* Full pill shape */
    padding: 15px 35px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px !important;
    border-width: 2px !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Hover effect for the buttons (Growth + Glow) */
#voting-area button:hover:not(:disabled) {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 101, 156, 0.25);
}

/* 4. The Status Text */
#vote-status {
    font-size: 1.1rem;
    background: #f4f9f4;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    margin-top: 25px !important;
}

/* --- FIX: MAKE CLICKABILITY OBVIOUS --- */

/* --- FIX: BALANCE PILL "HISTORY" SWAP --- */

.balance-trigger {
    position: relative; /* Needed for absolute positioning overlay */
    background: white;
    border: 2px solid #e1e4e8; /* clearly defined border */
    padding: 0; /* Remove padding here, we let inner divs handle it */
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden; /* Keeps the overlay contained */
    min-width: 90px;
    text-align: right;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

/* 1. THE CONTENT (Normal State) */
.balance-content {
    padding: 5px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    transition: opacity 0.2s ease;
}

/* 2. THE OVERLAY (Hover State) */
.balance-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--ria-blue-dark); /* The Brand Blue */
    color: white;
    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 5px;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 1px;
    
    /* Start Hidden */
    opacity: 0;
    transform: translateY(100%); /* Start pushed down */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- THE INTERACTION --- */

/* When hovering the trigger... */
.balance-trigger:hover {
    border-color: var(--ria-blue-dark); /* Border turns blue */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(30, 101, 156, 0.2);
}

/* Hide the numbers */
.balance-trigger:hover .balance-content {
    opacity: 0;
    transform: translateY(-20px); /* Move numbers up */
}

/* Show the HISTORY text */
.balance-trigger:hover .balance-overlay {
    opacity: 1;
    transform: translateY(0); /* Slide overlay into place */
}

/* 2. PRODUCT CARD "VIEW DETAILS" OVERLAY */
.product-card .product-img-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
    /* Absorb extra card height so cards with fewer options don't leave
       a blank gap above the button. */
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}
.product-card .product-img-wrapper .product-img { height: 100%; max-height: 250px; margin-bottom: 0; }

/* We need to use ::before on the image container to create the overlay */
.product-card .product-img {
    /* Ensure the image stays behind the text */
    position: relative; 
    z-index: 1;
}

/* The "View Details" Text that appears on hover */
.product-card::before {
    content: "VIEW DETAILS";
    position: absolute;
    top: 40%; /* Position over the image */
    left: 50%;
    transform: translate(-50%, 20px); /* Start slightly lower */
    background: rgba(30, 101, 156, 0.9); /* Brand Blue */
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 30px;
    opacity: 0; /* Hidden by default */
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none; /* Let clicks pass through to the card */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* When hovering the card, show the text */
.product-card:hover::before {
    opacity: 1;
    transform: translate(-50%, 0); /* Slide up into place */
}

/* 3. UNDERLINE TITLE ON HOVER */
.product-card:hover h3 {
    color: var(--ria-blue-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
/* --- OFFSHORE CARD OVERRIDES --- */

/* 1. Hide the "View Details" overlay for offshore cards */
.offshore-card::before {
    display: none !important;
}

/* 2. Remove underline effect on hover for title */
.offshore-card:hover h3 {
    text-decoration: none !important;
    color: var(--ria-dark-grey) !important;
}

/* --- MOBILE OPTIMIZATION OVERRIDES --- */

@media (max-width: 768px) {
    /* 1. Header: Un-stick and Shrink */
    header {
        position: relative; /* Scrolls away with the page */
        top: auto;
        padding: 10px 15px; /* Tighter padding */
        flex-direction: column;
        gap: 10px;
        height: auto; /* Allow auto height */
    }

    /* 2. Smaller Logo Area */
    .logo-container {
        gap: 10px;
    }
    .logo-container img {
        height: 40px; /* Much smaller logo */
    }
    .logo-container h1 {
        font-size: 1.3rem; /* Compact title */
    }
    .logo-container small {
        font-size: 0.75rem !important;
        letter-spacing: 0px !important;
    }

    /* 3. Compact Buttons */
    .header-actions {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }
    .header-pill {
        padding: 5px 12px;
        font-size: 0.75rem; /* Smaller text */
        height: 30px; /* Fixed small height */
    }
    /* Hide the "Hi, Name" text to save space, keep the balance pill */
    .user-pill > span:first-child {
        display: none;
    }

    /* 4. Tame the Hero & Quote */
    .hero {
        padding: 3.5rem 1.25rem;
    }
    .hero::before {
        letter-spacing: 0.2rem;
        opacity: 0.7;
    }
    .hero h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .hero #delivery-window {
        font-size: 0.9rem !important;
    }
    .quote-bar {
        padding: 10px;
        font-size: 0.8rem;
    }
    .quote-bar blockquote {
        margin: 0;
    }
    
    /* 5. Stack the Split Section */
    .split-container {
        flex-direction: column;
        gap: 20px;
    }
    .split-col {
        padding: 20px;
        min-width: 0; /* Prevents overflow */
    }
}

/* --- PHONE SPECIFIC (1 Card Per Row) --- */
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr; /* 1 Column (Full Width) */
        gap: 20px;
        padding: 10px;
    }

    .product-card {
        padding: 15px;
    }

    .product-img {
        height: 220px; /* Good size for full width card */
        margin-bottom: 10px;
    }

    .product-card h3 {
        font-size: 1.1rem;
    }
    
    /* Ensure buttons are easy to tap */
    .add-btn {
        padding: 12px;
        font-size: 1rem;
    }
}
/* ============================================================
   REDESIGN POLISH LAYER
   Display type on key headings, refined buttons, product page,
   checkout, and success page. Colors & hooks unchanged.
   ============================================================ */

/* Buttons: keep pill shape + green, tighten the label type */
button {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.6px;
}

/* ============================================================
   PRODUCT PAGE — "INSPECTION REPORT" THEME
   Keeps all JS hooks (#p-name, #p-price, #p-desc, #p-image,
   #options-container, #stock-status, #add-btn, thumbnails).
   ============================================================ */
.product-detail-container.inspection-report {
    max-width: 960px;
    margin: 45px auto 70px;
    padding: 0;
    display: block;
    background: #fffdf7;                 /* warm "paper" */
    border: 1px solid #e4ddc9;
    border-radius: 6px;
    box-shadow: 0 18px 50px rgba(18,41,61,0.16);
    position: relative;
    overflow: hidden;
    animation: floatIn 0.5s ease-out;
}
/* subtle ruled-paper lines */
.inspection-report::before {
    content: "";
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(transparent, transparent 31px, rgba(30,101,156,0.05) 32px);
    pointer-events: none;
    z-index: 0;
}

/* Report header — the clipboard top bar */
.report-header {
    position: relative;
    z-index: 1;
    background: var(--ria-blue-dark);
    color: #fff;
    padding: 18px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 4px solid var(--ria-green-action);
}
.report-org {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}
.report-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
}
.report-header-right { display: flex; gap: 22px; flex-wrap: wrap; }
.report-meta { text-align: right; font-family: var(--font-mono); line-height: 1.3; }
.report-meta span { display: block; font-size: 0.6rem; letter-spacing: 1.5px; color: rgba(255,255,255,0.6); }
.report-meta b { font-size: 0.95rem; color: #fff; }

/* Body: two columns */
.report-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    padding: 32px 28px 28px;
}
.report-col { flex: 1; min-width: 300px; }

/* Field labels — stamped section headers */
.field-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ria-blue-dark);
    padding-bottom: 6px;
    margin: 22px 0 12px;
    border-bottom: 2px dashed rgba(30,101,156,0.25);
    display: flex; align-items: center; gap: 8px;
}
.report-col > .field-label:first-child { margin-top: 0; }

/* Photographic evidence frame */
.evidence-frame {
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(18,41,61,0.10);
    transform: rotate(-0.6deg);
    transition: transform 0.3s ease;
}
.evidence-frame:hover { transform: rotate(0deg) scale(1.01); }
.evidence-frame img#p-image {
    width: 100%;
    display: block;
    border-radius: 2px;
    object-fit: cover;
    background: #fff;
}
.evidence-tag {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--ria-red-accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Item title */
.inspection-report #p-name {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.03;
    color: var(--ria-dark-grey);
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    margin: 0 0 18px;
}

/* Key/value field rows */
.report-field-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.report-field {
    flex: 1; min-width: 140px;
    background: rgba(255,255,255,0.7);
    border: 1px solid #e4ddc9;
    border-left: 4px solid var(--ria-blue-main);
    border-radius: 4px;
    padding: 10px 14px;
}
.rf-key {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a8266;
    margin-bottom: 3px;
}
.rf-val { font-weight: 700; color: var(--ria-dark-grey); font-size: 1.05rem; }
.inspection-report #p-price {
    font-family: var(--font-mono) !important;
    font-weight: 700;
    color: var(--ria-blue-dark);
    font-size: 1.15rem;
}
.stamp-pass { color: var(--ria-green-action) !important; display: inline-flex; align-items: center; gap: 6px; }

/* Inspector's notes */
.report-notes {
    font-size: 1.02rem;
    color: #4a4a42;
    line-height: 1.7;
    font-style: italic;
    background: rgba(116,172,84,0.07);
    border-left: 3px solid var(--ria-green-action);
    padding: 12px 16px;
    border-radius: 0 4px 4px 0;
    margin: 0;
}

/* Specifications — the injected option dropdowns live here */
.report-specs { margin-top: 4px; }
.report-specs label {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8266 !important;
    margin-bottom: 6px !important;
}
.report-specs select {
    border: 1px solid #cfc8b4 !important;
    border-radius: 5px !important;
    background: #fff !important;
    font-family: var(--font-body);
    font-size: 0.95rem;
}
.report-specs select:focus { outline: none; border-color: var(--ria-blue-main) !important; box-shadow: 0 0 0 3px rgba(30,101,156,0.12); }

/* Stock status stamp */
.inspection-report #stock-status {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ria-red-accent);
    margin: 14px 0 10px;
    letter-spacing: 0.5px;
}

/* Approve & add button */
.inspection-report #add-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 18px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 6px 16px rgba(116,172,84,0.32);
    transition: transform 0.2s, box-shadow 0.2s;
}
.inspection-report #add-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(116,172,84,0.42); }

.report-footer-note {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    color: #8a8266;
    text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.report-footer-note i { color: var(--ria-green-action); }

.inspection-report .thumbnail-row { justify-content: flex-start; margin-top: 16px; }

@media (max-width: 720px) {
    .report-header { flex-direction: column; align-items: flex-start; }
    .report-header-right { gap: 16px; }
    .report-meta { text-align: left; }
    .report-body { padding: 24px 18px; gap: 24px; }
    .evidence-frame { transform: none; }
}

/* Back-to-shop header link (product page) gets display treatment */
.logo-container h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Checkout page refinements (scoped by the .checkout-container the page defines) */
.checkout-container h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--ria-blue-dark);
}
.checkout-container h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; }
.checkout-container .order-btn {
    font-family: var(--font-body);
    letter-spacing: 0.6px;
    box-shadow: 0 6px 16px rgba(116,172,84,0.32);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.checkout-container .order-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(116,172,84,0.42); }

/* Success page */
body h1 { font-family: var(--font-display); }

/* Generic marketing h2s that aren't already scoped get the display face */
.split-col h2 span, .jim-bucks h2 span, .meet-jim h2 span { font-family: inherit; }

/* Voting buttons: label face */
#voting-area button { font-family: var(--font-body); }

/* Leaderboard headings */
#leaderboard-list td { 
    font-family: var(--font-body); 
    padding-left: 25px;
    padding-right: 20px;
}