﻿/* ===== EMBABY PLAST - Industrial Manufacturing Theme ===== */

/* --- Animations --- */
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(0,168,168,0.4); }
    50%       { text-shadow: 0 0 40px rgba(0,168,168,0.8), 0 0 80px rgba(0,168,168,0.3); }
}
@keyframes orb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(40px, -60px) scale(1.15); }
}
@keyframes orb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(-50px, 40px) scale(1.1); }
}

/* --- Reset & Base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

*, *::before, *::after {
    color-scheme: light !important;
}

:root {
    --primary: #0B1D2A;
    --secondary: #00A8A8;
    --accent: #F4A261;
    --bg: #F5F7FA;
    --text: #1A1A1A;
    --text-light: #555;
    --btn-hover: #007777;
    --white: #FFFFFF;
    --border: #D8DEE4;
    --shadow: rgba(11, 29, 42, 0.08);
    --shadow-hover: rgba(11, 29, 42, 0.14);
    --product-card-image-height: 220px;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

html, body {
    background-color: var(--bg) !important;
    background-image: none !important;
    color: var(--text) !important;
}

body {
    font-family: "Inter", "Segoe UI", "Roboto", sans-serif;
    line-height: 1.6;
}

/* --- Welcome Page Styles --- */
html[lang="en"] body.welcome-page,
html[lang="ar"] body.welcome-page {
    font-family: "Inter", sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(4, 13, 20, 0.72), rgba(11, 29, 42, 0.62)),
        url('images/webp/welcome background.webp') center center / cover no-repeat;
    color: #fff;
    overflow: hidden;
    position: relative;
}

body.welcome-page::before, body.welcome-page::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
body.welcome-page::before {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(0,168,168,0.18) 0%, transparent 70%);
    top: -120px; left: -120px;
    animation: orb1 9s ease-in-out infinite;
}
body.welcome-page::after {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(0,100,180,0.14) 0%, transparent 70%);
    bottom: -100px; right: -100px;
    animation: orb2 11s ease-in-out infinite;
}

.welcome-container {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3.5rem 3rem;
    max-width: 560px;
    width: 90%;
    background: rgba(255,255,255,0.045);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.75rem;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
    animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

.welcome-logo {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(2.6rem, 8vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 0.6rem;
    animation: fadeUp 0.7s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.welcome-logo span {
    color: #00A8A8;
    animation: glowPulse 3.5s ease-in-out infinite;
    display: inline-block;
}

.welcome-divider {
    width: 52px;
    height: 3px;
    background: linear-gradient(90deg, #00A8A8, #00d4d4);
    border-radius: 2px;
    margin: 0.85rem auto 1rem;
    animation: fadeUp 0.7s 0.2s cubic-bezier(0.22,1,0.36,1) both;
}

.welcome-tagline {
    font-size: 1rem;
    font-family: "Inter", sans-serif;
    color: rgba(255,255,255,0.82);
    letter-spacing: 0.04em;
    line-height: 1.65;
    margin-bottom: 0.3rem;
    animation: fadeUp 0.7s 0.25s cubic-bezier(0.22,1,0.36,1) both;
}
.welcome-tagline-ar {
    font-size: 1rem;
    font-family: "Cairo", sans-serif;
    color: rgba(255,255,255,0.82);
    letter-spacing: 0;
    line-height: 1.65;
    margin-bottom: 2.4rem;
    direction: rtl;
    animation: fadeUp 0.7s 0.3s cubic-bezier(0.22,1,0.36,1) both;
}

.welcome-label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 1.25rem;
    animation: fadeUp 0.7s 0.35s cubic-bezier(0.22,1,0.36,1) both;
}

.lang-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeUp 0.7s 0.42s cubic-bezier(0.22,1,0.36,1) both;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 0.9rem;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
    min-width: 165px;
    position: relative;
    overflow: hidden;
}
.lang-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.06);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
}
.lang-btn:hover::after { opacity: 1; }

.lang-btn-ar {
    background: linear-gradient(135deg, #00A8A8 0%, #007d7d 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,168,168,0.3);
}
.lang-btn-ar:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,168,168,0.55);
}
.lang-btn-ar:active { transform: translateY(-1px); }

.lang-btn-en {
    background: rgba(255,255,255,0.06); 
    color: rgba(255,255,255,0.9); 
    border: 1.5px solid rgba(255,255,255,0.18);
}
.lang-btn-en:hover {
    background: rgba(0,168,168,0.12);
    border-color: #00A8A8;
    color: #00d4d4;
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,168,168,0.2);
}
.lang-btn-en:active { transform: translateY(-1px); }

/* --- Arabic typography tuning: larger and more classic/wide --- */
html[dir="rtl"] body {
    font-family: "Noto Naskh Arabic", "Tahoma", serif;
    line-height: 1.75;
}

html[dir="rtl"] .hero-title,
html[dir="rtl"] .hero-eyebrow,
html[dir="rtl"] .hero-subtitle,
html[dir="rtl"] .btn,
html[dir="rtl"] .about-v2-heading,
html[dir="rtl"] .why-v2-heading,
html[dir="rtl"] .why-v2-card h3,
html[dir="rtl"] .contact-card h3,
html[dir="rtl"] .trust-number,
html[dir="rtl"] header .logo,
html[dir="rtl"] .footer .footer-logo {
    font-family: "Cairo", "Noto Naskh Arabic", "Tahoma", sans-serif;
}

html[dir="rtl"] .hero-title {
    font-size: 6.2rem;
}

html[dir="rtl"] .hero-subtitle {
    font-size: 2rem;
    max-width: 58rem;
}

html[dir="rtl"] .about-v2-text p,
html[dir="rtl"] .why-v2-card p,
html[dir="rtl"] .contact-card a,
html[dir="rtl"] .contact-card p,
html[dir="rtl"] .trust-label {
    font-size: 1.7rem;
    line-height: 1.85;
}

html[dir="rtl"] .btn {
    font-size: 1.6rem;
}

/* --- Header --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1.4rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 12px var(--shadow);
}

header .logo {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.02em;
    display: inline-block;
    line-height: 0.96;
    white-space: nowrap;
    padding-bottom: 1rem;
}

header .logo span {
    color: var(--secondary);
    position: relative;
    display: inline-block;
}

header .logo span::after {
    content: "Since 1963";
    position: absolute;
    left: 0;
    top: 100%;
    display: block;
    margin-top: 0.08rem;
    margin-inline-start: 0;
    font-family: "Inter", "Roboto", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(11, 29, 42, 0.62);
    white-space: nowrap;
}

header .logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

header .lang-mini-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--white);
    direction: ltr;
}

header .lang-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    height: 2.6rem;
    padding: 0 0.8rem;
    border-radius: 99px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    background: transparent;
    transition: all 0.2s ease;
    letter-spacing: 0.03em;
}

header .lang-mini-btn:hover {
    color: var(--secondary);
    background: rgba(0, 168, 168, 0.1);
}

header .lang-mini-btn.active {
    color: #fff;
    background: var(--secondary);
}

header .navbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

header .navbar a {
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0.8rem 1.4rem;
    color: var(--text-light);
    border-radius: 0.4rem;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

header .navbar .nav-social {
    display: none;
}

header .navbar a:hover,
header .navbar a.active {
    color: var(--secondary);
    background: rgba(0, 168, 168, 0.08);
}

header #toggler {
    display: none;
}

header .fa-bars {
    font-size: 2.4rem;
    color: var(--primary);
    cursor: pointer;
    padding: 0.5rem;
    display: none;
    background: transparent;
    border: none;
}

header .menu-overlay {
    display: none;
}

header .menu-close {
    display: none;
}

/* --- Sections --- */
section {
    padding: 5rem 9%;
}

.products {
    padding-top: 12rem;
}

/* --- Hero Section --- */
.home {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding-top: 14rem;
    padding-bottom: 8rem;
    background:
        linear-gradient(135deg, rgba(4, 13, 20, 0.72), rgba(11, 29, 42, 0.62)),
        url('images/webp/welcome background.webp') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}

.home::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 110%, rgba(0, 168, 168, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(0, 100, 180, 0.10) 0%, transparent 60%);
    pointer-events: none;
}

.home::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 3px;
    background: var(--secondary);
    border-radius: 2px;
}

.home .content {
    max-width: 68rem;
    position: relative;
    z-index: 1;
    padding: 4rem;
}

.home .content h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 5.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.home .content span {
    display: block;
    font-size: 2.4rem;
    color: var(--accent);
    padding: 1.5rem 0;
    line-height: 1.5;
    font-weight: 500;
}

.home .content p {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    max-width: 54rem;
}

.home .hero-buttons {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1rem;
    padding: 1.2rem 3.5rem;
    border-radius: 0.4rem;
    background-color: var(--secondary);
    color: #fff;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: var(--btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 168, 168, 0.3);
}

.btn-outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
}

/* --- Headings --- */
.heading {
    text-align: center;
    color: var(--primary);
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 4.2rem;
    font-weight: 700;
    margin: 2rem 0;
    padding: 1rem;
    background: transparent;
}

.heading span {
    color: var(--secondary);
}

/* --- About Section --- */
.about .row {
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.about .row .image-container {
    flex: 1 1 30rem;
    position: relative;
}

.about .row .image-container img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: 0.6rem;
}

.about .row .content {
    flex: 1 1 30rem;
}

.about .row .content h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.about .row .content p {
    font-size: 1.6rem;
    color: var(--text-light);
    line-height: 1.8;
}

/* --- Feature Icons --- */
.icons-container {
    background: var(--white);
    display: flex;
    flex-wrap: wrap;
    padding-top: 5rem;
    padding-bottom: 5rem;
    gap: 2rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.icons-container .icons {
    background-color: var(--bg);
    padding: 2.4rem;
    display: flex;
    align-items: center;
    flex: 1 1 25rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.icons-container .icons:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--shadow);
}

.icons-container .icons i {
    font-size: 3rem;
    padding: 0 1.5rem;
    color: var(--secondary);
}

.icons-container .icons h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary);
}

.icons-container .icons span {
    font-size: 1.4rem;
    color: var(--text-light);
}

/* --- Section Cards --- */
.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2.4rem;
    margin-top: 3rem;
}

.section-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 3rem 2.4rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.section-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--shadow-hover);
}

.section-card i {
    font-size: 3.2rem;
    color: var(--secondary);
    margin-bottom: 1.4rem;
}

.section-card h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.section-card p {
    font-size: 1.5rem;
    color: var(--text-light);
    line-height: 1.7;
}

/* --- Product Range --- */
.product-range {
    background: var(--white);
    border-top: 1px solid var(--border);
}

.range-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.range-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 2.4rem;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.range-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--shadow);
}

.range-item i {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 1.2rem;
}

.range-item h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.6rem;
}

.range-item p {
    font-size: 1.4rem;
    color: var(--text-light);
}

/* --- Export Section --- */
.export-section {
    background: var(--primary);
    color: #fff;
    text-align: center;
}

.export-section .heading { color: #fff; }
.export-section .heading span { color: var(--accent); }

.export-section p {
    font-size: 1.7rem;
    color: rgba(255,255,255,0.8);
    max-width: 72rem;
    margin: 0 auto 2rem;
    line-height: 1.8;
}

.export-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

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

.export-stat .stat-number {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 4rem;
    font-weight: 800;
    color: var(--accent);
}

.export-stat .stat-label {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- Contact Section --- */
.contact-section { background: var(--bg); }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 2.4rem;
    margin-top: 3rem;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--shadow-hover);
}

.contact-card i { font-size: 2.8rem; color: var(--secondary); margin-bottom: 1rem; }
.contact-card h3 { font-size: 1.8rem; color: var(--primary); margin-bottom: 0.6rem; }
.contact-card a, .contact-card p { font-size: 1.5rem; color: var(--text-light); }
.contact-card a:hover { color: var(--secondary); }

.contact-card.contact-card-clickable {
    cursor: pointer;
}

.contact-card.contact-card-clickable:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}

/* --- Products Page --- */
.products { padding-top: 12rem; }

.products .heading {
    margin: 0;
    padding: 0 0 0.6rem;
    line-height: 1.2;
}

.products .products-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    margin-bottom: 0.4rem;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #f7f9fb;
    width: min(58rem, 100%);
}

.products .products-section-btn {
    min-width: 0;
    flex: 1 1 0;
    height: 4.4rem;
    padding: 0 1.2rem;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    background: var(--white);
    color: var(--primary);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.products .products-section-btn:hover {
    border-color: var(--secondary);
    box-shadow: 0 4px 12px rgba(0, 168, 168, 0.12);
}

.products .products-section-btn:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.products .products-section-btn.active {
    color: var(--white);
    background: var(--secondary);
    border-color: var(--secondary);
    box-shadow: 0 8px 18px rgba(0, 168, 168, 0.34);
}

.products .products-section-btn:active {
    box-shadow: 0 10px 20px rgba(0, 168, 168, 0.36);
}

/* --- Product Search --- */
.products .products-search {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
    margin-top: 0.8rem;
    max-width: 58rem;
}

.products .products-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    max-width: 48rem;
}

[dir="rtl"] .products .products-search .products-view-toggle {
    order: -1;
}

.products .products-type-filter-wrap {
    margin-top: 1rem;
    max-width: 58rem;
}

.products .products-type-filter-row {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
}

.products .products-type-filter-row .products-view-toggle {
    order: 1;
}

.products .products-type-filter-row .products-type-filter {
    order: 2;
}

.products .products-type-filter-label {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.products .products-type-filter {
    width: 100%;
    max-width: 48rem;
    height: 4.2rem;
    padding: 0 1.1rem;
    font-size: 1.4rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--white);
    color: var(--text);
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.products .products-type-filter:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.12);
}

.products .products-search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--text-light);
    pointer-events: none;
}

[dir="ltr"] .products .products-search-icon,
:root:not([dir="rtl"]) .products .products-search-icon {
    left: 1.4rem;
}

[dir="rtl"] .products .products-search-icon {
    right: 1.4rem;
}

.products .products-search-input {
    width: 100%;
    height: 4.2rem;
    padding: 1rem 1.4rem 1rem 4rem;
    font-size: 1.4rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--white);
    color: var(--text);
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

[dir="rtl"] .products .products-search-input {
    padding: 1rem 4rem 1rem 1.4rem;
}

.products .products-search-input::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

.products .products-search-input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.12);
}

.products .products-total-count {
    margin-top: 1rem;
    font-size: 1.35rem;
    color: var(--text-light);
    font-weight: 600;
}

.products .products-total-count-text {
    white-space: normal;
}

.products .products-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.products .products-view-btn {
    width: 4.2rem;
    height: 4.2rem;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    background: var(--white);
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.products .products-view-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.products .products-view-btn:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.products .products-view-btn.active {
    color: var(--white);
    background: var(--secondary);
    border-color: var(--secondary);
}

@media (max-width: 700px) {
    .products .products-section-toggle {
        display: flex;
        width: 100%;
    }

    .products .products-section-btn {
        min-width: 0;
        flex: 1 1 0;
    }

    .products .products-search {
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .products .products-search-input-wrap {
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }

    .products .products-type-filter-row {
        flex-wrap: nowrap;
        gap: 0.6rem;
    }

    .products .products-type-filter {
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }

    .products .products-view-toggle {
        flex: 0 0 auto;
    }
}

.products .products-no-results {
    display: none;
    margin-top: 2rem;
    font-size: 1.5rem;
    color: var(--text-light);
    text-align: center;
}

/* --- Product Cards --- */
.products .box-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
    margin-top: 1.4rem;
    align-items: stretch;
}

.products .box-container .box {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 4px 16px var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.products .box-container .box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--shadow-hover);
}

.products .box-container .box:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}

.products .box .product-badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    opacity: 1;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    color: #fff;
}

.products .box .product-badge.new { background: var(--secondary); }
.products .box .product-badge.bestseller { background: var(--accent); }
.products .box .product-badge.popular { background: var(--primary); }

.products .box .images {
    position: relative;
    height: var(--product-card-image-height);
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.product-image-frame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #fff;
}

.product-image-frame picture {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

.product-image-frame img.is-hidden {
    display: none;
}

.product-image-fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 1.6rem;
    background: #fff;
    color: var(--primary);
    text-align: center;
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}

.product-image-frame.is-missing-image .product-image-fallback {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
}

.products .box .images .product-image-frame {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.products .box .images img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: none;
}

.products .box .images img.lazy-loaded {
    opacity: 1;
}

.products .box.variant-result-card .images img.clickable-preview {
    cursor: zoom-in;
}

.products .box:hover .images img {
    transform: none;
}

.products .box .content {
    padding: 1.8rem 1.8rem 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.products .box .content h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
    margin-bottom: 0.6rem;
    overflow-wrap: anywhere;
}

.products .box .content .product-type-tag {
    display: inline-block;
    margin: 0 0 0.8rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(0, 168, 168, 0.35);
    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--secondary);
    background: rgba(0, 168, 168, 0.08);
}

.products .box > .icons {
    margin-top: auto;
    padding: 1.2rem 1.8rem 1.8rem;
    border-top: 1px solid var(--border);
}

.products .box > .icons .btn-cart {
    display: block;
    width: 100%;
    border-radius: 0.4rem;
    padding: 1.2rem 0;
    text-align: center;
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--secondary);
    transition: background 0.25s ease, transform 0.2s ease;
}

.products .box > .icons .btn-cart:hover {
    background: var(--btn-hover);
    transform: translateY(-1px);
}

/* Product-details card design applied to search results */
.products .box-container .box.variant-result-card.product-variant-card {
    border-radius: 0.4rem;
    box-shadow: 0 4px 16px var(--shadow);
}

.products .box-container .box.variant-result-card.product-variant-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--shadow-hover);
}

.products .box-container .box.variant-result-card.product-variant-card .images {
    position: relative;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    height: var(--product-card-image-height);
}

.products .box-container .box.variant-result-card.product-variant-card .images .product-image-frame {
    width: 100%;
    height: 100%;
}

.products .box-container .box.variant-result-card.product-variant-card .images img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.products .box-container .box.variant-result-card.product-variant-card .content {
    padding: 1.8rem 1.8rem 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

[dir="rtl"] .products .box-container .box.variant-result-card.product-variant-card .content {
    text-align: right;
}

.products .box-container .box.variant-result-card.product-variant-card .content h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
    margin-bottom: 0.6rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.products .box-container .box.variant-result-card.product-variant-card .product-dozen-qty,
.products .box-container .box.variant-result-card.product-variant-card .product-carton-price {
    font-size: 1.35rem;
    color: var(--text-light);
    margin: 0;
}

.products .box-container .box.variant-result-card.product-variant-card .product-dozen-qty .qty-label,
.products .box-container .box.variant-result-card.product-variant-card .product-carton-price .qty-label {
    font-weight: 700;
    color: var(--primary);
}

.products .box-container .box.variant-result-card.product-variant-card > .icons {
    margin-top: auto;
    padding: 1.2rem 1.8rem 1.8rem;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
}

.products .box-container .box.variant-result-card.product-variant-card > .icons .btn-cart {
    display: block;
    width: 100%;
    border-radius: 0.4rem;
    padding: 1.2rem 0;
    text-align: center;
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.products .box-container .box.variant-result-card.product-variant-card > .icons .product-variant-wa {
    background: #25d366;
}

.products .box-container .box.variant-result-card.product-variant-card > .icons .product-variant-wa:hover {
    background: #128c7e;
}

.products .box-container .box.variant-result-card.product-variant-card > .icons .product-variant-call {
    background: var(--primary);
    color: #fff;
}

.products .box-container .box.variant-result-card.product-variant-card > .icons .product-variant-call:hover {
    background: #1a3a50;
}

/* --- Luxury Grid --- */
.products.luxury-grid .box-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media(max-width: 1024px) {
    .products.luxury-grid .box-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media(max-width: 768px) {
    .products.luxury-grid .box-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Product Config --- */
.product-config { padding-top: 12rem; min-height: 75vh; }

.product-config-container { max-width: 130rem; margin: 2rem auto 0; }

.product-config .heading {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.product-config .variant-options-label {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.2rem;
}

.product-config .product-variants-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
}

.product-config .product-variant-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 4px 16px var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.product-config .product-variant-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--shadow-hover);
}

.product-config .product-variant-card:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}

.product-config .product-variant-card .images {
    position: relative;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    height: var(--product-card-image-height);
}

.product-config .product-variant-card .images .product-image-frame {
    width: 100%;
    height: 100%;
}

.product-config .product-variant-card .images img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.product-config .product-variant-card .images img.clickable-preview {
    cursor: zoom-in;
}

.product-config .product-variant-card .content {
    padding: 1.8rem 1.8rem 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

[dir="rtl"] .product-config .product-variant-card .content {
    text-align: right;
}

.product-config .product-variant-card .content h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
    margin-bottom: 0.6rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.product-config .product-dozen-qty,
.product-config .product-carton-price {
    font-size: 1.35rem;
    color: var(--text-light);
    margin: 0;
}

.product-config .product-dozen-qty .qty-label,
.product-config .product-carton-price .qty-label {
    font-weight: 700;
    color: var(--primary);
}

.product-config .product-variant-card .icons {
    margin-top: auto;
    padding: 1.2rem 1.8rem 1.8rem;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
}

.product-config .product-variant-card .icons .btn-cart {
    display: block;
    width: 100%;
    border-radius: 0.4rem;
    padding: 1.2rem 0;
    text-align: center;
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--secondary);
    transition: background 0.25s ease, transform 0.2s ease;
}

.product-config .product-variant-card .icons .btn-cart:hover {
    background: var(--btn-hover);
    transform: translateY(-1px);
}

.product-config .product-variant-card .icons .product-variant-wa {
    background: #25d366;
}

.product-config .product-variant-card .icons .product-variant-wa:hover {
    color: #fff;
    background: #128c7e;
}

.product-config .product-variant-card .icons .product-variant-call {
    background: var(--primary);
    color: #fff;
}

.product-config .product-variant-card .icons .product-variant-call:hover {
    background: #1a3a50;
}

.product-config-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 2.4rem;
    box-shadow: 0 8px 24px var(--shadow);
}

.product-config-form {
    max-width: 72rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.product-image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(8, 16, 24, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 2rem;
}

.product-image-lightbox.open {
    display: flex;
}

.product-image-lightbox img {
    position: relative;
    z-index: 1;
    max-width: 96vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 0.4rem;
}

.product-image-lightbox-close {
    position: fixed;
    top: max(1.2rem, env(safe-area-inset-top));
    right: max(1.2rem, env(safe-area-inset-right));
    z-index: 2;
    width: 4.2rem;
    height: 4.2rem;
    border: none;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
}

.product-image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.product-recommendations {
    margin-top: 2.4rem;
    padding: 2rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    box-shadow: 0 6px 18px var(--shadow);
}

.product-recommendations h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.4rem;
}

.product-recommendations-grid {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.6rem;
    scroll-snap-type: x proximity;
}

.product-recommendations-grid::-webkit-scrollbar {
    height: 0.8rem;
}

.product-recommendations-grid::-webkit-scrollbar-thumb {
    background: #c6cdd4;
    border-radius: 99px;
}

.recommendation-card {
    flex: 0 0 24rem;
    scroll-snap-align: start;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 1rem;
    background: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recommendation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px var(--shadow-hover);
}

.recommendation-card:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.recommendation-image-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recommendation-image-wrap .product-image-frame {
    width: 100%;
}

.recommendation-image-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #fff;
}

.recommendation-card h4 {
    font-size: 1.45rem;
    color: var(--primary);
    margin: 0.9rem 0 0.4rem;
}

.recommendation-price {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 0.7rem;
}

.recommendation-link {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary);
    text-transform: uppercase;
}

.product-config-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding-top: 2rem;
}

.product-config-form .btn {
    margin-top: 0;
    margin-left: auto;
}

.btn-outline-dark {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline-dark:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

@media(max-width: 1024px) {
    .product-config .product-variants-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- Footer --- */
.footer {
    margin-top: 6rem;
    padding: 5rem 9% 2rem;
    background: var(--primary);
    color: rgba(255,255,255,0.85);
    border-top: 3px solid var(--secondary);
}

.footer .footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 3rem;
}

.footer .footer-logo {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
}

.footer .footer-logo span { color: var(--secondary); }

.footer .footer-brand p {
    margin-top: 1rem;
    font-size: 1.4rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.65);
    max-width: 32rem;
}

.footer .footer-links h3,
.footer .footer-contact h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.4rem;
}

.footer .footer-links a,
.footer .footer-contact a,
.footer .footer-contact p {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 1.4rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
}

.footer .footer-links a:hover,
.footer .footer-contact a:hover { color: var(--accent); }

.footer .footer-contact i {
    width: 1.8rem;
    margin-right: 0.6rem;
    color: var(--secondary);
}

.footer .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1rem;
}

.footer .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: rgba(255,255,255,0.7);
    transition: all 0.22s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footer .social-link i { color: rgba(255,255,255,0.7); font-size: 2rem; }

.footer .social-link:hover {
    transform: translateY(-1px);
}

.footer .social-link:hover i { color: #fff; }

.footer .footer-bottom {
    margin-top: 3rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    text-align: center;
}

.footer .footer-bottom p {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.5);
}

/* --- Responsive --- */
@media(max-width: 991px) {
    html { font-size: 55%; }
    header { padding: 1rem 1.8rem; }
    section { padding: 4rem 2rem; }
    .home, .products { padding-top: 11rem; }
    .home { padding-bottom: 6rem; }
    .footer { padding: 4rem 2rem 2rem; }
    .footer .footer-top { grid-template-columns: 1fr 1fr; }
}

@media(max-width: 768px) {
    :root {
        --product-card-image-height: 180px;
    }

    header { padding: 0.85rem 1.4rem; }

    header .fa-bars {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 1202;
    }

    header #toggler:checked + .fa-bars {
        opacity: 0;
        pointer-events: none;
    }

    header .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(82vw, 34rem);
        height: 100vh;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.8rem;
        padding: 1.6rem 1.4rem 2rem;
        border-right: 1px solid var(--border);
        border-radius: 0;
        background: rgba(255,255,255,0.97);
        box-shadow: 12px 0 34px rgba(11, 29, 42, 0.15);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, visibility 0.22s ease;
        z-index: 1100;
    }

    header .menu-close {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--primary);
        background: transparent;
        border: none;
        padding: 0.2rem 0;
        margin-bottom: 0.6rem;
        cursor: pointer;
    }

    header .menu-close:hover { opacity: 0.75; }

    header .menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(11, 29, 42, 0.30);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s ease;
        z-index: 1095;
        pointer-events: none;
    }

    header #toggler:checked ~ .navbar { opacity: 1; visibility: visible; }
    header #toggler:checked ~ .menu-overlay { opacity: 1; visibility: visible; }

    header .navbar a {
        margin: 0;
        width: 100%;
        padding: 1.2rem 1.3rem;
        border: none;
        border-radius: 0.4rem;
        background: transparent;
        font-size: 1.5rem;
        font-weight: 600;
    }

    header .navbar a:hover { background: rgba(0, 168, 168, 0.08); }

    header .navbar .nav-social {
        display: flex;
        gap: 0.9rem;
        padding-top: 1.6rem;
        border-top: 1px solid var(--border);
        width: 100%;
    }

    header .navbar .nav-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: var(--primary);
        font-size: 2rem;
        border: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    header .navbar .nav-social a:hover { color: var(--secondary); }

    .home .content { padding: 2.4rem; }
    .home .content h3 { font-size: 4rem; }
    .home .content span { font-size: 2rem; }
    .heading { font-size: 3.4rem; }

    .footer .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
        align-items: start;
    }

    .footer .footer-brand p {
        max-width: none;
        font-size: 1.3rem;
        line-height: 1.6;
    }

    .footer .footer-links h3,
    .footer .footer-contact h3 {
        margin-bottom: 0.9rem;
    }

    .footer .footer-links a,
    .footer .footer-contact a,
    .footer .footer-contact p {
        margin-bottom: 0.6rem;
        line-height: 1.5;
    }

    header .logo-wrap {
        gap: 0.7rem;
    }

    header .logo { font-size: 2.6rem; padding-bottom: 0.85rem; }

    header .logo span::after {
        font-size: 0.88rem;
        letter-spacing: 0.11em;
    }

    header .lang-mini-btn {
        min-width: 2.8rem;
        height: 2.4rem;
        padding: 0 0.6rem;
        font-size: 1rem;
    }

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

    .product-config-card { padding: 1.5rem; }
    .product-config-actions { flex-wrap: wrap; }
    .product-config-form .btn { width: 100%; margin-left: 0; }

    header .navbar { display: flex !important; }
    header #toggler:checked ~ .navbar { opacity: 1 !important; visibility: visible !important; }

    .recommendation-card {
        flex-basis: 21rem;
    }
}

@media(max-width: 450px) {
    html { font-size: 50%; }
    .heading { font-size: 3rem; }
    .home .content h3 { font-size: 3.4rem; }

    .product-config .product-variants-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
    }

    .recommendation-card {
        flex-basis: 19rem;
    }
}

html[dir="rtl"] .force-ltr-number {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Language switch inside mobile dropdown */
.lang-switch-mobile {
    display: none !important;
}

/* ===== Product Price on Cards ===== */
.product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary);
    margin: 0.5rem 0;
    letter-spacing: 0.02em;
}

.product-price .price-label {
    font-weight: 600;
    color: var(--text-light);
    font-size: 1.3rem;
}

.product-variant-price {
    margin-top: 0.3rem;
}

.product-variant-price .price-label {
    display: block;
}

.product-variant-price-value {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.7rem;
    color: var(--secondary);
    font-weight: 700;
}

/* Keep child-card details fully visible (no truncation/ellipsis) */
.products .box-container .box.variant-result-card.product-variant-card .product-variant-price,
.products .box-container .box.variant-result-card.product-variant-card .product-dozen-qty,
.products .box-container .box.variant-result-card.product-variant-card .product-carton-price,
.product-config .product-variant-card .product-variant-price,
.product-config .product-variant-card .product-dozen-qty,
.product-config .product-variant-card .product-carton-price {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.products .box-container .box.variant-result-card.product-variant-card .product-variant-price .price-label,
.product-config .product-variant-card .product-variant-price .price-label,
.products .box-container .box.variant-result-card.product-variant-card .product-variant-price-value,
.product-config .product-variant-card .product-variant-price-value {
    display: inline;
    margin-top: 0;
}


.product-variant-options {
    margin-top: 1.5rem;
}

/* ===== Homepage V2 — Premium Redesign ===== */

/* --- Hero V2 --- */
.home .hero-inner {
    max-width: 72rem;
    position: relative;
    z-index: 1;
    padding: 2rem 4rem 4rem;
    text-align: center;
    margin: 0 auto;
}

.home .hero-eyebrow {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(244, 162, 97, 0.08);
    border: 1px solid rgba(244, 162, 97, 0.25);
    border-radius: 99px;
    padding: 0.5rem 1.8rem;
    margin-bottom: 2.2rem;
}

.home .hero-title {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 5.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.6rem;
}

.home .hero-subtitle {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
    max-width: 54rem;
    margin: 0 auto 2.6rem;
    font-weight: 400;
}

.home .btn-outline {
    border-color: #fff;
    color: #fff;
    background: transparent;
}

.home .btn-outline:hover {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
}

.home .hero-inner .hero-buttons {
    justify-content: center;
}

/* --- Trust Bar --- */
.trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 4rem 9%;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}

.trust-number {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.trust-label {
    font-size: 1.3rem;
    color: var(--text-light);
    font-weight: 500;
}

.trust-divider {
    width: 1px;
    height: 4rem;
    background: var(--border);
    flex-shrink: 0;
}

/* --- About V2 --- */
.about-v2 {
    padding: 6rem 9%;
    background: var(--white);
}

.about-v2-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5rem;
    max-width: 110rem;
    margin: 0 auto;
}

.about-v2-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 2rem;
    height: 36rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(11,29,42,0.08);
}

.about-v2-logo img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    display: block;
}

.about-v2-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-v2-heading {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2rem;
    line-height: 1.2;
}

.about-v2-text p {
    font-size: 1.7rem;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 1.2rem;
}

.about-v2-text p:last-child {
    margin-bottom: 0;
}

/* --- Why V2 --- */
.why-v2 {
    padding: 4.6rem 9% 8rem;
    background: var(--white);
}

.why-v2-heading {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin-bottom: 4rem;
    line-height: 1.2;
}

.why-v2-heading span {
    color: var(--secondary);
}

.why-v2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    max-width: 92rem;
    margin: 0 auto;
}

.why-v2-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 2.2rem 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-v2-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px var(--shadow-hover);
}

.why-v2-icon {
    width: 5.4rem;
    height: 5.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: rgba(0, 168, 168, 0.1);
    margin-bottom: 2rem;
}

.why-v2-icon i {
    font-size: 2.4rem;
    color: var(--secondary);
}

.why-v2-card h3 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.6rem;
}

.why-v2-card p {
    font-size: 1.45rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* --- CTA V2 --- */
.cta-v2 {
    padding: 8rem 9%;
    background: linear-gradient(135deg, var(--primary) 0%, #143042 50%, #0B1D2A 100%);
    text-align: center;
}

.cta-v2 h2 {
    font-family: "Montserrat", "Poppins", sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.4rem;
}

.cta-v2 p {
    font-size: 1.7rem;
    color: rgba(255, 255, 255, 0.78);
    max-width: 56rem;
    margin: 0 auto 3rem;
    line-height: 1.8;
}

.cta-v2 .hero-buttons {
    justify-content: center;
}

/* --- Contact heading override for V2 pages --- */
.contact-section .why-v2-heading {
    margin-bottom: 3rem;
}

/* --- Homepage V2 Responsive --- */
@media (max-width: 991px) {
    .home { padding-top: 12rem; padding-bottom: 6rem; }
    .home .hero-title { font-size: 4.4rem; }
    .home .hero-subtitle { font-size: 1.6rem; }
    .trust-bar { gap: 2rem; padding: 3rem 2rem; }
    .trust-number { font-size: 2rem; }
    .about-v2 { padding: 4rem 4%; }
    .about-v2-inner { gap: 3.5rem; }
    .about-v2-logo { height: 30rem; }
    .why-v2 { padding: 3.8rem 2rem 6rem; }
    .why-v2-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .cta-v2 { padding: 6rem 2rem; }
    .about-v2-heading, .why-v2-heading, .cta-v2 h2 { font-size: 3rem; }
}

@media (max-width: 768px) {
    .home { padding-top: 10rem; padding-bottom: 5rem; }
    .home .hero-inner { padding: 1.6rem 2rem 3rem; }
    .home .hero-title { font-size: 3.6rem; }
    .home .hero-subtitle { font-size: 1.5rem; max-width: 40rem; }
    .home .hero-eyebrow { font-size: 1.1rem; padding: 0.4rem 1.4rem; margin-bottom: 1.6rem; }

    .trust-bar {
        flex-wrap: wrap;
        gap: 2rem;
    }
    .trust-divider { display: none; }
    .trust-item { flex: 1 1 40%; }

    .about-v2 { padding: 3.5rem 1.6rem; }
    .about-v2-inner {
        grid-template-columns: 1fr;
        gap: 2.8rem;
    }
    .about-v2-logo { height: 26rem; width: 100%; }
    .about-v2-text { text-align: center; max-width: 52rem; margin: 0 auto; }

    .why-v2-grid { grid-template-columns: 1fr; }

    .why-v2-card {
        display: grid;
        grid-template-columns: 4.8rem 1fr;
        column-gap: 1.2rem;
        align-items: start;
        text-align: left;
        padding: 1.8rem 1.6rem;
    }

    .why-v2-icon {
        width: 4.8rem;
        height: 4.8rem;
        margin-bottom: 0;
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .why-v2-icon i {
        font-size: 2rem;
    }

    .why-v2-card h3 {
        grid-column: 2;
        margin-bottom: 0.4rem;
    }

    .why-v2-card p {
        grid-column: 2;
        margin: 0;
    }

    [dir="rtl"] .why-v2-card {
        grid-template-columns: 1fr 4.8rem;
        text-align: right;
    }

    [dir="rtl"] .why-v2-icon {
        grid-column: 2;
    }

    [dir="rtl"] .why-v2-card h3,
    [dir="rtl"] .why-v2-card p {
        grid-column: 1;
    }

    .cta-v2 h2 { font-size: 2.6rem; }
}

@media (max-width: 450px) {
    .home { padding-top: 9rem; padding-bottom: 4rem; }
    .home .hero-title { font-size: 3rem; }
    .home .hero-subtitle { font-size: 1.4rem; }
    .home .hero-subtitle { font-size: 1.6rem; }
    .trust-item { flex: 1 1 100%; }
    .about-v2-heading, .why-v2-heading, .cta-v2 h2 { font-size: 2.4rem; }
}

/* ===== Print / PDF ===== */
@media print {

    /* Running header + page numbers on every page */
    @page {
        size: A3 landscape;
        margin: 14mm 10mm 14mm 10mm;

        @top-left {
            content: "EMBABY PLAST";
            font-family: sans-serif;
            font-size: 7pt;
            font-weight: 700;
            color: #0B1D2A;
            letter-spacing: 0.12em;
            vertical-align: middle;
        }

        @top-center {
            content: "Product Catalog  ·  Since 1963";
            font-family: sans-serif;
            font-size: 7pt;
            color: #555;
            letter-spacing: 0.05em;
            vertical-align: middle;
        }

        @top-right {
            content: "Page " counter(page) " / " counter(pages);
            font-family: sans-serif;
            font-size: 7pt;
            color: #555;
            vertical-align: middle;
        }

        @bottom-center {
            content: "+2012 777 93 199  ·  embaby-plast.netlify.app";
            font-family: sans-serif;
            font-size: 6.5pt;
            color: #888;
            vertical-align: middle;
        }
    }

    html,
    body {
        background: #fff !important;
        color: #111 !important;
        font-size: 9pt;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
        animation: none !important;
        transition: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* === Hide non-catalog elements === */
    header,
    .products-search,
    .products-type-filter-wrap,
    .products-total-count,
    .products-no-results,
    .footer,
    .product-image-lightbox,
    .product-image-lightbox-close,
    .products .box .product-badge,
    .products .box .icons,
    .product-config .product-variant-card .icons {
        display: none !important;
    }

    /* === Section reset === */
    .products,
    .product-config {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        background: #fff !important;
    }

    /* === Catalog section title banner === */
    .products .heading,
    .product-config .heading {
        display: flex !important;
        align-items: center !important;
        margin: 0 0 5mm !important;
        padding: 3mm 5mm 3mm 6mm !important;
        background: #0B1D2A !important;
        border-left: 5mm solid #00A8A8 !important;
        border-radius: 0 !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    .products .heading *,
    .product-config .heading * {
        font-size: 13pt !important;
        font-weight: 800 !important;
        color: #fff !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .products .heading span,
    .product-config .heading span {
        color: #00A8A8 !important;
    }

    [dir="rtl"] .products .heading,
    [dir="rtl"] .product-config .heading {
        direction: rtl !important;
        border-left: none !important;
        border-right: 5mm solid #00A8A8 !important;
    }

    /* === 5-column catalog grid === */
    .products .box-container,
    .product-config .product-variants-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 3.5mm !important;
        align-items: start !important;
    }

    /* === Product card — fixed height for uniform rows === */
    .products .box-container .box,
    .products .box-container .box.variant-result-card.product-variant-card,
    .product-config .product-variant-card {
        display: flex !important;
        flex-direction: column !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        background: #fff !important;
        border: 1px solid #cdd5dd !important;
        border-top: 4px solid #00A8A8 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        transform: none !important;
        height: 78mm !important;
    }

    /* === Image area === */
    .products .box-container .box .images,
    .products .box-container .box.variant-result-card.product-variant-card .images,
    .product-config .product-variant-card .images {
        flex: 0 0 46mm !important;
        height: 46mm !important;
        min-height: 46mm !important;
        max-height: 46mm !important;
        padding: 2.5mm !important;
        background: #f4f7fa !important;
        border-bottom: 1px solid #dce4ea !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .products .box-container .box .images .product-image-frame,
    .products .box-container .box.variant-result-card.product-variant-card .images .product-image-frame,
    .product-config .product-variant-card .images .product-image-frame,
    .products .box-container .box .images picture,
    .products .box-container .box.variant-result-card.product-variant-card .images picture {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    .products .box-container .box .images img,
    .products .box-container .box.variant-result-card.product-variant-card .images img,
    .product-config .product-variant-card .images img {
        max-width: 100% !important;
        max-height: 41mm !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* === Content area === */
    .products .box-container .box .content,
    .products .box-container .box.variant-result-card.product-variant-card .content,
    .product-config .product-variant-card .content {
        flex: 1 !important;
        padding: 2mm 2.8mm 1.5mm !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
    }

    /* Product name */
    .products .box-container .box .content h3,
    .products .box-container .box.variant-result-card.product-variant-card .content h3,
    .product-config .product-variant-card .content h3 {
        font-size: 7pt !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin: 0 0 1mm !important;
        color: #0B1D2A !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    /* Teal accent rule under product name */
    .products .box-container .box .content h3::after,
    .products .box-container .box.variant-result-card.product-variant-card .content h3::after {
        content: '' !important;
        display: block !important;
        width: 10mm !important;
        height: 0.4mm !important;
        background: #00A8A8 !important;
        margin-top: 1.2mm !important;
        margin-bottom: 1.5mm !important;
    }

    /* Price rows */
    .products .box-container .box .product-price,
    .products .box-container .box .product-dozen-qty,
    .products .box-container .box .product-carton-price,
    .product-config .product-variant-card .product-price,
    .product-config .product-variant-card .product-dozen-qty,
    .product-config .product-variant-card .product-carton-price {
        font-size: 6.2pt !important;
        line-height: 1.45 !important;
        margin: 0 !important;
        color: #2a2a2a !important;
    }

    /* Price labels */
    .products .box-container .box .price-label,
    .products .box-container .box .qty-label,
    .product-config .product-variant-card .price-label,
    .product-config .product-variant-card .qty-label {
        font-size: 5.5pt !important;
        color: #00A8A8 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    .products .box-container .box .product-variant-price-value {
        font-size: 6.5pt !important;
        font-weight: 700 !important;
        color: #0B1D2A !important;
    }

    .products .box-container .box .product-variant-price .price-label,
    .products .box-container .box .product-variant-price-value {
        display: inline !important;
        margin: 0 !important;
    }

    /* RTL content alignment */
    [dir="rtl"] .products .box .content,
    [dir="rtl"] .products .box-container .box.variant-result-card.product-variant-card .content {
        text-align: right !important;
    }
}

/* ===== RTL Support ===== */
[dir="rtl"] body {
    font-family: "Noto Naskh Arabic", "Tahoma", serif;
}

[dir="rtl"] header {
    direction: rtl;
}

[dir="rtl"] header .logo-wrap {
    direction: ltr;
}

[dir="rtl"] .footer-top {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .footer-contact a,
[dir="rtl"] .footer-contact p {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] .heading {
    direction: rtl;
}

[dir="rtl"] .home .content {
    text-align: right;
}

[dir="rtl"] .hero-buttons {
    justify-content: flex-start;
}

[dir="rtl"] .about .content {
    text-align: right;
}

[dir="rtl"] .contact-card {
    text-align: center;
}

[dir="rtl"] .section-card,
[dir="rtl"] .range-item {
    text-align: center;
}

[dir="rtl"] .export-section {
    text-align: center;
}

[dir="rtl"] .products .box .content {
    text-align: right;
}

[dir="rtl"] .product-config-container {
    direction: rtl;
    text-align: right;
}

@media(max-width: 768px) {
    [dir="rtl"] header .navbar {
        left: auto;
        right: 0;
        border-right: none;
        border-left: 2px solid var(--secondary);
        box-shadow: -12px 0 34px rgba(11, 29, 42, 0.15);
    }

    .lang-switch-mobile {
        display: flex !important;
        width: 100%;
        padding: 1.2rem 1.3rem;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--secondary);
        border-top: 1px solid var(--border);
        margin-top: 0.5rem;
    }

    [dir="rtl"] .lang-switch-mobile {
        text-align: right;
    }
}

/* Enforce 2-column child card layout on mobile phones */
@media(max-width: 768px) {
    .product-config .product-variants-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.2rem;
    }
}

@media(max-width: 450px) {
    .product-config .product-variants-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
