/*Reset*/



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============= HOME PAGE - LOCK TO VIEWPORT ============= */
/* Applies only when body has class="home-page" (index only). */
/* Other pages keep their normal scrolling behaviour.         */

.home-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Hero fills whatever vertical space is left after the navbar */
.home-page .hero {
    flex: 1;
    min-height: 0;          /* override the original 85vh */
    padding: 40px 20px;     /* reduced from 100px */
}

/* Footer sits at the bottom; cancel its negative margin */
.home-page .footer {
    flex-shrink: 0;
    margin-top: 0;
}

/* Mobile: viewport too short for everything to fit, */
/* so restore normal scrolling on small screens.    */
@media (max-width: 768px) {
    .home-page {
        height: auto;
        overflow: visible;
        display: block;
    }

    .home-page .hero {
        flex: none;
        padding: 60px 20px;
    }
}



/*======  BODY  =========*/
body{
    font-family: Arial, Helvetica, sans-serif;
    background: #fdfdf9;
    color:#111 ;  
    line-height:1.6;
    padding-top: 0;
}

/*  SMOOTHER SCROLLING */
html{
    scroll-behavior: smooth;
}

/*================================================
NAVBAR — COMPLETE STYLES

Sections:
1.  Navbar wrapper
2.  Nav container (glass pill)
3.  Logo
4.  Nav links (desktop)
5.  Nav right (login button)
6.  Login button
7.  Active link state
8.  Underline animation
9.  Mobile top bar adjustments
10. Bottom navigation bar
11. Bottom nav items
12. Bottom nav active state
13. Body padding adjustments
14. Responsive
================================================*/


/*------------------------------------------------
1. NAVBAR WRAPPER
Fixed to top. Full width. Glass background.
Sits above everything via z-index.
------------------------------------------------*/

.navbar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}


/*------------------------------------------------
2. NAV CONTAINER
Inner glass pill — centers content, limits width.
Logo left, links center, login right.
------------------------------------------------*/

.nav-container {
    max-width: 1200px;
    margin: 8px auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}


/*------------------------------------------------
3. LOGO
Left side. Image + brand name inline.
Hover rotates logo slightly.
------------------------------------------------*/

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.logo:hover img {
    transform: rotate(-4deg) scale(1.06);
}

.logo span {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #111;
}


/*------------------------------------------------
4. NAV LINKS
Center. Horizontal list of page links.
Hidden on mobile — replaced by bottom nav.
------------------------------------------------*/

.nav-links {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    position: relative;
    padding: 8px 2px;
    transition: color 0.2s ease;
}

.nav-links li a:hover {
    color: #111;
}


/*------------------------------------------------
5. UNDERLINE ANIMATION
Green underline slides in from center on hover.
Active page link has permanent underline.
Green is used ONLY here — brand identity marker.
------------------------------------------------*/

.nav-links li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background: #0d5c2f;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-links li a:not(.active):hover::after {
    width: 100%;
}

.nav-links li a.active {
    color: #0d5c2f;
}

.nav-links li a.active::after {
    width: 100%;
}


/*------------------------------------------------
6. NAV RIGHT
Right side wrapper.
Contains login button.
------------------------------------------------*/

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


/*------------------------------------------------
7. LOGIN BUTTON
Black pill button — right side of navbar.
Hidden on pages with .hide-login-btn on body.
Minimum 44px height for proper tap target.
------------------------------------------------*/

.login-btn {
    padding: 10px 20px;
    min-height: 44px;
    border: none;
    background: #1a1a1a;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.login-btn:hover {
    background: #444;
    transform: translateY(-1px);
}

/* Hide login button on specific pages */
.hide-login-btn .login-btn {
    display: none;
}


/*------------------------------------------------
8. BOTTOM NAVIGATION BAR
Mobile only — hidden on desktop.
Fixed to bottom of screen.
60px tall — full tap target height.
5 items — Home, Products, About, Work, Contact.
Does not appear on dashboard/admin/cp pages
because those pages set #navbar display:none.
------------------------------------------------*/

.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 999;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    overflow: hidden;
}


/*------------------------------------------------
9. BOTTOM NAV ITEMS
Each item is a full-height link.
Icon on top, label below.
Entire area is tappable — 60px tall.
------------------------------------------------*/

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 ;
    min-width: 0;
    height: 100%;
    text-decoration: none;
    color: #aaa;
    transition: color 0.2s ease;
    position: relative;
    padding: 0;
    overflow: hidden;
}

.bottom-nav-item:hover {
    color: #555;
}


/*------------------------------------------------
10. BOTTOM NAV ACTIVE STATE
Dark color + small indicator bar above icon.
Set by web.js based on current page URL.
------------------------------------------------*/

.bottom-nav-item.active {
    color: #1a1a1a;
}

/* Active indicator — small bar above icon */
.bottom-nav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: #1a1a1a;
    border-radius: 0 0 3px 3px;
}


/*------------------------------------------------
11. BOTTOM NAV ICON + LABEL
Icon: SVG, 22px.
Label: 10px, weight 600.
Both properly sized for mobile readability.
------------------------------------------------*/

.bottom-nav-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.bottom-nav-emoji {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.bottom-nav-label {
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


/*------------------------------------------------
12. BODY PADDING
Body gets paddingTop set dynamically by web.js
to match the actual navbar height.
On mobile — also needs bottom padding to clear
the fixed bottom nav (60px).
------------------------------------------------*/

body {
    padding-bottom: 0; /* desktop — no bottom nav */
}


/*------------------------------------------------
13. RESPONSIVE
------------------------------------------------*/

@media (max-width: 768px) {

    /* Nav container — slimmer on mobile */
    .nav-container {
        margin: 6px 12px;
        padding: 10px 16px;
        border-radius: 14px;
    }

    /* Logo text — slightly smaller */
    .logo span {
        font-size: 15px;
        letter-spacing: 1px;
    }

    .logo img {
        width: 32px;
        height: 32px;
    }

    /* Nav links — hidden on mobile */
    /* Replaced by bottom navigation bar */
    .nav-links {
        display: none;
    }

    /* Show bottom nav on mobile */
.bottom-nav {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-around;
    }

    /* Body bottom padding clears bottom nav */
    body {
        padding-bottom: 60px;
    }
}

@media (max-width: 480px) {

    .nav-container {
        margin: 6px 10px;
        padding: 8px 14px;
    }

    .logo span {
        font-size: 14px;
    }

    .logo img {
        width: 30px;
        height: 30px;
    }

    .login-btn {
        padding: 7px 14px;
        font-size: 12px;
        min-height: 36px;
        border-radius: 8px;
    }

    .bottom-nav-icon {
        width: 20px;
        height: 20px;
    }

    .bottom-nav-label {
        font-size: 9px;
    }
}

/*======HERO SECTION=======*/
.hero {
    width: 100%;
    padding: 100px 20px;
    min-height: 85vh;

    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";

    position: absolute;
    width: 500px;
    height: 500px;

    background: rgba(13, 92, 47,0.08);

    border-radius: 50%;

    top: -150px;
    right: -100px;

    filter: blur(80px);

    z-index: 0;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2;
}

/*LEFT SIDE*/
.hero-left {
    flex: 1;
}

.hero-tag {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #666;
    margin-bottom: 15px;
}

.hero-left h1 {
    font-size: 42px;
    line-height: 1.2;
    color: #111;
    margin-bottom: 20px;
}

.hero-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 25px;
    max-width: 500px;
}

/*BUTTONS*/
.hero-buttons {
    display: flex;
    gap: 12px;
}

.btn {
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/*primary button*/
.primary {
   background: #1a1a1a;
    color: #fff;
}

.primary:hover {
    background: #444;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/*secondary button*/
.secondary {
    background: transparent;
    color: #111;
    border: 1.5px solid #111;
}

.secondary:hover {
    background: #444;
    color: #fff;
    transform: translateY(-2px);
}



/* RIGHT SIDE */
.hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-right img {
    width: 420px;
    max-width: 100%;
    animation: float 4s ease-in-out infinite;
}

/*===== STATS SECTION ======*/
.stats {
    width: 100%;
    padding: 60px 20px;
    background: #fafafa;
}

.stats-container {
    max-width: 1000px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

/* each stat block*/
.stat {
    flex: 1;
    padding: 20px;
    transition: transform 0.25s ease;
}

.stat:hover {
    transform: translateY(-6px);
}


/*  Add Divider between Stats*/
.stat:not(:last-child) {
    border-right: 1px solid #e0e0e0;
}

/* big number */
.stat h2 {
    font-size: 36px;
    color: #111;
    margin-bottom: 8px;
}

/* label */
.stat p {
    font-size: 14px;
    color: #666;
    letter-spacing: 0.5px;
}

.stat-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;

    margin-bottom: 10px;
}

.stat span {
    font-size:14px;
    color: #666;

    line-height: 1.7;

    display: block;

    max-width: 260px;

    margin: 0 auto;
}


/*==== FOOTER ======*/
.footer {
    width: 100%;
    padding: 25px 20px;
    background: #fff;
    border-top: 1px solid #eaeaea;
}

/* Container */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Left Text*/
.footer-brand {
    font-size: 14px;
    color: #555;
}

/* Right Links */
.footer-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.footer-links a {
    text-decoration: none;
    font-size: 14px;
    color: #555;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #000;
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============ TABLET (≤ 1024px) ============ */
@media (max-width: 1024px) {
    .nav-links { gap: 22px; }
    .hero-left h1 { font-size: 36px; }
    .hero-right img { width: 340px; }
}



/* ============ SMALL MOBILE (≤ 480px) ============ */
@media (max-width: 480px) {

    .hero { padding: 40px 16px; }

    .hero-tag {
        font-size: 11px;
        letter-spacing: 1px;
        word-spacing: 2px;
    }

    .hero-left h1 { font-size: 24px; line-height: 1.3; }

    .hero-description { font-size: 14px; }

    .hero-buttons { flex-direction: column; width: 100%; }

    .btn { width: 100%; }

    .hero-right img { width: 200px; }

    .stat h2 { font-size: 30px; }
}

@keyframes float {
    0% {
        transform: translateY(0px)
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }

}

/*==== PRODUCTS =======*/
.page-header {
    width: 100%;
    padding: 40px  20px 24px;
    background: #fff;
    text-align: center;
}

/* Inner container - centers content, limits width*/
.page-header-container {
    max-width: 720px;
    margin: 0 auto;
}

/*small uppercase label sitting above the title */
.page-tag {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #666;
    margin-bottom: 15px;
}

/*Main page heading */
.page-title {
    font-size: 36px;
    line-height: 1.2;
    color: #111;
    margin-bottom: 15px;
}

/* paragraph beneath the title */
.page-subtitle {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto;
}

/*Inline links inside running text - subtle underline on hover */
.inline-link {
   color: #333;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.inline-link:hover {
    border-bottom-color: #0d5c2f;
}

/*----Mobile adjustment for the page header-----------*/
@media (max-width: 768px) {

.page-header {
    padding: 60px 16px 30px;
    }

    .page-title {
        font-size: 28px;
    }

    .page-subtitle {
        font-size: 14px;
    }

}

/*---------- CATEGORY FILTER CHIP---------------*/
/*----Horizontal row of pill buttons that filter the ---------------*/
/*---- product grid. Active chip is filled green;others----------------------*/
/*---- are outlined and turn green on hover.----------------------*/

.filter-section {
    width: 100%;
    padding: 0 20px 30px;
    background: #fff;
}

/* Inner container - centers and lets chips wrap */
.filter-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* Individual chip button */
.filter-chip {
    padding: 8px 18px;
    background: #fff;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover state for inactive chips - border + text turn green*/
.filter-chip:hover {
    border-color: #444;
    color: #444;
}

/* Keyboard focus ring - shows only on Tab navigation */
.filter-chip:focus-visible {
    outline: 2px solid #0d5c2f;
    outline-offset: 2px;
}

/* Active chip - currently selected category*/
.filter-chip.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.filter-chip.active:hover {
    background: #444;
    border-color: #444;
    color: #fff
}

/*--- Mobile adjustments for filter chips------------*/
@media (max-width: 768px) {
    .filter-section {
        padding: 0 12px 24px;
    }

    .filter-chip {
        padding: 7px 14px;
        font-size: 12px;
    }
}

/*---------------------------------------------------
===============================================
 - PRODUCT GRID
 Responsive grid of product card. The cards
 themselves are injected by products.js at runtime. 
 ==============================================
 
 Outer section - same horizontal padding as others 
 */
.products-section {
     width: 100%;
    padding: 24px 20px 140px;
}

/* Inner container - centers and limits width */
.products-section-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* The grid itself - auto-filtering responsive columns*/
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/*==============================================
SINGLE PRODUCT CARD
Each card: thin top accent, body with category,
product name, size, and a sign-in-for-price link.
===============================================*/

.product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

/* Thin green strip at the top of each card*/
.product-card-accent {
    height: 4px;
    background: #1a1a1a;
}

/* Card body - all text content lives here*/
.product-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow:1;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #ddd;
}

/* Small upper category label at the top*/
.product-category-label {
     font-size: 10px;
    letter-spacing: 1.2px;
    color: #555;
    font-weight: 700;
    margin-bottom:8px;
}

/* Product name - main text inside the card */
.product-name{
    font-size: 14px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    margin-bottom: 6px;
}

/* "Sign in for price" link at the bottom of the card */
.product-price-link {
    font-size: 12px;
    color: #0d5c2f;
    font-weight: 700;
    text-decoration: none;
    margin-top: auto;      /*pushes link the bottom*/
    transition: color 0.2s ease; 
}

.product-price-link:hover {
    color: #084421;
}

.products-loading,
.products-empty {
    text-align: center;
    color: #666;
    font-size: 14px;
    padding: 40px 20px;
}

.product-size {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}



/*------- Mobile adjustment for the grid------------*/
@media (max-width: 768px) {
    .products-section {
        padding: 10px 12px 40px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .product-card-body{
        padding: 12px;
    }

    .product-name {
        font-size: 13px;
    }


}


/* =========================================
ABOUT PAGE
========================================= */

.about-hero {
    padding: 120px 20px 70px;
    text-align: center;
}

.section-label {
    font-size: 12px;
    letter-spacing: 3px;
    color: #8a8a8a;
    margin-bottom: 20px;
}

.about-title {
    font-size: 52px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 24px;
    line-height: 1.1;
}

.about-text {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: #555555;
}


/* =========================================
GLOBAL SECTION SPACING
========================================= */

.about-section,
.values-section {
    padding: 40px 20px 80px;
}


/* =========================================
ABOUT HERO
========================================= */

.about-hero {
    padding: 140px 20px 70px;
}

.about-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.section-eyebrow {
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8b8b8b;
    margin-bottom: 18px;
}

.section-heading {
    font-size: 56px;
    line-height: 1.1;
    font-weight: 700;
    color: #101010;
    margin-bottom: 24px;
}

.section-description {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.9;
    color: #5f5f5f;
}


/*====== ABOUT PAGE=====*/
/* Main content section wrapper */
.about-section {
    width: 100%;
    padding: 60px 20px;
    background: #fff;
}

/* Main content section wrapper */
.about-section {
    width: 100%;
    padding: 60px 20px;
    background: #fff;
}

/* Grey background variant for vision section */
.about-section--grey {
    background: #fafafa;
}

/* Inner container - centers and limits width */
.about-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Section headings */
.about-heading {
    font-size: 22px;
    font-weight: 700;
    color: #0d5c2f;
    margin-bottom: 20px;
}

/* Centered heading variant for values section */
.about-heading--center {
    text-align: center;
}

/* Body paragraphs */
.about-text {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 16px;
}

/* Pull quote - vision section */
.about-pull {
    font-size: 16px;
    font-style: italic;
    color: #444;
    line-height: 1.8;
    border-left: 3px solid #8b1d1d;
    padding-left: 20px;
    margin: 0;
}

/* Values grid - 4 columns */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-top: 10px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* Single Value card */
.value-card {
    padding: 24px 16px;
    background: #ffff;
    border: 1px solid #eee;
    border-radius: 12px;
    text-align: center;
}

/* Green top border variant */
.value-card--green {
    border-top: 3px solid #0d5c2f;
}

/* Red top border variant */
.value-card--red {
    border-top: 3px solid #8b1d1d;
}

/* Value card title */
.value-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
}

/* Value card description */
.value-text {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* CTA section - dark green background */
.about-cta {
    width: 100%;
    padding: 70px 20px;
    background: #0d5c2f;
    text-align: center;
}

.about-cta .hero-buttons {
    justify-content: center;
}

/* CTA subtitle */
.about-cta-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 28px;
}

/* Override buttons inside green CTA section */
.about-cta .primary {
    background: #111;
    color: #fff;
}

.about-cta .secondary {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.about-cta .secondary:hover {
    background: #fff;
    color: #0d5c2f;
    border-color: #fff;
}

/* Mobile adjustment */
@media (max-width: 768px) {
    .about-section {
        padding: 40px 16px;
    }

    .about-heading {
        font-size: 20px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-cta {
        padding: 50px 16px;
    }


}

/* Small mobile*/
@media (max-width: 480px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}


/*====  WORK WITH US =======*/
/* Select Wrapper */
.wwu-section {
    width: 100%;
    padding: 60px 20px;
    background: #fff;
}

/* Grey background variant */
.wwu-selection--grey {
    background: #fafafa;
}

/* Inner container */
.wwu-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Small uppercase tag above headings */
.wwu-tag {
    font-size: 11px;
    letter-spacing: 1.6px;
    color: #8b1d1d;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Section heading */
.wwu-heading {
    font-size:  22px;
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
}

/* Body text */
.wwu-text {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 14px;
    max-width: 640px;
}


/*====ROLE CARDS ====*/

/*Four column grid */
.roles-grid {
    display: grid;
    grid-template-columns: repeat (4, minmax (0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

/* Single role card */
.role-card {
    background: #fff;
    border: 1px solid #eee;
    border-top: 3px solid #0d5c2f;
    border-radius: 12px;
    padding: 24px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Role title*/
.role-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

/* Role description */
.role-cta {
    font-size: 12px;
    font-weight: 700;
    color: #0d5c2f;
}

/*====FORM ====*/  

/* Form Wrapper */
.wwu-form {
    max-width: 600px;
    margin-top: 32px;
}

/*Each field group */
.form-group {
    margin-bottom: 20px;
}

/*Form Label*/
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    margin-bottom: 6px;
}

/* Input, select, textarea */
.form-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #111;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    appearance:  auto;
    -webkit-appearance: auto;
}

.form-input:focus {
    border-color: #333;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}

/* Textarea specific */
.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* File input */
.form-file {
    padding: 10px 14px;
    cursor: pointer;
}

/* Submit button - full width */
.wwu-submit {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    margin-top: 8px;
}

/*==== MOBILE =====*/
@media (max-width: 768px) {
    .wwu-section {
        padding: 40px 16px;
    }

    .roles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wwu-form {
        max-width: 100%;
    }

}

@media (max-width: 480px) {
    .roles-grid {
        grid-template-columns: 1fr;
    }
}


/*========== CONTACT PAGE ============ 
 Outer section
*/
.contact-section {
    width: 100%;
    padding: 60px 20px;
    background: #fff;
}

/* Two column Layout */
.contact-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/*====== LEFT SIDE - INFO  ============*/

.contact-info-heading {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 32px;
}


/*  Each contact detail block */
.contact-item {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #eee;
}

.contact-item:last-of-type {
    border-bottom: none;
}

/* Small label above each detail */
.contact-item-label {
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
    margin-bottom: 6px;
}

/* The actual value - email, phone etc*/
.contact-item-value {
    font-size: 15px;
    color: #111;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-item-value:hover {
    color: #0d5c2f;
}

/* Note at the bottom of info side */
.contact-note {
    margin-top: 32px;
    padding: 16px;
    background: #fafafa;
    border-radius: 10px;
    border-left: 3px solid #0d5c2f;
}

.conact-note p {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}


/*===== RIGHT SIDE - FORM====*/
.contact-form-wrap {
    flex: 1.4;
}

.contact-form {
    width: 100%;

}

/* Submit button full width */
.contact-submit {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    margin-top: 8px;
}

/*==== MOBILE ====*/
@media (max-width: 768px) {
    .contact-section {
        padding: 40px 16px;
    }

    /*==== MOBILE ====*/
    .contact-section {
        padding: 40px 16px;
    }

    .contact-container {
        flex-direction: column;
        gap: 40px;
    }

    .contact-info {
        width: 100%;
    }

    .contact-form-wrap {
        width: 100%;
    }

}

/*==== LOGIN PAGE ====*/
/* Lock the login page to view port
    No scroll, contenr centered*/
.login-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
    
}

/* Section fills remaining space 
   and centers the card*/
.login-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fafafa;
}

/* The white card in the center */
.login-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* Logo image inside card*/
.login-logo {
    margin-bottom: 24px;
}

.login-logo img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 14px;
}

/* Main heading */
.login-heading {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

/* Subtitle below heading */
.login-sub {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Form inside card */
.login-form {
    text-align: left;
}

/* Submit button full width */
.login-submit {
    width: 100%;
    padding: 13px;
    font-size: 14px;
    margin-top: 8px;
}

/* Link below form */
.login-links {
    margin-top: 20px;
    font-size: 13px;
    color: #888;
}

/* Dot separator between links */
.login-divider {
    margin: 0 8px;
    color: #ccc;
}

/* Mobile */
@media (max-width: 480px) {
    .login-card {
        padding: 28px 20px;
    }

    .login-heading {
        font-size: 20px;
    }
}

/* Hide login button on home and login pages */ 
.hide-login-btn .login-btn {
    display: none;
}


/*====== REGISTER PAGE ======== */
/*  Page  layout - scrollable unlike login 
because form is longer */
.register-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Section centers the card */
.register-section {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px 60px;
    background: #fafafa;
}

/* The white card */
.register-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    max-width: 460px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* Mobile */
@media (max-width: 480px) {
    .register-card {
        padding: 28px 20px;
    }

    .register-section {
        padding: 24px 16px 40px;
    }

}


/*==== FORGOT PASSWORD PAGE ======

Green checkmark circle shown on success*/

.forgot-success-icon {
    width: 56px;
    height: 56px;
    background: #0d5c2f;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 auto 20px;
}




/*==== DASHBOARD PAGE ======*/

/* Page background */
.dashboard-page {
    background: #fafafa;
    min-height: 100vh;
    padding-top: 0;
}

/*==== TOP BAR ======*/
.dash-topbar {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 14px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
}

.dash-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Home button */
.dash-home-btn {
    padding: 7px 14px;
    background: #f5f5f5;
    color: #444;
    border: 1px solid #eee;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.dash-home-btn:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* Logo in topbar */
.dash-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-logo img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 8px;
}

.dash-logo span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #111;
}

/* User pill */
.dash-user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 999px;
}

.dash-user-avatar {
    width: 24px;
    height: 24px;
    background: #111;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.dash-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

/* Logout button */
.dash-logout-btn {
    padding: 7px 14px;
    background: transparent;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.dash-logout-btn:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

/*==== PAGE HEADER ======*/
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 32px 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.dash-header-left {
    flex: 1;
}

.dash-header-right {
    flex-shrink: 0;
}

.dash-title {
    font-size: 24px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
}

.dash-subtitle {
    font-size: 13px;
    color: #666;
}

.dash-download-btn {
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 13px;
    background: #8b1d1d;
    color: #fff;
    border: none;
}

.dash-download-btn:hover {
    background: #0d5c2f;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(139, 29, 29, 0.25);
}

/*==== SEARCH BAR ======*/
.dash-search-section {
    padding: 20px 32px 0;
    background: #fff;
}

.dash-search-wrap {
    max-width: 100%;
}

.dash-search-input {
    width: 100%;
    padding: 11px 16px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #ddd;
    border-radius: 10px;
    outline: none;
    background: #fafafa;
    color: #111;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.dash-search-input:focus {
    border-color: #111;
    background: #fff;
}

/*==== FILTER CHIPS ======*/
.dash-filter-section {
    padding: 14px 32px 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 14px;
}

.dash-filter-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-chip {
    padding: 7px 16px;
    background: #fff;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dash-chip:hover {
    border-color: #111;
    color: #111;
}

.dash-chip.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Product count */
.dash-product-count {
    font-size: 11px;
    color: #aaa;
    margin-top: 10px;
}

/*==== PRODUCT GRID ======*/
.dash-products-section {
    padding: 24px 32px 140px;
}

.dash-loading,
.dash-empty {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 60px 20px;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/*==== PRODUCT CARD ======*/
.dash-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.dash-card--selected {
    border: 2px solid #111;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.dash-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border-color: #ddd;
}

/* Green top accent */
.dash-card-accent {
    height: 3px;
    background: #1a1a1a;
}

.dash-card-body {
    padding: 14px;
}

.dash-card-category {
    font-size: 9px;
    letter-spacing: 1.2px;
    color: #8b1d1d;
    font-weight: 700;
    margin-bottom: 6px;
}

.dash-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin-bottom: 12px;
}

.dash-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed #eee;
}

.dash-card-price {
    font-size: 13px;
    font-weight: 800;
    color: #111;
}

/* Select button */
.dash-select-btn {
    padding: 6px 12px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.dash-select-btn:hover {
    background: #0d5c2f;
}

.dash-select-btn--active {
    background: #fff;
    color: #111;
    border: 1.5px solid #111;
}

.dash-select-btn--active:hover {
    background: #111;
    color: #fff;
}

/*==== SELECTION BAR ======*/
.dash-selection-bar {
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    width: 100%;
    background: #111;
    color: #fff;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: bottom 0.3s ease;
    z-index: 200;
    box-sizing: border-box;
}

.dash-selection-bar--visible {
    bottom: 0;
}

.dash-selection-count {
    font-size: 14px;
    font-weight: 600;
}

.dash-selection-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dash-clear-btn {
    padding: 8px 16px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.dash-clear-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dash-selection-actions .primary {
    padding: 8px 16px;
    font-size: 12px;
    background: #8b1d1d;
    color: #fff;
}

.dash-selection-actions .primary:hover {
    background: #0d5c2f;
}

/*==== FLOATING CHAT BUTTON ======*/
.dash-chat-fab {
    position: fixed;
    bottom: 130px;
    right: 16px;
    width: 54px;
    height: 54px;
    background: #0d5c2f;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(13, 92, 47, 0.35);
    z-index: 300;
    transition: all 0.2s ease;
}

.dash-chat-fab:hover {
    background: #084421;
    transform: scale(1.08);
    box-shadow: 0 12px 28px rgba(13, 92, 47, 0.45);
}

/*==== MOBILE ======*/
@media (max-width: 768px) {

    .dash-topbar {
        padding: 12px 16px;
    }

    .dash-logo span {
        display: none;
    }

    .dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 16px 16px;
    }

    .dash-download-btn {
        width: 100%;
    }

    .dash-search-section {
        padding: 16px 16px 0;
    }

    .dash-filter-section {
        padding: 12px 16px;
    }

    .dash-products-section {
        padding: 16px 16px 140px;
    }

    .dash-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .dash-selection-bar {
        padding: 14px 16px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .dash-selection-actions {
        width: 100%;
        justify-content: center;
    }

    .dash-chat-fab {
        bottom: 20px;
        right: 16px;
        width: 48px;
        height: 48px;
    }
}

/*====== ADMIN PAGE ======

Page background */

.admin-page {
    background: #fafafa;
    min-height: 100vh;
    padding-top:0 ;
}

/*==== Top Bar ====*/
.admin-topbar {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 14px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Admin badge*/
.admin-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #8b1d1d;
    background: rgba(139, 29, 29, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
}

/*=== PAGE HEADER ====*/
.admin-header {
    padding: 32px 32px 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.admin-subtitle {
    font-size: 13px;
    color: #666;
    padding-bottom: 24px;
}


/*===== TABS ======*/
.admin-tabs {
    display: flex;
    gap: 0;
    background: #fff;
    border-bottom:  1px solid #eee;
    padding: 0 32px;
}

.admin-tab {
    padding: 14px 20px;
    background: transparent;
    color: #666;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.admin-section {
    padding: 24px 32px;
}

.admin-tab.active {
    color: #111;
    border-bottom: 2px solid #111;
}

/*==== TOOLBAR ====*/
.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.admin-search {
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid #ddd;
    border-radius: 10px;
    outline: 280px;
    outline: none;
    width: 280px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}


.admin-search:focus {
    border-color: #111;
}

.admit-add-btn {
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
}

/*==== TABLE ====*/
.admin-table-wrap {
    width: 100%;
    overflow-x:auto ;
    border: 1px solid #eee;
    border-radius: 12px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table thead {
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.admin-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f5f5f5;
    color: #111;
    vertical-align: middle;
}


.admin-table tr:hover td {
    background: #fafafa;
}

/* Product name column */
.admin-td-name {
    font-weight: 600;
    max-width: 280px;
}

/* Empty state row */
.admin-empty {
    text-align: center;
    color: #999;
    padding: 40px 16px;
}

/*====== TABLE BUTTONS =====*/
.admin-edit-btn {
    padding: 6px 14px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.admin-edit-btn:hover {
    background: #0d5c2f;
}

.admin-save-btn {
    padding: 6px 14px;
    background: #0d5c2f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-right: 6px;
    transition: all 0.2s ease;
}

.admin-save-btn:hover {
    background: #084421;
}

.admin-cancel-btn {
    padding: 6px 14px;
    background: transparent;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.admin-cancel-btn:hover {
    background: #f5f5f5;
}

.admin-delete-btn {
    padding: 6px 14px;
    background: transparent;
    color: #8b1d1d;
    border: 1px solid #8b1d1d;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.admin-delete-btn:hover {
    background: #8b1d1d;
    color: #fff;
}

/* Inline pricing input */
.admin-price-input {
    width: 120px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid #0d5c2f;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
}

/*===== ADD PRODUCT FORM =====*/
.admin-add-form {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.admin-form-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.admin-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/*======= MOBILE =======*/
@media (max-width: 768px) {
    .admin-topbar {
        padding: 12px 16px ;
    }

    .admin-header {
        padding: 24px 16px 0;
    }

    .admin-tabs {
        padding: 0 16px ;
    }

    .admin-section {
        padding: 16px ;
    }

    .admin-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-search{
        width: 100%;
    }

    .admin-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-td-name {
        max-width: 160px;
    }
} 

@media (max-width: 480px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }
}


/*==== CONTROL PANEL ======*/

/* KPI section */
.cp-kpi-section {
    padding: 24px 32px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

/* KPI grid - 4 columns */
.cp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Single KPI card */
.cp-kpi-card {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
}

/* KPI label */
.cp-kpi-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* KPI number */
.cp-kpi-number {
    font-size: 32px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
    line-height: 1;
}

/* Smaller number variant for timestamp */
.cp-kpi-number--sm {
    font-size: 16px;
    font-weight: 700;
    padding-top: 8px;
}

/* KPI sub label */
.cp-kpi-sub {
    font-size: 11px;
    color: #aaa;
}

/*==== MAIN SECTION ======*/
.cp-main-section {
    padding: 24px 32px;
}

/* Two column layout */
.cp-main-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
}

/* Section title */
.cp-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
}

/*==== ACTIVITY FEED ======*/
.cp-feed {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
}

/* Single feed item */
.cp-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.cp-feed-item:last-child {
    border-bottom: none;
}

/* Colored dot */
.cp-feed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

/* Feed text */
.cp-feed-text {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 4px;
}

/* Feed meta - branch and time */
.cp-feed-meta {
    font-size: 11px;
    color: #aaa;
}

/*==== SUMMARY CARD ======*/
.cp-summary-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
}

/* Single summary row */
.cp-summary-row {
    padding: 14px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.cp-summary-row:last-child {
    border-bottom: none;
}

/* Summary label */
.cp-summary-label {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Summary value */
.cp-summary-value {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

/*==== LOG SECTION ======*/
.cp-log-section {
    padding: 0 32px 40px;
}

.cp-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/*==== MOBILE ======*/
@media (max-width: 768px) {
    .cp-kpi-section {
        padding: 16px;
    }

    .cp-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-main-section {
        padding: 16px;
    }

    .cp-main-grid {
        grid-template-columns: 1fr;
    }

    .cp-log-section {
        padding: 0 16px 40px;
    }

    .cp-log-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cp-kpi-number {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .cp-kpi-grid {
        grid-template-columns: 1fr;
    }
}



/*==== LOGIN QUICK ACCESS ======*/

.login-quick {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.login-quick-label {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.login-quick-btn {
    width: 100%;
    padding: 13px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    background: #fff;
    color: #111;
    border: 1.5px solid #111;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-quick-btn:hover {
    background: #0d5c2f;
    color: #fff;
    border-color: #0d5c2f;
}


/*==== HOME PAGE REDESIGN ======*/

/* Override home-page body to use flex column */
.home-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fdfdf9;
    padding-top: 0;
}

/*==== GLASS NAVBAR UPGRADE ======*/
.home-page .navbar {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 0px rgba(255, 255, 255, 0.8) inset;
}

.home-page .nav-container {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/*==== HERO SPLIT LAYOUT ======*/
.hero-split {
    flex: 1;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #fff;
}

/* LEFT SIDE */
.hero-split-left {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 48px;
    border-right: 1px solid #f0f0f0;
}

.hero-logo-block {
    margin-bottom: 24px;
}

.hero-logo-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.hero-split-title {
    font-size: 32px;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.hero-split-sub {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 340px;
}

.hero-split-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 260px;
}

.hero-split-buttons .btn {
    width: 100%;
    padding: 13px 20px;
    font-size: 14px;
    text-align: center;
}

/* RIGHT SIDE */
.hero-split-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: #fafafa;
    overflow: hidden;
}

/*==== GALLERY CAROUSEL ======*/
.gallery-carousel {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

/* Carousel: tell the browser this area is swipeable */
.carousel-track {
    display: flex;
    gap: 12px;
    flex: 1;
    align-items: center;
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}

.carousel-track:active {
    cursor: grabbing;
}

/* Single card */
.carousel-card {
    flex: 1;
    height: 100%;
    min-height: 380px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease;
}

.carousel-card:hover {
    transform: translateY(-4px);
}

/* Image background */
.carousel-card-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.gallery-carousel {
    max-width: 100%;
}

/* Dark overlay */
.carousel-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

/* Label at bottom of card */
.carousel-card-label {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    padding: 10px 12px;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

/* Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #eee;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-arrow:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

.carousel-arrow--left {
    left: -18px;
}

.carousel-arrow--right {
    right: -18px;
}

/* Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.2s ease;
}

.carousel-dot.active {
    background: #111;
    width: 20px;
    border-radius: 3px;
}

/*==== LIGHTBOX ======*/
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox--open {
    display: flex;
}

/* Stronger backdrop blur — premium feel */
.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

/* Modal box */
.lightbox-modal {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    max-width: 640px;
    width: 88%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    animation: lightbox-pop 0.25s ease;
}

@keyframes lightbox-pop {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Close button */
.lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background 0.2s ease;
}

@keyframes lightbox-pop {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}


.lightbox-close:hover {
    background: #111;
}

/* Image area — taller, supports swipe gestures */
.lightbox-img-wrap {
    width: 100%;
    height: 380px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
    user-select: none;
    position: relative;
}

.lightbox-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}


/* Caption + nav row sit on dark background, cleaner */
.lightbox-caption {
    padding: 14px 20px 6px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

/* Nav row */
.lightbox-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 16px;
}

.lightbox-btn {
    padding: 8px 16px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease;
}

.lightbox-btn:hover {
    background: #0d5c2f;
}

.lightbox-counter {
    font-size: 12px;
    color: #999;
}

/*==== GLASS FOOTER ======*/
.glass-footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 -4px 24px rgba(0, 0, 0, 0.04),
        0 -1px 0 rgba(255, 255, 255, 0.8) inset;
    z-index: 100;
}

.glass-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.glass-footer-brand {
    font-size: 13px;
    color: #555;
}

.glass-footer-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.glass-footer-links a {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.glass-footer-links a:hover {
    color: #111;
}

/*==== MOBILE ======*/
@media (max-width: 768px) {

    .home-page {
        height: auto;
        overflow: visible;
    }

    .hero-split {
        flex-direction: column;
    }

    /* Compact left side */
    .hero-split-left {
        flex: none;
        padding: 20px 20px 16px;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .hero-logo-block {
        margin-bottom: 12px;
    }

    .hero-logo-img {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    .hero-split-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .hero-split-sub {
        font-size: 13px;
        margin-bottom: 18px;
    }

    /* Buttons side by side on mobile */
    .hero-split-buttons {
        flex-direction: row;
        gap: 10px;
        max-width: 100%;
    }

    .hero-split-buttons .btn {
        flex: 1;
        padding: 11px 12px;
        font-size: 13px;
    }

    /* Carousel */
    .hero-split-right {
        padding: 20px 16px;
        min-height: 240px;
    }

    /* One large card on mobile */
   .carousel-card {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}
    .carousel-arrow--left {
        left: 4px;
    }

    .carousel-arrow--right {
        right: 4px;
    }

    /* Lightbox */
      .lightbox-img-wrap {
        height: 280px;
    }
    .lightbox-img-wrap::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 2px;
    }


    /* Glass footer */
    .glass-footer-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 12px 20px;
    }
}





/*==== PRODUCTS PAGE REDESIGN ======*/


/*================================================
ABOUT PAGE — FULL REDESIGN
================================================*/

/*---- Hero ----*/
.ab-hero {
    width: 100%;
    min-height: 60vh;
    background: #0a0a0a;
    display: flex;
    align-items: flex-end;
    padding-bottom: 60px;
    position: relative;
    overflow: hidden;
}



.ab-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ab-glow-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(
        circle,
        rgba(13, 92, 47, 0.28) 0%,
        transparent 70%
    );
    top: -200px;
    right: -150px;
    filter: blur(80px);
}

.ab-glow-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle,
        rgba(139, 29, 29, 0.18) 0%,
        transparent 70%
    );
    bottom: -100px;
    left: -100px;
    filter: blur(80px);
}

.ab-hero-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 160px 60px 0;
    position: relative;
    z-index: 2;
}

.ab-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 3px;
    color: #8b1d1d;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.ab-hero-title {
    font-size: clamp(36px, 5vw, 68px);
    font-weight: 900;
    color: #fff;
    line-height: 0.95;
    letter-spacing: -2px;
    margin-bottom: 40px;
}

.ab-hero-bottom {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ab-hero-rule {
    width: 56px;
    height: 2px;
    background: #0d5c2f;
    flex-shrink: 0;
}

.ab-hero-tagline {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    letter-spacing: 0.3px;
    margin: 0;
}

/*---- Shared container ----*/
.ab-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 40px;
}

.ab-container--wide {
    max-width: 1100px;
}

/*---- Shared text styles ----*/
.ab-body-text {
    font-size: 16px;
    color: #444;
    line-height: 1.9;
    margin-bottom: 20px;
    max-width: 680px;
}

.ab-emphasis-text {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 20px;
    margin-top: 4px;
}

.ab-section-title {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 900;
    color: #111;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 40px;
}

.ab-section-title--light {
    color: #fff;
}

.ab-callout {
    border-left: 3px solid #8b1d1d;
    padding: 20px 24px;
    margin: 36px 0;
    background: #fafafa;
    border-radius: 0 8px 8px 0;
}

.ab-callout p {
    font-size: 15px;
    font-style: italic;
    color: #333;
    line-height: 1.7;
    margin-bottom: 8px;
}

.ab-callout p:last-child {
    margin-bottom: 0;
}

.ab-callout--green {
    border-left-color: #0d5c2f;
}

/*---- Statement section ----*/
.ab-statement {
    width: 100%;
    padding: 60px 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.ab-lead-text {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 580px;
}

.ab-bold-statement {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 900;
    color: #111;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 48px;
    padding-left: 28px;
    border-left: 5px solid #8b1d1d;
}

/*---- Scale section ----*/
.ab-scale-section {
    width: 100%;
    padding: 100px 0;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.ab-scale-title {
    font-size: clamp(32px, 4.5vw, 60px);
    font-weight: 900;
    color: #111;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 48px;
}

.ab-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 56px;
}

.ab-pillar {
    padding: 22px 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #0d5c2f;
    border: 2px solid rgba(13, 92, 47, 0.2);
    border-radius: 10px;
    letter-spacing: 0.3px;
    background: #fff;
    transition: all 0.2s ease;
    cursor: default;
}

.ab-pillar:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

/*---- Backbone section ----*/
.ab-backbone-section {
    width: 100%;
    padding: 100px 0;
    background: #111;
}

.ab-backbone-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: start;
}

.ab-backbone-title {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.5px;
    margin-bottom: 32px;
}

.ab-backbone-section .ab-body-text {
    color: rgba(255, 255, 255, 0.6);
}

.ab-backbone-section .ab-emphasis-text {
    color: #fff;
}

.ab-backbone-section .ab-callout {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: #8b1d1d;
}

.ab-backbone-section .ab-callout p {
    color: rgba(255, 255, 255, 0.65);
}

.ab-serve-label {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    margin-bottom: 20px;
}

.ab-serve-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ab-serve-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    transition: color 0.2s ease;
}

.ab-serve-list li:hover {
    color: #fff;
}

.ab-serve-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    min-width: 6px;
    background: #0d5c2f;
    border-radius: 50%;
}

/*---- Network section ----*/
.ab-network-section {
    width: 100%;
    padding: 100px 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.ab-network-close {
    font-size: 18px;
    font-weight: 700;
    color: #0d5c2f;
    line-height: 1.7;
    margin-top: 8px;
    max-width: 600px;
}

/*---- Why Us section ----*/
.ab-why-section {
    width: 100%;
    padding: 100px 0;
    background: #0a0a0a;
}

.ab-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.ab-why-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 28px;
    transition: all 0.2s ease;
}

.ab-why-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-3px);
}

.ab-why-card--wide {
    grid-column: span 3;
    max-width: 400px;
}

.ab-why-number {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #0d5c2f;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

.ab-why-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.3;
}

.ab-why-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
    margin: 0;
}

/*---- More Than section ----*/
.ab-more-section {
    width: 100%;
    padding: 100px 0;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.ab-more-title {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 900;
    color: #111;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.ab-more-list {
    margin-top: 40px;
    border-top: 1px solid #e8e8e8;
}

.ab-more-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid #e8e8e8;
    transition: padding 0.2s ease;
}

.ab-more-item:hover {
    padding-left: 8px;
}

.ab-more-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: #0d5c2f;
    border-radius: 50%;
    margin-top: 10px;
}

.ab-more-item p {
    font-size: 20px;
    color: #111;
    line-height: 1.5;
    font-weight: 500;
    margin: 0;
}

/*---- Standard section ----*/
.ab-standard-section {
    width: 100%;
    padding: 100px 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.ab-standard-title {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 900;
    color: #111;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.ab-standard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-top: 40px;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
}

.ab-standard-item {
    padding: 40px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #fff;
    transition: background 0.2s ease;
}

.ab-standard-item:hover {
    background: #fafafa;
}

.ab-standard-item:nth-child(even) {
    border-right: none;
}

.ab-standard-item:nth-child(3),
.ab-standard-item:nth-child(4) {
    border-bottom: none;
}

.ab-standard-item p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.ab-standard-item p strong {
    color: #111;
    font-weight: 800;
}

/*---- Final stamp ----*/
.ab-final-stamp {
    width: 100%;
    padding: 120px 20px;
    background: #0d5c2f;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ab-final-glow {
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 65%
    );
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.ab-final-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.ab-final-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 28px;
    display: block;
}

.ab-final-title {
    font-size: clamp(40px, 7vw, 88px);
    font-weight: 900;
    color: #fff;
    line-height: 0.92;
    letter-spacing: -2px;
    margin-bottom: 40px;
}

.ab-final-details {
    margin-bottom: 48px;
}

.ab-final-details p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.9;
    margin: 0;
}

.ab-final-quote {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 48px;
    padding: 24px 32px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.ab-final-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.ab-final-btn-primary {
    padding: 13px 28px;
    background: #fff;
    color: #0d5c2f;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.ab-final-btn-primary:hover {
    background: #111;
    color: #fff;
    transform: translateY(-2px);
}

.ab-final-btn-outline {
    padding: 13px 28px;
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.ab-final-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.65);
}

/* =========================================
   MOBILE RESPONSIVE — SMALLER SCREENS
========================================= */

@media (max-width: 768px) {

    .ab-hero {
        min-height: auto;
        padding-bottom: 56px;
        align-items: flex-start;
    }

    .ab-hero-inner {
        padding: 72px 22px 0;
    }

    .ab-hero-title {
        font-size: clamp(38px, 10vw, 58px);
        line-height: 0.95;
        letter-spacing: -1.8px;
        margin-bottom: 32px;
    }

    .ab-container {
        padding: 0 18px;
    }

    .ab-statement,
    .ab-scale-section,
    .ab-network-section,
    .ab-more-section,
    .ab-standard-section,
    .ab-backbone-section,
    .ab-why-section {
        padding: 56px 0;
    }

    .ab-bold-statement {
        font-size: clamp(26px, 6.5vw, 40px);
        line-height: 1.1;
        padding-left: 18px;
        border-left-width: 4px;
    }

    .ab-pillars {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 36px;
    }

    .ab-pillar {
        padding: 18px 12px;
        font-size: 14px;
        line-height: 1.4;
        border-radius: 14px;
    }

    .ab-backbone-grid,
    .ab-why-grid,
    .ab-standard-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ab-why-card,
    .ab-standard-item {
        padding: 24px 22px;
    }

    .ab-why-card--wide {
        grid-column: span 1;
        max-width: 100%;
    }

    .ab-more-item p,
    .ab-standard-item p {
        font-size: 16px;
        line-height: 1.7;
    }

    .ab-standard-item {
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .ab-standard-item:last-child {
        border-bottom: none;
    }

    .ab-final-stamp {
        padding: 72px 18px;
    }

    .ab-final-title {
        font-size: clamp(34px, 8vw, 52px);
        line-height: 0.95;
        letter-spacing: -1.2px;
    }

    .ab-final-quote {
        font-size: 16px;
        line-height: 1.7;
        padding: 20px 22px;
    }

    .ab-final-buttons {
        flex-direction: column;
        gap: 14px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .ab-final-btn-primary,
    .ab-final-btn-outline {
        width: 100%;
        text-align: center;
    }
}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 480px) {

    .ab-hero-inner {
        padding: 64px 18px 0;
    }

    .ab-hero-title {
        font-size: clamp(32px, 11vw, 48px);
        line-height: 0.92;
        letter-spacing: -1px;
        margin-bottom: 26px;
    }

    .ab-container {
        padding: 0 16px;
    }

    .ab-pillars {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ab-pillar {
        padding: 18px 14px;
        font-size: 13px;
    }

    .ab-bold-statement {
        font-size: clamp(22px, 7vw, 34px);
        padding-left: 16px;
    }

    .ab-why-card {
        padding: 20px;
        border-radius: 18px;
    }

    .ab-more-item p,
    .ab-standard-item p {
        font-size: 15px;
        line-height: 1.65;
    }

    .ab-final-stamp {
        padding: 64px 16px;
    }

    .ab-final-title {
        font-size: clamp(28px, 10vw, 42px);
    }

    .ab-final-quote {
        font-size: 15px;
        padding: 18px 20px;
    }

    .ab-final-btn-primary,
    .ab-final-btn-outline {
        padding: 14px 18px;
        font-size: 14px;
    }
}


/* =========================================
   EXTRA SMALL DEVICES
========================================= */

@media (max-width: 360px) {

    .ab-hero-inner {
        padding: 56px 14px 0;
    }

    .ab-hero-title {
        font-size: clamp(28px, 12vw, 40px);
        letter-spacing: -0.8px;
    }

    .ab-container {
        padding: 0 14px;
    }

    .ab-bold-statement {
        font-size: 22px;
        line-height: 1.25;
        padding-left: 14px;
    }

    .ab-pillars {
        gap: 8px;
    }

    .ab-pillar {
        padding: 16px 12px;
        font-size: 12px;
        border-radius: 12px;
    }

    .ab-why-card,
    .ab-standard-item {
        padding: 18px;
    }

    .ab-more-item p,
    .ab-standard-item p,
    .ab-final-quote {
        font-size: 14px;
        line-height: 1.6;
    }

    .ab-final-title {
        font-size: clamp(24px, 11vw, 36px);
        line-height: 1;
    }

    .ab-final-stamp {
        padding: 56px 14px;
    }

    .ab-final-btn-primary,
    .ab-final-btn-outline {
        font-size: 13px;
        padding: 13px 16px;
    }
}


/*================================================
PRODUCTS PAGE — COMPLETE STYLES

Sections:
1.  Page header
2.  Sticky search bar
3.  Category jump buttons
4.  Filter chips bar
5.  Recently viewed strip
6.  Product grid section
7.  Product card
8.  Blurred price teaser
9.  Empty state
10. Filter FAB (mobile)
11. Bottom sheet (mobile)
12. Floating CTA pill
13. Responsive — tablet 768px
14. Responsive — mobile 480px
================================================*/


/*------------------------------------------------
1. PAGE HEADER
Centered intro section at top of products page.
Contains: tag label, main title, subtitle.
------------------------------------------------*/

.prod-page-header {
    width: 100%;
    padding: 32px 20px 24px;
    background: #fff;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.prod-page-header-inner {
    max-width: 640px;
    margin: 0 auto;
}

/* Small uppercase tag above title */
.prod-page-tag {
    font-size: 11px;
    letter-spacing: 2px;
    color: #999;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Main page title */
.prod-page-title {
    font-size: 32px;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

/* Subtitle below title */
.prod-page-subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
}


/*------------------------------------------------
2. STICKY SEARCH BAR
Only the search bar sticks to the top on scroll.
Filter chips scroll away naturally.
Contains: icon, input, clear button.
------------------------------------------------*/

.prod-search-bar {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 14px 20px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-sizing: border-box;
}

/* Inner container — limits max width */
.prod-search-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}

/* Search icon — positioned inside input */
.prod-search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: #aaa;
    pointer-events: none;
    flex-shrink: 0;
}

/* Search input field */
.prod-search-input {
    width: 100%;
    padding: 11px 44px 11px 42px;
    font-size: 14px;
    font-family: inherit;
    border: 1.5px solid #eee;
    border-radius: 10px;
    outline: none;
    background: #fafafa;
    color: #111;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.prod-search-input:focus {
    border-color: #333;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Clear button — shows only when user has typed */
.prod-search-clear {
    position: absolute;
    right: 12px;
    width: 22px;
    height: 22px;
    background: #e8e8e8;
    border: none;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.2s ease;
}

.prod-search-clear:hover {
    background: #333;
    color: #fff;
}


/*------------------------------------------------
3. CATEGORY JUMP BUTTONS
Large shortcut buttons — one per category.
Desktop: all 6 in one row.
Mobile: 3 columns × 2 rows grid.
Clicking sets that category filter active
and scrolls to the product grid.
------------------------------------------------*/

.prod-jump-section {
    width: 100%;
    padding: 20px 20px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

/* 6-column grid on desktop */
.prod-jump-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

/* Single jump button */
.prod-jump-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.prod-jump-btn:hover {
    background: #f5f5f5;
    border-color: #ddd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Active state — when that category is selected */
.prod-jump-btn.active {
    background: #333;
    border-color: #333;
}

.prod-jump-btn.active .prod-jump-label,
.prod-jump-btn.active .prod-jump-count {
    color: #fff;
}

/* Emoji icon */
.prod-jump-icon {
    font-size: 22px;
    line-height: 1;
}

/* Category name */
.prod-jump-label {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.3px;
}

/* Product count in brackets */
.prod-jump-count {
    font-size: 11px;
    color: #999;
    font-weight: 500;
}


/*------------------------------------------------
4. FILTER CHIPS BAR
Single horizontal scrollable row of chips.
No wrapping — chips never go to second line.
Each chip shows category name + product count.
Active chip is dark filled.
Product count text sits below the chips row.
------------------------------------------------*/

.prod-filter-bar {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 12px 20px 0;
    position: sticky;
    z-index: 998;
    box-sizing: border-box;
    /* top value set dynamically by web.js */
}

/* Inner container */
.prod-filter-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Chips horizontal scroll container */
.prod-chips-wrap {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 12px;
    /* Hide scrollbar visually but keep scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.prod-chips-wrap::-webkit-scrollbar {
    display: none;
}

/* Single chip */
.prod-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    background: #fff;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.prod-chip:hover {
    border-color: #444;
    color: #111;
}

/* Active chip — currently selected category */
.prod-chip.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.prod-chip.active:hover {
    background: #444;
    border-color: #444;
}

/* Count in brackets inside chip */
.prod-chip-count {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
}

/* Product count text below chips */
.prod-count {
    font-size: 12px;
    color: #aaa;
    padding-bottom: 12px;
    margin: 0;
}


/*------------------------------------------------
5. RECENTLY VIEWED STRIP
Mobile only — hidden on desktop.
Appears after buyer taps first product card.
Horizontal scrollable strip of recent items.
Data stored in sessionStorage.
------------------------------------------------*/

.prod-recent-wrap {
    width: 100%;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    padding: 12px 20px;
    display: none; /* shown by JS when items exist */
}

.prod-recent-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* "Recently viewed" label */
.prod-recent-label {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Horizontal scroll strip */
.prod-recent-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.prod-recent-strip::-webkit-scrollbar {
    display: none;
}

/* Single recent item pill */
.prod-recent-item {
    flex-shrink: 0;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prod-recent-item:hover {
    background: #f5f5f5;
    border-color: #ddd;
}

/* Product name inside pill */
.prod-recent-name {
    font-size: 12px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    margin: 0;
}


/*------------------------------------------------
6. PRODUCT GRID SECTION
Main content area containing the product grid.
4 columns on desktop.
2 columns on mobile.
Has extra bottom padding to clear the CTA pill.
------------------------------------------------*/

.prod-section {
    width: 100%;
    padding: 24px 20px 100px;
    background: #fff;
}

/* Inner container */
.prod-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Grid — 4 columns on desktop */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill, minmax(220px, 1fr)
    );
    gap: 16px;
}

/* Loading text */
.prod-loading {
    text-align: center;
    color: #bbb;
    font-size: 14px;
    padding: 60px 20px;
}


/*------------------------------------------------
7. PRODUCT CARD
Each card has:
- Thin dark top accent strip
- Category label (small, uppercase, gray)
- Product name (bold)
- Unit (small, muted)
- Blurred price teaser
- Sign in button
------------------------------------------------*/

/* Card wrapper */
.prod-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prod-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    border-color: #ddd;
}

/* Thin accent strip at top of card */
.prod-card-accent {
    height: 4px;
    background: #1a1a1a;
    flex-shrink: 0;
}

/* Card body — all text content */
.prod-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Category label — small, uppercase, gray */
.prod-cat-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #888;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Product name — main text */
.prod-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin-bottom: 6px;
    flex-grow: 1;
}

/* Unit — e.g. "Per Tray" */
.prod-unit {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 12px;
}


/*------------------------------------------------
8. BLURRED PRICE TEASER
Shows a deliberately obscured price.
Creates desire — buyer sees a price exists
but cannot read it until they log in.
------------------------------------------------*/

.prod-price-wrap {
    margin-bottom: 12px;
}

/* The blurred price number */
.prod-price-blur {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    letter-spacing: 1px;
    filter: blur(6px);
    user-select: none;
    margin-bottom: 4px;
    transition: filter 0.3s ease;
}

/* Hover reveals a slightly less blurred price */
.prod-card:hover .prod-price-blur {
    filter: blur(4px);
}

/* "Login to unlock" label below blurred price */
.prod-price-label {
    font-size: 11px;
    color: #bbb;
    font-weight: 500;
}

/* Lock button — links to login page */
.prod-lock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    margin-top: auto;
}

.prod-lock-btn:hover {
    background: #444;
    transform: translateY(-1px);
}


/*------------------------------------------------
9. EMPTY STATE
Shown when search returns no results.
Centered, with a clear search button.
------------------------------------------------*/

.prod-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.prod-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
}

.prod-empty-sub {
    font-size: 14px;
    color: #999;
    margin-bottom: 24px;
    line-height: 1.6;
}

.prod-empty-state .btn {
    padding: 10px 24px;
    font-size: 13px;
}


/*------------------------------------------------
10. FILTER FAB
Mobile only — hidden on desktop.
Fixed bottom right corner.
Tapping opens the bottom sheet filter panel.
------------------------------------------------*/

.prod-filter-fab {
    display: none; /* hidden on desktop */
    position: fixed;
    bottom: 70px;
    right: 16px;
    z-index: 250;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 56px;
    height: 56px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.prod-filter-fab:hover {
    background: #444;
    transform: scale(1.05);
}

.prod-filter-fab span {
    font-size: 9px;
    letter-spacing: 0.5px;
}


/*------------------------------------------------
11. BOTTOM SHEET (mobile filter panel)
Slides up from bottom when FAB is tapped.
Dark overlay behind it.
Contains all category chips + apply button.
Closed by: X button, overlay tap, or apply.
------------------------------------------------*/

/* Dark overlay behind the sheet */
.prod-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1150;
}

/* Open state for overlay */
.prod-sheet-overlay--open {
    display: block;
}

/* The sheet panel itself */
.prod-sheet {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 20px 20px 40px;
    z-index: 1200;
    transition: bottom 0.35s ease;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
}

/* Open state — slides up */
.prod-sheet--open {
    bottom: 0;
}

/* Sheet header row */
.prod-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

/* Sheet title text */
.prod-sheet-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

/* Close button */
.prod-sheet-close {
    width: 32px;
    height: 32px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.2s ease;
}

.prod-sheet-close:hover {
    background: #333;
    color: #fff;
}

/* Chips grid inside sheet */
.prod-sheet-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

/* Single sheet chip */
.prod-sheet-chip {
    padding: 9px 18px;
    background: #fff;
    color: #444;
    border: 1.5px solid #eee;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prod-sheet-chip:hover {
    border-color: #ddd;
    background: #f5f5f5;
}

/* Active sheet chip */
.prod-sheet-chip.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Apply button — full width */
.prod-sheet-apply {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prod-sheet-apply:hover {
    background: #444;
}

/* Hide CTA pill while filter sheet is open — sheet takes priority */
.prod-sheet--open ~ .prod-cta-pill,
body:has(.prod-sheet--open) .prod-cta-pill {
    display: none;
}


/*------------------------------------------------
12. FLOATING CTA PILL
Fixed bottom center — always visible.
Encourages buyers to login or register.
Contains: lock icon + text + two buttons.
------------------------------------------------*/

.prod-cta-pill {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 680px;
    background: #1a1a1a;
    border-radius: 16px;
    z-index: 1000;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Inner row */
.prod-cta-pill-inner {
    padding: 10px 10px 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Text on left */
.prod-cta-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
    flex: 1;
}

.prod-cta-lock {
    font-size: 14px;
    flex-shrink: 0;
}

/* Buttons on right */
.prod-cta-pill-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Login button — red accent */
.prod-cta-login {
    padding: 9px 18px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.prod-cta-login:hover {
    background: #555;
}

/* Create account button — outlined */
.prod-cta-register {
    padding: 9px 18px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.prod-cta-register:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}


/*------------------------------------------------
13. RESPONSIVE — TABLET (max-width: 768px)
------------------------------------------------*/

@media (max-width: 768px) {

    /* Page header — compact */
    .prod-page-header {
        padding: 32px 16px 20px;
        display: block;
    }

    .prod-page-title {
        font-size: 22px;
    }

   /* Search bar — sticky on mobile
       top offset set dynamically by JS */
    .prod-search-bar {
        position: sticky;
        padding: 12px 16px;
    }

    /* Jump buttons — 3 columns × 2 rows */
    .prod-jump-section {
        padding: 16px;
        display: block;
    }

    .prod-jump-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        display: grid;
    }

    .prod-jump-btn {
        padding: 14px 8px;
    }

    .prod-jump-icon {
        font-size: 20px;
    }

    .prod-jump-label {
        font-size: 11px;
    }

    /* Filter bar */
.prod-filter-bar {
    padding: 10px 16px 0;
    position: static;
}

    /* Recently viewed — show on mobile */
    .prod-recent-wrap {
        padding: 10px 16px;
    }

    /* Product grid — 2 columns */
    .prod-section {
        padding: 16px 12px 120px;
    }

    .prod-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Cards — tighter padding */
    .prod-card-body {
        padding: 12px;
    }

    .prod-name {
        font-size: 13px;
    }

    .prod-price-blur {
        font-size: 16px;
    }

    /* Show filter FAB on mobile */
    .prod-filter-fab {
    display: flex;
    bottom: 140px;
    z-index: 1100;
}


   /* CTA pill sits above bottom nav on mobile */
    .prod-cta-pill {
        bottom: 72px;
        width: calc(100% - 24px);
        border-radius: 14px;
    }

   .prod-cta-pill-inner {
        padding: 8px 12px;
        flex-direction: row;
        gap: 8px;
        justify-content: space-between;
        align-items: center;
    }

    .prod-cta-text {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }

    .prod-cta-pill-buttons {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    .prod-cta-login,
    .prod-cta-register {
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
    }
}


/*------------------------------------------------
14. RESPONSIVE — SMALL MOBILE (max-width: 480px)
------------------------------------------------*/

@media (max-width: 480px) {

    /* Search bar — sticky, top set by JS */
    .prod-search-bar {
        position: sticky;
    }

    /* Jump grid stays 3 columns */
    .prod-jump-grid {
        gap: 6px;
    }

    .prod-jump-btn {
        padding: 12px 6px;
        border-radius: 10px;
    }

    .prod-jump-icon {
        font-size: 18px;
    }

    .prod-jump-label {
        font-size: 10px;
    }

    .prod-jump-count {
        font-size: 10px;
    }

    /* Product cards */
    .prod-card-body {
        padding: 10px;
    }

    .prod-name {
        font-size: 12px;
    }

    .prod-unit {
        font-size: 11px;
    }

    .prod-lock-btn {
        font-size: 11px;
        padding: 8px 10px;
    }
}