/* =====================================================
 YOLKIES TRADE
 COMPACT & CLEAN WEBSITE CSS
 ===================================================== */
/* ===== FONTS: Playfair Display (headings) + Nunito (body) ===== */

/* ===== GLOBAL STYLES ===== */
:root {
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    /* ONE card look for the whole site */
    --card-radius: 16px;
    --card-shadow: 0 10px 28px rgba(5, 22, 80, 0.20);
    --card-shadow-hover: 0 16px 36px rgba(5, 22, 80, 0.30);
    --card-lift: -6px;
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --primary-blue: #0057c8;
    --secondary-blue: #0070e8;
    --dark-blue: #0a2363;
    --accent-yellow: #ffd126;
    --yellow-primary: #FBBF24;
    --light-yellow: #fff199;
    --white: #ffffff;
    --dark-text: #1a1a1a;
    --light-text: #4a4a4a;
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
    --radius: 8px;
    --btn-radius: 6px;   /* ONE radius for every button */
    --btn-lift: -3px;    /* ONE hover lift for every button */
    --page-gradient: radial-gradient(ellipse 48% 60% at 95% 100%, rgba(255, 186, 8, 0.85) 0%, rgba(255, 186, 8, 0.30) 45%, transparent 75%),
        radial-gradient(ellipse 45% 50% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
        linear-gradient(135deg, #0A2472 0%, #0e3190 32%, #2a56b8 55%, #d9a63a 82%, #FFBA08 100%);
}

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

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

h1,
h2,
h3,
h4,
.logo span,
.step-number,
.about-stat strong {
    font-family: var(--font-display);
}

body {
    font-family: var(--font-body);
    color: var(--dark-text);
    line-height: 1.6;
    padding-top: 90px;
    overflow-x: hidden;
    background: linear-gradient(135deg, #0A2472 0%, #1c47a8 28%, #7fa6e6 48%, #ffe08a 70%, #FFBA08 100%);
}

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

ul {
    list-style: none;
}

/* =====================================================
 MOTION (one system for the whole site)
 - riseIn: fade + slide up. Tune per element with --rise-y / --rise-scale
 - hero / page headers: text rises in one line after another on load
 - .reveal (added by script.js): cards and headings rise in as they scroll into view
 ===================================================== */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(var(--rise-y, 26px)) scale(var(--rise-scale, 1)); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(var(--slide-x, -32px)); }
}

@keyframes wipeIn {
    from { opacity: 0; clip-path: inset(-20% 100% -20% 0); transform: translateX(-28px); }
    to   { clip-path: inset(-20% -10% -20% -5%); }
}

@keyframes goldShimmer {
    to { background-position: -200% 0; }
}

:is(.about-header, .page-header) > * {
    animation: riseIn 0.8s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 110ms);
}

:is(.about-header, .page-header) > :nth-child(2) { --i: 1; }
:is(.about-header, .page-header) > :nth-child(3) { --i: 2; }
:is(.about-header, .page-header) > :nth-child(4) { --i: 3; }

.reveal:not(.is-in) {
    opacity: 0;
}

.reveal.is-in {
    animation: riseIn 0.7s var(--ease-out) both;
    animation-delay: var(--d, 0ms);
}

/* hero: eyebrow slides in, headline wipes in line by line, then text and buttons follow */
.hero-section .hero-text h5 {
    animation: slideIn 0.7s var(--ease-out) 0.1s both;
}

.hero-section .hero-text h1 {
    animation: wipeIn 0.9s var(--ease-out) 0.3s both;
}

.hero-section .hero-text > p {
    animation: slideIn 0.8s var(--ease-out) 1s both;
}

.hero-section .hero-buttons > :nth-child(1) {
    animation: slideIn 0.7s var(--ease-out) 1.25s both;
}

.hero-section .hero-buttons > :nth-child(2) {
    animation: slideIn 0.7s var(--ease-out) 1.4s both;
}

/* headline underline draws itself once the heading is in view */
.section-heading h2::after {
    transition: transform 0.8s var(--ease-out) 0.3s;
    transform-origin: left center;
}

.reveal:not(.is-in) .section-heading h2::after,
.section-heading.reveal:not(.is-in) h2::after {
    transform: scaleX(0);
}

/* extra touches: smooth scroll, pindot ng button, pulso ng CTA, bukas ng FAQ, talon ng cart badge */
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
    50%      { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
}

@keyframes valueBump {
    40% { transform: scale(var(--bump, 1.4)); }
}

@keyframes cartLeave {
    to { opacity: 0; transform: translateX(48px) scale(0.96); }
}

@keyframes iconBob {
    50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    button:active:not(:disabled),
    .btn-primary:active,
    .btn-secondary:active,
    .pp-cta-btn:active {
        transform: scale(0.96);
    }

    .pp-cta-btn,
    .checkout-btn:not(:disabled) {
        animation: ctaPulse 2.8s ease-in-out 1.2s infinite;
    }

    .pp-cta-btn:hover,
    .checkout-btn:hover {
        animation-play-state: paused;
    }

    .pp-faq-item[open] > p,
    .pp-details[open] > dl {
        --rise-y: 12px;
        animation: riseIn 0.4s var(--ease-out) both;
    }

    /* .badge-bump / .value-bump ay nilalagay ng setTextWithBump() sa script.js kapag nagbago ang halaga */
    .badge-bump,
    .value-bump {
        animation: valueBump 0.5s var(--ease-out);
    }

    .value-bump {
        --bump: 1.08;
    }

    /* cart page: sabay-sabay na lumalabas ang header at summary, sunod-sunod ang mga item */
    .cart-header-v2,
    .empty-cart {
        animation: riseIn 0.7s var(--ease-out) both;
    }

    .summary-container-v2 {
        --slide-x: 32px;
        animation: slideIn 0.8s var(--ease-out) 0.15s both;
    }

    .cart-item-v2.cart-enter {
        animation: riseIn 0.6s var(--ease-out) both;
        animation-delay: var(--d, 0ms);
    }

    .cart-item-v2.cart-leave {
        pointer-events: none;
        animation: cartLeave 0.3s ease forwards;
    }

    .empty-icon {
        animation: iconBob 3s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.about-header, .page-header) > *,
    .reveal.is-in,
    .hero-section .hero-text :is(h5, h1, h1 span),
    .hero-section .hero-text > p,
    .hero-section .hero-buttons > * {
        animation: none !important;
    }

    .reveal:not(.is-in) {
        opacity: 1;
    }
}

button {
    cursor: pointer;
    border: none;
    border-radius: var(--btn-radius);
    font-weight: 600;
    transition: all 0.3s ease;
}

input,
textarea,
select {
    border: 1px solid #D1D5DB;
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 15px;
    transition: border 0.3s;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Login / Register pages: navbar is shown, page starts under the fixed 64px bar */
body:has(.auth-page) {
    padding-top: 64px;
}

body:has(.auth-page) .auth-page {
    min-height: calc(100vh - 64px);
    min-height: calc(100dvh - 64px);
}

/* =====================================================
 HEADER & NAVBAR
 ===================================================== */
.navbar {
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
    justify-content: space-between;
    margin-bottom: 4rem;
}

#navbar-placeholder {
    height: 80px;
}

.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 64px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    background: #000080;
}

/* ===== LOGO ===== */
.logo {
    display: flex;
    align-items: center;
    width: 120px;
    flex-shrink: 0;
    text-decoration: none;
}

.logo img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
    /* itinatago ang puting kanto ng logo.jpg (bilog ang logo) */
    clip-path: circle(50%);
}

.logo span {
    color: white;
    font-size: 23px;
    font-weight: 700;
    white-space: nowrap;
}

/* =========================
 NAVBAR LINKS
 ========================= */
.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    background: transparent;
}

.nav-links a {
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 7px 0;
    white-space: nowrap;
    border: none;
    outline: none;
    background: transparent;
    transition: color 0.25s ease,
        transform 0.25s ease;
}

/* YELLOW UNDERLINE */
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: #FBBF24;
    transform-origin: left;
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: #FBBF24;
    transform: translateY(-1px);
}

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

/* =====================================================
 NAV RIGHT
 ===================================================== */
.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    background: transparent;
}

.nav-right > a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 18px;
    flex-shrink: 0;
    transition: color 0.25s ease, transform 0.2s ease;
}

.nav-right > a:hover,
.nav-right > a:hover i {
    color: #FBBF24 !important;
    transform: translateY(-1px);
}

/* =====================================================
 SEARCH BAR
 ===================================================== */
.search-bar {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    width: 220px;
    height: 44px;
}

.search-btn {
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 0 30px 30px 0;
    margin-left: -40px;
    cursor: pointer;
    height: 100%;
    background: #ffd43b;
    display: flex;
    color: #080616;
    font-size: 1rem;
    justify-content: center;
    transition: background 0.3s ease;
}

.search-bar input {
    width: 100%;
    height: 100%;
    flex: 1;
    border: none;
    outline: none;
    padding: 0 16px;
    color: #333333;
    font-size: 0.9rem;
    background: transparent;
}

.search-bar::placeholder {
    color: rgba(255,255,255,0.7);
}

.search-bar button {
    width: 48px;
    height: 100%;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
    background: #FBBF24;
    color: #1F0270;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease,
        color 0.2s ease;
}

.search-bar button:hover {
    background: white;
    color: #1F0270;
}

/* =====================================================
 CART
 ===================================================== */
.cart-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 19px;
    position: relative;
    transition: color 0.25s ease, transform 0.2s ease;
}

.cart-btn:hover {
    color: #FBBF24;
    transform: translateY(-1px);
}

.cart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.25s ease,
        transform 0.2s ease;
}

.cart-link:hover,
.cart-link:hover .cart-btn {
    color: #FBBF24;
    transform: translateY(-1px);
}

.cart-badge {
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
    border-radius: 50%;
    background: #ffbd18;
    color: #24006b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    box-sizing: border-box;
    transition: transform 0.2s ease, background-color 0.25s ease;
}

.cart-link:hover .cart-badge {
    background: #ffd04d;
    transform: scale(1.05);
}

/* =====================================================
 BURGER MENU
 ===================================================== */
.burger-wrap {
    position: relative;
    flex-shrink: 0;
}

.burger-menu {
    width: 34px;
    height: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.burger-menu span {
    display: block;
    width: 24px;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
    transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}

.burger-menu:hover span {
    background: #ffbd18;
}

.burger-menu:focus-visible {
    outline: 2px solid #ffbd18;
    outline-offset: 2px;
}

/* Nagiging X kapag bukas */
.burger-menu.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger-menu.open span:nth-child(2) {
    opacity: 0;
}

.burger-menu.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 230px;
    padding: 10px 0;
    background: #0A2472;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(5, 22, 80, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top right;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.nav-menu-header {
    padding: 6px 18px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.5);
}

.nav-menu-divider {
    height: 1px;
    margin: 8px 0;
    background: rgba(255, 255, 255, 0.12);
}

.nav-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.nav-menu a i {
    width: 18px;
    text-align: center;
    color: #ffbd18;
    font-size: 15px;
}

.nav-menu a:hover,
.nav-menu a.active {
    background: rgba(255, 189, 24, 0.15);
    color: #ffbd18;
}

.nav-menu a:hover {
    padding-left: 22px;
}

/* Nakatago sa desktop; lalabas sa phone/tablet (tingnan ang @media sa baba) */
.menu-mobile-only {
    display: none;
}

/* =====================================================
 ACCOUNT
 ===================================================== */
.account-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    text-decoration: none;
    transition: color 0.25s ease,
        transform 0.2s ease;
}

.account-btn:hover,
.account-btn.active {
    color: #FFD43B;
    transform: translateY(-1px);
}

/* =====================================================
 PAGE HEADER
 ===================================================== */
.page-header {
    margin: 28px 0;
}

.page-header h1 {
    font-size: 34px;
    color: var(--blue-dark);
    margin-bottom: 8px;
    border-bottom: 4px solid var(--yellow-primary);
    display: inline-block;
    padding-bottom: 7px;
}

.breadcrumb {
    color: #6B7280;
    font-size: 14px;
    margin-top: 8px;
}

/* =====================================================
 BUTTONS
 ===================================================== */
.hero-buttons {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

/* ===== SHOP NOW (yellow) ===== */
.btn-primary {
    padding: 0.9rem 2rem;
    background: var(--accent-yellow);
    color: var(--primary-blue);
    font-weight: 700;
    border-radius: var(--btn-radius);
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.btn-primary:hover {
    background: #ffd04d;
    border-color: #ffd04d;
    transform: translateY(var(--btn-lift));
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.45);
}

/* ===== LEARN MORE (white, yellow pag hover) ===== */
.btn-secondary {
    padding: 0.9rem 2.2rem;
    color: #164a9c;
    font-weight: 600;
    border-radius: var(--btn-radius);
    border: 2px solid #164a9c;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #ffffff;
}

.btn-secondary:hover {
    background: #fbbf24;
    border-color: #fbbf24;
    color: #164a9c;
    transform: translateY(var(--btn-lift));
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.45);
}

/* Keyboard focus */
.btn-primary:focus-visible,
.btn-outline:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* =====================================================
 FOOTER
 ===================================================== */
footer,
#footer-placeholder {
    background: #000080;
    color: white;
    padding: 26px 0 14px;
    margin-top: 40px;
    display: block;
    width: 100%;
    position: relative;
    border-top: 4px solid var(--yellow-primary, #f59e0b);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
}

/* =====================================================
 FOOTER GRID
 ===================================================== */
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
}

/* =====================================================
 COLUMNS
 ===================================================== */
.footer-col {
    min-width: 0;
}

.footer-col h3 {
    color: var(--yellow-primary, #f59e0b);
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
}

/* =====================================================
 EGGTRADE TITLE
 ===================================================== */
.footer-logo {
    color: var(--yellow-primary, #f59e0b) !important;
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.2;
}

.footer-logo span {
    color: var(--yellow-primary, #f59e0b);
}

/* =====================================================
 FOOTER LINKS
 ===================================================== */
.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col ul li a {
    color: white;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease,
        transform 0.2s ease;
}

.footer-col ul li a:hover {
    color: var(--yellow-primary, #f59e0b);
    transform: translateX(2px);
}

/* Customer Service items are plain text (<span>), not links.
   Only the Quick Links column is clickable. */
.footer-col ul li span {
    color: white;
    font-size: 13px;
    cursor: default;
}

/* =====================================================
 BRAND BLURB
 ===================================================== */
.footer-brand p {
    max-width: 420px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/* =====================================================
 COPYRIGHT & EDUCATIONAL DISCLAIMER (BAGONG ADD)
 ===================================================== */
.copyright {
    width: 100%;
    grid-column: 1 / -1;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    line-height: 1.6;
}

.educational-disclaimer {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--yellow-primary, #f59e0b);
    font-style: italic;
    opacity: 0.9;
}

/* =====================================================
 HOME PAGE
 ===================================================== */
.hero-section {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp(540px, 82vh, 760px);
    padding: 70px 8%;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #ffffff;
}

.hero-section .hero-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-section .hero-text {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 580px;
    text-align: left;
}

.hero-section .hero-text h5 {
    color: #fbbf24;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin: 0 0 16px;
}

.hero-section .hero-text h5 i {
    color: #fbbf24;
    margin-right: 8px;
}

.hero-section .hero-text h1 {
    color: #ffffff;
    font-size: clamp(2.4rem, 4.8vw, 4.3rem);
    line-height: 1.06;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: 0 0 24px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.hero-section .hero-text h1 span {
    display: block;
    color: #fbbf24;
    text-shadow: none;
    background: linear-gradient(100deg, #fbbf24 0%, #fff0b3 25%, #fbbf24 50%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wipeIn 0.8s var(--ease-out) 0.65s both, goldShimmer 5s linear 1.5s infinite;
}

.hero-section .hero-text p {
    color: rgba(255, 255, 255, 0.90);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 480px;
    margin: 0 0 32px;
}

.hero-section .hero-buttons {
    align-items: center;
    gap: 16px;
}

.hero-section .hero-buttons .btn-primary,
.hero-section .hero-buttons .btn-secondary {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    width: 190px;
    max-width: 100%;
    min-height: 50px;
    padding: 12px 28px;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-section .hero-buttons .btn-primary::before,
.hero-section .hero-buttons .btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-section .hero-buttons .btn-primary:hover::before,
.hero-section .hero-buttons .btn-secondary:hover::before {
    left: 160%;
}

.hero-section .hero-buttons .btn-primary {
    color: #061a45;
    background: #fbbf24;
    border: 2px solid #fbbf24;
}

.hero-section .hero-buttons .btn-primary:hover {
    color: #061a45;
    background: #ffd04d;
    border-color: #ffd04d;
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.45);
}

.hero-section .hero-buttons .btn-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.hero-section .hero-buttons .btn-secondary:hover {
    color: #0a2363;
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 10px 24px rgba(255, 255, 255, 0.28);
}

.hero-section .hero-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 58%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px 3% 28px 0;
    pointer-events: none;
    box-sizing: border-box;
    /* anino ng itlog (inilipat dito dahil pinuputol ng mask ang anino sa mismong larawan) */
    filter: drop-shadow(0 28px 40px rgba(0, 10, 40, 0.5));
}

/* soft golden glow behind the egg so it pops off the gradient */
.hero-section .hero-image::before {
    content: "";
    position: absolute;
    inset: 8% 4%;
    background: radial-gradient(ellipse 50% 50% at 50% 52%, rgba(255, 214, 90, 0.55) 0%, rgba(255, 186, 8, 0.2) 45%, transparent 72%);
    filter: blur(8px);
}

.hero-section .hero-image img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    will-change: transform;
    animation: heroEggUpDown 3s ease-in-out infinite;

    /* Itinatago ang puting background ng home.jpg: ang hugis lang ng 3 itlog ang ipinapakita */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 577 433'%3E%3Cpath d='M138.2,229.5 136.0,239.2 136.0,249.0 137.8,258.0 140.0,264.2 143.5,271.5 148.5,279.2 155.2,287.5 163.0,295.0 170.8,301.0 182.0,308.2 199.2,316.2 210.8,319.8 226.8,322.0 240.8,321.5 252.8,319.0 263.5,314.8 272.8,309.2 278.8,304.5 284.2,299.0 289.8,292.2 295.5,281.5 297.8,273.2 298.5,271.8 300.0,271.0 301.2,273.0 302.0,279.8 303.8,287.2 305.8,292.8 308.8,298.8 315.0,307.2 320.2,312.5 327.5,317.8 333.8,321.0 342.2,324.2 351.5,326.5 360.0,327.5 375.5,327.2 384.8,325.8 393.5,323.5 404.0,319.5 418.8,311.5 428.5,304.2 437.0,296.0 446.0,284.0 451.2,274.0 454.8,264.5 457.0,251.2 457.0,241.2 456.2,235.0 454.8,228.0 451.5,219.0 448.2,212.8 443.5,206.0 435.5,197.5 431.5,194.2 424.8,190.0 416.0,186.0 408.8,183.8 400.0,182.0 393.2,181.5 380.2,182.0 371.5,183.5 361.2,186.8 360.2,186.8 359.5,186.0 361.8,175.8 362.5,169.2 362.5,156.0 361.8,148.5 358.0,131.2 354.8,122.2 350.0,112.5 345.0,104.8 339.8,98.2 333.0,91.8 326.0,86.8 318.0,82.5 312.5,80.5 302.8,78.2 297.2,77.8 287.8,78.2 280.8,79.8 272.5,82.8 266.5,85.8 258.2,91.5 250.8,98.8 242.5,110.0 238.0,118.2 234.0,128.0 231.5,136.5 229.2,147.5 228.5,155.8 228.5,166.2 229.2,175.0 231.0,182.5 231.0,184.0 230.2,184.8 212.0,184.8 200.2,186.0 187.8,189.0 179.8,191.8 172.5,195.0 164.8,199.2 159.0,203.2 148.5,212.5 142.5,220.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 577 433'%3E%3Cpath d='M138.2,229.5 136.0,239.2 136.0,249.0 137.8,258.0 140.0,264.2 143.5,271.5 148.5,279.2 155.2,287.5 163.0,295.0 170.8,301.0 182.0,308.2 199.2,316.2 210.8,319.8 226.8,322.0 240.8,321.5 252.8,319.0 263.5,314.8 272.8,309.2 278.8,304.5 284.2,299.0 289.8,292.2 295.5,281.5 297.8,273.2 298.5,271.8 300.0,271.0 301.2,273.0 302.0,279.8 303.8,287.2 305.8,292.8 308.8,298.8 315.0,307.2 320.2,312.5 327.5,317.8 333.8,321.0 342.2,324.2 351.5,326.5 360.0,327.5 375.5,327.2 384.8,325.8 393.5,323.5 404.0,319.5 418.8,311.5 428.5,304.2 437.0,296.0 446.0,284.0 451.2,274.0 454.8,264.5 457.0,251.2 457.0,241.2 456.2,235.0 454.8,228.0 451.5,219.0 448.2,212.8 443.5,206.0 435.5,197.5 431.5,194.2 424.8,190.0 416.0,186.0 408.8,183.8 400.0,182.0 393.2,181.5 380.2,182.0 371.5,183.5 361.2,186.8 360.2,186.8 359.5,186.0 361.8,175.8 362.5,169.2 362.5,156.0 361.8,148.5 358.0,131.2 354.8,122.2 350.0,112.5 345.0,104.8 339.8,98.2 333.0,91.8 326.0,86.8 318.0,82.5 312.5,80.5 302.8,78.2 297.2,77.8 287.8,78.2 280.8,79.8 272.5,82.8 266.5,85.8 258.2,91.5 250.8,98.8 242.5,110.0 238.0,118.2 234.0,128.0 231.5,136.5 229.2,147.5 228.5,155.8 228.5,166.2 229.2,175.0 231.0,182.5 231.0,184.0 230.2,184.8 212.0,184.8 200.2,186.0 187.8,189.0 179.8,191.8 172.5,195.0 164.8,199.2 159.0,203.2 148.5,212.5 142.5,220.5Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@keyframes heroEggUpDown {
    0%   { transform: translateY(-25px); }
    50%  { transform: translateY(25px); }
    100% { transform: translateY(-25px); }
}

/* =====================================================
 FEATURES STRIP
 ===================================================== */
.features-section {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: calc(100% - 44px);
    max-width: 1350px;
    margin: 0 auto 34px auto;
    padding: 20px 16px;
    background: #fffdf6;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(5, 22, 80, 0.18);
    box-sizing: border-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.features-section .feature-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    padding: 10px 16px;
    background: transparent;
    border-right: 1px solid #e3e7ef;
    transition: transform 0.25s ease, background 0.25s ease, border-radius 0.25s ease;
}

.features-section .feature-card:last-child {
    border-right: none;
}

.features-section .feature-card:hover {
    background: rgba(251, 191, 36, 0.12);
    border-radius: 10px;
}

.features-section .feature-icon {
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FFBA08;
    color: #0A2472;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(255, 186, 8, 0.4);
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.features-section .feature-card:hover .feature-icon {
    transform: scale(1.08);
    background: #0A2472;
    color: #FFBA08;
}

.features-section .feature-card h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    color: #12306b;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.features-section .feature-card p {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0;
}

/* ===== POPUP ===== */
body.modal-open {
    overflow: hidden;
}

.feature-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.feature-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.feature-modal {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.feature-modal-overlay.show .feature-modal {
    transform: translateY(0) scale(1);
}

.feature-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #fff7d1;
    color: #164a9c;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.feature-modal-close:hover {
    background: #164a9c;
    color: #fbbf24;
    transform: rotate(90deg);
}

.feature-modal-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #164a9c;
    color: #fbbf24;
    font-size: 32px;
    box-shadow: 0 8px 18px rgba(22, 74, 156, 0.3);
}

.feature-modal h3 {
    color: #164a9c;
    font-size: 24px;
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: center;
}

.feature-modal h3::after {
    content: "";
    display: block;
    width: 50px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 4px;
    background: #fbbf24;
}

.feature-modal-intro {
    color: #315d9c;
    font-size: 15px;
    line-height: 1.65;
    margin: 16px 0 18px;
}

.feature-modal-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    text-align: left;
}

.feature-modal-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #f6f9ff;
    color: #315d9c;
    font-size: 14px;
    line-height: 1.5;
}

.feature-modal-list li i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fbbf24;
    color: #164a9c;
    font-size: 11px;
}

.feature-modal-btn {
    border: none;
    border-radius: var(--btn-radius);
    padding: 12px 38px;
    background: #164a9c;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.feature-modal-btn:hover {
    background: #fbbf24;
    color: #164a9c;
    transform: translateY(var(--btn-lift));
}

.how-section {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 20px 90px;
    box-sizing: border-box;
}

.section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 38px;
}

.section-tag {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 12px;
    border-radius: 30px;
    background: #0A2472;
    border: 1px solid #FFBA08;
    color: #FFBA08;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-heading h2 {
    position: relative;
    display: inline-block;
    color: #ffffff;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 20px;
    padding-bottom: 14px;
    text-shadow: 0 3px 14px rgba(5, 22, 80, 0.45);
}

.section-heading h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #FFBA08;
}

.section-heading p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto;
}

.steps-grid {
    --step-gap: 22px;
    --step-inset: calc((100% - 3 * var(--step-gap)) / 8 - 2.5px);
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--step-gap);
    margin-top: 60px;
}

/* Step rail: a golden bracket above the cards with a drop into every numbered circle.
 It sits behind the cards, so the circles (which sit on top of the card edge) stay in front.
 - desktop: ::before draws the whole rail (top bar + the 4 drops) as one shape
 - tablet (2 x 2): ::before and ::after are placed in grid rows 1 and 2, one bracket per row. */
.steps-grid::before,
.steps-grid::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -34px;
    left: var(--step-inset);
    right: var(--step-inset);
    height: 23px;
    grid-row: 1;
    grid-column: 1 / -1;
    box-sizing: border-box;
    border: 5px solid #FFBA08;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    pointer-events: none;
    filter: drop-shadow(0 0 1px rgba(10, 36, 114, 0.9)) drop-shadow(0 3px 5px rgba(5, 22, 80, 0.35));
}

@media (min-width: 1001px) {
    /* inner drops are painted by ::before itself (border-box background), so the bar and
     all four drops are ONE shape: no seam, no doubled shadow */
    .steps-grid::before {
        background: linear-gradient(90deg,
            transparent calc((100% - 5px) / 3),
            #FFBA08 0 calc((100% - 5px) / 3 + 5px),
            transparent 0 calc(2 * (100% - 5px) / 3),
            #FFBA08 0 calc(2 * (100% - 5px) / 3 + 5px),
            transparent 0) 0 0 / 100% 100% no-repeat border-box;
    }

    .steps-grid::after {
        display: none;
    }
}

.step-card {
    position: relative;
    padding: 34px 20px 26px;
    text-align: center;
    background: #ffffff;
    border-radius: var(--card-radius);
    border-top: 5px solid #FFBA08;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}

.step-card:hover {
    transform: translateY(var(--card-lift));
    border-top-color: #0A2472;
    box-shadow: var(--card-shadow-hover);
}

.step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #0A2472;
    color: #FFBA08;
    border: 3px solid #ffffff;
    font-size: 1rem;
    font-weight: 800;
    transition: background 0.3s ease, color 0.3s ease;
}

.step-card:hover .step-number {
    background: #FFBA08;
    color: #0A2472;
}

.step-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FFBA08;
    color: #0A2472;
    font-size: 26px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.step-card:hover .step-icon {
    background: #0A2472;
    color: #FFBA08;
    transform: scale(1.08);
}

.step-card h3 {
    color: #0A2472;
    font-size: 1.1rem;
    margin: 0 0 8px;
}

.step-card p {
    color: #5b6478;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

/* =====================================================
 ABOUT PAGE
 ===================================================== */
body:has(.about-page),
body:has(.hero-section) {
    min-height: 100vh;
    padding-top: 60px;
    margin: 0;
    position: relative;
    isolation: isolate;
    color: #ffffff;
    background: radial-gradient(ellipse 48% 75% at 92% 105%, rgba(255, 186, 8, 0.95) 0%, rgba(255, 186, 8, 0.35) 45%, transparent 75%),
        radial-gradient(ellipse 40% 55% at 68% 0%, rgba(90, 140, 235, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 45% 60% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
        linear-gradient(105deg, #0A2472 0%, #0e3190 30%, #2a56b8 52%, #d9a63a 78%, #FFBA08 100%);
    background-attachment: fixed;
}

body:has(.about-page)::before,
body:has(.hero-section)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 22, 80, 0.55) 0%, rgba(5, 22, 80, 0.25) 38%, rgba(5, 22, 80, 0) 66%);
}

body:has(.about-page)::after,
body:has(.hero-section)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
    mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
}

@media (min-width: 901px) {
    body:has(.about-page),
    body:has(.hero-section) {
        padding-top: 64px;
    }
}

.about-page {
    --about-glass: rgba(255, 255, 255, 0.14);
    --about-glass-border: rgba(255, 255, 255, 0.28);
    --about-ink: #123b82;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 52px;
    width: 100%;
    margin: 0;
    padding: 35px 5% 80px;
    box-sizing: border-box;
}

.about-page > * {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}

/* ---------- Header ---------- */
.about-page .about-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 0 16px;
    box-sizing: border-box;
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 50px;
    background: #0A2472;
    border: 1px solid #FFBA08;
    color: #FFBA08;
    font-size: clamp(0.7rem, 2.5vw, 0.85rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    margin: 0 auto 16px auto;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    box-sizing: border-box;
}

.about-page .about-header h1 {
    position: relative;
    display: inline-block;
    color: #ffffff;
    font-size: clamp(1.75rem, 6vw, 3.2rem);
    font-weight: 800;
    margin: 0 auto 16px auto;
    padding-bottom: 12px;
    text-shadow: 0 3px 14px rgba(5, 22, 80, 0.45);
    max-width: 100%;
    word-wrap: break-word;
}

.about-page .about-header h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #FFBA08;
    border-radius: 5px;
    transform: none;
}

.about-tagline {
    width: 100%;
    max-width: 680px;
    margin: 16px auto 0 auto;
    font-size: clamp(0.9rem, 3.2vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    box-sizing: border-box;
    padding: 0 8px;
}

.about-stat,
.about-cta {
    background: var(--about-glass);
    border: 1px solid var(--about-glass-border);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.about-card,
.value-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

/* ---------- Shared icon badge ---------- */
.about-icon {
    --size: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    margin-bottom: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFBA08, #ffd96b);
    color: #0A2472;
    font-size: calc(var(--size) * 0.42);
    box-shadow: 0 6px 14px rgba(255, 186, 8, 0.35);
}

.about-stat,
.about-card,
.value-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-stat:hover,
.about-card:hover,
.value-card:hover {
    transform: translateY(var(--card-lift));
    box-shadow: var(--card-shadow-hover);
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.about-stat {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-top: 4px solid #FFBA08;
    border-radius: var(--card-radius);
    padding: 24px 18px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}

.about-stat:hover {
    border-top-color: #0A2472;
}

.about-stat i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #FFBA08;
    color: #0A2472;
    font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(255, 186, 8, 0.4);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.about-stat:hover i {
    background: #0A2472;
    color: #FFBA08;
    transform: scale(1.08);
}

.about-stat strong {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0A2472;
    margin-bottom: 4px;
}

.about-stat span {
    display: block;
    font-size: 0.88rem;
    line-height: 1.4;
    color: #475569;
}

.about-grid {
    display: grid;
    gap: 28px;
}

.about-card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 36px;
    padding: 32px;
    overflow: hidden;
}

.about-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #FFBA08, #0e3190);
}

.about-card h2 {
    margin: 0 0 10px;
    font-size: 1.6rem;
    color: var(--about-ink);
}

.about-card p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.8;
    color: #334155;
    text-align: justify;
    hyphens: auto;
}

.about-card-img {
    display: block;
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(10, 36, 114, 0.22);
}

.about-card:nth-child(even) .about-card-img {
    order: -1;
}

.about-section-title {
    margin: 0 0 26px;
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #ffffff;
    text-shadow: 0 3px 14px rgba(5, 22, 80, 0.45);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.value-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 5px solid #FFBA08;
    border-radius: var(--card-radius);
    padding: 30px 20px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}

.value-card:hover {
    border-top-color: #0A2472;
}

.value-card .about-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #FFBA08;
    color: #0A2472;
    font-size: 1.4rem;
    box-shadow: 0 4px 14px rgba(255, 186, 8, 0.45);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.value-card:hover .about-icon {
    background: #0A2472;
    color: #FFBA08;
    transform: scale(1.08);
}

.value-card h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0A2472;
}

.value-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #475569;
}

.about-cta {
    background: linear-gradient(135deg, rgba(10, 36, 114, 0.90) 0%, rgba(14, 49, 144, 0.90) 100%);
    border: 2px solid rgba(255, 186, 8, 0.6);
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(5, 22, 80, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.about-cta h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

.about-cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 28px;
}

.about-cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.about-cta-actions a,
.about-cta-actions .btn-primary,
.about-cta-actions .btn-secondary {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    width: 190px;
    max-width: 100%;
    min-height: 50px;
    padding: 12px 28px;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.about-cta-actions a::before,
.about-cta-actions .btn-primary::before,
.about-cta-actions .btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.about-cta-actions a:hover::before,
.about-cta-actions .btn-primary:hover::before,
.about-cta-actions .btn-secondary:hover::before {
    left: 160%;
}

.about-cta-actions .btn-primary {
    color: #061a45;
    background: #fbbf24;
    border: 2px solid #fbbf24;
}

.about-cta-actions .btn-primary:hover {
    color: #061a45;
    background: #ffd04d;
    border-color: #ffd04d;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.45);
}

.about-cta-actions .btn-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.about-cta-actions .btn-secondary:hover {
    color: #0a2363;
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(255, 255, 255, 0.28);
}

/* ---------- Responsive (one block for the whole page) ---------- */
@media (max-width: 800px) {
    .about-page {
        gap: 38px;
        padding: 48px 5% 50px;
    }

    .about-card .about-icon {
        display: flex;
        margin-inline: auto;
    }

    .about-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px;
    }

    .about-card .about-card-img {
        order: -1;
        height: 210px;
    }
}

@media (max-width: 600px) {
    /* Mobile: compact Mission/Story cards - image on top, icon + title on one row, justified text (inherited from the base rule) */
    .about-grid {
        gap: 18px;
    }

    .about-card {
        gap: 14px;
        padding: 14px 14px 18px 19px;
        border-radius: 16px;
    }

    .about-card .about-card-img {
        height: 170px;
        border-radius: 12px;
    }

    .about-card-body {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 12px;
        align-items: center;
    }

    .about-card .about-icon {
        --size: 40px;
        display: inline-flex;
        margin: 0;
    }

    .about-card h2 {
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.25;
    }

    .about-card p {
        grid-column: 1 / -1;
        margin-top: 12px;
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .about-card:hover {
        transform: none;
    }
}

/* =====================================================
 GALLERY PAGE
 ===================================================== */
body:has(.gallery-header) {
    min-height: 100vh;
    padding-top: 60px;
    margin: 0;
    position: relative;
    isolation: isolate;
    color: #ffffff;
    background: radial-gradient(ellipse 48% 75% at 92% 105%, rgba(255, 186, 8, 0.95) 0%, rgba(255, 186, 8, 0.35) 45%, transparent 75%),
        radial-gradient(ellipse 40% 55% at 68% 0%, rgba(90, 140, 235, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 45% 60% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
        linear-gradient(105deg, #0A2472 0%, #0e3190 30%, #2a56b8 52%, #d9a63a 78%, #FFBA08 100%);
    background-attachment: fixed;
}

body:has(.gallery-header)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 22, 80, 0.55) 0%, rgba(5, 22, 80, 0.25) 38%, rgba(5, 22, 80, 0) 66%);
}

body:has(.gallery-header)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
    mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
}

@media (min-width: 901px) {
    body:has(.gallery-header) {
        padding-top: 64px;
    }
}

/* ===== HEADER ===== */
.gallery-header {
    max-width: 760px;
    margin: 34px auto 30px;
    padding: 0 20px;
    text-align: center;
}

.gg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 18px;
    border-radius: 50px;
    background: #0A2472;
    border: 1px solid #FFBA08;
    color: #FFBA08;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.gallery-header h1 {
    display: inline-block;
    position: relative;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 22px;
    padding-bottom: 14px;
    text-shadow: 0 3px 14px rgba(5, 22, 80, 0.45);
}

.gallery-header h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: #fbbf24;
}

.gallery-header p {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.6;
    text-shadow: 0 3px 14px rgba(5, 22, 80, 0.45);
}

/* ===== FILTERS ===== */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 30px;
    padding: 0 20px;
}

.gallery-filters button,
.gallery-filter {
    padding: 9px 20px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--btn-radius);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.gallery-filters button:hover,
.gallery-filter:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0A2472;
    transform: translateY(var(--btn-lift));
}

.gallery-filters button.active,
.gallery-filter.active {
    background: #FFBA08;
    border-color: #FFBA08;
    color: #061a45;
    box-shadow: 0 8px 20px rgba(255, 186, 8, 0.4);
}

/* ===== GRID (first photo is the big featured one) ===== */
.gallery-grid {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 60px;
    padding: 0 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: row dense;
    gap: 20px;
    box-sizing: border-box;
}

.gallery-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* ===== PHOTO CARD ===== */
.gallery-item {
    position: relative;
    isolation: isolate;
    margin: 0;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    overflow: hidden;
    background: #0A2472;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(5, 22, 80, 0.28),
        0 2px 6px rgba(5, 22, 80, 0.18);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
    --rise-y: 28px;
    --rise-scale: 0.97;
    animation: riseIn 0.7s var(--ease-out) backwards;
}

.gallery-item:hover,
.gallery-item:focus-visible {
    transform: translateY(-8px);
    border-color: #FFBA08;
    box-shadow: 0 22px 44px rgba(5, 22, 80, 0.42),
        0 0 0 4px rgba(255, 186, 8, 0.25);
    outline: none;
}

.gallery-item:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.gallery-item.hide {
    display: none;
}

/* Photo */
.gallery-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.06) contrast(1.02);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
    transform: scale(1.09);
    filter: saturate(1.15) contrast(1.04);
}

/* Category badge (reads data-category) */
.gallery-item::before {
    content: attr(data-category);
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 5px 12px;
    border-radius: 30px;
    background: rgba(10, 36, 114, 0.85);
    border: 1px solid #FFBA08;
    color: #FFBA08;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.35s ease;
    pointer-events: none;
}

.gallery-item:hover::before,
.gallery-item:focus-visible::before {
    opacity: 1;
    transform: none;
}

/* Caption: hidden until hover */
.gallery-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 70px 20px 18px;
    background: linear-gradient(to top,
        rgba(5, 22, 80, 0.95) 0%,
        rgba(5, 22, 80, 0.7) 45%,
        transparent 100%);
    color: #ffffff;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.4s ease;
}

.gallery-item:hover figcaption,
.gallery-item:focus-visible figcaption {
    opacity: 1;
    transform: none;
}

.gallery-item figcaption::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: #FFBA08;
}

.gallery-item figcaption h3 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.gallery-item figcaption p {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
}

/* Featured (first) photo gets bigger type */
.gallery-item:nth-child(1) figcaption {
    padding: 90px 28px 26px;
}

.gallery-item:nth-child(1) figcaption h3 {
    font-size: 28px;
}

.gallery-item:nth-child(1) figcaption p {
    font-size: 15px;
}

/* Placeholder (shows when there is no photo yet) */
.gallery-item.no-img,
.lightbox-stage .ph {
    background: linear-gradient(135deg, #fff7d1, #ffffff);
}

.gallery-item.no-img img {
    display: none;
}

.ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #164a9c;
    font-size: 54px;
}

.gallery-empty {
    text-align: center;
    color: white;
    font-size: 17px;
    margin-bottom: 60px;
}

/* Staggered entrance */
.gallery-item:nth-child(2) {
    animation-delay: 0.06s;
}

.gallery-item:nth-child(3) {
    animation-delay: 0.12s;
}

.gallery-item:nth-child(4) {
    animation-delay: 0.18s;
}

.gallery-item:nth-child(5) {
    animation-delay: 0.24s;
}

.gallery-item:nth-child(6) {
    animation-delay: 0.30s;
}

.gallery-item:nth-child(7) {
    animation-delay: 0.36s;
}

.gallery-item:nth-child(8) {
    animation-delay: 0.42s;
}

.gallery-item:nth-child(n+9) {
    animation-delay: 0.48s;
}

/* ===== LIGHTBOX ===== */
body.lb-open {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(12, 38, 92, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
}

.lightbox.show {
    opacity: 1;
    visibility: visible;
}

.lightbox-dialog {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.lightbox.show .lightbox-dialog {
    transform: scale(1);
}

.lightbox-stage {
    width: 100%;
    height: min(60vh, 520px);
    background: radial-gradient(ellipse at center, #1a3a8f 0%, #0A2472 70%, #061a45 100%);
}

.lightbox-stage img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
    display: block;
}

.lightbox-caption {
    padding: 18px 26px 22px;
    border-top: 4px solid #FFBA08;
    text-align: center;
}

.lightbox-caption h3 {
    margin: 0 0 6px;
    color: #164a9c;
    font-size: 22px;
}

.lightbox-caption p {
    margin: 0 0 8px;
    color: #315d9c;
    font-size: 15px;
}

.lightbox-caption span {
    font-size: 13px;
    color: #7a8fb5;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    border: none;
    border-radius: 50%;
    background: #fff7d1;
    color: #164a9c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    z-index: 2;
}

.lightbox-close {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    font-size: 24px;
    line-height: 1;
}

.lightbox-close:hover {
    background: #164a9c;
    color: #fbbf24;
    transform: rotate(90deg);
}

.lightbox-nav {
    top: calc(50% - 60px);
    width: 48px;
    height: 48px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.lightbox-nav.prev {
    left: 14px;
}

.lightbox-nav.next {
    right: 14px;
}

.lightbox-nav:hover {
    background: #164a9c;
    color: #fbbf24;
    transform: scale(1.1);
}

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
    outline: 3px solid #164a9c;
    outline-offset: 2px;
}

/* ===== GALLERY RESPONSIVE ===== */
@media (max-width: 1000px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 230px;
    }
}

@media (max-width: 620px) {
    .gallery-header h1 {
        font-size: 34px;
    }

    /* Mobile: 1 big featured photo, then 2 per row */
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(130px, 40vw, 220px);
        gap: 10px;
        margin-bottom: 40px;
        padding: 0 12px;
    }

    .gallery-item {
        border-width: 2px;
        border-radius: 14px;
    }

    /* first photo is the big featured one (full width); the rest stay 2 per row */
    .gallery-item:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: span 2;
    }

    /* if the remaining photos are an odd number, the last one fills its row (no empty hole) */
    .gallery-item:last-child:nth-child(even) {
        grid-column: 1 / -1;
    }

    .lightbox-stage {
        height: 45vh;
    }
}

/* Phones and touch screens: no text on the photo cards.
   Tap a photo -> the lightbox opens with the big image + title + description. */
@media (max-width: 620px), (hover: none) {
    .gallery-item::before,
    .gallery-item:hover::before,
    .gallery-item:focus-visible::before {
        opacity: 0;
        transform: none;
    }

    .gallery-item figcaption,
    .gallery-item:hover figcaption,
    .gallery-item:focus-visible figcaption {
        opacity: 0;
        transform: none;
        pointer-events: none;
    }

    .gallery-item:hover,
    .gallery-item:focus-visible {
        transform: none;
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 12px 30px rgba(5, 22, 80, 0.28),
            0 2px 6px rgba(5, 22, 80, 0.18);
    }

    .gallery-item:hover img,
    .gallery-item:focus-visible img {
        transform: none;
    }

    .gallery-item:active {
        transform: scale(0.97);
    }
}

/* Lightbox on small screens */
@media (max-width: 620px) {
    .lightbox {
        padding: 12px;
    }

    .lightbox-dialog {
        border-radius: 18px;
    }

    .lightbox-stage {
        height: min(50vh, 380px);
    }

    .lightbox-caption {
        padding: 14px 18px 18px;
    }

    .lightbox-caption h3 {
        font-size: 18px;
    }

    .lightbox-caption p {
        font-size: 14px;
    }

    .lightbox-nav {
        top: calc(25vh - 24px);
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item,
    .gallery-item img,
    .gallery-item::before,
    .gallery-item figcaption,
    .lightbox,
    .lightbox-dialog {
        animation: none;
        transition: none;
    }
}

/* =====================================================
 PRODUCTS PAGE
 ===================================================== */
body:has(.products-page) {
    min-height: 100vh;
    padding-top: 60px;
    margin: 0;
    position: relative;
    isolation: isolate;
    color: #ffffff;
    background: radial-gradient(ellipse 48% 75% at 92% 105%, rgba(255, 186, 8, 0.95) 0%, rgba(255, 186, 8, 0.35) 45%, transparent 75%),
        radial-gradient(ellipse 40% 55% at 68% 0%, rgba(90, 140, 235, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 45% 60% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
        linear-gradient(105deg, #0A2472 0%, #0e3190 30%, #2a56b8 52%, #d9a63a 78%, #FFBA08 100%);
    background-attachment: fixed;
}

body:has(.products-page)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 22, 80, 0.55) 0%, rgba(5, 22, 80, 0.25) 38%, rgba(5, 22, 80, 0) 66%);
}

body:has(.products-page)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
    mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
}

@media (min-width: 901px) {
    body:has(.products-page) {
        padding-top: 64px;
    }
}

body:has(.products-page) .products-header h1,
body:has(.products-page) .products-header p {
    color: #ffffff;
    text-shadow: 0 3px 14px rgba(5, 22, 80, 0.45);
}

.products-page {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 35px 30px 60px;
    box-sizing: border-box;
}

/* ---------- Header ---------- */
.products-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 26px;
    text-align: center;
}

.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 50px;
    background: #0A2472;
    border: 1px solid #FFBA08;
    color: #FFBA08;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.products-header h1 {
    position: relative;
    display: inline-block;
    margin: 0 0 14px;
    padding-bottom: 12px;
    color: #080616;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
}

.products-header h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #FFBA08;
}

.products-header p {
    max-width: 560px;
    margin: 0 auto;
    color: #080616;
    font-size: 17px;
    line-height: 1.7;
}

/* ---------- Trust strip ---------- */
.pp-perks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 34px;
    padding: 20px 16px;
    background: #fffdf6;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(5, 22, 80, 0.18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.pp-perk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: transparent;
    border-right: 1px solid #e3e7ef;
    transition: transform 0.25s ease, background 0.25s ease;
}

.pp-perk:last-child {
    border-right: none;
}

.pp-perk:hover {
    background: rgba(251, 191, 36, 0.12);
    border-radius: 10px;
}

.pp-perk-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FFBA08;
    color: #0A2472;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(255, 186, 8, 0.4);
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.pp-perk:hover .pp-perk-icon {
    transform: scale(1.08);
    background: #0A2472;
    color: #FFBA08;
}

.pp-perk strong {
    display: block;
    color: #12306b;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
}

.pp-perk > div > span {
    display: block;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.35;
}

/* ---------- Layout & categories ---------- */
.products-layout {
    display: block;
    width: 100%;
}

.products-page .products-content {
    min-width: 0;
    width: 100%;
}

.product-categories {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    width: 100%;
}

.category-btn {
    min-width: 110px;
    height: 38px;
    padding: 0 24px;
    border: none;
    border-radius: var(--btn-radius);
    background: #FFBA08;
    color: #0A2472;
    font-size: 16px;
    font-weight: 700;
    cursor: default;
    pointer-events: none; /* display only: not clickable, no hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ---------- Product grid & cards ---------- */
.products-page .products-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

.products-page .product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: 5px solid #FFBA08;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(5, 22, 80, 0.22);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.products-page .product-card:hover {
    transform: translateY(-8px);
    border-color: #0A2472;
    box-shadow: 0 18px 36px rgba(5, 22, 80, 0.32);
}

.products-page .product-image {
    position: relative;
    width: 100%;
    height: 250px;
    background: #fefce8;
    overflow: hidden;
}

.products-page .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.products-page .product-card:hover .product-image img {
    transform: scale(1.05);
}

.products-page .product-image .size-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 20px;
    background: #0A2472;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.products-page .product-image .wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #0A2472;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.products-page .product-image .wishlist:hover,
.products-page .product-image .wishlist.active {
    background: #ffffff;
    color: #ef4444;
    transform: scale(1.1);
}

/* Placeholder kapag walang picture */
.egg-placeholder-icon {
    display: none;
}

.products-page .product-image.egg-placeholder {
    background: linear-gradient(135deg, #fff7d1, #ffffff);
}

.products-page .product-image.egg-placeholder .egg-placeholder-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #164a9c;
    font-size: 64px;
    opacity: 0.85;
}

/* ---------- Product info ---------- */
.products-page .product-info {
    width: 100%;
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
}

.pp-category {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #fff3c4;
    color: #7a5200;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.products-page .product-info h3 {
    margin: 0 0 4px;
    color: #0A2472;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.pp-tagline {
    margin: 0 0 10px;
    color: #315d9c;
    font-size: 14px;
    font-style: italic;
    line-height: 1.4;
}

.products-page .product-price {
    margin: 0 0 12px;
    color: #164a9c;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.pp-description {
    margin: 0 0 14px;
    color: #475569;
    font-size: 14px;
    line-height: 1.65;
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Description is shortened (3 lines; 4 on mobile) with a "See more..." toggle.
   The toggle button is added by the small script at the bottom of products.php,
   and only when the text is really cut off. */
.products-page .pp-description:not(.is-open) {
    --pp-lines: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--pp-lines);
    line-clamp: var(--pp-lines);
    overflow: hidden;
}

.products-page .pp-description.has-more {
    margin-bottom: 4px;
}

.pp-more-btn {
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: #164a9c;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.pp-more-btn:hover {
    color: #0A2472;
    text-decoration: underline;
}

.pp-more-btn:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
    border-radius: 4px;
}

.pp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.pp-tags li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #eef4ff;
    color: #164a9c;
    font-size: 12px;
    font-weight: 700;
}

.pp-tags li i {
    color: #d99a00;
    font-size: 10px;
}

/* Expandable details */
.pp-details {
    margin: 0 0 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
}

.pp-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: #164a9c;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.pp-details summary::-webkit-details-marker {
    display: none;
}

.pp-details summary::after {
    content: "\25BE";
    transition: transform 0.25s ease;
}

.pp-details[open] summary::after {
    transform: rotate(180deg);
}

.pp-details summary:hover {
    background: #eef4ff;
}

.pp-details dl {
    padding: 4px 14px 14px;
}

.pp-details dt {
    margin-top: 10px;
    color: #0A2472;
    font-size: 13px;
    font-weight: 800;
}

.pp-details dt i {
    width: 18px;
    color: #d99a00;
}

.pp-details dd {
    margin: 2px 0 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

/* Quantity / tray controls (ginagamit ng script) */
.products-page .product-quantity {
    color: #6b7d95;
    font-size: 9px;
    margin: 0 0 5px;
    line-height: 1.25;
}

.products-page .product-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
}

.products-page .product-info .qty-control {
    width: 100%;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dce8f3;
    border-radius: 7px;
    overflow: hidden;
    box-sizing: border-box;
}

.products-page .product-info .qty-control button {
    width: 30px;
    height: 100%;
    flex: 0 0 30px;
    border: none;
    background: #f4f9fd;
    color: #164a9c;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.products-page .product-info .qty-control button:hover {
    background: #e7f2fb;
}

.products-page .product-info .qty-control input {
    width: 40px;
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    text-align: center;
    color: #164a9c;
    font-size: 10px;
    font-weight: 600;
    background: #ffffff;
}

.products-page .product-info .tray-selection {
    width: 100%;
    height: 27px;
    margin: 0;
    box-sizing: border-box;
}

.products-page .product-info .tray-select {
    display: block;
    width: 100%;
    height: 27px;
    padding: 0 8px;
    border: 1px solid #dce8f3;
    border-radius: 7px;
    background: #ffffff;
    color: #164a9c;
    font-size: 9px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
}

.products-page .product-info .tray-select:focus {
    border-color: #164a9c;
}

/* Buy Now (laging nasa ilalim ng card) */
.products-page .buy-now-btn {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 12px 16px;
    border: none;
    border-radius: var(--btn-radius);
    background: #fbbf24;
    color: #061a45;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.products-page .buy-now-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.products-page .buy-now-btn:hover::before {
    left: 160%;
}

.products-page .buy-now-btn:hover {
    background: #ffd04d;
    color: #061a45;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.45);
}

/* ---------- Shared section heading ---------- */
.pp-section {
    margin-top: 70px;
}

.pp-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}

.pp-tag {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 12px;
    border-radius: 30px;
    background: #0A2472;
    border: 1px solid #FFBA08;
    color: #FFBA08;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pp-heading h2 {
    position: relative;
    display: inline-block;
    margin: 0 0 14px;
    padding-bottom: 12px;
    color: #ffffff;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 800;
    text-shadow: 0 3px 14px rgba(5, 22, 80, 0.45);
}

.pp-heading h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #FFBA08;
}

.pp-heading p {
    max-width: 520px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
}

/* ---------- Why choose us ---------- */
.pp-reasons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.pp-reason {
    padding: 28px 20px;
    text-align: center;
    background: #ffffff;
    border-top: 5px solid #FFBA08;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(5, 22, 80, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}

.pp-reason:hover {
    transform: translateY(-6px);
    border-top-color: #0A2472;
    box-shadow: 0 16px 32px rgba(5, 22, 80, 0.28);
}

.pp-reason-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FFBA08;
    color: #0A2472;
    font-size: 22px;
    box-shadow: 0 4px 14px rgba(255, 186, 8, 0.45);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.pp-reason:hover .pp-reason-icon {
    background: #0A2472;
    color: #FFBA08;
    transform: scale(1.08);
}

.pp-reason h3 {
    margin: 0 0 8px;
    color: #0A2472;
    font-size: 1.1rem;
    font-weight: 800;
}

.pp-reason p {
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ---------- Serving ideas ---------- */
.pp-ideas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pp-idea {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.95);
    border-left: 5px solid #FFBA08;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(5, 22, 80, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pp-idea:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(5, 22, 80, 0.28);
}

.pp-idea-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #164a9c;
    color: #FFBA08;
    font-size: 20px;
}

.pp-idea h3 {
    margin: 0 0 4px;
    color: #0A2472;
    font-size: 1.05rem;
    font-weight: 800;
}

.pp-idea p {
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ---------- FAQ ---------- */
.pp-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}

.pp-faq-item {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(5, 22, 80, 0.16);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.pp-faq-item[open] {
    box-shadow: 0 12px 26px rgba(5, 22, 80, 0.26);
}

.pp-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    color: #0A2472;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.pp-faq-item summary::-webkit-details-marker {
    display: none;
}

.pp-faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff7d1;
    color: #164a9c;
    font-size: 18px;
    font-weight: 800;
    transition: background 0.25s ease, color 0.25s ease;
}

.pp-faq-item[open] summary::after {
    content: "\2212";
    background: #164a9c;
    color: #FFBA08;
}

.pp-faq-item p {
    padding: 0 20px 18px;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ---------- Call to action ---------- */
.pp-cta {
    margin-top: 70px;
    padding: 46px 28px;
    text-align: center;
    background: linear-gradient(135deg, rgba(10, 36, 114, 0.92) 0%, rgba(14, 49, 144, 0.92) 100%);
    border: 2px solid rgba(255, 186, 8, 0.6);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(5, 22, 80, 0.4);
}

.pp-cta h2 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
}

.pp-cta p {
    max-width: 560px;
    margin: 0 auto 26px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.02rem;
}

.pp-cta-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 190px;
    min-height: 50px;
    padding: 12px 28px;
    border: 2px solid #fbbf24;
    border-radius: var(--btn-radius);
    background: #fbbf24;
    color: #061a45;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.pp-cta-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.pp-cta-btn:hover::before {
    left: 160%;
}

.pp-cta-btn:hover {
    background: #ffd04d;
    border-color: #ffd04d;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.45);
}

.pp-cta-btn:focus-visible,
.pp-details summary:focus-visible,
.pp-faq-item summary:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* ---------- Products page responsive (isang block lang) ---------- */
@media (max-width: 1100px) {
    .products-page {
        padding-left: 20px;
        padding-right: 20px;
    }

    .products-page .product-image {
        height: 200px;
    }

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

    .pp-ideas {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .products-page .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 580px) {
    /* Mobile: product cards and "Why Yolkies" cards stay 2 per row, compact */
    .products-page .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .products-page .product-card {
        border-top-width: 4px;
        border-radius: 14px;
    }

    .products-page .product-card:hover {
        transform: translateY(-3px);
    }

    .products-page .product-image {
        height: 120px;
    }

    .products-page .product-image .size-badge {
        top: 8px;
        left: 8px;
        padding: 3px 9px;
        font-size: 10.5px;
    }

    .products-page .product-image .wishlist {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .products-page .product-info {
        padding: clamp(8px, 2.6vw, 12px) clamp(8px, 2.4vw, 10px);
    }

    .pp-category {
        margin-bottom: 5px;
        padding: 2px 7px;
        font-size: clamp(8px, 2.5vw, 10px);
        letter-spacing: 0.5px;
    }

    .products-page .product-info h3 {
        font-size: clamp(14px, 4.4vw, 18px);
        overflow-wrap: anywhere;
    }

    .pp-tagline {
        margin-bottom: 5px;
        font-size: clamp(10px, 3vw, 12.5px);
        line-height: 1.25;
    }

    .products-page .product-info .product-price {
        margin-bottom: 6px;
        font-size: clamp(16px, 5vw, 21px);
    }

    .products-page .pp-description:not(.is-open) {
        --pp-lines: 4;
    }

    .pp-more-btn {
        margin-bottom: 8px;
        font-size: clamp(10px, 3vw, 12px);
    }

    .pp-description {
        margin-bottom: 8px;
        font-size: clamp(10px, 2.9vw, 12.5px);
        line-height: 1.4;
        letter-spacing: -0.1px;
    }

    /* Tags: one swipeable row instead of stacking 3 rows (keeps the card short) */
    .pp-tags {
        flex-wrap: nowrap;
        gap: 4px;
        margin-bottom: 10px;
        padding-right: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    }

    .pp-tags::-webkit-scrollbar {
        display: none;
    }

    .pp-tags li {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .pp-tags li {
        gap: 3px;
        padding: 2px 6px;
        font-size: clamp(9px, 2.7vw, 11px);
    }

    .pp-tags li i {
        font-size: 8px;
    }

    .pp-details {
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .pp-details summary {
        padding: 6px 9px;
        font-size: clamp(10px, 3vw, 12px);
    }

    .pp-details dl {
        padding: 2px 9px 10px;
    }

    .pp-details dt,
    .pp-details dd {
        font-size: clamp(10px, 2.9vw, 12px);
        line-height: 1.4;
    }

    .products-page .buy-now-btn {
        padding: 8px;
        font-size: clamp(12px, 3.6vw, 14px);
    }

    .pp-perks {
        grid-template-columns: 1fr;
    }

    .pp-reasons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pp-reason {
        padding: 16px 10px;
        border-top-width: 4px;
        border-radius: 14px;
    }

    .pp-reason:hover {
        transform: translateY(-3px);
    }

    .pp-reason-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
        font-size: 17px;
    }

    .pp-reason:hover .pp-reason-icon {
        transform: none;
    }

    .pp-reason h3 {
        margin-bottom: 5px;
        font-size: 0.95rem;
        overflow-wrap: anywhere;
    }

    .pp-reason p {
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .pp-section,
    .pp-cta {
        margin-top: 50px;
    }

    .pp-cta {
        padding: 36px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .products-page .product-card,
    .pp-reason,
    .pp-idea,
    .pp-cta-btn,
    .pp-details summary::after {
        transition: none;
    }
}

/* ---------- Buy Now modal ---------- */
body.bn-lock {
    overflow: hidden;
}

.bn-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 20, 60, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.bn-overlay.show {
    opacity: 1;
    visibility: visible;
}

.bn-modal {
    width: min(640px, 100%);
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    padding-bottom: 8px;
    transform: translateY(14px) scale(0.98);
    transition: transform 0.22s ease;
}

.bn-overlay.show .bn-modal {
    transform: none;
}

.bn-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 26px 12px;
}

.bn-head h2 {
    margin: 0;
    color: #1a1a1a;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.bn-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #fff7d1;
    color: #164a9c;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.bn-close:hover {
    background: #164a9c;
    color: #fbbf24;
    transform: rotate(90deg);
}

.bn-pricebar {
    margin: 6px 26px 0;
    padding: 18px 24px;
    background: #fafafa;
    border-radius: 4px;
}

.bn-price {
    color: #164a9c;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
}

.bn-price-note {
    margin-top: 4px;
    color: #757575;
    font-size: 14px;
}

.bn-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 22px 26px 0;
}

.bn-label {
    padding-top: 12px;
    color: #757575;
    font-size: 16px;
}

.bn-value {
    padding-top: 12px;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 600;
}

.bn-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bn-opt {
    min-width: 84px;
    padding: 13px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    color: #222222;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.bn-opt:hover {
    border-color: #164a9c;
}

.bn-opt.selected {
    border-color: #164a9c;
    background: #eef4ff;
    color: #164a9c;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #164a9c;
}

.bn-opt:disabled {
    border-style: dashed;
    background: #f7f7f7;
    color: #b5b5b5;
    text-decoration: line-through;
    cursor: not-allowed;
}

.bn-size {
    min-width: 64px;
    text-align: center;
}

/* Size row (S / M / L / XL / J): always ONE line, buttons share the width */
.bn-options:has(.bn-size) {
    flex-wrap: nowrap;
    gap: 10px;
}

.bn-options:has(.bn-size) .bn-size {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

.bn-size-name {
    margin-top: 10px;
    color: #757575;
    font-size: 14px;
}

.bn-qty {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    margin-top: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.bn-qty button {
    width: 42px;
    height: 44px;
    border: none;
    background: #f5f7fb;
    color: #164a9c;
    font-size: 20px;
    cursor: pointer;
}

.bn-qty button:hover {
    background: #dbe6fb;
}

.bn-qty input {
    width: 56px;
    height: 44px;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    background: #ffffff;
}

.bn-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 26px;
    padding: 20px 26px 18px;
    border-top: 1px solid #eeeeee;
}

.bn-total {
    color: #757575;
    font-size: 15px;
}

.bn-total strong {
    margin-left: 6px;
    color: #0a2363;
    font-size: 24px;
}

.bn-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bn-btn {
    position: relative;
    overflow: hidden;
    padding: 13px 22px;
    border-radius: var(--btn-radius);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 1;
}

.bn-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.75),
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 2;
}

.bn-btn:hover::before {
    left: 150%;
    transition: left 0.75s ease-in-out;
}

.bn-btn:hover {
    transform: translateY(var(--btn-lift));
}

.bn-add {
    border: 2px solid #164a9c;
    background: #ffffff;
    color: #164a9c;
    transition: all 0.3s ease;
}

.bn-add:hover {
    background: #fbbf24;
    border-color: #fbbf24;
    color: #164a9c;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.45);
}

.bn-buy {
    border: 2px solid #fbbf24;
    background: #fbbf24;
    color: #061a45;
    transition: all 0.3s ease;
}

.bn-buy:hover {
    background: #ffd04d;
    border-color: #ffd04d;
    color: #061a45;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.45);
}

/* =====================================================
 CONTACT PAGE
 ===================================================== */
body:has(.contact-grid) {
    min-height: 100vh;
    padding-top: 60px;
    margin: 0;
    position: relative;
    isolation: isolate;
    color: #ffffff;
    background: radial-gradient(ellipse 48% 75% at 92% 105%, rgba(255, 186, 8, 0.95) 0%, rgba(255, 186, 8, 0.35) 45%, transparent 75%),
        radial-gradient(ellipse 40% 55% at 68% 0%, rgba(90, 140, 235, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 45% 60% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
        linear-gradient(105deg, #0A2472 0%, #0e3190 30%, #2a56b8 52%, #d9a63a 78%, #FFBA08 100%);
    background-attachment: fixed;
}

body:has(.contact-grid)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 22, 80, 0.55) 0%, rgba(5, 22, 80, 0.25) 38%, rgba(5, 22, 80, 0) 66%);
}

body:has(.contact-grid)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
    mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
}

@media (min-width: 901px) {
    body:has(.contact-grid) {
        padding-top: 64px;
    }
}

.contact-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.btn-contact-submit,
.btn-contact-reset {
    border-radius: var(--btn-radius);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    width: 190px;
    max-width: 100%;
    min-height: 50px;
    padding: 12px 28px;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-contact-submit::before,
.btn-contact-reset::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.btn-contact-submit:hover::before,
.btn-contact-reset:hover::before {
    left: 160%;
}

.btn-contact-submit:focus-visible,
.btn-contact-reset:focus-visible {
    outline: 3px solid #164a9c;
    outline-offset: 2px;
}

.btn-contact-submit {
    color: #061a45;
    background: #fbbf24;
    border: 2px solid #fbbf24;
}

.btn-contact-submit:hover {
    color: #061a45;
    background: #ffd04d;
    border-color: #ffd04d;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.45);
}

.btn-contact-reset {
    color: #000080;
    background: transparent;
    border: 2px solid #000080;
}

.btn-contact-reset:hover {
    color: #ffffff;
    background: #164a9c;
    border-color: #164a9c;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(22, 74, 156, 0.45);
}

.contact-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
}

.contact-info-card {
    background: white;
    padding: 26px;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    color: #164a9c;
}

.contact-info-card h3 {
    color: var(--blue-dark);
    margin-bottom: 20px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.contact-item .icon {
    color: #164a9c;
    font-size: 19px;
    margin-top: 2px;
    min-width: 22px;
}

.contact-item .details label {
    display: block;
    color: #164a9c;
    font-weight: 700;
    margin-bottom: 2px;
}

.contact-item .details p {
    margin: 0;
    color: #0a2363;
    font-size: 0.95rem;
    line-height: 1.4;
}

.contact-form-card {
    background: white;
    padding: 26px;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    color: #0a2363;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    color: #0a2363;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group input,
.form-group textarea {
    width: 100%;
}

.map-container {
    margin-top: 32px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 4px solid var(--yellow-primary);
}

.map-container iframe {
    width: 100%;
    height: 350px;
    border: none;
}

.contact-page {
    max-width: 1080px;
    padding-bottom: 70px;
}

.contact-page .page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0 30px;
    text-align: center;
}

.contact-page .breadcrumb {
    color: rgba(255, 255, 255, 0.85);
}

.contact-page .page-header h1 {
    color: #ffffff;
    font-size: 38px;
    border-bottom: 4px solid #ffbd18;
    text-shadow: 0 3px 14px rgba(5, 22, 80, 0.45);
}

.contact-page .page-sub {
    max-width: 520px;
    margin: 12px auto 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    text-shadow: 0 2px 8px rgba(5, 22, 80, 0.4);
}

.contact-page .contact-grid {
    grid-template-columns: 340px 1fr;
    gap: 28px;
    align-items: stretch;
}

/* ----- info card (navy, so it contrasts with the white form) ----- */
.contact-page .contact-info-card {
    padding: 32px 28px;
    border-radius: 20px;
    color: #ffffff;
    background: radial-gradient(ellipse 80% 40% at 100% 100%, rgba(255, 186, 8, 0.28) 0%, transparent 70%),
        linear-gradient(160deg, #0A2472 0%, #0e3190 70%, #1c47a8 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 44px rgba(5, 22, 80, 0.35);
}

.contact-page .contact-info-card h3 {
    margin-bottom: 26px;
    font-size: 24px;
    color: #ffffff;
}

.contact-page .contact-item {
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.contact-page .contact-item:last-child {
    margin-bottom: 0;
}

.contact-page .contact-item .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 14px;
    background: #ffbd18;
    color: #0A2472;
    font-size: 18px;
}

.contact-page .contact-item .details label {
    margin-bottom: 2px;
    color: #ffd978;
    font-size: 13px;
    font-weight: 700;
}

.contact-page .contact-item .details p {
    color: #ffffff;
    font-size: 15.5px;
    overflow-wrap: anywhere;
}

.contact-page .contact-item .details a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-page .contact-item .details a:hover {
    color: #ffd978;
    border-color: #ffd978;
}

.contact-page .contact-item .details a:focus-visible {
    outline: 2px solid #ffbd18;
    outline-offset: 3px;
}

/* ----- form card ----- */
.contact-page .contact-form-card {
    padding: 34px 36px 32px;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(5, 22, 80, 0.28);
}

.contact-page .form-title {
    margin: 0 0 4px;
    font-size: 24px;
    color: #0A2472;
}

.contact-page .form-sub {
    margin: 0 0 24px;
    font-size: 14.5px;
    color: #64748b;
}

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

.contact-page .form-group label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #0a2363;
}

.contact-page .form-group input,
.contact-page .form-group textarea {
    display: block;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    background: #f7f9fe;
    border: 1.5px solid #d6deef;
    border-radius: 12px;
    color: #1a1a1a;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-page .form-group textarea {
    height: auto;
    min-height: 140px;
    padding: 14px 16px;
    line-height: 1.5;
    resize: vertical;
}

.contact-page .form-group input::placeholder,
.contact-page .form-group textarea::placeholder {
    color: #94a3b8;
}

.contact-page .form-group input:hover,
.contact-page .form-group textarea:hover {
    border-color: #b6c4e4;
}

.contact-page .form-group input:focus,
.contact-page .form-group textarea:focus {
    background: #ffffff;
    border-color: #0e3190;
    box-shadow: 0 0 0 4px rgba(14, 49, 144, 0.14);
}

.contact-page .contact-buttons {
    justify-content: flex-end;
    margin-top: 6px;
}

.contact-page .btn-contact-submit,
.contact-page .btn-contact-reset {
    width: 170px;
}

.contact-page .btn-contact-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ----- map ----- */
.contact-page .map-container {
    margin-top: 28px;
    padding: 8px;
    border: none;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(5, 22, 80, 0.28);
}

.contact-page .map-container iframe {
    display: block;
    height: 380px;
    border-radius: 14px;
}

/* =====================================================
 ACCOUNT PAGE
 ===================================================== */
.acct-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    border-top: 5px solid #ffbd18;
}

.acct-avatar {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(ellipse 48% 60% at 95% 100%, rgba(255, 186, 8, 0.85) 0%, rgba(255, 186, 8, 0.30) 45%, transparent 75%),
        radial-gradient(ellipse 45% 50% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
        linear-gradient(135deg, #0A2472 0%, #0e3190 32%, #2a56b8 55%, #d9a63a 82%, #FFBA08 100%);
    border: 4px solid #ffbd18;
    box-shadow: 0 8px 20px rgba(10, 36, 114, 0.3);
    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.acct-info {
    flex: 1;
    min-width: 0;
}

.acct-info h1 {
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.acct-info p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 14px;
    color: #475569;
    overflow-wrap: anywhere;
}

.acct-info p i {
    width: 16px;
    text-align: center;
    color: #ffbd18;
    font-size: 14px;
}

.acct-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 20px;
    border: 2px solid #dc2626;
    border-radius: var(--btn-radius);
    background: transparent;
    color: #dc2626;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.acct-logout:hover {
    background: #dc2626;
    color: #ffffff;
    transform: translateY(var(--btn-lift));
}

.acct-logout:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.acct-logout:focus-visible {
    outline: 2px solid #0A2472;
    outline-offset: 2px;
}

.acct-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 4px 12px;
    font-size: 22px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(5, 22, 80, 0.45);
}

.acct-section-title::before {
    content: "";
    width: 5px;
    height: 24px;
    border-radius: 3px;
    background: #ffbd18;
}

.acct-section-title + .oh-head {
    padding: 16px 20px;
}

/* =====================================================
 ORDER HISTORY PAGE
 ===================================================== */
.oh-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 16px 60px;
}

.oh-head {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 10px 28px rgba(5, 22, 80, 0.18);
    margin-bottom: 18px;
}

.oh-head h1 {
    font-size: 26px;
    color: #0A2472;
    margin-bottom: 4px;
}

.oh-head p {
    color: #64748b;
    font-size: 14px;
}

.oh-note {
    margin-top: 10px;
    font-size: 12.5px;
    color: #92400e;
    background: #fef3c7;
    border-radius: 8px;
    padding: 6px 10px;
    display: inline-block;
}

.oh-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.oh-filter {
    border: none;
    border-radius: var(--btn-radius);
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.85);
    color: #0A2472;
    transition: background 0.2s ease, color 0.2s ease;
}

.oh-filter:hover {
    background: #ffffff;
}

.oh-filter.active {
    background: #0A2472;
    color: #ffffff;
}

.oh-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.oh-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 10px 28px rgba(5, 22, 80, 0.15);
}

.oh-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.oh-id {
    font-size: 17px;
    font-weight: 800;
    color: #0A2472;
}

.oh-date {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

.oh-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}

.oh-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.oh-badge.processing {
    background: #dbeafe;
    color: #1e40af;
}

.oh-badge.shipping {
    background: #e0e7ff;
    color: #3730a3;
}

.oh-badge.delivered {
    background: #dcfce7;
    color: #166534;
}

.oh-badge.cancelled {
    background: #fee2e2;
    color: #991b1b;
}

/* ----- progress tracker ----- */
.oh-steps {
    display: flex;
    margin: 20px 0 6px;
}

.oh-step {
    flex: 1;
    position: relative;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
}

.oh-step::before {
    content: "";
    position: absolute;
    top: 11px;
    left: -50%;
    width: 100%;
    height: 3px;
    background: #e2e8f0;
    z-index: 0;
}

.oh-step:first-child::before {
    display: none;
}

.oh-dot {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.oh-step.done,
.oh-step.current {
    color: #0A2472;
}

.oh-step.done::before,
.oh-step.current::before {
    background: #ffbd18;
}

.oh-step.done .oh-dot {
    background: #ffbd18;
    color: #24006b;
}

.oh-step.current .oh-dot {
    background: #0A2472;
    box-shadow: 0 0 0 4px rgba(10, 36, 114, 0.18);
}

.oh-cancelled-msg {
    margin: 16px 0 4px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 13.5px;
    font-weight: 600;
}

/* ----- summary + details ----- */
.oh-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.oh-summary strong {
    color: #0A2472;
    font-size: 18px;
}

.oh-summary span {
    color: #64748b;
    font-size: 13px;
}

.oh-details {
    margin-top: 10px;
}

.oh-details summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e40af;
    list-style: none;
}

.oh-details summary::-webkit-details-marker {
    display: none;
}

.oh-details summary::after {
    content: " \25BE";
}

.oh-details[open] summary::after {
    content: " \25B4";
}

.oh-items {
    margin-top: 10px;
}

.oh-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #0f172a;
}

.oh-item small {
    display: block;
    color: #64748b;
    font-size: 12.5px;
}

.oh-item strong {
    white-space: nowrap;
    color: #0A2472;
}

.oh-meta {
    margin-top: 10px;
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}

.oh-empty {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    color: #475569;
    box-shadow: 0 10px 28px rgba(5, 22, 80, 0.15);
}

.oh-empty i {
    font-size: 40px;
    color: #ffbd18;
    margin-bottom: 12px;
}

.oh-empty h3 {
    color: #0A2472;
    margin-bottom: 6px;
}

.oh-empty a {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 22px;
    border-radius: var(--btn-radius);
    background: #0A2472;
    color: #ffffff;
    font-weight: 700;
}

/* =====================================================
 CART PAGE
 ===================================================== */
body:has(.cart-page-v2) {
    min-height: 100vh;
    padding-top: 60px;
    margin: 0;
    position: relative;
    isolation: isolate;
    color: #ffffff;
    background: radial-gradient(ellipse 48% 75% at 92% 105%, rgba(255, 186, 8, 0.95) 0%, rgba(255, 186, 8, 0.35) 45%, transparent 75%),
        radial-gradient(ellipse 40% 55% at 68% 0%, rgba(90, 140, 235, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 45% 60% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
        linear-gradient(105deg, #0A2472 0%, #0e3190 30%, #2a56b8 52%, #d9a63a 78%, #FFBA08 100%);
    background-attachment: fixed;
}

body:has(.cart-page-v2)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 22, 80, 0.55) 0%, rgba(5, 22, 80, 0.25) 38%, rgba(5, 22, 80, 0) 66%);
}

body:has(.cart-page-v2)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
    mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
}

@media (min-width: 901px) {
    body:has(.cart-page-v2) {
        padding-top: 64px;
    }
}

.products-page .product-info .add-cart-btn {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 29px;
    border: 2px solid #fbbf24;
    border-radius: var(--btn-radius);
    background: #fbbf24;
    color: #164a9c;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.products-page .product-info .add-cart-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.75),
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

.products-page .product-info .add-cart-btn:hover::before {
    left: 130%;
    transition: left 0.7s ease;
}

.products-page .product-info .add-cart-btn:hover {
    background: #ffd04d;
    border-color: #ffd04d;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.45);
}

.products-page .product-info .add-cart-btn:focus-visible {
    outline: 3px solid #164a9c;
    outline-offset: 2px;
}

.products-page .product-info .add-cart-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.products-page .product-info .add-cart-btn:disabled:hover {
    background: #fbbf24;
    border-color: #fbbf24;
    transform: none;
    box-shadow: none;
}

.products-page .product-info .add-cart-btn:disabled:hover::before {
    left: -80%;
}

.products-page .product-info .add-cart-btn i {
    margin-right: 4px;
}

#cart-item-count {
    color: #315d9c;
    font-size: 15px;
    margin: 0;
}

.clear-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: #e53935;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0;
    white-space: nowrap;
}

.clear-cart-btn:hover {
    color: #b71c1c;
}

/* =====================================================
 CART ITEMS
 ===================================================== */
.cart-items {
    width: 100%;
    box-sizing: border-box;
}

.cart-item {
    width: 100%;
    display: grid;
    grid-template-columns: 90px minmax(150px, 1.5fr) 110px 100px 110px;
    align-items: center;
    gap: 16px;
    padding: 15px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #e1edf8;
    border-radius: 12px;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cart-item:hover {
    box-shadow: 0 5px 15px rgba(22, 74, 156, 0.10);
    transform: translateY(-1px);
}

.cart-item-image {
    width: 90px;
    height: 75px;
    object-fit: cover;
    border-radius: 9px;
    display: block;
}

.product-tag {
    display: inline-flex;
    align-items: center;
    background: #e2f1ff;
    color: #164a9c;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
}

.item-price {
    color: #164a9c;
}

.item-price strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
}

.item-price small {
    color: #315d9c;
    font-size: 11px;
}

.quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 110px;
    height: 34px;
    border: 1px solid #d5e5f5;
    border-radius: 9px;
    overflow: hidden;
    background: #f8fbff;
}

.quantity-control button {
    width: 32px;
    height: 34px;
    border: none;
    background: #eef6ff;
    color: #164a9c;
    font-size: 17px;
    cursor: pointer;
}

.quantity-control button:hover {
    background: #dcecff;
}

.quantity-control span {
    min-width: 30px;
    text-align: center;
    color: #164a9c;
    font-size: 14px;
    font-weight: 600;
}

.item-total {
    text-align: right;
}

.item-total strong {
    display: block;
    color: #164a9c;
    font-size: 18px;
    margin-bottom: 7px;
}

.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.summary-total span {
    color: #164a9c;
    font-size: 25px;
    font-weight: 700;
}

.summary-total strong {
    color: #164a9c;
    font-size: 29px;
    font-weight: 700;
}

.checkout-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 52px;
    border: 2px solid #fbbf24;
    border-radius: var(--btn-radius);
    background: #fbbf24;
    color: #164a9c;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    box-sizing: border-box;
    transition: transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.checkout-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.75),
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

.checkout-btn:hover::before {
    left: 130%;
    transition: left 0.7s ease;
}

.checkout-btn:hover {
    background: #ffd04d;
    border-color: #ffd04d;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.45);
}

.checkout-btn:focus-visible {
    outline: 3px solid #164a9c;
    outline-offset: 3px;
}

.checkout-btn i:first-child {
    font-size: 15px;
}

.checkout-btn i:last-child {
    font-size: 13px;
}

.secure-checkout {
    width: 100%;
    margin-top: 16px;
    background: #0a2363;
    border-radius: 11px;
    padding: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
}

.secure-checkout > i {
    color: #164a9c;
    font-size: 23px;
    flex-shrink: 0;
}

.secure-checkout strong {
    display: block;
    color: #164a9c;
    font-size: 14px;
    margin-bottom: 3px;
}

.secure-checkout span {
    display: block;
    color: #315d9c;
    font-size: 12px;
    line-height: 1.4;
}

/* =========================================================
 EGGTRADE CART V2
 ========================================================= */
.cart-page-v2 {
    width: 100%;
    max-width: 1280px;
    margin: 30px auto 60px;
    padding: 0 24px;
    box-sizing: border-box;
    min-height: calc(100vh - 350px);
}

.cart-layout-v2 {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 2.05fr) minmax(300px, 0.95fr);
    gap: 28px;
    align-items: start;
}

.cart-container-v2 {
    width: 100%;
    min-width: 0;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 5px 18px rgba(22, 74, 156, 0.09);
    overflow: hidden;
}

.cart-header-v2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px 25px;
    box-sizing: border-box;
    border-bottom: 1px solid #e6edf5;
}

.cart-header-v2 h2 {
    margin: 0 0 8px;
    color: #1B2CC1;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
}

.cart-header-v2 a {
    display: block;
    color: #164a9c;
    text-decoration: none;
}

.cart-header-v2 a > i {
    display: block;
    margin-top: 8px;
    color: #1B2CC1;
    font-size: 24px;
}

.cart-header-v2 p {
    margin: 0;
    color: #315d9c;
    font-size: 15px;
}

.cart-header-v2 .clear-cart-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 18px;
    border: 1px solid #f0bebe;
    border-radius: var(--btn-radius);
    background: #fffafa;
    color: #dc2626;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-header-v2 .clear-cart-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.cart-header-v2 .clear-cart-btn:hover::before {
    left: 160%;
}

.cart-header-v2 .clear-cart-btn:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}

.cart-header-v2 .clear-cart-btn:focus-visible {
    outline: 3px solid #dc2626;
    outline-offset: 2px;
}

.cart-page-v2 .cart-items {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
}

.cart-page-v2 .cart-item-v2 {
    width: 100%;
    min-height: 125px;
    display: grid;
    grid-template-columns: 82px minmax(170px, 1fr) 100px 110px 105px;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #e6edf5;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    transform: none;
    box-sizing: border-box;
}

.cart-page-v2 .cart-item-v2:hover {
    background: #fcfdff;
    box-shadow: none;
    transform: none;
}

.cart-page-v2 .cart-item-v2 > .cart-product-image,
.cart-page-v2 .cart-item-v2 > .product-image {
    grid-column: 1;
    grid-row: 1;
    width: 82px;
    height: 82px;
    min-width: 82px;
    min-height: 82px;
    max-width: 82px;
    max-height: 82px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: block;
    position: relative;
    background: #fff8d9;
    border: 1px solid #e8eef5;
    border-radius: 10px;
    box-sizing: border-box;
}

.cart-page-v2 .cart-item-v2 > .cart-product-image img,
.cart-page-v2 .cart-item-v2 > .product-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 9px;
    box-sizing: border-box;
}

.cart-page-v2 .cart-item-v2 > .cart-product-info,
.cart-page-v2 .cart-item-v2 > .product-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    box-sizing: border-box;
}

.cart-page-v2 .cart-product-info h3 {
    margin: 0 0 6px;
    color: #164a9c;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
}

.cart-page-v2 .cart-product-info p {
    margin: 2px 0;
    color: #315d9c;
    font-size: 13px;
    line-height: 1.35;
}

.cart-page-v2 .cart-product-info p strong {
    font-weight: 700;
}

.cart-page-v2 .cart-product-info .product-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 20px;
    background: #eaf4ff;
    color: #164a9c;
    font-size: 11px;
    font-weight: 700;
}

.cart-page-v2 .cart-item-price-v2,
.cart-page-v2 .item-price {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: right;
    color: #164a9c;
    background: transparent;
    box-sizing: border-box;
}

.cart-page-v2 .cart-item-price-v2 strong {
    display: block;
    margin: 0;
    color: #164a9c;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.cart-page-v2 .cart-item-price-v2 small {
    display: block;
    margin-top: 3px;
    color: #6b7280;
    font-size: 10px;
    white-space: nowrap;
}

.cart-page-v2 .cart-quantity-control,
.cart-page-v2 .quantity-control {
    grid-column: 4;
    grid-row: 1;
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #d8e5f2;
    border-radius: 9px;
    background: #ffffff;
    box-sizing: border-box;
}

.cart-page-v2 .cart-quantity-control button,
.cart-page-v2 .quantity-control button {
    width: 32px;
    min-width: 32px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #f3f8fd;
    color: #164a9c;
    font-size: 18px;
    font-weight: 800;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
}

.cart-page-v2 .cart-quantity-control button:hover,
.cart-page-v2 .quantity-control button:hover {
    background: #e5f0fa;
}

.cart-page-v2 .cart-quantity-control span,
.cart-page-v2 .quantity-control span {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #164a9c;
    font-size: 14px;
    font-weight: 700;
}

.cart-page-v2 .cart-item-total-v2,
.cart-page-v2 .item-total {
    grid-column: 5;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    text-align: right;
    background: transparent;
    box-sizing: border-box;
}

.cart-page-v2 .cart-item-total-v2 strong {
    display: block;
    color: #164a9c;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.cart-page-v2 .cart-item-total-v2 .remove-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #fecaca;
    border-radius: var(--btn-radius);
    background: #fff5f5;
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cart-page-v2 .cart-item-total-v2 .remove-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.cart-page-v2 .cart-item-total-v2 .remove-btn:hover::before {
    left: 160%;
}

.cart-page-v2 .cart-item-total-v2 .remove-btn:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    transform: translateY(var(--btn-lift));
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.3);
}

.cart-page-v2 .cart-item-total-v2 .remove-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

.cart-page-v2 .cart-item-total-v2 .remove-btn:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

.cart-bottom-v2 {
    padding: 20px 30px 28px;
    border-top: 1px solid #e6edf5;
    background: #ffffff;
    box-sizing: border-box;
}

.cart-bottom-v2 .continue-shopping {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 17px;
    border: 2px solid #283cd4;
    border-radius: var(--btn-radius);
    background: #ffffff;
    color: #283cd4;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-bottom-v2 .continue-shopping::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.cart-bottom-v2 .continue-shopping:hover::before {
    left: 160%;
}

.cart-bottom-v2 .continue-shopping:hover {
    background: #283cd4;
    color: #ffffff;
    border-color: #283cd4;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(40, 60, 212, 0.4);
}

.cart-bottom-v2 .continue-shopping:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(40, 60, 212, 0.25);
}

.cart-bottom-v2 .continue-shopping:focus-visible {
    outline: 3px solid #283cd4;
    outline-offset: 2px;
}

.cart-page-v2 .empty-cart {
    min-height: 250px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 20px;
    text-align: center;
    box-sizing: border-box;
}

.cart-page-v2 .empty-icon {
    margin-bottom: 12px;
    color: #164a9c;
    font-size: 42px;
}

.cart-page-v2 .empty-cart h3 {
    margin: 0 0 7px;
    color: #164a9c;
    font-size: 22px;
}

.cart-page-v2 .empty-cart p {
    margin: 0 0 17px;
    color: #315d9c;
}

.cart-page-v2 .shop-now-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 2px solid #fbbf24;
    border-radius: var(--btn-radius);
    background: #fbbf24;
    color: #164a9c;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-page-v2 .shop-now-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.cart-page-v2 .shop-now-btn:hover::before {
    left: 160%;
}

.cart-page-v2 .shop-now-btn:hover {
    background: #ffd04d;
    border-color: #ffd04d;
    color: #164a9c;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.45);
}

.cart-page-v2 .shop-now-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.cart-page-v2 .shop-now-btn:focus-visible {
    outline: 3px solid #164a9c;
    outline-offset: 2px;
}

.summary-container-v2 {
    width: 100%;
    min-width: 0;
    padding: 28px 30px 30px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 5px 18px rgba(22, 74, 156, 0.09);
    box-sizing: border-box;
}

.summary-container-v2 h2 {
    margin: 0 0 25px;
    color: #164a9c;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
}

.summary-container-v2 .summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid #dce8f5;
    color: #164a9c;
    font-size: 15px;
}

.summary-container-v2 .summary-row strong {
    color: #164a9c;
    font-size: 16px;
    white-space: nowrap;
}

.summary-container-v2 .delivery-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    padding: 13px;
    border-radius: 12px;
    background: #fff8d9;
    color: #315d9c;
    box-sizing: border-box;
}

.summary-container-v2 .delivery-icon {
    flex: 0 0 auto;
    font-size: 23px;
}

.summary-container-v2 .delivery-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.summary-container-v2 .summary-divider {
    width: 100%;
    height: 1px;
    margin: 5px 0 20px;
    background: #d9e8f7;
}

.summary-container-v2 .total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.summary-container-v2 .total-row span {
    color: #164a9c;
    font-size: 25px;
    font-weight: 800;
}

.summary-container-v2 .total-row strong {
    color: #164a9c;
    font-size: 29px;
    font-weight: 800;
    white-space: nowrap;
}

.checkout-btn,
.summary-container-v2 .checkout-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.checkout-btn::before,
.summary-container-v2 .checkout-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.checkout-btn:hover::before,
.summary-container-v2 .checkout-btn:hover::before {
    left: 160%;
}

.summary-container-v2 .secure-checkout {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 13px;
    border-radius: 11px;
    background: #eef8ff;
    box-sizing: border-box;
}

.summary-container-v2 .secure-icon {
    flex: 0 0 auto;
    font-size: 23px;
    color: #315d9c;
}

.summary-container-v2 .secure-checkout strong {
    display: block;
    margin-bottom: 3px;
    color: #315d9c;
    font-size: 14px;
}

.summary-container-v2 .secure-checkout p {
    margin: 0;
    color: #315d9c;
    font-size: 12px;
    line-height: 1.4;
}

.cart-page-v2 + #footer-placeholder {
    width: 100%;
}

/* =========================================================
 NOTIFICATIONS (TOASTS)
 ========================================================= */
.notification-stack {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(380px, calc(100vw - 30px));
    pointer-events: none;
}

.notification {
    --notification-accent: #22c55e;
    --notification-icon: #164a9c;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px 16px 18px;
    overflow: hidden;
    background: #ffffff;
    border-left: 5px solid var(--notification-accent);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.hide {
    opacity: 0;
    transform: translateX(30px);
}

.notification-success {
    --notification-accent: #22c55e;
    --notification-icon: #16a34a;
}

.notification-error {
    --notification-accent: #ef4444;
    --notification-icon: #dc2626;
}

.notification-warning {
    --notification-accent: #f59e0b;
    --notification-icon: #d97706;
}

.notification-info {
    --notification-accent: #3b82f6;
    --notification-icon: #2563eb;
}

.notification-icon {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
    color: var(--notification-icon);
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    display: block;
    margin-bottom: 3px;
    color: #164a9c;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.notification-message {
    margin: 0;
    color: #315d9c;
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
}

.notification-close {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.notification-close:hover {
    background: #eef2ff;
    color: #164a9c;
}

.notification-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--notification-accent);
    opacity: 0.55;
    transform-origin: left;
    animation: notificationProgress var(--notification-duration, 3500ms) linear forwards;
}

.notification.paused .notification-progress {
    animation-play-state: paused;
}

@keyframes notificationProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* =====================================================
 PLACE ORDER MODAL  (responsive: centered card on desktop,
 bottom sheet on phones, sticky total + button)
 ===================================================== */
#placeOrderModal {
    --po-pad: 30px;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(8, 20, 45, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    overscroll-behavior: contain;
}

.po-box {
    position: relative;
    width: min(650px, 100%);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--po-pad);
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    animation: poPop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes poPop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes poSheet {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

/* ----- X button: stays visible while the form scrolls ----- */
.po-close {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: none;
    width: 40px;
    height: 40px;
    margin: calc(var(--po-pad) * -0.5) calc(var(--po-pad) * -0.5) -40px auto;
    border: none;
    border-radius: 50%;
    background: #fff7d1;
    color: #164a9c;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(22, 74, 156, 0.18);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.po-close:hover {
    background: #164a9c;
    color: #fbbf24;
    transform: rotate(90deg);
}

.po-close:focus-visible {
    outline: 3px solid #164a9c;
    outline-offset: 2px;
}

/* ----- Header ----- */
.po-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #164a9c;
    color: #fbbf24;
    font-size: 32px;
    box-shadow: 0 8px 18px rgba(22, 74, 156, 0.3);
}

.po-title {
    margin: 0 0 10px;
    color: #164a9c;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
}

.po-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 4px;
    background: #fbbf24;
}

.po-subtitle {
    margin: 16px 0 18px;
    color: #315d9c;
    font-size: 15px;
    text-align: center;
}

/* ----- Order preview ----- */
.po-preview {
    margin-bottom: 20px;
    padding: 14px;
    background: #f6f9ff;
    border: 1px solid #dbeaf6;
    border-radius: 12px;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.po-preview-title {
    margin-bottom: 6px;
    color: #164a9c;
    font-size: 16px;
    font-weight: 800;
}

.po-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

.po-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.po-item-info {
    min-width: 0;
    flex: 1;
}

.po-item-name {
    color: #164a9c;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.po-item-meta {
    margin-top: 2px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.po-item-price {
    flex: none;
    color: #164a9c;
    white-space: nowrap;
}

/* ----- Form ----- */
.po-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.po-full {
    grid-column: 1 / -1;
}

.po-field {
    min-width: 0;
}

.po-field label {
    display: block;
    margin-bottom: 6px;
    color: #164a9c;
    font-size: 14px;
    font-weight: 700;
}

.po-field input,
.po-field select,
.po-field textarea {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #164a9c;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.po-field input::placeholder,
.po-field textarea::placeholder {
    color: #94a3b8;
}

.po-field textarea {
    resize: vertical;
}

.po-field input:focus,
.po-field select:focus,
.po-field textarea:focus {
    border-color: #164a9c;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35);
}

.po-field input:user-invalid,
.po-field select:user-invalid,
.po-field textarea:user-invalid {
    border-color: #dc2626;
}

/* ----- Footer: total + button (sticks to the bottom while scrolling) ----- */
.po-footer {
    position: sticky;
    bottom: calc(var(--po-pad) * -1);
    z-index: 2;
    margin: 20px calc(var(--po-pad) * -1) calc(var(--po-pad) * -1);
    padding: 14px var(--po-pad) calc(14px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 16px -10px rgba(22, 74, 156, 0.25);
}

#placeOrderTotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    color: #164a9c;
    font-size: 20px;
    font-weight: 800;
}

/* ----- PLACE ORDER button (yellow + shine) ----- */
.po-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
    border: 2px solid #fbbf24;
    border-radius: var(--btn-radius);
    background: #fbbf24;
    color: #164a9c;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
}

.po-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.po-submit:hover::before {
    left: 160%;
}

.po-submit:hover {
    background: #ffd04d;
    border-color: #ffd04d;
    color: #164a9c;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(251, 191, 36, 0.45);
}

.po-submit:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.po-submit:focus-visible {
    outline: 3px solid #164a9c;
    outline-offset: 2px;
}

/* ----- Phones: bottom sheet ----- */
@media (max-width: 600px) {
    #placeOrderModal {
        --po-pad: 18px;
        align-items: flex-end;
        padding: 0;
    }

    .po-box {
        width: 100%;
        max-height: 94vh;
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
        padding-top: 22px;
        animation: poSheet 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* little grab-handle look */
    .po-box::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        margin: -12px auto 14px;
        border-radius: 4px;
        background: #cbd5e1;
    }

    .po-close {
        margin: -6px -4px -40px auto;
        top: 6px;
    }

    .po-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 10px;
        border-radius: 16px;
        font-size: 24px;
    }

    .po-title {
        font-size: 21px;
    }

    .po-subtitle {
        margin: 12px 0 14px;
        font-size: 14px;
    }

    .po-preview {
        max-height: 180px;
        padding: 12px;
        margin-bottom: 16px;
    }

    .po-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* 16px stops iOS Safari from zooming into the field */
    .po-field input,
    .po-field select,
    .po-field textarea {
        font-size: 16px;
    }

    .po-footer {
        margin-top: 16px;
    }

    #placeOrderTotal {
        font-size: 18px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    #placeOrderModal { --po-pad: 14px; }
    .po-title { font-size: 19px; }
    .po-item { gap: 8px; }
}

/* Landscape phones: very little height, so hide the big icon */
@media (max-height: 500px) {
    .po-icon { display: none; }
    .po-subtitle { margin: 8px 0 12px; }
    .po-preview { max-height: 120px; }
    .po-box { max-height: 100vh; max-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
    .po-box { animation: none; }
}

/* =========================================================
 CONFIRM DIALOG
 ========================================================= */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.confirm-overlay.show {
    opacity: 1;
}

.confirm-dialog {
    width: min(400px, 100%);
    padding: 28px 26px 22px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    text-align: center;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.2s ease;
}

.confirm-overlay.show .confirm-dialog {
    transform: translateY(0) scale(1);
}

.confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #e8efff;
    color: #164a9c;
    font-size: 24px;
}

.confirm-warning .confirm-icon {
    background: #fef3c7;
    color: #d97706;
}

.confirm-danger .confirm-icon {
    background: #fee2e2;
    color: #dc2626;
}

.confirm-title {
    margin-bottom: 6px;
    color: #164a9c;
    font-size: 20px;
}

.confirm-message {
    margin-bottom: 22px;
    color: #315d9c;
    font-size: 14px;
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    gap: 10px;
}

.confirm-btn {
    flex: 1;
    padding: 11px 14px;
    border: 2px solid transparent;
    border-radius: var(--btn-radius);
    font-size: 14px;
}

.confirm-cancel {
    background: #ffffff;
    border-color: #283cd4;
    color: #283cd4;
}

.confirm-cancel:hover {
    background: #eef1ff;
}

.confirm-ok {
    background: #283cd4;
    color: #ffffff;
}

.confirm-ok:hover {
    background: #1E3A8A;
}

.confirm-danger .confirm-ok {
    background: #dc2626;
}

.confirm-danger .confirm-ok:hover {
    background: #b91c1c;
}

.confirm-btn:focus-visible {
    outline: 3px solid rgba(40, 60, 212, 0.35);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .notification-stack {
        right: 15px;
        bottom: 15px;
    }

    .confirm-actions {
        flex-direction: column-reverse;
    }
}

/* =====================================================
 SHARED FORM FIELDS (contact form + auth pages)
 ===================================================== */
.form-group {
    width: 100%;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--blue-dark, #1E3A8A);
    font-size: 15px;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #d2d7df;
    border-radius: 11px;
    outline: none;
    color: #333333;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input::placeholder {
    color: #777777;
}

.form-group input:focus {
    border-color: var(--blue-primary, #283cd4);
    box-shadow: 0 0 0 3px rgba(40, 69, 216, 0.12);
}

/* Kept from the old auth block: it also resets the footer spacing site-wide */
#footer-placeholder,
#footer-placeholder footer {
    margin-top: 0;
}

/* =====================================================
 LOGIN & SIGNUP
 ===================================================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    background: var(--page-gradient);
}

.auth-container {
    --auth-blue-a: #0A2472;
    --auth-blue-b: #2a56b8;
    --auth-ink: #0a2363;
    --auth-speed: 0.45s;
    --auth-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --auth-radius: 30px 150px 150px 30px;
    --auth-inset: 0 50% 0 0;   /* saan nakapuwesto ang blue panel (kaliwa) */
    position: relative;
    display: flex;
    width: 100%;
    max-width: 900px;
    min-height: 620px;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(5, 22, 80, 0.35);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.auth-register {
    flex-direction: row-reverse;
    --auth-radius: 150px 30px 30px 150px;
    --auth-inset: 0 0 0 50%;   /* nasa kanan ang blue panel */
}

/* ---------- Sliding panel ---------- */
.auth-panel {
    position: relative;
    z-index: 2;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 30px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    color: #ffffff;
    border-radius: var(--auth-radius);   /* ito ang pumuputol sa mga bilog sa loob; ang blue ay galing sa .auth-container::after */
}

.auth-panel::before,
.auth-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    /* lumulutang; lumalabas lang pagkatapos umurong ang blue (hindi naiiwan habang gumagalaw) */
    animation: authFloat 7s ease-in-out infinite, authFadeIn 0.4s ease var(--auth-speed) backwards;
}

.auth-panel::before {
    width: 220px;
    height: 220px;
    top: -70px;
    right: -70px;
    background: rgba(255, 186, 8, 0.18);
}

.auth-panel::after {
    width: 160px;
    height: 160px;
    bottom: -50px;
    left: -40px;
    background: rgba(255, 255, 255, 0.1);
    animation-delay: -3s, var(--auth-speed);
}

.auth-panel > * {
    position: relative;
    z-index: 1;
    --rise-y: 16px;
    animation: riseIn 0.7s ease both;
    animation-delay: calc(var(--auth-speed) * 0.5);
}

.auth-panel > :nth-child(2) {
    animation-delay: calc(var(--auth-speed) * 0.5 + 0.1s);
}

.auth-panel > :nth-child(3) {
    animation-delay: calc(var(--auth-speed) * 0.5 + 0.2s);
}

.auth-panel > :nth-child(4) {
    animation-delay: calc(var(--auth-speed) * 0.5 + 0.3s);
}

.auth-logo {
    display: block;
    margin-bottom: 6px;
}

.auth-logo-img {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: contain;
    /* itinatago ang puting kanto ng logo (bilog ang logo), kapareho ng navbar */
    border-radius: 50%;
    clip-path: circle(50%);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

.auth-panel h2 {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
}

.auth-panel p {
    margin: 0;
    font-size: 15px;
    opacity: 0.92;
}

/* ---------- Form side ---------- */
.auth-form-box {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 44px;
    box-sizing: border-box;
    background: #ffffff;
}

.auth-view {
    width: 100%;
    transition: opacity 0.3s ease;
}

.auth-view h1 {
    margin: 0 0 22px;
    text-align: center;
    color: var(--auth-ink);
    font-size: 34px;
    font-weight: 800;
}

.auth-view form > * {
    --rise-y: 16px;
    animation: riseIn 0.55s ease both;
    animation-delay: calc(var(--auth-speed) * 0.5 + var(--i, 0) * 70ms);
}

.auth-view .form-group label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.input-box {
    position: relative;
    width: 100%;
}

.auth-view .input-box input {
    padding: 0 48px 0 18px;
    background: #eef1f7;
    border: 2px solid transparent;
    border-radius: 10px;
    color: var(--auth-ink);
}

.auth-view .input-box input:focus {
    background: #ffffff;
    border-color: #fbbf24;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25);
}

.auth-icon,
.password-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #315d9c;
}

.auth-icon {
    right: 18px;
    font-size: 16px;
    pointer-events: none;
}

.password-toggle {
    right: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.password-toggle:hover {
    background: rgba(22, 74, 156, 0.1);
    color: var(--auth-ink);
}

/* ---------- Links ---------- */
.auth-alt {
    margin: -4px 0 18px;
    text-align: right;
}

.auth-alt-center {
    margin: 18px 0 0;
    text-align: center;
}

.auth-link {
    color: #164a9c;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.auth-link:hover {
    color: var(--auth-ink);
    text-decoration: underline;
}

/* ---------- Buttons (yellow submit + panel switch, shared shine) ---------- */
.auth-btn,
.auth-switch-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--btn-radius);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-btn::before,
.auth-switch-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.auth-btn:hover::before,
.auth-switch-btn:hover::before {
    left: 160%;
}

.auth-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 24px;
    border: 2px solid #fbbf24;
    background: #fbbf24;
    color: #061a45;
    font-size: 1rem;
}

.auth-switch-btn {
    width: 160px;
    min-height: 46px;
    margin-top: 10px;
    padding: 10px 20px;
    border: 2px solid #ffffff;
    background: transparent;
    color: #ffffff;
    font-size: 0.9rem;
}

.auth-btn:hover {
    background: #ffd04d;
    border-color: #ffd04d;
    color: #061a45;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.45);
}

.auth-switch-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0a2363;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(255, 255, 255, 0.28);
}

.auth-btn:active,
.auth-switch-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.auth-btn:focus-visible,
.auth-switch-btn:focus-visible {
    outline: 3px solid #164a9c;
    outline-offset: 2px;
}

/* ---------- Animations ---------- */
@keyframes authFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-14px, 18px); }
}

/* ---------- Switching to the other page ----------
   Isang blue na layer ang lumalawak mula sa panel hanggang matakpan ang buong puti,
   tapos sa bagong page ay umuurong ito papunta sa panel. clip-path lang ang gumagalaw
   (walang nagbabago sa layout), kaya hindi nanginginig ang text at smooth ang galaw.
   Ito rin ang nagbibigay ng blue ng panel, kaya iisang kulay lang at walang guhit sa gilid. */
.auth-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(135deg, var(--auth-blue-a), var(--auth-blue-b));
    clip-path: inset(var(--auth-inset) round var(--auth-radius));
    transition: clip-path var(--auth-speed) var(--auth-ease);
    animation: authSettle var(--auth-speed) var(--auth-ease) backwards;
}

.auth-container.is-leaving::after {
    clip-path: inset(0 round 30px);
}

@keyframes authFadeIn {
    from { opacity: 0; }
}

@keyframes authSettle {
    from { clip-path: inset(0 round 30px); }
}

.auth-container.is-leaving .auth-view {
    opacity: 0;
}

/* ang mga bilog ay kumukupas agad, hindi naiiwan habang lumalawak ang blue */
.auth-container.is-leaving .auth-panel::before,
.auth-container.is-leaving .auth-panel::after {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* panel text fades out while the empty panel glides across */
.auth-container.is-leaving .auth-panel > * {
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* ---------- Phones: panel becomes a banner on top, switch = fade ---------- */
@media (max-width: 760px) {
    .auth-container,
    .auth-register {
        flex-direction: column;
        min-height: 0;
        --auth-radius: 0 0 70px 70px;
    }

    .auth-panel {
        flex: 0 0 auto;
        gap: 6px;
        padding: 26px 24px 38px;
        background: linear-gradient(135deg, var(--auth-blue-a), var(--auth-blue-b));   /* sa phone, walang layer kaya may sariling blue */
    }

    .auth-logo-img {
        width: 56px;
        height: 56px;
    }

    .auth-panel h2 {
        font-size: 26px;
    }

    .auth-switch-btn {
        width: 140px;
        min-height: 40px;
        margin-top: 6px;
    }

    .auth-form-box {
        flex: 1 1 auto;
        padding: 28px 22px 32px;
    }

    .auth-view h1 {
        margin-bottom: 18px;
        font-size: 28px;
    }

    .auth-container.is-leaving {
        opacity: 0;
        transform: scale(0.97);
    }

    .auth-container::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-container,
    .auth-container *,
    .auth-container *::before,
    .auth-container *::after {
        animation: none !important;
        transition: none !important;
    }

    /* Keep the light that sweeps across the Login / Register buttons,
     same as the buttons on Home and About (it is only a quick shine) */
    .auth-container .auth-btn::before,
    .auth-container .auth-switch-btn::before {
        transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* =====================================================
 RESPONSIVE - 1100px
 ===================================================== */
@media (max-width: 1100px) {
    .navbar {
        padding: 0 18px;
    }

    .nav-wrapper {
        padding: 8px 14px;
    }

    .logo {
        width: 135px;
    }

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

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

    .nav-links {
        gap: 17px;
    }

    .nav-links a {
        font-size: 15px;
    }

    .search-bar {
        width: 250px;
    }

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

/* =====================================================
 RESPONSIVE - 900px
 ===================================================== */
@media (max-width: 900px) {
    .nav-links {
        gap: 12px;
    }

    .nav-links a {
        font-size: 14px;
    }

    .search-bar {
        width: 210px;
    }

    .nav-right {
        gap: 8px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
 RESPONSIVE - 768px
 ===================================================== */
@media (max-width: 768px) {
    .navbar {
        height: auto;
        min-height: 78px;
        padding: 0 12px;
    }

    .logo {
        width: auto;
        flex: 1;
    }

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

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

    .nav-right {
        margin-left: 0;
        gap: 8px;
    }

    .search-bar {
        width: 190px;
        height: 42px;
    }

    .search-bar input {
        font-size: 13px;
        padding: 0 12px;
    }

    .search-bar button {
        width: 46px;
    }

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
 RESPONSIVE DESIGN
 ========================= */
/* =====================================================
 RESPONSIVE - 600px
 ===================================================== */
@media (max-width: 600px) {
    .container {
        padding: 0 15px;
    }

    .logo span {
        display: none;
    }

    .search-bar {
        width: 170px;
    }

    .nav-right > a {
        font-size: 16px;
    }

    .cart-badge {
        min-width: 21px;
        height: 21px;
        font-size: 10px;
    }

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

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
 RESPONSIVE - 480px
 ===================================================== */
@media (max-width: 480px) {
    .nav-wrapper {
        padding: 7px;
    }

    .search-bar {
        width: 145px;
        height: 40px;
    }

    .search-bar input {
        font-size: 12px;
        padding: 0 9px;
    }

    .search-bar button {
        width: 40px;
    }

    .form-group label {
        font-size: 15px;
    }

    .form-group input {
        height: 50px;
        font-size: 14px;
    }
}

/* =====================================================
 FOOTER RESPONSIVE
 ===================================================== */
@media (max-width: 900px) {
    .footer-grid {
        gap: 22px;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .footer-col ul {
        align-items: center;
    }

    .footer-brand p {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-col ul li a:hover {
        transform: none;
    }

    .copyright {
        margin-top: 14px;
    }
}

/* Responsive */
/* Mobile Responsive Centering (Screens 768px below) */
/* =====================================================
 CART RESPONSIVE
 ===================================================== */
@media (max-width: 1000px) {
    .cart-item {
        grid-template-columns: 80px 1fr 100px;
    }
}

@media (max-width: 650px) {
    .cart-items {
        padding: 18px;
    }

    .cart-item {
        grid-template-columns: 70px 1fr;
        gap: 10px;
    }

    .cart-item-image {
        width: 70px;
        height: 65px;
    }

    .quantity-control {
        grid-column: 2;
    }

    .summary-total span:first-child {
        font-size: 19px;
    }

    .summary-total span:last-child {
        font-size: 23px;
    }
}

/* =========================================================
 CART V2 RESPONSIVE
 ========================================================= */
@media (max-width: 1050px) {
    .cart-layout-v2 {
        grid-template-columns: 1fr;
    }

    .summary-container-v2 {
        width: 100%;
    }

    .cart-page-v2 .cart-item-v2 {
        grid-template-columns: 82px minmax(150px, 1fr) 100px 110px 105px;
    }
}

@media (max-width: 760px) {
    .cart-page-v2 {
        padding: 30px 18px 45px;
    }

    .cart-header-v2 {
        padding: 22px 20px;
    }

    .cart-page-v2 .cart-items {
        padding: 0 20px;
    }

    .cart-page-v2 .cart-item-v2 {
        grid-template-columns: 75px minmax(0, 1fr);
        gap: 10px 14px;
        padding: 16px 0;
    }

    .cart-page-v2 .cart-item-v2 > .cart-product-image,
    .cart-page-v2 .cart-item-v2 > .product-image {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 75px;
        height: 75px;
        min-width: 75px;
        min-height: 75px;
        max-width: 75px;
        max-height: 75px;
    }

    .cart-page-v2 .cart-item-v2 > .cart-product-info,
    .cart-page-v2 .cart-item-v2 > .product-info {
        grid-column: 2;
        grid-row: 1;
    }

    .cart-page-v2 .cart-item-v2 > .cart-item-price-v2,
    .cart-page-v2 .cart-item-v2 > .item-price {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
    }

    .cart-page-v2 .cart-item-v2 > .cart-quantity-control,
    .cart-page-v2 .cart-item-v2 > .quantity-control {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
    }

    .cart-page-v2 .cart-item-v2 > .cart-item-total-v2,
    .cart-page-v2 .cart-item-v2 > .item-total {
        grid-column: 2;
        grid-row: 4;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        text-align: left;
    }

    .cart-bottom-v2 {
        padding: 18px 20px 24px;
    }

    .summary-container-v2 {
        padding: 22px 20px 24px;
    }
}

@media (max-width: 480px) {
    .cart-page-v2 {
        padding: 22px 12px 35px;
    }

    .cart-header-v2 {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px 16px;
    }

    .cart-header-v2 h2,
    .summary-container-v2 h2 {
        font-size: 24px;
    }

    .cart-page-v2 .cart-items {
        padding: 0 16px;
    }

    .cart-page-v2 .cart-item-v2 {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .cart-page-v2 .cart-item-v2 > .cart-product-image,
    .cart-page-v2 .cart-item-v2 > .product-image {
        width: 62px;
        height: 62px;
        min-width: 62px;
        min-height: 62px;
        max-width: 62px;
        max-height: 62px;
    }

    .cart-page-v2 .cart-product-info h3 {
        font-size: 15px;
    }

    .cart-page-v2 .cart-product-info p {
        font-size: 12px;
    }

    .summary-container-v2 .total-row span {
        font-size: 21px;
    }

    .summary-container-v2 .total-row strong {
        font-size: 23px;
    }
}

/* =========================================================
 CART V2 - ENHANCED UI
 ========================================================= */
/* Hidden: quantity stepper */
.cart-page-v2 .cart-quantity-control,
.cart-page-v2 .quantity-control {
    display: none !important;
}

/* Hidden: pieces line (already shown on the product page) and "per tray" */
.cart-page-v2 .cart-product-info p:nth-of-type(3),
.cart-page-v2 .cart-item-price-v2 small {
    display: none;
}

.cart-container-v2,
.summary-container-v2 {
    border-top: 5px solid #FFBA08;
    box-shadow: 0 12px 32px rgba(5, 22, 80, 0.22);
}

.cart-header-v2 {
    background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
}

.cart-header-v2 h2 {
    letter-spacing: -0.3px;
}

.cart-header-v2 p {
    color: #5b7bb0;
    font-weight: 600;
}

.cart-page-v2 .cart-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
}

.cart-page-v2 .cart-item-v2 {
    min-height: 0;
    grid-template-columns: 96px minmax(0, 1fr) 120px 44px;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid #e3ebf6;
    border-left: 4px solid #FFBA08;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(22, 74, 156, 0.06);
    transition: none;
}

.cart-page-v2 .cart-item-v2:hover {
    background: #ffffff;
    border-color: #e3ebf6;
    border-left-color: #FFBA08;
    box-shadow: 0 2px 10px rgba(22, 74, 156, 0.06);
    transform: none;
}

.cart-page-v2 .cart-item-v2 > .cart-product-image,
.cart-page-v2 .cart-item-v2 > .product-image {
    width: 96px; height: 96px;
    min-width: 96px; min-height: 96px;
    max-width: 96px; max-height: 96px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(22, 74, 156, 0.15);
}

.cart-page-v2 .cart-item-v2 > .cart-product-image img,
.cart-page-v2 .cart-item-v2 > .product-image img {
    border-radius: 11px;
}

.cart-page-v2 .cart-product-info h3 {
    font-size: 19px;
    margin-bottom: 4px;
}

.cart-page-v2 .cart-product-info p {
    font-size: 13.5px;
}

.cart-page-v2 .cart-product-info .product-tag {
    margin-top: 8px;
    padding: 4px 12px;
    background: #fff3c4;
    color: #7a5a00;
    border: 1px solid #ffe08a;
}

.cart-page-v2 .cart-item-price-v2 strong,
.cart-page-v2 .item-price strong {
    font-size: 20px;
    color: #0e3190;
}

/* quantity: soft pill with round buttons */
.cart-page-v2 .cart-quantity-control,
.cart-page-v2 .quantity-control {
    width: 118px; min-width: 118px; max-width: 118px;
    height: 42px; min-height: 42px;
    padding: 0 5px;
    border: 1px solid #d8e5f2;
    border-radius: 999px;
    background: #f3f8fd;
}

.cart-page-v2 .cart-quantity-control button,
.cart-page-v2 .quantity-control button {
    width: 30px; min-width: 30px;
    height: 30px; min-height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(22, 74, 156, 0.18);
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cart-page-v2 .cart-quantity-control button:hover,
.cart-page-v2 .quantity-control button:hover {
    background: #164a9c;
    color: #ffffff;
}

.cart-page-v2 .cart-quantity-control button:active,
.cart-page-v2 .quantity-control button:active {
    transform: scale(0.92);
}

/* remove: round icon button */
.cart-page-v2 .cart-item-total-v2 .remove-btn {
    width: 40px; height: 40px;
    min-width: 40px; min-height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 14px;
}

.cart-page-v2 .cart-item-v2 > .cart-item-total-v2,
.cart-page-v2 .cart-item-v2 > .item-total {
    grid-column: 4;
    align-items: center;
}

.cart-bottom-v2 .continue-shopping { font-weight: 700; }

/* summary stays in view while scrolling long carts (desktop) */
@media (min-width: 1051px) {
    .summary-container-v2 {
        position: sticky;
        top: 88px;
    }
}

@media (max-width: 1050px) and (min-width: 761px) {
    .cart-page-v2 .cart-item-v2 {
        grid-template-columns: 90px minmax(0, 1fr) 110px 44px;
        gap: 14px;
    }
}

/* =========================================================
 CART V2 - MOBILE PHONE OVERRIDES
 ========================================================= */
@media (max-width: 760px) {
    body:has(.cart-page-v2) {
        padding-top: 70px;
        background-attachment: scroll;
    }

    .cart-page-v2 {
        margin: 12px auto 30px;
        padding: 0 12px;
        min-height: 0;
    }

    .cart-layout-v2 {
        gap: 16px;
    }

    .cart-container-v2,
    .summary-container-v2 {
        border-radius: 16px;
    }

    /* header: title/count left, clear button right */
    .cart-header-v2 {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 18px 16px;
    }

    .cart-header-v2 h2 { font-size: 24px; margin-bottom: 4px; }
    .cart-header-v2 p { font-size: 14px; }

    .cart-header-v2 .clear-cart-btn {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
        min-height: 40px;
        padding: 6px 12px;
        font-size: 13px;
    }

    .cart-page-v2 .cart-items { padding: 14px 12px; gap: 12px; }

    /* item card: image | info, then price + qty, then remove */
    .cart-page-v2 .cart-item-v2 {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "img   info  rm"
            "price price price";
        gap: 10px 12px;
        align-items: center;
        padding: 14px 12px;
        border-radius: 14px;
    }

    .cart-page-v2 .cart-item-v2 > .cart-product-image,
    .cart-page-v2 .cart-item-v2 > .product-image {
        grid-area: img;
        align-self: start;
        width: 72px; height: 72px;
        min-width: 72px; min-height: 72px;
        max-width: 72px; max-height: 72px;
    }

    .cart-page-v2 .cart-item-v2 > .cart-product-info,
    .cart-page-v2 .cart-item-v2 > .product-info {
        grid-area: info;
    }

    .cart-page-v2 .cart-product-info h3 { font-size: 16px; overflow-wrap: anywhere; }
    .cart-page-v2 .cart-product-info p { font-size: 12.5px; }

    .cart-page-v2 .cart-item-v2 > .cart-item-price-v2,
    .cart-page-v2 .cart-item-v2 > .item-price {
        grid-area: price;
        text-align: left;
        display: flex;
        align-items: center;
        align-self: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .cart-page-v2 .cart-item-price-v2 strong,
    .cart-page-v2 .item-price strong { font-size: 18px; }
    .cart-page-v2 .cart-item-price-v2 small { margin-top: 0; font-size: 11px; }

    .cart-page-v2 .cart-item-v2 > .cart-quantity-control,
    .cart-page-v2 .cart-item-v2 > .quantity-control {
        grid-area: qty;
        justify-self: center;
        align-self: end;
        width: 100px; min-width: 100px; max-width: 100px;
        height: 40px; min-height: 40px;
    }

    .cart-page-v2 .cart-quantity-control button,
    .cart-page-v2 .quantity-control button {
        width: 30px; min-width: 30px;
        height: 30px; min-height: 30px;
        line-height: 30px;
    }

    .cart-page-v2 .cart-item-v2 > .cart-item-total-v2,
    .cart-page-v2 .cart-item-v2 > .item-total {
        grid-area: rm;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        justify-self: center;
        align-self: center;
        height: 40px;
        width: 40px;
        margin: 0;
        padding: 0;
    }

    .cart-page-v2 .cart-item-total-v2 .remove-btn {
        min-height: 38px;
        min-width: 38px;
        width: 38px; height: 38px;
        padding: 0;
        font-size: 13px;
    }

    .cart-bottom-v2 { padding: 16px; }
    .cart-bottom-v2 .continue-shopping { width: 100%; justify-content: center; min-height: 44px; }

    /* summary */
    .summary-container-v2 { padding: 20px 16px 22px; }
    .summary-container-v2 h2 { font-size: 24px; margin-bottom: 14px; }
    .summary-container-v2 .summary-row { font-size: 14px; }
    .summary-container-v2 .total-row span { font-size: 21px; }
    .summary-container-v2 .total-row strong { font-size: 24px; }
    .summary-container-v2 .checkout-btn { width: 100%; min-height: 50px; }
}

@media (max-width: 360px) {
    .cart-page-v2 { padding: 0 8px; }
    .cart-page-v2 .cart-items { padding: 0 12px; }
    .cart-page-v2 .cart-item-v2 { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 8px; }
    .cart-page-v2 .cart-item-v2 > .cart-product-image,
    .cart-page-v2 .cart-item-v2 > .product-image {
        width: 60px; height: 60px; min-width: 60px; min-height: 60px; max-width: 60px; max-height: 60px;
    }
    .cart-page-v2 .cart-item-v2 > .cart-quantity-control,
    .cart-page-v2 .cart-item-v2 > .quantity-control { width: 88px; min-width: 88px; max-width: 88px; }
    .cart-page-v2 .cart-quantity-control button,
    .cart-page-v2 .quantity-control button { width: 30px; min-width: 30px; }
}

/* =====================================================
 RESPONSIVE AUTH PAGE
 ===================================================== */
@media (max-width: 600px) {
    .form-group label {
        font-size: 15px;
    }

    .form-group input {
        height: 50px;
        font-size: 14px;
    }
}

/* =====================================================
 VERY SMALL SCREENS
 ===================================================== */
@media (max-width: 400px) {
    .form-group input {
        height: 48px;
    }
}

@media (max-width: 480px) {
    .feature-modal {
        padding: 30px 20px 22px;
    }

    .feature-modal h3 {
        font-size: 21px;
    }
}

/* =====================================================
 CART RESPONSIVE
 ===================================================== */
@media (max-width: 1000px) {
    .cart-item {
        grid-template-columns: 80px 1fr 100px;
    }

    .item-price {
        text-align: left;
    }

    .item-total {
        text-align: left;
    }
}

@media (max-width: 650px) {
    .cart-item {
        grid-template-columns: 70px 1fr;
        gap: 10px;
    }

    .cart-item-image {
        width: 70px;
        height: 65px;
    }

    .item-price,
    .quantity-control,
    .item-total {
        grid-column: 2;
    }

    .quantity-control {
        max-width: 110px;
    }

    .item-total {
        text-align: left;
    }

    .summary-total span {
        font-size: 21px;
    }

    .summary-total strong {
        font-size: 24px;
    }
}

@media (max-width: 900px) {
    body,
    body:has(.hero-section) {
        padding-top: 64px;
    }

    .nav-wrapper {
        height: 64px;
        min-height: 0;
        flex-wrap: nowrap;
        padding: 6px 12px;
        gap: 0;
    }

    .logo {
        width: auto;
        flex: 0 0 auto;
    }

    .nav-links {
        display: none !important;
    }

    .nav-right {
        margin-left: auto;
        gap: 10px;
    }

    .search-bar {
        width: 190px;
        height: 40px;
    }

    .menu-mobile-only {
        display: block;
    }

    .nav-menu {
        width: min(280px, calc(100vw - 24px));
    }
}

@media (max-width: 600px) {
    .logo span {
        display: none;
    }

    .nav-right {
        gap: 8px;
    }

    .search-bar {
        width: 150px;
        height: 38px;
    }
}

@media (max-width: 380px) {
    .nav-wrapper {
        padding: 6px 8px;
    }

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

    .search-bar {
        width: 115px;
    }

    .nav-right {
        gap: 6px;
    }
}

@media (max-width: 440px) {
    /* Magkapatong pero pareho pa rin ang laki at nasa gitna */
    .hero-section .hero-buttons {
        flex-direction: column;
    }

    .hero-section .hero-buttons .btn-primary,
    .hero-section .hero-buttons .btn-secondary {
        width: 220px;
    }
}

/* =====================================================
 HERO RESPONSIVE
 ===================================================== */
@media (max-width: 900px) {
    .hero-section {
        min-height: clamp(520px, 78vh, 680px);
        padding: 60px 6%;
    }

    .hero-section .hero-text {
        max-width: 50%;
    }

    .hero-section .hero-text h1 {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .hero-section .hero-text p {
        font-size: 1rem;
    }

    .hero-section .hero-buttons {
        justify-content: center;
    }

    .hero-section .hero-image {
        width: 56%;
    }
}

@media (max-width: 650px) {
    .hero-section {
        display: block;
        min-height: 0;
        padding: 44px 6% 0;
        text-align: center;
    }

    .hero-section .hero-text {
        max-width: 100%;
        text-align: center;
    }

    .hero-section .hero-text h1 {
        font-size: 2.3rem;
    }

    .hero-section .hero-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-section .hero-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: 300px;
        margin-top: 24px;
        padding: 0;
        justify-content: center;
    }

    .hero-section .hero-image img {
        max-height: 100%;
        object-position: center;
    }

    /* mobile order: title, paragraph, IMAGE, then buttons */
    .hero-section .hero-container {
        display: flex;
        flex-direction: column;
    }

    .hero-section .hero-text {
        display: contents;
    }

    .hero-section .hero-text h5,
    .hero-section .hero-text h1,
    .hero-section .hero-text p {
        order: 1;
    }

    .hero-section .hero-text p {
        margin-bottom: 0;
    }

    .hero-section .hero-image {
        order: 2;
    }

    .hero-section .hero-buttons {
        order: 3;
        align-items: center;
        margin-top: 8px;
        padding-bottom: 44px;
    }
}

@media (max-width: 400px) {
    .hero-section .hero-text h1 {
        font-size: 2rem;
    }

    .hero-section .hero-image {
        height: 240px;
    }
}

@media (min-width: 901px) {
    .nav-wrapper .nav-links {
        margin: 0 auto;
    }

    .nav-wrapper .nav-right {
        margin-left: 0;
    }
}

@media (max-width: 1000px) {
    .steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 66px;
        --step-inset: calc((100% - var(--step-gap)) / 4 - 2.5px);
    }

    .steps-grid::after {
        grid-row: 2;
    }
}

@media (max-width: 700px) {
    .how-section {
        padding-top: 56px;
    }
}

@media (max-width: 480px) {
    /* Mobile: compact cards + a vertical gold rail that runs through the numbered circles */
    .steps-grid {
        grid-template-columns: 1fr;
        row-gap: 14px;
        margin-top: 28px;
        padding-left: 40px;
    }

    .steps-grid::before {
        display: block;
        top: 22px;
        bottom: 22px;
        left: -25px; /* grid has 40px left padding; this centers the rail on the number circles */
        right: auto;
        width: 5px;
        height: auto;
        border: 0;
        border-radius: 5px;
        background: #FFBA08;
    }

    .steps-grid::after {
        display: none;
    }

    .step-card {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        text-align: left;
        padding: 14px 16px;
        border-top-width: 4px;
    }

    .step-card:hover {
        transform: translateY(-3px);
    }

    /* small horizontal connector from the rail to the card */
    .step-card::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -12px;
        width: 12px;
        height: 4px;
        margin-top: -2px;
        background: #FFBA08;
    }

    .step-number {
        top: 50%;
        left: -22px;
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
        border-width: 2px;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .step-icon {
        grid-row: 1 / span 2;
        width: 50px;
        height: 50px;
        margin: 0;
        font-size: 20px;
    }

    .step-card:hover .step-icon {
        transform: none;
    }

    .step-card h3 {
        font-size: 1rem;
        margin: 0 0 3px;
        align-self: end;
    }

    .step-card p {
        font-size: 0.85rem;
        line-height: 1.4;
        align-self: start;
    }
}

@media (max-width: 900px) {
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    /* Mobile: keep the 4 stats as a compact 2 x 2 grid */
    .about-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 22px;
    }

    .about-stat {
        padding: 16px 10px;
        border-top-width: 3px;
    }

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

    .about-stat i {
        width: 38px;
        height: 38px;
        margin-bottom: 8px;
        font-size: 1rem;
    }

    .about-stat:hover i {
        transform: none;
    }

    .about-stat strong {
        font-size: 1.05rem;
        margin-bottom: 2px;
        overflow-wrap: anywhere;
    }

    .about-stat span {
        font-size: 0.75rem;
        line-height: 1.35;
    }
}

@media (max-width: 900px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    /* Mobile: keep the 4 "Why Choose" cards as a compact 2 x 2 grid */
    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .value-card {
        padding: 18px 12px;
        border-top-width: 4px;
    }

    .value-card:hover {
        transform: translateY(-3px);
    }

    .value-card .about-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
        font-size: 1.05rem;
    }

    .value-card:hover .about-icon {
        transform: none;
    }

    .value-card h3 {
        font-size: 0.95rem;
        margin-bottom: 6px;
        overflow-wrap: anywhere;
    }

    .value-card p {
        font-size: 0.78rem;
        line-height: 1.45;
    }
}

@media (max-width: 520px) {
    .oh-head h1 {
        font-size: 22px;
    }

    .oh-card {
        padding: 16px 14px;
    }

    .oh-step {
        font-size: 11px;
    }
}

@media (max-width: 560px) {
    .bn-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px 18px 0;
    }

    .bn-label,
    .bn-value {
        padding-top: 0;
    }

    .bn-head {
        padding: 20px 18px 10px;
    }

    .bn-pricebar {
        margin: 6px 18px 0;
    }

    .bn-price {
        font-size: 32px;
    }

    .bn-foot {
        padding: 18px;
    }

    .bn-buttons {
        width: 100%;
    }

    .bn-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 10px;
        font-size: 15px;
        white-space: nowrap;
    }

    .bn-overlay {
        padding: 10px;
    }

    .bn-modal {
        max-height: 94vh;
        max-height: 94dvh;
    }

    .bn-options {
        gap: 8px;
    }

    .bn-opt {
        min-width: 0;
        padding: 12px 14px;
        font-size: 15px;
    }

    .bn-options:has(.bn-size) {
        gap: 6px;
    }

    .bn-options:has(.bn-size) .bn-size {
        padding: 12px 0;
        font-size: 14px;
    }

    .bn-total strong {
        font-size: 22px;
    }
}

@media screen and (max-width: 768px) {
    .contact-buttons {
        justify-content: center;
        width: 100%;
        margin: 0 auto;
    }

    .btn-contact-submit,
    .btn-contact-reset {
        margin: 0 auto;
    }
}

@media (max-width: 1100px) {
    .pp-perks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pp-perk {
        border-right: none;
        border-bottom: 1px solid #e3e7ef;
    }

    .pp-perk:last-child {
        border-bottom: none;
    }
}

@media (max-width: 580px) {
    .pp-perks {
        grid-template-columns: 1fr;
    }
}

/* Responsive Handling */
@media (max-width: 1100px) {
    .features-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        padding: 24px;
    }

    .features-section .feature-card {
        border-right: none;
        border-bottom: 1px solid #e3e7ef;
        padding: 14px 10px;
    }

    .features-section .feature-card:last-child {
        border-bottom: none;
    }
}

@media (max-width: 580px) {
    .features-section {
        grid-template-columns: 1fr;
        border-radius: 20px;
        padding: 20px 16px;
    }
}

@media (max-width: 600px) {
    .acct-profile {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 24px 18px 20px;
    }

    .acct-info p {
        justify-content: center;
    }

    .acct-logout {
        width: 100%;
        justify-content: center;
    }

    .acct-section-title {
        font-size: 19px;
    }
}

/* =====================================================
 ORDER HISTORY ACTION BUTTONS (Order received = green, Cancel = red)
 ===================================================== */
.oh-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.oh-receive-btn,
.oh-cancel-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 20px;
    border-radius: var(--btn-radius);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* shine */
.oh-receive-btn::before,
.oh-cancel-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.oh-receive-btn:hover::before,
.oh-cancel-btn:hover::before {
    left: 160%;
}

/* ----- ORDER RECEIVED (green) ----- */
/* ----- ORDER RECEIVED (green outline -> solid green on hover) ----- */
.oh-receive-btn {
    border: 2px solid #16a34a;
    background: #ffffff;
    color: #16a34a;
}

.oh-receive-btn i {
    color: #16a34a;
    font-size: 15px;
    transition: color 0.3s ease;
}

.oh-receive-btn:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.45);
}

.oh-receive-btn:hover i {
    color: #ffffff;
}

/* ----- CANCEL ORDER (red outline) ----- */
.oh-cancel-btn {
    border: 2px solid #dc2626;
    background: #ffffff;
    color: #dc2626;
}

.oh-cancel-btn i {
    font-size: 15px;
}

.oh-cancel-btn:hover {
    background: #dc2626;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.35);
}

.oh-receive-btn:active,
.oh-cancel-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.oh-receive-btn:focus-visible,
.oh-cancel-btn:focus-visible {
    outline: 3px solid #0A2472;
    outline-offset: 2px;
}

.oh-receive-btn:disabled,
.oh-cancel-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 520px) {
    .oh-actions {
        flex-direction: column;
    }

    .oh-receive-btn,
    .oh-cancel-btn {
        width: 100%;
    }
}

/* =====================================================
 ACCOUNT PAGE
 ===================================================== */
body:has(.acct-page) {
    min-height: 100vh;
    padding-top: 60px;
    margin: 0;
    position: relative;
    isolation: isolate;
    color: #ffffff;
    background: radial-gradient(ellipse 48% 75% at 92% 105%, rgba(255, 186, 8, 0.95) 0%, rgba(255, 186, 8, 0.35) 45%, transparent 75%),
        radial-gradient(ellipse 40% 55% at 68% 0%, rgba(90, 140, 235, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 45% 60% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
        linear-gradient(105deg, #0A2472 0%, #0e3190 30%, #2a56b8 52%, #d9a63a 78%, #FFBA08 100%);
    background-attachment: fixed;
}

body:has(.acct-page)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 22, 80, 0.55) 0%, rgba(5, 22, 80, 0.25) 38%, rgba(5, 22, 80, 0) 66%);
}

body:has(.acct-page)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
    mask-image: linear-gradient(90deg, transparent 38%, #000 82%);
}

@media (min-width: 901px) {
    body:has(.acct-page) {
        padding-top: 64px;
    }
}

.acct-page {
    max-width: 880px;
    padding: 32px 16px 70px;
}

/* ----- profile card ----- */
.acct-page .acct-profile {
    display: block;
    padding: 0;
    margin-bottom: 8px;
    background: #ffffff;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(5, 22, 80, 0.28);
}

.acct-page .acct-banner {
    height: 104px;
    background: radial-gradient(ellipse 48% 120% at 100% 100%, rgba(255, 186, 8, 0.95) 0%, rgba(255, 186, 8, 0.3) 50%, transparent 78%),
        radial-gradient(ellipse 45% 100% at 0% 0%, rgba(90, 140, 235, 0.5) 0%, transparent 70%),
        linear-gradient(105deg, #0A2472 0%, #0e3190 35%, #2a56b8 60%, #d9a63a 90%);
}

.acct-page .acct-body {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 0 28px 24px;
}

.acct-page .acct-avatar {
    width: 96px;
    height: 96px;
    font-size: 40px;
    border: 5px solid #ffffff;
    outline: 3px solid #ffbd18;
    box-shadow: 0 10px 24px rgba(10, 36, 114, 0.35);
    margin-top: -48px;
    position: relative;
    z-index: 1;
}

.acct-page .acct-info {
    flex: 1;
    min-width: 0;
    padding-top: 16px;
}

.acct-page .acct-info h1 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.15;
    color: #0A2472;
}

.acct-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acct-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f1f5fd;
    color: #1e3a8a;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.acct-chip i {
    color: #e5a200;
    font-size: 13px;
}

.acct-page .acct-logout {
    margin-top: 16px;
    padding: 10px 22px;
    background: #ffffff;
}

/* same specificity as the rule above, so the hover has to be repeated here */
.acct-page .acct-logout:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* ----- stat tiles ----- */
.acct-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #e8edf7;
    background: #fafbff;
}

.acct-stat {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "num" "label";
    justify-items: center;
    text-align: center;
    row-gap: 4px;
    padding: 20px 12px;
}

.acct-stat + .acct-stat {
    border-left: 1px solid #e8edf7;
}

.acct-stat i {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
    border-radius: 12px;
    background: #fff3cd;
    color: #b7791f;
    font-size: 17px;
}

.acct-stat strong {
    grid-area: num;
    font-size: 24px;
    line-height: 1.1;
    color: #0A2472;
}

.acct-stat span {
    grid-area: label;
    font-size: 12.5px;
    color: #64748b;
}

/* ----- orders section ----- */
.acct-page .acct-section-title {
    margin: 30px 4px 14px;
    font-size: 24px;
}

.acct-page .acct-orders-intro {
    padding: 14px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 22px rgba(5, 22, 80, 0.16);
}

.acct-page .acct-orders-intro p {
    margin: 0;
}

.acct-page .oh-filters {
    gap: 8px;
    margin-bottom: 18px;
}

.acct-page .oh-filter {
    box-shadow: 0 4px 12px rgba(5, 22, 80, 0.14);
}

.acct-page .oh-filter.active {
    background: #ffbd18;
    color: #0A2472;
}

.acct-page .oh-card {
    border-radius: 18px;
    border-left: 5px solid #ffbd18;
    box-shadow: 0 12px 30px rgba(5, 22, 80, 0.2);
}

.acct-page .oh-details summary:focus-visible,
.acct-page .oh-filter:focus-visible {
    outline: 2px solid #0A2472;
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .acct-page .acct-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 0 18px 22px;
    }

    .acct-page .acct-avatar {
        margin-top: -44px;
    }

    .acct-page .acct-info {
        padding-top: 0;
    }

    .acct-page .acct-logout {
        margin-top: 0;
    }

    .acct-contacts {
        justify-content: center;
    }

    .acct-page .acct-logout {
        width: 100%;
        justify-content: center;
    }

    .acct-page .acct-info h1 {
        font-size: 24px;
    }
}

@media (max-width: 560px) {
    .acct-stat {
        grid-template-columns: 1fr;
        grid-template-areas: "icon" "num" "label";
        justify-items: center;
        text-align: center;
        row-gap: 4px;
        padding: 14px 6px;
    }

    .acct-stat i {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .acct-stat strong {
        font-size: 20px;
    }
}

@media (max-width: 900px) {
    .contact-page .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .contact-page .page-header h1 {
        font-size: 30px;
    }

    .contact-page .contact-form-card {
        padding: 24px 18px 22px;
    }

    .contact-page .contact-info-card {
        padding: 26px 20px;
    }

    .contact-page .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-page .contact-buttons {
        justify-content: center;
    }

    .contact-page .btn-contact-submit,
    .contact-page .btn-contact-reset {
        flex: 1 1 140px;
        width: auto;
        margin: 0;
    }

    .contact-page .map-container iframe {
        height: 300px;
    }
}

/* =====================================================
 MOBILE SAFEGUARDS (all pages)
 ===================================================== */
html {
    -webkit-text-size-adjust: 100%;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

@media (max-width: 380px) {
    .bn-modal {
        border-radius: 12px;
    }

    .bn-btn {
        padding: 11px 6px;
        font-size: 14px;
    }

    .bn-options:has(.bn-size) .bn-size {
        font-size: 13px;
    }
}
/* =====================================================
 ACCOUNT PAGE - PHONE FIXES
 ===================================================== */
@media (max-width: 560px) {

    .acct-page {
        padding: 18px 12px 56px;
    }

    .acct-page .acct-banner {
        height: 84px;
    }

    .acct-page .acct-avatar {
        width: 84px;
        height: 84px;
        font-size: 34px;
        margin-top: -42px;
    }

    /* long emails wrap inside the card instead of pushing it wider */
    .acct-contacts,
    .acct-chip {
        max-width: 100%;
        min-width: 0;
    }

    .acct-chip {
        font-size: 12.5px;
        overflow-wrap: anywhere;
    }

    .acct-stat span {
        font-size: 11.5px;
    }

    .acct-page .acct-section-title {
        margin: 24px 2px 12px;
        font-size: 21px;
    }

    .acct-page .acct-orders-intro {
        padding: 12px 14px;
    }

    /* filters: neat 2 x 2 grid instead of uneven wrapping */
    .acct-page .oh-filters,
    .oh-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .oh-filter {
        padding: 10px 8px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
    }

    /* order cards */
    .acct-page .oh-card {
        padding: 14px 12px;
        border-left-width: 4px;
    }

    .oh-card-top {
        flex-wrap: nowrap;
        align-items: center;
    }

    .oh-card-top > div:first-child {
        min-width: 0;
    }

    .oh-id {
        font-size: 15px;
        overflow-wrap: anywhere;
    }

    .oh-badge {
        flex-shrink: 0;
        padding: 4px 10px;
        font-size: 11.5px;
    }

    .oh-steps {
        margin: 16px 0 4px;
    }

    .oh-step {
        font-size: 10.5px;
        line-height: 1.25;
    }

    .oh-summary {
        flex-wrap: wrap;
    }

    .oh-summary strong {
        font-size: 17px;
    }

    .oh-item {
        font-size: 13px;
    }

    .oh-item > div,
    .oh-item > span:first-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .oh-meta {
        font-size: 12.5px;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 360px) {
    .acct-page .acct-info h1 {
        font-size: 21px;
    }

    .oh-step {
        font-size: 9.5px;
    }

    .oh-filter {
        font-size: 12px;
        padding: 9px 4px;
    }
}

/* =====================================================
 NAVBAR ACCOUNT ICON -> first letter of the customer's name (when logged in)
 Markup (navbar.php):
   logged out: <a class="account-btn"><i class="fa-solid fa-user"></i></a>
   logged in : <a class="account-btn has-initial"><span class="account-initial">M</span></a>
 ===================================================== */
.account-btn.has-initial {
    width: 34px;
    height: 34px;
}

.account-btn .account-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(ellipse 48% 60% at 95% 100%, rgba(255, 186, 8, 0.85) 0%, rgba(255, 186, 8, 0.30) 45%, transparent 75%),
        radial-gradient(ellipse 45% 50% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
        linear-gradient(135deg, #0A2472 0%, #0e3190 32%, #2a56b8 55%, #d9a63a 82%, #FFBA08 100%);
    border: 2px solid #ffbd18;
    box-shadow: 0 3px 8px rgba(5, 22, 80, 0.35);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.account-btn.has-initial:hover .account-initial,
.account-btn.has-initial.active .account-initial {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px #ffbd18, 0 4px 10px rgba(5, 22, 80, 0.4);
}
/* GCash number field (shown only when GCash is selected) */
.po-field[hidden] { display: none; }

/* =====================================================
 FALLBACK PARA SA PHONE NA WALANG :has() SUPPORT
 (Products at Contact pages) - hindi ito tumatama sa modern browser
 ===================================================== */
@supports not selector(:has(*)) {
    .products-page,
    .contact-page {
        color: #ffffff;
    }

    .products-page::before,
    .contact-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(ellipse 48% 75% at 92% 105%, rgba(255, 186, 8, 0.95) 0%, rgba(255, 186, 8, 0.35) 45%, transparent 75%),
            radial-gradient(ellipse 40% 55% at 68% 0%, rgba(90, 140, 235, 0.35) 0%, transparent 70%),
            radial-gradient(ellipse 45% 60% at 0% 0%, rgba(40, 90, 200, 0.55) 0%, transparent 70%),
            linear-gradient(105deg, #0A2472 0%, #0e3190 30%, #2a56b8 52%, #d9a63a 78%, #FFBA08 100%);
    }

    .products-header h1,
    .products-header p {
        color: #ffffff;
        text-shadow: 0 3px 14px rgba(5, 22, 80, 0.45);
    }
}
/* =====================================================
 BUY NOW MODAL - LAPTOP RESPONSIVE
 Short laptop screens (13-15", 125-150% Windows scaling):
 title stays pinned, Total + Add to Cart / Buy Now stay
 pinned at the bottom, and only the options scroll.
 ===================================================== */
@media (min-width: 901px) {
    .bn-overlay {
        padding: 20px;
    }

    .bn-modal {
        width: min(680px, 100%);
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        padding-bottom: 0;
    }

    .bn-head {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #ffffff;
    }

    .bn-foot {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: #ffffff;
        flex-wrap: nowrap;
        margin-top: 22px;
    }

    .bn-buttons {
        flex-wrap: nowrap;
        flex: 0 0 auto;
    }

    .bn-btn {
        white-space: nowrap;
    }
}

/* Laptop heights (about 700px of page or less) - tighten spacing */
@media (min-width: 901px) and (max-height: 760px) {
    .bn-head {
        padding: 16px 22px 8px;
    }

    .bn-head h2 {
        font-size: 21px;
    }

    .bn-close {
        width: 34px;
        height: 34px;
        font-size: 20px;
    }

    .bn-pricebar {
        margin: 4px 22px 0;
        padding: 12px 20px;
    }

    .bn-price {
        font-size: 32px;
    }

    .bn-price-note {
        margin-top: 2px;
        font-size: 13px;
    }

    .bn-row {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 10px;
        padding: 14px 22px 0;
    }

    .bn-label,
    .bn-value {
        padding-top: 10px;
        font-size: 15px;
    }

    .bn-options {
        gap: 10px;
    }

    .bn-opt {
        padding: 10px 16px;
        font-size: 15px;
    }

    .bn-options:has(.bn-size) {
        gap: 8px;
    }

    .bn-size-name {
        margin-top: 6px;
        font-size: 13px;
    }

    .bn-qty {
        margin-top: 2px;
    }

    .bn-qty button,
    .bn-qty input {
        height: 40px;
    }

    .bn-foot {
        margin-top: 14px;
        padding: 12px 22px;
        gap: 12px;
    }

    .bn-total strong {
        font-size: 22px;
    }

    .bn-btn {
        padding: 10px 20px;
        font-size: 15px;
    }
}

/* Very short laptop windows (about 560px of page or less) */
@media (min-width: 901px) and (max-height: 580px) {
    .bn-head {
        padding: 12px 20px 6px;
    }

    .bn-head h2 {
        font-size: 19px;
    }

    .bn-pricebar {
        padding: 8px 16px;
    }

    .bn-price {
        font-size: 26px;
    }

    .bn-row {
        padding: 10px 20px 0;
    }

    .bn-opt {
        padding: 8px 14px;
    }

    .bn-foot {
        margin-top: 10px;
        padding: 10px 20px;
    }
}

/* =====================================================
 LOGIN & REGISTER - LAPTOP RESPONSIVE
 Laptop screens (125-150% Windows scaling = about 1280x600
 of page): the card fills the space under the navbar,
 as big as it can be without needing to scroll.
 ===================================================== */
@media (min-width: 761px) {
    body:has(.auth-page) .auth-page {
        padding: 20px 16px;
    }

    .auth-container {
        min-height: min(620px, calc(100vh - 64px - 40px));
        min-height: min(620px, calc(100dvh - 64px - 40px));
    }
}

@media (min-width: 761px) and (max-height: 760px) {
    .auth-panel {
        padding: 28px 30px;
    }

    .auth-form-box {
        padding: 26px 44px;
    }

    .auth-view h1 {
        margin-bottom: 18px;
        font-size: 32px;
    }

    .auth-view .form-group {
        margin-bottom: 13px;
    }

    .auth-view .form-group input {
        height: 48px;
    }

    .auth-alt {
        margin: -2px 0 14px;
    }

    .auth-alt-center {
        margin-top: 14px;
    }
}

/* Very short laptop windows (about 560px of page or less) */
@media (min-width: 761px) and (max-height: 580px) {
    .auth-form-box {
        padding: 18px 40px;
    }

    .auth-view h1 {
        margin-bottom: 12px;
        font-size: 28px;
    }

    .auth-view .form-group {
        margin-bottom: 9px;
    }

    .auth-view .form-group input {
        height: 44px;
    }

    .auth-btn {
        min-height: 44px;
    }

    .auth-alt-center {
        margin-top: 10px;
    }
}

/* =====================================================
 PRODUCT TAGS - ONE LINE ON LAPTOP / DESKTOP
 (phones already use their own swipeable row above)
 ===================================================== */
@media (min-width: 581px) {
    .products-page .pp-tags,
    .pp-tags {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .pp-tags li {
        flex: 0 1 auto;
        min-width: 0;
        gap: 4px;
        padding: 4px 9px;
        font-size: clamp(10px, 0.82vw, 12px);
        white-space: nowrap;
    }

    .pp-tags li i {
        flex: 0 0 auto;
        font-size: 9px;
    }
}