/* ==============================================================
   assets/css/style.css
   Master design system stylesheet shared by all customer-facing pages (navbar, hero, product card, footer, chatbot, etc.).
================================================================= */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* -----------------------------------------------------------
   1. ROOT VARIABLES (Theme Colors / Design Tokens)
   Parang "settings" ng buong website — kulay, shadow, radius.
----------------------------------------------------------- */
:root {
    --green-900: #1F3D2B;
    --green-800: #274B35;
    --green-700: #2F5D3A;
    --green-600: #3F704B;

    --gold: #C8A96B;
    --gold-dark: #A98B53;

    --cream: #F7F3E8;
    --cream-dark: #EEE7D5;
    --light-green: #EAF3EC;

    /* Warm brown/taupe accents (mula sa design reference, "shadow"
       palette) — DAGDAG lang ito sa tabi ng green/gold, hindi
       kapalit. Ginagamit lang ito bilang pangalawang accent sa piling
       lugar (hal. alternating section background, warm card border)
       para may bahagyang variation sa buong cream/white na naririnig
       na, hindi ito ginagamit sa mga PRIMARY na button/link (nananatili
       pa rin ang green/gold doon). */
    --shadow-lightest: #F3F1EE;
    --shadow-lighter: #E7E3DD;
    --shadow-light: #AD9D88;
    --shadow-accent: #8B7355;
    --shadow-dark: #6F5C44;

    --white: #FFFFFF;

    --text: #26332A;
    --text-light: #657168;

    --border: #E3E6E1;

    --success: #3D7A4D;
    --warning: #9B7734;
    --danger: #B94A48;

    --shadow-sm: 0 4px 15px rgba(31, 61, 43, 0.08);
    --shadow-md: 0 12px 32px rgba(31, 61, 43, 0.12);
    --shadow-lg: 0 22px 55px rgba(31, 61, 43, 0.16);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --container: 1200px;
}

/* -----------------------------------------------------------
   2. RESET / BASE
   Para pantay-pantay ang margin/padding sa lahat ng browser.
----------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* `hidden` must win over component display rules (e.g. notification badges) */
[hidden] {
    display: none !important;
}

/* No sideways scrolling on phones. `clip` (not `hidden`) keeps the sticky
   header working; older browsers fall back to body `hidden`. */
html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--cream);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-x: clip;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: none;
    cursor: pointer;
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin: 0 auto;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(200, 169, 107, 0.50);
    outline-offset: 2px;
}

/* -----------------------------------------------------------
   3. SITE HEADER / NAVBAR
   Ginagamit ito sa LAHAT ng customer-facing pages (Home,
   Products, Cart, Checkout, Dashboard). Isang navbar lang,
   consistent sa buong site.
----------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--border);
    /* SINADYANG TINANGGAL ang "backdrop-filter: blur()" na dati rito
       — halos hindi naman ito namamalayan sa mata dahil 97% opaque na
       ang background, pero ang backdrop-filter (kagaya ng transform/
       filter) ay lumilikha ng bagong "containing block" para sa mga
       position:fixed na ANAK nito — dahil ANAK ng .site-header ang
       .main-nav (mobile drawer), naging relative ito sa .site-header
       MISMO imbes na sa buong screen, kaya "putol"/maikli lang ang
       taas ng drawer. Sa halip na ilipat ang buong .main-nav palabas
       ng <header> (mas mapanganib — masisira ang desktop layout nito,
       dahil bahagi ito ng flex row kasama ang logo), dito na lang
       tinanggal ang mismong sanhi. */
}

.main-header {
    min-height: 76px;
    background: var(--white);
}

.main-header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Brand / Logo */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Totoong logo image na ngayon (assets/images/logo.jpg) — bilog na
   naka-crop (object-fit: cover) dahil bilog na mismo ang disenyo ng
   logo, kaya walang makikitang puting kahon sa paligid nito kahit
   nasa madilim na background (hal. footer, admin panel). */
.brand-mark {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(47, 93, 58, 0.2);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--green-900);
    letter-spacing: -0.2px;
}

.brand-subtitle {
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--text-light);
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

/* Navigation links */
.main-nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-link {
    position: relative;
    padding: 10px 13px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-link:hover {
    color: var(--green-700);
    background: var(--cream);
}

.nav-link.active {
    color: var(--green-700);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 2px;
    background: var(--gold);
    border-radius: 10px;
}

.nav-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 8px;
}

.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.nav-login {
    color: var(--green-700);
    border: 1px solid var(--green-700);
    background: transparent;
}

.nav-login:hover {
    background: var(--green-700);
    color: var(--white);
}

.nav-register {
    background: var(--green-700);
    color: var(--white);
}

.nav-register:hover {
    background: var(--green-900);
    transform: translateY(-1px);
}

.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Hamburger button — TAGO by default (desktop), ipinapakita lang ito
   sa loob ng @media (max-width:700px) sa ibaba, kung saan naman naging
   fixed slide-in drawer ang .main-nav imbes na horizontal-scroll row. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

/* Close (X) button sa loob mismo ng mobile drawer — tago by default
   (desktop), lumalabas lang sa loob ng @media (max-width:700px) sa
   ibaba. Kailangan ito dahil ang drawer (.main-nav, fixed top-right)
   ay natatakpan ang .nav-toggle na nasa likod nito kapag bukas na,
   kaya kailangan ng SARILING close button ang drawer mismo. */
.nav-drawer-close {
    display: none;
}

.nav-toggle:hover {
    background: var(--cream);
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--green-900);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-overlay {
    display: none;
}

/* Small red badge sa Cart link na nagpapakita ilang item */
.cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 800;
}

/* -----------------------------------------------------------
   4. HOME HERO (index.php lang gumagamit nito)
----------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(105deg, rgba(31, 61, 43, 0.99) 0%, rgba(47, 93, 58, 0.96) 52%, rgba(63, 112, 75, 0.88) 100%);
    color: var(--white);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.11;
    background-image: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.55) 46%, transparent 48%);
    background-size: 58px 58px;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    right: -190px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 107, 0.20);
    box-shadow: 0 0 0 40px rgba(200, 169, 107, 0.04), 0 0 0 80px rgba(200, 169, 107, 0.025);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 40px), var(--container));
    margin: 0 auto;
    padding: 95px 0;
}

.hero-content {
    max-width: 730px;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 21px;
    padding: 8px 14px;
    border: 1px solid rgba(200, 169, 107, 0.45);
    border-radius: 30px;
    background: rgba(200, 169, 107, 0.10);
    color: #F1DDAE;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-label::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    background: var(--gold);
    border-radius: 50%;
}

.hero h1 {
    max-width: 760px;
    margin-bottom: 23px;
    font-size: clamp(2.8rem, 5.5vw, 4.7rem);
    line-height: 1.06;
    letter-spacing: -2px;
}

.hero h1 span {
    color: #E4C98E;
}

.hero-description {
    max-width: 650px;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.04rem;
    line-height: 1.85;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 23px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    transition: all 0.25s ease;
}

.hero-btn-primary {
    background: var(--gold);
    color: var(--green-900);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.10);
}

.hero-btn-primary:hover {
    background: #D7B979;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.hero-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
}

.hero-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.13);
    transform: translateY(-2px);
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.77rem;
}

.hero-note-line {
    width: 28px;
    height: 1px;
    background: var(--gold);
}

/* -----------------------------------------------------------
   5. PRODUCTS-HERO (banner ng products.php — mas maikli
   kaysa home hero, walang "trust bar")
----------------------------------------------------------- */
.products-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(105deg, rgba(31, 61, 43, 0.98) 0%, rgba(47, 93, 58, 0.93) 55%, rgba(47, 93, 58, 0.84) 100%);
    color: var(--white);
    min-height: 360px;
    display: flex;
    align-items: center;
}

.products-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.5) 46%, transparent 48%);
    background-size: 55px 55px;
    pointer-events: none;
}

.products-hero::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -120px;
    top: -120px;
    border: 1px solid rgba(200, 169, 107, 0.22);
    border-radius: 50%;
}

.products-hero-inner {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 40px), var(--container));
    margin: 0 auto;
    padding: 75px 0;
}

.products-hero-content {
    max-width: 760px;
}

.products-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.products-hero h1 span {
    color: #E4C98E;
}

/* -----------------------------------------------------------
   6. GENERIC PAGE HEADER (banner para sa interior pages tulad
   ng Cart, Checkout, Dashboard — mas simple, isang linya lang)
----------------------------------------------------------- */
.page-content {
    padding: 28px 0 80px;
}

.page-header {
    margin-bottom: 30px;
    padding: 35px;
    border-radius: var(--radius-lg);
    background: linear-gradient(105deg, var(--green-900), var(--green-700));
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.page-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #D8BD7C;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.page-header h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.2;
}

.page-header p {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.88rem;
}

/* Variant ng .page-header kapag may kasamang action button sa kanan
   (hal. "+ Request New Project" sa customer/projects.php). */
.page-header-with-action {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

/* -----------------------------------------------------------
   7. TRUST BAR (home page lang)
----------------------------------------------------------- */
.trust-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-item {
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 20px;
    border-right: 1px solid var(--border);
}

.trust-item:last-child {
    border-right: none;
}

.trust-icon {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--cream);
    color: var(--green-700);
}

.trust-icon svg {
    width: 55%;
    height: 55%;
}

.trust-text strong {
    display: block;
    color: var(--green-900);
    font-size: 0.81rem;
    font-weight: 700;
}

.trust-text span {
    display: block;
    margin-top: 2px;
    color: var(--text-light);
    font-size: 0.70rem;
}

/* -----------------------------------------------------------
   8. SECTION HEADINGS (eyebrow + title + description, ginagamit
   paulit-ulit sa buong site kaya dito na lang para consistent)
----------------------------------------------------------- */
.section {
    padding: 88px 0;
}

.section-header {
    margin-bottom: 42px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.section-heading {
    max-width: 680px;
}

.eyebrow {
    display: block;
    margin-bottom: 9px;
    color: var(--gold-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.section-title {
    color: var(--green-900);
    font-size: clamp(1.85rem, 3vw, 2.65rem);
    line-height: 1.18;
    letter-spacing: -0.8px;
}

.section-description {
    margin-top: 11px;
    color: var(--text-light);
    font-size: 0.91rem;
    line-height: 1.75;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--green-700);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.section-link::after {
    content: "→";
    transition: transform 0.2s ease;
}

.section-link:hover {
    color: var(--gold-dark);
}

.section-link:hover::after {
    transform: translateX(3px);
}

/* -----------------------------------------------------------
   9. FEATURES ("Why Choose Us" cards — home page lang)
----------------------------------------------------------- */
.features-section {
    background: var(--white);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.feature-card {
    min-height: 240px;
    padding: 28px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(200, 169, 107, 0.62);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 19px;
    border-radius: 12px;
    background: var(--cream);
    color: var(--green-700);
}

.feature-icon svg {
    width: 52%;
    height: 52%;
}

.feature-card h3 {
    margin-bottom: 9px;
    color: var(--green-900);
    font-size: 1rem;
}

.feature-card p {
    color: var(--text-light);
    font-size: 0.81rem;
    line-height: 1.75;
}

/* -----------------------------------------------------------
   10. PRODUCT GRID / CARD
   Ginagamit ito sa Home (Featured Products) AT sa Products page
   (buong catalog), kaya dapat sakto ang classes dito para pareho
   silang design.
----------------------------------------------------------- */
.products-section {
    background: var(--cream);
    padding: 75px 0 90px;
}

/* Products page: starts right under the header, like other pages */
.products-section.products-page {
    padding-top: 28px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.product-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(200, 169, 107, 0.55);
}

.product-image {
    position: relative;
    height: 245px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #D8C6A2, #B58A5A);
    color: rgba(255, 255, 255, 0.92);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image::before {
    content: "SANCHEZ BAMBOO HUB";
    position: absolute;
    opacity: 0.16;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2px;
    transform: rotate(-12deg);
}

.product-image-label {
    position: relative;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 6px;
    background: rgba(31, 61, 43, 0.88);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.product-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    padding: 7px 11px;
    background: var(--green-900);
    color: var(--white);
    border-radius: 6px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Lumalabas sa ibabang-kanang sulok ng product image kapag may
   maramihang larawan ang produkto (hal. Bahay Kubo) — pag-click sa
   larawan, bubukas ang gallery modal (tingnan ang openProductGallery()). */
.product-photo-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 4;
    padding: 4px 9px;
    background: rgba(23, 38, 27, 0.72);
    color: var(--white);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
}

.product-info {
    padding: 23px;
}

.product-category {
    display: block;
    margin-bottom: 7px;
    color: var(--gold-dark);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.product-title {
    margin-bottom: 8px;
    color: var(--green-900);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.35;
}

.product-description {
    min-height: 51px;
    margin-bottom: 18px;
    color: var(--text-light);
    font-size: 0.80rem;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Dito, magkatabi ang presyo at button (hindi stacked/full-width tulad
   ng .product-actions sa products.php) — kaya compact/auto-width lang
   ang kailangan, hindi yung width:100% na default ng .product-button. */
.product-bottom .product-button {
    width: auto;
    min-height: 38px;
    padding: 0 16px;
    flex-shrink: 0;
}

.product-details {
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-bottom: 17px;
}

.product-price {
    color: var(--green-900);
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 7px;
}

.product-stock {
    font-size: 0.76rem;
    color: var(--text-light);
}

.stock-available {
    color: var(--success);
    font-weight: 700;
}

.stock-low {
    color: var(--warning);
    font-weight: 700;
}

.stock-custom,
.stock-out {
    color: var(--danger);
    font-weight: 700;
}

.product-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.product-button svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex-shrink: 0;
}

.product-button-primary {
    background: var(--green-700);
    color: var(--white);
    border: 1px solid var(--green-700);
}

.product-button-primary:hover {
    background: var(--green-900);
    border-color: var(--green-900);
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(47, 93, 58, 0.18);
}

.product-button-secondary {
    background: var(--white);
    color: var(--green-700);
    border: 1px solid rgba(47, 93, 58, 0.28);
}

.product-button-secondary:hover {
    background: rgba(47, 93, 58, 0.06);
    border-color: var(--green-700);
}

.product-button:disabled {
    background: var(--cream-dark);
    color: var(--text-light);
    border-color: var(--border);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.products-empty,
.empty-cart {
    padding: 65px 25px;
    text-align: center;
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.empty-icon,
.empty-cart-mark {
    width: 55px;
    height: 55px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(47, 93, 58, 0.08);
    color: var(--green-700);
}

.empty-icon svg,
.empty-cart-mark svg {
    width: 52%;
    height: 52%;
}

.products-empty h3,
.empty-cart h3 {
    margin-bottom: 7px;
    color: var(--green-900);
    font-size: 1.25rem;
}

.products-empty p,
.empty-cart p {
    max-width: 420px;
    margin: 0 auto 20px;
    color: var(--text-light);
    font-size: 0.86rem;
}

.view-all {
    margin-top: 39px;
    text-align: center;
}

.view-all-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 0 22px;
    border: 1px solid var(--green-700);
    border-radius: 8px;
    color: var(--green-700);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.view-all-button:hover {
    background: var(--green-700);
    color: var(--white);
    transform: translateY(-1px);
}

/* -----------------------------------------------------------
   11. CATEGORY FILTER (products.php lang)
----------------------------------------------------------- */
.filter-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 35px;
    box-shadow: var(--shadow-sm);
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.filter-title {
    color: var(--green-900);
    font-size: 0.92rem;
    font-weight: 700;
}

.product-count {
    color: var(--text-light);
    font-size: 0.8rem;
}

/* Search box sa itaas ng category filter buttons */
.product-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.product-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.product-search-input-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-light);
    pointer-events: none;
}

.product-search-input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-search-input:focus {
    border-color: var(--green-600);
    box-shadow: 0 0 0 3px rgba(63, 112, 75, 0.10);
}

.product-search-btn {
    flex-shrink: 0;
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: var(--green-700);
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.product-search-btn:hover {
    background: var(--green-900);
}

.product-search-clear {
    flex-shrink: 0;
    color: var(--text-light);
    font-size: 0.78rem;
    text-decoration: underline;
    white-space: nowrap;
}

.product-search-clear:hover {
    color: var(--green-700);
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-light);
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: var(--green-600);
    background: rgba(47, 93, 58, 0.05);
    color: var(--green-700);
}

.filter-btn.active {
    background: var(--green-700);
    border-color: var(--green-700);
    color: var(--white);
    box-shadow: 0 5px 15px rgba(47, 93, 58, 0.16);
}

/* -----------------------------------------------------------
   12. GENERIC BUTTONS (.btn-*) — ginagamit sa Cart/Checkout/
   Forms na hindi product card
----------------------------------------------------------- */
/* Same hierarchy as the admin panel: primary > secondary > outline > danger */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.55rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 93, 58, 0.2);
}

.btn-primary {
    background: var(--green-700);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--green-900);
}

.btn-secondary {
    background: var(--light-green);
    border-color: #D4DFD6;
    color: var(--green-900);
}

.btn-secondary:hover {
    background: #DAE5DC;
    border-color: #BFD0C3;
}

.btn-outline {
    background: var(--white);
    border-color: #CBD2CA;
    color: var(--text);
}

.btn-outline:hover {
    border-color: var(--green-700);
    color: var(--green-700);
}

.btn-danger {
    background: var(--white);
    border-color: rgba(185, 74, 72, 0.4);
    color: var(--danger);
}

.btn-danger:hover {
    background: #F6E4E3;
    border-color: var(--danger);
}

.btn-full {
    width: 100%;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* -----------------------------------------------------------
   13. SHOPPING CART LAYOUT (cart.php)
----------------------------------------------------------- */
.cart-container {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
    gap: 22px;
    align-items: start;
}

.cart-items {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cart-card-header {
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
}

.cart-card-header h2 {
    color: var(--green-900);
    font-size: 1.05rem;
}

.cart-card-header p {
    margin-top: 3px;
    color: var(--text-light);
    font-size: 0.73rem;
}

.cart-item {
    display: grid;
    grid-template-columns: auto 110px minmax(0, 1fr) auto;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

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

/* Item selection checkbox (bagong "select which items to check out"
   na feature) — parehong <input type="checkbox" name="items[]">, isang
   simpleng label lang para mas malaki ang ma-click/tap na area. */
.cart-item-select-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-select {
    width: 19px;
    height: 19px;
    accent-color: var(--green-700);
    cursor: pointer;
}

.cart-card-header-with-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.cart-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cart-select-all input {
    width: 17px;
    height: 17px;
    accent-color: var(--green-700);
    cursor: pointer;
}

.cart-selection-hint {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 600;
}

.item-image {
    width: 110px;
    height: 110px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--cream);
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-700);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.item-details h3 {
    color: var(--green-900);
    font-size: 1rem;
    line-height: 1.3;
}

.item-price {
    margin-top: 6px;
    color: var(--gold-dark);
    font-size: 1rem;
    font-weight: 800;
}

.item-customization {
    display: inline-block;
    margin-top: 9px;
    padding: 7px 10px;
    border-radius: 7px;
    background: var(--cream);
    color: var(--text);
    font-size: 0.71rem;
    line-height: 1.4;
}

.item-customization strong {
    color: var(--green-900);
}

.item-stock {
    margin-top: 9px;
    color: var(--text-light);
    font-size: 0.7rem;
}

.item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 9px;
}

.quantity-control label {
    color: var(--text-light);
    font-size: 0.7rem;
}

.quantity-control input {
    width: 62px;
    height: 38px;
    padding: 0 8px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    background: var(--white);
    outline: none;
}

.quantity-control input:focus {
    border-color: var(--green-600);
    box-shadow: 0 0 0 3px rgba(63, 112, 75, 0.10);
}

/* +/- stepper sa paligid ng quantity input (cart.php) — parehong
   <input> pa rin sa gitna (parehong id/name/form), icon-only na mga
   button lang ang dagdag na nag-a-adjust ng value bago mag-submit.
   Ginawang "isang pill group" ang buong stepper (overflow:hidden +
   radius/shadow sa WRAPPER, hindi na per-button) — parehong pattern
   ito ng .product-card at ibang grouped control sa buong site, para
   consistent ang itsura imbes na parang generic/plain na HTML form
   control. */
.qty-stepper {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.qty-stepper input {
    width: 48px;
    height: 40px;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
    color: var(--green-900);
    font-weight: 700;
    font-size: 0.9rem;
}

.qty-step-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    border: none;
    background: var(--cream);
    color: var(--green-700);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.qty-step-btn svg {
    width: 14px;
    height: 14px;
}

.qty-step-btn:hover:not(:disabled) {
    background: var(--green-700);
    color: var(--white);
}

.qty-step-btn:disabled {
    color: var(--text-light);
    cursor: not-allowed;
    opacity: 0.55;
}

.item-subtotal {
    color: var(--green-900);
    font-size: 0.8rem;
    font-weight: 800;
}

.cart-summary {
    position: sticky;
    top: 105px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 23px;
    box-shadow: var(--shadow-sm);
}

.cart-summary h2 {
    color: var(--green-900);
    font-size: 1.05rem;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-light);
    font-size: 0.75rem;
}

.summary-row span:last-child {
    color: var(--text);
    text-align: right;
    font-weight: 600;
}

.summary-total {
    border-bottom: none;
    border-top: 2px solid var(--green-700);
    margin-top: 10px;
    padding-top: 17px;
    color: var(--green-900);
    font-size: 0.95rem;
    font-weight: 800;
}

.summary-total span:last-child {
    color: var(--green-900);
    font-size: 1.2rem;
    font-weight: 800;
}

.summary-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 21px;
}

/* -----------------------------------------------------------
   13B. CHECKOUT FORM (checkout.php)
   Dati, walang custom styling ang .form-group/.form-control kaya
   plain browser-default lang ang itsura ng buong checkout form.
   Dito na dinisenyo ang mga ito, kasama ang numbered steps,
   card-style na payment method selector, at yes/no toggle para
   sa truck access question (Bahay Kubo orders lang).
----------------------------------------------------------- */
.checkout-form-card {
    padding: 4px 0;
}

.checkout-step {
    padding: 24px;
    border-bottom: 1px solid var(--border);
}

.checkout-step:last-of-type {
    border-bottom: none;
}

.checkout-step-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.checkout-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--green-700);
    color: var(--white);
    font-weight: 800;
    font-size: 0.9rem;
}

.checkout-step-header h2 {
    color: var(--green-900);
    font-size: 1.05rem;
}

.checkout-step-header p {
    margin-top: 3px;
    color: var(--text-light);
    font-size: 0.73rem;
}

.checkout-step-body {
    padding-left: 46px;
}

/* The grid owns the spacing, so stacked fields stay evenly spaced */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    margin-bottom: 18px;
}

.form-grid-2 > .form-group,
.form-grid-2:last-child {
    margin-bottom: 0;
}

.form-group {
    margin-bottom: 18px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group > label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
}

.form-control {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.85rem;
    border: 1px solid #CBD2CA;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:hover {
    border-color: #AEB8AF;
}

textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.form-control:focus {
    outline: none;
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px rgba(47, 93, 58, 0.18);
}

.form-control:user-invalid {
    border-color: var(--danger);
}

.form-control[readonly],
.form-control:disabled {
    background: var(--cream);
    color: var(--text-light);
    cursor: not-allowed;
}

.form-hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-light);
    font-size: 0.8rem;
    line-height: 1.5;
}

.btn-lg {
    min-height: 48px;
    font-size: 0.95rem;
    margin: 24px;
    width: calc(100% - 48px);
}

/* Payment method: card-style radio buttons imbes na plain <select> */
.payment-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payment-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.payment-option:hover {
    border-color: var(--gold-dark);
}

.payment-option input[type="radio"] {
    position: absolute;
    top: 14px;
    right: 14px;
    accent-color: var(--green-700);
}

.payment-option:has(input:checked) {
    border-color: var(--green-700);
    background: var(--cream);
}

.payment-option-title {
    color: var(--green-900);
    font-weight: 700;
    font-size: 0.85rem;
    padding-right: 22px;
}

.payment-option-desc {
    color: var(--text-light);
    font-size: 0.71rem;
    line-height: 1.4;
}

/* PayPal sub-options (50% Deposit vs. Full Payment) — dalawang totoong
   PayPal Smart Button, isa bawat card, pinipili ng customer alin sa
   dalawa ang direktang bubuksan sa PayPal. */
.paypal-suboptions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.paypal-suboption {
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--cream);
}

.paypal-suboption-label {
    display: block;
    margin-bottom: 10px;
}

.paypal-suboption-label strong {
    display: block;
    color: var(--green-900);
    font-size: 0.85rem;
    margin-bottom: 3px;
}

.paypal-suboption-label span {
    display: block;
    color: var(--text-light);
    font-size: 0.7rem;
    line-height: 1.4;
}

/* Yes/No toggle (truck access question) */
.yesno-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.yesno-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.yesno-option:hover {
    border-color: var(--gold-dark);
}

.yesno-option input[type="radio"] {
    accent-color: var(--green-700);
    flex-shrink: 0;
}

.yesno-option:has(input:checked) {
    border-color: var(--green-700);
    background: var(--cream);
    color: var(--green-900);
}

/* -----------------------------------------------------------
   14. CTA SECTION (bago mag-footer, "custom order" na paanyaya)
----------------------------------------------------------- */
.cta-section {
    padding: 78px 0;
    background: var(--green-900);
}

.cta-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 15px 0;
}

.cta-content {
    max-width: 720px;
}

.cta-content .eyebrow {
    color: #D8BD7C;
}

.cta-content h2 {
    color: var(--white);
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    line-height: 1.25;
    letter-spacing: -0.7px;
}

.cta-content p {
    max-width: 640px;
    margin-top: 11px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.88rem;
    line-height: 1.75;
}

.cta-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 23px;
    border-radius: 8px;
    background: var(--gold);
    color: var(--green-900);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cta-button:hover {
    background: #D7B979;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

/* -----------------------------------------------------------
   15. FOOTER (buong site, isa na lang ang design)
----------------------------------------------------------- */
footer {
    background: #162D20;
    color: rgba(255, 255, 255, 0.75);
}

.footer-main {
    padding: 65px 0 48px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1fr;
    gap: 48px;
}

.footer-brand {
    max-width: 330px;
}

.footer-brand .brand {
    margin-bottom: 17px;
}

.footer-brand .brand-name {
    color: var(--white);
}

.footer-brand .brand-subtitle {
    color: rgba(255, 255, 255, 0.45);
}

.footer-description {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    line-height: 1.85;
}

.footer-column h3 {
    margin-bottom: 17px;
    color: var(--white);
    font-size: 0.83rem;
    letter-spacing: 0.5px;
}

.footer-links,
.footer-contact {
    list-style: none;
}

.footer-links li {
    margin-bottom: 9px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.77rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--gold);
}

.footer-contact li {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.77rem;
    line-height: 1.55;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-inner {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.copyright {
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.70rem;
}

.footer-tagline {
    color: var(--gold);
    font-size: 0.70rem;
    font-weight: 700;
}

/* -----------------------------------------------------------
   16. CHATBOT WIDGET (floating button + chat window)
   Ito yung "Bamboo Assistant" — buo dito ang look niya, tapos
   yung galaw/logic naman ay nasa assets/js/chatbot.js.
----------------------------------------------------------- */
.chatbot-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1100;
}

.chatbot-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--green-700);
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, background 0.2s ease;
}

.chatbot-toggle:hover {
    transform: translateY(-2px);
    background: var(--green-900);
}

.chatbot-toggle-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 800;
    border: 2px solid var(--white);
}

.chatbot-toggle svg {
    width: 26px;
    height: 26px;
}

/* Subtle pulse ring sa paligid ng toggle button kapag may hindi pa
   nababasang reply (badge visible) — hindi ito humihinto (walang
   iteration-count limit) hangga't nananatiling unread ang badge. */
.chatbot-toggle:has(.chatbot-toggle-badge:not([hidden]))::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    opacity: 0;
    animation: chatbot-pulse 2s ease-out infinite;
}

@keyframes chatbot-pulse {
    0% { opacity: 0.55; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(1.25); }
}

.chatbot-window {
    position: fixed;
    right: 24px;
    bottom: 92px;
    width: 370px;
    height: 510px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--white);
    box-shadow: 0 22px 55px rgba(31, 61, 43, 0.20);
    transition: width 0.2s ease, height 0.2s ease;
}

.chatbot-window.active {
    display: flex;
}

/* Expanded view (parang Shopee/Lazada "expanded" chat) — mas malaki
   ang panel pero naka-dock pa rin sa parehong sulok, hindi fullscreen. */
.chatbot-window.expanded {
    width: min(560px, 92vw);
    height: min(80vh, 760px);
}

.chatbot-header {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: var(--green-900);
    color: var(--white);
}

.chatbot-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chatbot-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.chatbot-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.chatbot-status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    background: #76B77F;
    border-radius: 50%;
    border: 2px solid var(--green-900);
}

.chatbot-title strong {
    display: block;
    font-size: 0.84rem;
}

.chatbot-title span {
    display: block;
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.66rem;
}

.chatbot-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.close-chat {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    cursor: pointer;
    font-size: 1.2rem;
}

.close-chat:hover {
    background: rgba(255, 255, 255, 0.16);
}

.close-chat svg {
    width: 16px;
    height: 16px;
}

.expand-chat {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    cursor: pointer;
}

.expand-chat svg {
    width: 100%;
    height: 100%;
}

.expand-chat:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Kapag naka-expand na, i-rotate ang icon (parehong "arrows outward"
   glyph, pero paikot para magmukhang "papasok/shrink" na ang direksyon). */
.expand-chat.is-expanded svg {
    transform: rotate(45deg);
}

.chatbot-messages {
    flex: 1;
    padding: 18px;
    overflow-y: auto;
    background: #F8F9F7;
}

.message {
    max-width: 82%;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.77rem;
    line-height: 1.55;
    word-wrap: break-word;
    white-space: pre-line;
}

.message.bot {
    margin-right: auto;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
}

.message.user {
    margin-left: auto;
    background: var(--green-700);
    color: var(--white);
}

/* Maliit na label sa loob ng bubble kapag totoong ADMIN ang sumagot
   (hindi ang rule-based bot) — para malaman agad ng customer na tao
   na ang kausap nila sa parehong thread na ito. */
.message-sender-label {
    margin-bottom: 3px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--green-700);
}

/* "Contact Admin" quick-action — lumalabas sa ilalim ng bot bubble
   kapag hindi na masagot ng rule-based Assistant ang tanong, o kapag
   out-of-stock ang tinanong na produkto (Request Custom Order). Hindi
   ito lumilipat sa ibang tab/window — mina-mark lang nito ang
   PAREHONG thread bilang naghihintay ng admin. */
.chat-connect-admin-btn {
    display: block;
    margin: -4px 0 12px;
    margin-right: auto;
    max-width: 82%;
    padding: 9px 14px;
    border: 1.5px solid var(--green-700);
    border-radius: 10px;
    background: var(--white);
    color: var(--green-700);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chat-connect-admin-btn:hover {
    background: var(--green-700);
    color: var(--white);
}

/* "Connect with admin?" Yes / No choice under a bot message */
.chat-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 12px;
}

.chat-choice .chat-connect-admin-btn {
    margin: 0;
    background: var(--green-700);
    color: var(--white);
}

.chat-choice .chat-connect-admin-btn:hover {
    background: var(--green-900);
}

.chat-choice-no-btn {
    padding: 9px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.chat-choice-no-btn:hover {
    border-color: var(--green-700);
    color: var(--green-700);
}

/* Palatandaan ng kasalukuyang status ng thread (pending_admin/
   admin_replied) — para malinaw sa customer kung bakit tumigil na ang
   bot sa pag-auto-sagot (tingnan ang loadConversation() sa chatbot.js). */
.chatbot-status-banner {
    padding: 8px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.chatbot-status-banner.pending {
    background: #FFF8E6;
    color: #8A6D1D;
}

.chatbot-status-banner.replied {
    background: var(--light-green, #EAF3EC);
    color: var(--green-700);
}

/* Mabilis na "shortcut" na mga button papuntang pinaka-madalas na
   tanong (Products, How to Order, My Order, atbp.) — nasa pagitan ng
   messages at ng text input, laging nakikita habang nag-uusap. */
.chatbot-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--white);
}

.quick-reply-btn {
    padding: 6px 12px;
    border: 1px solid rgba(47, 93, 58, 0.28);
    border-radius: 999px;
    background: var(--cream);
    color: var(--green-700);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.quick-reply-btn:hover {
    background: var(--green-700);
    color: var(--white);
    border-color: var(--green-700);
}

.chatbot-input {
    display: flex;
    padding: 12px;
    border-top: 1px solid var(--border);
    background: var(--white);
}

.chatbot-input input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    outline: none;
    color: var(--text);
    font-size: 0.79rem;
}

.chatbot-input input:focus {
    border-color: var(--green-600);
}

.chatbot-input button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 42px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 0 8px 8px 0;
    background: var(--green-700);
    color: var(--white);
    cursor: pointer;
    font-size: 0.77rem;
    font-weight: 700;
    transition: background 0.2s ease;
}

.chatbot-input button svg {
    width: 16px;
    height: 16px;
}

.chatbot-input button:hover {
    background: var(--green-900);
}

/* -----------------------------------------------------------
   16b. DETAIL MODAL (reusable popup — "View Details" ng order,
   "View Updates" ng project, atbp.) Fetch-based: nilo-load ang
   laman gamit ang JS (loadModal() sa main.js), tapos idinidikit
   na lang dito sa loob.
----------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(23, 38, 27, 0.55);
}

.modal-overlay.active {
    display: flex;
}

.modal-box {
    width: 100%;
    max-width: 620px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 28px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: var(--cream);
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
}

.modal-close:hover {
    background: var(--cream-dark);
}

.modal-close svg {
    width: 16px;
    height: 16px;
}

.modal-loading {
    padding: 40px;
    text-align: center;
    color: var(--text-light);
    font-size: 0.85rem;
}

/* Product photo gallery modal (products.php) — malaking larawan sa
   itaas, thumbnail strip sa ibaba na pinipili kung anong larawan ang
   ipapakita, kagaya ng gallery ng ibang e-commerce site. */
.gallery-main-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.gallery-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-thumbnails {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.gallery-thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.65;
    background: none;
    padding: 0;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb:hover {
    opacity: 0.9;
}

.gallery-thumb.active {
    border-color: var(--green-700);
    opacity: 1;
}

/* -----------------------------------------------------------
   17. TOAST NOTIFICATION (yung lumulutang na "Added to cart!"
   na message sa ibaba-kanan, ginawa ng assets/js/main.js)
----------------------------------------------------------- */
.toast-notification {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 3000;
    max-width: 360px;
    padding: 14px 17px;
    border-radius: 9px;
    background: var(--green-900);
    color: var(--white);
    box-shadow: 0 15px 35px rgba(31, 61, 43, 0.20);
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.25s ease;
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-notification.error {
    background: var(--danger);
}

/* -----------------------------------------------------------
   17b. SMALL SHARED PIECES (breadcrumb, order table labels,
   generic empty-state block) — ginagamit sa customer/* pages
----------------------------------------------------------- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--text-light);
    font-size: 0.82rem;
}

.breadcrumb a {
    color: var(--green-700);
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--gold-dark);
}

.order-number {
    color: var(--green-700);
    font-weight: 700;
}

.order-total {
    color: var(--green-900);
    font-weight: 700;
}

.empty-state {
    padding: 45px 25px;
    text-align: center;
}

.empty-state h4 {
    color: var(--green-900);
    font-size: 0.95rem;
}

.empty-state p {
    max-width: 350px;
    margin: 5px auto 17px;
    color: var(--text-light);
    font-size: 0.76rem;
}

.empty-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 7px;
    background: var(--green-700);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
}

.empty-button:hover {
    background: var(--green-900);
}

/* Orders table (customer/orders.php, customer/dashboard.php) */
.orders-wrapper {
    overflow-x: auto;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
}

.order-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.orders-table th {
    padding: 13px 20px;
    text-align: left;
    background: #FAFBF9;
    color: var(--text-light);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.orders-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.78rem;
    white-space: nowrap;
}

.orders-table tbody tr:last-child td {
    border-bottom: none;
}

.orders-table tbody tr:hover {
    background: #FCFCFA;
}

/* -----------------------------------------------------------
   17c. CUSTOMER DASHBOARD (welcome card, stat cards, quick
   actions) — customer/dashboard.php
----------------------------------------------------------- */
.dashboard {
    padding: 28px 0 80px;
}

.welcome-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 35px;
    border-radius: var(--radius-lg);
    background: linear-gradient(105deg, var(--green-900), var(--green-700));
    color: var(--white);
    box-shadow: var(--shadow-md);
    margin-bottom: 35px;
}

/* Mas malaking bersyon ng .avatar-preview (dati, inline style lang
   ang paraan para dito sa dashboard welcome card). */
.avatar-preview-lg {
    width: 110px;
    height: 110px;
    border-width: 4px;
    border-color: rgba(255, 255, 255, 0.4);
}

.avatar-preview-lg.avatar-fallback {
    font-size: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
}

.welcome-card::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    top: -110px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 107, 0.25);
}

.welcome-label {
    display: block;
    margin-bottom: 8px;
    color: #D8BD7C;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.welcome-card h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.2;
}

.welcome-card p {
    margin-top: 10px;
    max-width: 680px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.section-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--gold-dark);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--cream);
    color: var(--green-700);
}

.stat-icon svg {
    width: 52%;
    height: 52%;
}

.stat-label {
    display: block;
    color: var(--text-light);
    font-size: 0.75rem;
}

.stat-value {
    display: block;
    margin-top: 2px;
    color: var(--green-900);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.2;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.8fr;
    gap: 22px;
}

.dashboard-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.dashboard-card-header {
    padding: 22px 23px;
    border-bottom: 1px solid var(--border);
}

.dashboard-card-header h3 {
    color: var(--green-900);
    font-size: 1rem;
}

.dashboard-card-header p {
    margin-top: 3px;
    color: var(--text-light);
    font-size: 0.75rem;
}

.quick-actions {
    padding: 18px;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 13px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--text);
    transition: all 0.2s ease;
}

.quick-action:last-child {
    margin-bottom: 0;
}

.quick-action:hover {
    border-color: rgba(200, 169, 107, 0.65);
    background: var(--cream);
    transform: translateX(2px);
}

.quick-action-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--cream);
    color: var(--green-700);
}

.quick-action-icon svg {
    width: 55%;
    height: 55%;
}

.quick-action-text strong {
    display: block;
    color: var(--green-900);
    font-size: 0.8rem;
}

.quick-action-text span {
    display: block;
    margin-top: 1px;
    color: var(--text-light);
    font-size: 0.68rem;
}

/* "Latest Project" preview card — dashboard.php lang, sa ilalim ng
   dashboard-grid. Reuse ng .dashboard-card/.progress-bar-* na CSS na
   nandiyan na, dagdag lang ang layout ng header nito (title + badge
   magkatabi) at ang spacing sa loob. */
.project-preview {
    margin-top: 22px;
}

.project-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.project-preview-body {
    padding: 22px 23px;
}

.project-preview-note {
    color: var(--text-light);
    font-size: 0.82rem;
    margin-bottom: 14px;
}

.project-preview-body .section-link {
    display: inline-flex;
    margin-top: 14px;
}

/* -----------------------------------------------------------
   18a. STATUS BADGES (order status, project status, atbp.)
   Ginagamit sa customer dashboard, order confirmation,
   orders list, at admin pages — dito na lang isang beses.
----------------------------------------------------------- */
/* Same pill + dot and status colors as the admin panel */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #EEF0EE;
    color: #5E6660;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-transform: capitalize;
}

.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

.status-pending {
    background: #F5ECD9;
    color: #8A6A2C;
}

.status-processing,
.status-shipped,
.status-partial,
.status-in_progress,
.status-planning,
.status-materials_prep,
.status-construction,
.status-finishing {
    background: #E4EDF5;
    color: #2E5A7D;
}

.status-success,
.status-completed,
.status-approved,
.status-paid,
.status-released,
.status-delivered {
    background: #E7EEE8;
    color: var(--success);
}

.status-danger,
.status-cancelled,
.status-canceled,
.status-rejected {
    background: #F6E4E3;
    color: var(--danger);
}

/* -----------------------------------------------------------
   18b. PROJECT PROGRESS BAR (customer/projects.php,
   admin/manage_project.php)
----------------------------------------------------------- */
.progress-bar-track {
    width: 100%;
    height: 26px;
    background: var(--cream);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.progress-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--green-600), var(--green-900));
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 800;
    transition: width 0.3s ease;
}

.project-progress-block {
    margin-bottom: 18px;
}

.project-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--green-900);
}

/* -----------------------------------------------------------
   18c. PROJECT CARD (customer/projects.php) — dati'y inline
   style="..." attributes ang ginagamit para dito, dito na lang
   ngayon nakacentralize para consistent sa buong design system.
----------------------------------------------------------- */
.project-card {
    margin-bottom: 20px;
}

.project-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.project-card-header p {
    margin-top: 3px;
    color: var(--text-light);
    font-size: 0.78rem;
}

.project-card-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.project-card-body {
    padding: 22px 24px;
}

.project-reference-image {
    max-width: 220px;
    height: auto;
    margin-bottom: 18px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.project-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.project-meta-label {
    margin-bottom: 4px;
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.project-meta-value {
    color: var(--green-900);
    font-weight: 700;
    font-size: 0.85rem;
}

.project-notice {
    padding: 14px;
    margin-bottom: 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.55;
}

.project-notice-pending,
.project-notice-current {
    background: var(--cream);
    color: var(--text);
}

.project-notice-rejected {
    background: #FBEAEA;
    color: var(--text);
}

.notification-list {
    padding: 6px 24px 18px;
}

.notification-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

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

.notification-date {
    margin-top: 3px;
    color: var(--text-light);
    font-size: 0.72rem;
}

/* Phase / sub-phase timeline (project progress "stepper") — inalis
   dati sa isang page-scoped <style> block sa loob mismo ng
   customer/projects.php, dito na lang ngayon para centralized. */
.phase-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.phase-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 0.85rem;
}

.phase-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
}

.phase-name {
    flex: 1;
    font-weight: 600;
    line-height: 1.5;
    padding-top: 1px;
}

.phase-status {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-light);
    padding-top: 3px;
}

.phase-completed {
    color: var(--green-900);
}

.phase-completed .phase-icon {
    background: var(--success);
    color: var(--white);
}

.phase-in_progress {
    background: var(--cream);
}

.phase-in_progress .phase-icon {
    background: var(--gold);
    color: var(--green-900);
}

.phase-pending {
    color: var(--text-light);
}

.phase-pending .phase-icon {
    background: var(--border);
    color: var(--text-light);
}

.sub-phase-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 10px 32px;
    padding-left: 15px;
    border-left: 2px solid var(--border);
}

/* -----------------------------------------------------------
   PROFILE PICTURE — avatar upload/preview (customer/profile.php)
   and the small nav-bar avatar circle (includes/header.php).
----------------------------------------------------------- */
.avatar-settings {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
}

.avatar-preview {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--cream-dark);
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-900);
    color: var(--white);
    font-size: 2rem;
    font-weight: 700;
}

.avatar-settings-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.avatar-settings .form-hint {
    width: 100%;
    color: var(--text-light);
    font-size: 0.8rem;
}

/* Profile page form bodies (customer/profile.php) — dating inline
   style="padding: 20px;" ang ginagamit dito paulit-ulit, dito na
   lang ito tinipon sa isang klase. Kapag sumusunod ito agad sa
   .avatar-settings sa loob ng parehong card (pinagsama na ang
   "Profile Picture" at "Account Details" sections), may border-top
   na divider para malinaw na hiwalay pa rin itong section. */
.profile-form-body {
    padding: 20px;
}

.avatar-settings + .profile-form-body {
    border-top: 1px solid var(--border);
}

/* -----------------------------------------------------------
   ORDER RATING / FEEDBACK — star picker (Rate Order modal),
   read-only rating badge (orders.php once already rated), and
   the public "Customer Reviews" section on the homepage.
----------------------------------------------------------- */
.feedback-star-picker {
    display: flex;
    gap: 6px;
}

.feedback-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--border);
    transition: color 0.15s ease, transform 0.1s ease;
}

.feedback-star-btn svg {
    width: 30px;
    height: 30px;
}

.feedback-star-btn:hover {
    transform: scale(1.1);
}

.feedback-star-btn.filled {
    color: var(--gold);
}

.feedback-rated-badge {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--border);
}

.feedback-star {
    display: inline-flex;
    color: inherit;
}

.feedback-star svg {
    width: 16px;
    height: 16px;
}

.feedback-star.filled {
    color: var(--gold);
}

.testimonial-section {
    padding: 60px 0;
    background: var(--shadow-lightest);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.testimonial-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--shadow-light);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.testimonial-card .feedback-star svg {
    width: 18px;
    height: 18px;
}

.testimonial-comment {
    margin: 12px 0;
    color: var(--text);
    font-style: italic;
    line-height: 1.6;
}

.testimonial-author {
    font-weight: 600;
    color: var(--green-900);
    font-size: 0.9rem;
}

.sub-phase-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
}

.sub-phase-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
}

.sub-phase-name {
    flex: 1;
}

.sub-phase-weight {
    color: var(--text-light);
    font-size: 0.7rem;
}

.sub-phase-completed {
    color: var(--green-900);
}

.sub-phase-completed .sub-phase-icon {
    background: var(--success);
}

.sub-phase-in_progress {
    background: var(--cream);
    font-weight: 700;
}

.sub-phase-in_progress .sub-phase-icon {
    background: var(--gold);
}

.sub-phase-pending .sub-phase-icon {
    background: var(--border);
}

.project-view-updates-btn {
    margin-top: 12px;
}

/* -----------------------------------------------------------
   19. ALERTS (para sa forms — success/error messages)
----------------------------------------------------------- */
/* Left accent bar, same as the admin panel */
.alert {
    display: flex;
    align-items: flex-start;
    padding: 0.85rem 1rem 0.85rem 1.1rem;
    margin-bottom: 22px;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}

.alert-error {
    background: #F6E4E3;
    border-color: rgba(185, 74, 72, 0.3);
    border-left-color: var(--danger);
    color: #9A3A38;
}

.alert-success {
    background: #E7EEE8;
    border-color: rgba(61, 122, 77, 0.3);
    border-left-color: var(--success);
    color: var(--green-900);
}

.alert-info {
    background: #E4EDF5;
    border-color: rgba(46, 90, 125, 0.25);
    border-left-color: #2E5A7D;
    color: #2E5A7D;
}

/* -----------------------------------------------------------
   19b. NAVIGATION HELPERS, CONFIRM DIALOG, CHECKOUT PAYMENT
----------------------------------------------------------- */

/* "Back to ..." link above a page header */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--green-700);
    font-size: 0.88rem;
    font-weight: 600;
}

.back-link:hover {
    color: var(--gold-dark);
}

.back-link svg {
    width: 16px;
    height: 16px;
}

/* Anchored sections stop below the sticky site header */
#quick-actions {
    scroll-margin-top: 100px;
}

.inline-form {
    display: inline-flex;
}

.payment-method-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

/* One-time message shown under the header */
.site-flash {
    padding-top: 20px;
}

.site-flash .alert {
    margin-bottom: 0;
}

/* Mobile-drawer-only parts of the navbar (hidden on desktop) */
.nav-drawer-head,
.nav-sub-links,
.nav-link-mobile,
.nav-link-icon {
    display: none;
}

/* Styled replacement for window.confirm() (main.js: sbhConfirm) */
.confirm-overlay {
    z-index: 3000;
}

.confirm-box {
    max-width: 420px;
    text-align: center;
}

.confirm-message {
    margin-bottom: 22px;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.6;
}

.confirm-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.confirm-actions .btn {
    min-width: 120px;
}

.btn-danger-solid {
    background: var(--danger);
    color: var(--white);
}

.btn-danger-solid:hover {
    background: #9A3A38;
}

/* Checkout */
.checkout-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 24px 24px;
    border-top: 1px solid var(--border);
}

.checkout-actions .btn {
    min-width: 140px;
}

.payment-instructions {
    margin-top: 4px;
    margin-bottom: 18px;
    padding: 16px;
    background: var(--light-green);
    border: 1px solid #D4DFD6;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.payment-instructions > p + p {
    margin-top: 6px;
}

.payment-instructions .form-group {
    margin-top: 14px;
    margin-bottom: 0;
}

.payment-account {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: var(--white);
    border-radius: 6px;
    color: var(--green-900);
    word-break: break-all;
}

.payment-note {
    margin-top: 0;
}

/* PayPal: button (API) vs send-it-myself (manual) */
.paypal-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.paypal-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.paypal-mode-option:has(input:checked) {
    border-color: var(--green-700);
    box-shadow: 0 0 0 2px rgba(47, 93, 58, 0.15);
}

.paypal-mode-option input {
    margin-top: 3px;
    accent-color: var(--green-700);
}

.paypal-mode-option strong {
    display: block;
    color: var(--green-900);
    font-size: 0.88rem;
}

.paypal-mode-option small {
    color: var(--text-light);
    font-size: 0.78rem;
}

@media (max-width: 430px) {
    .paypal-mode-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Full width of the payment box, like the options above it */
.paypal-button-container {
    width: 100%;
    margin-top: 14px;
}

#paypalError {
    margin: 12px 0 0;
}

.summary-item {
    align-items: center;
    gap: 10px;
}

.summary-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.summary-item-thumb {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 6px;
    background: var(--cream);
}

.summary-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-item-price {
    flex-shrink: 0;
}

/* Consistent dropdown arrow for every select field */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 16px;
    cursor: pointer;
}

/* ---- Request a Project: design specifications ---- */
.label-optional {
    color: var(--text-light);
    font-weight: 400;
}

.spec-block {
    margin-bottom: 18px;
}

.spec-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

/* Same look as every other form label */
.spec-label-row label,
.spec-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
}

/* With/without questions take a full row so the dropdowns stay aligned */
.form-grid-2 > .spec-choice-field {
    grid-column: 1 / -1;
}

.spec-clear {
    padding: 0;
    border: none;
    background: none;
    color: var(--green-700);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.spec-other-input {
    margin-top: 8px;
}

/* With/without questions: pill-style choices */
.spec-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spec-choice {
    position: relative;
    cursor: pointer;
}

.spec-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spec-choice span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.5rem 1rem;
    border: 1.5px solid #CBD2CA;
    border-radius: 999px;
    background: var(--white);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.spec-choice:hover span {
    border-color: var(--green-700);
}

.spec-choice input:checked + span {
    border-color: var(--green-700);
    background: var(--green-700);
    color: var(--white);
}

.spec-choice input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(47, 93, 58, 0.25);
}

.checkout-step-submit {
    border-bottom: none;
}

/* Sidebar "What Happens Next?" steps */
.next-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
}

.next-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.next-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 8px;
    border-radius: 50%;
    background: var(--light-green);
    color: var(--green-700);
}

.next-step-icon svg {
    width: 100%;
    height: 100%;
}

.next-step strong {
    color: var(--green-900);
    font-size: 0.88rem;
}

.next-step p {
    margin-top: 2px;
    color: var(--text-light);
    font-size: 0.8rem;
}

/* Product a project request is based on (Customize Product) */
.linked-product {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 24px 0;
    padding: 12px 14px;
    background: var(--light-green);
    border-radius: var(--radius-sm);
}

.linked-product img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 6px;
}

.linked-product strong {
    display: block;
    color: var(--green-900);
}

.linked-product-eyebrow {
    display: block;
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.linked-product-price {
    color: var(--text-light);
    font-size: 0.82rem;
}

/* -----------------------------------------------------------
   19. RESPONSIVE (mobile / tablet adjustments)
----------------------------------------------------------- */
@media (max-width: 1100px) {
    .feature-grid,
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 1000px) {
    .main-header-inner {
        flex-wrap: wrap;
        padding: 15px 0;
    }

    .main-nav {
        width: 100%;
        justify-content: center;
        padding-top: 4px;
    }

    .hero {
        min-height: 570px;
    }

    .hero::after {
        width: 420px;
        height: 420px;
        right: -220px;
    }

    .cart-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .cart-container > * {
        min-width: 0;
    }

    .cart-summary {
        position: static;
    }

    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-grid-2,
    .payment-options,
    .paypal-suboptions,
    .yesno-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkout-step-body {
        padding-left: 0;
    }

    .btn-lg {
        margin: 24px 16px;
        width: calc(100% - 32px);
    }
}

@media (max-width: 800px) {
    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-item:nth-child(2) {
        border-right: none;
    }

    .trust-item:nth-child(3),
    .trust-item:nth-child(4) {
        border-top: 1px solid var(--border);
    }

    .cta-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .cta-button {
        width: auto;
    }
}

@media (max-width: 700px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    /* "Collapse" ang .orders-table (My Orders, Order Confirmation, at
       Recent Orders sa dashboard) papunta sa stacked card view sa
       mobile, sa halip na paliitin/i-squeeze ang mga column — bawat
       ROW ay nagiging sariling card, may LABEL sa kaliwa mula sa
       data-label attribute ng <td> (kailangang nasa markup na ito).
       Parehong pattern na ginamit sa admin.css. */
    .orders-wrapper {
        overflow-x: visible;
        padding: 14px;
    }

    .orders-table td > .status-badge {
        justify-self: end;
    }

    .orders-table,
    .orders-table tbody,
    .orders-table tr {
        display: block;
        width: 100%;
    }

    .orders-table thead {
        display: none;
    }

    .orders-table tr {
        margin-bottom: 0.85rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 0.65rem 0.85rem;
    }

    .orders-table tbody tr:last-child {
        margin-bottom: 0;
    }

    /* GRID (hindi flex) ang sinadyang ginamit dito — sa flexbox, ang
       "value" pagkatapos ng ::before label ay hindi awtomatikong
       umuunti/nagwa-wrap kapag mahaba (default flex behavior), kaya
       naka-overflow/naka-clip ito palabas ng card. Sa grid, talagang
       naaangkop ang value sa loob ng sarili nitong column. */
    .orders-table td {
        display: grid !important;
        grid-template-columns: minmax(84px, 38%) 1fr;
        align-items: start;
        gap: 0.4rem 0.75rem;
        padding: 0.4rem 0 !important;
        border-bottom: 1px dashed var(--border) !important;
        text-align: right !important;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .orders-table td:last-child {
        border-bottom: none !important;
    }

    .orders-table td::before {
        content: attr(data-label);
        color: var(--text-light);
        font-size: 0.72rem;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    /* Wide order tables: only the order number shows until tapped */
    .orders-table.is-collapsible tr:not(.is-open) td:not(.cell-primary) {
        display: none !important;
    }

    .orders-table.is-collapsible .cell-primary {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        padding: 0.45rem 2rem 0.45rem 0 !important;
        text-align: left !important;
        cursor: pointer;
    }

    .orders-table.is-collapsible tr:not(.is-open) .cell-primary {
        border-bottom: none !important;
    }

    .orders-table.is-collapsible .cell-primary::before {
        content: none;
    }

    .orders-table.is-collapsible .cell-primary::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0.35rem;
        width: 8px;
        height: 8px;
        margin-top: -6px;
        border-right: 2px solid var(--text-light);
        border-bottom: 2px solid var(--text-light);
        transform: rotate(45deg);
        transition: transform 0.18s ease;
    }

    .orders-table.is-collapsible tr.is-open .cell-primary::after {
        margin-top: -2px;
        transform: rotate(-135deg);
    }

    .main-header-inner {
        min-height: 70px;
        /* Sinasadyang HINDI na-wrap dito (bagay sa 1000px breakpoint
           lang ang "flex-wrap: wrap" — nagdudulot ito ng bug sa mas
           maliit na screen: kapag hindi kumasya ang buong brand text +
           hamburger sa isang linya, nadadala ang hamburger button sa
           SUSUNOD na linya, naka-left-align, kaya parang "nawawala" o
           mali ang pwesto nito sa ilalim ng logo). Sa halip, pinapaikli
           na lang ang brand text mismo (tingnan sa ibaba) para laging
           magkasya ang logo + text + hamburger sa iisang linya. */
        flex-wrap: nowrap;
    }

    .brand {
        min-width: 0; /* para gumana ang text-overflow ng anak nito sa loob ng flex row */
    }

    .brand-text {
        min-width: 0;
        overflow: hidden;
    }

    .brand-name,
    .brand-subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-name {
        font-size: 0.95rem;
    }

    .brand-subtitle {
        font-size: 0.60rem;
    }

    .brand-mark {
        width: 39px;
        height: 39px;
    }

    /* Hamburger drawer imbes na horizontal-scroll na nav row — mas
       malinaw at mas madaling i-tap sa maliit na screen. */
    .nav-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1300;
        width: min(300px, 82vw);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 90px 22px 30px;
        background: var(--white);
        box-shadow: -18px 0 45px rgba(23, 38, 27, 0.18);
        transform: translateX(100%);
        visibility: hidden; /* sarado: hindi nai-swipe, na-tab, o nakikita */
        transition: transform 0.28s ease, visibility 0s linear 0.28s;
        overflow-y: auto;
    }

    .main-nav.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.28s ease, visibility 0s;
    }

    body.nav-open .chatbot-container {
        display: none;
    }

    /* 16px fields: phones (esp. iPhone Safari) auto-zoom into smaller text
       on focus, which makes the page look shifted/cut off. */
    input,
    select,
    textarea,
    .form-control,
    .product-search-input,
    .chatbot-input input,
    .qty-stepper input {
        font-size: 16px;
    }

    /* Header: the brand text shrinks (…) so the menu button always fits */
    .main-header-inner {
        gap: 12px;
    }

    .brand,
    .brand-text {
        min-width: 0;
        flex-shrink: 1;
    }

    .brand-name,
    .brand-subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Payment method / plan choices stack on phones */
    .payment-options {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ---- Mobile nav drawer ---- */
    .main-nav {
        padding: 0 0 24px;
        gap: 4px;
        background: linear-gradient(180deg, var(--cream) 0%, var(--white) 55%);
    }

    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
        padding: 20px 18px;
        background: linear-gradient(135deg, var(--green-900), var(--green-700));
        color: var(--white);
    }

    .nav-drawer-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .nav-drawer-brand img {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 0 0 2px rgba(200, 169, 107, 0.6);
    }

    .nav-drawer-brand strong {
        display: block;
        font-size: 0.95rem;
        line-height: 1.2;
    }

    .nav-drawer-brand span {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        color: var(--gold);
        font-size: 0.78rem;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        padding: 8px;
        border-radius: 10px;
        background: var(--light-green);
        color: var(--green-700);
    }

    .nav-link-icon svg {
        width: 100%;
        height: 100%;
    }

    .main-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 12px;
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 0.95rem;
    }

    .main-nav .nav-link:hover {
        background: var(--light-green);
    }

    .main-nav .nav-link.active {
        background: var(--green-700);
        color: var(--white);
    }

    .main-nav .nav-link.active .nav-link-icon {
        background: rgba(255, 255, 255, 0.16);
        color: var(--white);
    }

    .main-nav .nav-link.active::after {
        content: none;
    }

    /* Account shortcuts, indented under "My Account" */
    .nav-sub-links {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0 12px 0 34px;
        padding-left: 8px;
        border-left: 2px solid var(--border);
    }

    .nav-sub-links .nav-link {
        margin: 0;
        padding: 6px 8px;
        color: var(--text-light);
        font-size: 0.88rem;
    }

    .nav-sub-links .nav-link-icon {
        width: 28px;
        height: 28px;
        padding: 6px;
        background: var(--white);
        border: 1px solid var(--border);
    }

    .nav-link-mobile {
        display: flex;
    }

    .main-nav .cart-badge {
        margin-left: auto;
    }

    /* Login / Register / Logout: full-width buttons at the bottom */
    .main-nav .nav-button {
        gap: 10px;
        margin: 8px 12px 0;
        padding: 8px 12px;
        border-radius: 12px;
    }

    /* Push Login (guest) or Logout (customer) to the bottom of the drawer */
    .main-nav .nav-login {
        margin-top: auto;
    }

    .main-nav .nav-button .nav-link-icon {
        width: 30px;
        height: 30px;
        padding: 6px;
        background: rgba(255, 255, 255, 0.18);
        color: inherit;
    }

    .main-nav .nav-logout {
        border-color: rgba(185, 74, 72, 0.35);
        background: var(--white);
        color: var(--danger);
    }

    .main-nav .nav-logout .nav-link-icon {
        background: #F6E4E3;
    }

    .main-nav .nav-logout:hover {
        background: #F6E4E3;
        color: var(--danger);
    }

    /* Welcome banner: photo stays on the left of the greeting */
    .welcome-card {
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 14px;
    }

    .welcome-card .avatar-preview-lg {
        width: 64px;
        height: 64px;
        border-width: 3px;
    }

    .welcome-card .avatar-preview-lg.avatar-fallback {
        font-size: 1.6rem;
    }

    .checkout-actions {
        padding: 16px 18px 20px;
    }

    .checkout-actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .linked-product {
        margin: 16px 18px 0;
    }

    .nav-drawer-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        color: var(--white);
        cursor: pointer;
    }

    .nav-drawer-close svg {
        width: 18px;
        height: 18px;
    }

    .nav-drawer-close:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1250;
        background: rgba(23, 38, 27, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    .nav-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-link {
        padding: 12px 10px;
        white-space: normal;
    }

    .nav-link.active::after {
        left: 10px;
        right: auto;
        bottom: 6px;
        width: 16px;
    }

    .nav-divider {
        display: none;
    }

    .nav-button {
        justify-content: flex-start;
        margin-top: 8px;
        padding: 10px 14px;
        white-space: nowrap;
    }

    .hero {
        min-height: 540px;
    }

    .hero-inner,
    .products-hero-inner {
        width: min(calc(100% - 28px), var(--container));
        padding: 65px 0;
    }

    .hero-content,
    .products-hero-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2.55rem;
        letter-spacing: -1.1px;
    }

    .products-hero h1 {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }

    .hero-description {
        font-size: 0.90rem;
        line-height: 1.75;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-btn {
        width: 100%;
    }

    .trust-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .trust-item {
        justify-content: flex-start;
        min-height: 85px;
        border-right: none !important;
        border-top: 1px solid var(--border);
    }

    .trust-item:first-child {
        border-top: none;
    }

    .section,
    .products-section {
        padding: 62px 0;
    }

    .products-section.products-page {
        padding-top: 18px;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 30px;
    }

    .section-title {
        font-size: 1.9rem;
    }

    .feature-grid,
    .product-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Footer: link columns side by side, brand + contact full width */
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .footer-brand,
    .footer-grid > .footer-column:last-child {
        grid-column: 1 / -1;
    }

    .feature-card {
        min-height: auto;
    }

    .product-image {
        height: 220px;
    }

    .product-info {
        padding: 21px;
    }

    .product-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .filter-card {
        padding: 20px;
    }

    .filter-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .product-search-form {
        flex-wrap: wrap;
    }

    .product-search-input-wrap {
        flex-basis: 100%;
    }

    .page-content,
    .dashboard {
        padding: 18px 0 55px;
    }

    /* "Back to Products" replaces the breadcrumb on phones (no doubles) */
    .back-link + .breadcrumb {
        display: none;
    }


    .page-header {
        margin-bottom: 20px;
        padding: 22px 20px;
    }

    .welcome-card {
        padding: 20px;
    }

    .stats-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .cart-item {
        grid-template-columns: auto 80px minmax(0, 1fr);
        gap: 12px;
        padding: 18px;
    }

    .cart-card-header-with-select {
        align-items: flex-start;
        flex-direction: column;
    }

    .item-image {
        width: 80px;
        height: 80px;
    }

    .item-actions {
        grid-column: 1 / -1;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .cta-section {
        padding: 62px 0;
    }

    .cta-button {
        width: 100%;
    }

    .footer-main {
        padding: 52px 0 38px;
    }

    .footer-grid {
        gap: 30px;
    }

    .footer-bottom-inner {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        padding: 20px 0;
    }

    .chatbot-container {
        right: 15px;
        bottom: 15px;
    }

    .chatbot-window,
    .chatbot-window.expanded {
        right: 14px;
        left: 14px;
        bottom: 82px;
        width: auto;
        height: min(510px, calc(100vh - 110px));
    }

    /* Mas malaki pa rin sa mobile kapag "expanded" (halos buong screen
       height), pero hindi na kailangan ang expand button dahil
       compact na naman ang default sa maliit na screen. */
    .chatbot-window.expanded {
        height: calc(100vh - 100px);
    }

    .expand-chat {
        display: none;
    }
}

@media (max-width: 430px) {
    .brand {
        gap: 8px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
    }

    .brand-name {
        font-size: 0.88rem;
    }

    .brand-subtitle {
        font-size: 0.55rem;
        letter-spacing: 0.9px;
    }

    .hero h1 {
        font-size: 2.25rem;
    }

    .hero-label {
        font-size: 0.66rem;
    }

    .product-image {
        height: 205px;
    }

    .item-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Dati, nag-o-overflow/nag-uumpisang mag-stack nang random ang
       label/stepper/price sa loob ng .quantity-control sa narrow
       screen (walang flex-wrap, kaya nagkakasiksikan sila). Ngayon,
       malinaw na dalawang hanay: "Qty" label sa sariling buong-lapad
       na linya, tapos ang stepper (-/1/+) at presyo naman ay magkatabi
       sa ilalim, magkabilang-dulo (space-between). */
    .quantity-control {
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 10px;
    }

    .quantity-control label {
        width: 100%;
        font-size: 0.74rem;
        font-weight: 600;
    }

    .item-subtotal {
        font-size: 1.05rem;
    }

    .chatbot-toggle {
        width: 52px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}