/*
 * VOV Trade design tokens
 * Authority: VOV Trade UI Design System — Colour Palette & Typography
 * Structural inspiration: engineeringgoodsindia.com (industrial catalogue,
 * category-led discovery, strong trust and quotation calls to action).
 */
:root {
    --ink: #1f2937;
    --deep: #0f4c81;
    --green: #0f4c81;
    --secondary: #1e73be;
    --mint: #eff6ff;
    --orange: #f58220;
    --cream: #f8fafc;
    --line: #e5e7eb;
    --muted: #6b7280;
    --white: #ffffff;
    --success: #16a34a;
    --shadow: 0 16px 40px rgba(15, 76, 129, 0.1);
    --font-body: Inter, sans-serif;
    --font-heading: Manrope, sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --focus: 0 0 0 3px rgba(30, 115, 190, 0.28);
}

/* Catalogue, proof, FAQ, and footer refinements */
.why-section {
    position: relative;
    overflow: hidden;
    padding: 104px 0 0;
    color: #fff;
    background: radial-gradient(circle at 86% 12%, rgba(30, 115, 190, 0.42), transparent 30%), linear-gradient(135deg, #071b2d, #0b3b63 58%, #0f4c81);
}

.why-section::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    right: -160px;
    bottom: -260px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.025), 0 0 0 140px rgba(255, 255, 255, 0.018);
}

.why-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 88px;
    align-items: start;
}

.why-intro {
    position: sticky;
    top: 130px;
}

.why-intro h2 {
    margin: 14px 0 22px;
    font-size: 44px;
}

.why-intro p {
    max-width: 470px;
    color: #c8daea;
    font-size: 16px;
    line-height: 1.75;
}

.why-link {
    display: inline-block;
    margin-top: 20px;
    padding-bottom: 5px;
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.why-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.why-cards article {
    position: relative;
    min-height: 260px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, background 0.2s ease;
}

.why-cards article:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.11);
}

.why-cards article > span {
    position: absolute;
    top: 24px;
    right: 24px;
    color: #8fb5d5;
    font: 700 11px Manrope, sans-serif;
}

.why-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #f58220, #d96200);
    box-shadow: 0 12px 24px rgba(245, 130, 32, 0.2);
    font: 800 14px Manrope, sans-serif;
}

.why-cards h3 {
    margin-top: 30px;
    font-size: 20px;
}

.why-cards p {
    margin: 10px 0 0;
    color: #c8daea;
    font-size: 14px;
    line-height: 1.65;
}

.why-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 76px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.why-metrics div {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 28px 0;
}

.why-metrics div + div {
    padding-left: 34px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.why-metrics b {
    color: #fff;
    font: 800 24px Manrope, sans-serif;
}

.why-metrics span {
    color: #9ebbd4;
    font-size: 12px;
}

.faq-hero {
    padding: 86px 0;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
}

.faq-hero h1 {
    max-width: 780px;
    margin: 12px 0 18px;
    font-size: 54px;
}

.faq-hero p {
    max-width: 660px;
    color: #5f6f80;
    font-size: 17px;
    line-height: 1.7;
}

.faq-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 70px;
    align-items: start;
}

.faq-index {
    position: sticky;
    top: 125px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 22px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #fff;
}

.faq-index strong {
    margin-bottom: 7px;
    font-family: Manrope, sans-serif;
}

.faq-index a {
    color: #64748b;
    font-size: 13px;
}

.faq-index a:hover {
    color: #0f4c81;
}

.faq-groups {
    display: grid;
    gap: 64px;
}

.faq-groups section {
    scroll-margin-top: 120px;
}

.faq-groups h2 {
    display: inline-block;
    margin: 0 0 22px 10px;
    font-size: 30px;
}

.faq-number {
    color: #f58220;
    font: 800 12px Manrope, sans-serif;
}

.faq-list {
    border-top: 1px solid #dbe3ee;
}

.faq-list details {
    border-bottom: 1px solid #dbe3ee;
}

.faq-list summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 4px;
    cursor: pointer;
    list-style: none;
    color: #172b3d;
    font: 700 16px Manrope, sans-serif;
}

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

.faq-list summary span {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    margin-top: -4px;
    border-radius: 50%;
    color: #0f4c81;
    background: #eff6ff;
    font-size: 20px;
    transition: transform 0.2s ease;
}

.faq-list details[open] summary span {
    transform: rotate(45deg);
}

.faq-answer {
    max-width: 760px;
    padding: 0 48px 22px 4px;
    color: #5f6f80;
    font-size: 14px;
    line-height: 1.7;
}

.faq-answer p {
    margin: 0;
}

.faq-answer ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.faq-preview {
    max-width: 980px;
}

.cta .button-light {
    color: #0f4c81 !important;
    background: #fff !important;
    border: 1px solid #fff;
}

.cta .button-light:hover {
    color: #fff !important;
    background: #0b3b63 !important;
    border-color: #0b3b63;
}

.footer-logo {
    width: 160px;
    height: 58px;
    display: block;
    padding: 7px 12px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-art img {
    width: 100%;
    height: 100%;
    padding: 18px;
    object-fit: contain;
}

.detail-art img {
    width: 100%;
    height: 100%;
    padding: 28px;
    object-fit: contain;
}

.product-thumbnails img,
.admin-gallery img,
.admin-image-preview,
.admin-product-name img {
    object-fit: cover;
}

.csv-tools {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    margin-bottom: 24px;
    padding: 25px;
    border: 1px solid #cfe0ef;
    border-radius: 14px;
    background: linear-gradient(135deg, #f4f9ff, #fff);
}

.csv-tools h2 {
    margin: 6px 0;
    font-size: 24px;
}

.csv-tools p {
    max-width: 700px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.csv-actions,
.csv-actions form {
    display: flex;
    align-items: end;
    gap: 10px;
}

.csv-actions label {
    display: grid;
    gap: 5px;
    color: #526273;
    font-size: 11px;
    font-weight: 700;
}

.csv-actions input {
    max-width: 230px;
    padding: 9px;
    font-size: 12px;
}

.catalogue-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(248, 250, 252, 0.94), rgba(239, 246, 255, 0.9)),
        url("../images/hero-product-collage-v1.png") right 5% center / min(560px, 44vw) auto no-repeat;
}

.catalogue-hero .shell {
    position: relative;
    z-index: 1;
}

.catalogue-hero p {
    max-width: 680px;
}

.catalogue-proof,
.product-service-strip,
.product-tags,
.locked-action,
.card-rfq-form {
    display: flex;
    align-items: center;
}

.catalogue-proof {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.catalogue-proof span,
.product-service-strip span,
.product-tags span {
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #ffffff;
    color: #526273;
    font-size: 11px;
    font-weight: 700;
}

.catalogue-proof span {
    padding: 9px 13px;
}

.category-filter-strip {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 4px;
    overflow-x: auto;
}

.category-filter-strip a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #ffffff;
    color: #526273;
    font-size: 12px;
    font-weight: 700;
}

.category-filter-strip a.active,
.category-filter-strip a:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #0f4c81;
}

.category-filter-strip small {
    min-width: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f8fafc;
    color: #6b7280;
    font-size: 10px;
    text-align: center;
}

.catalogue-tools.enhanced {
    grid-template-columns: minmax(220px, 1fr) 190px 190px 210px auto auto;
    align-items: end;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 76, 129, 0.06);
}

.catalogue-tools.enhanced label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: #526273;
    font-size: 11px;
    font-weight: 800;
}

.catalogue-tools.enhanced input,
.catalogue-tools.enhanced select {
    width: 100%;
    min-height: 44px;
}

.catalogue-tools .clear-filters {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: #0f4c81;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.results-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.results-meta span {
    color: #6b7280;
    font-size: 12px;
}

.product-card {
    display: flex;
    flex-direction: column;
}

.product-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-copy p {
    flex: 1;
}

.product-tags {
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.product-tags span {
    padding: 6px 9px;
    background: #f8fafc;
    font-size: 10px;
}

.locked-action {
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.locked-action .price-locked {
    margin-top: 0;
}

.locked-action a:last-child {
    color: #0f4c81;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.card-rfq-form {
    gap: 8px;
    margin-top: 14px;
}

.card-rfq-form input {
    width: 78px;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
}

.card-rfq-form button {
    min-height: 38px;
    flex: 1;
    border: 0;
    border-radius: 9px;
    background: #0f4c81;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.card-rfq-form button:hover {
    background: #0b3b63;
}

.product-service-strip {
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
}

.product-service-strip span {
    padding: 8px 10px;
    background: #f8fafc;
}

@media (max-width: 980px) {
    .why-shell,
    .faq-layout,
    .csv-tools {
        grid-template-columns: 1fr;
    }

    .catalogue-tools.enhanced {
        grid-template-columns: 1fr 1fr;
    }

    .catalogue-search,
    .catalogue-tools.enhanced .button,
    .catalogue-tools .clear-filters {
        grid-column: 1 / -1;
    }

    .why-intro,
    .faq-index {
        position: static;
    }

    .faq-index {
        display: none;
    }
}

@media (max-width: 680px) {
    .why-section {
        padding-top: 72px;
    }

    .why-intro h2,
    .faq-hero h1 {
        font-size: 36px;
    }

    .why-cards,
    .why-metrics {
        grid-template-columns: 1fr;
    }

    .why-cards article {
        min-height: 220px;
    }

    .why-metrics div + div {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .csv-actions,
    .csv-actions form {
        align-items: stretch;
        flex-direction: column;
    }

    .csv-actions input {
        max-width: none;
        width: 100%;
    }

    .catalogue-hero {
        background:
            linear-gradient(135deg, rgba(248, 250, 252, 0.97), rgba(239, 246, 255, 0.96)),
            url("../images/hero-product-collage-v1.png") right -120px center / 420px auto no-repeat;
    }

    .catalogue-tools.enhanced {
        grid-template-columns: 1fr;
        padding: 13px;
    }

    .results-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .locked-action,
    .card-rfq-form {
        align-items: stretch;
        flex-direction: column;
    }

    .card-rfq-form input {
        width: 100%;
    }
}

body {
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    background: #ffffff;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--deep);
    font-weight: 700;
    box-shadow: var(--shadow);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0;
    box-shadow: var(--focus);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.shell {
    width: min(1320px, calc(100% - 48px));
}

.topline,
.dark-section,
footer {
    background: #0f4c81;
}

.topline {
    color: #dbeafe;
}

.topline .shell,
.top-actions {
    display: flex;
    align-items: center;
}

.topline .shell {
    justify-content: space-between;
}

.top-actions {
    gap: 18px;
}

.top-actions > a {
    color: #dbeafe;
}

.top-actions form {
    margin: 0;
}

.topline .topline-copy {
    color: #dbeafe;
}

.language-switch {
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.language-switch:hover {
    background: rgba(255, 255, 255, 0.16);
}

.topline span,
.footer-grid p,
.footer-grid a,
.footer-grid span,
.copyright {
    color: #bfdbfe;
}

.site-header {
    border-color: #e5e7eb;
}

.desktop-nav a[aria-current="page"] {
    color: var(--deep);
    box-shadow: inset 0 -2px var(--orange);
}

.mobile-nav {
    display: none;
    position: relative;
}

.mobile-nav summary {
    min-width: 76px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--deep);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    text-align: center;
}

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

.mobile-nav[open] summary {
    border-color: #93c5fd;
    background: var(--mint);
}

.mobile-nav-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(330px, calc(100vw - 28px));
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: 0 20px 45px rgba(15, 76, 129, 0.18);
}

.mobile-nav-panel a,
.mobile-nav-action {
    display: block;
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.mobile-nav-panel a:hover,
.mobile-nav-action:hover {
    background: var(--mint);
    color: var(--deep);
}

.mobile-nav-panel .mobile-nav-primary {
    background: var(--deep);
    color: var(--white);
}

.brand-mark,
.product-art span,
.detail-art span,
.avatar {
    background: #0f4c81;
}

.brand-logo {
    width: 142px;
    height: 48px;
    overflow: hidden;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.button {
    border-radius: 10px;
    background: #0f4c81;
    box-shadow: 0 7px 18px rgba(15, 76, 129, 0.18);
}

.button:hover {
    background: #0b3b63;
}

.button-secondary {
    border: 1px solid #93c5fd;
    background: #eff6ff;
    color: #0f4c81;
    box-shadow: none;
}

.button-secondary:hover {
    background: #dbeafe;
    color: #0b3b63;
}

.button-light {
    color: #0f4c81;
}

.text-link,
.eyebrow,
.price,
.price-locked,
.breadcrumbs a,
.auth-foot a,
.panel-head a,
.panel-head span,
.cart-art,
.quick-grid span {
    color: #0f4c81;
}

h1,
h2 {
    font-weight: 700;
}

h3 {
    font-weight: 600;
}

h1 {
    font-size: 44px;
}

h2 {
    font-size: 36px;
}

.hero h1 {
    font-size: 54px;
}

.hero {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
}

.hero-grid {
    min-height: 620px;
}

.product-collage-stage {
    display: grid;
    place-items: center;
    isolation: isolate;
}

.product-collage-stage::before {
    content: "";
    position: absolute;
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 115, 190, 0.13), transparent 68%);
    filter: blur(3px);
    z-index: -1;
}

.hero-product-collage {
    position: relative;
    z-index: 2;
    width: 112%;
    max-width: none;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 26px 32px rgba(15, 76, 129, 0.2));
    transform: translateX(-2%);
}

.product-collage-stage .floating-card {
    z-index: 4;
    right: -8px;
    bottom: 30px;
}

.product-collage-stage .orbit {
    z-index: 1;
}

.visual-card,
.category-card,
.product-card,
.account-card,
.panel,
.quote-summary,
.auth-card {
    border-radius: 12px;
}

.visual-card {
    border-color: rgba(15, 76, 129, 0.1);
}

.industrial-shape:before {
    background: linear-gradient(145deg, #1e73be, #0b3b63);
    box-shadow: inset 0 0 0 28px #dbeafe, inset 0 0 0 42px #0f4c81,
        0 24px 35px rgba(15, 76, 129, 0.24);
}

.industrial-shape i,
.product-art i,
.detail-art i,
.orbit {
    border-color: #93c5fd;
}

.status-dot {
    background: #16a34a;
    box-shadow: 0 0 0 5px #dcfce7;
}

.trust-row {
    border-color: #dbe3ee;
}

.category-card:nth-child(3n + 1) {
    --accent: #f58220 !important;
}

.category-card:nth-child(3n + 2) {
    --accent: #1e73be !important;
}

.category-card:nth-child(3n + 3) {
    --accent: #0f4c81 !important;
}

.proof-grid h2 {
    font-size: 36px;
}

.proof-list article {
    border-color: rgba(255, 255, 255, 0.18);
}

.proof-list p {
    color: #dbeafe;
}

.product-art,
.detail-art {
    background: linear-gradient(145deg, #eff6ff, #f8fafc);
}

.product-art span {
    box-shadow: inset 0 0 0 14px #dbeafe, 0 15px 25px #bfdbfe;
}

.detail-art span {
    box-shadow: inset 0 0 0 25px #dbeafe, 0 28px 40px #bfdbfe;
}

.price small {
    font-family: Inter, sans-serif;
}

.page-hero h1,
.product-detail h1 {
    font-size: 44px;
}

input,
select,
textarea,
.catalogue-tools input,
.catalogue-tools select {
    border-color: #e5e7eb;
    border-radius: 10px;
}

.catalogue-tools input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #1e73be;
    box-shadow: 0 0 0 3px #dbeafe;
}

.auth-section {
    background: linear-gradient(135deg, #f8fafc, #eff6ff);
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
}

.auth-options a,
.auth-help {
    color: var(--muted);
}

.auth-options a {
    font-weight: 600;
}

.auth-message-card {
    text-align: center;
}

.auth-symbol {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--mint);
    color: var(--deep);
    font: 800 22px var(--font-heading);
}

.auth-help {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}

.consent-check {
    display: grid !important;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
}

.consent-check input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
}

.consent-check span {
    font-weight: 500;
    line-height: 1.5;
}

.status-pill.email-unverified {
    background: #ffedd5;
    color: #9a3412;
}

.account-card-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--deep);
    font-size: 12px;
    font-weight: 700;
}

.profile-form {
    max-width: 980px;
    margin: 0 auto;
}

.cart-line {
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.cart-line-head {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    gap: 15px;
}

.cart-line-head > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cart-line-head small,
.cart-line-head span {
    color: var(--muted);
    font-size: 11px;
}

.cart-line-fields {
    display: grid;
    grid-template-columns: 100px 130px 1fr auto;
    gap: 10px;
    align-items: end;
    margin: 14px 0 0 70px;
}

.cart-line-fields label {
    color: #374151;
    font-size: 11px;
    font-weight: 600;
}

.cart-line-fields input,
.cart-line-fields select {
    width: 100%;
    margin-top: 5px;
    padding: 9px 10px;
    font-size: 12px;
}

.line-save {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #93c5fd;
    border-radius: var(--radius-sm);
    background: var(--mint);
    color: var(--deep);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.quote-summary label > small {
    color: var(--muted);
    font-weight: 400;
}

.rfq-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.rfq-detail-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 0;
    border-top: 1px solid var(--line);
}

.rfq-detail-line > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rfq-detail-line small,
.rfq-detail-line span {
    color: var(--muted);
    font-size: 11px;
}

.rfq-facts h2 {
    font-size: 21px;
}

.rfq-facts dl {
    margin: 18px 0;
}

.rfq-facts dl > div {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.rfq-facts dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rfq-facts dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.auth-card label,
.registration-form label,
.quote-summary label {
    color: #374151;
}

.portal-head,
.admin-head {
    background: #f8fafc;
}

.portal-head .shell {
    gap: 28px;
}

.page-heading-copy {
    min-width: 0;
}

.page-heading-copy h1 {
    overflow-wrap: anywhere;
}

.status-pill.pending,
.status-pill.pending-review,
.status-pill.new,
.status-pill.in-review {
    background: #fef3c7;
    color: #92400e;
}

.status-pill.rejected,
.status-pill.suspended,
.status-pill.lost,
.status-pill.hidden {
    background: #fee2e2;
    color: #991b1b;
}

.status-pill.quotation-sent {
    background: #dbeafe;
    color: #1e40af;
}

.status-pill.won,
.status-pill.closed {
    background: #dcfce7;
    color: #166534;
}

.dashboard-grid,
.rfq-layout,
.stats-grid,
.admin-grid {
    background: #f8fafc;
}

.status-pill.approved {
    background: #dcfce7;
    color: #166534;
}

.stats-grid article {
    background: #0f4c81;
}

.stats-grid small,
.stats-grid span {
    color: #dbeafe;
}

.copyright {
    border-color: rgba(255, 255, 255, 0.18);
}

.trade-nav {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.trade-nav .shell {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 13px;
}

.trade-nav span {
    color: #0f4c81;
    font-weight: 700;
}

.trade-nav a {
    color: #6b7280;
    font-weight: 500;
}

.trade-nav a:last-child {
    margin-left: auto;
    color: #0f4c81;
    font-weight: 600;
}

.trade-nav a:hover {
    color: #1e73be;
}

.product-art > img,
.detail-art > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 22px;
}

.admin-section-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.admin-section-nav a {
    padding: 10px 16px;
    border-radius: 8px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

.admin-section-nav a.active,
.admin-section-nav a:hover {
    background: #1e73be;
    color: #ffffff;
}

.management-panel {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.management-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.management-head h2 {
    font-size: 22px;
}

.management-head p,
.field-help {
    margin: 5px 0 0;
    color: #6b7280;
    font-size: 12px;
}

.management-table-wrap {
    overflow-x: auto;
}

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

.management-table th {
    padding: 12px 18px;
    background: #f8fafc;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.management-table td {
    padding: 15px 18px;
    border-top: 1px solid #e5e7eb;
    color: #374151;
    font-size: 13px;
    vertical-align: middle;
}

.number-cell {
    width: 70px;
    color: #6b7280 !important;
}

.category-admin-name,
.admin-product-name,
.customer-admin-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-admin-name i {
    width: 12px;
    height: 36px;
    border-radius: 99px;
}

.category-admin-name div,
.admin-product-name div,
.customer-admin-name div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.category-admin-name small,
.admin-product-name small,
.customer-admin-name small,
.customer-admin-name em {
    color: #6b7280;
    font-size: 10px;
}

.customer-admin-name em {
    font-style: normal;
}

.admin-product-name > img,
.admin-product-name > span,
.customer-admin-name > span {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 9px;
    background: #eff6ff;
}

.admin-product-name > img {
    object-fit: contain;
    padding: 4px;
}

.admin-product-name > span,
.customer-admin-name > span {
    display: grid;
    place-items: center;
    color: #0f4c81;
    font-weight: 700;
}

.featured-label {
    display: block;
    margin-top: 5px;
    color: #f58220;
    font-size: 10px;
    font-weight: 700;
}

.actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    white-space: nowrap;
}

.actions-cell a,
.danger-link {
    border: 0;
    background: none;
    color: #0f4c81;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.danger-link {
    color: #b42318;
}

.admin-filter {
    display: grid;
    grid-template-columns: 1fr 230px 160px auto;
    gap: 10px;
    margin-bottom: 20px;
}

.admin-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 20px;
}

.admin-filter-bar .admin-filter {
    margin-bottom: 0;
}

.admin-filter-bar > .button {
    min-height: 43px;
    white-space: nowrap;
}

.customer-filter {
    grid-template-columns: 1fr 220px auto auto;
}

.admin-filter .clear-filters {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: #0f4c81;
    font-size: 12px;
    font-weight: 800;
}

.customer-management-table {
    min-width: 1040px;
}

.customer-action-cell {
    width: 360px;
}

.customer-action-cell form {
    display: grid;
    grid-template-columns: 140px minmax(120px, 1fr) 70px;
    gap: 8px;
    align-items: center;
}

.customer-action-cell select,
.customer-action-cell input {
    width: 100%;
    padding: 8px 9px;
    font-size: 11px;
}

.customer-stats {
    margin-bottom: 24px;
}

.operations-stats {
    grid-template-columns: repeat(4, 1fr);
}

.operations-quick-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: -4px 0 24px;
}

.operations-quick-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 16px;
    border: 1px solid #dbe3ee;
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 76, 129, 0.05);
}

.operations-quick-links b {
    color: #172b3d;
    font-size: 13px;
}

.operations-quick-links span {
    color: #0f4c81;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

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

.operations-grid .admin-rfq {
    gap: 12px;
}

.operations-grid .admin-rfq > div {
    min-width: 0;
    margin-right: auto;
}

.operations-grid .admin-rfq b a,
.approval-row b a {
    color: #172b3d;
}

.quotation-dashboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
}

.quotation-dashboard-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quotation-dashboard-row small {
    color: var(--muted);
    font-size: 11px;
}

.quotation-dashboard-row strong {
    color: #0f4c81;
    font-size: 13px;
    white-space: nowrap;
}

.operations-activity-panel {
    margin-top: 24px;
}

.operations-activity-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}

.customer-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.customer-detail-main,
.customer-detail-side {
    display: grid;
    gap: 20px;
}

.customer-profile-list,
.customer-facts {
    margin: 0;
}

.customer-profile-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}

.customer-profile-list > div,
.customer-facts > div {
    display: grid;
    gap: 4px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.customer-profile-list dt,
.customer-facts dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.customer-profile-list dd,
.customer-facts dd {
    min-width: 0;
    margin: 0;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.customer-profile-list a,
.customer-admin-name a {
    color: #0f4c81;
}

.customer-rfq-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
}

.customer-rfq-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.customer-rfq-row small {
    color: var(--muted);
    font-size: 11px;
}

.customer-status-panel {
    display: grid;
    gap: 14px;
}

.customer-status-panel h3,
.customer-detail-side h3 {
    font-size: 19px;
}

.customer-status-panel form {
    display: grid;
    gap: 12px;
}

.customer-status-panel label {
    color: #374151;
    font-size: 11px;
    font-weight: 700;
}

.customer-status-panel select,
.customer-status-panel textarea {
    width: 100%;
    display: block;
    margin-top: 6px;
}

.admin-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.admin-form-main,
.admin-form-side {
    display: grid;
    gap: 20px;
}

.admin-form .panel h2,
.admin-form .panel h3 {
    margin-bottom: 20px;
}

.admin-form .panel h2 {
    font-size: 22px;
}

.admin-form .panel h3 {
    font-size: 17px;
}

.admin-form label {
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    display: block;
    width: 100%;
    margin-top: 7px;
}

.admin-form input[type="color"] {
    height: 48px;
    padding: 5px;
}

.spec-textarea {
    min-height: 200px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.65;
}

.toggle-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.toggle-row input {
    width: 18px;
    margin: 0;
}

.toggle-row span {
    font-size: 13px;
}

.upload-field {
    display: block;
    padding: 14px;
    border: 1px dashed #93c5fd;
    border-radius: 10px;
    background: #f8fafc;
}

.upload-field input {
    margin: 10px 0 6px;
    font-size: 11px;
}

.upload-field small {
    color: #6b7280;
    font-weight: 400;
}

.admin-image-preview {
    width: 100%;
    max-height: 190px;
    margin-bottom: 14px;
    border-radius: 10px;
    object-fit: contain;
    background: #f8fafc;
}

.admin-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.admin-gallery > div {
    position: relative;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
}

.admin-gallery img {
    width: 100%;
    aspect-ratio: 1;
    display: block;
    object-fit: contain;
}

.admin-gallery small {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 6px;
    border-radius: 99px;
    background: var(--deep);
    color: var(--white);
    font-size: 9px;
    font-weight: 700;
}

.admin-gallery form {
    margin-top: 6px;
    text-align: center;
}

.gallery-upload {
    margin-top: 10px;
}

.document-list {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.document-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.document-list span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.document-list b {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-list small {
    color: var(--muted);
    font-size: 9px;
}

.product-media {
    min-width: 0;
}

.product-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.product-thumbnails img {
    width: 100%;
    aspect-ratio: 1;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
    object-fit: contain;
}

.product-documents {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 50px;
    align-items: start;
    margin-top: 30px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--cream);
}

.product-documents h2 {
    margin-top: 8px;
    font-size: 28px;
}

.product-documents p {
    color: var(--muted);
    font-size: 13px;
}

.document-downloads {
    display: grid;
    gap: 10px;
}

.document-downloads a {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
}

.document-downloads a > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: #fee2e2;
    color: #991b1b;
    font-size: 10px;
    font-weight: 800;
}

.document-downloads a > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.document-downloads b {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-downloads small {
    color: var(--muted);
    font-size: 10px;
}

.document-downloads strong {
    color: var(--deep);
    font-size: 11px;
}

.cancel-link {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.status-pill.clarification-required,
.status-pill.assigned,
.status-pill.responded {
    background: #dbeafe;
    color: #1e40af;
}

.admin-rfq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.admin-rfq-layout > div,
.admin-rfq-side {
    display: grid;
    gap: 20px;
}

.admin-rfq-side label {
    display: block;
    margin-bottom: 12px;
}

.admin-rfq-side input,
.admin-rfq-side select,
.admin-rfq-side textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
}

.activity-row {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.activity-row i {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--secondary);
}

.activity-row p,
.activity-row small {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.inline-note-form {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.inline-note-form textarea {
    width: 100%;
    min-height: 90px;
    margin-top: 6px;
}

.quotation-record {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--mint);
}

.quotation-record small {
    color: var(--muted);
    font-size: 10px;
}

.customer-quotations {
    margin-top: 20px;
}

.customer-quotations > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
}

.customer-quotations > a > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.customer-quotations small,
.enquiry-card > small {
    color: var(--muted);
    font-size: 10px;
}

.enquiry-list {
    display: grid;
    gap: 16px;
}

.enquiry-filter {
    grid-template-columns: 1fr 220px auto auto;
}

.enquiry-card p {
    color: #374151;
    font-size: 13px;
    line-height: 1.6;
}

.enquiry-card h2 a {
    color: #172b3d;
}

.enquiry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
}

.enquiry-card form {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.enquiry-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.enquiry-detail-main,
.enquiry-detail-side {
    display: grid;
    gap: 20px;
}

.enquiry-message {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
    color: #374151;
    font-size: 15px;
    line-height: 1.75;
    white-space: pre-wrap;
}

.enquiry-product-context {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    align-items: center;
}

.enquiry-product-context > div {
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: #eff6ff;
}

.enquiry-product-context img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
}

.enquiry-product-context span {
    color: #0f4c81;
    font-weight: 800;
}

.enquiry-product-context h3 {
    margin: 5px 0 7px;
    font-size: 20px;
}

.enquiry-product-context p,
.enquiry-product-context small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.enquiry-quick-actions {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.enquiry-quick-actions a {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: #0f4c81;
    font-size: 12px;
    font-weight: 800;
}

.product-enquiry {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 50px;
    margin-top: 30px;
    padding: 34px;
    border-radius: var(--radius-md);
    background: var(--deep);
    color: var(--white);
}

.product-enquiry p {
    color: #bfdbfe;
    line-height: 1.6;
}

.product-enquiry label {
    color: #dbeafe;
    font-size: 11px;
    font-weight: 600;
}

.product-enquiry input,
.product-enquiry textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
}

@media (max-width: 850px) {
    .shell {
        width: min(100% - 32px, 1320px);
    }

    .hero h1,
    h1 {
        font-size: 44px;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-nav {
        display: block;
    }

    .trade-nav .shell {
        overflow-x: auto;
        gap: 20px;
        white-space: nowrap;
    }

    .trade-nav a:last-child {
        margin-left: 0;
    }

    .hero-product-collage {
        width: min(760px, 112%);
        transform: none;
    }

    .admin-form {
        grid-template-columns: 1fr;
    }

    .rfq-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-rfq-layout,
    .product-enquiry,
    .customer-detail-layout,
    .enquiry-detail-layout {
        grid-template-columns: 1fr;
    }

    .cart-line-fields {
        grid-template-columns: 100px 130px 1fr;
    }

    .line-save {
        grid-column: 1 / -1;
    }

    .product-documents {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .admin-filter {
        grid-template-columns: 1fr 1fr;
    }

    .admin-filter-bar {
        grid-template-columns: 1fr;
    }

    .operations-stats,
    .operations-quick-links,
    .operations-grid,
    .operations-activity-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .shell {
        width: min(100% - 28px, 1320px);
    }

    .hero h1,
    .page-hero h1,
    .product-detail h1 {
        font-size: 38px;
    }

    h2,
    .proof-grid h2 {
        font-size: 30px;
    }

    .trade-nav span {
        display: none;
    }

    .topline-copy,
    .top-actions > span {
        display: none;
    }

    .topline .shell {
        justify-content: flex-end;
    }

    .brand-logo {
        width: 105px;
        height: 39px;
    }

    .portal-head .shell {
        align-items: flex-start;
    }

    .portal-head .button,
    .portal-head .status-pill {
        align-self: flex-start;
    }

    .hero-product-collage {
        width: 116%;
    }

    .product-collage-stage .floating-card {
        right: -4px;
        bottom: 12px;
    }

    .admin-section-nav {
        overflow-x: auto;
    }

    .admin-filter {
        grid-template-columns: 1fr;
    }

    .management-table {
        min-width: 760px;
    }

    .operations-stats,
    .operations-quick-links,
    .operations-grid,
    .operations-activity-list {
        grid-template-columns: 1fr;
    }

    .operations-quick-links a,
    .quotation-dashboard-row {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .cart-line-fields {
        grid-template-columns: 1fr 1fr;
        margin-left: 0;
    }

    .customer-profile-list {
        grid-template-columns: 1fr;
    }

    .enquiry-product-context {
        grid-template-columns: 1fr;
    }

    .line-remarks,
    .line-save {
        grid-column: 1 / -1;
    }

    .document-downloads a {
        grid-template-columns: 42px 1fr;
    }

    .document-downloads strong {
        grid-column: 2;
    }

    .mobile-nav-panel {
        position: fixed;
        top: 68px;
        right: 14px;
    }
}

/* Product photography must remain fully visible at every card width. */
.product-card .product-art {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4fa;
}

.product-card .product-art > img {
    width: 100% !important;
    height: 100% !important;
    padding: 18px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.product-detail .detail-art > img {
    padding: 28px !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 560px) {
    .product-card .product-art {
        height: 240px;
    }
}

/* Public-site motion system */
.motion-ready .reveal-item {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.99);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.motion-ready .reveal-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.hero-product-collage {
    animation: vov-product-float 7s ease-in-out infinite;
}

.product-collage-stage .floating-card {
    animation: vov-card-float 5.5s ease-in-out 0.5s infinite;
}

.product-collage-stage .orbit-one {
    animation: vov-orbit-spin 24s linear infinite;
}

.product-collage-stage .orbit-two {
    animation: vov-orbit-spin 32s linear reverse infinite;
}

.status-dot {
    animation: vov-status-pulse 2.4s ease-out infinite;
}

.category-card,
.product-card,
.why-cards article {
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s ease,
        border-color 0.32s ease;
}

.category-card:hover,
.product-card:hover {
    transform: translateY(-7px);
}

.motion-ready .reveal-item.is-visible.category-card:hover,
.motion-ready .reveal-item.is-visible.product-card:hover,
.motion-ready .why-cards .reveal-item.is-visible:hover {
    transform: translateY(-7px) scale(1);
}

.category-icon {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-card:hover .category-icon {
    transform: rotate(-5deg) scale(1.08);
}

.product-card .product-art > img {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-art > img {
    transform: scale(1.045);
}

.button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.button::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -55%;
    z-index: -1;
    width: 34%;
    background: rgba(255, 255, 255, 0.22);
    transform: skewX(-18deg);
    transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(15, 76, 129, 0.25);
}

.motion-ready .reveal-item.is-visible.button:hover {
    transform: translateY(-2px) scale(1);
}

.button:hover::after {
    left: 125%;
}

.button:active {
    transform: translateY(0) scale(0.98);
}

.desktop-nav > a {
    position: relative;
}

.desktop-nav > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: #f58220;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.28s ease;
}

.desktop-nav > a:hover::after,
.desktop-nav > a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.faq-list details[open] .faq-answer {
    animation: vov-faq-open 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vov-product-float {
    0%, 100% { transform: translateX(-2%) translateY(0) rotate(0.01deg); }
    50% { transform: translateX(-2%) translateY(-12px) rotate(0.6deg); }
}

@keyframes vov-card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes vov-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes vov-status-pulse {
    0%, 40% { box-shadow: 0 0 0 5px #dcfce7; }
    75% { box-shadow: 0 0 0 11px rgba(220, 252, 231, 0); }
    100% { box-shadow: 0 0 0 5px rgba(220, 252, 231, 0); }
}

@keyframes vov-faq-open {
    from { opacity: 0; transform: translateY(-7px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 850px) {
    .hero-product-collage {
        animation-name: vov-product-float-mobile;
    }

    @keyframes vov-product-float-mobile {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .reveal-item {
        opacity: 1 !important;
        transform: none !important;
    }
}

.legal-hero small {
    display: block;
    margin-top: 18px;
    color: var(--muted);
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.legal-index {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 10px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--cream);
}

.legal-index strong { margin-bottom: 7px; }
.legal-index a { color: var(--muted); font-size: 13px; line-height: 1.4; }
.legal-index a:hover { color: var(--green); }

.legal-content { display: grid; gap: 0; }
.legal-content > section {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 20px;
    padding: 0 0 34px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 120px;
}
.legal-content > section > span {
    color: var(--orange);
    font: 800 13px Manrope, Arial, sans-serif;
}
.legal-content h2 { font-size: 25px; margin-bottom: 12px; }
.legal-content p { margin: 0; color: var(--muted); line-height: 1.75; }

.cookie-consent {
    position: fixed;
    z-index: 100;
    right: 22px;
    bottom: 22px;
    width: min(620px, calc(100% - 44px));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    background: var(--deep);
    color: #fff;
    box-shadow: 0 22px 60px rgba(5, 28, 23, .3);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent strong { font: 800 17px Manrope, Arial, sans-serif; }
.cookie-consent p { margin: 7px 0 0; color: #b9ccc7; font-size: 13px; line-height: 1.55; }
.cookie-consent p a { color: #fff; text-decoration: underline; }
.cookie-actions { display: grid; gap: 8px; min-width: 175px; }
.cookie-actions .button-secondary { border-color: #78948c; color: #fff; background: transparent; }
.footer-cookie-button { padding: 0; border: 0; background: none; color: #92aaa4; text-align: left; font-size: 13px; cursor: pointer; }
.footer-cookie-button:hover { color: #fff; }

@media (max-width: 780px) {
    .legal-layout { grid-template-columns: 1fr; gap: 30px; }
    .legal-index { position: static; }
    .cookie-consent { grid-template-columns: 1fr; }
    .cookie-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .cookie-consent { right: 14px; bottom: 14px; width: calc(100% - 28px); }
    .cookie-actions { grid-template-columns: 1fr; }
}