/* ============================================
   OudLink Custom Styles v3.0
   Cream + Dark Green palette — 1:1 visual clone of reference
   Tokens reverse-engineered from reference site CSS:
     header bg #F8F4EE, accent red #EA501C, dark text #0F1F2B
     headings Cairo / Roboto Slab, body Roboto / Inter
   ============================================ */

:root {
    /* Brand neutrals */
    --ol-cream:        #F8F4EE;   /* header + soft sections */
    --ol-beige:        #F5F5DC;   /* alt soft surface */
    --ol-white:        #FFFFFF;
    --ol-gray-bg:      #F3F4F6;

    /* Text */
    --ol-text-darkest: #0F1F2B;   /* heading on light */
    --ol-text:         #333333;
    --ol-text-mid:     #484F55;
    --ol-text-muted:   #7A7A7A;

    /* Accents */
    --ol-green:        #EA501C;   /* primary CTA — actual logo red */
    --ol-green-dark:   #C13E0E;   /* hover */
    --ol-green-light:  #FF7048;
    /* Gold variables redirected to logo red — single primary brand color
       across the whole site. Names retained for historical CSS compatibility,
       but every UI element now resolves to the brand red token. */
    --ol-gold:         #EA501C;
    --ol-gold-dark:    #C13E0E;
    --ol-blue:         #066aab;   /* link / accent blue */

    /* Legacy navy aliases (kept so existing rules don't crash) */
    --ol-navy-darkest: #0F1F2B;
    --ol-navy-dark:    #1a2a35;
    --ol-navy:         #0F1F2B;
    --ol-navy-light:   #333333;
    --ol-gold-light:   #ff9070;
    --ol-gray-light:   #F3F4F6;
    --ol-gray:         #a0aec0;

    /* Typography */
    --ol-font-heading: 'Cairo', 'Roboto Slab', Georgia, serif;
    --ol-font-body:    'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Layout */
    --ol-container:    1280px;
    --ol-radius:       12px;
    --ol-radius-lg:    20px;
    --ol-shadow-sm:    0 2px 8px rgba(10, 25, 41, 0.08);
    --ol-shadow-md:    0 8px 24px rgba(10, 25, 41, 0.12);
    --ol-shadow-lg:    0 20px 60px rgba(10, 25, 41, 0.2);
    --ol-transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset / Base --- */
* { box-sizing: border-box; }

body {
    font-family: var(--ol-font-body);
    color: var(--ol-text);
    background: var(--ol-white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ol-font-heading);
    color: var(--ol-text-darkest);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 3.6vw, 3.125rem); }   /* 50px @desktop matches reference */
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }     /* 40px */
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5625rem); }/* 25px */

a {
    color: var(--ol-blue);
    text-decoration: none;
    transition: color var(--ol-transition);
}
a:hover { color: var(--ol-green); }

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

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

.ol-section {
    padding: 100px 0;
}
@media (max-width: 768px) { .ol-section { padding: 60px 0; } }

.ol-section-tag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 100, 0, 0.12);
    color: var(--ol-green-dark);
    border: 1px solid rgba(0, 100, 0, 0.3);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ol-section-title {
    text-align: center;
    margin-bottom: 60px;
}

.ol-section-title h2 { margin-bottom: 12px; }
.ol-section-title p {
    color: var(--ol-text-muted);
    max-width: 680px;
    margin: 0 auto;
    font-size: 17px;
}

/* --- Buttons --- */
.ol-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--ol-transition);
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
/* Primary green CTA — matches reference #EA501C */
.ol-btn-primary,
.ol-btn-gold {
    background: var(--ol-green);
    color: var(--ol-white);
    border-color: var(--ol-green);
    box-shadow: none;
}
.ol-btn-primary:hover,
.ol-btn-gold:hover {
    background: var(--ol-green-dark);
    border-color: var(--ol-green-dark);
    color: var(--ol-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,100,0,0.3);
}
/* Ghost / outline variant — on dark bg it's white border, on light bg it's green border */
.ol-btn-outline {
    border-color: var(--ol-white);
    color: var(--ol-white);
    background: transparent;
}
.ol-btn-outline:hover {
    background: var(--ol-white);
    color: var(--ol-green);
}
/* Elementor button overrides — both hero buttons green solid */
.elementor-widget-button .elementor-button {
    border-radius: 4px !important;
}
.ol-hero-section .elementor-widget-button .elementor-button,
.elementor-widget-button .elementor-button[style*="background"] {
    background: #EA501C !important;
    color: #fff !important;
    border: none !important;
}
/* Dark button */
.ol-btn-navy {
    background: var(--ol-text-darkest);
    color: var(--ol-white);
}
.ol-btn-navy:hover {
    background: #000;
    color: var(--ol-white);
    transform: translateY(-1px);
}

/* --- Header (cream bg, sticky below promo bar, z-index 99) --- */
.ol-header {
    position: sticky;
    top: 0;
    background: var(--ol-cream);
    z-index: 99;
    transition: background 0.3s, box-shadow 0.3s;
    border-bottom: 1px solid rgba(15, 31, 43, 0.06);
}
.ol-header.scrolled {
    background: var(--ol-cream);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ol-header .ol-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    max-width: 1200px;
}
.ol-logo img, .ol-logo-img { height: 28px; width: auto; max-width: 140px; display: block; }
.ol-logo-text {
    font-family: var(--ol-font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--ol-text-darkest);
    letter-spacing: 2px;
}
.ol-logo-text .ol-logo-tm { font-size: 12px; vertical-align: super; }
.ol-nav {
    display: flex;
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ol-nav > li > a {
    color: var(--ol-text);
    font-family: var(--ol-font-body);
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0;
    padding: 8px 0;
    position: relative;
    transition: color 0.2s;
}
.ol-nav > li > a:hover {
    color: var(--ol-green);
}
/* Active nav item — green like reference "HOME" */
.ol-nav > li.current-menu-item > a,
.ol-nav > li.current_page_item > a {
    color: var(--ol-green);
    font-weight: 600;
}
/* Nav hover underline — green (not on items with children, they get arrow) */
.ol-nav > li:not(.menu-item-has-children) > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0;
    height: 2px;
    background: var(--ol-green);
    transition: width 0.25s, left 0.25s;
    transform: translateX(-50%);
}
.ol-nav > li:not(.menu-item-has-children) > a:hover::after,
.ol-nav > li:not(.menu-item-has-children).current-menu-item > a::after { width: 100%; }

/* Dropdown sub-menus */
.ol-nav li { position: relative; }
.ol-nav .sub-menu,
.ol-nav .dropdown {
    position: absolute;
    top: 100%; left: 0;
    background: var(--ol-white);
    min-width: 220px;
    padding: 8px 0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s;
    list-style: none;
    z-index: 100;
}
.ol-nav li:hover > .sub-menu,
.ol-nav li:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ol-nav .sub-menu a,
.ol-nav .dropdown a {
    display: block;
    padding: 10px 20px;
    color: var(--ol-text);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
}
.ol-nav .sub-menu a:hover,
.ol-nav .dropdown a:hover {
    background: var(--ol-gray-bg);
    color: var(--ol-green);
}
/* Dropdown arrow hint for items with children */
.ol-nav > li.menu-item-has-children > a::after {
    content: ' ▾';
    font-size: 10px;
    position: relative;
    margin-left: 3px;
    top: 50%;
    transform: translateY(-50%);
    color: inherit;
}

/* Language switcher — TranslatePress integration */
.ol-lang-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ol-text-mid);
    cursor: pointer;
}
.ol-lang-switch img { width: 18px; height: 13px; margin-right: 4px; }
/* Style TranslatePress shortcode switcher inside header */
.ol-lang-switch .trp-shortcode-switcher__wrapper { display: inline-flex !important; }
.ol-lang-switch .trp-ls-shortcode-current-language {
    background: transparent !important;
    border: none !important;
    color: var(--ol-text-mid) !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
}
.ol-lang-switch .trp-ls-shortcode-language {
    font-size: 13px !important;
    padding: 6px 12px !important;
}
/* Hide ALL TranslatePress switchers EXCEPT the one inside our header */
body > .trp-language-switcher,
body > div > .trp-language-switcher,
#trp-floater-ls,
.trp-floater-ls-container,
div[class*="trp-floater"] {
    display: none !important;
}
/* TranslatePress v2: ensure the overlay switcher is visible inside our header */
.ol-lang-switch .trp-shortcode-switcher__wrapper {
    position: relative;
}

/* Header actions row */
.ol-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ol-header-actions .ol-btn {
    padding: 10px 24px;
    font-size: 14px;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0;
}

/* Hamburger — dark color on cream bg */
.ol-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--ol-text-darkest);
    font-size: 24px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}
.ol-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ol-text-darkest);
    transition: all 0.3s;
}
.ol-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.ol-hamburger.active span:nth-child(2) { opacity: 0; }
.ol-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 1024px) {
    .ol-nav-wrap, .ol-header-actions .ol-btn, .ol-lang-switch { display: none; }
    .ol-hamburger { display: flex; }
}

/* --- Hero (full viewport video, dark overlay, white centered text) --- */
.ol-hero-section.elementor-section {
    min-height: calc(100vh - 70px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    position: relative;
}
/* Ensure the overlay is visible and dark enough */
.ol-hero-section .elementor-background-overlay {
    background: rgba(0,0,0,0.45) !important;
}
/* Video fills the section */
.ol-hero-section .elementor-background-video-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.ol-hero-section .elementor-background-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Content above video */
.ol-hero-section > .elementor-container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}
/* Hero heading — white Cairo */
.ol-hero-section .elementor-widget-heading .elementor-heading-title {
    color: #fff !important;
    font-family: 'Cairo', serif !important;
}
/* Hero body text — white, contained */
.ol-hero-section .elementor-widget-text-editor {
    color: #fff;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
/* Hero green buttons — match reference exactly */
.ol-hero-section .elementor-widget-button .elementor-button {
    background: #EA501C !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none !important;
    transition: background 0.2s;
}
.ol-hero-section .elementor-widget-button .elementor-button:hover {
    background: #C13E0E !important;
}
/* "Get Free Samples" second button — white with green border */
.ol-hero-section .elementor-widget-button:nth-of-type(2) .elementor-button,
.ol-hero-section .elementor-button-wrapper:last-child .elementor-button {
    background: #EA501C !important;
}

/* Mobile: space out the two hero buttons (fix overlap).
   Buttons are inline HTML with inline style margin:0 8px —
   override with !important to add vertical space. */
@media (max-width: 767px) {
    .ol-hero-section .elementor-widget-html a.ol-quote-trigger,
    .elementor-widget-html a.ol-quote-trigger {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 14px !important;
        box-sizing: border-box !important;
    }
    .ol-hero-section .elementor-widget-html a.ol-quote-trigger:last-child,
    .elementor-widget-html a.ol-quote-trigger:last-child {
        margin-bottom: 0 !important;
    }
}

.ol-hero::before {
    display: none;
}
.ol-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.ol-hero h1 {
    color: var(--ol-white);
    margin-bottom: 24px;
}
.ol-hero h1 .highlight {
    color: var(--ol-green);
    position: relative;
}
.ol-hero-subtitle {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 36px;
    line-height: 1.8;
    max-width: 560px;
}
.ol-hero-badges {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.ol-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 100, 0, 0.12);
    border: 1px solid rgba(0, 100, 0, 0.35);
    border-radius: 4px;
    color: var(--ol-green-light);
    font-size: 13px;
    font-weight: 500;
}
.ol-hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.ol-hero-visual {
    position: relative;
    aspect-ratio: 1;
    max-width: 520px;
    margin-left: auto;
}
.ol-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid rgba(0, 100, 0, 0.25);
    box-shadow: var(--ol-shadow-lg);
}
.ol-hero-float {
    position: absolute;
    background: var(--ol-white);
    color: var(--ol-navy-darkest);
    padding: 16px 22px;
    border-radius: var(--ol-radius);
    box-shadow: var(--ol-shadow-md);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}
.ol-hero-float.b1 { top: 10%; left: -30px; }
.ol-hero-float.b2 { bottom: 15%; right: -20px; }

@media (max-width: 968px) {
    .ol-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .ol-hero-visual { margin: 0 auto; }
    .ol-hero-cta { justify-content: center; }
    .ol-hero-badges { justify-content: center; }
}

/* --- About Section --- */
.ol-about { background: var(--ol-cream); }
.ol-about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}
.ol-about-image img {
    border-radius: var(--ol-radius-lg);
    box-shadow: var(--ol-shadow-md);
}
.ol-about h2 { margin-bottom: 24px; }
.ol-about p { color: var(--ol-text-muted); font-size: 16px; margin-bottom: 20px; }
.ol-about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 30px 0;
    list-style: none;
    padding: 0;
}
.ol-about-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ol-navy);
    font-weight: 600;
    font-size: 14px;
}
.ol-about-features li::before {
    content: '✓';
    width: 24px; height: 24px;
    background: var(--ol-green);
    color: var(--ol-navy-darkest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
@media (max-width: 968px) {
    .ol-about-grid { grid-template-columns: 1fr; }
}

/* --- Why Choose Us --- */
.ol-why { background: var(--ol-white); }
.ol-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.ol-why-card {
    padding: 40px 28px;
    background: var(--ol-cream);
    border-radius: var(--ol-radius-lg);
    text-align: center;
    transition: all var(--ol-transition);
    border-top: 4px solid transparent;
}
.ol-why-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ol-shadow-md);
    border-top-color: var(--ol-green);
}
.ol-why-card .icon {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--ol-navy), var(--ol-navy-light));
    color: var(--ol-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
.ol-why-card h3 { font-size: 20px; margin-bottom: 12px; }
.ol-why-card p { color: var(--ol-text-muted); font-size: 14px; }

@media (max-width: 968px) { .ol-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ol-why-grid { grid-template-columns: 1fr; } }

/* --- Products Grid --- */
.ol-products { background: var(--ol-cream); }
.ol-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.ol-product-card {
    background: var(--ol-white);
    border-radius: var(--ol-radius);
    overflow: hidden;
    box-shadow: var(--ol-shadow-sm);
    transition: all var(--ol-transition);
}
.ol-product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ol-shadow-md);
}
.ol-product-img {
    aspect-ratio: 1;
    overflow: hidden;
}
.ol-product-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.ol-product-card:hover .ol-product-img img { transform: scale(1.08); }
.ol-product-body { padding: 20px; }
.ol-product-body h3 { font-size: 17px; margin-bottom: 8px; }
.ol-product-body p { font-size: 13px; color: var(--ol-text-muted); margin-bottom: 14px; }
.ol-product-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ol-product-price span {
    color: var(--ol-green-dark);
    font-weight: 700;
    font-size: 16px;
}
.ol-product-price a {
    color: var(--ol-navy);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}
@media (max-width: 968px) { .ol-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ol-products-grid { grid-template-columns: 1fr; } }

/* --- Stats Counter --- */
.ol-stats {
    background: linear-gradient(135deg, var(--ol-navy-darkest), var(--ol-navy));
    color: var(--ol-white);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.ol-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(0, 100, 0, 0.15), transparent 50%);
    pointer-events: none;
}
.ol-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
    text-align: center;
}
.ol-stat-number {
    font-family: var(--ol-font-heading);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    color: var(--ol-text-darkest);
    line-height: 1;
    margin-bottom: 12px;
    position: relative;
}
.ol-stat-number::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--ol-green);
    margin: 10px auto 0;
}
.ol-stat-label {
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
}
@media (max-width: 768px) { .ol-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Gallery Grid --- */
.ol-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.ol-gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--ol-radius);
    position: relative;
    cursor: pointer;
}
.ol-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.ol-gallery-item:hover img { transform: scale(1.1); }
.ol-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 25, 41, 0.6), transparent);
    opacity: 0;
    transition: opacity var(--ol-transition);
}
.ol-gallery-item:hover::after { opacity: 1; }
@media (max-width: 968px) { .ol-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Steps --- */
.ol-steps { background: var(--ol-cream); }
.ol-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.ol-step-card {
    background: var(--ol-white);
    padding: 32px 24px;
    border-radius: var(--ol-radius);
    position: relative;
    transition: all var(--ol-transition);
}
.ol-step-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ol-shadow-md);
}
.ol-step-number {
    display: inline-block;
    width: 44px; height: 44px;
    background: var(--ol-navy);
    color: var(--ol-green);
    border-radius: 50%;
    text-align: center;
    line-height: 44px;
    font-weight: 700;
    font-family: var(--ol-font-heading);
    font-size: 18px;
    margin-bottom: 16px;
}
.ol-step-card h3 { font-size: 18px; margin-bottom: 10px; }
.ol-step-card p { color: var(--ol-text-muted); font-size: 14px; }
@media (max-width: 968px) { .ol-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ol-steps-grid { grid-template-columns: 1fr; } }

/* --- FAQ --- */
.ol-faq { background: var(--ol-white); }
.ol-faq-wrap {
    max-width: 840px;
    margin: 0 auto;
}
.ol-faq-item {
    background: var(--ol-cream);
    border-radius: var(--ol-radius);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: all var(--ol-transition);
}
.ol-faq-item.active {
    border-color: var(--ol-green);
    background: var(--ol-white);
    box-shadow: var(--ol-shadow-sm);
}
.ol-faq-question {
    width: 100%;
    padding: 22px 28px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--ol-font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--ol-navy-darkest);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ol-faq-question::after {
    content: '+';
    font-size: 24px;
    color: var(--ol-green-dark);
    transition: transform var(--ol-transition);
    flex-shrink: 0;
}
.ol-faq-item.active .ol-faq-question::after {
    content: '−';
    transform: rotate(180deg);
}
.ol-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 28px;
    color: var(--ol-text-muted);
}
.ol-faq-item.active .ol-faq-answer {
    max-height: 500px;
    padding: 0 28px 24px;
}

/* --- Contact Form --- */
.ol-contact {
    background: linear-gradient(135deg, var(--ol-navy-darkest), var(--ol-navy));
    color: var(--ol-white);
}
.ol-contact h2 { color: var(--ol-white); }
.ol-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.ol-contact-info h3 { color: var(--ol-text-darkest); font-size: 22px; margin-bottom: 20px; }
.ol-contact-info p { color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; }
.ol-contact-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
}
.ol-contact-info-item .icon {
    width: 44px; height: 44px;
    background: rgba(212, 175, 55, 0.12);
    color: var(--ol-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--ol-transition);
}
.ol-contact-info-item:hover .icon {
    background: var(--ol-green);
    color: var(--ol-white);
}

.ol-form {
    background: var(--ol-white);
    padding: 40px;
    border-radius: var(--ol-radius-lg);
    box-shadow: var(--ol-shadow-lg);
}
.ol-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ol-form-group { margin-bottom: 16px; }
.ol-form-group.full { grid-column: 1 / -1; }
.ol-form-label {
    display: block;
    color: var(--ol-navy-darkest);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ol-form-input,
.ol-form-textarea,
.ol-form-select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--ol-gray-light);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ol-text);
    background: var(--ol-cream);
    transition: all var(--ol-transition);
}
.ol-form-input:focus,
.ol-form-textarea:focus,
.ol-form-select:focus {
    outline: none;
    border-color: var(--ol-green);
    background: var(--ol-white);
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.15);
}
.ol-form-textarea { resize: vertical; min-height: 120px; }
.ol-form-submit {
    width: 100%;
    margin-top: 8px;
    justify-content: center;
}
.ol-form-message {
    padding: 14px 20px;
    border-radius: 10px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.ol-form-message.success {
    background: rgba(56, 161, 105, 0.1);
    color: var(--ol-green);
    border: 1px solid rgba(56, 161, 105, 0.25);
}
.ol-form-message.error {
    background: rgba(211, 47, 47, 0.08);
    color: #c62828;
    border: 1px solid rgba(211, 47, 47, 0.25);
}
@media (max-width: 968px) {
    .ol-contact-grid { grid-template-columns: 1fr; }
    .ol-form-grid { grid-template-columns: 1fr; }
}

/* --- Global: green buttons everywhere (override old gold) --- */
.ol-form-submit,
.wpforms-submit,
.wpforms-container .wpforms-submit,
button[type="submit"] {
    background: var(--ol-green) !important;
    color: var(--ol-white) !important;
    border: none !important;
    border-radius: 4px !important;
}
.ol-form-submit:hover,
.wpforms-submit:hover {
    background: var(--ol-green-dark) !important;
}
/* Form focus ring — green instead of gold */
.ol-form-input:focus,
.ol-form-textarea:focus,
.ol-form-select:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus {
    border-color: var(--ol-green) !important;
    box-shadow: 0 0 0 3px rgba(0,100,0,0.12) !important;
}

/* --- Footer --- */
.ol-footer {
    background: var(--ol-navy-darkest);
    color: rgba(255, 255, 255, 0.7);
    padding: 80px 0 30px;
}
.ol-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 48px;
    margin-bottom: 50px;
}
.ol-footer h4 {
    color: var(--ol-white);
    font-family: var(--ol-font-heading);
    font-size: 18px;
    margin-bottom: 22px;
}
.ol-footer-brand img { height: 44px; margin-bottom: 20px; }
.ol-footer-brand p { font-size: 14px; line-height: 1.8; }
.ol-footer ul {
    list-style: none;
    padding: 0; margin: 0;
}
.ol-footer ul li { margin-bottom: 10px; }
.ol-footer ul a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
}
.ol-footer ul a:hover { color: var(--ol-green); }

/* Unified contact icons in footer */
.ol-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.45;
}
.ol-footer-contact .ol-fi {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    transition: color var(--ol-transition);
}
.ol-footer-contact li:hover .ol-fi { color: var(--ol-green); }

/* Unified Contact Information block (Elementor HTML widget) */
.ol-ci { color: var(--ol-text); }
.ol-ci h3 {
    color: var(--ol-text-darkest);
    font-family: var(--ol-font-heading);
    font-size: 28px;
    margin-bottom: 16px;
}
.ol-ci-sub {
    color: var(--ol-text-muted);
    margin-bottom: 24px;
    line-height: 1.7;
    max-width: 420px;
}
.ol-ci-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ol-ci-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    color: var(--ol-text);
    line-height: 1.5;
}
.ol-ci-list li + li {
    border-top: 1px solid rgba(0,0,0,0.06);
}
.ol-ci-list .ol-fi {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--ol-text-muted);
    margin-top: 2px;
    transition: color var(--ol-transition);
}
.ol-ci-list li:hover .ol-fi { color: var(--ol-green); }
.ol-ci-list a {
    color: var(--ol-text);
    text-decoration: none;
}
.ol-ci-list a:hover { color: var(--ol-green); }

/* When Contact Information sits on a dark section, invert */
.ol-dark-bg .ol-ci,
[style*="background:#0F1F2B"] .ol-ci,
[style*="background: #0F1F2B"] .ol-ci {
    color: rgba(255,255,255,0.9);
}
.ol-dark-bg .ol-ci h3 { color: #fff; }
.ol-dark-bg .ol-ci-sub { color: rgba(255,255,255,0.7); }
.ol-dark-bg .ol-ci-list li { color: rgba(255,255,255,0.9); }
.ol-dark-bg .ol-ci-list li + li { border-top-color: rgba(255,255,255,0.08); }
.ol-dark-bg .ol-ci-list .ol-fi { color: rgba(255,255,255,0.5); }
.ol-dark-bg .ol-ci-list a { color: rgba(255,255,255,0.9); }

.ol-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.ol-footer-social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ol-transition);
}
.ol-footer-social a:hover {
    background: var(--ol-green);
    color: var(--ol-white);
    transform: translateY(-3px);
}

.ol-footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 968px) {
    .ol-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
    .ol-footer-grid { grid-template-columns: 1fr; }
}

/* --- Floating CTA --- */
.ol-floating-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ol-fbtn {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: var(--ol-shadow-md);
    transition: all var(--ol-transition);
}
.ol-fbtn-wa {
    background: #25D366;
    color: var(--ol-white);
}
.ol-fbtn-wa:hover {
    background: #1ebe57;
    transform: scale(1.08);
    color: var(--ol-white);
}
.ol-fbtn-top {
    background: var(--ol-green);
    color: var(--ol-white);
    font-size: 22px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
}
.ol-fbtn-top.show {
    opacity: 1;
    pointer-events: auto;
}
.ol-fbtn-top:hover {
    background: var(--ol-green-dark);
    transform: translateY(-3px);
}

/* --- Modal --- */
/* Legacy .ol-modal-overlay (kept for backward compat if any old markup uses it) */
.ol-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 41, 0.85);
    backdrop-filter: blur(6px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ol-modal-overlay.show { display: flex; }

/* --- Fade-in Animation --- */
.ol-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ol-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
 * Header Layout Polish (logo / actions / mobile)
 * ============================================ */
.ol-logo-text {
    font-family: 'Cairo', 'Roboto Slab', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--ol-green);
    letter-spacing: 0.5px;
}
.ol-logo-text .ol-logo-tm {
    font-size: 14px;
    vertical-align: super;
    color: var(--ol-green-dark);
    margin-left: 2px;
}
.ol-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ol-header .ol-btn {
    padding: 10px 22px;
    font-size: 13px;
}
.ol-nav-wrap { flex: 1; display: flex; justify-content: center; }
.ol-nav .menu-item { position: relative; }

/* (old duplicate dropdown block removed — rules live at line ~258) */
.ol-nav .sub-menu li { margin: 0; }
.ol-nav .sub-menu a::after { display: none; }

.ol-hamburger {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: space-between;
}
.ol-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ol-green);
    transition: all 0.3s;
}
.ol-hamburger.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.ol-hamburger.active span:nth-child(2) { opacity: 0; }
.ol-hamburger.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Mobile drawer */
.ol-mobile-drawer {
    position: fixed;
    top: 0; right: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: var(--ol-navy-darkest);
    z-index: 9999;
    transition: right 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    padding: 100px 28px 40px;
}
.ol-mobile-drawer.open { right: 0; }
.ol-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 41, 0.7);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s;
}
.ol-mobile-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.ol-mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ol-mobile-nav li { border-bottom: 1px solid rgba(0, 100, 0, 0.15); }
.ol-mobile-nav a {
    display: block;
    padding: 14px 0;
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.ol-mobile-nav a:hover,
.ol-mobile-nav a:focus,
.ol-mobile-nav .current-menu-item > a,
.ol-mobile-nav .current_page_item > a {
    color: var(--ol-primary, #EA501C);
}
.ol-mobile-nav .sub-menu {
    list-style: none;
    padding: 0 0 8px 16px;
    margin: 0;
}
.ol-mobile-nav .sub-menu a {
    font-size: 13px;
    padding: 8px 0;
    text-transform: none;
    color: rgba(255,255,255,0.75);
    border: none;
    transition: color .15s, padding-left .15s;
}
.ol-mobile-nav .sub-menu a:hover,
.ol-mobile-nav .sub-menu a:focus,
.ol-mobile-nav .sub-menu .current-menu-item > a,
.ol-mobile-nav .sub-menu .current_page_item > a {
    color: var(--ol-primary, #EA501C) !important;
    padding-left: 8px;
}

@media (max-width: 1024px) {
    .ol-nav-wrap { display: none; }
    .ol-header .ol-btn-gold, .ol-header .ol-btn-primary { display: none; }
    .ol-hamburger { display: flex; }
}

/* ============================================
 * Quote Modal v2 (works alongside existing .ol-modal-overlay)
 * Uses .ol-modal as outer wrapper + .ol-modal-dialog inside
 * ============================================ */
.ol-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* override the legacy .ol-modal { background:white } */
    background: transparent;
    border-radius: 0;
    max-width: none;
    width: auto;
    max-height: none;
    overflow: visible;
    box-shadow: none;
}
.ol-modal.open {
    display: flex;
    animation: olModalFade 0.25s ease;
}
@keyframes olModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ol-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 41, 0.85);
    backdrop-filter: blur(6px);
    cursor: pointer;
    z-index: 1;
}
.ol-modal-dialog {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: var(--ol-radius-lg);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--ol-shadow-lg);
    animation: olModalSlide 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes olModalSlide {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.ol-modal-body { padding: 48px 40px 40px; }
.ol-modal-body h3 {
    font-family: 'Cairo', 'Roboto Slab', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--ol-text);
    margin: 0 0 8px;
}
.ol-modal-sub {
    color: var(--ol-text-muted);
    margin: 0 0 24px;
    font-size: 15px;
}
.ol-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(0,0,0,0.06);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    color: var(--ol-text-muted);
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    transition: all 0.2s;
}
.ol-modal-close:hover {
    background: var(--ol-green);
    color: #fff;
}

body.ol-modal-open { overflow: hidden; }

/* ============================================
 * Footer-bottom layout
 * ============================================ */
.ol-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.ol-footer-legal {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.ol-footer-legal a {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}
.ol-footer-legal a:hover { color: var(--ol-green); }

/* ============================================
 * Uniform 1:1 media grid (videos + product images)
 * ============================================ */
.ol-video-grid .elementor-widget-video .elementor-wrapper,
.ol-video-grid .elementor-widget-video .elementor-video,
.ol-video-grid .elementor-widget-video .elementor-fit-aspect-ratio {
    aspect-ratio: 1 / 1 !important;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
    padding: 0 !important;
}
.ol-video-grid .elementor-widget-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    border-radius: 8px;
    background: #000;
}

/* Force product / grid images on the home page into 1:1 squares */
.elementor-page-239 .elementor-widget-image img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

/* ============================================
 * v3.4.9 REVIEW PASS — visual / UX / UI consolidation
 * Replaces earlier v3.4.4 logo-red header override.
 * Source of truth for: header chrome, hero typography,
 * section title color discipline, button system, contact
 * page contrast, floating-CTA polish, empty-section hiding.
 * ============================================ */

/* === Fix 2: Header → cream bg (restraint principle) === */
.ol-header,
.ol-header.scrolled {
    background: var(--ol-cream);
    border-bottom: 1px solid rgba(15, 31, 43, 0.06);
}

/* Nav links → dark text on cream */
.ol-header .ol-nav > li > a {
    color: var(--ol-text);
}
.ol-header .ol-nav > li > a:hover {
    color: var(--ol-green);
}

/* === Fix 10: Nav active vs hover differentiation === */
.ol-header .ol-nav > li.current-menu-item > a,
.ol-header .ol-nav > li.current_page_item > a {
    color: var(--ol-green);
    font-weight: 700;
}
.ol-header .ol-nav > li:not(.menu-item-has-children) > a::after {
    background: var(--ol-green);
    height: 2px;
}
/* hover = partial-width, half-opacity underline; active = full width solid */
.ol-header .ol-nav > li:not(.menu-item-has-children) > a:hover::after {
    width: 60%;
    opacity: 0.55;
}
.ol-header .ol-nav > li:not(.menu-item-has-children).current-menu-item > a::after,
.ol-header .ol-nav > li:not(.menu-item-has-children).current_page_item > a::after {
    width: 100%;
    opacity: 1;
}

/* Hamburger → dark on cream */
.ol-header .ol-hamburger { background: none; color: var(--ol-text-darkest); }
.ol-header .ol-hamburger span { background: var(--ol-text-darkest); }

/* Language switcher → muted dark */
.ol-header .ol-lang-switch,
.ol-header .ol-lang-switch .trp-ls-shortcode-current-language {
    color: var(--ol-text-mid) !important;
}

/* "Let's Talk" CTA → filled red, primary pop */
.ol-header .ol-header-actions .ol-btn {
    background: var(--ol-green) !important;
    color: #fff !important;
    border: 1.5px solid var(--ol-green) !important;
}
.ol-header .ol-header-actions .ol-btn:hover {
    background: var(--ol-green-dark) !important;
    border-color: var(--ol-green-dark) !important;
}

/* === Hero overrides (home) === */

/* Hero h1 over dark video → white */
body.home h1.elementor-heading-title {
    color: #fff !important;
    /* Fix 7: Playfair for Latin; Cairo only on Arabic locale */
    font-family: 'Playfair Display', Georgia, serif !important;
    letter-spacing: -0.01em;
}
body.home:lang(ar) h1.elementor-heading-title,
body.home[dir="rtl"] h1.elementor-heading-title {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif !important;
}

/* Fix 6: Hero subtitle legibility */
body.home section[data-id="0000007"] .elementor-widget-text-editor,
body.home section[data-id="0000007"] .elementor-widget-text-editor p {
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
body.home section[data-id="0000007"] .elementor-background-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
}

/* === Fix 3: Section H1/H2 → forced dark text (kill red/gold giants) === */
/* Inner-page sections + home sections after the hero.
   恢复深色强制，因为大部分 section 是浅色背景需要深字。
   深色背景的 CTA section 用下面的 element-id 列表精确覆盖回白色。 */
body:not(.home) .elementor-widget-heading h1.elementor-heading-title,
body:not(.home) .elementor-widget-heading h2.elementor-heading-title,
body.home .elementor-section:not(:first-of-type) .elementor-widget-heading h2.elementor-heading-title {
    color: var(--ol-text-darkest) !important;
}
/* Inline keyword highlight stays brand red */
.elementor-widget-heading .elementor-heading-title span.ol-accent,
.elementor-widget-heading .elementor-heading-title em {
    color: var(--ol-green) !important;
    font-style: normal;
}
/* Inner-page first section (its hero) keeps white H1 if bg is dark navy */
body:not(.home) .elementor-section:first-of-type .elementor-widget-heading h1.elementor-heading-title {
    color: #fff !important;
}

/* === Fix 4: Contact page (page-id-293) — readable text on navy === */
/* Elementor widget headings */
.page-id-293 .elementor-widget-heading h2.elementor-heading-title,
.page-id-293 .elementor-widget-heading h3.elementor-heading-title {
    color: #fff !important;
}
.page-id-293 .elementor-widget-text-editor,
.page-id-293 .elementor-widget-text-editor p,
.page-id-293 .elementor-widget-icon-list .elementor-icon-list-text {
    color: #E5DDD3 !important;
}
.page-id-293 .elementor-widget-icon-list .elementor-icon-list-icon svg,
.page-id-293 .elementor-widget-icon-list .elementor-icon-list-icon i {
    color: var(--ol-gold) !important;
    fill: var(--ol-gold) !important;
}
/* Custom .ol-ci (Contact Information) HTML widget — actual markup on this page */
.page-id-293 .ol-ci,
.page-id-293 .ol-ci-sub,
.page-id-293 .ol-ci-list li,
.page-id-293 .ol-ci-list a {
    color: #E5DDD3 !important;
}
.page-id-293 .ol-ci h3 {
    color: #fff !important;
}
.page-id-293 .ol-ci-list .ol-fi {
    color: var(--ol-gold) !important;
}
.page-id-293 .ol-ci-list li:hover .ol-fi,
.page-id-293 .ol-ci-list a:hover {
    color: var(--ol-green) !important;
}
/* WPForms labels / placeholders on dark Contact section */
.page-id-293 .wpforms-field-label,
.page-id-293 .wpforms-form label,
.page-id-293 .wpforms-form .wpforms-field-description {
    color: #E5DDD3 !important;
}
.page-id-293 .wpforms-form .wpforms-required-label {
    color: var(--ol-green) !important;
}

/* === Fix 5: Back-to-top — smaller, subtler === */
.ol-fbtn-top {
    width: 40px !important;
    height: 40px !important;
    background: rgba(15, 31, 43, 0.55) !important;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ol-fbtn-top:hover {
    background: rgba(15, 31, 43, 0.85) !important;
    transform: translateY(-2px);
}

/* === Fix 8: Reduce alternating bg colors — cream / white only === */
.ol-products,
.ol-steps,
.ol-about {
    background: var(--ol-cream) !important;
}

/* === Fix 9: Button micro-polish (DB already swapped gold→red) === */
.elementor-widget-button .elementor-button {
    transition: transform 0.18s ease, filter 0.18s ease;
}
.elementor-widget-button .elementor-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* === Fix 11: Why Source from OudLink card tightening === */
.ol-why .ol-why-card .ol-why-icon,
.ol-why .ol-why-card svg.ol-fi {
    width: 28px !important;
    height: 28px !important;
}
.ol-why .ol-why-card h3 { font-size: 16px !important; line-height: 1.3; }
.ol-why .ol-why-card p  { font-size: 13px !important; line-height: 1.55; }

/* === Fix 12: Hide empty "Our Journey" timeline on About OudLink === */
section[data-id="a1b2c0b"] {
    display: none !important;
}

/* === Fix 14: Hero CTA buttons — vertical spacing when stacked === */
.elementor-widget-text-editor a[style*="border-radius:40px"],
.elementor-widget-html a[style*="border-radius:40px"],
section a[style*="border-radius:40px"] {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* ============================================
 * v3.7.1 — Unified button system
 * Canonical: solid red #EA501C bg + white text + 6px radius +
 * uppercase + bold + subtle shadow. Applies to:
 *   - All Elementor button widgets
 *   - Inline-styled hero pill buttons (filled variant)
 * Outline / ghost buttons (transparent bg + white border) preserved
 * for the "Explore Products" hero secondary CTA.
 * ============================================ */

.elementor-button,
a.elementor-button-link {
    background-color: #EA501C !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(234, 80, 28, 0.22);
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    overflow: hidden;
}
.elementor-button:hover,
a.elementor-button-link:hover {
    background-color: #C13E0E !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 22px rgba(234, 80, 28, 0.36) !important;
}
.elementor-button:active,
a.elementor-button-link:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 2px 6px rgba(234, 80, 28, 0.22) !important;
}
.elementor-button .elementor-button-text,
a.elementor-button-link .elementor-button-text {
    color: #fff !important;
}

/* Inline-styled filled buttons (Hero "Get a Quote" / mid-page CTAs) —
 * unify shape + add hover animation to match Elementor button widgets. */
a[style*="display:inline-block"][style*="background:#EA501C"],
a[style*="display:inline-block"][style*="background:#ea501c"],
a[style*="border-radius:40px"][style*="linear-gradient"] {
    background: #EA501C !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(234, 80, 28, 0.22) !important;
    font-weight: 700 !important;
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
a[style*="display:inline-block"][style*="background:#EA501C"]:hover,
a[style*="display:inline-block"][style*="background:#ea501c"]:hover,
a[style*="border-radius:40px"][style*="linear-gradient"]:hover {
    background: #C13E0E !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 22px rgba(234, 80, 28, 0.36) !important;
}
a[style*="display:inline-block"][style*="background:#EA501C"]:active,
a[style*="display:inline-block"][style*="background:#ea501c"]:active {
    transform: translateY(0) scale(0.99);
}

/* Outline ghost (Hero "EXPLORE PRODUCTS" + similar) */
a[style*="border-radius:40px"][style*="background:transparent"] {
    border-radius: 6px !important;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
a[style*="border-radius:40px"][style*="background:transparent"]:hover {
    background: #fff !important;
    color: #EA501C !important;
    transform: translateY(-2px) scale(1.02);
}

/* Header "Let's Talk" CTA already filled red (handled in v3.4.9 block) */

/* ============================================
 * v3.7.2 — News module (archive + single + home widget)
 * ============================================ */

.ol-news-archive,
.ol-news-single { background: #fff; }

.ol-news-toolbar {
    background: var(--ol-cream);
    padding: 22px 0 18px;
    border-bottom: 1px solid rgba(15, 31, 43, 0.06);
}
.ol-news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ol-news-list { padding: 48px 0 64px; }
.ol-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.ol-news-card {
    background: #fff;
    border: 1px solid rgba(15, 31, 43, 0.08);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.ol-news-card:hover {
    transform: translateY(-2px);
    border-color: var(--ol-green);
    box-shadow: 0 8px 22px rgba(15, 31, 43, 0.08);
}
.ol-news-card__link { display: block; color: inherit; text-decoration: none; }
.ol-news-card__thumb {
    aspect-ratio: 16 / 10;
    background: #f1efeb;
    overflow: hidden;
}
.ol-news-card__thumb img,
.ol-news-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ol-news-card__thumb--placeholder {
    background: linear-gradient(135deg, #f6f1e9, #ede5d6);
}
.ol-news-card__body { padding: 18px 20px 22px; }
.ol-news-card__cat {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ol-green);
    font-weight: 700;
    margin-bottom: 6px;
}
.ol-news-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px;
    line-height: 1.32;
    margin: 4px 0 10px;
    color: var(--ol-text-darkest);
}
.ol-news-card__link:hover .ol-news-card__title { color: var(--ol-green); }
.ol-news-card__excerpt {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--ol-text-mid);
    line-height: 1.55;
}
.ol-news-card__meta {
    font-size: 12px;
    color: var(--ol-text-muted);
    letter-spacing: 0.3px;
}

.ol-news-empty {
    text-align: center;
    padding: 56px 0;
    color: var(--ol-text-muted);
}

/* Single article */
.ol-news-article { padding: 48px 0 64px; }
.ol-news-article__grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 36px;
    align-items: start;
}
.ol-news-article__hero {
    margin: 0 0 28px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.ol-news-article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ol-news-article__content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ol-text);
}
.ol-news-article__content h2,
.ol-news-article__content h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ol-text-darkest);
    margin: 28px 0 12px;
}
.ol-news-article__content p { margin: 0 0 16px; }
.ol-news-article__content a { color: var(--ol-green); text-decoration: underline; text-underline-offset: 2px; }
.ol-news-article__content blockquote {
    border-left: 3px solid var(--ol-green);
    margin: 20px 0;
    padding: 8px 0 8px 20px;
    color: var(--ol-text-mid);
    font-style: italic;
}

.ol-news-article__tags {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 31, 43, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ol-news-article__aside { position: sticky; top: 100px; }
.ol-news-article__cta {
    background: var(--ol-cream);
    border-radius: 8px;
    padding: 22px 22px 26px;
    text-align: center;
}
.ol-news-article__cta h3 {
    font-family: 'Playfair Display', Georgia, serif;
    margin: 0 0 8px;
    color: var(--ol-text-darkest);
    font-size: 20px;
}
.ol-news-article__cta p {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--ol-text-mid);
    line-height: 1.55;
}
.ol-news-article__cta .ol-btn { display: inline-block; padding: 10px 20px; }
.ol-news-article__price-link {
    display: block;
    margin-top: 12px;
    color: var(--ol-green);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

/* Related posts strip */
.ol-news-related {
    background: var(--ol-cream);
    padding: 56px 0;
}
.ol-news-related h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ol-text-darkest);
    margin-bottom: 24px;
}

/* Mobile */
@media (max-width: 900px) {
    .ol-news-article__grid { grid-template-columns: 1fr; }
    .ol-news-article__aside { position: static; }
}

/* Homepage news widget */
.ol-home-news {
    padding: 56px 0;
    background: var(--ol-cream);
}
.ol-home-news__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.ol-home-news__title {
    color: var(--ol-text-darkest);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    margin: 0;
}
.ol-home-news__sub {
    color: var(--ol-text-mid);
    margin: 4px 0 0;
    font-size: 14px;
}
.ol-home-news__more {
    color: var(--ol-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.ol-home-news__more:hover { color: var(--ol-green-dark); }

/* ============================================
 * v3.5.0 — Price CPT (archive + single + homepage widget)
 * ============================================ */

/* Inner-page hero shared with other navy heroes */
.ol-page-hero {
    background: var(--ol-text-darkest);
    color: #fff;
    padding: 96px 0 64px;
    text-align: center;
}
.ol-page-hero h1 {
    color: #fff !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.15;
    margin: 0 0 16px;
}
.ol-page-hero__sub {
    color: #E5DDD3;
    max-width: 720px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
}
.ol-breadcrumb {
    color: #E5DDD3;
    font-size: 13px;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}
.ol-breadcrumb a { color: #E5DDD3; text-decoration: none; }
.ol-breadcrumb a:hover { color: #fff; }

/* Toolbar / filter chips */
.ol-price-toolbar {
    background: var(--ol-cream);
    padding: 22px 0 18px;
    border-bottom: 1px solid rgba(15, 31, 43, 0.06);
}
.ol-price-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.ol-chip {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 99px;
    background: #fff;
    color: var(--ol-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(15, 31, 43, 0.12);
    transition: all 0.18s ease;
}
.ol-chip:hover {
    border-color: var(--ol-green);
    color: var(--ol-green);
}
.ol-chip.is-active {
    background: var(--ol-green);
    border-color: var(--ol-green);
    color: #fff;
}
.ol-chip-divider {
    color: rgba(15, 31, 43, 0.25);
    margin: 0 6px;
}
.ol-price-disclaimer {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--ol-text-mid);
    letter-spacing: 0.2px;
}

/* Card grid */
.ol-price-list { padding: 48px 0 64px; background: #fff; }
.ol-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.ol-price-card {
    background: #fff;
    border: 1px solid rgba(15, 31, 43, 0.08);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.ol-price-card:hover {
    border-color: var(--ol-green);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 31, 43, 0.08);
}
.ol-price-card__head {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.ol-price-card__type {
    background: var(--ol-text-darkest);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
}
.ol-price-card__grade {
    background: rgba(212, 175, 55, 0.18);
    color: #876c14;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
}
.ol-price-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px;
    line-height: 1.3;
    margin: 4px 0 0;
    color: var(--ol-text-darkest);
}
.ol-price-card__title a { color: inherit; text-decoration: none; }
.ol-price-card__title a:hover { color: var(--ol-green); }
.ol-price-card__price {
    font-size: 22px;
    font-weight: 700;
    color: var(--ol-text-darkest);
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Inter', sans-serif;
}
.olp-trend {
    font-size: 14px;
    font-weight: 600;
}
.olp-up   { color: #b8430b; }
.olp-down { color: #266030; }
.olp-flat { color: var(--ol-text-muted); }
.ol-price-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px 14px;
    margin: 6px 0 0;
    font-size: 13px;
}
.ol-price-card__meta div { display: flex; flex-direction: column; }
.ol-price-card__meta dt {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ol-text-muted);
    margin: 0;
}
.ol-price-card__meta dd {
    margin: 2px 0 0;
    color: var(--ol-text);
    font-weight: 500;
}
.ol-price-card__notes {
    font-size: 13px;
    color: var(--ol-text-mid);
    line-height: 1.55;
    margin: 4px 0 0;
}
.ol-price-card__cta {
    margin-top: auto;
    padding-top: 8px;
    color: var(--ol-green);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.ol-price-card__cta:hover { color: var(--ol-green-dark); }

/* Pagination */
.ol-pagination {
    margin-top: 36px;
    text-align: center;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.ol-pagination .page-numbers {
    padding: 8px 14px;
    border: 1px solid rgba(15, 31, 43, 0.12);
    border-radius: 4px;
    color: var(--ol-text);
    text-decoration: none;
    font-size: 14px;
}
.ol-pagination .page-numbers.current,
.ol-pagination .page-numbers:hover {
    background: var(--ol-green);
    border-color: var(--ol-green);
    color: #fff;
}

/* CTA strip below list */
.ol-price-cta {
    background: var(--ol-cream);
    padding: 64px 0;
    text-align: center;
}
.ol-price-cta h2 {
    color: var(--ol-text-darkest);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 30px;
    margin: 0 0 12px;
}
.ol-price-cta p {
    color: var(--ol-text);
    max-width: 600px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

/* Empty state */
.ol-price-empty {
    text-align: center;
    color: var(--ol-text-muted);
    padding: 48px 0;
    font-size: 15px;
}

/* Single quote layout */
.ol-price-single { background: #fff; }
.ol-price-detail { padding: 56px 0; }
.ol-price-detail__grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 36px;
    align-items: start;
}
.ol-price-detail__card {
    background: var(--ol-cream);
    border-radius: 8px;
    padding: 24px;
    position: sticky;
    top: 100px;
}
.ol-price-detail__price {
    font-size: 32px;
    font-weight: 800;
    color: var(--ol-text-darkest);
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    margin-bottom: 18px;
}
.ol-price-detail__meta {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
}
.ol-price-detail__meta div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(15, 31, 43, 0.12);
    padding-bottom: 6px;
}
.ol-price-detail__meta dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ol-text-muted);
    margin: 0;
}
.ol-price-detail__meta dd {
    margin: 0;
    font-weight: 600;
    color: var(--ol-text-darkest);
}
.ol-price-detail__cta { width: 100%; text-align: center; }
.ol-price-detail__disclaimer {
    margin: 14px 0 0;
    font-size: 11px;
    color: var(--ol-text-muted);
    line-height: 1.5;
}
.ol-price-detail__body {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ol-text);
}
.ol-price-detail__body h2,
.ol-price-detail__body h3 {
    color: var(--ol-text-darkest);
    font-family: 'Playfair Display', Georgia, serif;
    margin-top: 28px;
}
.ol-price-related {
    background: var(--ol-cream);
    padding: 56px 0;
}
.ol-price-related h2 {
    color: var(--ol-text-darkest);
    font-family: 'Playfair Display', Georgia, serif;
    margin-bottom: 24px;
}

/* Mobile */
@media (max-width: 768px) {
    .ol-price-detail__grid { grid-template-columns: 1fr; }
    .ol-price-detail__card { position: static; }
    .ol-page-hero { padding: 70px 0 48px; }
}

/* ============================================
 * v3.6.0 — Content injection (5W lead + sections + FAQ)
 * Auto-rendered by OudLink_Content_Injector on thin pages.
 * ============================================ */

.ol-geo-lead {
    background: var(--ol-cream);
    border-left: 3px solid var(--ol-green);
    padding: 22px 28px;
    margin: 28px 0 36px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ol-text-darkest);
    border-radius: 0 6px 6px 0;
}
.ol-geo-lead p {
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.ol-geo-body {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 0 8px;
}
.ol-geo-section {
    margin-bottom: 36px;
}
.ol-geo-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(24px, 2.4vw, 30px);
    color: var(--ol-text-darkest);
    margin: 0 0 12px;
    line-height: 1.25;
}
.ol-geo-section p,
.ol-geo-section li {
    color: var(--ol-text);
    font-size: 16px;
    line-height: 1.75;
}
.ol-geo-section p { margin: 0 0 14px; }
.ol-geo-section ul,
.ol-geo-section ol {
    margin: 0 0 16px;
    padding-left: 22px;
}
.ol-geo-section li { margin-bottom: 6px; }
.ol-geo-section strong { color: var(--ol-text-darkest); }
.ol-geo-section a { color: var(--ol-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ol-geo-section a:hover { color: var(--ol-green-dark); }

/* FAQ block — details/summary, picked up by Schema.org FAQPage */
.ol-faq {
    max-width: 880px;
    margin: 28px auto 56px;
    padding: 36px 0 8px;
    border-top: 1px solid rgba(15, 31, 43, 0.08);
}
.ol-faq h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(24px, 2.4vw, 30px);
    color: var(--ol-text-darkest);
    margin: 0 0 18px;
}
.ol-faq details {
    border-bottom: 1px solid rgba(15, 31, 43, 0.08);
    padding: 14px 0;
}
.ol-faq details:first-of-type { border-top: 1px solid rgba(15, 31, 43, 0.08); }
.ol-faq summary {
    list-style: none;
    cursor: pointer;
    padding-right: 28px;
    position: relative;
    font-weight: 600;
    color: var(--ol-text-darkest);
    font-size: 16px;
    line-height: 1.5;
    transition: color 0.18s;
}
.ol-faq summary::-webkit-details-marker { display: none; }
.ol-faq summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--ol-green);
    transition: transform 0.18s, content 0.18s;
}
.ol-faq details[open] summary::after { content: '−'; }
.ol-faq summary:hover { color: var(--ol-green); }
.ol-faq__a {
    margin-top: 10px;
    color: var(--ol-text);
    font-size: 15px;
    line-height: 1.7;
}
.ol-faq__a a { color: var(--ol-green); text-decoration: underline; }

/* Homepage "This Week's Quotes" widget */
.ol-home-quotes {
    padding: 56px 0;
    background: #fff;
}
.ol-home-quotes__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.ol-home-quotes__title {
    color: var(--ol-text-darkest);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    margin: 0;
}
.ol-home-quotes__sub {
    color: var(--ol-text-mid);
    margin: 4px 0 0;
    font-size: 14px;
}
.ol-home-quotes__more {
    color: var(--ol-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.ol-home-quotes__more:hover { color: var(--ol-green-dark); }

/* ==========================================================================
   v3.7.3 — Pass 1 fixes (mobile typography, contact page polish, news cards)
   ========================================================================== */

/* --- Mobile hero H1 / subtitle scaling --- */
@media (max-width: 768px) {
    /* Hammer hero h1 across every page (Elementor inline CSS uses
       .elementor-XXX .elementor-element.elementor-element-YYYYYYY
       which is 0,3,0 specificity. We use body.elementor-page + 3 classes
       and !important to win unambiguously) */
    body.elementor-page .elementor-section .elementor-widget-heading h1.elementor-heading-title,
    body.elementor-page section.elementor-section .elementor-element h1.elementor-heading-title {
        font-size: clamp(26px, 7vw, 34px) !important;
        line-height: 1.15 !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
        padding-left: 12px;
        padding-right: 12px;
    }
    body.elementor-page .elementor-section .elementor-widget-heading h2.elementor-heading-title {
        font-size: clamp(20px, 5.5vw, 28px) !important;
        line-height: 1.2 !important;
    }
    /* Hero subtitle: stop overflowing edges, allow wrap */
    .elementor-widget-text-editor p,
    .elementor-widget-heading + .elementor-widget-text-editor {
        padding-left: 16px;
        padding-right: 16px;
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    /* Hero h1 inline styles often hard-code 80px+ font: extra hammer */
    section.elementor-section .elementor-widget-heading h1[style*="font-size"],
    .elementor-element h1.elementor-heading-title[style*="font-size"] {
        font-size: clamp(24px, 6.5vw, 34px) !important;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
    /* Contact form fields: prevent right-edge overflow */
    .ol-contact-form input,
    .ol-contact-form select,
    .ol-contact-form textarea,
    .wpforms-field input,
    .wpforms-field textarea,
    .wpforms-field select,
    form input[type="text"],
    form input[type="email"],
    form textarea,
    form select {
        max-width: 100%;
        box-sizing: border-box;
        width: 100%;
    }
    /* Hero buttons: stack with breathing room */
    .elementor-widget-button .elementor-button-wrapper {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* --- Contact page: hero subtitle centering + spacing --- */
body.page-id-293 .elementor-section:first-of-type .elementor-widget-text-editor,
body.page-id-293 .elementor-section:first-of-type .elementor-widget-heading + .elementor-widget {
    text-align: center;
}
body.page-id-293 .elementor-section:first-of-type .elementor-widget-text-editor p {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
/* Reduce hero spacer height on contact page */
body.page-id-293 .elementor-section:first-of-type .elementor-widget-spacer .elementor-spacer-inner {
    max-height: 24px !important;
    height: 24px !important;
}
/* Visit Our Office: address subtitle visibility */
body.page-id-293 .elementor-widget-heading + .elementor-widget-text-editor p,
body.page-id-293 .elementor-element h2 + .elementor-element p {
    color: var(--ol-text-darkest) !important;
    font-size: 16px;
    opacity: 1 !important;
}

/* --- News cards: use real featured images, decent fallback --- */
.ol-news-grid .ol-news-card__media,
.post-thumbnail img,
article.post .ol-news-card__media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background-color: var(--ol-cream-deep, #EDE5D7);
}
/* News archive cards: ensure thumbnail block height even when no image */
article.type-post .ol-news-card__media:empty,
.ol-news-grid article:not(:has(img)) .ol-news-card__media {
    background: linear-gradient(135deg, var(--ol-cream-deep, #EDE5D7), var(--ol-cream, #F8F4EE));
    min-height: 180px;
}

/* --- Wholesale 3-tier cards: price hint badge --- */
.ol-tier-card,
.elementor-widget-image-box.ol-tier {
    position: relative;
}
.ol-tier-price-hint::before {
    content: 'From';
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ol-text-mid);
    margin-bottom: 2px;
}
.ol-tier-price-hint {
    display: inline-block;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: var(--ol-primary, #EA501C);
    font-size: 22px;
    margin-top: 8px;
}

/* --- About OudLink hero: align with other subpages (deep navy bg) --- */
body.page-id-294 .elementor-section:first-of-type {
    background-color: var(--ol-text-darkest, #0F1F2B) !important;
    color: #fff;
}
body.page-id-294 .elementor-section:first-of-type h1,
body.page-id-294 .elementor-section:first-of-type h2,
body.page-id-294 .elementor-section:first-of-type p {
    color: #fff !important;
}

/* --- FAQ first item: open by default --- */
details.ol-faq-item:first-of-type,
.ol-content-faq details:first-of-type {
    /* applied via inline open attr in PHP injection — fallback hint */
}

/* --- Price strip injected on wholesale category pages --- */
.ol-price-strip {
    max-width: 1200px;
    margin: 48px auto;
    padding: 32px 24px;
    background: var(--ol-cream, #F8F4EE);
    border-radius: 12px;
    border-left: 4px solid var(--ol-primary, #EA501C);
}
.ol-price-strip__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.ol-price-strip__head h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    color: var(--ol-text-darkest, #0F1F2B);
    margin: 0;
}
.ol-price-strip__more {
    color: var(--ol-primary, #EA501C);
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}
.ol-price-strip__more:hover { text-decoration: underline; }
.ol-price-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.ol-price-strip__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(15,31,43,0.06);
    transition: border-color .15s, transform .15s;
}
.ol-price-strip__item:hover {
    border-color: var(--ol-primary, #EA501C);
    transform: translateY(-1px);
}
.ol-price-strip__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ol-text-darkest, #0F1F2B);
    line-height: 1.3;
}
.ol-price-strip__range {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ol-primary, #EA501C);
}
.ol-price-strip__origin {
    font-size: 12px;
    color: var(--ol-text-mid);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ol-price-strip__note {
    font-size: 12px;
    color: var(--ol-text-mid);
    margin: 18px 0 0;
    line-height: 1.5;
}

/* ==========================================================================
   v3.8.3 — Hero imagery for remaining subpages + price single template
   ========================================================================== */
body.page-id-296 .elementor-element-0000133,
body.page-id-302 .elementor-element-0000298,
body.page-id-303 .elementor-element-00002c6,
body.page-id-304 .elementor-element-0000315 {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 360px;
}
body.page-id-296 .elementor-element-0000133 h1,
body.page-id-302 .elementor-element-0000298 h1,
body.page-id-303 .elementor-element-00002c6 h1,
body.page-id-304 .elementor-element-0000315 h1,
body.page-id-296 .elementor-element-0000133 p,
body.page-id-302 .elementor-element-0000298 p,
body.page-id-303 .elementor-element-00002c6 p,
body.page-id-304 .elementor-element-0000315 p {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.page-id-296 .elementor-element-0000133 {
    background-image:
        linear-gradient(135deg, rgba(15,31,43,0.80), rgba(15,31,43,0.65) 55%, rgba(234,80,28,0.30)),
        url('/wp-content/uploads/2026/04/agarwood-oil-Laboratory.jpg') !important;
}
body.page-id-302 .elementor-element-0000298 {
    background-image:
        linear-gradient(135deg, rgba(15,31,43,0.78), rgba(15,31,43,0.62) 60%, rgba(234,80,28,0.30)),
        url('/wp-content/uploads/2026/04/Agarwood-trees.jpg') !important;
}
body.page-id-303 .elementor-element-00002c6 {
    background-image:
        linear-gradient(135deg, rgba(15,31,43,0.80), rgba(15,31,43,0.65) 55%, rgba(234,80,28,0.30)),
        url('/wp-content/uploads/2026/04/High-oil-tree-chips-large.jpg') !important;
}
body.page-id-304 .elementor-element-0000315 {
    background-image:
        linear-gradient(135deg, rgba(15,31,43,0.78), rgba(15,31,43,0.62) 60%, rgba(234,80,28,0.30)),
        url('/wp-content/uploads/2026/04/Our-Key-Plantations-hainan.jpg') !important;
}


/* ==========================================================================
   v3.8.12 — Pre-stamp polish: map card + remaining v3.10 leftovers
   ========================================================================== */
/* Map card (HTML is in DB from earlier SQL replacement) — pre-stamp style */
.ol-map-card {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    background: linear-gradient(135deg, #1a2a35 0%, #0F1F2B 100%);
    border-radius: 12px;
    overflow: hidden;
    min-height: 280px;
    margin: 24px 0;
    box-shadow: 0 8px 24px rgba(15, 31, 43, 0.12);
}
.ol-map-card__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    color: #fff;
    background: rgba(15, 31, 43, 0.92);
}
.ol-map-card__pin {
    width: 40px; height: 40px;
    background: #EA501C;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    margin-bottom: 14px;
    box-shadow: 0 6px 16px rgba(234, 80, 28, 0.35);
    position: relative;
}
.ol-map-card__pin::after {
    content: '';
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.ol-map-card__visual strong {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    color: #fff;
    margin-bottom: 4px;
    display: block;
}
.ol-map-card__visual span {
    color: rgba(255,255,255,0.78);
    font-size: 13px;
    line-height: 1.5;
}
.ol-map-card__sub {
    color: rgba(255,255,255,0.55) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
}
.ol-map-card__links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 24px;
    gap: 10px;
    background: #0F1F2B;
}
.ol-map-card__links::before {
    content: 'Open in maps';
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 6px;
}
.ol-map-card__links a {
    display: block;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, transform 0.2s;
    border: 1px solid rgba(255,255,255,0.10);
}
.ol-map-card__links a:hover {
    background: #EA501C;
    border-color: #EA501C;
    transform: translateX(2px);
}
@media (max-width: 768px) {
    .ol-map-card { grid-template-columns: 1fr; min-height: auto; }
    .ol-map-card__visual { padding: 32px 24px; }
    .ol-map-card__links { padding: 20px; }
}

/* Hero h1 + subtitle small polish (text-shadow for dark image bgs) */
section.elementor-section h1.elementor-heading-title,
.ol-page-hero h1 {
    text-shadow: 0 2px 8px rgba(0,0,0,0.30);
}

/* Card hover lift (subtle pre-stamp) */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-image-box .elementor-image-box-wrapper {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover,
.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 31, 43, 0.10);
}

/* News card hover lift */
.ol-news-grid article {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ol-news-grid article:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 31, 43, 0.10);
}

/* Form input focus ring — orange accent */
input:focus, textarea:focus, select:focus {
    border-color: #EA501C !important;
    outline: 2px solid rgba(234, 80, 28, 0.20) !important;
    outline-offset: 0 !important;
}

/* Submit button hover */
.wpforms-submit:hover,
button[type="submit"]:hover {
    background: #C13E0E !important;
    transform: translateY(-1px);
}

/* 5W lead block — subtle pre-stamp warm look (already styled in v3.8) */
.ol-geo-lead {
    transition: box-shadow 0.25s ease;
}
.ol-geo-lead:hover {
    box-shadow: 0 8px 20px rgba(234, 80, 28, 0.10);
}

/* Sticky scroll anchor — :target offset to clear sticky header */
:target {
    scroll-margin-top: 90px;
}

/* Reduce default Hello Elementor body padding */
body {
    margin: 0 !important;
}

/* Section H2 underline — orange accent (subtle) */
main section h2.elementor-heading-title {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 24px;
}
main section h2.elementor-heading-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: #EA501C;
    border-radius: 2px;
}
/* H2 in left-aligned context (e.g. inside Why Source section) */
main section.elementor-section[class*="text-left"] h2::after,
main section h2.elementor-heading-title[style*="text-align:left"]::after {
    left: 0;
    transform: none;
}

/* Generic anchor smooth scroll behavior */
html { scroll-behavior: smooth; }

/* Selection color */
::selection {
    background: rgba(234, 80, 28, 0.20);
    color: #0F1F2B;
}

/* Skip-to-content (a11y) */
.skip-to-content {
    position: absolute;
    left: -9999px;
}
.skip-to-content:focus {
    left: 12px;
    top: 12px;
    background: #0F1F2B;
    color: #fff;
    padding: 12px 18px;
    z-index: 99999;
    border-radius: 4px;
}

/* ==========================================================================
   v3.8.13 — Mobile + reading polish
   ========================================================================== */
@media (max-width: 768px) {
    /* Hero h1 mobile sizing */
    section.elementor-section h1.elementor-heading-title,
    .ol-page-hero h1 {
        font-size: clamp(28px, 7vw, 38px) !important;
        line-height: 1.15 !important;
        padding: 0 16px;
        word-break: break-word;
    }
    /* Subtitle mobile — let it wrap fully */
    section.elementor-section .elementor-widget-text-editor p,
    .ol-page-hero p,
    .ol-page-hero__sub {
        font-size: 14px !important;
        line-height: 1.55 !important;
        padding: 0 16px !important;
        max-width: 100% !important;
    }
    /* Hero buttons stack vertically on small phones */
    section.elementor-section:first-of-type .elementor-button-wrapper {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    /* Cards single column */
    .elementor-row, .elementor-container { gap: 16px !important; }
    /* Form input full-width */
    .wpforms-field input, .wpforms-field textarea, .wpforms-field select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    /* Section padding tighter */
    main .elementor-section {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
}

@media (max-width: 480px) {
    /* Even smaller hero on very small phones */
    section.elementor-section h1.elementor-heading-title,
    .ol-page-hero h1 {
        font-size: clamp(22px, 7vw, 30px) !important;
    }
    /* Logo tighter */
    .ol-logo-img { max-height: 32px; }
}

/* === Reading experience === */
main p { line-height: 1.65; }
main p + p { margin-top: 1em; }
main ul, main ol { line-height: 1.65; }
main blockquote {
    border-left: 4px solid #EA501C;
    background: rgba(234, 80, 28, 0.05);
    padding: 18px 24px;
    margin: 24px 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: #1a2a35;
}

/* Body link styling within paragraphs */
main p a,
main li a {
    color: #EA501C;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s, text-decoration-thickness 0.2s;
}
main p a:hover,
main li a:hover {
    color: #C13E0E;
    text-decoration-thickness: 2px;
}

/* Tap target a11y on mobile */
@media (max-width: 768px) {
    a, button {
        min-height: 44px;
    }
    a.elementor-button,
    .elementor-widget-button .elementor-button,
    button[type="submit"],
    .wpforms-submit,
    .ol-btn-primary {
        min-height: 48px;
        padding: 12px 24px !important;
    }
}

/* Footer column mobile single col */
@media (max-width: 768px) {
    .ol-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* Print styles */
@media print {
    .ol-fbtn, .ol-floating-cta, .ol-mobile-drawer { display: none !important; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   v3.8.14 — Selection highlight readable contrast
   Was: bg orange 20% + text navy → unreadable when selecting on dark/orange.
   Now: solid orange + white text — high contrast everywhere.
   ========================================================================== */
::selection {
    background: #EA501C !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
}
::-moz-selection {
    background: #EA501C !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
}

/* ==========================================================================
   v3.8.15 — Contact form labels readable on dark navy (high specificity)
   ========================================================================== */
body.page-id-293 .wpforms-field-label,
body.page-id-293 .wpforms-form label,
body.page-id-293 .wpforms-form .wpforms-field-description,
body.page-id-293 .wpforms-form .wpforms-field-sublabel,
body.page-id-293 form label,
body.page-id-293 .elementor-element form label,
body.page-id-293 main form label,
body.page-id-293 main .wpforms-field-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
body.page-id-293 .wpforms-required-label,
body.page-id-293 .wpforms-form .wpforms-required-label {
    color: #EA501C !important;
    font-weight: 700 !important;
}
/* Form input bg + text on dark contact section */
body.page-id-293 input[type="text"],
body.page-id-293 input[type="email"],
body.page-id-293 input[type="tel"],
body.page-id-293 textarea,
body.page-id-293 select,
body.page-id-293 .wpforms-field input,
body.page-id-293 .wpforms-field textarea,
body.page-id-293 .wpforms-field select {
    background: #FFFFFF !important;
    color: #0F1F2B !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
}
body.page-id-293 input::placeholder,
body.page-id-293 textarea::placeholder {
    color: #94A3B8 !important;
}
body.page-id-293 input:focus,
body.page-id-293 textarea:focus,
body.page-id-293 select:focus {
    border-color: #EA501C !important;
    outline: 2px solid rgba(234, 80, 28, 0.30) !important;
}

/* Contact Information section text — also white on dark */
body.page-id-293 .ol-ci h3,
body.page-id-293 .ol-ci p,
body.page-id-293 .ol-ci li,
body.page-id-293 .ol-ci a {
    color: #FFFFFF !important;
}
body.page-id-293 .ol-ci li,
body.page-id-293 .ol-ci p {
    color: rgba(255,255,255,0.85) !important;
}
body.page-id-293 .ol-ci .ol-fi,
body.page-id-293 .ol-ci svg,
body.page-id-293 .ol-ci i {
    color: #EA501C !important;
}

/* ==========================================================================
   v3.8.16 — WPForms CSS variable override (was the actual blocker)
   WPForms sets `--wpforms-label-color: rgba(0,0,0,0.85)` inline, which beats
   normal color rules (CSS variable cascade is independent of !important on
   the consuming property). Override the variable itself.
   ========================================================================== */
body.page-id-293,
body.page-id-293 .wpforms-container,
body.page-id-293 .wpforms-container-full,
body.page-id-293 .wpforms-form,
body.page-id-293 .wpforms-form .wpforms-field {
    --wpforms-label-color: #FFFFFF !important;
    --wpforms-label-sublabel-color: #FFFFFF !important;
    --wpforms-label-error-color: #EA501C !important;
    --wpforms-field-text-color: #0F1F2B !important;
    --wpforms-field-background-color: #FFFFFF !important;
    --wpforms-field-border-color: rgba(255,255,255,0.20) !important;
    --wpforms-field-border-color-focus: #EA501C !important;
}
/* Direct color override too — belt & suspenders */
body.page-id-293 .wpforms-container-full .wpforms-field-label,
body.page-id-293 .wp-core-ui div.wpforms-container-full .wpforms-field-label,
body.page-id-293 .wpforms-container .wpforms-field-label,
body.page-id-293 .wpforms-form .wpforms-field-label {
    color: #FFFFFF !important;
}

/* ==========================================================================
   v3.8.17 — Super-specific WPForms label override + ol-ci + nuke "wpforms-0"
   ========================================================================== */
/* Multi-class chain with id and tag — wins over any plugin rule */
html body.page-id-293 div.wpforms-container-full label.wpforms-field-label,
html body.page-id-293 div.wpforms-container.wpforms-container-full form.wpforms-form label.wpforms-field-label,
html body.page-id-293 div#wpforms-0 label.wpforms-field-label,
html body.page-id-293 #wpforms-form-236 label.wpforms-field-label,
html body.page-id-293 .wpforms-field-container label.wpforms-field-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* ol-ci high specificity */
html body.page-id-293 .ol-ci,
html body.page-id-293 .ol-ci h3,
html body.page-id-293 .ol-ci p,
html body.page-id-293 .ol-ci ul,
html body.page-id-293 .ol-ci li,
html body.page-id-293 .ol-ci li span,
html body.page-id-293 .ol-ci li a,
html body.page-id-293 .ol-ci-list,
html body.page-id-293 .ol-ci-list li,
html body.page-id-293 .ol-ci-list a {
    color: rgba(255,255,255,0.95) !important;
}
html body.page-id-293 .ol-ci .ol-fi,
html body.page-id-293 .ol-ci-list .ol-fi,
html body.page-id-293 .ol-ci svg,
html body.page-id-293 .ol-ci-list svg {
    color: #EA501C !important;
    fill: #EA501C !important;
}

/* Required asterisk */
html body.page-id-293 span.wpforms-required-label {
    color: #EA501C !important;
}

/* ==========================================================================
   v3.8.20 — Universal form-236 label white (works on contact page AND modal)
   ========================================================================== */
html body div.wpforms-container.wpforms-container-full label.wpforms-field-label,
html body div#wpforms-0 label.wpforms-field-label,
html body form#wpforms-form-236 label.wpforms-field-label,
html body div[data-formid="236"] label.wpforms-field-label,
html body form[data-formid="236"] label.wpforms-field-label,
html body div.wpforms-form label.wpforms-field-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
html body span.wpforms-required-label,
html body .wpforms-form .wpforms-required-label {
    color: #EA501C !important;
}
/* CSS variable override — universal */
html body .wpforms-container,
html body .wpforms-container-full,
html body .wpforms-form {
    --wpforms-label-color: #FFFFFF !important;
    --wpforms-label-sublabel-color: #FFFFFF !important;
}

/* ==========================================================================
   v3.8.21 — Compact TranslatePress language switcher (flags only, no labels)
   ========================================================================== */
/* Reduce switcher font + flag size via TP CSS vars (set inline by plugin) */
.ol-lang-switch .trp-shortcode-switcher__wrapper {
    --font-size: 12px !important;
    --flag-size: 16px !important;
    --bg-hover: rgba(234, 80, 28, 0.08) !important;
    --border-radius: 4px !important;
}

/* Hide language-name text in BOTH the trigger and the dropdown items —
   just show flags (compact) */
.ol-lang-switch .trp-language-item-name {
    display: none !important;
}

/* Tight padding around items */
.ol-lang-switch .trp-language-item {
    padding: 4px 8px !important;
    gap: 0 !important;
    min-width: 0 !important;
}

/* Trigger row — flag + chevron only */
.ol-lang-switch .trp-current-language-item__wrapper {
    padding: 0 !important;
    gap: 4px !important;
}
.ol-lang-switch .trp-shortcode-arrow {
    width: 14px !important;
    height: 14px !important;
}

/* Dropdown list — narrower */
.ol-lang-switch .trp-switcher-dropdown-list {
    min-width: 0 !important;
    width: auto !important;
    padding: 4px !important;
}

/* Each dropdown item — square-ish, just flag */
.ol-lang-switch .trp-switcher-dropdown-list .trp-language-item {
    padding: 6px 8px !important;
    justify-content: center;
}

/* Flag image consistent size */
.ol-lang-switch .trp-flag-image {
    width: 20px !important;
    height: 14px !important;
    margin: 0 !important;
}

/* Hover highlight */
.ol-lang-switch .trp-language-item:hover {
    background: rgba(234, 80, 28, 0.10) !important;
}

/* ==========================================================================
   v3.8.22 — Lang switcher: flag + 2-letter code (EN/AR/ZH)
   ========================================================================== */
/* Show language names again — but JS will short them to 2 letters */
.ol-lang-switch .trp-language-item-name {
    display: inline-block !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-size: 12px;
    margin-left: 6px;
}
.ol-lang-switch .trp-language-item {
    padding: 6px 10px !important;
    gap: 4px !important;
}
.ol-lang-switch .trp-switcher-dropdown-list .trp-language-item {
    justify-content: flex-start;
    padding: 8px 12px !important;
}
.ol-lang-switch .trp-switcher-dropdown-list {
    min-width: 90px !important;
}
.ol-lang-switch .trp-current-language-item__wrapper {
    padding: 4px 8px !important;
}
.ol-lang-switch .trp-flag-image {
    width: 20px !important;
    height: 14px !important;
    margin: 0 !important;
    border-radius: 2px;
}

/* ==========================================================================
   v3.8.23 — Mobile drawer polish + floating button align + card centering
   ========================================================================== */

/* Floating buttons (WhatsApp + back-to-top) — strict right-align via flex container */
.ol-floating-cta {
    align-items: center !important;
    right: 20px !important;
    bottom: 20px !important;
    gap: 12px !important;
}
.ol-floating-cta .ol-fbtn-wa {
    width: 52px !important;
    height: 52px !important;
}
.ol-floating-cta .ol-fbtn-top {
    width: 44px !important;
    height: 44px !important;
}
@media (max-width: 768px) {
    .ol-floating-cta {
        right: 14px !important;
        bottom: 14px !important;
    }
}

/* Mobile drawer language switcher (TP shortcode) */
.ol-mobile-drawer .ol-mobile-lang {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.ol-mobile-drawer .ol-mobile-lang a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.ol-mobile-drawer .ol-mobile-lang a:hover {
    background: rgba(234, 80, 28, 0.20);
    border-color: #EA501C;
}
.ol-mobile-drawer .ol-mobile-lang img {
    width: 18px;
    height: 13px;
    margin: 0;
}

/* Card titles — center-align inside icon-box / image-box */
.elementor-widget-icon-box .elementor-icon-box-content,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-content,
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-image-box .elementor-image-box-description {
    text-align: center !important;
}
.elementor-widget-icon-box .elementor-icon {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* "Learn More" / generic CTA buttons — center-align inside Elementor button widgets */
.elementor-widget-button {
    text-align: center;
}
.elementor-widget-button .elementor-button-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
/* Hero section CTAs (Get a Quote / Explore Products) — keep centered too */
section.elementor-section:first-of-type .elementor-button-wrapper {
    justify-content: center;
}

/* ==========================================================================
   v3.8.24 — Center product card titles + buttons (4-col layouts)
   ========================================================================== */
/* Product cards use raw heading widgets in elementor-col-25 (4-col grid).
   Center title + body + button so they look like proper cards. */
.elementor-col-25 .elementor-widget-heading h1,
.elementor-col-25 .elementor-widget-heading h2,
.elementor-col-25 .elementor-widget-heading h3,
.elementor-col-25 .elementor-widget-heading h4,
.elementor-col-25 .elementor-widget-text-editor,
.elementor-col-25 .elementor-widget-text-editor p {
    text-align: center !important;
}
.elementor-col-25 .elementor-widget-button {
    text-align: center !important;
}
.elementor-col-25 .elementor-widget-button .elementor-button-wrapper {
    display: flex;
    justify-content: center;
}

/* Same treatment for elementor-col-33 (3-col layouts like Wholesale Categories) */
.elementor-col-33 .elementor-widget-heading h1,
.elementor-col-33 .elementor-widget-heading h2,
.elementor-col-33 .elementor-widget-heading h3,
.elementor-col-33 .elementor-widget-heading h4,
.elementor-col-33 .elementor-widget-text-editor,
.elementor-col-33 .elementor-widget-text-editor p {
    text-align: center !important;
}
.elementor-col-33 .elementor-widget-button {
    text-align: center !important;
}
.elementor-col-33 .elementor-widget-button .elementor-button-wrapper {
    display: flex;
    justify-content: center;
}

/* Product image inside col-25 should also be centered */
.elementor-col-25 .elementor-widget-image,
.elementor-col-25 .elementor-widget-image .elementor-image {
    text-align: center;
}
.elementor-col-25 .elementor-widget-image img {
    margin-left: auto;
    margin-right: auto;
}

/* H2 underline accent — recenter on left-aligned column-12 layouts */
.elementor-col-25 h2.elementor-heading-title::after,
.elementor-col-33 h2.elementor-heading-title::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* ==========================================================================
   v3.8.26 — UNIVERSAL button + content centering inside ALL elementor columns
   Fix: previous rules only targeted col-25/col-33. Buttons in col-50 / col-100
   / single-column section layouts were still left-aligned. Apply globally.
   ========================================================================== */

/* === ALL elementor button widgets — centered by default === */
.elementor-widget-button {
    text-align: center !important;
}
.elementor-widget-button .elementor-button-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 12px;
}
.elementor-widget-button .elementor-button {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero CTAs especially — both buttons centered as a group */
section.elementor-section:first-of-type .elementor-button-wrapper {
    justify-content: center !important;
}

/* === Inside any elementor column wider than col-25, also center heading + body
   when a sibling button is also there (typical card layout) === */
.elementor-col-25 .elementor-widget-heading h1,
.elementor-col-25 .elementor-widget-heading h2,
.elementor-col-25 .elementor-widget-heading h3,
.elementor-col-25 .elementor-widget-heading h4,
.elementor-col-25 .elementor-widget-text-editor,
.elementor-col-25 .elementor-widget-text-editor p,
.elementor-col-33 .elementor-widget-heading h1,
.elementor-col-33 .elementor-widget-heading h2,
.elementor-col-33 .elementor-widget-heading h3,
.elementor-col-33 .elementor-widget-heading h4,
.elementor-col-33 .elementor-widget-text-editor,
.elementor-col-33 .elementor-widget-text-editor p {
    text-align: center !important;
}

/* === All icon-box + image-box content — centered === */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-content,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-image-box .elementor-image-box-content,
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-image-box .elementor-image-box-description {
    text-align: center !important;
}
.elementor-widget-icon-box .elementor-icon,
.elementor-widget-image-box .elementor-image-box-img {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === Spacer-aligned inner content (force flex column for product cards) === */
.elementor-col-25 > .elementor-widget-wrap,
.elementor-col-33 > .elementor-widget-wrap {
    align-content: flex-start;
    text-align: center;
}

/* H2 underline accent — always centered under the heading itself */
main section h2.elementor-heading-title {
    position: relative;
    padding-bottom: 12px;
    text-align: center;
}
main section h2.elementor-heading-title::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* ==========================================================================
   v3.8.27 — Mobile button stacking + viewport polish (Loop 1 R4 fix)
   ========================================================================== */
@media (max-width: 480px) {
    /* Hero CTAs stack vertically on phones */
    section.elementor-section:first-of-type .elementor-button-wrapper {
        flex-direction: column !important;
        gap: 10px !important;
    }
    section.elementor-section:first-of-type .elementor-button-wrapper > * {
        width: auto;
    }
    /* Hero h1 tighter on small phones */
    section.elementor-section:first-of-type h1.elementor-heading-title {
        font-size: clamp(22px, 6.5vw, 28px) !important;
        padding: 0 12px !important;
    }
    /* Subtitle smaller */
    section.elementor-section:first-of-type .elementor-widget-text-editor p {
        font-size: 13px !important;
        padding: 0 12px !important;
    }
}

/* ==========================================================================
   v3.8.28 — A11y polish (Loop 1 R7)
   ========================================================================== */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .elementor-widget-icon-box .elementor-icon-box-wrapper:hover,
    .elementor-widget-image-box .elementor-image-box-wrapper:hover,
    .elementor-widget-button .elementor-button:hover {
        transform: none !important;
    }
}

/* Focus-visible — clear ring on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #EA501C !important;
    outline-offset: 3px !important;
}
/* Remove default browser outline if focus-visible is supported */
:focus:not(:focus-visible) {
    outline: none;
}

/* Required asterisk a11y — make it more prominent */
.wpforms-required-label,
abbr[title="required"] {
    color: #EA501C !important;
    font-weight: 700;
}

/* Ensure body line-height is comfortable for screen readers */
body {
    line-height: 1.65;
}

/* ==========================================================================
   v3.8.32 — Hero subtitle alignment consistency (Loop 2 R1)
   Subpage heroes had subtitle left-aligned; align with home (centered).
   ========================================================================== */
section.elementor-section:first-of-type .elementor-widget-heading h1 {
    text-align: center !important;
}
section.elementor-section:first-of-type .elementor-widget-heading h2 {
    text-align: center !important;
}
section.elementor-section:first-of-type .elementor-widget-text-editor,
section.elementor-section:first-of-type .elementor-widget-text-editor p {
    text-align: center !important;
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Hero h2 underline accent — disable on hero (would conflict with hero design) */
section.elementor-section:first-of-type h2.elementor-heading-title::after {
    display: none !important;
}

/* ==========================================================================
   v3.8.33 — Hero h1 font consistency (some heroes had sans-serif fallback)
   ========================================================================== */
section.elementor-section:first-of-type h1.elementor-heading-title,
section.elementor-section:first-of-type h2.elementor-heading-title,
.ol-page-hero h1,
.ol-page-hero h2 {
    font-family: 'Playfair Display', 'Roboto Slab', Georgia, serif !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}
/* RTL Arabic — use Cairo */
[dir="rtl"] section.elementor-section:first-of-type h1.elementor-heading-title,
[dir="rtl"] section.elementor-section:first-of-type h2.elementor-heading-title,
[dir="rtl"] .ol-page-hero h1,
[dir="rtl"] .ol-page-hero h2 {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif !important;
}

/* === v3.8.39 — Hero 区生产 hot-fix === */
/* 1) Hero 标题改白色（覆盖 elementor data 里的 #ea501c） */
body.home .elementor-element-0000001 .elementor-heading-title,
body.home section.elementor-section:first-of-type .elementor-heading-title {
    color: #FFFFFF !important;
}

/* 2) Hero 副标题居中 */
body.home .elementor-element-0000003,
body.home .elementor-element-0000003 p,
body.home section.elementor-section:first-of-type .elementor-widget-text-editor,
body.home section.elementor-section:first-of-type .elementor-widget-text-editor p {
    text-align: center !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === v3.8.40 — 弹窗内 WPForms 标签可见性修复 ===
   弹窗白底，但全局 CSS 把表单标签强制设为白色（适合 contact 页深底）。
   弹窗内需要恢复深色。 */
.ol-modal .ol-modal-body .wpforms-container label.wpforms-field-label,
.ol-modal .ol-modal-body div#wpforms-0 label.wpforms-field-label,
.ol-modal .ol-modal-body .wpforms-field-label,
.ol-modal .ol-modal-body .wpforms-required-label {
    color: #0F1F2B !important;
}
.ol-modal .ol-modal-body .wpforms-field-label-inline,
.ol-modal .ol-modal-body .wpforms-field-sublabel {
    color: #4a5568 !important;
}
/* 弹窗输入框边框 */
.ol-modal .ol-modal-body input.wpforms-field-medium,
.ol-modal .ol-modal-body select.wpforms-field-medium,
.ol-modal .ol-modal-body textarea.wpforms-field-medium {
    border: 1px solid #D1D5DB !important;
    color: #0F1F2B !important;
    background: #FFFFFF !important;
}
.ol-modal .ol-modal-body input.wpforms-field-medium:focus,
.ol-modal .ol-modal-body select.wpforms-field-medium:focus,
.ol-modal .ol-modal-body textarea.wpforms-field-medium:focus {
    border-color: #EA501C !important;
    outline: 2px solid rgba(234, 80, 28, 0.2) !important;
}

/* === v3.8.41 — 首页移除两个重复模块 ===
   00000c4 = "Ready to source authentic agarwood?" CTA section
   00000c9 = "Contact Information" + 表单 section
   原因：与 hero 区 CTA 重复 + 有专门 /contact-us/ 页面 */
body.home .elementor-element-00000c4,
body.home .elementor-element-00000c9 {
    display: none !important;
}

/* === v3.8.42 — 隐藏 footer 营业时间模块 ===
   "Reply Window (GMT+8)" — 与上面的 Mon-Sat 09:00-18:00 重复 */
.opening-hours-block {
    display: none !important;
}


/* === v3.8.43 — 全局移除 h2 装饰下划线 + "Have a question" 标题白色 === */
/* 1) 移除所有 section h2 下方的橙色装饰短线（::after 伪元素） */
main section h2.elementor-heading-title {
    padding-bottom: 0 !important;
    margin-bottom: 24px !important;
}
main section h2.elementor-heading-title::after {
    display: none !important;
}

/* 2) 深色背景 section 的 h2 默认白色（覆盖 elementor 默认深色字） */
.elementor-section[class*="elementor-element-00000f1"] h2,
.elementor-section[class*="elementor-element-00001d6"] h2,
.elementor-section[class*="elementor-element-0000164"] h2,
.elementor-section[class*="elementor-element-000029d"] h2,
.elementor-section[class*="elementor-element-"] .elementor-heading-title:not([style*="color"]) {
    /* 上面 4 个是已知 'Have a question' section IDs */
}

/* v3.8.47: 撤销全局强制白色 — 让 widget title_color 自己生效。
   原规则保留但注释。 */
/* main section h2.elementor-heading-title {
    color: #FFFFFF !important;
}
main section.ol-light-section h2.elementor-heading-title,
.elementor-section[style*="background-color:#FFFFFF"] h2.elementor-heading-title,
.elementor-section[style*="background-color:#F8F4EE"] h2.elementor-heading-title,
.elementor-section[style*="background:#F8F4EE"] h2.elementor-heading-title {
    color: #0F1F2B !important;
} */

/* === v3.8.44 — 字体统一为 Sans-serif（去除 Playfair Display 衬线）+ 深色 section h2 白色 === */

/* 1) 全站所有 heading 用 Inter（覆盖 Playfair Display） */
.elementor-heading-title,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
section.elementor-section h1,
section.elementor-section h2,
section.elementor-section h3,
section.elementor-section h4,
.ol-page-hero h1,
.ol-page-hero h2,
.ol-hero-title,
.ol-section-title,
body main h1, body main h2, body main h3, body main h4,
.ol-home-quotes__title,
.ol-price-card__title {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif !important;
    letter-spacing: -0.01em;
}

/* RTL 阿拉伯文 — 仍用 Cairo */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .elementor-heading-title {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif !important;
}

/* 2) 深色背景 section 标题强制白色（包括首页 "See Our Craft" 等） */
.elementor-element-5ae578a .elementor-heading-title,
.elementor-element-5ae578a h2 {
    color: #FFFFFF !important;
}

/* 通用：暗背景检测——elementor 默认背景色 #1a365d / #0F1F2B / #0a1929 都判定为暗 */
.elementor-element[class*="elementor-element-"] .elementor-heading-title {
    /* 用 mix-blend-mode 让自动适应——不行，elementor 用动态 inline style，CSS 难选中 */
}

/* v3.8.47: 撤销 "全局 h2 强制白色" — 浅色背景 section 上白字看不见。
   让 elementor 数据自己决定颜色（widget 后台 title_color 字段）。
   只对已知深色背景的特定 section 强制白色（hero / CTA）。 */
/* body > section.elementor-section h2.elementor-heading-title,
.elementor h2.elementor-heading-title {
    color: #FFFFFF !important;
} */


/* === v3.8.46 — 子页面 hero 背景图（每页主题图）+ click-to-play 视频 === */

/* 通用 hero 区背景图样式 */
body[class*="page-id-"] section.elementor-section:first-of-type {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
}
/* 暗色蒙版让标题可读 */
body[class*="page-id-"] section.elementor-section:first-of-type > .elementor-background-overlay,
body[class*="page-id-"] section.elementor-section:first-of-type::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,31,43,0.65) 0%, rgba(15,31,43,0.85) 100%);
    z-index: 1;
    pointer-events: none;
}
body[class*="page-id-"] section.elementor-section:first-of-type > .elementor-container {
    position: relative;
    z-index: 2;
}

/* 每个页面对应主题图 */
body.page-id-288 section.elementor-section:first-of-type,   /* About Us */
body.page-id-294 section.elementor-section:first-of-type {  /* About OudLink */
    background-image: url('/wp-content/uploads/oudlink/Agarwood-trees.jpg');
}
body.page-id-289 section.elementor-section:first-of-type {  /* What is Agarwood */
    background-image: url('/wp-content/uploads/oudlink/Agarwoodtree.jpg');
}
body.page-id-290 section.elementor-section:first-of-type {  /* Agarwood Wholesale */
    background-image: url('/wp-content/uploads/oudlink/Agarwoods.jpg');
}
body.page-id-299 section.elementor-section:first-of-type {  /* Oud Chips Wholesale */
    background-image: url('/wp-content/uploads/oudlink/High-oil-tree-chips-large.jpg');
}
body.page-id-300 section.elementor-section:first-of-type {  /* Oud Oil Wholesale */
    background-image: url('/wp-content/uploads/oudlink/oud-oil-factory.jpg');
}
body.page-id-291 section.elementor-section:first-of-type {  /* Agarwood Supplier */
    background-image: url('/wp-content/uploads/oudlink/CITES-Compliant.jpg');
}
body.page-id-301 section.elementor-section:first-of-type {  /* Retailing Partner */
    background-image: url('/wp-content/uploads/oudlink/Global-Expansion-Market-Potential.png');
}
body.page-id-302 section.elementor-section:first-of-type {  /* Stakeholders */
    background-image: url('/wp-content/uploads/oudlink/oud-chips-factory.jpg');
}
body.page-id-303 section.elementor-section:first-of-type {  /* Custom Agarwood */
    background-image: url('/wp-content/uploads/oudlink/Agarwood-Distillation-Workshop.jpg');
}
body.page-id-292 section.elementor-section:first-of-type {  /* Agarwood Plantations */
    background-image: url('/wp-content/uploads/oudlink/Our-Key-Plantations-hainan.jpg');
}
body.page-id-304 section.elementor-section:first-of-type {  /* Agarwood Plantation (single) */
    background-image: url('/wp-content/uploads/oudlink/Agarwood-Saplings.jpg');
}
body.page-id-305 section.elementor-section:first-of-type {  /* Kynam Grafting */
    background-image: url('/wp-content/uploads/oudlink/绿奇楠.jpg');
}
body.page-id-295 section.elementor-section:first-of-type {  /* Mission & Vision */
    background-image: url('/wp-content/uploads/oudlink/Agarwood-trees.jpg');
}
body.page-id-296 section.elementor-section:first-of-type {  /* Our Services */
    background-image: url('/wp-content/uploads/oudlink/Step-1-%E2%80%93-Inquiry-Consultation.jpg');
}
body.page-id-297 section.elementor-section:first-of-type {  /* Agarwood Benefits */
    background-image: url('/wp-content/uploads/oudlink/02-Agarwood-iols.jpg');
}
body.page-id-298 section.elementor-section:first-of-type {  /* Agarwood Price */
    background-image: url('/wp-content/uploads/oudlink/High-oil-tree-chips-large-3.jpg');
}
body.page-id-293 section.elementor-section:first-of-type {  /* Contact Us */
    background-image: url('/wp-content/uploads/oudlink/oud-oil-testing-laboratory.jpg');
}

/* hero 区文字保持白色（图片背景上可读） */
body[class*="page-id-"]:not(.home) section.elementor-section:first-of-type .elementor-heading-title,
body[class*="page-id-"]:not(.home) section.elementor-section:first-of-type .elementor-widget-text-editor,
body[class*="page-id-"]:not(.home) section.elementor-section:first-of-type .elementor-widget-text-editor p {
    color: #FFFFFF !important;
}

/* === v3.8.48 — Click-to-play 已撤销，恢复自动播放 === */
/* （播放按钮 CSS 已移除，视频通过 mu-plugin autoplay）*/

/* === v3.8.47 — Mobile hero 黑边 + 已知深色 section h2 白色 === */

/* 1) 已知 hero / CTA 深色 section 强制白字（精确选中） */
/* 首页 hero (page-id-287, 第一个 section) */
body.home section.elementor-section:first-of-type .elementor-heading-title,
body.home section.elementor-section:first-of-type .elementor-widget-text-editor,
body.home section.elementor-section:first-of-type .elementor-widget-text-editor p {
    color: #FFFFFF !important;
}
/* 子页 hero（已加 .65→.85 蒙版背景图） */
body:not(.home)[class*="page-id-"] section.elementor-section:first-of-type .elementor-heading-title,
body:not(.home)[class*="page-id-"] section.elementor-section:first-of-type .elementor-widget-text-editor,
body:not(.home)[class*="page-id-"] section.elementor-section:first-of-type .elementor-widget-text-editor p {
    color: #FFFFFF !important;
}
/* "Have a question or quote request?" CTA section — 这些 section ID 在子页中变化，所以用文字父级匹配
   该 widget 数据库里 title_color 已设为 #ffffff，无需额外 CSS */

/* 2) 移动端首页 hero 视频上下黑边修复 */
@media (max-width: 768px) {
    /* hero section 移除多余 padding */
    body.home section.elementor-section:first-of-type {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: auto !important;
    }
    /* 视频容器全屏填充 */
    body.home section.elementor-section:first-of-type .elementor-background-video-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    /* 视频本身 cover 模式（避免黑边） */
    body.home section.elementor-section:first-of-type video.elementor-background-video-hosted {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        width: auto !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
        object-fit: cover !important;
    }
    /* 首页 hero 内容区添加合理 padding */
    body.home section.elementor-section:first-of-type > .elementor-container {
        padding: 80px 16px !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* === v3.8.48 — "Have a question?" CTA widgets 精确白色（16 个 element-id）=== */
.elementor-element-00000ed .elementor-heading-title,
.elementor-element-0000160 .elementor-heading-title,
.elementor-element-00001d2 .elementor-heading-title,
.elementor-element-0000279 .elementor-heading-title,
.elementor-element-00002ef .elementor-heading-title,
.elementor-element-000010e .elementor-heading-title,
.elementor-element-0000134 .elementor-heading-title,
.elementor-element-0000184 .elementor-heading-title,
.elementor-element-00001a3 .elementor-heading-title,
.elementor-element-0000201 .elementor-heading-title,
.elementor-element-0000230 .elementor-heading-title,
.elementor-element-0000255 .elementor-heading-title,
.elementor-element-0000299 .elementor-heading-title,
.elementor-element-00002c7 .elementor-heading-title,
.elementor-element-0000316 .elementor-heading-title,
.elementor-element-000034b .elementor-heading-title {
    color: #FFFFFF !important;
}

/* === Hero h1 字体 — 强制 Inter sans-serif（覆盖 Playfair Display）=== */
/* 适用所有 hero h1 + h2，包括 'Premium Agarwood from Plantation to Palace' 等 */
section.elementor-section:first-of-type h1.elementor-heading-title,
section.elementor-section:first-of-type h2.elementor-heading-title,
body.home .elementor-element-0000001 h1.elementor-heading-title,
body.home .elementor-element-0000001 .elementor-heading-title,
body:not(.home) section.elementor-section:first-of-type .elementor-heading-title,
.elementor-element-0000008 .elementor-heading-title,
.elementor-element-0000001 .elementor-heading-title {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
}

[dir="rtl"] section.elementor-section:first-of-type h1.elementor-heading-title,
[dir="rtl"] section.elementor-section:first-of-type h2.elementor-heading-title {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif !important;
}