/* 
 * BASINOL Website - Responsive Stylesheet
 * French version - Elegant Apple-like Design
 */

/* Note: Most responsive styles are included directly in style.css using media queries.
   This file contains additional responsive adjustments and overrides. */

@media (max-width: 600px) {
    .breadcrumb {
        display: none !important;
    }

    .product-breadcrumb {
        display: none !important;
    }

    .hero--elegant-container {
        display: none !important;
    }
}

/* ===== Mobile Navigation ===== */
@media (max-width: 768px) {

    /* Mobile menu toggle animation - Apple-like animation */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        transition: transform 0.3s ease;
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        transition: transform 0.3s ease;
    }

    /* Adjust header spacing on mobile */
    .header {
        padding: 0.75rem 1rem;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    /* Fix logo positioning and dimensions on mobile */
    .header__logo {
        position: relative;
        left: 0.5rem;
        z-index: 101;
        display: flex;
        align-items: center;
    }

    .header__logo img {
        height: 20px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
    }

    /* Hide language switcher on mobile */
    .header__lang {
        display: none;
    }

    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        display: block;
        margin-left: 0.5rem;
        z-index: 1100;
        position: relative;
        cursor: pointer;
    }

    /* Apple-like mobile navigation */
    .nav__list {
        position: fixed;
        top: 80px;
        /* Position below header */
        left: 0;
        width: 100%;
        height: 0;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        overflow: hidden;
        opacity: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* Align items to the left */
        justify-content: flex-start;
        /* Start from the top */
        transition: height 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
        z-index: 99;
        padding: 0;
        margin: 0;
        transform-origin: top;
        /* Ensure animation starts from the top */
    }

    /* When menu is toggled open */
    .nav__list.show {
        height: auto;
        /* Auto height to accommodate content */
        max-height: calc(100vh - 60px);
        /* Maximum height is viewport minus header */
        opacity: 1;
        padding-top: 0.5rem;
        padding-bottom: 1.5rem;
        overflow-y: auto;
        /* Add scrolling for very tall menus */
    }

    .nav__list::before {
        content: "";
        display: block;
        width: 90%;
        /* Line is 90% wide, leaving space on sides */
        height: 1px;
        /* Thin line */
        background-color: rgba(0, 0, 0, 0.1);
        /* Light gray */
        margin: 0 auto -1rem auto;
        /* Center horizontally + vertical spacing */
        border-radius: 1px;
        /* Smooth edges */
        position: relative;
        top: -7px;
    }

    /* Nav items */
    .nav__item {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        transition-delay: 0.1s;
        margin: -0.2rem;
        border-bottom: none;
        width: 100%;
    }

    .nav__list.show .nav__item {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger the animation for each item */
    .nav__list.show .nav__item:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav__list.show .nav__item:nth-child(2) {
        transition-delay: 0.15s;
    }

    .nav__list.show .nav__item:nth-child(3) {
        transition-delay: 0.2s;
    }

    .nav__list.show .nav__item:nth-child(4) {
        transition-delay: 0.25s;
    }

    .nav__list.show .nav__item:nth-child(5) {
        transition-delay: 0.3s;
    }

    .nav__list.show .nav__item:nth-child(6) {
        transition-delay: 0.35s;
    }

    .nav__link {
        display: block;
        padding: 0.5rem 2rem;
        color: var(--secondary-color);
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 400;
        transition: color 0.3s ease;
    }

    .nav__link:hover {
        color: var(--primary-color);
    }

    .nav__item:last-child {
        border-bottom: none;
    }

    .nav__link.active {
        color: var(--primary-color);
        font-weight: 500;
    }

    .nav__link.active::after {
        display: none;
    }

    /* Dropdown menu */
    .dropdown {
        background: none;
        padding: 0;
        display: none;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, opacity 0.5s ease;
        width: 100%;
        margin-top: 0.5rem;
        /* Full width */
    }

    .nav__item.has-dropdown.active>.dropdown {
        display: block;
        opacity: 1;
        max-height: none;
        /* No maximum height */
        padding-left: 0;
    }

    .dropdown-container {
        display: grid;
        /* make sure grid is active */
        grid-template-columns: 1fr;
        padding: 0;
        gap: 0;
        /* explicitly remove gaps */
    }


    .dropdown-section {
        margin: 0;
        /* reset all margins */
        padding: 0;
        /* reset padding if needed */
        position: relative;
    }

    /* Also reset margins/paddings of dropdown children */
    .dropdown-section>* {
        margin: 0;
        padding: 0;
    }

    /* First level dropdown titles (category headers) */
    .dropdown-title {
        font-size: 1rem;
        padding: 1rem 2rem;
        color: var(--secondary-color);
        border-bottom: none;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* Align content to the left */
        cursor: pointer;
        transition: color 0.3s ease, background-color 0.3s ease;
        position: relative;
        /* For absolute positioning of the arrow */
        -webkit-tap-highlight-color: transparent;
        /* Remove tap highlight on mobile */
    }

    /* Add subtle hover effect to indicate clickability */
    .dropdown-title:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }

    /* Arrow for dropdown titles */
    .dropdown-title::after {
        content: '›';
        font-size: 1.3rem;
        color: var(--secondary-color);
        transition: transform 0.3s ease, color 0.3s ease;
        position: absolute;
        right: 1rem;
        /* Position arrow on the right */
    }

    /* Active state for dropdown title */
    .dropdown-section.active>.dropdown-title {
        color: var(--primary-color);
    }

    /* Only rotate arrow for active sections that are not the main Produits page */
    .dropdown-section.active:not(.main-category)>.dropdown-title::after {
        transform: rotate(90deg);
        color: var(--primary-color);
    }

    /* Special styling for the main Produits category */
    .dropdown-section.main-category>.dropdown-title::after {
        right: 1rem;
    }

    /* Dropdown lists (subcategories) */
    .dropdown-list {
        display: none;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.4s ease;
        padding-left: 0.5rem !important;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
        background-color: rgba(0, 0, 0, 0.01);
        /* Subtle background to differentiate from parent */
    }

    /* Decrease space between subpages */
    .dropdown-list .dropdown-item {
        margin: 0;
        padding-left: 1rem;
        border-bottom: none;
    }

    /* Style for dropdown items to make them more distinct */
    .dropdown-list .dropdown-link {
        font-size: 1rem;
        padding: 0.8rem 1rem;
        display: block;
        color: var(--secondary-color);
        transition: color 0.3s ease, background-color 0.3s ease;
        margin: 0;
    }

    .dropdown-list .dropdown-link:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }

    /* Active state for dropdown list */
    .dropdown-section.active>.dropdown-list {
        display: block;
        opacity: 1;
        max-height: 500px;
        padding-bottom: 0.5rem;
    }

    /* Dropdown links (subcategory items) */
    .dropdown-link {
        display: block;
        font-size: 0.95rem;
        padding: 0.5rem 0;
        color: var(--secondary-color);
        transition: color 0.3s ease;
    }

    .dropdown-link:hover {
        color: var(--primary-color);
    }

    /* Main dropdown item */
    .nav__item.has-dropdown {
        position: relative;
    }

    .nav__item.has-dropdown>.nav__link {
        position: relative;
        padding-right: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Apple-like arrow: simple chevron */
    .nav__item.has-dropdown>.nav__link::after {
        content: '›';
        font-size: 1.5rem;
        color: var(--secondary-color);
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .nav__item.has-dropdown.active>.nav__link::after {
        transform: rotate(90deg);
        color: var(--primary-color);
    }

    /* Mobile menu overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        /* Always full height */
        background-color: rgba(0, 0, 0, 0);
        opacity: 0;
        /* Hidden by default */
        pointer-events: none;
        /* Prevent clicks when hidden */
        transition: background-color 0.5s ease, opacity 0.5s ease;
        z-index: 98;
    }

    .mobile-menu-overlay.show {
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 1;
        pointer-events: auto;
        /* Clickable only when visible */
    }

    /* Product categories responsive adjustments for horizontal layout */
    [style*="display: grid; grid-template-columns: 1fr 1fr;"] {
        grid-template-columns: 1fr !important;
    }

    [style*="height: 100%; overflow: hidden;"] {
        height: 250px !important;
    }

    /* Adjust header container for mobile */
    .header .container {
        padding: 0;
        justify-content: space-between;
    }

    /* Fix hero section on mobile */
    .hero {
        height: 550px;
    }

    .hero__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .hero__content {
        margin-top: 120px;
        /* Moved up to ensure buttons are visible */
        padding: var(--spacing-md);
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8rem;
    }

    .hero__slide {
        justify-content: flex-start;
        /* Align content to top */
        padding-top: 100px;
        /* Add padding at top */
    }

    [style*="padding: 3.5rem;"] {
        padding: 1.5rem !important;
    }

    .footer__columns {
        display: flex;
        justify-content: space-between;
        /* spreads columns evenly */
        gap: 2rem;
        /* space between columns */
        flex-wrap: wrap;
        /* wrap on smaller screens */
    }

    .footer__columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 3 equal columns for the first row */
        grid-template-rows: auto auto;
        /* two rows */
        gap: 2rem;
    }

    /* Make the 4th column span all 3 columns */
    .footer__columns>.footer__column:nth-child(4) {
        grid-column: 1 / -1;
        /* span from first to last column */
        justify-self: center;
        /* center content horizontally */
        max-width: 450px;
        /* optional: limit the width of the certificate image */
    }

    .footer__columns ul {
        padding-left: 0;
        list-style: none;
        margin: 0;
    }



    .footer__column h4 {
        margin-bottom: 1rem;
    }

    /* Optional: make sure footer bottom stays centered */
    .footer__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .footer__links {
        margin-left: 0 !important;
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero {
        height: 285px;
        min-height: 285px;
    }

    .hero__content {
        padding: var(--spacing-sm);
        max-width: 90%;
    }

    .hero__content h1 {
        font-size: 1.4rem;
        /* smaller heading */
        margin-bottom: var(--spacing-sm);
        line-height: 1.2;
    }

    .hero__subtitle {
        display: none;
    }

    .hero__controls {
        bottom: var(--spacing-md);
    }

    .hero__dot {
        width: 6px;
        height: 6px;
    }

    .btn.btn-primary {
        font-size: 1rem;
        /* smaller text */
        padding: 0.5rem 1rem;
        /* less padding for smaller button */
    }
}

/* ====== Welcome Section ======= */
@media (max-width: 576px) {
    .welcome {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
        text-align: left;
        /* align everything left */
    }

    .welcome h2,
    .welcome .subtitle,
    .welcome__content p,
    .welcome__features {
        text-align: left;
    }

    .welcome .container {
        text-align: left;
        display: block;
        /* reset any flex centering */
    }

    /* Stack features vertically */
    .welcome__features {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1rem;
        align-items: stretch;
        /* full width */
    }

    /* Each feature: icon + text inline, vertically centered */
    .welcome__features .feature {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
        width: 100%;
    }

    /* Icon container fixed width, center icon */
    .welcome__features .feature__icon {
        flex: 0 0 30px;
        /* increase from 24px to 36px */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Uniform icon size */
    .welcome__features .feature__icon svg,
    .welcome__features .feature__icon img {
        display: block;
        width: 20px;
        height: 20px;
    }

    /* Text takes remaining space, left aligned */
    .welcome__features .feature__text {
        flex: 1 1 auto;
        text-align: left;
        margin: 0;
    }
}

/* ==== Quality Section ==== */
@media (max-width: 600px) {

    /* Quality Section Styles */
    .quality-section {
        padding: 4rem 0;
        background-color: transparent;
        color: var(--text-color, #000);
        text-align: center;
    }

    .quality-section h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .quality-section p {
        font-size: 1.125rem;
        margin-bottom: 2.5rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Grid setup: 3 columns */
    /* Recommended — grid fills container, items aligned to the right */
    .quality-section div[style*="display: flex; justify-content: center;"],
    .quality-section .icons-grid {
        display: grid !important;
        width: 100%;
        /* <-- important: use full width of parent */
        max-width: 100%;
        grid-template-columns: repeat(3, 90px);
        gap: 1rem 1.5rem;
        justify-content: end;
        /* push the grid items to the right */
        justify-items: center;
        /* center each item inside its column */
        margin: 2rem 0 2rem 0;
        /* no auto centering */
        place-items: center;
    }

    .quality-section .quality-row-center {
        grid-column: 1 / -1;
        /* span entire grid row */
        display: flex;
        justify-content: center;
        /* center the two icons */
        gap: 4rem;
        align-items: center;
    }

    /* picture element styling */
    .quality-section .icons-grid picture {
        display: flex;
        justify-content: center;
    }

    /* image styling */
    .quality-section .icons-grid picture img {
        width: 90px !important;
        height: 90px !important;
        object-fit: contain;
        border-radius: 0 !important;
    }

    /* Fix image size and remove border radius */
    .quality-section div[style*="display: flex; justify-content: center;"] picture {
        display: flex;
        justify-content: center;
    }

    .quality-section div[style*="display: flex; justify-content: center;"] img {
        width: 90px !important;
        height: 90px !important;
        object-fit: contain;
        border-radius: 0 !important;
    }
}

/* ===== FAQ Section ===== */
@media (max-width: 600px) {
    .faq-section {
        padding: 4rem 0.6rem;
        background-color: #f5f5f7;
    }

    .faq-section .container {
        display: block !important;
        padding: 0 1rem;
        /* smaller side padding to avoid cutting off */
        max-width: 100%;
        margin: 0 auto;
    }

    .faq-item {
        width: 100% !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
        padding: 0rem 1.5rem;
        /* Add padding inside the box */
        background-color: #fff;
        /* Make sure background is here */
        border: 1px solid var(--light-gray);
        border-radius: var(--border-radius-md);
        overflow: hidden;
        transition: box-shadow 0.3s ease;
    }

    .faq-item.active {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .faq-question {
        display: flex;
        justify-content: space-between;
        /* text left, toggle right */
        align-items: center;
        padding: 1rem 0;
        background-color: transparent;
        /* background moved to .faq-item */
        cursor: pointer;
        width: 100%;
    }


    .faq-question h3 {
        margin: 0;
        font-size: 1rem;
        line-height: 1.5;
        flex-grow: 1;
        /* take all available space */
        text-align: left;
        /* align text left */
    }

    h2 {
        font-size: 1.85rem;
        /* or any smaller size you want */
        font-weight: 600;
        /* optional: adjust weight */
        margin-bottom: 1rem;
        /* optional spacing below */
    }

    .faq-toggle {
        flex-shrink: 0;
        /* prevent shrinking */
        margin-left: 1rem;
        /* add some space between text and toggle */
        width: 20px;
        height: 20px;
    }

    .faq-toggle::before,
    .faq-toggle::after {
        content: '';
        position: absolute;
        background-color: var(--primary-color);
        transition: transform 0.3s ease;
    }

    .faq-toggle::before {
        top: 9px;
        left: 0;
        width: 100%;
        height: 2px;
    }

    .faq-toggle::after {
        top: 0;
        left: 9px;
        width: 2px;
        height: 100%;
    }

    .faq-item.active .faq-toggle::after {
        transform: rotate(90deg);
        opacity: 0;
    }

    .faq-answer {
        max-width: 100% !important;
        /* take full width */
        padding-left: 0.5rem !important;
        /* controlled padding */
        padding-right: 0.5rem !important;
        box-sizing: border-box;
        background-color: #fff;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
    }

    .faq-item.active .faq-answer {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        max-height: 900px;
    }
}

/* ==== Entreprise Section ==== */
@media (max-width: 600px) {

    /* Hero Section */
    .page-hero--entreprise {
        position: relative;
        height: 250px !important;
        /* Force height */
        min-height: 250px !important;
        overflow: hidden;
        background: black;
        /* Prevent green bar or background color */
    }

    /* Video container */
    .hero__video-background {
        position: absolute;
        top: 0;
        /* Align to very top */
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: black;
    }

    /* Video/iframe inside hero */
    .hero__video-background video,
    .hero__video-background iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%)scale(1.1);
        object-fit: fill;
    }

    .hero__overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
    }

    /* Hero text */
    .page-hero--entreprise .container {
        position: relative;
        z-index: 2;
        padding: 1rem;
        text-align: center;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .page-hero--entreprise h1 {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    /* Smaller Play Button */
    .video-btn {
        margin-top: 0.8rem;
    }

    .video-btn a {
        font-size: 1rem;
        padding: 0.4rem 0.7rem;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        border-radius: 6px;
    }

    .video-btn svg {
        width: 17px;
        height: 17px;
    }

    /* Company Sections */
    .company-section .container {
        padding: 0 1rem;
    }

    .company-section .section-content {
        display: flex !important;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    /* On mobile, force text first then image for all sections */
    @media (max-width: 768px) {
        .company-section .section-content {
            flex-direction: column !important;
        }

        .company-section .section-text {
            order: 1;
        }

        .company-section .section-image {
            order: 2;
        }

        /* Alternate background colors on mobile starting with white */
        .company-section:nth-child(odd) {
            background-color: #f5f5f7;
        }

        .company-section:nth-child(even) {
            background-color: var(--white);
        }
    }

    .company-section .section-text h2 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .company-section .section-text p,
    .company-section .section-text ul {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .company-section .section-text ul {
        padding-left: 1.2rem;
    }

    .company-section .section-image picture img {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    /* Hero Elegant Section */
    .hero--elegant-container .hero__slide {
        flex-direction: column;
        padding: 1rem;
    }

    .hero--elegant-container .hero__image picture img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .hero--elegant-container .hero__content {
        margin-top: 1rem;
        text-align: center;
    }

    .hero--elegant-container h1 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .hero--elegant-container .hero__subtitle {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .btn.btn-entreprise {
        padding: 0.7rem 1.5rem;
        font-size: 1rem;
    }

    .hero__controls {
        justify-content: center;
        margin-top: 1rem;
    }
}

/* ==== Product Section ==== */
@media (max-width: 600px) {
    .main-page .product-categories>.container>div>div {
        display: flex !important;
        flex-direction: column !important;
    }

    .main-page .product-categories>.container>div>div>div:first-child {
        position: relative !important;
        width: 100% !important;
        height: 200px !important;
        overflow: hidden !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-page .product-categories>.container>div>div>div:first-child picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .main-page .product-categories>.container>div>div>div:first-child picture img {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        border-radius: inherit !important;
    }

    .main-page .product-categories>.container>div>div>div:last-child {
        padding: 2rem 1.5rem !important;
    }

    .main-page .product-categories p {
        font-size: 1rem;
        line-height: 1.4;
        color: #424245;
    }

    .main-page .section-title {
        font-size: 2rem !important;
    }

    .main-page .product-categories h3 {
        font-size: 1.4rem !important;
    }
}

/* ===== Produits Section Responsive Adjustments ===== */
@media (max-width: 600px) {
    .product-hero {
        padding: 1.8rem 0rem 3rem !important;
        background-color: #f5f5f7;
        position: relative;
        color: white;
        text-align: left;
        max-width: 900px;
        margin: 0 auto;
        max-height: 585px;
    }

    .product-hero-overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 108, 50, 0.8);
        z-index: 1;
    }

    .product-hero__content {
        position: relative;
        z-index: 2;
    }

    .product-hero__title {
        font-size: 2rem !important;
        font-weight: 600;
        margin-bottom: 1rem;
        line-height: 1.2;
    }

    .product-hero__text {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
        width: 110%;
        /* Take full width of container */
        max-width: 600px;
        /* Optional: limit width on wider screens */
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .product-hero__features {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .product-hero__features li {
        display: flex;
        align-items: center;
        /* better for multi-line text */
        gap: 0.75rem;
        /* spacing between icon and text */
        font-size: 1rem !important;
        line-height: 1.4;
        color: white;
        width: 108%;
    }

    .product-hero__features li span {
        flex-shrink: 0;
        /* keep the icon size fixed */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: white;
        /* align vertically with multiline text */
    }

    .product-bottle-image {
        margin-bottom: -2rem;
        /* smaller gap below image */
    }

    .product-bottle-title {
        margin-top: 0.25rem;
        /* less space above title */
        margin-bottom: 1rem;
        /* less space below title */
    }

    .product-bottle-item p {
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    .product-layout {
        flex-direction: column !important;
        /* stack vertically */
        gap: 1.5rem !important;
        /* reduce gap for mobile */
        margin-top: -1.5rem !important;
    }

    .product-image {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .product-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain;
    }

    .product-content {
        flex: none !important;
        width: 100% !important;
        padding: 0 1rem !important;
    }

    .product-content h1,
    .product-content h3,
    .product-content p {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .product-content hr {
        margin: 1.5rem 0 !important;
    }

    body.additives-page .minimalist-product-item,
    body.boats-page .minimalist-product-item,
    body.grease-page .minimalist-product-item {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }

    body.additives-page .product-categories .container,
    body.boats-page .product-categories .container,
    body.grease-page .product-categories .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        /* space between items */
        padding: 0 30px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

}


/* ===== Team Section Responsive Adjustments ===== */
@media (max-width: 576px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .member-image {
        box-shadow: var(--shadow-sm);
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .team-member:active .member-image {
        transform: scale(0.95);
        box-shadow: var(--shadow-sm);
    }
}

/* ===== Partners Map Responsive Adjustments ===== */
@media (max-width: 576px) {
    .map-point {
        transform: translate(-50%, -50%) scale(0.8);
    }

    .region-selector {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--spacing-sm);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

    .region-selector::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    .region-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ===== Contact Form Responsive Adjustments ===== */
@media (max-width: 576px) {
    .contact-form-container {
        padding: var(--spacing-md);
        border-radius: var(--border-radius-lg);
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 16px;
        /* Prevent zoom on iOS */
        padding: var(--spacing-sm);
        border-radius: var(--border-radius-md);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
        border-color: var(--primary-color);
        box-shadow: var(--shadow-focus);
        outline: none;
    }

    .form-submit {
        margin-top: var(--spacing-md);
    }
}

/* ===== Footer Responsive Adjustments ===== */
@media (max-width: 576px) {
    .footer__links {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: center;
    }

    .footer__column h4 {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-sm);
    }

    .footer__column li {
        margin-bottom: var(--spacing-xs);
    }

    .footer__social {
        margin-top: var(--spacing-md);
    }

    .footer__social a {
        width: 40px;
        height: 40px;
    }

    .cookie-notice__content p {
        text-align: center;
        padding-left: 2%;
        padding-right: 2%;
    }

    .cookie-notice__content button#acceptCookies {
        min-width: 140px;
        /* wider button */
        padding: 0.4rem 8rem;
        font-size: 1rem;
        cursor: pointer;
        /* Optional: center button explicitly if needed */
        display: block;
        align-self: center;
    }

}

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

    .header,
    .footer,
    .cookie-notice,
    .hero__controls,
    .mobile-menu-toggle,
    .btn,
    .newsletter,
    .social-links {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
        color: #0a7a4d;
        /* Keep brand color in print */
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    .page-hero {
        background-color: #fff;
        color: #000;
        padding: 1rem 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 2rem;
    }

    .page-hero h1 {
        color: #0a7a4d;
        /* Keep brand color in print */
    }

    /* Add page breaks before major sections */
    section {
        page-break-before: auto;
    }

    h2 {
        margin-top: 2rem;
    }
}

/* ===== High Resolution Screens ===== */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper text rendering for high-res displays */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Refined borders for high-res displays */
    .btn,
    .category,
    .news-item,
    .partner-card,
    .faq-item,
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        border-width: 0.5px;
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero__slide {
        transition: none;
        transform: none !important;
    }

    .hero__content {
        transform: none !important;
    }

    .category:hover,
    .news-item:hover,
    .btn:hover,
    .nav__link:hover,
    .team-member:active .member-image {
        transform: none !important;
        box-shadow: var(--shadow-sm) !important;
    }

    .category:hover .category__image img,
    .news-item:hover .news-image img,
    .btn:hover::after,
    .btn-icon:hover svg {
        transform: none !important;
    }

    .hero__dot.active {
        transform: none !important;
    }

    .nav__link.active:hover::after {
        width: 20px !important;
    }
}

/* ===== Dark Mode Support ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode colors - Only applied if user has dark mode enabled and the site supports it */
        --light-gray: #1a1a1c;
        --medium-gray: #2c2c2e;
        --subtle-gray: #8e8e93;
    }

    /* These styles will only apply if you decide to implement dark mode support */
    /* Uncomment the following block to enable dark mode support */
    /*
    body {
        background-color: #000000;
        color: #f5f5f7;
    }
    
    .header {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .nav__link {
        color: #f5f5f7;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #f5f5f7;
    }
    
    .category, 
    .news-item,
    .partner-card,
    .info-card,
    .contact-form-container {
        background-color: #1a1a1c;
        border-color: #2c2c2e;
    }
    */
}