/*

Theme Name: Xiantai Flavor

Theme URI: https://www.xiantaimaflavorings.com

Description: Professional B2B flavor industry theme for Xi'an Xiantai Flavor Co., Ltd. Inspired by Treatt.com design language.

Version: 1.0.0

Author: Ailly

Text Domain: xiantai-flavor

Tags: b2b, flavor, woocommerce, one-column, custom-menu, featured-images

Requires at least: 6.0

Tested up to: 6.9

Requires PHP: 7.4

License: GPL v2

*/



/* ============================================

   CSS VARIABLES & RESET

   ============================================ */

:root {

    --xtfl-navy: #0a1628;

    --xtfl-navy-light: #111d33;

    --xtfl-primary: #1a5a8c;

    --xtfl-primary-dark: #14467a;

    --xtfl-primary-light: #2a7ab8;

    --xtfl-accent: #d4a843;

    --xtfl-accent-light: #e8c96a;

    --xtfl-white: #ffffff;

    --xtfl-off-white: #f7f9fb;

    --xtfl-light-gray: #eef1f5;

    --xtfl-mid-gray: #c8d1dc;

    --xtfl-text: #2c3e50;

    --xtfl-text-light: #6b7c93;

    --xtfl-text-white: rgba(255,255,255,0.92);

    --xtfl-text-white-dim: rgba(255,255,255,0.6);

    --xtfl-border: #dde4ec;

    --xtfl-radius: 6px;

    --xtfl-radius-lg: 12px;

    --xtfl-shadow: 0 2px 12px rgba(10,22,40,0.06);

    --xtfl-shadow-md: 0 4px 20px rgba(10,22,40,0.1);

    --xtfl-shadow-lg: 0 8px 40px rgba(10,22,40,0.15);

    --xtfl-transition: all 0.3s cubic-bezier(0.4,0,0.2,1);

    --xtfl-container: 1280px;

    --xtfl-container-narrow: 960px;

}



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



html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }



body {

    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    color: var(--xtfl-text);

    background: var(--xtfl-white);

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



h1, h2, h3, h4, h5, h6 {

    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;

    color: var(--xtfl-navy);

    line-height: 1.25;

    font-weight: 700;

}



a { color: var(--xtfl-primary); text-decoration: none; transition: var(--xtfl-transition); }

a:hover { color: var(--xtfl-primary-dark); }



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



.container { max-width: var(--xtfl-container); margin: 0 auto; padding: 0 24px; }

.container-narrow { max-width: var(--xtfl-container-narrow); margin: 0 auto; padding: 0 24px; }



/* ============================================

   SITE HEADER & NAVIGATION

   ============================================ */

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    background: rgba(10,22,40,0.95);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,0.06);

    transition: var(--xtfl-transition);

}



.site-header.scrolled {

    background: rgba(10,22,40,0.98);

    box-shadow: 0 2px 20px rgba(0,0,0,0.2);

}



.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 72px;

    max-width: var(--xtfl-container);

    margin: 0 auto;

    padding: 0 24px;

}



.site-logo a {

    color: var(--xtfl-white);

    font-family: 'Playfair Display', serif;

    font-size: 1.5rem;

    font-weight: 700;

    letter-spacing: -0.5px;

    text-decoration: none;

}



.site-logo .logo-accent { color: var(--xtfl-accent); }



.nav-main { display: flex; align-items: center; gap: 0; }



.nav-main ul {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 4px;

    margin: 0;

    padding: 0;

}



.nav-main ul li a {

    color: var(--xtfl-text-white-dim);

    font-size: 0.9rem;

    font-weight: 500;

    padding: 8px 16px;

    border-radius: var(--xtfl-radius);

    transition: var(--xtfl-transition);

    letter-spacing: 0.3px;

}



.nav-main ul li a:hover,

.nav-main ul li.current-menu-item a {

    color: var(--xtfl-white);

    background: rgba(255,255,255,0.08);

}



.lang-switch a {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 6px 14px !important;

    border: 1px solid rgba(255,255,255,0.2) !important;

    border-radius: 20px !important;

    font-size: 0.8rem !important;

    font-weight: 600 !important;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.lang-switch a:hover {

    background: rgba(255,255,255,0.1) !important;

    border-color: rgba(255,255,255,0.4) !important;

    color: var(--xtfl-white) !important;

}



.nav-cta {

    margin-left: 16px;

}



.nav-cta a {

    display: inline-block;

    padding: 8px 24px;

    background: var(--xtfl-accent);

    color: var(--xtfl-navy) !important;

    font-size: 0.85rem;

    font-weight: 700;

    border-radius: 24px;

    letter-spacing: 0.5px;

    transition: var(--xtfl-transition);

}



.nav-cta a:hover {

    background: var(--xtfl-accent-light);

    transform: translateY(-1px);

    box-shadow: 0 4px 16px rgba(212,168,67,0.3);

}



/* Mobile menu toggle */

.menu-toggle {

    display: none;

    background: none;

    border: none;

    color: var(--xtfl-white);

    font-size: 1.5rem;

    cursor: pointer;

    padding: 8px;

}



/* ============================================

   HERO SECTION — Treatt-inspired Slideshow

   ============================================ */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    background: var(--xtfl-navy);

    overflow: hidden;

}



/* --- Background Slideshow --- */

.hero-slideshow {

    position: absolute;

    inset: 0;

    z-index: 0;

}



.hero-slide {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    opacity: 0;

    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 8s ease-out;

    transform: scale(1.05);

    will-change: opacity, transform;

}



.hero-slide.active {

    opacity: 1;

    transform: scale(1.0);

}



/* Ken Burns zoom on active slide */

@keyframes kenBurns {

    0%   { transform: scale(1.0); }

    100% { transform: scale(1.12); }

}



.hero-slide.active {

    animation: kenBurns 8s ease-out forwards;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background: linear-gradient(

        180deg,

        transparent 0%,

        transparent 70%,

        rgba(10,22,40,0.25) 100%

    );

    pointer-events: none;

}



/* --- Floating Particles --- */

.hero-particles {

    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;

}



.particle {

    position: absolute;

    width: 4px;

    height: 4px;

    background: rgba(212,168,67,0.3);

    border-radius: 50%;

    animation: floatParticle 12s ease-in-out infinite;

}



.particle:nth-child(1) { left: 15%; top: 20%; animation-delay: 0s; animation-duration: 14s; }

.particle:nth-child(2) { left: 70%; top: 35%; animation-delay: 2s; animation-duration: 11s; width: 6px; height: 6px; background: rgba(26,90,140,0.3); }

.particle:nth-child(3) { left: 40%; top: 65%; animation-delay: 4s; animation-duration: 16s; }

.particle:nth-child(4) { left: 85%; top: 80%; animation-delay: 1s; animation-duration: 13s; width: 3px; height: 3px; }

.particle:nth-child(5) { left: 25%; top: 50%; animation-delay: 3s; animation-duration: 15s; width: 5px; height: 5px; background: rgba(255,255,255,0.15); }

.particle:nth-child(6) { left: 60%; top: 15%; animation-delay: 5s; animation-duration: 10s; }



@keyframes floatParticle {

    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }

    25%      { transform: translate(30px, -40px) scale(1.2); opacity: 0.7; }

    50%      { transform: translate(-20px, -80px) scale(0.8); opacity: 0.3; }

    75%      { transform: translate(40px, -30px) scale(1.1); opacity: 0.6; }

}



.hero-content {

    position: relative;

    z-index: 2;

    max-width: var(--xtfl-container);

    margin: 0 auto;

    padding: 120px 24px 80px;

    width: 100%;

}



/* --- Hero Fade-in (Treatt-style staggered) --- */

.hero-fade {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),

                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

}



.hero-loaded .hero-fade {

    opacity: 1;

    transform: translateY(0);

}



.hero-label {

    display: inline-block;

    padding: 6px 18px;

    background: rgba(212,168,67,0.15);

    border: 1px solid rgba(212,168,67,0.3);

    border-radius: 24px;

    color: var(--xtfl-accent);

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 28px;

}



.hero h1 {

    font-size: clamp(2.5rem, 5vw, 4.2rem);

    color: var(--xtfl-white);

    line-height: 1.15;

    margin-bottom: 24px;

    max-width: 720px;

    font-weight: 700;

}



.hero h1 .text-accent { color: var(--xtfl-accent); }



.hero-description {

    font-size: clamp(1.05rem, 1.5vw, 1.25rem);

    color: var(--xtfl-text-white-dim);

    max-width: 560px;

    line-height: 1.7;

    margin-bottom: 24px;

}



/* --- Slide label/sub text --- */

.hero-slide-text {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 32px;

    font-size: 0.9rem;

    color: var(--xtfl-text-white-dim);

}



.hero-slide-text #hero-slide-label {

    font-weight: 600;

    color: var(--xtfl-accent);

    transition: opacity 0.4s ease;

}



.hero-slide-divider {

    width: 24px;

    height: 1px;

    background: var(--xtfl-accent);

    opacity: 0.4;

}



.hero-slide-text .hero-slide-sub {

    font-size: 0.85rem;

    transition: opacity 0.4s ease;

}



.hero-actions {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

}



/* --- Slide Dots --- */

.hero-dots {

    display: flex;

    gap: 10px;

    margin-top: 32px;

}



.hero-dot {

    width: 32px;

    height: 4px;

    border: none;

    border-radius: 2px;

    background: rgba(255,255,255,0.2);

    cursor: pointer;

    transition: all 0.4s ease;

    padding: 0;

}



.hero-dot:hover {

    background: rgba(255,255,255,0.4);

}



.hero-dot.active {

    width: 48px;

    background: var(--xtfl-accent);

}



/* --- Hero Stats --- */

.hero-stats {

    display: flex;

    gap: 48px;

    margin-top: 48px;

    padding-top: 32px;

    border-top: 1px solid rgba(255,255,255,0.08);

}



.hero-stat-number {

    font-family: 'Playfair Display', serif;

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--xtfl-accent);

    line-height: 1;

}



.hero-stat-label {

    font-size: 0.85rem;

    color: var(--xtfl-text-white-dim);

    margin-top: 6px;

    letter-spacing: 0.3px;

}



/* --- Scroll Indicator --- */

.hero-scroll-indicator {

    position: absolute;

    bottom: 32px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: var(--xtfl-text-white-dim);

    font-size: 0.75rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    opacity: 0;

    animation: fadeInScrollHint 1s ease 2s forwards;

}



.hero-scroll-indicator .scroll-arrow {

    animation: bounceArrow 2s ease-in-out infinite;

}



@keyframes fadeInScrollHint {

    to { opacity: 0.6; }

}



@keyframes bounceArrow {

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

    50%      { transform: translateY(6px); }

}



.btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 32px;

    font-family: 'DM Sans', sans-serif;

    font-size: 0.95rem;

    font-weight: 600;

    border-radius: 30px;

    border: none;

    cursor: pointer;

    transition: var(--xtfl-transition);

    text-decoration: none;

    letter-spacing: 0.3px;

}



.btn-primary {

    background: var(--xtfl-accent);

    color: var(--xtfl-navy);

}



.btn-primary:hover {

    background: var(--xtfl-accent-light);

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(212,168,67,0.25);

    color: var(--xtfl-navy);

}



.btn-outline {

    background: transparent;

    color: var(--xtfl-white);

    border: 1.5px solid rgba(255,255,255,0.25);

}



.btn-outline:hover {

    border-color: var(--xtfl-white);

    background: rgba(255,255,255,0.08);

    color: var(--xtfl-white);

}



/* --- Scroll Indicator (new, at hero bottom center) --- */

.scroll-indicator {

    position: absolute;

    bottom: 36px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: var(--xtfl-text-white-dim);

    font-size: 0.7rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: 0;

    animation: fadeInScrollHint 1s ease 2s forwards;

}



.scroll-line {

    width: 1px;

    height: 36px;

    background: linear-gradient(to bottom, var(--xtfl-accent), transparent);

    animation: pulseLine 2s ease-in-out infinite;

}



@keyframes pulseLine {

    0%, 100% { opacity: 0.4; transform: scaleY(1); }

    50%      { opacity: 1; transform: scaleY(1.3); }

}



/* ============================================

   BRAND INTRO (like Treatt: dark bg, centered)

   ============================================ */

.brand-intro {

    background: var(--xtfl-navy);

    padding: 100px 24px;

    position: relative;

}



.brand-intro::after {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at 50% 30%, rgba(26,90,140,0.2) 0%, transparent 60%);

    pointer-events: none;

}



.brand-intro-title {

    font-size: clamp(2rem, 3.5vw, 3rem);

    color: var(--xtfl-white);

    line-height: 1.2;

    margin-bottom: 28px;

    position: relative;

}



.brand-intro-title .text-accent { color: var(--xtfl-accent); }



.brand-intro-lead {

    font-size: clamp(1rem, 1.4vw, 1.2rem);

    color: var(--xtfl-text-white-dim);

    line-height: 1.8;

    max-width: 680px;

    margin: 0 auto;

    position: relative;

}



/* ============================================

   SECTION COOL GRAY (Treatt-style)

   ============================================ */

.section-cool-gray { background: #edf0f4; }

.section-cool-gray .section-title { color: var(--xtfl-navy); }

.section-cool-gray .section-subtitle { color: var(--xtfl-text-light); }



/* ============================================

   TWO-COLUMN INTRO (like Treatt: left heading + right text + stats)

   ============================================ */

.two-col-intro {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 64px;

    align-items: center;

}



.two-col-heading {

    font-size: clamp(1.6rem, 2.5vw, 2.2rem);

    color: var(--xtfl-navy);

    line-height: 1.3;

    font-weight: 700;

}



.two-col-heading .text-accent { color: var(--xtfl-accent); }



.two-col-right p {

    font-size: 1rem;

    color: var(--xtfl-text-light);

    line-height: 1.8;

    margin-bottom: 16px;

}



/* Stats row inside two-col */

.stats-row {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

    margin-top: 36px;

    padding-top: 28px;

    border-top: 1px solid var(--xtfl-border);

}



.stat-item {

    text-align: center;

}



.stat-number {

    font-family: 'Playfair Display', serif;

    font-size: 2.2rem;

    font-weight: 700;

    color: var(--xtfl-accent);

    line-height: 1;

    display: inline;

}



.stat-suffix {

    font-family: 'Playfair Display', serif;

    font-size: 1.6rem;

    font-weight: 700;

    color: var(--xtfl-accent);

}



.stat-label {

    display: block;

    font-size: 0.8rem;

    color: var(--xtfl-text-light);

    margin-top: 6px;

    letter-spacing: 0.3px;

}



/* ============================================

   MARKET CATEGORIES (Treatt-style: image top, color block bottom with huge title + subtitle)

   ============================================ */

.market-categories {

    padding: 80px 0 0;

    background: var(--xtfl-white);

}



.mc-header {

    text-align: center;

    max-width: 820px;

    margin: 0 auto 48px;

    padding: 0 20px;

}



.mc-header .section-label {

    display: inline-block;

    color: var(--xtfl-primary);

    font-family: 'DM Sans', sans-serif;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    margin-bottom: 14px;

    padding-bottom: 0;

    border: none;

}



.mc-header .section-label .arrow-bounce {

    display: inline-block;

    margin-left: 4px;

    color: var(--xtfl-accent);

    animation: arrowBounce 1.5s ease-in-out infinite;

}



.mc-section-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3.6vw, 3rem);

    font-weight: 700;

    color: var(--xtfl-navy);

    line-height: 1.15;

    margin-bottom: 18px;

    letter-spacing: -0.3px;

}



.mc-section-desc {

    font-size: clamp(1rem, 1.4vw, 1.12rem);

    color: var(--xtfl-text);

    line-height: 1.75;

    max-width: 720px;

    margin: 0 auto;

}



.mc-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0;

}



.mc-card {

    position: relative;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    text-decoration: none;

    color: var(--xtfl-white);

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    background: var(--card-color, var(--xtfl-navy));

    min-height: 620px;

}



.mc-card-image {

    position: relative;

    height: 50%;

    overflow: hidden;

    flex-shrink: 0;

}



.mc-card-img-inner {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

}



.mc-card:hover .mc-card-img-inner {

    transform: scale(1.08);

}



.mc-card-content {

    position: relative;

    flex: 1;

    padding: 36px 28px;

    background: var(--card-color, var(--xtfl-navy));

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    transition: background 0.4s ease;

}



.mc-card:hover .mc-card-content {

    background: var(--card-accent, var(--xtfl-primary));

}



.mc-card-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(1.8rem, 2.4vw, 2.6rem);

    font-weight: 700;

    color: var(--xtfl-white);

    line-height: 1;

    margin-bottom: 16px;

    display: flex;

    align-items: baseline;

    gap: 8px;

    text-transform: uppercase;

    letter-spacing: -0.5px;

}



.mc-card-title-text {

    display: inline;

}



.mc-card-arrow {

    display: inline-block;

    font-size: 0.6em;

    color: var(--xtfl-white);

    opacity: 0.85;

    margin-left: 4px;

    animation: arrowBounce 1.6s ease-in-out infinite;

}



.mc-card-subtitle {

    font-size: 0.85rem;

    color: rgba(255,255,255,0.92);

    line-height: 1.45;

    font-weight: 600;

    font-family: 'DM Sans', sans-serif;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    max-width: 90%;

}



@media (max-width: 900px) {

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

    .mc-card { min-height: 520px; }

}



/* ============================================

   OUR PRODUCTS (Treatt-style: left title + right circle product images)

   ============================================ */

.our-products-section {

    background: var(--xtfl-light-gray);

    padding: 110px 0;

}



.our-products-wrap {

    display: grid;

    grid-template-columns: 4fr 6fr;

    gap: 60px;

    align-items: center;

}



.op-left {

    padding-right: 20px;

}



.op-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2.4rem, 4vw, 3.6rem);

    font-weight: 700;

    color: var(--xtfl-navy);

    line-height: 0.95;

    margin-bottom: 24px;

    letter-spacing: -0.5px;

    text-transform: uppercase;

}



.op-title-link {

    color: var(--xtfl-navy);

    text-decoration: none;

    display: inline;

    transition: color 0.3s ease;

}



.op-title-link:hover {

    color: var(--xtfl-primary);

}



.op-arrow {

    display: inline-block;

    color: var(--xtfl-navy);

    margin-left: 8px;

    font-size: 0.5em;

    vertical-align: middle;

    animation: arrowBounce 1.4s ease-in-out infinite;

}



.op-subtitle {

    font-family: 'DM Sans', sans-serif;

    font-size: 1rem;

    color: var(--xtfl-navy);

    line-height: 1.5;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    max-width: 380px;

}



.op-right {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 260px;

}



.op-circles {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    flex-wrap: nowrap;  /* Force single row */

    max-width: 100%;

}



.op-circle {

    display: block;

    border-radius: 50%;

    overflow: hidden;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 6px 24px rgba(0,0,0,0.12);

    background: #fff;

    text-decoration: none;

    border: 3px solid transparent;

    flex-shrink: 0;

    align-self: center;

}



.op-circle:hover {

    transform: scale(1.1) translateY(-4px);

    box-shadow: 0 12px 36px rgba(0,0,0,0.18);

    border-color: var(--xtfl-accent);

}



.op-circle img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



@media (max-width: 900px) {

    .our-products-wrap { grid-template-columns: 1fr; gap: 40px; }

    .op-circles { gap: 12px; }

}



/* ============================================

   OUR CAPABILITIES (Treatt-style: dark blue bg, left title + right large feature image)

   ============================================ */

.our-capabilities-section {

    background: var(--xtfl-navy);

    color: var(--xtfl-white);

    padding: 110px 0;

}



.oc-wrap {

    display: grid;

    grid-template-columns: 5fr 5fr;

    gap: 60px;

    align-items: center;

}



.oc-left {

    padding-right: 20px;

}



.oc-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2.4rem, 4vw, 3.6rem);

    font-weight: 700;

    color: var(--xtfl-white);

    line-height: 0.95;

    margin-bottom: 24px;

    letter-spacing: -0.5px;

    text-transform: uppercase;

}



.oc-arrow {

    display: inline-block;

    color: var(--xtfl-accent);

    margin-left: 8px;

    font-size: 0.5em;

    vertical-align: middle;

    animation: arrowBounce 1.4s ease-in-out infinite;

}



.oc-subtitle {

    font-family: 'DM Sans', sans-serif;

    font-size: 1rem;

    color: var(--xtfl-white);

    line-height: 1.5;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    max-width: 380px;

}



.oc-right {

    display: flex;

    align-items: center;

    justify-content: center;

}



.oc-feature-image {

    width: 100%;

    aspect-ratio: 4 / 3;

    background-size: cover;

    background-position: center;

    border-radius: 4px;

    box-shadow: 0 12px 40px rgba(0,0,0,0.35);

}



@media (max-width: 900px) {

    .oc-wrap { grid-template-columns: 1fr; gap: 40px; }

}



/* ============================================

   SECTION COMMON

   ============================================ */

.section { padding: 100px 0; }

.section-dark { background: var(--xtfl-navy); color: var(--xtfl-text-white); }

.section-light { background: var(--xtfl-off-white); }

.section-white { background: var(--xtfl-white); }



.section-header {

    text-align: center;

    max-width: 640px;

    margin: 0 auto 60px;

}



.section-label {

    display: inline-block;

    padding: 4px 14px;

    background: rgba(26,90,140,0.08);

    border-radius: 20px;

    color: var(--xtfl-primary);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 16px;

}



.section-dark .section-label {

    background: rgba(212,168,67,0.12);

    color: var(--xtfl-accent);

}



.section-title {

    font-size: clamp(2rem, 3vw, 2.8rem);

    margin-bottom: 16px;

}



.section-dark .section-title { color: var(--xtfl-white); }



.section-subtitle {

    font-size: 1.05rem;

    color: var(--xtfl-text-light);

    line-height: 1.7;

}



.section-dark .section-subtitle { color: var(--xtfl-text-white-dim); }



/* ============================================

   CATEGORY CARDS (Treatt-style vertical cards)

   ============================================ */

.categories-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

}



.category-card {

    position: relative;

    border-radius: var(--xtfl-radius-lg);

    overflow: hidden;

    aspect-ratio: 3/4;

    cursor: pointer;

    transition: var(--xtfl-transition);

}



.category-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--xtfl-shadow-lg);

}



.category-card-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);

}



.category-card:hover .category-card-bg {

    transform: scale(1.08);

}



.category-card-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, transparent 30%, rgba(10,22,40,0.85) 100%);

    transition: var(--xtfl-transition);

}



.category-card:hover .category-card-overlay {

    background: linear-gradient(180deg, transparent 20%, rgba(10,22,40,0.9) 100%);

}



.category-card-content {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 32px 28px;

    z-index: 2;

}



.category-card-icon {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: rgba(212,168,67,0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 16px;

    font-size: 1.2rem;

}



.category-card h3 {

    font-family: 'Playfair Display', serif;

    font-size: 1.5rem;

    color: var(--xtfl-white);

    margin-bottom: 8px;

    font-weight: 700;

}



.category-card p {

    font-size: 0.9rem;

    color: var(--xtfl-text-white-dim);

    line-height: 1.5;

    margin-bottom: 16px;

}



.category-card-count {

    font-size: 0.8rem;

    color: var(--xtfl-accent);

    font-weight: 600;

    letter-spacing: 0.5px;

}



.category-card-arrow {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255,255,255,0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--xtfl-white);

    font-size: 0.9rem;

    transition: var(--xtfl-transition);

    z-index: 2;

    opacity: 0;

    transform: translate(-8px, 8px);

}



.category-card:hover .category-card-arrow {

    opacity: 1;

    transform: translate(0, 0);

    background: rgba(255,255,255,0.2);

}



/* ============================================

   PRODUCT SHOWCASE (Horizontal scroll carousel)

   ============================================ */

.product-showcase {

    padding: 60px 0;

    overflow: hidden;

}



.product-carousel-track {

    display: flex;

    gap: 20px;

    animation: scrollCarousel 40s linear infinite;

    width: max-content;

}



.product-carousel-track:hover {

    animation-play-state: paused;

}



@keyframes scrollCarousel {

    0% { transform: translateX(0); }

    100% { transform: translateX(-50%); }

}



.product-card-mini {

    flex-shrink: 0;

    width: 200px;

    background: var(--xtfl-white);

    border-radius: var(--xtfl-radius);

    overflow: hidden;

    box-shadow: var(--xtfl-shadow);

    transition: var(--xtfl-transition);

    border: 1px solid var(--xtfl-border);

}



.product-card-mini:hover {

    transform: translateY(-4px);

    box-shadow: var(--xtfl-shadow-md);

}



.product-card-mini-img {

    height: 200px;

    background: var(--xtfl-light-gray);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.product-card-mini-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.product-card-mini-body {

    padding: 14px 16px;

}



.product-card-mini-body h4 {

    font-family: 'DM Sans', sans-serif;

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--xtfl-text);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.product-card-mini-body .product-cat-tag {

    font-size: 0.75rem;

    color: var(--xtfl-primary);

    font-weight: 500;

    margin-top: 4px;

}



/* ============================================

   WHY US / CAPABILITIES

   ============================================ */

.capabilities-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 32px;

}



.capability-card {

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: var(--xtfl-radius-lg);

    padding: 36px 28px;

    transition: var(--xtfl-transition);

}



.capability-card:hover {

    background: rgba(255,255,255,0.07);

    border-color: rgba(255,255,255,0.1);

    transform: translateY(-4px);

}



.capability-icon {

    width: 52px;

    height: 52px;

    border-radius: var(--xtfl-radius);

    background: rgba(212,168,67,0.12);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.4rem;

    margin-bottom: 20px;

}



.capability-card h3 {

    font-size: 1.2rem;

    color: var(--xtfl-white);

    margin-bottom: 10px;

}



.capability-card p {

    font-size: 0.9rem;

    color: var(--xtfl-text-white-dim);

    line-height: 1.6;

}



/* ============================================

   CTA BANNER

   ============================================ */

.cta-banner {

    position: relative;

    padding: 80px 0;

    background: linear-gradient(135deg, var(--xtfl-primary) 0%, var(--xtfl-primary-dark) 100%);

    text-align: center;

    overflow: hidden;

}



.cta-banner::before {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);

}



.cta-banner h2 {

    font-size: clamp(1.8rem, 3vw, 2.5rem);

    color: var(--xtfl-white);

    margin-bottom: 16px;

}



.cta-banner p {

    font-size: 1.1rem;

    color: rgba(255,255,255,0.8);

    max-width: 520px;

    margin: 0 auto 32px;

}



.cta-banner .btn-primary {

    background: var(--xtfl-accent);

    color: var(--xtfl-navy);

    font-size: 1rem;

    padding: 16px 40px;

}



/* ============================================

   SITE FOOTER

   ============================================ */

.site-footer {

    background: var(--xtfl-navy);

    color: var(--xtfl-text-white-dim);

    padding-top: 80px;

}



.footer-main {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 48px;

    padding-bottom: 60px;

    border-bottom: 1px solid rgba(255,255,255,0.06);

}



.footer-brand .footer-logo {

    font-family: 'Playfair Display', serif;

    font-size: 1.4rem;

    color: var(--xtfl-white);

    font-weight: 700;

    margin-bottom: 16px;

}



.footer-brand .footer-logo .logo-accent { color: var(--xtfl-accent); }



.footer-brand p {

    font-size: 0.9rem;

    line-height: 1.7;

    margin-bottom: 20px;

    max-width: 320px;

}



.footer-social {

    display: flex;

    gap: 12px;

}



.footer-social a {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255,255,255,0.06);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--xtfl-text-white-dim);

    font-size: 0.9rem;

    transition: var(--xtfl-transition);

}



.footer-social a:hover {

    background: rgba(212,168,67,0.2);

    color: var(--xtfl-accent);

}



.footer-col h4 {

    font-family: 'DM Sans', sans-serif;

    font-size: 0.85rem;

    font-weight: 700;

    color: var(--xtfl-white);

    text-transform: uppercase;

    letter-spacing: 1.5px;

    margin-bottom: 20px;

}



.footer-col ul {

    list-style: none;

}



.footer-col ul li {

    margin-bottom: 10px;

}



.footer-col ul li a {

    font-size: 0.9rem;

    color: var(--xtfl-text-white-dim);

    transition: var(--xtfl-transition);

}



.footer-col ul li a:hover {

    color: var(--xtfl-accent);

    padding-left: 4px;

}



.footer-contact-item {

    display: flex;

    gap: 10px;

    align-items: flex-start;

    margin-bottom: 14px;

    font-size: 0.9rem;

}



.footer-contact-item .icon {

    color: var(--xtfl-accent);

    flex-shrink: 0;

    margin-top: 2px;

}



.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 24px 0;

    font-size: 0.8rem;

}



.footer-bottom a {

    color: var(--xtfl-text-white-dim);

}



.footer-bottom a:hover {

    color: var(--xtfl-accent);

}



.footer-legal {

    display: flex;

    gap: 24px;

}



/* ============================================

   ABOUT PAGE

   ============================================ */

.page-hero {

    position: relative;

    padding: 140px 0 80px;

    background: var(--xtfl-navy);

    text-align: center;

    overflow: hidden;

}



.page-hero::before {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at 50% 0%, rgba(26,90,140,0.3) 0%, transparent 60%);

}



.page-hero h1 {

    font-size: clamp(2rem, 4vw, 3rem);

    color: var(--xtfl-white);

    margin-bottom: 16px;

    position: relative;

}



.page-hero .breadcrumb {

    font-size: 0.9rem;

    color: var(--xtfl-text-white-dim);

    position: relative;

}



.page-hero .breadcrumb a { color: var(--xtfl-accent); }



.about-intro {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}



.about-intro-text h2 {

    font-size: 2rem;

    margin-bottom: 20px;

}



.about-intro-text p {

    font-size: 1.05rem;

    line-height: 1.8;

    color: var(--xtfl-text-light);

    margin-bottom: 16px;

}



.about-intro-image {

    border-radius: var(--xtfl-radius-lg);

    overflow: hidden;

    box-shadow: var(--xtfl-shadow-md);

}



.about-intro-image img {

    width: 100%;

    height: 400px;

    object-fit: cover;

}



.about-values {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 32px;

}



.about-value-card {

    text-align: center;

    padding: 40px 28px;

    background: var(--xtfl-off-white);

    border-radius: var(--xtfl-radius-lg);

    transition: var(--xtfl-transition);

}



.about-value-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--xtfl-shadow-md);

}



.about-value-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: rgba(26,90,140,0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    font-size: 1.5rem;

}



.about-value-card h3 {

    font-size: 1.2rem;

    margin-bottom: 10px;

}



.about-value-card p {

    font-size: 0.9rem;

    color: var(--xtfl-text-light);

    line-height: 1.6;

}



/* ============================================

   CONTACT PAGE

   ============================================ */

.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 60px;

}



.contact-info-card {

    background: var(--xtfl-off-white);

    border-radius: var(--xtfl-radius-lg);

    padding: 40px;

}



.contact-info-item {

    display: flex;

    gap: 16px;

    align-items: flex-start;

    margin-bottom: 28px;

}



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



.contact-info-icon {

    width: 48px;

    height: 48px;

    border-radius: var(--xtfl-radius);

    background: rgba(26,90,140,0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    flex-shrink: 0;

}



.contact-info-item h4 {

    font-family: 'DM Sans', sans-serif;

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--xtfl-navy);

    margin-bottom: 4px;

}



.contact-info-item p {

    font-size: 0.9rem;

    color: var(--xtfl-text-light);

}



.contact-form-card {

    background: var(--xtfl-white);

    border-radius: var(--xtfl-radius-lg);

    padding: 40px;

    box-shadow: var(--xtfl-shadow);

    border: 1px solid var(--xtfl-border);

}



.contact-form-card h3 {

    font-size: 1.5rem;

    margin-bottom: 24px;

}



/* CF7 form styling */

.wpcf7-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.wpcf7-form p { margin: 0; }



.wpcf7-form label {

    display: block;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--xtfl-navy);

    margin-bottom: 6px;

}



.wpcf7-form input[type="text"],

.wpcf7-form input[type="email"],

.wpcf7-form input[type="tel"],

.wpcf7-form textarea,

.wpcf7-form select {

    width: 100%;

    padding: 14px 18px;

    border: 1.5px solid var(--xtfl-border);

    border-radius: var(--xtfl-radius);

    font-family: 'DM Sans', sans-serif;

    font-size: 1rem;

    color: var(--xtfl-text);

    background: var(--xtfl-off-white);

    transition: var(--xtfl-transition);

}



.wpcf7-form input:focus,

.wpcf7-form textarea:focus,

.wpcf7-form select:focus {

    outline: none;

    border-color: var(--xtfl-primary);

    box-shadow: 0 0 0 3px rgba(26,90,140,0.1);

    background: var(--xtfl-white);

}



.wpcf7-form textarea { min-height: 140px; resize: vertical; }



.wpcf7-form .wpcf7-submit {

    padding: 14px 40px;

    background: var(--xtfl-primary);

    color: var(--xtfl-white);

    border: none;

    border-radius: 30px;

    font-family: 'DM Sans', sans-serif;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: var(--xtfl-transition);

    align-self: flex-start;

}



.wpcf7-form .wpcf7-submit:hover {

    background: var(--xtfl-primary-dark);

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(26,90,140,0.25);

}



/* ============================================

   PRODUCTS / SHOP PAGE

   ============================================ */

.products-hero {

    position: relative;

    padding: 140px 0 60px;

    background: var(--xtfl-navy);

    text-align: center;

}



.products-filter {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 30px;

    flex-wrap: wrap;

}



.products-filter a {

    padding: 8px 20px;

    border-radius: 24px;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--xtfl-text-white-dim);

    background: rgba(255,255,255,0.06);

    border: 1px solid rgba(255,255,255,0.1);

    transition: var(--xtfl-transition);

}



.products-filter a:hover,

.products-filter a.active {

    color: var(--xtfl-navy);

    background: var(--xtfl-accent);

    border-color: var(--xtfl-accent);

}



.products-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

    padding: 60px 0;

}



.product-item {

    background: var(--xtfl-white);

    border-radius: var(--xtfl-radius-lg);

    overflow: hidden;

    border: 1px solid var(--xtfl-border);

    transition: var(--xtfl-transition);

}



.product-item:hover {

    transform: translateY(-4px);

    box-shadow: var(--xtfl-shadow-md);

    border-color: transparent;

}



.product-item-image {

    height: 240px;

    background: var(--xtfl-light-gray);

    overflow: hidden;

    position: relative;

}



.product-item-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.product-item:hover .product-item-image img {

    transform: scale(1.05);

}



.product-item-badge {

    position: absolute;

    top: 12px;

    left: 12px;

    padding: 4px 12px;

    border-radius: 16px;

    background: var(--xtfl-primary);

    color: var(--xtfl-white);

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.product-item-body {

    padding: 20px;

}



.product-item-body h3 {

    font-family: 'DM Sans', sans-serif;

    font-size: 1rem;

    font-weight: 600;

    color: var(--xtfl-text);

    margin-bottom: 8px;

}



.product-item-body .product-model {

    font-size: 0.8rem;

    color: var(--xtfl-text-light);

    margin-bottom: 12px;

}



.product-item-actions {

    display: flex;

    gap: 8px;

}



.product-item-actions .btn-inquiry {

    flex: 1;

    padding: 10px 16px;

    background: var(--xtfl-primary);

    color: var(--xtfl-white);

    border: none;

    border-radius: var(--xtfl-radius);

    font-size: 0.85rem;

    font-weight: 600;

    text-align: center;

    transition: var(--xtfl-transition);

    text-decoration: none;

}



.product-item-actions .btn-inquiry:hover {

    background: var(--xtfl-primary-dark);

    color: var(--xtfl-white);

}



.product-item-actions .btn-detail {

    padding: 10px 16px;

    background: var(--xtfl-off-white);

    color: var(--xtfl-text);

    border: 1px solid var(--xtfl-border);

    border-radius: var(--xtfl-radius);

    font-size: 0.85rem;

    font-weight: 600;

    text-align: center;

    transition: var(--xtfl-transition);

    text-decoration: none;

}



.product-item-actions .btn-detail:hover {

    border-color: var(--xtfl-primary);

    color: var(--xtfl-primary);

}



/* Pagination */

.products-pagination {

    display: flex;

    justify-content: center;

    gap: 8px;

    padding: 40px 0;

}



.products-pagination a,

.products-pagination span {

    padding: 10px 16px;

    border-radius: var(--xtfl-radius);

    font-size: 0.9rem;

    font-weight: 500;

}



.products-pagination a {

    background: var(--xtfl-off-white);

    color: var(--xtfl-text);

    border: 1px solid var(--xtfl-border);

}



.products-pagination a:hover {

    background: var(--xtfl-primary);

    color: var(--xtfl-white);

    border-color: var(--xtfl-primary);

}



.products-pagination .current {

    background: var(--xtfl-primary);

    color: var(--xtfl-white);

}



/* ============================================

   SINGLE PRODUCT PAGE

   ============================================ */

.single-product-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    padding: 40px 0;

}



.single-product-image {

    border-radius: var(--xtfl-radius-lg);

    overflow: hidden;

    background: var(--xtfl-light-gray);

}



.single-product-image img {

    width: 100%;

    height: auto;

}



.single-product-info h1 {

    font-size: 2rem;

    margin-bottom: 12px;

}



.single-product-meta {

    display: flex;

    gap: 24px;

    margin-bottom: 24px;

    padding-bottom: 24px;

    border-bottom: 1px solid var(--xtfl-border);

}



.single-product-meta span {

    font-size: 0.9rem;

    color: var(--xtfl-text-light);

}



.single-product-meta strong {

    color: var(--xtfl-text);

}



.single-product-description {

    font-size: 1rem;

    line-height: 1.8;

    color: var(--xtfl-text-light);

    margin-bottom: 32px;

}



/* ============================================

   RESPONSIVE

   ============================================ */

@media (max-width: 1024px) {

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

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

    .products-grid { grid-template-columns: repeat(3, 1fr); }

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

    .about-intro { grid-template-columns: 1fr; }

    .contact-grid { grid-template-columns: 1fr; }

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

    .two-col-intro { grid-template-columns: 1fr; gap: 40px; }

    .products-showcase { grid-template-columns: 1fr; }

    .ps-carousel { grid-template-columns: repeat(3, 1fr); }

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

    .capabilities-mini-grid { grid-template-columns: 1fr 1fr; }

}



@media (max-width: 768px) {

    .nav-main { display: none; }

    .menu-toggle { display: block; }

    .nav-main.open {

        display: flex;

        flex-direction: column;

        position: absolute;

        top: 72px;

        left: 0;

        right: 0;

        background: var(--xtfl-navy);

        padding: 24px;

        border-bottom: 1px solid rgba(255,255,255,0.06);

    }

    .nav-main.open ul {

        flex-direction: column;

        width: 100%;

    }

    .nav-main.open ul li a {

        display: block;

        padding: 12px 16px;

    }

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

    .capabilities-grid { grid-template-columns: 1fr; }

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

    .footer-main { grid-template-columns: 1fr; gap: 32px; }

    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

    .about-values { grid-template-columns: 1fr; }

    .single-product-layout { grid-template-columns: 1fr; }

    .news-grid { grid-template-columns: 1fr; }

    .scroll-indicator { display: none; }

    .mc-grid { grid-template-columns: 1fr; }

    .mc-card { min-height: 380px; }

    .two-col-intro { grid-template-columns: 1fr; gap: 32px; }

    .products-showcase { grid-template-columns: 1fr; gap: 32px; }

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

    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .capabilities-mini-grid { grid-template-columns: 1fr; }

    .brand-intro { padding: 60px 24px; }

    .brand-intro-title { font-size: 1.8rem; }

}



@media (max-width: 480px) {

    .categories-grid { grid-template-columns: 1fr; }

    .products-grid { grid-template-columns: 1fr; }

    .hero-content { padding: 100px 16px 60px; }

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

    .section { padding: 60px 0; }

    .ps-carousel { grid-template-columns: 1fr 1fr; }

    .mc-card { min-height: 300px; }

    .stats-row { grid-template-columns: 1fr 1fr; }

}



/* ============================================

   NEWS SECTION (Treatt-style: 3 image cards with View All header)

   ============================================ */

.news-section {

    background: var(--xtfl-light-gray);

    padding: 110px 0;

}



.news-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 48px;

    flex-wrap: wrap;

    gap: 20px;

}



.news-heading {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3vw, 2.6rem);

    font-weight: 700;

    color: var(--xtfl-navy);

    line-height: 1.1;

    margin: 0;

    text-transform: uppercase;

    letter-spacing: -0.5px;

}



.news-heading .op-title-link {

    color: var(--xtfl-navy);

}



.news-view-all {

    background: var(--xtfl-navy);

    color: var(--xtfl-white);

    padding: 14px 28px;

    border-radius: 4px;

    text-decoration: none;

    font-family: 'DM Sans', sans-serif;

    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.news-view-all:hover {

    background: var(--xtfl-primary);

    color: var(--xtfl-white);

    transform: translateY(-2px);

}



.news-view-all span {

    transition: transform 0.3s ease;

}



.news-view-all:hover span {

    transform: translateX(4px);

}



.news-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;

}



.news-card {

    display: flex;

    flex-direction: column;

    background: var(--xtfl-white);

    border-radius: 4px;

    overflow: hidden;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    text-decoration: none;

    box-shadow: 0 2px 8px rgba(0,0,0,0.04);

}



.news-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 16px 40px rgba(0,0,0,0.12);

}



.news-card-image {

    width: 100%;

    aspect-ratio: 16 / 10;

    background-size: cover;

    background-position: center;

    background-color: var(--xtfl-light-gray);

    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



.news-card:hover .news-card-image {

    transform: scale(1.05);

}



.news-card-body {

    padding: 24px 26px 28px;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.news-card-title {

    font-family: 'Playfair Display', serif;

    font-size: 1.2rem;

    color: var(--xtfl-navy);

    margin: 0 0 10px 0;

    line-height: 1.35;

    font-weight: 700;

    transition: color 0.3s ease;

}



.news-card:hover .news-card-title {

    color: var(--xtfl-primary);

}



.news-card-date {

    font-size: 0.85rem;

    color: var(--xtfl-text-light);

    font-weight: 500;

    margin-bottom: 14px;

}



.news-card-excerpt {

    font-size: 0.9rem;

    color: var(--xtfl-text-light);

    line-height: 1.65;

    margin: 0;

    flex: 1;

}



@media (max-width: 900px) {

    .news-grid { grid-template-columns: 1fr; }

    .news-header { flex-direction: column; align-items: flex-start; }

}




/* ============================================
   NEWS PAGE (page-news.php)
   ============================================ */
/* --- Hero Banner --- */
.news-page-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
}
.news-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: newsHeroKen 10s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes newsHeroKen {
    0%   { transform: scale(1.0) translateX(0); }
    100% { transform: scale(1.12) translateX(-2%); }
}
.news-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20,42,73,0.88) 0%, rgba(20,42,73,0.55) 60%, rgba(20,42,73,0.35) 100%);
}
.news-hero-content {
    max-width: 680px;
    padding: 80px 0 60px;
}
.news-hero-tag {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    margin-bottom: 18px;
    border-left: 3px solid var(--xtfl-accent);
    padding-left: 14px;
}
.news-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
    line-height: 1.12;
    letter-spacing: -0.5px;
}
.news-hero-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.65;
    max-width: 520px;
    margin: 0;
}

/* --- Breadcrumb --- */
.news-breadcrumb {
    padding: 18px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: #fff;
}
.news-breadcrumb .container {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--xtfl-text-light);
}
.news-breadcrumb a {
    color: var(--xtfl-text-light);
    text-decoration: none;
    transition: color 0.2s;
}
.news-breadcrumb a:hover { color: var(--xtfl-primary); }
.bc-sep { margin: 0 8px; color: #ccc; }
.bc-current { color: var(--xtfl-navy); font-weight: 600; }

/* --- Featured Article --- */
.news-featured {
    margin-bottom: 56px;
}
.news-featured-link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    transition: all 0.45s cubic-bezier(0.4,0,0.2,1);
}
.news-featured-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.news-featured-image {
    position: relative;
    overflow: hidden;
}
.news-featured-img-inner {
    width: 100%;
    height: 100%;
    min-height: 380px;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.news-featured-link:hover .news-featured-img-inner {
    transform: scale(1.04);
}
.news-featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--xtfl-accent);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 6px 14px;
    border-radius: 3px;
}
.news-featured-body {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.news-featured-cat {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--xtfl-primary);
    margin-bottom: 12px;
}
.news-featured-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    font-weight: 700;
    color: var(--xtfl-navy);
    line-height: 1.3;
    margin: 0 0 16px;
    transition: color 0.3s;
}
.news-featured-link:hover .news-featured-title {
    color: var(--xtfl-primary);
}
.news-featured-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--xtfl-text-light);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.news-meta-dot { color: #ccc; }
.news-featured-excerpt {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--xtfl-text-light);
    line-height: 1.7;
    margin: 0 0 24px;
}
.news-read-more {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--xtfl-primary);
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s;
}
.news-featured-link:hover .news-read-more { gap: 14px; }

/* --- News Grid --- */
.news-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 56px;
}
.news-page-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid rgba(0,0,0,0.04);
}
.news-page-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}
.news-page-card-image {
    position: relative;
    overflow: hidden;
}
.news-page-card-img-inner {
    width: 100%;
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: var(--xtfl-light-gray);
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.news-page-card:hover .news-page-card-img-inner {
    transform: scale(1.05);
}
.news-page-card-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-page-card-cat {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--xtfl-primary);
    margin-bottom: 10px;
}
.news-page-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--xtfl-navy);
    line-height: 1.35;
    margin: 0 0 12px;
    transition: color 0.3s;
}
.news-page-card:hover .news-page-card-title {
    color: var(--xtfl-primary);
}
.news-page-card-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--xtfl-text-light);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.news-page-card-excerpt {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    color: var(--xtfl-text-light);
    line-height: 1.65;
    margin: 0 0 16px;
    flex: 1;
}
.news-page-card-link {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--xtfl-primary);
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s;
}
.news-page-card:hover .news-page-card-link { gap: 12px; }

/* --- Pagination --- */
.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 0 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.news-page-numbers {
    display: flex;
    gap: 6px;
}
.news-page-num,
.news-page-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 4px;
    transition: all 0.25s;
}
.news-page-num {
    color: var(--xtfl-text-light);
    border: 1px solid rgba(0,0,0,0.1);
}
.news-page-num:hover {
    color: var(--xtfl-primary);
    border-color: var(--xtfl-primary);
}
.news-page-active {
    background: var(--xtfl-navy);
    color: #fff !important;
    border-color: var(--xtfl-navy) !important;
}
.news-page-btn {
    color: var(--xtfl-navy);
    display: flex;
    align-items: center;
    gap: 6px;
}
.news-page-btn:hover {
    color: var(--xtfl-primary);
    transform: translateX(2px);
}
.news-page-prev:hover { transform: translateX(-2px); }

/* --- Empty State --- */
.news-empty {
    text-align: center;
    padding: 80px 20px;
}
.news-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
}
.news-empty h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--xtfl-navy);
    margin: 0 0 12px;
}
.news-empty p {
    color: var(--xtfl-text-light);
    font-size: 1rem;
    margin: 0 0 28px;
}
.news-empty-btn {
    display: inline-block;
    background: var(--xtfl-navy);
    color: #fff;
    padding: 14px 32px;
    border-radius: 4px;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    transition: all 0.3s;
}
.news-empty-btn:hover {
    background: var(--xtfl-primary);
    transform: translateY(-2px);
}

/* --- CTA Section --- */
.news-cta-section {
    background: var(--xtfl-light-gray);
}
.news-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: linear-gradient(135deg, var(--xtfl-navy) 0%, #1a3a5c 100%);
    border-radius: 12px;
    padding: 56px 60px;
    overflow: hidden;
    position: relative;
}
.news-cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(216,158,79,0.15) 0%, transparent 70%);
    border-radius: 50%;
}
.news-cta-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.2;
}
.news-cta-text p {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    margin: 0;
    line-height: 1.6;
    max-width: 460px;
}
.news-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--xtfl-accent);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 16px 36px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.35s;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.news-cta-btn:hover {
    background: #c78a3a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(216,158,79,0.3);
    gap: 16px;
}

/* --- Data Reveal Animation --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}
.news-featured[data-reveal] { transition-delay: 0.1s; }
.news-page-grid[data-reveal] { transition-delay: 0.2s; }
.news-pagination[data-reveal] { transition-delay: 0.3s; }
.news-cta-box[data-reveal] { transition-delay: 0.15s; }

/* --- News Page Responsive --- */
@media (max-width: 1024px) {
    .news-featured-link { grid-template-columns: 1fr; }
    .news-featured-img-inner { min-height: 280px; }
    .news-page-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .news-cta-box { flex-direction: column; text-align: center; padding: 40px 32px; }
    .news-cta-text p { max-width: 100%; }
}
@media (max-width: 640px) {
    .news-page-grid { grid-template-columns: 1fr; }
    .news-featured-body { padding: 28px 24px; }
    .news-hero-content { padding: 50px 0 40px; }
    .news-cta-box { padding: 32px 20px; }
}

/* ============================================

   FLOATING CONTACT BUTTONS

   ============================================ */

.floating-buttons {

    position: fixed;

    bottom: 28px;

    right: 28px;

    z-index: 9999;

}



.floating-btn-wrap {

    display: flex;

    flex-direction: column-reverse;

    align-items: center;

    gap: 12px;

}



.floating-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    outline: none;

}



.floating-btn-main {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: var(--xtfl-primary);

    color: var(--xtfl-white);

    box-shadow: 0 4px 20px rgba(26,90,140,0.35);

    z-index: 2;

}



.floating-btn-main:hover {

    background: var(--xtfl-primary-dark);

    transform: scale(1.08);

    box-shadow: 0 6px 28px rgba(26,90,140,0.45);

}



.floating-btn-main.active {

    background: var(--xtfl-navy);

    transform: rotate(45deg);

}



.floating-btn-sub {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    opacity: 0;

    transform: translateY(20px) scale(0.6);

    pointer-events: none;

    color: var(--xtfl-white);

}



.floating-buttons.open .floating-btn-sub {

    opacity: 1;

    transform: translateY(0) scale(1);

    pointer-events: auto;

}



.floating-buttons.open .fb-whatsapp { transition-delay: 0.05s; }

.floating-buttons.open .fb-email    { transition-delay: 0.1s; }

.floating-buttons.open .fb-phone    { transition-delay: 0.15s; }



.fb-whatsapp {

    background: #25D366;

    box-shadow: 0 3px 14px rgba(37,211,102,0.35);

}

.fb-whatsapp:hover {

    background: #20bd5a;

    transform: scale(1.12) !important;

}



.fb-email {

    background: var(--xtfl-primary);

    box-shadow: 0 3px 14px rgba(26,90,140,0.3);

}

.fb-email:hover {

    background: var(--xtfl-primary-dark);

    transform: scale(1.12) !important;

}



.fb-phone {

    background: #0078D4;

    box-shadow: 0 3px 14px rgba(0,120,212,0.3);

}

.fb-phone:hover {

    background: #006abc;

    transform: scale(1.12) !important;

}



/* Tooltip labels */

.floating-btn-sub::after {

    content: attr(aria-label);

    position: absolute;

    right: 60px;

    white-space: nowrap;

    background: var(--xtfl-navy);

    color: var(--xtfl-white);

    font-size: 0.8rem;

    font-weight: 500;

    padding: 6px 14px;

    border-radius: 6px;

    opacity: 0;

    transform: translateX(8px);

    transition: all 0.2s ease;

    pointer-events: none;

    font-family: 'DM Sans', sans-serif;

}



.floating-btn-sub:hover::after {

    opacity: 1;

    transform: translateX(0);

}



/* ============================================

   SCROLL REVEAL ANIMATIONS (Treatt-style)

   ============================================ */

@keyframes arrowBounce {

    0%, 100% { transform: translateX(0); }

    50% { transform: translateX(8px); }

}



.reveal-up {

    opacity: 0;

    transform: translateY(40px);

    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),

                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);

}



.reveal-up.revealed {

    opacity: 1;

    transform: translateY(0);

}



/* Section background reveal */

[data-reveal] {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.5s ease;

}



[data-reveal].revealed {

    opacity: 1;

    transform: translateY(0);

}



/* Old animate-in compat */

.animate-in {

    opacity: 0;

    transform: translateY(24px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.animate-in.visible {

    opacity: 1;

    transform: translateY(0);

}



.animate-in:nth-child(1) { transition-delay: 0.1s; }

.animate-in:nth-child(2) { transition-delay: 0.2s; }

.animate-in:nth-child(3) { transition-delay: 0.3s; }

.animate-in:nth-child(4) { transition-delay: 0.4s; }



@keyframes fadeInUp {

    from { opacity: 0; transform: translateY(24px); }

    to { opacity: 1; transform: translateY(0); }

}



/* ============================================

   UTILITY

   ============================================ */

.text-center { text-align: center; }

.text-accent { color: var(--xtfl-accent); }

.text-primary { color: var(--xtfl-primary); }

.mb-0 { margin-bottom: 0; }

.mb-16 { margin-bottom: 16px; }

.mb-24 { margin-bottom: 24px; }

.mb-32 { margin-bottom: 32px; }

.mt-40 { margin-top: 40px; }



/* WooCommerce overrides */

.woocommerce .products .product,

.woocommerce-page .products .product {

    margin: 0;

    padding: 0;

    width: auto;

}



.woocommerce-result-count,

.woocommerce-ordering {

    font-family: 'DM Sans', sans-serif;

    font-size: 0.9rem;

    color: var(--xtfl-text-light);

}



/* Hide WooCommerce default things we don't need */

.woocommerce .price,

.woocommerce div.product .product_title,

.woocommerce div.product .woocommerce-tabs {

    display: none;

}



/* WP Super Cache & general */

#wpadminbar { display: none !important; }



/* ============================================

   ABOUT US PAGE STYLES

   ============================================ */



/* Full-width hero banner (no text, no blue block - just the image) */

.about-banner {

    position: relative;

    width: 100%;

    overflow: hidden;

    height: clamp(360px, 50vw, 580px);

}

.about-banner-img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    transition: transform 0.6s ease;

    opacity: 0;

}

.about-banner-slide {

    animation: bannerCrossfade 8s ease-in-out infinite;

}

.about-banner-slide.active {

    opacity: 1;

}

#about-slide-1 { animation-delay: 0s; }

#about-slide-2 { animation-delay: 4s; }

@keyframes bannerCrossfade {

    0%   { opacity: 0; }

    10%  { opacity: 1; }

    45%  { opacity: 1; }

    55%  { opacity: 0; }

    100% { opacity: 0; }

}

.about-banner:hover .about-banner-img {

    transform: scale(1.02);

}



/* Duo banner section - 2 images side by side */

.about-banners-duo {

    padding: 0;

    background: #f8f9fa;

}

.about-banners-duo-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

    width: 100%;

}

.about-banner-item {

    position: relative;

    overflow: hidden;

    height: clamp(280px, 35vw, 420px);

}

.about-banner-item-img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    transition: transform 0.6s ease;

}

.about-banner-item:hover .about-banner-item-img {

    transform: scale(1.04);

}

@media (max-width: 768px) {

    .about-banners-duo-grid { grid-template-columns: 1fr; }

}



/* Two-column intro */

.about-two-col {

    display: grid;

    grid-template-columns: 1fr 1.4fr;

    gap: 64px;

    align-items: start;

}

.about-col-left { position: sticky; top: 120px; }

.about-section-title {

    font-size: clamp(2rem, 3.5vw, 3rem);

    line-height: 1.15;

    margin-top: 12px;

    color: var(--xtfl-navy);

}

.about-lead {

    font-size: 1.1rem;

    color: var(--xtfl-text);

    line-height: 1.8;

    margin-bottom: 16px;

}



/* Alternating sections - Treatt-style */

.about-alt-section { padding: 80px 0; }

.about-alt-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 48px;

    align-items: center;

}

.about-alt-image {

    position: relative;

    border-radius: var(--xtfl-radius-lg);

    overflow: hidden;

}

.about-alt-img-inner {

    width: 100%;

    height: 380px;

    background-size: cover;

    background-position: center;

    transition: transform 0.5s ease;

}

.about-alt-image:hover .about-alt-img-inner {

    transform: scale(1.04);

}



.about-alt-text { padding: 0 16px; }

.about-alt-title {

    font-size: clamp(1.8rem, 2.8vw, 2.5rem);

    color: var(--xtfl-navy);

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    gap: 8px;

}

.about-alt-title .arrow-bounce {

    display: inline-block;

    color: var(--xtfl-accent);

    font-size: 0.7em;

    animation: arrowBounce 1.5s ease-in-out infinite;

}

.about-alt-text p {

    color: var(--xtfl-text);

    line-height: 1.8;

    margin-bottom: 14px;

    font-size: 1.02rem;

}



/* Swap order on alternating sections */

.about-swap .about-alt-row { direction: rtl; }

.about-swap .about-alt-image,

.about-swap .about-alt-text { direction: ltr; }



/* Capability cards */

.about-capabilities { padding: 80px 0; }

.about-cap-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

    margin-top: 48px;

}

.about-cap-card {

    background: var(--cap-color, var(--xtfl-navy-light));

    border-radius: var(--xtfl-radius-lg);

    padding: 36px 28px;

    transition: var(--xtfl-transition);

    position: relative;

    overflow: hidden;

}

.about-cap-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);

    pointer-events: none;

}

.about-cap-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 12px 40px rgba(0,0,0,0.3);

}

.about-cap-card .cap-icon {

    font-size: 2.2rem;

    margin-bottom: 18px;

}

.about-cap-card h3 {

    color: var(--xtfl-white);

    font-size: 1.2rem;

    margin-bottom: 12px;

    font-family: 'DM Sans', sans-serif;

    font-weight: 700;

}

.about-cap-card p {

    color: var(--xtfl-text-white-dim);

    font-size: 0.92rem;

    line-height: 1.7;

}



/* Industries grid */

.about-industries { padding: 80px 0; }

.about-ind-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 20px;

    margin-top: 48px;

}

.about-ind-item {

    text-align: center;

    padding: 32px 16px;

    border-radius: var(--xtfl-radius-lg);

    background: var(--xtfl-off-white);

    border: 1px solid var(--xtfl-border);

    transition: var(--xtfl-transition);

}

.about-ind-item:hover {

    border-color: var(--xtfl-primary);

    background: var(--xtfl-light-gray);

    transform: translateY(-4px);

    box-shadow: var(--xtfl-shadow-md);

}

.about-ind-item .ind-icon {

    font-size: 2.4rem;

    margin-bottom: 12px;

}

.about-ind-item h4 {

    font-family: 'DM Sans', sans-serif;

    font-size: 0.88rem;

    font-weight: 600;

    color: var(--xtfl-navy);

}



/* Stats bar */

.about-stats-bar {

    padding: 64px 0;

    background: linear-gradient(135deg, var(--xtfl-navy) 0%, var(--xtfl-primary-dark) 100%);

}

.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 32px;

    text-align: center;

}

.stat-item { position: relative; }

.stat-number {

    font-family: 'Playfair Display', serif;

    font-size: 3rem;

    font-weight: 700;

    color: var(--xtfl-accent);

    display: inline;

}

.stat-suffix {

    font-family: 'Playfair Display', serif;

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--xtfl-accent);

    display: inline;

}

.stat-label {

    font-size: 0.9rem;

    color: var(--xtfl-text-white-dim);

    margin-top: 8px;

}



/* Responsive */

@media (max-width: 1024px) {

    .about-two-col { grid-template-columns: 1fr; gap: 32px; }

    .about-col-left { position: static; }

    .about-alt-row { grid-template-columns: 1fr; gap: 32px; }

    .about-swap .about-alt-row { direction: ltr; }

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

    .about-ind-grid { grid-template-columns: repeat(3, 1fr); }

    .about-full-img-inner { height: 320px; }

}

@media (max-width: 640px) {

    .about-cap-grid { grid-template-columns: 1fr; }

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

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

    .about-full-img-inner { height: 220px; }

    .about-hero { min-height: 45vh; }

    .about-alt-section { padding: 48px 0; }

}



/* ============================================

   CATEGORY PAGE (Treatt beverage-style)

   ============================================ */



/* Category Hero */

.category-hero {

    position: relative;

    min-height: 56vh;

    display: flex;

    align-items: flex-end;

    padding: 60px 0 56px;

    overflow: hidden;

}

.category-hero-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    z-index: 0;

}

.category-hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg,

        rgba(10,22,40,0.35) 0%,

        rgba(10,22,40,0.55) 50%,

        rgba(10,22,40,0.85) 100%);

    z-index: 1;

}

.category-hero .container {

    width: 100%;

    color: var(--xtfl-white);

}

.category-hero .breadcrumb {

    font-size: 0.85rem;

    color: var(--xtfl-text-white-dim);

    margin-bottom: 14px;

    letter-spacing: 0.5px;

}

.category-hero .breadcrumb a {

    color: var(--xtfl-text-white-dim);

    text-decoration: none;

    transition: color 0.2s;

}

.category-hero .breadcrumb a:hover { color: var(--xtfl-accent); }

.category-hero .breadcrumb .current {

    color: var(--xtfl-accent);

    font-weight: 600;

}

.category-h1 {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2.8rem, 6vw, 4.8rem);

    font-weight: 700;

    line-height: 1.05;

    color: var(--xtfl-white);

    margin-bottom: 18px;

    letter-spacing: -0.5px;

}

.category-tagline {

    font-family: 'Playfair Display', serif;

    font-size: clamp(1.2rem, 2vw, 1.6rem);

    color: var(--xtfl-text-white-dim);

    font-style: italic;

    font-weight: 400;

    line-height: 1.4;

    max-width: 700px;

}



/* Category Intro (Two-column) */

.category-intro {

    background: var(--xtfl-white);

    padding: 90px 0;

}

.category-intro-wrap {

    display: grid;

    grid-template-columns: 1fr 1.6fr;

    gap: 64px;

    align-items: start;

}

.ci-left {

    position: sticky;

    top: 120px;

}

.ci-left .section-label {

    display: inline-block;

    color: var(--xtfl-primary);

    font-family: 'DM Sans', sans-serif;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    margin-bottom: 14px;

}

.ci-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3.4vw, 2.8rem);

    font-weight: 700;

    color: var(--xtfl-navy);

    line-height: 1.15;

    letter-spacing: -0.3px;

}

.ci-right p {

    font-size: 1.05rem;

    color: var(--xtfl-text);

    line-height: 1.85;

    margin-bottom: 18px;

}



/* Subcategory Cards Grid */

.category-subcats {

    background: var(--xtfl-off-white);

    padding: 90px 0;

    border-top: 1px solid var(--xtfl-border);

    border-bottom: 1px solid var(--xtfl-border);

}

.cs-header {

    text-align: center;

    margin-bottom: 48px;

}

.cs-header .section-label {

    display: inline-block;

    color: var(--xtfl-primary);

    font-family: 'DM Sans', sans-serif;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    margin-bottom: 14px;

}

.cs-header .arrow-bounce {

    display: inline-block;

    margin-left: 4px;

    color: var(--xtfl-accent);

    animation: arrowBounce 1.5s ease-in-out infinite;

}

.cs-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3.4vw, 2.8rem);

    font-weight: 700;

    color: var(--xtfl-navy);

    line-height: 1.15;

    margin-bottom: 0;

}

.cs-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}

.cs-card {

    background: var(--xtfl-white);

    border: 1px solid var(--xtfl-border);

    border-radius: var(--xtfl-radius-lg);

    padding: 32px 18px;

    text-align: center;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    cursor: pointer;

}

.cs-card:hover {

    border-color: var(--xtfl-primary);

    background: var(--xtfl-light-gray);

    transform: translateY(-4px);

    box-shadow: var(--xtfl-shadow-md);

}

.cs-icon {

    font-size: 2.4rem;

    margin-bottom: 12px;

    line-height: 1;

}

.cs-name {

    font-family: 'DM Sans', sans-serif;

    font-size: 0.92rem;

    font-weight: 600;

    color: var(--xtfl-navy);

    line-height: 1.3;

}



/* Products section */

.category-products {

    background: var(--xtfl-white);

    padding: 90px 0;

}

.cp-header {

    text-align: center;

    margin-bottom: 32px;

}

.cp-header .section-label {

    display: inline-block;

    color: var(--xtfl-primary);

    font-family: 'DM Sans', sans-serif;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    margin-bottom: 14px;

}

.cp-header .arrow-bounce {

    display: inline-block;

    margin-left: 4px;

    color: var(--xtfl-accent);

    animation: arrowBounce 1.5s ease-in-out infinite;

}

.cp-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3.4vw, 2.8rem);

    font-weight: 700;

    color: var(--xtfl-navy);

    line-height: 1.15;

    margin-bottom: 16px;

}

.cp-subtitle {

    font-size: 1rem;

    color: var(--xtfl-text);

    max-width: 620px;

    margin: 0 auto;

    line-height: 1.7;

}



/* Filter bar */

.products-filter-bar {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: center;

    padding: 16px 0;

    border-top: 1px solid var(--xtfl-border);

    border-bottom: 1px solid var(--xtfl-border);

    margin-bottom: 0;

}

.filter-btn {

    padding: 10px 20px;

    border-radius: 100px;

    background: var(--xtfl-off-white);

    color: var(--xtfl-text);

    text-decoration: none;

    font-family: 'DM Sans', sans-serif;

    font-weight: 600;

    font-size: 0.88rem;

    transition: all 0.25s ease;

    border: 1px solid var(--xtfl-border);

}

.filter-btn:hover {

    background: var(--xtfl-light-gray);

    border-color: var(--xtfl-primary);

    color: var(--xtfl-primary);

}

.filter-btn.active {

    background: var(--xtfl-navy);

    color: var(--xtfl-white);

    border-color: var(--xtfl-navy);

}



/* Responsive */

@media (max-width: 1024px) {

    .category-intro-wrap { grid-template-columns: 1fr; gap: 32px; }

    .ci-left { position: static; }

    .cs-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

}

@media (max-width: 640px) {

    .category-hero { min-height: 44vh; padding: 40px 0; }

    .category-intro, .category-subcats, .category-products { padding: 56px 0; }

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

    .products-filter-bar { gap: 6px; }

    .filter-btn { padding: 8px 14px; font-size: 0.8rem; }

}

/* ============================================

   CATEGORY PAGE — Narrative sections

   ============================================ */

.cat-narrative {

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}

.cat-narrative + .cat-narrative {

    padding-top: 40px;

}

.cat-narrative-left {

    background: #ffffff;

}

.cat-narrative-right {

    background: #f7f9fc;

}

.cat-narrative-wrap {

    display: grid;

    grid-template-columns: 1.05fr 1fr;

    gap: 80px;

    align-items: center;

    max-width: 1200px;

    margin: 0 auto;

}

.cat-narrative-right .cat-narrative-wrap {

    grid-template-columns: 1fr 1.05fr;

}

.cat-narrative-right .cat-narrative-image {

    order: -1;

}

.cat-narrative-text {

    position: relative;

}

.cat-narrative-text .section-label {

    display: inline-block;

    font-family: 'DM Sans', sans-serif;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.22em;

    color: var(--xtfl-accent);

    text-transform: uppercase;

    margin-bottom: 20px;

}

.cat-narrative-title {

    font-family: 'Playfair Display', serif;

    font-size: 2.4rem;

    font-weight: 700;

    line-height: 1.15;

    color: var(--xtfl-navy);

    margin: 0 0 18px 0;

    letter-spacing: -0.01em;

}

.cat-narrative-subtitle {

    font-family: 'DM Sans', sans-serif;

    font-size: 1.15rem;

    font-weight: 500;

    line-height: 1.5;

    color: var(--xtfl-text);

    margin: 0 0 18px 0;

    font-style: italic;

}

.cat-narrative-para {

    font-family: 'DM Sans', sans-serif;

    font-size: 1rem;

    line-height: 1.75;

    color: var(--xtfl-text);

    margin: 0 0 16px 0;

}

.cat-narrative-image {

    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 4px;

    box-shadow: 0 20px 60px -20px rgba(13, 33, 55, 0.35);

}

.cat-narrative-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);

}

.cat-narrative-image:hover img {

    transform: scale(1.04);

}

.cat-narrative-img-accent {

    position: absolute;

    width: 56%;

    height: 56%;

    border: 2px solid var(--xtfl-accent);

    z-index: -1;

    top: 20px;

    left: 20px;

    transition: all 0.4s ease;

}

.cat-narrative-right .cat-narrative-img-accent {

    left: auto;

    right: 20px;

}

.cat-narrative-image:hover .cat-narrative-img-accent {

    top: 16px;

    left: 16px;

    width: 60%;

    height: 60%;

}

.cat-narrative-right .cat-narrative-image:hover .cat-narrative-img-accent {

    left: auto;

    right: 16px;

}

.cat-narrative-placeholder {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, var(--xtfl-light-gray) 0%, #e0e6ee 100%);

}



/* ============================================

   CATEGORY PAGE — Subcategory cards with images

   ============================================ */

.cs-grid-with-images {

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}

.cs-card.cs-card-image {

    background: #ffffff;

    border: 1px solid var(--xtfl-border);

    border-radius: 4px;

    overflow: hidden;

    padding: 0;

    text-align: left;

    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);

    display: flex;

    flex-direction: column;

}

.cs-card.cs-card-image:hover {

    transform: translateY(-4px);

    box-shadow: 0 18px 40px -16px rgba(13, 33, 55, 0.25);

    border-color: var(--xtfl-accent);

}

.cs-card-img {

    width: 100%;

    aspect-ratio: 16 / 10;

    background-size: cover;

    background-position: center;

    position: relative;

    overflow: hidden;

}

.cs-card-img-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(10, 22, 40, 0) 50%, rgba(10, 22, 40, 0.55) 100%);

    transition: opacity 0.4s ease;

}

.cs-card.cs-card-image:hover .cs-card-img {

    transform: scale(1.02);

}

.cs-card.cs-card-image:hover .cs-card-img-overlay {

    background: linear-gradient(180deg, rgba(10, 22, 40, 0.1) 0%, rgba(10, 22, 40, 0.65) 100%);

}

.cs-card-body {

    padding: 22px 22px 24px;

    flex: 1;

    display: flex;

    flex-direction: column;

}

.cs-card.cs-card-image .cs-name {

    font-family: 'Playfair Display', serif;

    font-size: 1.25rem;

    font-weight: 600;

    color: var(--xtfl-navy);

    margin: 0 0 10px 0;

    line-height: 1.25;

}

.cs-card.cs-card-image .cs-desc {

    font-family: 'DM Sans', sans-serif;

    font-size: 0.88rem;

    line-height: 1.55;

    color: var(--xtfl-text);

    margin: 0 0 14px 0;

    flex: 1;

}

.cs-card-link {

    font-family: 'DM Sans', sans-serif;

    font-size: 0.82rem;

    font-weight: 600;

    color: var(--xtfl-accent);

    text-decoration: none;

    letter-spacing: 0.04em;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    transition: gap 0.25s ease, color 0.25s ease;

}

.cs-card-link:hover {

    color: var(--xtfl-navy);

    gap: 8px;

}

.cs-card-link span {

    font-size: 1rem;

    transition: transform 0.25s ease;

}



/* Make icon-only cards consistent in height with image cards */

.cs-card.cs-card-icon {

    min-height: 220px;

    padding: 32px 22px;

}



/* Subcategory header subtitle */

.cs-subtitle {

    font-family: 'DM Sans', sans-serif;

    font-size: 1rem;

    line-height: 1.6;

    color: var(--xtfl-text-light);

    max-width: 720px;

    margin: 12px auto 0;

    text-align: center;

}



/* ============================================

   RESPONSIVE

   ============================================ */

@media (max-width: 1024px) {

    .cat-narrative-wrap,

    .cat-narrative-right .cat-narrative-wrap {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .cat-narrative-right .cat-narrative-image {

        order: 0;

    }

    .cat-narrative-title {

        font-size: 2rem;

    }

    .cs-grid-with-images {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 640px) {

    .cat-narrative {

        padding: 56px 0;

    }

    .cat-narrative + .cat-narrative {

        padding-top: 24px;

    }

    .cat-narrative-title {

        font-size: 1.65rem;

    }

    .cat-narrative-subtitle {

        font-size: 1.02rem;

    }

    .cat-narrative-img-accent {

        display: none;

    }

    .cs-grid-with-images {

        grid-template-columns: 1fr;

    }

    .cs-card.cs-card-image .cs-name {

        font-size: 1.1rem;

    }

}



/* ============================================

   ABOUT US — TEXT-ONLY ALTERNATING SECTIONS

   ============================================ */

.about-alt-text-only {

    max-width: 880px;

    margin: 0 auto;

    text-align: center;

    padding: 16px 24px;

}

.about-alt-text-only .about-alt-title {

    justify-content: center;

}



/* ============================================

   STATS COUNTER — FLICKER & FLASH ANIMATION

   ============================================ */

.stat-number-wrap {

    display: inline-block;

    position: relative;

}

.stat-number {

    display: inline-block;

    transition: color 0.2s ease;

    font-variant-numeric: tabular-nums;

}

/* Flickering during count-up AND continuous jitter — rapid opacity + glow */

@keyframes statFlicker {

    0%   { opacity: 1;    text-shadow: 0 0 10px rgba(216,158,79,0.7); }

    18%  { opacity: 0.45; text-shadow: 0 0 18px rgba(216,158,79,0.95); }

    36%  { opacity: 1;    text-shadow: 0 0 24px rgba(216,158,79,1); }

    54%  { opacity: 0.35; text-shadow: 0 0 14px rgba(216,158,79,0.8); }

    72%  { opacity: 0.92; text-shadow: 0 0 22px rgba(216,158,79,0.9); }

    100% { opacity: 1;    text-shadow: 0 0 16px rgba(216,158,79,0.85); }

}

.stat-number-flickering {

    animation: statFlicker 0.16s linear infinite;

    color: var(--xtfl-accent);

}

/* One-shot flash when counter reaches target */

@keyframes statFlash {

    0%   {

        transform: scale(1);

        text-shadow: 0 0 0 rgba(216,158,79,0);

        color: var(--xtfl-accent);

    }

    35%  {

        transform: scale(1.18);

        text-shadow: 0 0 24px rgba(216,158,79,1), 0 0 48px rgba(216,158,79,0.6);

        color: #fff5d6;

    }

    100% {

        transform: scale(1);

        text-shadow: 0 0 8px rgba(216,158,79,0.4);

        color: var(--xtfl-accent);

    }

}

.stat-number-flashed {

    animation: statFlash 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;

}



/* ============================================

   LATEST NEWS — AUTO-SCROLLING MARQUEE

   ============================================ */

.news-marquee {

    position: relative;

    width: 100%;

    overflow: hidden;

    /* fade edges */

    -webkit-mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);

            mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);

}

.news-marquee-track {

    display: flex;

    gap: 28px;

    width: max-content;

    animation: newsScroll 40s linear infinite;

    will-change: transform;

}

.news-marquee.paused .news-marquee-track {

    animation-play-state: paused;

}

@keyframes newsScroll {

    from { transform: translateX(0); }

    to   { transform: translateX(-50%); }

}

/* Inside marquee, cards stay fixed-width */

.news-marquee .news-card {

    flex: 0 0 340px;

    width: 340px;

}

@media (max-width: 768px) {

    .news-marquee .news-card { flex: 0 0 280px; width: 280px; }

    @keyframes newsScroll {

        from { transform: translateX(0); }

        to   { transform: translateX(-50%); }

    }

}

@media (prefers-reduced-motion: reduce) {

    .news-marquee-track { animation: none; }

}



/* ============================================

   ABOUT FULL-IMAGE BANNER — strong motion

   ============================================ */

.about-full-image {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--xtfl-light-gray);

}

.about-full-img-inner {

    width: 100%;

    height: clamp(360px, 48vw, 600px);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    /* Dual-axis Ken Burns: zoom + horizontal pan, alternate forever */

    animation: kenBurns 7s ease-in-out infinite alternate;

    will-change: transform;

}

/* moving shimmer overlay for extra "动感" */

.about-full-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        115deg,

        rgba(255,255,255,0) 0%,

        rgba(255,255,255,0) 35%,

        rgba(255,255,255,0.18) 50%,

        rgba(255,255,255,0) 65%,

        rgba(255,255,255,0) 100%

    );

    background-size: 250% 100%;

    animation: shimmer 5s linear infinite;

    pointer-events: none;

    z-index: 2;

}

@keyframes kenBurns {

    0%   { transform: scale(1.02) translateX(0); }

    100% { transform: scale(1.18) translateX(-3%); }

}

@keyframes shimmer {

    0%   { background-position: 250% 0; }

    100% { background-position: -150% 0; }

}

@media (max-width: 768px) {

    .about-full-img-inner { height: 320px; animation-duration: 9s; }

}

@media (max-width: 640px) {

    .about-full-img-inner { height: 240px; }

}


/* === DEEP BEAUTIFICATION === */

.product-detail-content h2{font-family:Playfair Display,Georgia,serif;font-size:1.35rem;font-weight:700;color:var(--xtfl-navy);margin:2.2em 0 .8em;padding-bottom:.5em;border-bottom:2px solid var(--xtfl-primary);display:inline-block}
.product-detail-content h2:first-child{margin-top:0}
.product-detail-content p{line-height:1.85;color:var(--xtfl-text);margin-bottom:1.2em;font-size:.98rem}
.product-detail-content ul{list-style:none;padding:0;margin:1em 0 1.5em}
.product-detail-content ul li{position:relative;padding:.6em 0 .6em 2em;line-height:1.7;color:var(--xtfl-text);font-size:.96rem;border-bottom:1px solid rgba(0,0,0,.04)}
.product-detail-content ul li:last-child{border-bottom:none}
.product-detail-content ul li::before{content://;position:absolute;left:0;top:1.05em;width:8px;height:8px;background:var(--xtfl-primary);border-radius:50%;box-shadow:0 0 0 3px rgba(26,90,140,.15)}
.application-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:1em;margin-bottom:1.5em}
.app-tag{display:inline-block;padding:6px 16px;background:var(--xtfl-light-gray);color:var(--xtfl-primary);border-radius:20px;font-size:.82rem;font-weight:500;transition:var(--xtfl-transition);border:1px solid transparent}
.app-tag:hover{background:var(--xtfl-primary);color:#fff;border-color:var(--xtfl-primary);transform:translateY(-1px)}
.product-faq{background:var(--xtfl-off-white);border-radius:var(--xtfl-radius-lg);padding:2em;margin-top:2em}
.product-faq h2{margin-top:0!important}
.product-faq-item{margin-bottom:1.5em;padding-bottom:1.5em;border-bottom:1px solid var(--xtfl-border)}
.product-faq-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.product-faq-item h3{font-family:DM Sans,sans-serif;font-size:1rem;font-weight:600;color:var(--xtfl-navy);margin-bottom:.5em;display:flex;align-items:flex-start;gap:8px}
.product-faq-item h3::before{content:/Q/;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;background:var(--xtfl-primary);color:#fff;border-radius:4px;font-size:.75rem;font-weight:700;flex-shrink:0}
.product-faq-item p{margin-left:32px;color:var(--xtfl-text-light);font-size:.92rem}
.product-pairings p{background:linear-gradient(135deg,rgba(26,90,140,.04),rgba(212,168,67,.04));padding:1.2em 1.5em;border-radius:var(--xtfl-radius);border-left:3px solid var(--xtfl-accent)}

/* PRODUCT DETAIL LAYOUT */
.product-detail-hero{padding:110px 0 50px!important}
.single-product-layout{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:start}
@media(max-width:900px){.single-product-layout{grid-template-columns:1fr;gap:32px}}
.product-image-frame{border-radius:var(--xtfl-radius-lg);overflow:hidden;background:var(--xtfl-light-gray);box-shadow:var(--xtfl-shadow);transition:var(--xtfl-transition)}
.product-image-frame:hover{box-shadow:var(--xtfl-shadow-lg);transform:translateY(-2px)}
.product-image-frame img{width:100%;height:auto;display:block}
.product-image-placeholder{width:100%;min-height:380px;display:flex;align-items:center;justify-content:center;background:var(--xtfl-light-gray);border-radius:var(--xtfl-radius-lg);color:var(--xtfl-text-light);font-size:5rem}
.product-cta-group{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.btn-whatsapp{background:#25d366;color:#fff;border:none;padding:14px 24px;border-radius:var(--xtfl-radius);font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;transition:var(--xtfl-transition);cursor:pointer;text-decoration:none}
.btn-whatsapp:hover{background:#1da851;color:#fff;transform:translateY(-1px);box-shadow:0 4px 15px rgba(37,211,102,.3)}
.btn-lg{padding:14px 24px!important;font-size:.95rem!important}
.single-product-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.meta-item{display:flex;flex-direction:column;padding:12px 18px;background:var(--xtfl-off-white);border-radius:var(--xtfl-radius);border:1px solid var(--xtfl-border);min-width:120px;transition:var(--xtfl-transition)}
.meta-item:hover{border-color:var(--xtfl-primary);box-shadow:0 2px 8px rgba(26,90,140,.08)}
.meta-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--xtfl-text-light);font-weight:600;margin-bottom:4px}
.meta-value{font-size:.95rem;font-weight:600;color:var(--xtfl-navy)}

/* CONTACT PAGE */
.contact-hero{position:relative;padding:140px 0 80px;overflow:hidden}
.contact-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--xtfl-navy) 0%,#0d2a4a 40%,#1a3d5c 70%,var(--xtfl-navy-light) 100%);z-index:0}
.contact-hero-bg::before{content://;position:absolute;top:-50%;right:-20%;width:80%;height:200%;background:radial-gradient(ellipse,rgba(212,168,67,.08) 0%,transparent 60%);z-index:1}
.contact-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(10,22,40,.3) 100%);z-index:1}
.contact-hero-title{font-family:Playfair Display,Georgia,serif;font-size:clamp(2.2rem,5vw,3.2rem);color:var(--xtfl-white);margin:16px 0;line-height:1.2}
.contact-hero-subtitle{font-size:1.1rem;color:var(--xtfl-text-white-dim);max-width:560px;line-height:1.7}
.contact-layout{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr;gap:32px}}
.contact-info-side{display:flex;flex-direction:column;gap:16px}
.contact-info-card-v2{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--xtfl-white);border-radius:var(--xtfl-radius);border:1px solid var(--xtfl-border);transition:var(--xtfl-transition)}
.contact-info-card-v2:hover{border-color:var(--xtfl-primary);box-shadow:var(--xtfl-shadow);transform:translateY(-2px)}
.ci-icon-wrap{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;background:rgba(26,90,140,.08);color:var(--xtfl-primary);border-radius:10px;flex-shrink:0}
.ci-icon-wrap svg{width:20px;height:20px}
.contact-info-card-v2 h4{font-family:DM Sans,sans-serif;font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--xtfl-text-light);margin-bottom:4px}
.contact-info-card-v2 a,.contact-info-card-v2 p{font-size:.95rem;color:var(--xtfl-navy);margin:0;line-height:1.5}
.contact-info-card-v2 a:hover{color:var(--xtfl-primary)}
.contact-form-wrapper{background:var(--xtfl-white);border-radius:var(--xtfl-radius-lg);padding:40px;box-shadow:var(--xtfl-shadow-md);border:1px solid var(--xtfl-border)}
.contact-form-wrapper h3{font-family:Playfair Display,Georgia,serif;font-size:1.6rem;color:var(--xtfl-navy);margin-bottom:8px}
.form-subtitle{color:var(--xtfl-text-light);font-size:.95rem;margin-bottom:28px}
.form-product-prefill{display:flex;align-items:center;gap:10px;padding:12px 18px;background:linear-gradient(135deg,rgba(26,90,140,.06),rgba(212,168,67,.06));border-radius:var(--xtfl-radius);margin-bottom:24px;border:1px solid rgba(26,90,140,.12)}
.form-prefill-label{font-size:.85rem;color:var(--xtfl-text-light)}
.form-prefill-name{font-weight:600;color:var(--xtfl-primary);font-size:.9rem}

/* CF7 FORM STYLING */
.wpcf7-form label{display:block;margin-bottom:24px;font-weight:600;font-size:.88rem;color:var(--xtfl-navy);letter-spacing:.02em}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form input[type=url],.wpcf7-form textarea,.wpcf7-form select{width:100%;padding:16px 18px;font-size:1rem;font-family:DM Sans,sans-serif;border:2px solid var(--xtfl-border);border-radius:var(--xtfl-radius);background:var(--xtfl-off-white);color:var(--xtfl-text);transition:var(--xtfl-transition);outline:none;-webkit-appearance:none;appearance:none;margin-top:6px}
.wpcf7-form input:focus,.wpcf7-form textarea:focus,.wpcf7-form select:focus{border-color:var(--xtfl-primary);background:var(--xtfl-white);box-shadow:0 0 0 4px rgba(26,90,140,.1)}
.wpcf7-form textarea{min-height:140px;resize:vertical;line-height:1.7}
.wpcf7-form input::placeholder,.wpcf7-form textarea::placeholder{color:var(--xtfl-mid-gray);font-size:.92rem}
.wpcf7-form input[type=submit],.wpcf7-submit{width:100%;padding:16px 32px;font-size:1.05rem;font-weight:700;font-family:DM Sans,sans-serif;letter-spacing:.04em;background:var(--xtfl-primary);color:#fff;border:none;border-radius:var(--xtfl-radius);cursor:pointer;transition:var(--xtfl-transition)}
.wpcf7-form input[type=submit]:hover,.wpcf7-submit:hover{background:var(--xtfl-primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,90,140,.3)}
.wpcf7-form .wpcf7-not-valid{border-color:#e74c3c!important;background:#fff5f5}
.wpcf7-form .wpcf7-not-valid-tip{color:#e74c3c;font-size:.82rem;margin-top:4px}
.wpcf7-form .wpcf7-response-output{margin-top:20px;padding:14px 20px;border-radius:var(--xtfl-radius);font-size:.92rem}
.wpcf7-form .wpcf7-mail-sent-ok{background:rgba(39,174,96,.08);border:1px solid rgba(39,174,96,.2);color:#27ae60}
.wpcf7-form .wpcf7-validation-errors{background:rgba(231,76,60,.06);border:1px solid rgba(231,76,60,.15);color:#e74c3c}

/* GLOBAL ENHANCEMENTS */
.product-item{background:var(--xtfl-white);border-radius:var(--xtfl-radius-lg);overflow:hidden;box-shadow:var(--xtfl-shadow);transition:var(--xtfl-transition);border:1px solid transparent}
.product-item:hover{box-shadow:var(--xtfl-shadow-lg);transform:translateY(-4px);border-color:var(--xtfl-primary)}
.product-item-image{position:relative;overflow:hidden;background:var(--xtfl-light-gray)}
.product-item-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.product-item:hover .product-item-image img{transform:scale(1.06)}
.product-item-badge{position:absolute;top:12px;left:12px;padding:4px 12px;background:rgba(26,90,140,.9);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.04em;border-radius:4px;backdrop-filter:blur(4px)}
.product-item-body{padding:16px 20px 20px}
.product-item-body h3{font-family:DM Sans,sans-serif;font-size:.95rem;font-weight:600;color:var(--xtfl-navy);line-height:1.4;margin-bottom:12px}
.product-item-body h3 a{color:inherit;transition:var(--xtfl-transition)}
.product-item-body h3 a:hover{color:var(--xtfl-primary)}
.product-item-actions{display:flex;gap:8px}
.btn-inquiry{flex:1;padding:8px 12px;text-align:center;background:var(--xtfl-primary);color:#fff;border-radius:var(--xtfl-radius);font-size:.82rem;font-weight:600;transition:var(--xtfl-transition)}
.btn-inquiry:hover{background:var(--xtfl-primary-dark);color:#fff;transform:translateY(-1px)}
.btn-detail{flex:1;padding:8px 12px;text-align:center;background:transparent;color:var(--xtfl-primary);border:1px solid var(--xtfl-primary);border-radius:var(--xtfl-radius);font-size:.82rem;font-weight:600;transition:var(--xtfl-transition)}
.btn-detail:hover{background:var(--xtfl-primary);color:#fff;transform:translateY(-1px)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--xtfl-radius);font-weight:600;font-size:.92rem;transition:var(--xtfl-transition);cursor:pointer;text-decoration:none;border:2px solid transparent}
.btn-primary{background:var(--xtfl-primary);color:#fff;border-color:var(--xtfl-primary)}
.btn-primary:hover{background:var(--xtfl-primary-dark);border-color:var(--xtfl-primary-dark);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,90,140,.25)}
.btn-outline{background:transparent;color:var(--xtfl-primary);border-color:var(--xtfl-primary)}
.btn-outline:hover{background:var(--xtfl-primary);color:#fff;transform:translateY(-2px)}
.cta-banner{background:linear-gradient(135deg,var(--xtfl-navy) 0%,#0d2a4a 60%,#1a3d5c 100%);padding:80px 0;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content://;position:absolute;top:-50%;left:-20%;width:60%;height:200%;background:radial-gradient(ellipse,rgba(212,168,67,.06) 0%,transparent 60%)}
.cta-banner h2{font-family:Playfair Display,Georgia,serif;color:var(--xtfl-white);font-size:1.8rem;margin-bottom:12px}
.cta-banner p{color:var(--xtfl-text-white-dim);font-size:1rem;margin-bottom:28px}
.products-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.products-filter a{padding:8px 20px;background:rgba(255,255,255,.1);color:var(--xtfl-text-white-dim);border-radius:24px;font-size:.88rem;font-weight:500;transition:var(--xtfl-transition);border:1px solid rgba(255,255,255,.1);text-decoration:none}
.products-filter a:hover,.products-filter a.active{background:var(--xtfl-accent);color:var(--xtfl-navy);border-color:var(--xtfl-accent)}
.nav-links{display:flex;justify-content:center;gap:8px;margin-top:40px}
.nav-links a,.nav-links span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:var(--xtfl-radius);font-size:.9rem;font-weight:600;color:var(--xtfl-text);background:var(--xtfl-white);border:1px solid var(--xtfl-border);transition:var(--xtfl-transition);text-decoration:none}
.nav-links a:hover,.nav-links span.current{background:var(--xtfl-primary);color:#fff;border-color:var(--xtfl-primary)}