/* Product Catalog - Custom styles (Auto Garage Tools template) */
:root {
    --whatsapp-green: #25d366;
    --brand-primary: #ffc82d;
    --brand-primary-dark: #e6b42a;
    --header-dark: #2d2d2d;
    --font-family-base: 'Montserrat', sans-serif;
    /* Template (Auto Garage): gold accent */
    --template-gold: #FFD700;
    --template-gold-hover: #FFC700;
    /* Elegant theme colors - aligned to template */
    --elegant-black: #000000;
    --elegant-dark: #0a0a0a;
    --elegant-yellow: #FFD700;
    --elegant-yellow-dark: #FFC700;
    --elegant-text-light: #ffffff;
    --elegant-text-muted: #a0a0a0;
    --elegant-gray-400: #9ca3af;
    --elegant-gray-800: #1f2937;
}

/* Base font styling – Montserrat (template) */
body {
    font-family: var(--font-family-base);
    font-style: normal;
    font-weight: 300;
    background-color: #ffffff;
}
/* Prevent horizontal scroll on all screen sizes */
html {
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Main content: consistent normal font size for all pages */
main,
main .container {
    font-size: 0.9375rem;
}

/* Full-width section backgrounds: sections inside container extend to viewport edges */
body.index-page .index-page.container,
body.index-page .index-page-template.container {
    overflow-x: visible;
}
.index-page.container > section,
.index-page-template.container > section,
main .container > section {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + var(--bs-gutter-x, 1rem)) !important;
    padding-right: calc(50vw - 50% + var(--bs-gutter-x, 1rem)) !important;
}
body.template-fullwidth {
    overflow-x: hidden;
}

/* Bootstrap primary overrides - template gold on all pages */
.btn-primary {
    background-color: var(--template-gold) !important;
    border-color: var(--template-gold) !important;
    color: #000 !important;
}
.btn-primary:hover {
    background-color: var(--template-gold-hover) !important;
    border-color: var(--template-gold-hover) !important;
    color: #000 !important;
}
.btn-outline-primary {
    border-color: var(--template-gold) !important;
    color: var(--template-gold) !important;
}
.btn-outline-primary:hover {
    background-color: var(--template-gold) !important;
    border-color: var(--template-gold) !important;
    color: #000 !important;
}
a.text-primary, .text-primary {
    color: var(--template-gold) !important;
}
/* Template utility: gold text highlight in headings */
.text-gold {
    color: var(--template-gold) !important;
}

/* Template section titles: badge, title, tagline */
.section-badge {
    display: inline-block;
    background: #000;
    color: var(--template-gold) !important;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}
.section-title-template {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    position: relative;
    z-index: 10;
    line-height: 1.3 !important;
    padding-bottom: 0.5rem !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}
.section-title-template .text-gold { color: var(--template-gold) !important; }
.section-tagline-template {
    text-align: center;
    color: var(--elegant-gray-400) !important;
    font-size: 1.1rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

/* Template CTA section: dark gradient, gold badge, two CTAs, stats */
.cta-template-section {
    position: relative;
    background: linear-gradient(135deg, #000 0%, #1a1a1a 50%, #000 100%);
    color: #fff;
    overflow: hidden;
}
.cta-template-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cta-template-bg::before,
.cta-template-bg::after {
    content: '';
    position: absolute;
    width: 20rem;
    height: 20rem;
    background: var(--template-gold);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.1;
}
.cta-template-bg::before { top: 0; right: 0; }
.cta-template-bg::after { bottom: 0; left: 0; }
.section-badge-light {
    background: var(--template-gold) !important;
    color: #000 !important;
}
.cta-template-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #fff;
}
.cta-template-lead {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--elegant-gray-400) !important;
}
.cta-template-stats .cta-template-stat {
    border-left: 4px solid var(--template-gold);
}

/* Remove white space between New Arrivals and Why Choose Us on index page */
.index-page .new-arrivals-section {
    margin-bottom: 0 !important;
}
.index-page .new-arrivals-section + .features-template-section {
    margin-top: 0 !important;
}
/* Remove white space between features (Why Choose Us) and CTA (Ready to Upgrade) sections */
.features-template-section {
    margin-bottom: 0 !important;
}
.features-template-section + .cta-template-section {
    margin-top: 0 !important;
}

/* Template features: black section, diagonal gold stripes, 4 cards */
.features-template-section {
    position: relative;
    overflow: visible;
    display: block;
    visibility: visible;
    opacity: 1;
}
.features-template-section .container {
    position: relative;
    z-index: 1;
}
.features-template-section .row {
    position: relative;
    z-index: 1;
}
.features-template-section .col {
    position: relative;
    z-index: 1;
}
.features-template-stripes {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background: repeating-linear-gradient(45deg, var(--template-gold), var(--template-gold) 20px, transparent 20px, transparent 40px);
    pointer-events: none;
}
/* Optimize stripes on mobile to prevent rendering issues */
@media (max-width: 991.98px) {
    .features-template-stripes {
        display: none !important;
    }
}
.features-template-card {
    position: relative;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,215,0,0.3);
    border-radius: 0.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    z-index: 1;
    overflow: hidden;
}
.features-template-card:hover {
    border-color: var(--template-gold);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 2;
}
/* Disable hover effects on touch devices to prevent performance issues */
@media (hover: none) and (pointer: coarse) {
    .features-template-card:hover {
        border-color: rgba(255,215,0,0.3);
        box-shadow: none;
        transform: none;
    }
    .features-template-card:hover .features-template-icon-wrap {
        transform: none;
    }
    .features-template-card:hover .features-template-card-corner {
        opacity: 0.2;
    }
}
@media (min-width: 992px) {
    .features-template-card {
        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .features-template-card:hover {
        transform: translateY(-2px);
    }
}
.features-template-card-corner {
    position: absolute;
    top: -0.25rem;
    left: -0.25rem;
    width: 4rem;
    height: 4rem;
    background: var(--template-gold);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}
.features-template-card:hover .features-template-card-corner {
    opacity: 0.35;
}
/* Simplify corner on mobile */
@media (max-width: 991.98px) {
    .features-template-card-corner {
        opacity: 0.15;
        transition: none;
    }
    .features-template-card:hover .features-template-card-corner {
        opacity: 0.15;
    }
}
.features-template-icon-wrap {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: 0.25rem;
    background: var(--template-gold) !important;
    color: #000 !important;
    transform: rotate(-5deg);
    transition: transform 0.2s;
    z-index: 2;
}
.features-template-card:hover .features-template-icon-wrap {
    transform: rotate(0);
}
/* Disable icon rotation and all animations on mobile to prevent rendering issues and browser hanging */
@media (max-width: 991.98px) {
    .features-template-icon-wrap {
        transform: rotate(0) !important;
        transition: none !important;
    }
    .features-template-card:hover .features-template-icon-wrap,
    .features-template-card:active .features-template-icon-wrap {
        transform: rotate(0) !important;
    }
    /* Consolidate all mobile optimizations here - remove all performance-heavy properties */
    .features-template-section {
        overflow: visible !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    .features-template-card {
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    .features-template-card:hover,
    .features-template-card:active {
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
    }
    .features-template-card-corner {
        transition: none !important;
    }
}
.features-template-section .text-secondary {
    color: var(--elegant-gray-400) !important;
}

/* Ensure proper spacing and prevent overlapping in features section */
.features-template-section .row.g-4 > .col {
    margin-bottom: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    position: relative;
    z-index: 1;
}
.features-template-section .row.g-4 {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    position: relative;
}
.features-template-card {
    margin-bottom: 0 !important;
    position: relative;
}
/* Mobile: ensure proper containment and prevent overlapping - optimize for performance */
@media (max-width: 991.98px) {
    .features-template-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: unset !important;
    }
    .features-template-section .row.g-4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    .features-template-section .row.g-4 > .col {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    .features-template-section .row.g-4 > .col:last-child {
        margin-bottom: 0 !important;
    }
    .features-template-card {
        margin-bottom: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: none !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: unset !important;
    }
    .features-template-card:hover,
    .features-template-card:active,
    .features-template-card:focus {
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
    }
}

/* Ensure features section is visible on all mobile sizes - optimize for performance */
@media (max-width: 575.98px) {
    .features-template-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: unset !important;
    }
    .features-template-section .container {
        display: block !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    .features-template-section .row {
        display: flex !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    .features-template-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: none !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: unset !important;
    }
    .features-template-card:hover,
    .features-template-card:active,
    .features-template-card:focus {
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
    }
    .features-template-icon-wrap {
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        will-change: unset !important;
    }
}

/* ----- Sticky header: pin top bar + navbar + logo on scroll (all pages) ----- */
.site-header-sticky {
    position: sticky;
    top: 0;
    z-index: 1040;
    margin-bottom: -56px; /* Overlap logo and nav onto hero section */
}

/* ----- Reference-style Top utility bar ----- */
.header-utility-ref {
    background-color: var(--header-dark) !important;
    font-size: 0.875rem;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    position: relative;
    z-index: 1040;
}
.header-contact-link {
    transition: opacity 0.2s;
}
.header-contact-link:hover {
    opacity: 0.8;
}
.social-links-ref {
    display: flex;
    align-items: center;
}
.social-icon-ref {
    padding: 0 0.5rem;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}
.social-icon-ref:hover {
    opacity: 0.7;
}
.social-separator {
    width: 1px;
    height: 16px;
    background-color: rgba(255,255,255,0.3);
    margin: 0 0.25rem;
}

/* ----- Reference-style Main navigation bar ----- */
.navbar-ref {
    background-color: transparent !important;
    padding: 0;
    box-shadow: none;
    overflow: visible;
    position: relative;
    z-index: 1030;
}
.navbar-ref-wrapper {
    display: flex;
    align-items: flex-end;
    width: 100%;
    background-color: #fff;
    min-height: 120px;
    overflow: visible;
}
.navbar-logo-section-ref {
    background-color: #000;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    min-width: 340px;
    height: 120px;
    flex-shrink: 0;
    position: relative;
    /* Flipped: right edge diagonal slopes from top-right down to bottom (rightmost point at top) */
    clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
}
.navbar-brand-ref {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
}
.logo-image-ref {
    display: block;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
}
.navbar-nav-section-ref {
    background-color: #fff;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    justify-content: space-between;
    height: 56px;
    min-height: 56px;
    flex-shrink: 1;
    gap: 0.5rem;
    overflow: visible;
    position: relative;
}
.navbar-ref .navbar-nav {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}
.nav-link-ref {
    color: #1a1a1a !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.75rem 0.75rem !important;
    margin: 0 0.1rem;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-link-ref:hover,
.nav-link-ref.active {
    color: var(--brand-primary) !important;
}
.nav-link-ref .bi-chevron-down {
    font-size: 0.7rem;
    opacity: 0.6;
}
.navbar-utils-ref {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 1rem;
    flex-shrink: 0;
}
.navbar-icon-ref {
    color: #1a1a1a;
    font-size: 1.1rem;
    padding: 0.5rem;
    text-decoration: none;
    position: relative;
    transition: color 0.2s;
}
.navbar-icon-ref:hover {
    color: var(--brand-primary);
}
.navbar-icon-separator {
    width: 1px;
    height: 24px;
    background-color: rgba(0,0,0,0.15);
    margin: 0 0.25rem;
}
.cart-icon-ref {
    position: relative;
}
.cart-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background-color: var(--brand-primary);
    color: #1a1a1a;
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.btn-nav-cta-ref {
    background-color: var(--brand-primary);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background-color 0.2s;
    position: relative;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
}
.btn-nav-cta-ref:hover {
    background-color: var(--brand-primary-dark);
    color: #1a1a1a;
}
.navbar-ref .navbar-toggler-ref {
    border-color: #1a1a1a;
    color: #1a1a1a;
}
.navbar-ref .navbar-toggler-ref .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3cpath stroke='rgba(26,26,26,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-ref .dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 0.25rem;
    padding: 0.5rem 0;
}
.navbar-ref .dropdown-item {
    padding: 0.5rem 1rem;
    color: #1a1a1a;
    transition: background-color 0.2s, color 0.2s;
}
.navbar-ref .dropdown-item:hover {
    background-color: rgba(255,200,45,0.1);
    color: var(--brand-primary);
}
.navbar-ref .dropdown-toggle::after {
    display: none;
}

/* ----- Top utility bar (old - keep for backward compatibility) ----- */
.header-utility {
    background-color: var(--header-dark) !important;
    font-size: 0.875rem;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    position: relative;
    z-index: 1040;
}
.header-utility .dropdown-menu {
    z-index: 1050;
}
.header-utility a:hover {
    opacity: 1;
}
.hover-opacity:hover {
    opacity: 1 !important;
}

/* ----- Main navigation bar ----- */
.navbar-main {
    background-color: var(--brand-primary) !important;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow: visible;
    position: relative;
    z-index: 1030;
}
.navbar-main .container {
    overflow: visible;
    /* match hero caption left padding so logo aligns with hero text on desktop */
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 2.5rem);
}
.navbar-main .nav-link {
    color: rgba(0,0,0,0.85) !important;
    font-weight: 500;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 0.25rem;
}
.navbar-main .nav-link:hover {
    color: #1a1a1a !important;
    background-color: rgba(0,0,0,0.08);
}
.navbar-main .navbar-toggler {
    border-color: rgba(0,0,0,0.4);
    color: #1a1a1a;
}
.navbar-main .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Header search bar (navbar) – wider search */
.navbar-main .header-search-form {
    flex: 1;
    max-width: 385px;
    min-width: 0;
}
.navbar-main .header-search-form .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
}
.navbar-main .header-search-form .header-search-input {
    flex: 1 1 auto;
    min-width: 185px;
    width: auto;
    max-width: none;
    border-color: rgba(0,0,0,0.25);
    background-color: #fff;
}
.navbar-main .header-search-form .header-search-input:focus {
    border-color: var(--header-dark);
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.15);
}
.navbar-main .header-search-form .header-search-btn {
    flex-shrink: 0;
    background-color: var(--header-dark) !important;
    border-color: var(--header-dark);
    color: #fff !important;
}
.navbar-main .header-search-form .header-search-btn:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a;
    color: #fff !important;
}

/* Products dropdown: sub-category submenu on hover */
.navbar-main .dropdown-menu .dropdown-submenu {
    position: relative;
}
.navbar-main .dropdown-menu .dropdown-submenu .submenu-dropdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    margin-left: -1px;
    min-width: 12rem;
    z-index: 1050;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.navbar-main .dropdown-menu .dropdown-submenu:hover .submenu-dropdown {
    display: block;
}
.navbar-main .dropdown-menu .dropdown-submenu .dropdown-toggle-submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar-main .dropdown-menu .dropdown-submenu .submenu-arrow {
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    opacity: 1;
    color: inherit;
}

/* White logo background – YATO-style shape, small padding, overlaps into hero */
.navbar-main .logo-white-bg {
    background: #fff;
    padding: 0.5rem 0.75rem 0.6rem 0.4rem;
    margin: -0.35rem 1rem -2rem -1rem;
    position: relative;
    z-index: 1031;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    min-height: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.15);
    /* YATO-style: flat top, vertical left, flat bottom, inward-sloping diagonal right */
    clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%);
}
.navbar-main .logo-white-bg .brand-logo {
    margin: 0;
    padding: 0;
}

/* Brand logo: image logo on every page, no yellow spacing on top/left/bottom */
.navbar-main .brand-logo {
    display: inline-flex;
    align-items: center;
    padding: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-left: 0;
    text-decoration: none !important;
}
.navbar-main .site-logo {
    height: 85px;
    width: auto;
    max-width: 400px;
    object-fit: contain;
    object-position: center center;
}

/* ----- Sliding hero banner carousel ----- */
.hero-carousel-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    overflow-x: hidden;
    min-height: 85vh !important;
    min-height: min(85vh, 720px) !important;
    background: #1a1a1a; /* Fallback so hero + carousel strip align with no white gap */
    padding-top: 56px; /* Space for overlapping header so content isn’t hidden */
}
.hero-carousel {
    min-height: 85vh !important;
    height: 85vh !important;
    height: min(85vh, 720px) !important;
    max-height: 720px;
}
/* Static hero (no carousel): wrapper needs position and height for absolute children */
.hero-carousel-static {
    position: relative;
}
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    min-height: 85vh !important;
    height: 85vh !important;
    height: min(85vh, 720px) !important;
    max-height: 720px;
}
.hero-carousel .carousel-item {
    position: relative;
}
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, fffrgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, #ffbf00d5 100%);
    pointer-events: none;
}
.hero-carousel .carousel-caption {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 0;
    text-align: left;
    overflow: hidden;
    min-width: 0;
}
/* Hero caption container: same width and padding as navbar .container, shifted a little right and upwards */
.hero-carousel-caption .container,
.hero-carousel-caption .hero-caption-inner {
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: -6vh;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 2.5rem);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    text-align: left;
    max-width: 100%;
    box-sizing: border-box;
}
.hero-carousel .hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    color: #fff;
}
.hero-carousel .hero-title-line2 {
    display: block;
}
.hero-carousel .hero-lead {
    font-size: clamp(1rem, 2vw, 1.2rem);
    opacity: 0.95;
    max-width: 540px;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.hero-carousel .btn-hero-cta {
    background: var(--brand-primary);
    color: #1a1a1a;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.hero-carousel .btn-hero-cta:hover {
    background: var(--brand-primary-dark);
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Carousel controls and indicators */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: 4%;
    opacity: 0.9;
}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    padding: 1rem;
}
.hero-carousel .carousel-indicators {
    margin-bottom: 1rem;
}
.hero-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    background: linear-gradient(145deg, rgba(255,255,255,0.85) 0%, rgba(200,200,200,0.6) 50%, rgba(255,255,255,0.9) 100%);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.5) inset;
}
.hero-carousel .carousel-indicators .active {
    background: linear-gradient(145deg, #fff 0%, #e8e8e8 50%, #fff 100%);
    border-color: rgba(255,255,255,1);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 1px 3px rgba(255,255,255,0.8) inset, 0 0 8px rgba(255,255,255,0.4);
}

/* Hero product circles – sliding circular product images at bottom of hero */
.hero-product-circles-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 5;
    padding: 1rem 0 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
    box-sizing: border-box;
}
.hero-product-circles-wrap .container {
    pointer-events: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.hero-product-circles {
    min-height: 0;
}
.hero-product-circles .carousel-inner {
    min-height: 0;
}
.hero-product-circles .carousel-item {
    min-height: 0;
    padding: 0.5rem 0;
}
.hero-product-circles-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 1.5rem;
}
.hero-product-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    background: transparent;
    flex-shrink: 0;
    transition: transform 0.6s ease-in-out, box-shadow 0.4s ease-in-out;
}
/* Silver gradient shining stroke – ring behind content */
.hero-product-circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg,
        #f8f8f8 0%,
        #e8e8e8 15%,
        #c8c8c8 35%,
        #909090 50%,
        #b8b8b8 65%,
        #e0e0e0 85%,
        #f5f5f5 100%
    );
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 1px 2px rgba(255,255,255,0.5) inset, 0 2px 12px rgba(0,0,0,0.35);
    z-index: 0;
}
.hero-product-circle::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    z-index: 1;
}
.hero-product-circle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.hero-product-circle:hover::before {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.7), 0 1px 3px rgba(255,255,255,0.6) inset, 0 4px 16px rgba(0,0,0,0.4);
}
.hero-product-circle img,
.hero-product-circle .hero-product-circle-placeholder {
    position: relative;
    z-index: 2;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 50%;
}
.hero-product-circle img {
    object-fit: contain;
    object-position: center;
}
.hero-product-circle .hero-product-circle-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-product-circle-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #e9ecef;
    color: #6c757d;
    font-size: 1.5rem;
}
.hero-product-circles-indicators {
    position: relative;
    margin: 0.5rem 0 0;
    bottom: auto;
}
.hero-product-circles-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.85);
    background: linear-gradient(145deg, rgba(255,255,255,0.8) 0%, rgba(200,200,200,0.5) 50%, rgba(255,255,255,0.85) 100%);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 1px 1px rgba(255,255,255,0.4) inset;
}
.hero-product-circles-indicators .active {
    background: linear-gradient(145deg, #fff 0%, #e8e8e8 50%, #fff 100%);
    border-color: rgba(255,255,255,1);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 1px 2px rgba(255,255,255,0.7) inset;
}

/* Main content area: container when hero is present */
main .container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Breadcrumb (page path): links black on all pages */
.breadcrumb-item a,
.breadcrumb a {
    color: #1a1a1a !important;
    text-decoration: none;
}
.breadcrumb-item a:hover,
.breadcrumb a:hover {
    color: #000 !important;
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: #333;
}

/* ----- Responsive: large desktops (use more width) ----- */
@media (min-width: 1400px) {
    .header-utility .container,
    .navbar-main .container,
    main .container,
    .site-footer .container,
    .hero-product-circles-wrap .container,
    .hero-carousel-caption .container {
        max-width: 1500px;
    }
    .hero-carousel-caption .container {
        text-align: left !important;
    }
}

/* ----- Responsive: ultra-wide / 4K (cap width for readability) ----- */
@media (min-width: 1920px) {
    .header-utility .container,
    .navbar-main .container,
    main .container,
    .site-footer .container,
    .hero-product-circles-wrap .container,
    .hero-carousel-caption .container {
        max-width: 1680px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Hero: cap height on very tall screens so it doesn't dominate */
    .hero-carousel-section {
        min-height: min(80vh, 800px) !important;
    }
    .hero-carousel,
    .hero-carousel .carousel-inner,
    .hero-carousel .carousel-item {
        min-height: min(80vh, 800px) !important;
        height: min(80vh, 800px) !important;
        max-height: 800px;
    }
    .hero-carousel .carousel-caption {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .hero-carousel .hero-title,
    .hero-carousel .hero-lead {
        text-align: left !important;
    }
}

/* ----- Responsive: reference navbar on tablet/mobile ----- */
@media (max-width: 991.98px) {
    .navbar-ref-wrapper {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }
    .navbar-logo-section-ref {
        width: 100%;
        min-width: 0;
        height: 88px;
        padding: 0 1rem;
        clip-path: none;
        -webkit-clip-path: none;
    }
    .navbar-nav-section-ref {
        width: 100%;
        height: auto;
        min-height: 52px;
        padding: 0.5rem 1rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-ref .navbar-collapse {
        width: 100%;
        margin-top: 0.5rem;
        padding: 0.5rem 0;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
    .navbar-ref .navbar-nav {
        flex-direction: column;
        width: 100%;
    }
    .nav-link-ref {
        width: 100%;
        padding: 0.5rem 0.75rem !important;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    /* Mobile: nested submenu for reference navbar */
    .navbar-ref .dropdown-menu .dropdown-submenu .submenu-dropdown {
        position: static !important;
        left: auto !important;
        margin: 0.25rem 0 0.5rem 0 !important;
        margin-left: 1rem !important;
        padding-left: 0.75rem !important;
        display: none !important;
        border-left: 2px solid rgba(0,0,0,0.15) !important;
        background: rgba(0,0,0,0.03) !important;
    }
    .navbar-ref .dropdown-menu .dropdown-submenu.show-submenu .submenu-dropdown {
        display: block !important;
    }
    .navbar-utils-ref {
        margin-left: 0;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(0,0,0,0.1);
        width: 100%;
        justify-content: flex-start;
    }
    .btn-nav-cta-ref {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
        justify-content: center;
        clip-path: none;
        -webkit-clip-path: none;
    }
    .header-utility .d-flex.justify-content-between {
        justify-content: center;
        text-align: center;
    }
    .header-utility .gap-3 a {
        font-size: 0.8rem;
    }
    .navbar-main .logo-white-bg {
        margin-left: 0;
        margin-bottom: 0;
        min-width: 200px;
        z-index: 1033;
    }
    .navbar-main .navbar-collapse {
        position: relative;
        z-index: 1032;
        background: var(--brand-primary-dark);
        margin: 0.5rem -1rem -0.5rem -1rem;
        padding: 0.5rem 1rem 1rem;
        border-radius: 0 0 0.25rem 0.25rem;
    }
    .navbar-main .header-search-form {
        width: 100%;
        max-width: 100%;
    }
    .navbar-main .header-search-form .header-search-input {
        max-width: 100%;
    }
    .navbar-main .nav-link {
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    /* Mobile: show nested sub-categories when parent is expanded (tap to toggle) */
    .navbar-main .dropdown-menu .dropdown-submenu .submenu-dropdown {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0.25rem 0 0.5rem 0 !important;
        margin-left: 1rem !important;
        padding-left: 0.75rem !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        display: none !important;
        box-shadow: none !important;
        border-left: 2px solid rgba(0,0,0,0.25) !important;
        background: rgba(255,255,255,0.12) !important;
        border-radius: 0.25rem;
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        list-style: none !important;
        z-index: 1055;
    }
    .navbar-main .dropdown-menu .dropdown-submenu.show-submenu .submenu-dropdown {
        display: block !important;
    }
    .navbar-main .dropdown-menu .dropdown-submenu .dropdown-toggle-submenu {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }
    .navbar-main .dropdown-menu .dropdown-submenu .submenu-dropdown .dropdown-item {
        white-space: normal;
    }
    .hero-carousel-section {
        min-height: 65vh !important;
        position: relative;
    }
    .hero-carousel,
    .hero-carousel .carousel-inner,
    .hero-carousel .carousel-item {
        min-height: 52vh !important;
        height: 52vh !important;
        max-height: 380px !important;
    }
    /* Hero caption: left-aligned, no overflow on tablet/mobile */
    .hero-carousel .carousel-caption .container,
    .hero-carousel .carousel-caption .hero-caption-inner {
        text-align: left !important;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: 0;
        margin-right: auto;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        overflow-wrap: break-word;
        overflow-x: hidden;
    }
    .navbar-main .container {
        padding-left: 1rem;
    }
    .hero-carousel .hero-title {
        margin-bottom: 0.75rem;
        text-align: left !important;
        max-width: 100%;
        overflow-wrap: break-word;
    }
    .hero-carousel .hero-lead {
        margin-left: 0;
        margin-right: auto;
        margin-bottom: 1.25rem;
        text-align: left !important;
        max-width: 100% !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .hero-product-circles-wrap {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 0.75rem 0.75rem 1rem;
        min-height: 100px;
        /* Solid dark band on small screens so carousel strip always has background, aligns with hero */
        background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 40%, rgba(0,0,0,0.6) 100%) !important;
        box-sizing: border-box;
    }
    .hero-product-circles-wrap .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        max-width: 100%;
    }
    .hero-product-circles .carousel-item {
        padding: 0.25rem 0;
    }
    /* 3+3 grid on tablet so 6 items don’t wrap as 5+1 */
    .hero-product-circles-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.5rem;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    .hero-product-circle {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
    }
    .hero-product-circles-indicators {
        margin-top: 0.35rem;
    }
}

/* ----- Responsive: mobile ----- */
@media (max-width: 575.98px) {
    .header-utility-ref {
        font-size: 0.75rem;
    }
    .header-contact-link {
        font-size: 0.7rem;
    }
    .social-icon-ref {
        padding: 0 0.35rem;
        font-size: 0.8rem;
    }
    .navbar-logo-section-ref {
        height: 72px;
        padding: 0 0.75rem;
    }
    .logo-image-ref {
        max-height: 100%;
        max-width: 100%;
    }
    .nav-link-ref {
        font-size: 0.85rem;
    }
    .btn-nav-cta-ref {
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
    }
    .navbar-main .logo-white-bg {
        min-width: 160px;
    }
    .navbar-main .site-logo {
        height: 48px;
        max-width: 200px;
    }
    .hero-carousel-section {
        min-height: 58vh !important;
    }
    .hero-carousel,
    .hero-carousel .carousel-inner,
    .hero-carousel .carousel-item {
        min-height: 45vh !important;
        height: 45vh !important;
        max-height: 300px !important;
    }
    .hero-carousel .hero-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        text-align: left !important;
        max-width: 100% !important;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
    .hero-carousel .hero-lead {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
        text-align: left !important;
        max-width: 100% !important;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
    /* Hero caption: left-aligned only, strict no-overflow on mobile */
    .hero-carousel .carousel-caption .container,
    .hero-carousel .carousel-caption .hero-caption-inner {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        margin-left: 0;
        margin-right: auto;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        text-align: left !important;
        overflow-wrap: break-word;
        overflow-x: hidden;
    }
    .hero-carousel-section {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .hero-carousel,
    .hero-carousel .carousel-caption {
        min-width: 0;
        overflow-x: hidden;
        max-width: 100%;
    }
    .hero-carousel .hero-title,
    .hero-carousel .hero-lead,
    .hero-carousel .btn-hero-cta {
        max-width: 100%;
        box-sizing: border-box;
    }
    .hero-carousel-caption .hero-caption-inner {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }
    .navbar-main .container {
        padding-left: 0.75rem;
    }
    .hero-product-circles-wrap {
        padding: 0.6rem 0.5rem 0.85rem;
        min-height: 88px;
        /* Solid dark band on mobile so sliding carousel never has white/no background */
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.82) 100%) !important;
    }
    .hero-product-circles-wrap .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .hero-product-circles-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.35rem;
        max-width: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.2rem;
    }
    .hero-product-circle {
        width: 42px;
        height: 42px;
    }
    .hero-product-circles-indicators {
        margin-top: 0.25rem;
    }
}

/* Main content: consistent container padding on small screens */
@media (max-width: 767.98px) {
    main .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .index-page {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}
@media (max-width: 575.98px) {
    main .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        overflow: visible;
    }
    .index-page {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        overflow: visible;
    }
    .product-category-section {
        padding: 1.5rem 0;
    }
    .company-profile-section {
        padding: 1.5rem 0;
        padding-top: 1.5rem !important;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        overflow: visible;
        margin-top: 3rem !important;
    }
}

/* ----- Brand identity: all pages ----- */
.brand-strip,
.index-brand-strip {
    background: var(--brand-primary);
    padding: 0.25rem 1rem 0.4rem;
    margin: 0 0 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    max-width: 100%;
    box-sizing: border-box;
}
.brand-strip-template {
    background: var(--template-gold) !important;
    border-top: none !important;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    margin-top: 0 !important;
    margin-bottom: 0;
    padding-top: 0 !important;
    padding-bottom: 0.4rem;
    position: relative;
    z-index: 1;
    background-color: var(--template-gold) !important;
}
main > .brand-strip-template:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    top: 0;
    border-top: none !important;
    margin-bottom: 0;
    display: block;
}
body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    border-bottom: 2px solid rgba(0,0,0,0.1) !important;
    background-color: var(--template-gold) !important;
}
body.template-fullwidth.contact-page main > .brand-strip-template + .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.brand-strip-template .brand-strip-tagline {
    color: #000000 !important;
    font-weight: 600;
}
.brand-strip-tagline,
.index-brand-tagline {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1a1a1a;
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.3;
    max-width: 100%;
    overflow-wrap: break-word;
}
/* Section titles with brand yellow underline – use on any page */
.brand-section-title,
.index-page .index-section-title {
    font-family: var(--font-family-base);
    font-size: clamp(1.35rem, 3.5vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--brand-primary);
    display: block;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}
.index-page .index-section-title {
    margin-bottom: 1.5rem;
}
.index-featured-section {
    background-color: #F2F2F2;
    padding-top: 2rem;
    padding-bottom: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-bottom: 2rem;
}
/* Remove white space around featured products on index page */
.index-page .cta-template-section {
    margin-bottom: 0 !important;
}
.index-page .cta-template-section + .index-featured-section {
    margin-top: 0 !important;
}
.index-page .index-featured-section {
    margin-bottom: 0 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.index-page .container.index-page-template {
    padding-bottom: 0 !important;
}
/* Featured Products title: same as New Arrivals (bold uppercase, gold underline) – high specificity */
.index-featured-section h2.index-section-title,
.index-featured-section .index-section-title,
.index-featured-section .brand-section-title {
    font-family: var(--font-family-base) !important;
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    letter-spacing: 0.03em !important;
    color: #1a1a1a !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 3px solid var(--template-gold) !important;
    display: block !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}
.company-profile-section .company-profile-heading {
    margin-bottom: 0.5rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    padding-bottom: 0.5rem !important;
    position: relative;
    z-index: 10;
    scroll-margin-top: 4rem;
    line-height: 1.3 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}
.index-brand-strip {
    margin: 0 -0.5rem 2rem;
}

/* ----- Index page: prevent overflow ----- */
main {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #ffffff;
    margin-top: 0 !important;
}
/* Remove padding-top from main when brand strip is first child */
main.flex-grow-1.pt-4 {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
main.flex-grow-1:first-child {
    margin-top: 0 !important;
}
.index-page {
    max-width: 100%;
    box-sizing: border-box;
}
.index-page .container {
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* ----- Product Category section (reference style) ----- */
.product-category-section {
    background: #ffffff;
    padding: 2.5rem 1.5rem;
}
.product-category-section .product-category-title.index-section-title {
    margin-bottom: 0.5rem;
}
.product-category-title {
    font-family: var(--font-family-base);
    font-style: normal;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    text-align: center;
}
.product-category-tagline {
    text-align: center;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    margin-bottom: 2rem;
}
.product-category-tagline {
    font-family: var(--font-family-base);
    font-style: normal;
    font-size: 1rem;
    font-weight: 300;
    color: #333;
    text-align: center;
    margin-bottom: 2rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* New Arrivals section (index page) – improved UI: gradient background, clear hierarchy */
.new-arrivals-section {
    position: relative;
    padding: 3rem 1.5rem;
    background: linear-gradient(180deg, #f5f5f5 0%, #ebebeb 50%, #e8e8e8 100%);
    border-top: 3px solid var(--template-gold);
    border-bottom: 3px solid var(--template-gold);
    overflow: visible;
}
.new-arrivals-section .container,
.new-arrivals-section > .row {
    overflow: visible;
    max-width: 100%;
}
.new-arrivals-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/newArrival_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    opacity: 0.04;
}
.new-arrivals-section > * {
    position: relative;
    z-index: 1;
}
.new-arrivals-header {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}
.new-arrivals-title {
    font-family: var(--font-family-base);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    margin-bottom: 0;
}
.new-arrivals-title .text-gold { color: var(--template-gold) !important; }
.new-arrivals-tagline {
    text-align: center;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    color: #555 !important;
    line-height: 1.5;
}
/* New Arrivals CTA button */
.btn-new-arrivals-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid #1a1a1a;
    background: transparent;
    color: #1a1a1a;
    border-radius: 0.25rem;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.btn-new-arrivals-cta:hover {
    background: var(--template-gold);
    border-color: var(--template-gold);
    color: #000;
    transform: translateY(-1px);
}
.product-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0,0,0,0.1);
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.product-card .card-img-top {
    height: 200px;
    object-fit: contain;
    object-position: center;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.2s;
}
.product-card a:hover .card-img-top {
    opacity: 0.9;
}
.product-card .card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.product-card .card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.product-card .card-text {
    font-size: 0.875rem;
    color: #6c757d;
    flex-grow: 1;
    margin-bottom: 1rem;
}
.new-arrival-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: var(--template-gold);
    color: #000000;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.25rem;
    text-transform: uppercase;
    z-index: 2;
}
.new-arrivals-tagline {
    font-size: 1rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* New arrival product card badge – red corner ribbon */
.product-card-new-arrival .position-relative {
    position: relative;
    overflow: visible;
}
.product-card-new-arrival .card-img-top {
    display: block;
}
.new-arrival-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: auto;
    z-index: 10;
    margin: 0;
    width: auto;
    padding: 0.35rem 0.75rem;
    text-align: center;
    background: var(--template-gold);
    color: #000000;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transform: rotate(-5deg);
    transform-origin: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-radius: 0.25rem;
    pointer-events: none;
}
/* New Arrivals: ensure badge stays within card bounds */
.new-arrivals-section .new-arrival-badge {
    top: 0.5rem;
    left: 0.5rem;
    transform: rotate(0deg);
}
/* Ensure card doesn't clip the badge */
.product-card-new-arrival.card {
    overflow: visible;
}

/* Template product card: dark card, image overlay, gold accent bar */
.product-card-template {
    background: #000 !important;
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 0.5rem;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}
.product-card-template:hover {
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);
    border-color: var(--template-gold);
    transform: translateY(-2px);
}
.new-arrivals-section .product-card-template {
    border-radius: 0.5rem !important;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.new-arrivals-section .product-card-template:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 215, 0, 0.25);
    transform: translateY(-4px);
}
.new-arrivals-section .new-arrival-card {
    border-radius: 0.5rem !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.new-arrivals-section .new-arrival-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
}
/* Allow NEW badge to show: don't clip corner ribbon */
.product-card-template.product-card-new-arrival,
.product-card-template.product-card-new-arrival.card {
    overflow: visible;
}
/* On large screens, contain badge within card */
@media (min-width: 992px) {
    .new-arrivals-section .product-card-template.product-card-new-arrival,
    .new-arrivals-section .product-card-template.product-card-new-arrival.card {
        overflow: hidden;
    }
    .new-arrivals-section .product-card-template .product-card-template-img-wrap:has(.new-arrival-badge) {
        overflow: hidden !important;
    }
}
.product-card-template .product-card-template-img-wrap:has(.new-arrival-badge) {
    overflow: visible !important;
}
.product-card-template .card-body { 
    background: #000; 
    border-radius: 0 0 0.5rem 0.5rem;
    padding-top: 0.5rem;
}
.new-arrivals-section .product-card-template .card-body {
    background: #0d0d0d;
    border-top: none !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
    padding: 1.25rem 1rem 1.25rem;
    display: flex !important;
    flex-direction: column !important;
    min-height: 140px;
    flex-grow: 1;
    height: 100%;
}
.new-arrivals-section .product-card-template .card-title {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}
.new-arrivals-section .product-card-template .small {
    flex-shrink: 0;
}
.new-arrivals-section .product-card-template-link {
    font-weight: 600;
    letter-spacing: 0.02em;
}
.new-arrivals-section .product-card-template .card-text {
    flex-grow: 1;
    margin-bottom: 0.5rem;
    flex-shrink: 1;
    min-height: 0;
}
.new-arrivals-section .product-card-template-link {
    margin-top: auto !important;
    margin-bottom: 0;
    flex-shrink: 0;
}
.product-card-template .card-title { color: #fff !important; }
.product-card-template-img-wrap {
    position: relative;
    height: 200px;
}
/* Inner wrapper: clips scaled image so white background doesn’t show on hover (badge stays outside) */
.product-card-template-img-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/* New Arrivals: allow image to be fully visible; white background for product image */
.new-arrivals-section .product-card-template-img-inner {
    overflow: visible !important;
    background: #ffffff !important;
    position: relative !important;
    height: auto !important;
    min-height: 200px;
    inset: auto;
    padding: 0.5rem;
    border: none !important;
}
.product-card-template-img-inner .card-img-top,
.product-card-template-img-inner .product-card-template-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.product-card-template-img-wrap .card-img-top,
.product-card-template-img-wrap .product-card-template-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
/* New Arrivals: ensure wrapper allows full image visibility */
.new-arrivals-section .product-card-template-img-wrap {
    overflow: visible !important;
    background: #ffffff !important;
    height: auto !important;
    min-height: 200px;
    padding: 0.75rem;
    margin: 0;
    flex-shrink: 0;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    border: none !important;
}
.new-arrivals-section .product-card-template-img-wrap.overflow-hidden {
    overflow: visible !important;
}
/* New Arrivals: ensure cards don't overflow container */
.new-arrivals-section .new-arrival-card {
    overflow: hidden !important;
    margin: 0;
    border-radius: 0.5rem !important;
}
.new-arrivals-section .col-md-6,
.new-arrivals-section .col-lg-3 {
    overflow: visible;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
/* New Arrivals: ensure images are fully visible and contained */
.new-arrivals-section .product-card-template-img-inner {
    overflow: visible !important;
    background: #ffffff !important;
    position: relative !important;
    height: auto !important;
    min-height: 200px;
    inset: auto;
    padding: 0.75rem;
    border: none !important;
}
.new-arrivals-section .product-card-template-img-inner .card-img-top,
.new-arrivals-section .product-card-template-img-inner .product-card-template-img,
.new-arrivals-section .product-card-template-img-wrap .card-img-top,
.new-arrivals-section .product-card-template-img-wrap .product-card-template-img {
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff !important;
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
    border-radius: 0;
    border: none !important;
}
/* New Arrivals: disable hover scale to prevent cropping */
.new-arrivals-section .product-card-template:hover .product-card-template-img-wrap .card-img-top,
.new-arrivals-section .product-card-template:hover .product-card-template-img-wrap .product-card-template-img {
    transform: none !important;
}
.product-card-template:hover .product-card-template-img-wrap .card-img-top,
.product-card-template:hover .product-card-template-img-wrap .product-card-template-img {
    transform: scale(1.08);
}
.product-card-template-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
    pointer-events: none;
}
/* New Arrivals: remove overlay to create unified look */
.new-arrivals-section .product-card-template-overlay {
    display: none !important;
}
.new-arrivals-section .product-card-template:hover .product-card-template-overlay,
.new-arrivals-section .new-arrival-card:hover .product-card-template-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 50%, transparent 100%) !important;
}
/* New Arrivals: prevent overlay from showing white rectangle (no border/outline/shadow) */
.new-arrivals-section .product-card-template-overlay,
.new-arrivals-section .product-card-template:hover .product-card-template-overlay,
.new-arrivals-section .new-arrival-card:hover .product-card-template-overlay {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.product-card-template-link {
    text-decoration: none;
    font-weight: 600;
    transition: gap 0.2s;
}
.product-card-template .product-card-template-arrow {
    opacity: 0;
    transition: opacity 0.2s;
}
.product-card-template:hover .product-card-template-arrow {
    opacity: 1;
}
.product-card-template-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--template-gold);
    transition: width 0.3s;
}
.product-card-template:hover .product-card-template-accent {
    width: 100%;
}
.product-card-template .new-arrival-badge {
    background: var(--template-gold);
    color: #000;
    z-index: 2;
}

/* Large screens: ensure badge stays within card boundaries */
@media (min-width: 992px) {
    .new-arrivals-section .new-arrival-badge {
        top: 0.75rem;
        left: 0.75rem;
        transform: rotate(0deg);
        transform-origin: center;
    }
}

/* New Arrivals: remove white rectangle (border/outline) on card and link – card wraps link */
.new-arrivals-section .product-card-template.product-card,
.new-arrivals-section .product-card-template.product-card:hover,
.new-arrivals-section .product-card-template:has(> a:hover),
.new-arrivals-section .product-card-template:has(> a:focus),
.new-arrivals-section .product-card-template:focus-within {
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.new-arrivals-section .product-card-template > a,
.new-arrivals-section .product-card-template > a:hover,
.new-arrivals-section .product-card-template > a:focus,
.new-arrivals-section .product-card-template > a:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Product category cards – reference style: yellow image area, white body, dark button, soft shadow */
.product-category-section .category-card-ref,
.product-category-section .category-card-ref.card {
    border: none;
    border-radius: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.12);
    transition: box-shadow 0.2s;
}
.product-category-section .category-card-ref:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 10px 24px rgba(0,0,0,0.14);
}
.product-category-section .category-card-ref a {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
/* Top section: yellow background, ~60–65% of card */
.product-category-section .category-card-img-wrap {
    position: relative;
    width: 100%;
    flex: 0 0 62%;
    min-height: 180px;
    background: #FFD700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0 !important;
}
.product-category-section .category-card-img-wrap .category-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}
.product-category-section .category-card-img-wrap .category-card-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 160px;
    background: rgba(0,0,0,0.1);
    border-radius: 0 !important;
    color: rgba(0,0,0,0.4);
}
/* Bottom section: white background, title + button */
.product-category-section .category-card-ref .card-body {
    padding: 1.5rem 1rem;
    border-radius: 0 !important;
    min-height: 120px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
}
.product-category-section .category-card-title {
    font-family: var(--font-family-base);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #333333;
    margin: 0 0 0.25rem;
    line-height: 1.35;
    text-align: center;
    display: block;
}
.product-category-section .btn-view-more {
    display: inline-block;
    background: #212121;
    color: #ffffff;
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.product-category-section .category-card-ref:hover .btn-view-more {
    background: #333333;
}

/* Index template: keep same reference card style (no gold border override) */
.index-page-template .product-category-section .category-card-ref {
    transition: box-shadow 0.2s;
}
.index-page-template .product-category-section .btn-outline-dark {
    border-color: var(--template-gold);
    color: var(--template-gold);
}
.index-page-template .product-category-section .btn-outline-dark:hover {
    background: var(--template-gold);
    color: #000;
}
.index-page-template .new-arrivals-section .btn-outline-dark {
    border-color: #000;
    color: #000;
}
.index-page-template .new-arrivals-section .btn-outline-dark:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* All Categories button: visible outline, zero border-radius */
.product-category-section .btn-outline-dark,
.product-category-section .btn-category-cta {
    border-radius: 0 !important;
    border-width: 2px;
    border-color: #1a1a1a;
    color: #1a1a1a;
    font-weight: 600;
}
.product-category-section .btn-outline-dark:hover,
.product-category-section .btn-category-cta:hover {
    background-color: var(--template-gold);
    border-color: var(--template-gold);
    color: #000;
}
.index-page-template .product-category-section .btn-outline-dark,
.index-page-template .product-category-section .btn-category-cta {
    border-color: #1a1a1a;
    color: #1a1a1a;
}
.index-page-template .product-category-section .btn-outline-dark:hover,
.index-page-template .product-category-section .btn-category-cta:hover {
    background: var(--template-gold);
    border-color: var(--template-gold);
    color: #000;
}

/* ----- Company Profile section (image left, text right) ----- */
.company-profile-section {
    padding: 2rem 0;
    padding-top: 6rem;
    overflow: visible;
    margin-top: 1rem;
    scroll-margin-top: 4rem;
}
.company-profile-heading {
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    scroll-margin-top: 2rem;
    line-height: 1.3 !important;
    padding-bottom: 0.5rem !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}
.company-profile-image-wrap {
    position: relative;
    border-radius: 0.25rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.company-profile-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 280px;
}
.company-profile-badge {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    letter-spacing: 0.02em;
}
.company-profile-label {
    font-family: var(--font-family-base);
    font-weight: 500;
    letter-spacing: 0.05em;
    font-size: 1.25rem;
    text-transform: uppercase;
}
.company-profile-title {
    font-family: var(--font-family-base);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 500;
    color: #1a1a1a;
    text-transform: uppercase;
}
.company-profile-brand {
    color: var(--brand-primary);
    font-weight: 800;
    text-transform: uppercase;
}
.company-profile-content {
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}
.company-profile-content p {
    margin-bottom: 0.75rem;
}
.company-profile-content p:last-child {
    margin-bottom: 0;
}
.company-profile-content .list-check,
.about-content .list-check {
    list-style: none;
    padding-left: 0;
}
.company-profile-content .list-check li,
.about-content .list-check li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.35rem;
}
.company-profile-content .list-check li::before,
.about-content .list-check li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--brand-primary);
    font-weight: bold;
}

/* Hide brand strip on about page (it's moved below the banner) */
body.about-page main > .brand-strip:first-child {
    display: none;
}
/* Remove spacing on about page; white background for content (overridden again after template block) */
body.about-page main {
    padding-top: 0 !important;
    background-color: #ffffff !important;
}
body.about-page .about-page-banner {
    margin-top: 0;
    margin-bottom: 0;
}
body.about-page .about-page-banner + .brand-strip {
    margin-top: 0;
    margin-bottom: 0;
    border-top: none;
    border-bottom: none;
}

/* ----- About page banner with gradient ----- */
.about-page-banner {
    position: relative;
    width: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #020202 0%, #131313 25%, #1a1a1a 50%, #ffc107 75%, #ff9800 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
    overflow: hidden;
    margin-bottom: 3rem;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.about-page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}
.about-page-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 1rem;
}
.about-page-banner-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    letter-spacing: 0.05em;
}

/* ----- About page: two columns (text left, image right) ----- */
.about-page-section {
    margin-bottom: 0;
}
.about-page-text .about-content {
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}
.about-page-text .about-content p {
    margin-bottom: 0.75rem;
}
.about-page-text .about-content p:last-child {
    margin-bottom: 0;
}
.about-page-image-wrap {
    position: relative;
    border-radius: 0.375rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    background: #f0f0f0;
}
.about-page-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 240px;
}

/* ========== About page sections (from AboutPage.tsx) ========== */
body.about-page main { background-color: #fff !important; }
/* Remove gap after header: no body padding on about; hero provides space for fixed header */
body.template-fullwidth.about-page {
    padding-top: 0 !important;
}
.about-hero-section {
    position: relative;
    background-color: #000;
    color: #fff;
    padding: 5rem 0 5rem;
    overflow: hidden;
}
/* Hero starts under header; top padding = fixed header height so content is not hidden */
body.about-page .about-hero-section {
    padding-top: 112px;
}
@media (min-width: 768px) {
    body.about-page .about-hero-section {
        padding-top: 132px;
    }
}
@media (min-width: 992px) {
    body.about-page .about-hero-section {
        padding-top: 178px;
    }
}
.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}
.about-hero-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 33%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, transparent 100%);
    transform: skewX(-12deg) translateX(25%);
}
.about-hero-inner { position: relative; z-index: 2; max-width: 48rem; }
.about-hero-badge {
    display: inline-block;
    background: var(--template-gold);
    color: #000;
    padding: 0.5rem 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    transform: rotate(-2deg);
}
.about-hero-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}
.about-hero-lead { font-size: 1.25rem; color: rgba(255,255,255,0.8); margin-bottom: 0; }
.about-hero-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--template-gold);
}

/* Stats */
.about-stats-section {
    background: var(--template-gold);
    padding: 0.5rem 0;
}
.about-stats-section .row.g-4 {
    margin-top: 0;
    margin-bottom: 0;
}
.about-stats-section .row.g-4 > * {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
/* Index page: stats strip positioned above Why Choose Us section (top right) */
.about-stats-section-index-wrapper {
    margin-bottom: -3rem;
    z-index: 10;
}
.about-stats-section-index {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    max-width: 90%;
    padding: 1.5rem 2rem;
    z-index: 2;
    background: var(--template-gold);
    border-radius: 0 0 0 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
@media (min-width: 768px) {
    .about-stats-section-index-wrapper {
        margin-bottom: -4rem;
    }
    .about-stats-section-index {
        max-width: 75%;
        padding: 2rem 3rem;
    }
}
@media (min-width: 992px) {
    .about-stats-section-index-wrapper {
        margin-bottom: -5rem;
    }
    .about-stats-section-index {
        max-width: 60%;
        padding: 2.5rem 4rem;
    }
}
@media (max-width: 575.98px) {
    .about-stats-section-index-wrapper {
        margin-bottom: 2rem;
    }
    .about-stats-section-index {
        position: relative;
        width: 100%;
        max-width: 100%;
        top: auto;
        right: auto;
        border-radius: 0;
        box-shadow: none;
    }
}
/* Status strip above company profile section top line (reference layout) */
.company-profile-stats-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}
.company-profile-stats-wrap .about-stats-section-company-profile {
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
@media (max-width: 767.98px) {
    .company-profile-stats-wrap {
        justify-content: stretch;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .company-profile-stats-wrap .about-stats-section-company-profile {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0;
        padding-left: calc(var(--bs-gutter-x, 1rem) + (50vw - 50%)) !important;
        padding-right: calc(var(--bs-gutter-x, 1rem) + (50vw - 50%)) !important;
        box-sizing: border-box;
    }
}
/* Company profile partition: bordered box below the status strip (overlaps slightly under it) */
.company-profile-partition {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    padding-top: 1.5rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-top: -3.25rem;
}
@media (min-width: 768px) {
    .company-profile-partition {
        padding: 1.5rem 1.5rem 2rem;
        padding-top: 2rem;
    }
}
@media (min-width: 992px) {
    .company-profile-partition {
        padding: 2rem 2rem 2.5rem;
        padding-top: 2.25rem;
    }
}
/* Company Profile section: stats strip (above partition, in flow) */
.company-profile-section .about-stats-section-company-profile {
    width: auto;
    max-width: 100%;
    padding: 1.25rem 2rem;
    background: var(--template-gold);
}
@media (min-width: 768px) {
    .company-profile-section .about-stats-section-company-profile {
        max-width: 75%;
    }
}
@media (min-width: 992px) {
    .company-profile-section .about-stats-section-company-profile {
        max-width: 65%;
    }
}
.about-stats-section-company-profile .container {
    padding: 0;
    max-width: 100%;
}
.about-stats-section-company-profile .row {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.about-stats-section-company-profile .row > * {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.about-stats-section-company-profile .row > * .about-stat-number,
.about-stats-section-company-profile .row > * .about-stat-label {
    display: block;
    text-align: center;
}
.about-stats-section-company-profile .about-stat-number {
    color: #000000;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    margin-bottom: 0.2rem;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}
.about-stats-section-company-profile .about-stat-label {
    color: rgba(0,0,0,0.8);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}
.company-profile-section {
    padding-top: 2rem;
}
@media (min-width: 768px) {
    .company-profile-section .about-stats-section-company-profile {
        padding: 1.5rem 2.5rem;
    }
    .about-stats-section-company-profile .about-stat-number {
        font-size: clamp(1.5rem, 2.5vw, 2rem);
    }
    .about-stats-section-company-profile .about-stat-label {
        font-size: 0.7rem;
    }
}
@media (min-width: 992px) {
    .company-profile-section .about-stats-section-company-profile {
        padding: 1.75rem 3rem;
    }
    .about-stats-section-company-profile .about-stat-number {
        font-size: clamp(1.75rem, 3vw, 2.25rem);
    }
    .about-stats-section-company-profile .about-stat-label {
        font-size: 0.75rem;
    }
}
@media (max-width: 767.98px) {
    .company-profile-partition {
        padding-top: 1.25rem;
        margin-top: 0;
    }
    .about-stats-section-company-profile {
        padding: 0.5rem 1rem !important;
    }
    .company-profile-section .company-profile-heading,
    .company-profile-section .section-title-template,
    .company-profile-section h2.company-profile-heading,
    .company-profile-section h2.section-title-template {
        margin-top: 0.75rem !important;
        margin-bottom: 0.25rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.4rem !important;
    }
    .company-profile-section .row.mt-3 {
        margin-top: 0.75rem !important;
    }
    .company-profile-section {
        padding-top: 0.75rem !important;
        margin-top: 0.5rem !important;
    }
}
@media (max-width: 575.98px) {
    .company-profile-partition {
        margin-top: 0 !important;
    }
    .about-stats-section-company-profile {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
        padding: 0.35rem 1rem !important;
        z-index: 1;
    }
    .about-stats-section-company-profile .row.about-stats-row-mobile {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .about-stats-section-company-profile .row.about-stats-row-mobile > * {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        box-sizing: border-box !important;
    }
    /* Force 2x2 grid: first two on top row, last two on bottom row */
    .about-stats-section-company-profile .row.about-stats-row-mobile > .col-6:nth-child(1),
    .about-stats-section-company-profile .row.about-stats-row-mobile > .col-6:nth-child(2) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        margin-bottom: 0.5rem !important;
    }
    .about-stats-section-company-profile .row.about-stats-row-mobile > .col-6:nth-child(3),
    .about-stats-section-company-profile .row.about-stats-row-mobile > .col-6:nth-child(4) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        margin-bottom: 0 !important;
    }
    .about-stats-section-company-profile .about-stat-number {
        color: #000000;
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: 0.15rem;
        text-align: center;
    }
    .about-stats-section-company-profile .about-stat-label {
        color: rgba(0,0,0,0.8);
        font-size: 0.7rem;
        text-align: center;
        line-height: 1.2;
    }
    .company-profile-section {
        padding-top: 0.5rem !important;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        overflow: visible;
        margin-top: 0.5rem !important;
    }
    .company-profile-section .company-profile-heading {
        margin-top: 0.3rem !important;
        margin-bottom: 0.2rem !important;
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 10 !important;
        line-height: 1.3 !important;
        min-height: auto !important;
        height: auto !important;
    }
    .company-profile-section .section-title-template {
        margin-top: 0.3rem !important;
        margin-bottom: 0.2rem !important;
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: block !important;
        position: relative !important;
        z-index: 10 !important;
        line-height: 1.3 !important;
        min-height: auto !important;
        height: auto !important;
    }
}
.about-stat-number {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 900;
    color: #000;
    margin-bottom: 0.1rem;
    line-height: 1.1;
}
.about-stat-label { 
    color: rgba(0,0,0,0.8); 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    font-size: 0.95rem;
    line-height: 1.1;
}

/* Story */
.about-story-section { background: #fff; }
.about-section-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #1a1a1a;
}
.about-story-content {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #333;
}
.about-story-content p { margin-bottom: 1rem; }
.about-story-content p:last-child { margin-bottom: 0; }
.about-story-image-wrap {
    position: relative;
}
.about-story-image {
    width: 100%;
    height: auto;
    min-height: 22rem;
    max-height: none;
    object-fit: contain;
    object-position: center top;
    border: 4px solid var(--template-gold);
    display: block;
}
.about-story-image-deco {
    position: absolute;
    width: 8rem;
    height: 8rem;
    z-index: -1;
}
.about-story-image-deco-1 { bottom: -1.5rem; left: -1.5rem; background: #000; }
.about-story-image-deco-2 { top: -1.5rem; right: -1.5rem; background: var(--template-gold); }

/* Values (black section) */
.about-values-section {
    background: #000;
    color: #fff;
}
.about-values-header .about-section-title.light { color: #fff; }
.about-section-tagline {
    font-size: 1.25rem;
    max-width: 36rem;
    margin: 0 auto;
    color: rgba(255,255,255,0.7);
}
.about-value-card {
    position: relative;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,215,0,0.3);
    padding: 2rem;
    height: 100%;
    transition: border-color 0.2s;
}
.about-value-card:hover { border-color: var(--template-gold); }
.about-value-icon-wrap {
    width: 4rem;
    height: 4rem;
    background: var(--template-gold);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transform: rotate(-5deg);
    font-size: 1.75rem;
}
.about-value-title { font-size: 1.5rem; margin-bottom: 0.75rem; font-weight: 600; }
.about-value-desc { color: rgba(255,255,255,0.7); margin-bottom: 0; font-size: 0.9375rem; }

/* Timeline */
.about-timeline-section { background: #f8f9fa; }
.about-section-tagline.dark { color: #555; }
.about-timeline {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
}
.about-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--template-gold);
    transform: translateX(-50%);
}
@media (max-width: 767.98px) {
    .about-timeline::before { left: 1rem; transform: none; }
}
.about-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
}
.about-timeline-item-start { flex-direction: row; }
.about-timeline-item-end { flex-direction: row-reverse; }
@media (max-width: 767.98px) {
    .about-timeline-item,
    .about-timeline-item-end { flex-direction: column; align-items: stretch; padding-left: 2.5rem; }
}
.about-timeline-card {
    width: 45%;
    background: #fff;
    border: 2px solid var(--template-gold);
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
}
.about-timeline-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
@media (max-width: 767.98px) {
    .about-timeline-card { width: 100%; }
}
.about-timeline-item-start .about-timeline-card { margin-right: auto; text-align: right; }
.about-timeline-item-end .about-timeline-card { margin-left: auto; text-align: left; }
@media (max-width: 767.98px) {
    .about-timeline-item-start .about-timeline-card,
    .about-timeline-item-end .about-timeline-card { text-align: left; }
}
.about-timeline-dot {
    position: absolute;
    left: 50%;
    top: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--template-gold);
    border: 4px solid #000;
    border-radius: 50%;
    transform: translateX(-50%);
    flex-shrink: 0;
}
@media (max-width: 767.98px) {
    .about-timeline-dot { left: 1rem; top: 1.5rem; transform: translateX(-50%); }
}
.about-timeline-year { font-size: 1.75rem; font-weight: 700; color: var(--template-gold); margin-bottom: 0.25rem; }
.about-timeline-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #1a1a1a; }
.about-timeline-desc { margin-bottom: 0; color: #555; font-size: 0.9375rem; }

/* Mission & Vision */
.about-mission-section { background: #fff; }
.about-mission-card {
    position: relative;
    padding: 3rem;
    border: 4px solid;
    height: 100%;
}
.about-mission-dark {
    background: #000;
    color: #fff;
    border-color: var(--template-gold);
}
.about-mission-deco {
    position: absolute;
    top: -1rem;
    left: -1rem;
    width: 6rem;
    height: 6rem;
    background: var(--template-gold);
    opacity: 0.2;
    z-index: 0;
}
.about-mission-deco-dark { background: #000; right: -1rem; left: auto; }
.about-mission-icon {
    position: relative;
    font-size: 4rem;
    color: var(--template-gold);
    margin-bottom: 1rem;
    display: block;
}
.about-mission-icon.dark { color: #000; }
.about-mission-title { position: relative; font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; }
.about-mission-text { position: relative; font-size: 1.125rem; line-height: 1.6; margin-bottom: 0; }
.about-mission-dark .about-mission-text { color: rgba(255,255,255,0.85); }
.about-mission-gold {
    background: var(--template-gold);
    color: #000;
    border-color: #000;
}
.about-mission-gold .about-mission-text { color: rgba(0,0,0,0.85); }

/* Why Choose Us */
.about-why-section {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 50%, #000 100%);
    color: #fff;
}
.about-why-section .about-section-title.light { color: #fff; }
.about-why-section .about-section-tagline { color: rgba(255,255,255,0.7); }
.about-why-card {
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,215,0,0.3);
    padding: 2rem;
    height: 100%;
    transition: border-color 0.2s;
}
.about-why-card:hover { border-color: var(--template-gold); }
.about-why-icon { font-size: 3rem; color: var(--template-gold); margin-bottom: 1rem; display: block; }
.about-why-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.75rem; }
.about-why-desc { color: rgba(255,255,255,0.7); margin-bottom: 0; font-size: 0.9375rem; }

/* Our Team */
.about-team-section {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 50%, #0d0d0d 100%);
    color: #fff;
}
.about-team-section .about-section-title.light { color: #fff; }
.about-team-section .about-section-tagline { color: rgba(255,255,255,0.7); }
.about-team-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.about-team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,215,0,0.25);
    border-color: rgba(255,215,0,0.4);
}
.about-team-card-img-wrap {
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
}
.about-team-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.about-team-card:hover .about-team-card-img {
    transform: scale(1.06);
}
.about-team-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(255,255,255,0.2);
}
.about-team-card-body {
    padding: 1.5rem 1.25rem;
    text-align: center;
    flex-grow: 1;
}
.about-team-card-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: #fff;
}
.about-team-card-designation {
    font-size: 0.9rem;
    color: var(--template-gold);
    margin-bottom: 0;
    font-weight: 500;
}
.about-team-card-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}
.about-team-card-contact:hover {
    color: var(--template-gold);
}
.about-team-card-contact i {
    font-size: 0.9rem;
    color: var(--template-gold);
}

/* Team card: smaller on small screens */
@media (max-width: 767px) {
    .about-team-section .row {
        justify-content: center;
    }
    .about-team-section .col {
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }
    .about-team-card-img-wrap {
        aspect-ratio: 1.1;
    }
    .about-team-card-body {
        padding: 1rem 0.875rem;
    }
    .about-team-card-name {
        font-size: 1rem;
    }
    .about-team-card-designation {
        font-size: 0.8rem;
    }
    .about-team-card-contact {
        font-size: 0.8rem;
        margin-top: 0.35rem;
    }
    .about-team-card-placeholder {
        font-size: 2.5rem;
    }
}
@media (max-width: 575px) {
    .about-team-section .col {
        max-width: 220px;
    }
    .about-team-card-body {
        padding: 0.75rem 0.75rem;
    }
    .about-team-card-name {
        font-size: 0.9375rem;
    }
    .about-team-card-designation {
        font-size: 0.75rem;
    }
    .about-team-card-contact {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
    .about-team-card-placeholder {
        font-size: 2rem;
    }
}

/* CTA */
.about-cta-section { background: var(--template-gold); }
.about-cta-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem;
}
.about-cta-lead {
    font-size: 1.25rem;
    color: rgba(0,0,0,0.8);
    margin-bottom: 1.5rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}
.about-cta-btn-outline {
    border-width: 3px;
    border-color: #000;
    color: #000;
    font-weight: 600;
}
.about-cta-btn-outline:hover {
    background: #000;
    color: var(--template-gold);
    border-color: #000;
}
/* Remove gap below CTA so footer sits flush (no white strip) */
body.about-page .site-footer,
body.about-page .site-footer-template {
    margin-top: 0;
}

/* ========== New Arrivals page (from NewArrivalsPage.tsx) ========== */
body.new-arrivals-page main > .brand-strip.brand-strip-template {
    display: none !important;
}
/* Remove black gap after header: no body padding; hero provides space for fixed header */
body.template-fullwidth.new-arrivals-page {
    padding-top: 0 !important;
}
.na-hero {
    position: relative;
    background: linear-gradient(135deg, #000 0%, #1a1a1a 50%, #000 100%);
    color: #fff;
    padding: 4rem 0 5rem;
    overflow: hidden;
}
body.new-arrivals-page .na-hero {
    padding-top: 112px;
}
@media (min-width: 768px) {
    body.new-arrivals-page .na-hero {
        padding-top: 132px;
    }
}
@media (min-width: 992px) {
    body.new-arrivals-page .na-hero {
        padding-top: 178px;
    }
}
.na-hero-glow {
    position: absolute;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: var(--template-gold);
    opacity: 0.1;
    filter: blur(60px);
}
.na-hero-glow-1 { top: 0; right: 0; }
.na-hero-glow-2 { bottom: 0; left: 0; }
.na-hero-inner { position: relative; z-index: 2; max-width: 56rem; margin: 0 auto; }
.na-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--template-gold);
    color: #000;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}
.na-hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}
.na-hero-lead {
    font-size: clamp(1rem, 2vw, 1.35rem);
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5rem;
}
.na-hero-features { font-size: 0.95rem; color: rgba(255,255,255,0.9); }
.na-hero-feature { display: inline-flex; align-items: center; gap: 0.35rem; }
.na-hero-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--template-gold);
}

/* Featured This Week */
.na-featured {
    background: #e9ecef;
    color: #1a1a1a;
}
.na-featured .na-featured-title { color: #1a1a1a; }
.na-featured .na-featured-icon { color: var(--template-gold); }
.na-featured-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin: 0; }
.na-featured-icon { font-size: 2rem; color: var(--template-gold); }
.na-featured-card {
    position: relative;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border: 2px solid var(--template-gold);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}
.na-featured-card:hover { box-shadow: 0 12px 32px rgba(255,215,0,0.2); }
.na-featured-card .na-featured-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1;
}
.na-featured-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: #dc3545;
    color: #fff;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    transform: rotate(3deg);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.na-featured-img-wrap {
    position: relative;
    display: block;
    overflow: visible !important;
    background: #ffffff;
    padding: 0.5rem;
    min-height: 16rem;
}
.na-featured-img {
    width: 100%;
    height: auto;
    max-height: 16rem;
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff;
    transition: transform 0.5s;
    display: block;
    margin: 0 auto;
}
.na-featured-card:hover .na-featured-img { transform: none !important; }
.na-featured-img-placeholder { height: 16rem; background: #333; min-height: 16rem; }
.na-featured-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    pointer-events: none;
}
.na-featured-new {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    background: var(--template-gold);
    color: #000;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
}
.na-featured-body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; min-height: 180px; background-color: #000; }
.na-featured-brand { font-size: 0.875rem; color: var(--template-gold); margin-bottom: 0.35rem; flex-shrink: 0; }
.na-featured-name { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; flex-shrink: 0; }
.na-featured-name a { color: #fff; text-decoration: none; }
.na-featured-name a:hover { color: var(--template-gold); }
.na-featured-desc { font-size: 0.875rem; color: rgba(255,255,255,0.75); margin-bottom: 0.5rem; flex-grow: 1; }
.na-featured-btn {
    width: auto;
    min-width: 140px;
    background: var(--template-gold);
    color: #000;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border: none;
    transition: background 0.2s, color 0.2s;
    margin-top: auto !important;
    margin-bottom: 0;
    align-self: flex-start;
}
.na-featured-btn:hover { background: #FFC700; color: #000; }

/* Main content + filter */
.na-main { background: #f8f9fa; }
.na-filter-bar {
    background: #fff;
    border: 2px solid #dee2e6;
    padding: 1.5rem;
}
.na-filter-label {
    display: block;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #495057;
    margin-bottom: 0.5rem;
}
.na-filter-pill {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 2px solid #dee2e6;
    background: #fff;
    color: #333;
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.na-filter-pill:hover { border-color: var(--template-gold); color: #000; }
.na-filter-pill.active {
    background: var(--template-gold);
    border-color: var(--template-gold);
    color: #000;
    font-weight: 700;
}
.na-sort-form { max-width: 16rem; }
.na-sort-select {
    border: 2px solid #dee2e6;
    padding: 0.5rem 0.75rem;
}
.na-sort-select:focus { border-color: var(--template-gold); outline: none; }
.na-results-count { color: #495057; margin-bottom: 1rem; }

/* Product grid cards */
.na-card {
    background: #fff;
    border: 2px solid #dee2e6;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.na-card:hover { border-color: var(--template-gold); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.na-card .na-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1;
}
.na-card-img-wrap {
    position: relative;
    display: block;
    overflow: visible !important;
    background: #ffffff;
    padding: 0.5rem;
    min-height: 14rem;
}
.na-card-img {
    width: 100%;
    height: auto;
    max-height: 14rem;
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff;
    transition: transform 0.4s;
    display: block;
    margin: 0 auto;
}
.na-card:hover .na-card-img { transform: none !important; }
.na-card-img-placeholder { height: 14rem; background: #e9ecef; min-height: 14rem; }
.na-card-new {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--template-gold);
    color: #000;
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.na-card-body { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; min-height: 150px; }
.na-card-brand { font-size: 0.8rem; color: var(--template-gold); font-weight: 600; margin-bottom: 0.25rem; flex-shrink: 0; }
.na-card-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3; flex-shrink: 0; }
.na-card-title a { color: #1a1a1a; text-decoration: none; }
.na-card-title a:hover { color: var(--template-gold); }
.na-card-desc { font-size: 0.875rem; color: #6c757d; margin-bottom: 0.5rem; flex-grow: 1; line-height: 1.4; }
.na-card-btn {
    width: auto;
    min-width: 120px;
    background: #000;
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border: none;
    transition: background 0.2s, color 0.2s;
    margin-top: auto !important;
    margin-bottom: 0;
    align-self: flex-start;
}
.na-card-btn:hover { background: var(--template-gold); color: #000; }

/* Newsletter */
.na-newsletter {
    background: linear-gradient(90deg, #000 0%, #1a1a1a 100%);
    color: #fff;
}
.na-newsletter-icon { font-size: 3rem; color: var(--template-gold); display: block; margin-bottom: 1rem; }
.na-newsletter-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin-bottom: 0.75rem; }
.na-newsletter-lead {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1.5rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}
.na-newsletter-form.max-w-md { max-width: 28rem; }
.na-newsletter-input {
    padding: 0.75rem 1rem;
    border: 2px solid transparent;
}
.na-newsletter-input:focus { border-color: var(--template-gold); outline: none; box-shadow: 0 0 0 3px rgba(255,215,0,0.2); }
.na-newsletter-btn {
    background: var(--template-gold);
    color: #000;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border: none;
    white-space: nowrap;
    transition: background 0.2s;
}
.na-newsletter-btn:hover { background: #FFC700; color: #000; }

/* Products page: category title (Montserrat, medium) */
.products-category-title {
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 1.85rem;
}

/* Products page: sidebar with category list */
.products-sidebar {
    position: sticky;
    top: 6rem;
    align-self: start;
}
.products-sidebar-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.products-sidebar-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--template-gold);
    color: #1a1a1a;
}
.products-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.products-sidebar-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: #333;
    text-decoration: none;
    border-radius: 0.35rem;
    font-size: 0.9375rem;
    transition: background 0.2s, color 0.2s;
}
.products-sidebar-link:hover {
    background: rgba(0,0,0,0.06);
    color: #000;
}
.products-sidebar-link.active {
    background: #000;
    color: var(--template-gold);
    font-weight: 600;
}
.products-sidebar-link.active:hover {
    background: #1a1a1a;
    color: var(--template-gold);
}

/* On small screens hide sticky sidebar to prevent it appearing behind product cards while scrolling */
@media (max-width: 991.98px) {
    .products-sidebar {
        display: none;
    }
}

/* Product cards (product listing) */
.product-card, .category-card {
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}
.product-card:hover, .category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
/* Featured Products: align title, description and View Details button across cards */
.product-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 200px;
}
.index-featured-section .product-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 150px;
}
.index-featured-section .product-card .card-title,
.index-featured-section .product-card .card-text,
.index-featured-section .product-card .small {
    flex-shrink: 0;
}
.index-featured-section .product-card .card-text {
    flex-grow: 1;
    margin-bottom: 0.5rem;
}
.index-featured-section .product-card .btn,
.index-featured-section .product-card a[class*="btn"] {
    margin-top: auto !important;
    margin-bottom: 0;
}
.product-card .card-body .card-title {
    flex-shrink: 0;
    margin-bottom: 0.25rem;
}
.product-card .card-body .card-text,
.product-card .card-body .small.text-muted {
    flex-shrink: 0;
}
.product-card .card-body .card-text {
    min-height: 4.2em;
    margin-bottom: 0;
}
.product-card .card-body .btn {
    margin-top: auto;
    flex-shrink: 0;
    width: fit-content;
    max-width: 100%;
}
/* Featured Products & product listing: full image visible, no cropping */
.product-card .card-img-top {
    height: 200px;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
    padding: 1rem;
    box-sizing: border-box;
}
/* Ensure featured products images are fully visible */
.index-featured-section .product-card .card-img-top {
    height: 280px;
    min-height: 280px;
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff !important;
}
.category-card .card-img-top {
    height: 180px;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
}

/* WhatsApp floating button - improved styling */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 64px;
    height: 64px;
    background: var(--whatsapp-green);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    font-size: 32px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.5);
    z-index: 999;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-float:hover {
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.6);
}

/* WhatsApp floating button ripple effect */
.whatsapp-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.6);
    box-sizing: border-box;
    animation: whatsapp-ripple 1.6s infinite ease-out;
    transform-origin: center;
}

.whatsapp-float::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.4);
    box-sizing: border-box;
    animation: whatsapp-ripple 1.6s infinite ease-out;
    animation-delay: 0.8s;
    transform-origin: center;
}

.whatsapp-float i {
    position: relative;
    z-index: 1;
}

@keyframes whatsapp-ripple {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    70% {
        transform: scale(2.1);
        opacity: 0;
    }
    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

/* Product gallery – main image with zoom on hover */
.product-gallery-zoom-wrap {
    overflow: hidden;
    border-radius: 0.375rem;
    background: #f8f9fa;
}
.product-gallery-zoom-wrap .product-gallery-main {
    display: block;
    transition: transform 0.35s ease;
}
.product-gallery-zoom-wrap:hover .product-gallery-main {
    transform: scale(1.08);
}
.product-gallery-main {
    max-height: 400px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 0.375rem;
}
.product-gallery-thumbs img {
    height: 60px;
    width: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 0.25rem;
}
.product-gallery-thumbs img.active, .product-gallery-thumbs img:hover {
    border-color: var(--brand-primary);
}

/* Specs table */
.specs-table th {
    width: 40%;
    background: #f8f9fa;
}

/* ----- Product details page: reference font and reduced sizes ----- */
.product-details-page {
    font-family: Arial, Helvetica, sans-serif;
}
.product-details-page .product-detail-title {
    font-size: 1.4rem;
    font-weight: 550;
    line-height: 1.35;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-primary);
}
.product-details-page .product-detail-meta {
    font-size: 0.875rem;
    font-weight: 400;
}
.product-details-page .product-detail-short-desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #333;
    margin-bottom: 1rem;
}
.product-details-page .product-detail-desc-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    border-left: 3px solid #dc3545;
}
.product-details-page .product-detail-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #333;
}
.product-details-page .product-detail-desc p {
    margin-bottom: 0.5rem;
}
.product-details-page .product-detail-desc p:last-child {
    margin-bottom: 0;
}
.product-details-page .product-detail-inquiry-btn {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.5rem 1.25rem;
}
.product-details-page .product-detail-specs-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
}
.product-details-page .product-detail-specs-table,
.product-details-page .product-detail-specs-table th,
.product-details-page .product-detail-specs-table td {
    font-size: 0.9rem;
    font-weight: 500;
}
.product-details-page .product-detail-specs-table th {
    background: #f8f9fa;
}
.product-details-page .breadcrumb {
    font-size: 0.875rem;
}

/* ========== Product detail page (from ProductDetailPage.tsx) ========== */
body.template-fullwidth.product-details-page-body,
body.template-fullwidth.product-details-page-body main {
    background-color: #ffffff !important;
}
/* Remove white space and black strip: hide brand strip; no body padding, breadcrumb provides space for fixed header */
body.product-details-page-body main > .brand-strip.brand-strip-template {
    display: none !important;
}
body.template-fullwidth.product-details-page-body {
    padding-top: 0 !important;
}
body.product-details-page-body .pd-breadcrumb {
    padding-top: 112px;
}
@media (min-width: 768px) {
    body.product-details-page-body .pd-breadcrumb {
        padding-top: 132px;
    }
}
@media (min-width: 992px) {
    body.product-details-page-body .pd-breadcrumb {
        padding-top: 178px;
    }
}
.pd-breadcrumb {
    background: #fff;
    border-bottom: 2px solid #dee2e6;
}
.pd-breadcrumb-inner {
    font-size: 0.875rem;
    color: #6c757d;
}
.pd-breadcrumb-inner a {
    color: #6c757d;
    text-decoration: none;
}
.pd-breadcrumb-inner a:hover { color: var(--template-gold); }
.pd-breadcrumb-sep { margin: 0 0.35rem; }
.pd-breadcrumb-current { color: #1a1a1a; font-weight: 700; }

.pd-gallery-main-wrap { background: #fff; padding: 1rem; }
.pd-gallery-main-group {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.35rem;
    padding: 1.5rem 1rem;
}
.pd-gallery-brand-logo {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 0.35rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    padding: 0.35rem;
    box-sizing: border-box;
}
.pd-gallery-brand-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
@media (max-width: 767.98px) {
    .pd-gallery-main-group .pd-gallery-brand-logo {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 3.25rem;
        height: 3.25rem;
        padding: 0.25rem;
    }
}
.pd-gallery-main {
    width: 100%;
    height: auto;
    max-height: 24rem;
    object-fit: contain;
    display: block;
    box-sizing: border-box;
}
.pd-gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}
.pd-gallery-main-group:hover .pd-gallery-btn { opacity: 1; }
.pd-gallery-btn:hover { background: var(--template-gold); color: #000; }
.pd-gallery-prev { left: 1rem; }
.pd-gallery-next { right: 1rem; }
.pd-gallery-counter {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.pd-thumb {
    width: 100%;
    padding: 0.25rem;
    border: 2px solid #dee2e6;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.pd-thumb:hover { border-color: var(--template-gold); }
.pd-thumb.active { border-color: var(--template-gold); background: rgba(255,215,0,0.1); }
.pd-thumb img { width: 100%; height: 4rem; object-fit: contain; object-position: center; display: block; background: #f8f9fa; }
.pd-gallery-placeholder {
    height: 20rem;
    background: #333;
    border-radius: 0.25rem;
}

.pd-brand { font-size: 1.5rem; font-weight: 700; color: var(--template-gold); }
.pd-sku { font-size: 0.875rem; color: #6c757d; }
.pd-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin-bottom: 1rem; color: #1a1a1a; }
.pd-price-box {
    background: #000;
    color: #fff;
    padding: 1.5rem;
    border-left: 4px solid var(--template-gold);
    margin-bottom: 1.5rem;
}
.pd-price-lead { color: rgba(255,255,255,0.85); }
.pd-btn-enquire {
    display: inline-block;
    margin-top: 0.75rem;
    background: var(--template-gold);
    color: #000;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border: none;
    text-decoration: none;
    transition: background 0.2s;
}
.pd-btn-enquire:hover { background: #FFC700; color: #000; }
.pd-short-desc { font-size: 1rem; line-height: 1.6; color: #333; margin-bottom: 1.5rem; }

.pd-btn-primary {
    flex: 1;
    min-width: 10rem;
    background: var(--template-gold);
    color: #000;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.pd-btn-primary:hover { background: #FFC700; color: #000; }
.pd-btn-outline {
    border: 2px solid var(--template-gold);
    color: #000;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color 0.2s, background 0.2s;
}
.pd-btn-outline:hover { background: var(--template-gold); color: #000; }
.pd-btn-outline-gray {
    border: 2px solid #dee2e6;
    color: #333;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color 0.2s;
}
.pd-btn-outline-gray:hover { border-color: var(--template-gold); }

.pd-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #fff;
    border: 2px solid #dee2e6;
    height: 100%;
    transition: border-color 0.2s;
}
.pd-feature-card:hover { border-color: var(--template-gold); }
.pd-feature-icon { font-size: 1.5rem; color: var(--template-gold); flex-shrink: 0; }
.pd-feature-title { font-weight: 700; color: #1a1a1a; }
.pd-feature-desc { font-size: 0.875rem; color: #6c757d; }

.pd-tabs-wrap { background: #fff; }
.pd-tabs { border-color: #dee2e6 !important; }
.pd-tabs .nav-link.pd-tab {
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    color: #6c757d;
    border: none;
    border-bottom: 4px solid transparent;
    background: transparent;
    transition: all 0.2s;
}
.pd-tabs .nav-link.pd-tab:hover { color: #1a1a1a; background: #f8f9fa; }
.pd-tabs .nav-link.pd-tab.active {
    background: var(--template-gold);
    color: #000;
    border-bottom-color: #000;
}
.pd-tab-content { min-height: 8rem; }
.pd-tab-heading { font-size: 1.5rem; font-weight: 700; color: #1a1a1a; }
.pd-desc-content { font-size: 1rem; line-height: 1.7; color: #333; }
.pd-desc-content p { margin-bottom: 0.75rem; }
.pd-specs-table th { background: #f8f9fa; font-weight: 600; }
.pd-specs-table th, .pd-specs-table td { padding: 0.6rem 0.75rem; }

.pd-related-title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; color: #1a1a1a; }
.pd-related-card {
    background: #fff;
    border: 2px solid #dee2e6;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pd-related-card:hover { border-color: var(--template-gold); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.pd-related-img-wrap { 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; 
    padding: 1rem;
    min-height: 14rem;
    height: 14rem;
    flex-shrink: 0;
    background: #ffffff;
}
.pd-related-img {
    max-width: 100%;
    max-height: 12rem;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s;
}
.pd-related-img-ph {
    background: #e9ecef; 
    width: 100%;
    height: 12rem;
    min-height: 12rem;
    max-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-related-card:hover .pd-related-img { transform: scale(1.05); }
.pd-related-body { 
    padding: 1rem; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    min-height: 0;
}
.pd-related-brand { 
    font-size: 0.8rem; 
    font-weight: 700; 
    color: var(--template-gold); 
    margin-bottom: 0.25rem;
    min-height: 1.2rem;
}
.pd-related-name { 
    font-size: 1rem; 
    font-weight: 600; 
    margin-bottom: 0.75rem; 
    line-height: 1.3;
    min-height: 2.6rem;
    display: flex;
    align-items: flex-start;
}
.pd-related-name a { color: #1a1a1a; text-decoration: none; }
.pd-related-name a:hover { color: var(--template-gold); }
.pd-related-btn {
    margin-top: auto;
    width: 100%;
    background: #000;
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: none;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, color 0.2s;
}
.pd-related-btn:hover { background: var(--template-gold); color: #000; }

/* ----- Download page: reduced, consistent font sizes ----- */
.download-page {
    font-size: 0.9375rem;
}
.download-page .breadcrumb {
    font-size: 0.8125rem;
}
.download-page .download-page-title {
    font-size: 1.25rem;
    font-weight: 600;
}
.download-page .download-page-intro {
    font-size: 0.9375rem;
    line-height: 1.5;
}
.download-page .download-page-search {
    font-size: 0.9375rem;
}
.download-page .download-page-search-btn {
    font-size: 0.9375rem;
}
/* Download page: search bar and button stacked, center aligned */
.download-page-search-form {
    display: flex;
    justify-content: center;
}
.download-page-search-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 400px;
}
.download-page-search-inner .download-page-search-input {
    width: 100%;
    text-align: center;
}
.download-page-search-inner .download-page-search-btn {
    min-width: 140px;
}
.download-page .table,
.download-page .table th,
.download-page .table td {
    font-size: 0.875rem;
}
.download-page .alert {
    font-size: 0.875rem;
}
.download-page .btn-sm {
    font-size: 0.8125rem;
}

/* ----- Contact page: map + form alignment (no overlap) ----- */
/* Contact page: TEL, EMAIL, ADDRESS with yellow circular icons */
.contact-info-icons-row {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 1.5rem;
}
.contact-info-icon-card {
    padding: 0.5rem;
}
.contact-info-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background-color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.contact-info-icon {
    font-size: 1.75rem;
    color: #1a1a1a;
}
.contact-info-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #2d2d2d;
    margin-bottom: 0.35rem;
}
.contact-info-value {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}
.contact-info-value a:hover {
    color: var(--brand-primary-dark);
}

.contact-page-row .contact-left,
.contact-page-row .contact-right {
    min-width: 0;
}
.map-embed-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 0.375rem;
    border: 1px solid rgba(0,0,0,0.1);
}
.map-embed-wrap iframe {
    width: 100% !important;
    max-width: 100%;
    height: 280px;
    display: block;
    border: none;
}
/* Contact page: WhatsApp button below map with yellow/black theme */
.contact-whatsapp-btn-wrap {
    text-align: center;
}
.contact-whatsapp-btn {
    background-color: var(--template-gold) !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.375rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s, color 0.2s, transform 0.2s !important;
    width: auto;
    max-width: 100%;
}
.contact-whatsapp-btn:hover {
    background-color: #000000 !important;
    color: var(--template-gold) !important;
    border-color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.contact-whatsapp-btn i {
    font-size: 1.25rem;
}

/* ----- Site footer (3 divisions) ----- */
.site-footer {
    background: #1a1a1a;
    color: #fff;
    margin-top: 3rem;
    font-family: var(--font-family-base);
}
.site-footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s, opacity 0.2s;
}
.site-footer a:hover {
    color: var(--brand-primary);
}

/* Template footer: black, gold top border, 4 columns */
.site-footer-template {
    background: #000 !important;
    border-top: 4px solid var(--template-gold);
    margin-top: 3rem;
}
.site-footer-template .footer-heading {
    color: var(--template-gold) !important;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: none;
}
.site-footer-template .footer-tagline,
.site-footer-template .footer-contact-value {
    color: var(--elegant-gray-400) !important;
}
.site-footer-template .footer-links a,
.site-footer-template .footer-contact-link {
    color: var(--elegant-gray-400) !important;
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer-template .footer-links a:hover,
.site-footer-template .footer-contact-link:hover {
    color: var(--template-gold) !important;
}
.site-footer-template .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.site-footer-template .footer-social-link:hover {
    background: var(--template-gold);
    color: #000;
}
.site-footer-template .footer-bottom {
    border-top-color: var(--elegant-gray-800) !important;
    text-align: left;
}
.site-footer-template .footer-bottom-link {
    color: var(--elegant-gray-400) !important;
    text-decoration: none;
}
.site-footer-template .footer-bottom-link:hover {
    color: var(--template-gold) !important;
}
/* Remove white space after footer: root and body background black so gap is not white */
html {
    background-color: #000 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
body,
body.template-fullwidth,
body.template-fullwidth.index-page,
body.template-fullwidth.about-page,
body.template-fullwidth.contact-page,
body.template-fullwidth.category-page,
body.template-fullwidth.products-page,
body.template-fullwidth.search-page,
body.template-fullwidth.download-page,
body.template-fullwidth.new-arrivals-page,
body.template-fullwidth.product-details-page-body {
    background-color: #000 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Main keeps its own background so content area stays white/light where needed */
body.template-fullwidth.index-page > main,
body.template-fullwidth.about-page > main,
body.template-fullwidth.contact-page > main,
body.template-fullwidth.category-page > main,
body.template-fullwidth.products-page > main,
body.template-fullwidth.search-page > main,
body.template-fullwidth.download-page > main,
body.template-fullwidth.new-arrivals-page > main,
body.template-fullwidth.product-details-page-body > main {
    background-color: #ffffff !important;
}
.site-footer,
.site-footer-template,
footer.site-footer,
footer.site-footer-template {
    margin-bottom: 0 !important;
}
.site-footer-template .footer-logo-img {
    max-height: 72px;
    width: auto;
}
/* Footer first column: logo only, large */
.site-footer-template .footer-first-col {
    display: flex;
    align-items: center;
}
.site-footer-template .footer-logo-shape-large.footer-logo-shape {
    display: inline-block;
    margin-left: 2rem;
}
.site-footer-template .footer-logo-shape-large .footer-logo-img {
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
}
@media (min-width: 768px) {
    .site-footer-template .footer-logo-shape-large .footer-logo-img {
        max-height: 240px;
    }
}
@media (min-width: 992px) {
    .site-footer-template .footer-logo-shape-large .footer-logo-img {
        max-height: 260px;
    }
}

/* Small screens: footer full-bleed so black background extends to viewport edges (footer is inside main) */
@media (max-width: 991.98px) {
    body.template-fullwidth {
        overflow-x: visible !important;
    }
    main {
        overflow-x: visible !important;
    }
    footer.site-footer,
    footer.site-footer-template,
    .site-footer,
    .site-footer-template {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    .site-footer .container,
    .site-footer-template .container {
        padding-left: calc(50vw - 50% + var(--bs-gutter-x, 1rem)) !important;
        padding-right: calc(50vw - 50% + var(--bs-gutter-x, 1rem)) !important;
    }
}
/* Mobile: footer container uses gutter padding for alignment (footer itself is full-bleed); center footer elements; compact layout */
@media (max-width: 767.98px) {
    .site-footer .container,
    .site-footer-template .container {
        padding-left: calc(50vw - 50% + var(--bs-gutter-x, 1rem)) !important;
        padding-right: calc(50vw - 50% + var(--bs-gutter-x, 1rem)) !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .site-footer-template .row > .col {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .site-footer-template .footer-first-col {
        justify-content: center;
    }
    .site-footer-template .footer-logo-shape-large.footer-logo-shape {
        margin-left: 0;
        margin-top: 1.25rem;
    }
    .site-footer-template .footer-logo-shape-large .footer-logo-img {
        max-height: 160px !important;
    }
    /* Quick Links & Categories: single row with | separator for compact footer height */
    .site-footer-template .footer-links,
    .site-footer .footer-links {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        row-gap: 0.25rem;
    }
    .site-footer-template .footer-links li,
    .site-footer .footer-links li {
        display: inline;
        margin-bottom: 0;
    }
    .site-footer-template .footer-links li:not(:last-child)::after,
    .site-footer .footer-links li:not(:last-child)::after {
        content: ' \007C ';
        color: var(--elegant-gray-400, rgba(255,255,255,0.5));
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
    .site-footer-template .footer-heading,
    .site-footer .footer-heading {
        margin-bottom: 0.5rem !important;
        font-size: 0.95rem !important;
    }
    .site-footer-template .footer-links a,
    .site-footer .footer-links a {
        font-size: 0.85rem;
    }
    .site-footer-template .footer-contact {
        align-items: center;
    }
    .site-footer-template .footer-contact li {
        justify-content: center;
    }
    .site-footer-template .footer-contact li {
        margin-bottom: 0.35rem !important;
    }
    .site-footer-template .footer-bottom,
    .site-footer .footer-bottom {
        margin-top: 1rem !important;
        padding-top: 1rem !important;
    }
}

/* Footer row: align all three divisions the same (top-aligned, equal height) */
.site-footer .row {
    align-items: start;
}

/* Division 1: Logo centered in first column */
.site-footer .row .col-lg-4:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.site-footer .row .col-lg-4:first-child > a {
    display: block;
    width: 100%;
}
.footer-logo-wrap {
    background: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    display: inline-block;
}
/* Footer logo: fits first div, centered */
.footer-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    object-position: center center;
}
.footer-newsletter-text {
    font-size: 0.95rem;
    max-width: 280px;
}
.footer-newsletter-input {
    background: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    color: #1a1a1a;
    max-width: 320px;
}
.footer-newsletter-input::placeholder {
    color: #6c757d;
}
.footer-newsletter-btn {
    background: var(--brand-primary);
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    border: none;
    max-width: 320px;
    padding: 0.6rem 1rem;
}
.footer-newsletter-btn:hover {
    background: var(--brand-primary-dark);
    color: #1a1a1a;
}

/* Division 2: Product categories */
.footer-heading {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    margin-bottom: 1rem;
}
.footer-links li {
    margin-bottom: 0.4rem;
}
.footer-links a {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
}
.footer-links a:hover {
    color: var(--brand-primary);
}

/* Division 3: Contact details */
.footer-contact li {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.footer-contact-label {
    display: block;
    font-weight: 700;
    color: var(--brand-primary);
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}
.footer-contact-value {
    color: rgba(255,255,255,0.95);
}
.footer-contact-value a:hover {
    color: var(--brand-primary);
}

/* Footer bottom bar */
.footer-bottom {
    border-top: 1px solid var(--brand-primary);
}

/* ========== Responsive: all screen sizes (large desktop → small mobile) ========== */

/* Table responsive: ensure horizontal scroll on small screens */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive .table {
    margin-bottom: 0;
}

/* Images: scale within container (product cards keep fixed height from .product-card rules) */
img.img-fluid,
.product-gallery-main,
.category-card-img {
    max-width: 100%;
    height: auto;
}
.product-card .card-img-top {
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    padding: 1rem;
    box-sizing: border-box;
}

/* Card titles: prevent long names from breaking layout */
.card-title,
.product-details-page .product-detail-title,
.category-card-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Contact page: map and form stack; map has flexible height */
@media (max-width: 991.98px) {
    .contact-page-row .contact-left {
        order: 2;
    }
    .contact-page-row .contact-right {
        order: 1;
    }
    .map-embed-wrap iframe {
        height: 240px;
    }
}
@media (max-width: 991.98px) {
    /* Tablet responsive styles */
    .product-category-section {
        padding: 2rem 0;
    }
    .new-arrivals-section {
        padding: 1.75rem 1.25rem;
    }
    .company-profile-section {
        padding: 2rem 0;
    }
    .company-profile-section .row {
        flex-direction: column;
    }
    .company-profile-section .col-lg-5 {
        margin-bottom: 2rem;
    }
    .index-featured-section {
        padding: 2rem 0;
    }
}

@media (max-width: 767.98px) {
    .brand-strip-tagline,
    .index-brand-tagline {
        font-size: 0.875rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    /* Contact page: no body padding; brand strip top padding = no gap after header */
    body.template-fullwidth.contact-page {
        padding-top: 0 !important;
        background-color: #ffffff !important;
    }
    body.template-fullwidth.contact-page main {
        background-color: #ffffff !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        position: relative;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
        margin-top: 0 !important;
        padding-top: 88px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0.2rem !important;
        border-top: none !important;
        background-color: var(--template-gold) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        top: 0;
        display: block !important;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template .container {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
        max-width: 100%;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template .brand-strip-tagline {
        margin-top: 0;
        margin-bottom: 0;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template + .container,
    body.template-fullwidth.contact-page main .container.py-4,
    body.template-fullwidth.contact-page main > .container:first-of-type,
    body.template-fullwidth.contact-page main > div.container,
    body.template-fullwidth.contact-page main > .brand-strip-template + div.container {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .brand-section-title,
    .index-page .index-section-title {
        font-size: clamp(1.15rem, 4vw, 1.5rem);
        margin-bottom: 1.25rem;
    }
    .product-category-section {
        padding: 1.75rem 0;
    }
    .new-arrivals-section {
        padding: 1.5rem 1rem;
    }
    .company-profile-section {
        padding: 1.75rem 0;
    }
    .index-featured-section {
        padding: 1.75rem 0;
    }
    .product-card,
    .category-card {
        margin-bottom: 1rem;
    }
    .contact-info-icon-wrap {
        width: 56px;
        height: 56px;
    }
    .contact-info-icon {
        font-size: 1.5rem;
    }
    .map-embed-wrap iframe {
        height: 220px;
    }
    .site-footer .container,
    .site-footer-template .container {
        padding-left: calc(50vw - 50% + var(--bs-gutter-x, 1rem)) !important;
        padding-right: calc(50vw - 50% + var(--bs-gutter-x, 1rem)) !important;
    }
    .footer-contact-value {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* ============================================
   ELEGANT HEADER & HERO DESIGN (Black & Yellow Theme)
   ============================================ */

/* Full-width template: fill screen */
.template-fullwidth,
.template-fullwidth .header-template-fullwidth {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}
.header-template-fullwidth {
    background: #000;
    border-bottom: 3px solid var(--template-gold) !important;
    margin-bottom: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
/* Remove gap between header and hero on all screens */
section.hero-elegant-section {
    margin-top: -2px !important;
    padding-top: 0 !important;
    display: block;
}
.header-template-fullwidth + section.hero-elegant-section {
    margin-top: -2px !important;
    padding-top: 0 !important;
}
body.template-fullwidth {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #000 !important;
}
/* Home (index) page: white background so content area extends full width without black bands */
body.template-fullwidth.index-page {
    background-color: #ffffff !important;
}
body.template-fullwidth.index-page > main {
    background-color: #ffffff !important;
}
body.template-fullwidth > main {
    background-color: #000 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.template-fullwidth > main > .brand-strip-template:first-child {
    background-color: var(--template-gold) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    position: relative;
    top: 0;
}

/* Elegant Navbar - Dark theme, no white background */
/* Template: top bar - black, thin white line below, vertical sep between phone/email */
.header-template-top-bar {
    background-color: #000;
    position: relative;
    gap: 1rem;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
/* Line below contact bar: with left/right margin (match reference) */
.header-template-top-bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background: rgba(255,255,255,0.3);
}
.header-template-top-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}
.header-template-top-link:hover {
    color: var(--template-gold);
}
.header-template-top-sep {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.5);
    flex-shrink: 0;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

/* Pin header at top: fixed so it does not scroll with page */
.header-template-fullwidth {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: #000 !important;
    background: #000 !important;
    border-bottom: 3px solid var(--template-gold) !important;
}
body.template-fullwidth {
    padding-top: 108px; /* clear fixed header so first section is fully visible */
    background-color: #000 !important;
}
@media (min-width: 768px) {
    body.template-fullwidth {
        padding-top: 116px;
    }
}
@media (min-width: 992px) {
    body.template-fullwidth {
        padding-top: 136px;
    }
}
/* Index page with hero: no body padding (like about page); hero section provides its own top padding so no black gap */
body.template-fullwidth:has(> section.hero-elegant-section) {
    padding-top: 0 !important;
}
section.hero-elegant-section.hero-template {
    padding-top: 108px !important; /* clear fixed header */
}
@media (min-width: 768px) {
    section.hero-elegant-section.hero-template {
        padding-top: 132px !important;
    }
}
@media (min-width: 992px) {
    section.hero-elegant-section.hero-template {
        padding-top: 178px !important;
    }
}
body.template-fullwidth main {
    background-color: #000 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.template-fullwidth main:first-child {
    margin-top: 0 !important;
}
body.template-fullwidth main > .brand-strip-template:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    position: relative;
    top: 0;
    z-index: 1;
    background-color: var(--template-gold) !important;
}
/* Contact page: ensure no white space between header and brand strip */
/* Contact page: no body padding (like index); brand strip provides top padding so no gap after header */
body.template-fullwidth.contact-page {
    padding-top: 0 !important;
    background-color: #ffffff !important;
}
body.template-fullwidth.contact-page main {
    background-color: #ffffff !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
    margin-top: 0 !important;
    padding-top: 108px !important;
    padding-bottom: 0.4rem !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    position: relative;
    top: 0;
    background-color: var(--template-gold) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
}
@media (min-width: 768px) {
    body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
        padding-top: 116px !important;
    }
}
@media (min-width: 992px) {
    body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
        padding-top: 136px !important;
    }
}
body.template-fullwidth.contact-page main > .brand-strip-template + .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.template-fullwidth.contact-page .header-template-fullwidth {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
body.template-fullwidth.contact-page .header-template-fullwidth + main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Ensure brand strip fills the gap from padding-top */
body.template-fullwidth.contact-page main {
    position: relative;
    margin-top: 0 !important;
}
body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
    position: relative;
    top: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Mobile: ensure no gap */
@media (max-width: 767.98px) {
    body.template-fullwidth.contact-page {
        padding-top: 0 !important;
        background-color: #ffffff !important;
    }
    body.template-fullwidth.contact-page main {
        margin-top: 0 !important;
        padding-top: 0 !important;
        background-color: #ffffff !important;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
        margin-top: 0 !important;
        padding-top: 108px !important;
        margin-bottom: 0 !important;
    }
body.template-fullwidth.contact-page main > .brand-strip-template + .container,
body.template-fullwidth.contact-page main .container.py-4,
body.template-fullwidth.contact-page main > .container:first-of-type,
body.template-fullwidth.contact-page main > div.container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}
}
@media (min-width: 768px) {
    body.template-fullwidth {
        padding-top: 132px;
        background-color: #000 !important;
    }
    body.template-fullwidth.contact-page {
        padding-top: 0 !important;
        background-color: #ffffff !important;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
        margin-top: 0 !important;
        padding-top: 132px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.template-fullwidth.download-page {
        padding-top: 0 !important;
    }
}
@media (min-width: 992px) {
    body.template-fullwidth {
        padding-top: 178px;
        background-color: #000 !important;
    }
    body.template-fullwidth.contact-page {
        padding-top: 0 !important;
        background-color: #ffffff !important;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
        margin-top: 0 !important;
        padding-top: 178px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.template-fullwidth.download-page {
        padding-top: 0 !important;
    }
}

/* Override template black: About page + Company profile (Why Choose Us) section = white */
body.template-fullwidth.about-page {
    background-color: #ffffff !important;
}
body.template-fullwidth.about-page main {
    background-color: #ffffff !important;
}
/* Products page: white background, no white space after header */
body.template-fullwidth.products-page {
    background-color: #ffffff !important;
}
body.template-fullwidth.products-page main {
    background-color: #ffffff !important;
    padding-top: 0 !important;
}
body.template-fullwidth.products-page main > .brand-strip-template:first-child {
    display: none;
}
body.template-fullwidth.products-page main > .container {
    padding-top: 0.75rem !important;
}
/* Search page: same design as products page – no white space after header */
body.template-fullwidth.search-page {
    background-color: #ffffff !important;
}
body.template-fullwidth.search-page main {
    background-color: #ffffff !important;
    padding-top: 0 !important;
}
body.template-fullwidth.search-page main > .brand-strip-template:first-child {
    display: none;
}
body.template-fullwidth.search-page main > .container {
    padding-top: 0.75rem !important;
}
/* Search page: same product card styling as products page */
body.template-fullwidth.search-page .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
body.template-fullwidth.search-page .product-card > a {
    flex-shrink: 0;
}
body.template-fullwidth.search-page .product-card .card-img-top {
    padding: 1rem;
    box-sizing: border-box;
    background-color: #ffffff;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    transition: opacity 0.2s;
    height: 280px;
    min-height: 280px;
    flex-shrink: 0;
}
body.template-fullwidth.search-page .product-card a:hover .card-img-top {
    opacity: 0.9;
}
body.template-fullwidth.search-page .product-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1rem;
    min-height: 0;
}
body.template-fullwidth.search-page .product-card .card-title {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
    margin-top: auto;
}
body.template-fullwidth.search-page .product-card .small.text-muted {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}
body.template-fullwidth.search-page .product-card .card-text {
    flex-shrink: 0;
    margin-bottom: 1rem;
}
body.template-fullwidth.search-page .product-card .btn {
    flex-shrink: 0;
    margin-top: 0;
}
/* Category page: white background, no white space after header */
body.template-fullwidth.category-page {
    background-color: #ffffff !important;
}
body.template-fullwidth.category-page main {
    background-color: #ffffff !important;
    padding-top: 0 !important;
}
body.template-fullwidth.category-page main > .brand-strip-template:first-child {
    display: none;
}
body.template-fullwidth.category-page main > .container {
    padding-top: 0.75rem !important;
}
body.category-page .product-category-section .category-card-ref .card-body {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    gap: 0.25rem;
}
/* Contact page: white background - ensure no gaps */
body.template-fullwidth.contact-page main > .container:first-of-type,
body.template-fullwidth.contact-page main > .brand-strip-template + .container,
body.template-fullwidth.contact-page main .container.py-4,
body.template-fullwidth.contact-page main > div.container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
    background-color: #ffffff !important;
}
/* Override Bootstrap py-4 utility class for contact page */
body.template-fullwidth.contact-page main .container.py-4 {
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
}
/* Additional override for contact page container - ensure no white space */
body.template-fullwidth.contact-page main > div.container.py-4 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.template-fullwidth.contact-page main > .brand-strip-template + div.container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.template-fullwidth.contact-page .header-template-fullwidth {
    border-bottom: 3px solid var(--template-gold) !important;
}
/* Download page: no body padding (like index/contact); main provides top padding so no black strip after header on small/large screens */
body.template-fullwidth.download-page {
    padding-top: 0 !important;
    background-color: #000 !important;
}
body.template-fullwidth.download-page main {
    background-color: #ffffff !important;
    padding-top: 88px !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 0%;
}
@media (min-width: 768px) {
    body.template-fullwidth.download-page main {
        padding-top: 132px !important;
    }
}
@media (min-width: 992px) {
    body.template-fullwidth.download-page main {
        padding-top: 178px !important;
    }
}
/* Push footer to bottom on large screens when content is short */
body.template-fullwidth.download-page main > .container.download-page {
    flex: 1 1 auto;
    min-height: 0;
}
body.template-fullwidth.download-page main > .brand-strip-template:first-child {
    display: none;
}
body.template-fullwidth.download-page main > .container {
    padding-top: 0.75rem !important;
}
/* Footer sticks to bottom of main so no white space below it on download page */
body.template-fullwidth.download-page main > footer.site-footer,
body.template-fullwidth.download-page main > footer.site-footer-template {
    margin-top: auto !important;
    flex-shrink: 0;
}
/* Contact page: add small padding at top for title */
body.template-fullwidth.contact-page .brand-section-title {
    padding-top: 1rem;
    margin-top: 0.5rem;
}
body.template-fullwidth.contact-page .header-template-fullwidth + main {
    margin-top: 0 !important;
}
/* Add padding around product images on products page */
body.template-fullwidth.products-page .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
body.template-fullwidth.products-page .product-card > a {
    flex-shrink: 0;
}
body.template-fullwidth.products-page .product-card .card-img-top {
    padding: 1rem;
    box-sizing: border-box;
    background-color: #ffffff;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    transition: opacity 0.2s;
    height: 280px;
    min-height: 280px;
    flex-shrink: 0;
}
body.template-fullwidth.products-page .product-card a:hover .card-img-top {
    opacity: 0.9;
}
body.template-fullwidth.products-page .product-card .card-body.products-page-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1rem;
    min-height: 0;
}
body.template-fullwidth.products-page .product-card .card-title {
    flex-shrink: 0;
    margin-bottom: 0em;
    min-height: 2.6em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.template-fullwidth.products-page .product-card .products-page-card-brand {
    flex-shrink: 0;
    margin-bottom: 0.35rem;
    min-height: 1.35em;
}
body.template-fullwidth.products-page .product-card .products-page-card-desc {
    flex-grow: 1;
    min-height: 3.5em;
    margin-bottom: 0;
}
body.template-fullwidth.products-page .product-card .card-body .btn.mt-auto {
    margin-top: auto;
    flex-shrink: 0;
}

/* Pagination - Black and Yellow Theme */
.pagination {
    margin-bottom: 0;
}
.pagination .page-item {
    margin: 0 0.25rem;
}
.pagination .page-link {
    background-color: #000000;
    border: 2px solid var(--template-gold);
    color: var(--template-gold);
    padding: 0.5rem 1rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
}
.pagination .page-link:hover {
    background-color: var(--template-gold);
    border-color: var(--template-gold);
    color: #000000;
    transform: translateY(-2px);
}
.pagination .page-item.active .page-link {
    background-color: var(--template-gold);
    border-color: var(--template-gold);
    color: #000000;
    font-weight: 700;
}
.pagination .page-item.active .page-link:hover {
    background-color: var(--template-gold-hover);
    border-color: var(--template-gold-hover);
    color: #000000;
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.5);
    outline: none;
}
.index-page-template .company-profile-section,
.company-profile-section {
    background-color: #ffffff !important;
}

.navbar-elegant {
    background-color: var(--elegant-black) !important;
    background: var(--elegant-black) !important;
    padding: 0.5rem 0;
    border-bottom: none !important;
    position: relative;
    top: 0;
    z-index: 1050;
    margin-bottom: 0 !important;
}
@media (min-width: 992px) {
    .navbar-elegant {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    .navbar-elegant .navbar-elegant-content-wrap {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
        gap: 2rem;
    }
    .navbar-elegant .header-logo-shape {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        flex: 0 0 auto;
        margin-left: 1rem;
        margin-right: 0;
        min-width: 0;
    }
    .navbar-elegant .navbar-elegant-container {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 0;
        overflow: visible;
    }
    .navbar-elegant-inner {
        margin-left: auto;
        min-width: 0;
        flex-shrink: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
    }
}
.navbar-elegant,
.navbar-elegant .container,
.navbar-elegant .container > *,
.navbar-elegant .navbar-collapse,
.navbar-elegant .navbar-nav,
.navbar-elegant .navbar-brand-elegant,
.navbar-elegant .navbar-actions-elegant,
.navbar-elegant .navbar-toggler {
    background-color: transparent !important;
    background: transparent !important;
}
/* Override Bootstrap default navbar background */
.navbar {
    background-color: transparent;
}
.navbar-elegant.navbar {
    background-color: var(--elegant-black) !important;
    background: var(--elegant-black) !important;
    position: relative;
    top: 0;
    overflow: visible;
    min-height: 52px;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}
@media (min-width: 992px) {
    .navbar-elegant.navbar {
        min-height: 100px;
        padding-top: 0.35rem;
        padding-bottom: 0.75rem;
    }
}
/* Navbar container: logo left, all other elements right (reference layout) */
.navbar-elegant-container {
    position: relative;
    overflow: visible;
    padding-left: 2rem;
    max-width: 100%;
    min-width: 0;
}
/* Header logo: image + company name (template) */
.header-logo-shape {
    width: auto;
    max-width: 320px;
    min-height: 0;
    height: auto;
    background: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    flex-shrink: 0;
    text-decoration: none !important;
    z-index: 20;
    padding: 0.15rem 1rem 0.15rem 0;
    box-sizing: border-box;
}
.header-logo-shape:hover {
    background: none;
    background-color: transparent;
}
.header-logo-text {
    font-size: 1rem;
    font-weight: 700;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: normal;
    max-width: 220px;
    font-family: var(--font-family-base);
}
.header-company-name { font-size: inherit; font-weight: 700; }
.header-company-name-ar {
    font-size: 0.85em;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.15rem;
}
@media (min-width: 1200px) {
    .header-logo-text {
        font-size: 1.15rem;
        max-width: 280px;
    }
}
.header-logo-shape .logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
}
.header-logo-shape .header-logo-img,
.header-logo-shape-mobile .header-logo-img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.header-logo-shape .header-logo-img {
    max-height: 90px;
    max-width: 175px;
}
.header-logo-shape .header-logo-text-img,
.header-logo-shape-mobile .header-logo-text-img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    max-height: 90px;
    display: block;
    vertical-align: middle;
    margin-top: 0.75rem;
    align-self: flex-end;
    margin-bottom: 0;
    margin-left: 0.15rem;
}
@media (min-width: 992px) {
    .header-logo-shape .header-logo-img {
        max-height: 112px;
        max-width: 225px;
    }
    .header-logo-shape .header-logo-text-img {
        max-height: 112px;
    }
}
@media (min-width: 1200px) {
    .header-logo-shape .header-logo-img {
        max-height: 125px;
        max-width: 250px;
    }
    .header-logo-shape .header-logo-text-img {
        max-height: 125px;
    }
}
.header-logo-shape-mobile .header-logo-img {
    max-height: 80px;
    max-width: 100%;
    width: auto;
}
.header-logo-shape-mobile .header-logo-text-img {
    max-height: 80px;
    height: auto;
    object-fit: contain;
}
.header-logo-shape-mobile {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-width: min(240px, 62vw);
    height: 80px;
    margin: 0;
    background: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    text-decoration: none;
    z-index: 2;
}
.header-logo-shape-mobile:hover {
    background: none;
    background-color: transparent;
}
.header-logo-shape-mobile .logo-text {
    transform: skewX(8deg);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}
/* Footer logo – no background, image only */
.footer-logo-shape {
    width: auto;
    height: auto;
    background: none;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    margin-bottom: 1rem;
}
.footer-logo-shape:hover {
    background: none;
    background-color: transparent;
}
.footer-logo-shape .logo-text {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
}
.footer-logo-shape .footer-logo-img {
    max-width: 100%;
    max-height: 125px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Logo fixed at left – elegant design with enhanced styling */
.navbar-brand-elegant {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    margin: 0;
    padding: 0.5rem 1.25rem 0.5rem 0.75rem;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 0 0.5rem 0.5rem 0;
    background: linear-gradient(135deg, rgba(255, 200, 45, 0.05) 0%, transparent 100%);
    overflow: hidden;
}
/* Animated house icon background with fading gradient */
.logo-house-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 180px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, var(--elegant-yellow) 0%, rgba(26, 26, 26, 0.7) 30%, rgba(26, 26, 26, 0.9) 50%, rgba(26, 26, 26, 0.7) 70%, var(--elegant-yellow) 100%);
    background-size: 300% 300%;
    clip-path: polygon(50% 5%, 10% 30%, 10% 90%, 90% 90%, 90% 30%);
    animation: houseGradientFade 5s ease-in-out infinite;
    filter: blur(6px);
    opacity: 0.55;
    mix-blend-mode: screen;
}
@keyframes houseGradientFade {
    0%, 100% {
        opacity: 0.45;
        background-position: 0% 50%;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.7;
        background-position: 100% 50%;
        transform: translate(-50%, -50%) scale(1.18);
    }
}
.navbar-brand-elegant:hover .logo-house-bg {
    opacity: 0.7;
    filter: blur(4px);
}
.navbar-brand-elegant:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 200, 45, 0.1) 0%, transparent 100%);
}
.logo-elegant {
    height: 110px;
    width: auto;
    object-fit: contain;
    max-width: 380px;
    filter: drop-shadow(0 2px 8px rgba(255, 200, 45, 0.15)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    transition: filter 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 2;
    padding: 0.25rem 0;
    background: transparent;
}
.navbar-brand-elegant:hover .logo-elegant {
    filter: drop-shadow(0 4px 12px rgba(255, 200, 45, 0.3)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
    transform: scale(1.02);
}
/* Nav bar (links + actions) reduced width – does not affect logo */
.navbar-elegant .navbar-collapse {
    flex-grow: 0;
    max-width: 720px;
    width: auto;
}
.navbar-elegant .d-flex.justify-content-between {
    align-items: center;
}
.nav-link-elegant {
    color: var(--elegant-text-light) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem !important;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
@media (min-width: 1200px) {
    .nav-link-elegant {
        font-size: 1rem;
        padding: 0.4rem 1rem !important;
    }
}
@media (min-width: 1400px) {
    .nav-link-elegant {
        font-size: 1.1rem;
        padding: 0.5rem 1.2rem !important;
    }
}
.nav-link-elegant:hover,
.nav-link-elegant.active {
    color: var(--template-gold) !important;
}
.nav-link-elegant .bi-chevron-down {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 0.25rem;
}
/* Desktop: nav links on top, search + Get Quote below; aligned right, search length capped */
.navbar-desktop-row {
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    align-self: center;
    min-height: 0;
    gap: 0.5rem;
    margin-left: 0;
    width: 100%;
    min-width: 0;
    max-width: 560px;
}
.navbar-desktop-row .navbar-desktop-nav {
    flex: 0 1 auto !important;
    margin-left: 0;
    margin-bottom: 0.25rem;
    width: 100% !important;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}
.navbar-desktop-row .navbar-desktop-nav .navbar-nav {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    min-width: 0;
}
@media (min-width: 1200px) {
    .navbar-desktop-row {
        max-width: 640px;
    }
    .navbar-desktop-row .navbar-desktop-nav .navbar-nav {
        gap: 0.5rem;
    }
}
@media (min-width: 1400px) {
    .navbar-desktop-row {
        max-width: 720px;
    }
    .navbar-desktop-row .navbar-desktop-nav .navbar-nav {
        gap: 0.75rem;
    }
}
@media (min-width: 1600px) {
    .navbar-desktop-row {
        max-width: 800px;
    }
}
.navbar-desktop-row .navbar-actions-elegant {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}
.navbar-actions-elegant {
    gap: 0.5rem;
    justify-content: flex-end;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}
.navbar-actions-elegant > .btn-elegant-primary {
    flex: 0 0 auto;
}
.navbar-desktop-row .navbar-desktop-nav .navbar-nav .nav-item {
    display: flex;
    align-items: center;
}
/* Navbar search: fills remaining space in actions row so length never exceeds nav bar */
.navbar-search-form {
    flex: 1 1 0;
    min-width: 580px;
    max-width: 280px;
    display: flex;
    gap: 0.25rem;
}
.navbar-search-wrap {
    display: block;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}
.navbar-search-input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.9rem;
    padding: 0.4rem 2.5rem 0.4rem 0.65rem;
    height: 38px;
    border-radius: 0.375rem;
    min-width: 0;
    width: 100%;
}
.navbar-search-submit {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #4b5563;
    padding: 0.25rem;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 0.25rem;
    z-index: 2;
}
.navbar-search-submit i {
    color: inherit;
    display: inline-block;
}
.navbar-search-submit:hover {
    color: var(--template-gold);
}
.navbar-search-submit:focus {
    outline: none;
    color: var(--template-gold);
}
.navbar-search-input::placeholder {
    color: rgba(255,255,255,0.5);
}
.navbar-search-input:focus {
    background: rgba(255,255,255,0.12);
    border-color: var(--template-gold);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(255,215,0,0.2);
}
.navbar-search-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--elegant-text-light);
    padding: 0.4rem 0.6rem;
    height: 38px;
    border-radius: 0.375rem;
    transition: color 0.2s, border-color 0.2s;
}
.navbar-search-btn:hover {
    color: var(--template-gold);
    border-color: var(--template-gold);
}
.navbar-search-form-mobile {
    max-width: 130px;
    gap: 0.2rem;
}
.navbar-search-input-mobile {
    min-width: 0;
    width: 90px;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    height: 34px;
}
.navbar-search-btn-mobile {
    padding: 0.3rem 0.5rem;
    height: 34px;
}
/* Reduced screen: top bar + centered logo (reference layout) */
.navbar-elegant-inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.navbar-mobile-top-bar {
    position: relative;
    width: 100%;
    padding: 0.35rem 0.75rem 0.35rem 0;
    padding-left: min(calc(240px + 1.5rem), 65vw);
    padding-right: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    min-width: 0;
    align-items: center;
    min-height: 92px;
    justify-content: flex-end;
}
/* Hamburger at far right of header (red-marked position) on mobile - override any flex/ms-auto */
.header-template-fullwidth .navbar-mobile-top-bar .navbar-mobile-actions,
.navbar-mobile-top-bar .navbar-mobile-actions {
    position: absolute !important;
    right: 0.75rem !important;
    left: auto !important;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* On mobile only: pin hamburger to viewport right so it never shifts left */
@media (max-width: 991.98px) {
    .header-template-fullwidth .navbar-mobile-top-bar .navbar-mobile-actions {
        position: fixed !important;
        right: 0.75rem !important;
        left: auto !important;
        top: 1.25rem !important;
        transform: none !important;
        z-index: 1031;
    }
}
.navbar-mobile-top-bar .navbar-toggler-elegant {
    width: 44px;
    height: 44px;
    padding: 0.25rem;
}
/* Small screen: reduce container padding and header top/bottom margin */
@media (max-width: 991.98px) {
    .navbar-elegant-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .navbar-elegant,
    .navbar-elegant.navbar {
        padding-top: 0.2rem !important;
        padding-bottom: 0.35rem !important;
    }
    .navbar-mobile-top-bar {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        min-height: 84px;
    }
}
/* Mobile header: compact actions and button so nothing truncates */
.nav-action-link-mobile {
    padding: 0.35rem !important;
    font-size: 1.1rem;
}
.btn-mobile-header {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
}
/* Hide Get Quote in mobile header; shown on desktop only */
@media (max-width: 991.98px) {
    .btn-mobile-header {
        display: none !important;
    }
}
@media (max-width: 380px) {
    .btn-mobile-header {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    .navbar-mobile-actions {
        gap: 0.25rem !important;
    }
}
.navbar-brand-elegant-center {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 0;
    background: rgba(255,255,255,0.06);
    margin: 0;
    position: relative;
    transition: background 0.3s ease;
}
.navbar-brand-elegant-center::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--elegant-yellow) 50%, transparent 100%);
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.navbar-brand-elegant-center:hover {
    background: rgba(255,255,255,0.08);
}
.navbar-brand-elegant-center:hover::before {
    opacity: 0.7;
}
.navbar-brand-elegant-center .logo-elegant {
    height: 72px;
    max-width: 260px;
    filter: drop-shadow(0 2px 6px rgba(255, 200, 45, 0.2)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
    transition: filter 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 2;
}
.navbar-brand-elegant-center .logo-house-bg {
    width: 120px;
    height: 95px;
    opacity: 0.7;
    filter: blur(2.5px);
}
.navbar-brand-elegant-center:hover .logo-elegant {
    filter: drop-shadow(0 3px 10px rgba(255, 200, 45, 0.35)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    transform: scale(1.03);
}
.navbar-brand-elegant-center:hover .logo-house-bg {
    opacity: 0.85;
    filter: blur(2px);
}
.btn-elegant-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}
.navbar-desktop-nav {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
}
.navbar-desktop-nav .navbar-nav {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0.5rem;
}
.navbar-elegant .navbar-nav .nav-item {
    margin: 0;
}
.navbar-elegant .nav-link-elegant {
    white-space: nowrap;
}
@media (min-width: 992px) {
    .navbar-elegant .navbar-desktop-row .nav-link-elegant,
    .navbar-elegant .navbar-nav .nav-link {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }
}
/* Prevent duplicate nav: hide mobile collapse on desktop (Bootstrap overrides d-lg-none) */
@media (min-width: 992px) {
    .navbar-elegant #navbarNavElegant {
        display: none !important;
    }
}
.nav-action-link {
    color: var(--elegant-text-light);
    font-size: 1.1rem;
    padding: 0.5rem;
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
}
.nav-action-link:hover {
    color: var(--template-gold);
}
.cart-link-elegant {
    position: relative;
}
.cart-badge-elegant {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background-color: var(--template-gold);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.btn-elegant-primary {
    background-color: var(--template-gold);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.btn-elegant-primary:hover {
    background-color: var(--template-gold-hover);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,200,45,0.3);
}

/* Force template styles to win over Bootstrap / old ref styles */
.header-template-fullwidth .header-template-top-bar {
    background-color: #000 !important;
    border-bottom: none !important;
}
.header-template-fullwidth .header-template-top-bar::after {
    left: 1.5rem;
    right: 1.5rem;
}
.header-template-fullwidth .navbar-template.navbar-elegant.navbar {
    background-color: #000 !important;
    background: #000 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.header-template-fullwidth {
    border-bottom: 3px solid var(--template-gold) !important;
}
.header-template-fullwidth .navbar-template.navbar-elegant.navbar::after,
.header-template-fullwidth .navbar-template.navbar-elegant.navbar::before {
    display: none !important;
    content: none !important;
}
.header-template-fullwidth .navbar-template.navbar-elegant.navbar,
.header-template-fullwidth .navbar-template.navbar-elegant,
.header-template-fullwidth .navbar-elegant {
    border-bottom: none !important;
    box-shadow: none !important;
}
.header-template-fullwidth .navbar-template .nav-link-elegant,
.header-template-fullwidth .navbar-template .navbar-nav .nav-link {
    color: #fff !important;
    font-family: var(--font-family-base);
}
.header-template-fullwidth .navbar-template .nav-link-elegant:hover,
.header-template-fullwidth .navbar-template .nav-link-elegant.active {
    color: var(--template-gold) !important;
}
.header-template-fullwidth .navbar-template .btn-elegant-primary {
    background-color: var(--template-gold) !important;
    color: #fff !important;
    border-radius: 0.375rem;
    font-family: var(--font-family-base);
}
.header-template-fullwidth .navbar-template .header-logo-shape .header-logo-text,
.header-template-fullwidth .navbar-template .header-logo-text {
    display: block !important;
    visibility: visible !important;
    color: #fff !important;
    font-family: var(--font-family-base);
}
.header-template-fullwidth .navbar-template .header-company-name,
.header-template-fullwidth .navbar-template .header-company-name-ar {
    display: block !important;
    visibility: visible !important;
}

.btn-elegant-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}
.navbar-toggler-elegant {
    border-color: rgba(255,255,255,0.3);
    color: var(--elegant-text-light);
    background-color: transparent !important;
}
.navbar-toggler-elegant:hover,
.navbar-toggler-elegant:focus {
    border-color: var(--elegant-text-light);
    color: var(--elegant-text-light);
    background-color: rgba(255,255,255,0.05) !important;
    box-shadow: none;
}
.navbar-toggler-elegant .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Mobile top bar: keep toggler area black, no white box */
.navbar-mobile-top-bar .navbar-toggler-elegant {
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,0.35);
}
.navbar-mobile-top-bar {
    background-color: transparent !important;
}
.navbar-elegant .dropdown-menu-dark {
    background-color: var(--elegant-dark);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 1060;
}
.navbar-elegant .dropdown-item {
    color: var(--elegant-text-light);
    transition: background-color 0.2s, color 0.2s;
}
.navbar-elegant .dropdown-item:hover {
    background-color: rgba(255,215,0,0.15);
    color: var(--template-gold);
}
/* Desktop: sub-category flyout to the right on hover */
.navbar-elegant .dropdown-menu .dropdown-submenu {
    position: relative;
}
.navbar-elegant .dropdown-menu .dropdown-submenu .submenu-dropdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    margin-left: -1px;
    min-width: 12rem;
    z-index: 1050;
    background-color: var(--elegant-dark);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
    padding: 0.25rem 0;
}
.navbar-elegant .dropdown-menu .dropdown-submenu:hover .submenu-dropdown {
    display: block;
}
.navbar-elegant .dropdown-menu {
    overflow: visible;
    z-index: 1060;
}
.navbar-elegant .dropdown-menu .dropdown-submenu {
    overflow: visible;
}
.navbar-elegant .dropdown-menu .dropdown-submenu .dropdown-toggle-submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar-elegant .dropdown-menu .dropdown-submenu .submenu-arrow {
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.8;
    display: inline-block !important;
    visibility: visible !important;
    flex-shrink: 0;
    color: inherit;
}
.navbar-elegant .dropdown-menu-dark .dropdown-submenu .submenu-arrow {
    color: var(--elegant-text-light);
    opacity: 0.9;
}

/* Elegant Hero Section */
.hero-elegant-section {
    position: relative;
    width: 100%;
    min-height: 85vh;
    min-height: min(85vh, 800px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--elegant-dark);
    box-sizing: border-box;
}
.hero-elegant-body {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.hero-elegant-body .container,
.hero-elegant-body .container-fluid {
    flex: 0 0 auto;
    max-width: 100%;
}

/* Brand grid section below hero: modern trending design */
.brand-grid-section {
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
    padding: 3rem 0;
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
}
/* Rectangle outline to identify the brand section */
.brand-grid-section .container {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* Ensure brand section sits below hero (no overlap on large screens) */
section.hero-elegant-section + section.brand-grid-section {
    margin-top: 0 !important;
}
.brand-grid-heading {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    text-align: center;
    margin-bottom: 1.75rem;
}
.brand-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto;
}
.brand-card {
    flex: 0 0 calc((100% - 1rem) / 2);
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
.brand-card-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 80px;
}
.brand-card-img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.25s ease;
}
.brand-card:hover .brand-card-img {
    transform: scale(1.05);
}
.brand-card-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
}
@media (min-width: 576px) {
    .brand-grid {
        gap: 1.25rem;
    }
    .brand-card {
        flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
    }
    .brand-card {
        min-height: 150px;
        padding: 1.75rem 1.5rem;
    }
    .brand-card-logo {
        min-height: 90px;
    }
    .brand-card-img {
        max-height: 100px;
    }
    .brand-card-label {
        font-size: 0.75rem;
    }
}
@media (min-width: 768px) {
    .brand-grid-section {
        padding: 4rem 0;
    }
    .brand-grid-heading {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }
    .brand-grid {
        gap: 1.5rem;
        max-width: 1100px;
    }
    .brand-card {
        flex: 0 0 calc((100% - 3 * 1.5rem) / 4);
    }
    .brand-card {
        min-height: 180px;
        padding: 2rem 1.5rem;
    }
    .brand-card-logo {
        min-height: 100px;
    }
    .brand-card-img {
        max-height: 110px;
    }
}
@media (min-width: 992px) {
    .brand-grid {
        gap: 1.5rem;
        max-width: 1400px;
    }
    .brand-card {
        flex: 0 0 calc((100% - 4 * 1.5rem) / 5);
        min-height: 160px;
        padding: 1.75rem 1.25rem;
    }
    .brand-card-logo {
        min-height: 90px;
    }
    .brand-card-img {
        max-height: 100px;
    }
}
@media (max-width: 575.98px) {
    .brand-grid-section {
        padding: 2rem 0;
    }
    .brand-grid-heading {
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        margin-bottom: 1.25rem;
    }
    .brand-grid {
        gap: 0.75rem;
    }
    .brand-card {
        flex: 0 0 calc((100% - 0.75rem) / 2);
        min-height: 120px;
        padding: 1rem 0.75rem;
    }
    .brand-card-logo {
        min-height: 70px;
    }
    .brand-card-img {
        max-height: 75px;
    }
    .brand-card-label {
        font-size: 0.65rem;
    }
}

/* Reserve right space on desktop so social strip doesn't overlap content */
.hero-template .hero-elegant-body .container-fluid {
    padding-right: 1rem;
}
@media (min-width: 992px) {
    .hero-template .hero-elegant-body .container-fluid {
        /* Match header right margin (navbar uses px-4 = 1.5rem); row gutter pulls content right so use 2rem for visual match */
        padding-right: 2rem;
    }
}
/* Hero banner carousel: multiple sliding banners */
.hero-banner-carousel-section {
    padding: 0;
}
.hero-banner-carousel-section .hero-banner-carousel,
.hero-banner-carousel-section .carousel-inner {
    height: 100%;
    min-height: 85vh;
    min-height: min(85vh, 800px);
}
.hero-banner-carousel-item {
    position: relative;
    min-height: 85vh;
    min-height: min(85vh, 800px);
    width: 100%;
}
.hero-banner-carousel-item .hero-elegant-bg-wrap,
.hero-banner-carousel-item .hero-elegant-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
/* Subtle gold accent at bottom only (avoids muddy yellow-green tint) */
.hero-banner-carousel-item .hero-template-gradient-bottom {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6rem;
    pointer-events: none;
}
.hero-banner-carousel-item .hero-elegant-body {
    position: relative;
    z-index: 3;
    min-height: 0;
}
.hero-banner-carousel-control {
    width: 4%;
    max-width: 60px;
    opacity: 0.85;
    z-index: 10;
}
.hero-banner-carousel-control:hover {
    opacity: 1;
}
.hero-banner-carousel-control .carousel-control-prev-icon,
.hero-banner-carousel-control .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    background-size: 60%;
}
.hero-banner-carousel-control:hover .carousel-control-prev-icon,
.hero-banner-carousel-control:hover .carousel-control-next-icon {
    background-color: var(--template-gold);
}
.hero-banner-carousel-indicators {
    bottom: 1.5rem;
    z-index: 10;
}
.hero-banner-carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.8);
    opacity: 1;
}
.hero-banner-carousel-indicators .active {
    background-color: var(--template-gold);
    border-color: var(--template-gold);
}
@media (min-width: 1200px) {
    .hero-elegant-section {
        min-height: 100vh;
        max-height: none;
    }
    .hero-banner-carousel-section .hero-banner-carousel,
    .hero-banner-carousel-section .carousel-inner,
    .hero-banner-carousel-item {
        min-height: 100vh;
    }
}
@media (max-width: 991.98px) {
    .hero-banner-carousel-section .hero-banner-carousel,
    .hero-banner-carousel-section .carousel-inner,
    .hero-banner-carousel-item {
        min-height: 50vh;
    }
}
@media (max-width: 575.98px) {
    .hero-banner-carousel-section .hero-banner-carousel,
    .hero-banner-carousel-section .carousel-inner,
    .hero-banner-carousel-item {
        min-height: 45vh;
    }
}

/* Wrapper gives the hero image a definite size so it scales with viewport */
.hero-elegant-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
.hero-elegant-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    opacity: 0.85;
}
.hero-elegant-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.45) 100%);
    z-index: 2;
}
/* Template hero: black bg, hero image more visible (especially on the right); gold border around whole section */
.hero-template.hero-elegant-section {
    background-color: #000;
    overflow: visible;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.hero-template .hero-elegant-bg { opacity: 0.9; }
.hero-template .hero-elegant-overlay {
    background: 
        linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.15) 70%, transparent 100%),
        linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.5) 100%);
}
.hero-template .hero-elegant-body .container-fluid {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media (min-width: 768px) {
    .hero-template .hero-elegant-body .container-fluid {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}
@media (min-width: 992px) {
    .hero-carousel-section {
        padding-bottom: 3rem;
    }
    .hero-template .hero-elegant-body .container-fluid {
        padding-bottom: 10rem;
    }
}
@media (min-width: 1200px) {
    .hero-carousel-section {
        padding-bottom: 4rem;
    }
    .hero-template .hero-elegant-body .container-fluid {
        padding-bottom: 12rem;
    }
}
.hero-template .hero-elegant-body .row {
    gap: 0 3rem;
}
/* On desktop: content at top of hero, row columns top-aligned so brand panel sits beside text */
@media (min-width: 992px) {
    .hero-template .hero-elegant-body {
        justify-content: flex-start;
        align-items: stretch;
    }
    .hero-template .hero-elegant-body .row {
        align-items: flex-start;
        flex-wrap: nowrap;
    }
}
/* Authorized Dealer panel: in-flow so on small screens it stacks below hero text */
.hero-brand-panel-outer {
    position: relative;
    z-index: 5;
    max-width: min(420px, 92vw);
    width: 100%;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .hero-brand-panel-outer {
        max-width: min(400px, 85vw);
        margin-top: 2.5rem;
    }
}
@media (min-width: 992px) {
    .hero-brand-panel-outer {
        max-width: 480px;
        margin-top: 6rem;
        /* Space between Authorized Dealer box and social strip on the right */
        margin-right: 4.5rem;
    }
}
.hero-template-gradient-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6rem;
    background: linear-gradient(to top, rgba(255,200,50,0.12) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}
.hero-template-content { text-align: left !important; }
.hero-template-content .hero-elegant-description {
    margin-left: 0; margin-right: 0;
    color: #fff;
    font-weight: 200;
    font-family: var(--font-family-base);
}
.hero-template-badge { letter-spacing: 0.08em; }
.hero-badge-text {
    color: var(--template-gold) !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--font-family-base);
}
.hero-template-title {
    font-family: var(--font-family-base);
    font-weight: 500;
    line-height: 1.05;
}
/* ========== Brand panel (template: white box + gold border + yellow corner accents) ========== */
.brand-panel-wrap {
    position: relative;
    overflow: visible;
}
/* White box: gold border + shadow – wider rectangle */
.brand-panel-box {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 4px solid #FFD700;
    border-radius: 4px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    padding: 1.25rem 1.25rem;
    text-align: center;
    min-width: 280px;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .brand-panel-box {
        padding: 1.5rem 1.5rem;
        min-width: 320px;
    }
}
@media (min-width: 992px) {
    .brand-panel-box {
        min-width: 380px;
    }
}
/* Yellow accent corners (template: -top-4 -right-4 and -bottom-4 -left-4 w-24 h-24) */
.brand-panel-corner {
    position: absolute;
    width: 6rem;
    height: 6rem;
    background: #FFD700;
    z-index: 0;
}
.brand-panel-corner-tr {
    top: -1rem;
    right: -1rem;
}
.brand-panel-corner-bl {
    bottom: -1rem;
    left: -1rem;
}
.brand-panel-heading {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #000;
    font-family: var(--font-family-base);
    text-transform: none;
    letter-spacing: 0.02em;
}
@media (min-width: 768px) {
    .brand-panel-heading {
        font-size: 1.375rem;
    }
}
.brand-panel-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.25rem 0 0.5rem;
}
.brand-panel-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    max-width: 120px;
    height: 60px;
}
.brand-panel-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
}
.brand-panel-logos-bridgeway {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: center !important;
    padding-bottom: 0;
}
.brand-panel-logos-bridgeway .brand-panel-logo {
    max-width: 180px;
    height: 90px;
}
.brand-panel-logos-bridgeway .brand-panel-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
}
.brand-panel-tagline {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 400;
    color: #333;
    font-family: var(--font-family-base);
}
.hero-template .col-lg-5:has(.brand-panel-wrap) {
    overflow: visible;
}
.hero-template .hero-elegant-body .row {
    overflow: visible;
}
.hero-elegant-content {
    position: relative;
    z-index: 3;
    padding: 4rem 1rem 2.5rem;
    max-width: 900px;
    margin: 0 auto;
}
.hero-announcement-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: var(--elegant-text-light);
    border: 1px solid rgba(255,255,255,0.1);
}
.announcement-link {
    color: var(--elegant-yellow);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.announcement-link:hover {
    color: var(--elegant-text-light);
}
.hero-elegant-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: var(--elegant-text-light);
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.hero-elegant-description {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: 300;
    color: var(--elegant-text-muted);
    margin-bottom: 2.5rem;
    line-height: 1.75;
    max-width: 580px;
    margin-left: 0;
    margin-right: auto;
}
.hero-elegant-cta {
    margin-top: 2rem;
    position: relative;
    z-index: 4;
}
.hero-elegant-cta .btn-elegant-lg {
    width: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.btn-elegant-secondary {
    background-color: transparent;
    color: var(--template-gold);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.2s;
    border: 2px solid var(--template-gold);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.btn-elegant-secondary:hover {
    background-color: var(--template-gold);
    color: #000;
    border-color: var(--template-gold);
    transform: translateY(-1px);
}
/* Hero template: primary = yellow bg + white text; secondary = yellow border + white text */
.hero-template .btn-elegant-primary {
    color: #fff !important;
}
.hero-template .btn-elegant-primary:hover {
    color: #000 !important;
}
.hero-template .btn-elegant-secondary {
    color: #fff;
}
.hero-template .btn-elegant-secondary:hover {
    color: #000;
}

/* Hero: floating social strip (right) - sits in reserved area, no overlap with content */
.hero-social-strip {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 40px;
}
.hero-social-link {
    width: 40px;
    height: 40px;
    border-radius: 0.35rem;
    background: rgba(255,255,255,0.95);
    color: var(--elegant-black);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.1rem;
    transition: transform 0.2s, color 0.2s, background 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.hero-social-link:hover {
    color: var(--template-gold);
    transform: scale(1.08);
}
/* Template hero: social icons = dark grey/black buttons with white icons */
.hero-template .hero-social-link {
    background: rgba(40,40,40,0.95);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
}
.hero-template .hero-social-link:hover {
    color: var(--template-gold);
    background: rgba(50,50,50,0.98);
}
/* Responsive: Elegant Design */
@media (max-width: 991.98px) {
    .header-logo-shape {
        padding: 0.4rem 0.75rem;
    }
    .header-logo-shape .header-logo-img {
        max-height: 145px;
        max-width: 220px;
    }
    .header-logo-shape {
        margin-bottom: -58px;
        left: 3.75rem;
    }
    .header-logo-shape .logo-text {
        font-size: 1.2rem;
    }
    .footer-logo-shape {
    }
    .footer-logo-shape .footer-logo-img {
        max-height: 100px;
    }
    .footer-logo-shape .logo-text {
        font-size: 1.4rem;
    }
    .logo-elegant {
        height: 90px;
        max-width: 320px;
    }
    .logo-house-bg {
        width: 160px;
        height: 130px;
        opacity: 0.6;
        filter: blur(4px);
    }
    /* Slide-in menu from left (reference style): fixed panel + backdrop, no blank space */
    .navbar-elegant #navbarNavElegant {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        z-index: 1040;
        background-color: var(--elegant-black) !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
        margin: 0;
        padding: 2rem 0 1.5rem;
        overflow-y: auto;
        display: block !important;
        flex-direction: column;
        align-items: stretch;
        transform: translateX(-100%);
        transition: transform 0.3s ease-out;
        visibility: hidden;
    }
    .navbar-elegant #navbarNavElegant.show {
        transform: translateX(0);
        visibility: visible;
    }
    .navbar-elegant #navbarNavElegant .navbar-nav {
        flex-direction: column;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        align-items: stretch;
    }
    .navbar-elegant #navbarNavElegant .nav-item {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .navbar-elegant #navbarNavElegant .nav-link-elegant {
        padding: 0.9rem 1.25rem !important;
        border-bottom: none;
    }
    /* Close icon for slide-in menu */
    .navbar-menu-close-wrap {
        display: flex;
        justify-content: flex-end;
        padding: 0.5rem 1rem 0.25rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .navbar-menu-close-btn {
        color: var(--elegant-text-light) !important;
        font-size: 1.5rem;
        padding: 0.5rem !important;
        text-decoration: none !important;
        opacity: 0.9;
    }
    .navbar-menu-close-btn:hover {
        color: var(--elegant-yellow) !important;
        opacity: 1;
    }
    /* Search box inside hamburger menu */
    .navbar-search-form-menu {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .navbar-search-wrap-menu {
        position: relative;
        width: 100%;
    }
    .navbar-search-input-menu {
        width: 100%;
        padding: 0.65rem 2.75rem 0.65rem 1rem;
        font-size: 1rem;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 6px;
        color: #fff;
    }
    .navbar-search-input-menu::placeholder {
        color: rgba(255,255,255,0.5);
    }
    .navbar-search-input-menu:focus {
        background: rgba(255,255,255,0.12);
        border-color: var(--template-gold);
        color: #fff;
        box-shadow: 0 0 0 2px rgba(212,175,55,0.25);
    }
    .navbar-search-submit-menu {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #4b5563;
        padding: 0.35rem;
        cursor: pointer;
        font-size: 1.25rem;
        line-height: 1;
        border-radius: 0.25rem;
        z-index: 2;
    }
    .navbar-search-submit-menu i {
        color: inherit;
        display: inline-block;
    }
    .navbar-search-submit-menu:hover,
    .navbar-search-submit-menu:focus {
        color: var(--template-gold);
        outline: none;
    }
    /* Products dropdown + subcategories: show in slide-in (no floating, no clipping) */
    .navbar-elegant #navbarNavElegant .dropdown-menu {
        position: static !important;
        float: none !important;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: rgba(0,0,0,0.2) !important;
        padding: 0;
        margin: 0;
    }
    .navbar-elegant #navbarNavElegant .dropdown-item {
        padding: 0.65rem 1.25rem 0.65rem 2rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .navbar-elegant #navbarNavElegant .dropdown-submenu {
        position: relative;
    }
    .navbar-elegant #navbarNavElegant .dropdown-submenu .submenu-dropdown {
        display: none;
        position: static !important;
        left: auto !important;
        margin: 0;
        padding: 0.25rem 0 0.5rem 0;
        background: rgba(0,0,0,0.2);
        border: none;
        box-shadow: none;
    }
    .navbar-elegant #navbarNavElegant .dropdown-submenu.show-submenu .submenu-dropdown {
        display: block !important;
    }
    .navbar-elegant #navbarNavElegant .dropdown-submenu .dropdown-toggle-submenu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }
    .navbar-elegant #navbarNavElegant .dropdown-submenu .submenu-dropdown .dropdown-item {
        padding-left: 2.5rem;
    }
    .navbar-menu-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1039;
        background: rgba(0,0,0,0.5);
        cursor: pointer;
    }
    body.navbar-menu-open .navbar-menu-backdrop {
        display: block;
    }
    body.navbar-menu-open {
        overflow: hidden;
    }
    .navbar-elegant .navbar-collapse {
        max-width: none;
        width: auto;
    }
    .navbar-actions-elegant {
        margin-left: 0;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.1);
        width: 100%;
        justify-content: flex-start;
    }
    .hero-elegant-content {
        padding: 3rem 1rem 2rem;
    }
    .hero-elegant-title {
        font-size: clamp(2rem, 5vw, 3rem);
    }
    .hero-elegant-description {
        font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    }
    .hero-elegant-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero-elegant-cta .btn-elegant-lg {
        width: auto;
        max-width: 260px;
        justify-content: flex-start;
    }
    .hero-social-strip {
        right: 0.5rem;
    }
    .hero-template .hero-elegant-body .container-fluid {
        padding-right: 1rem;
    }
    .hero-social-link {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}
@media (max-width: 991.98px) {
    .brand-panel-logo {
        max-width: 100px;
        height: 50px;
    }
    .brand-panel-logos {
        gap: 0.625rem 1rem;
    }
    .brand-panel-logos-bridgeway .brand-panel-logo {
        max-width: 160px;
        height: 80px;
    }
}
@media (max-width: 575.98px) {
    .brand-panel-logo {
        max-width: 90px;
        height: 45px;
    }
    .brand-panel-logos {
        gap: 0.5rem 0.875rem;
        padding: 0.25rem 0 0.5rem;
    }
    .brand-panel-box {
        padding: 1rem 1rem;
    }
    .brand-panel-heading {
        margin: 0 0 0.75rem;
        font-size: 1.125rem;
    }
    .brand-panel-logos-bridgeway {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
    .brand-panel-logos-bridgeway .brand-panel-logo {
        max-width: 130px;
        height: 65px;
    }
    .brand-panel-logos-bridgeway .brand-panel-logo {
        max-width: 150px;
        height: 75px;
    }
    .header-logo-shape {
        padding: 0.35rem 0.6rem;
    }
    .header-logo-shape .header-logo-img {
        max-height: 115px;
        max-width: 180px;
    }
    .header-logo-shape {
        margin-bottom: -45px;
        left: 2.75rem;
    }
    .header-logo-shape .logo-text {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    .navbar-mobile-top-bar {
        padding-left: min(calc(200px + 1.25rem), 62vw);
        min-height: 80px;
    }
    .header-logo-shape-mobile {
        max-width: min(200px, 58vw);
        height: 72px;
        left: 0.25rem;
    }
    .header-logo-shape-mobile .header-logo-img {
        max-height: 72px;
        max-width: 100%;
    }
    .header-logo-shape-mobile .logo-text {
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }
    .footer-logo-shape {
    }
    .footer-logo-shape .footer-logo-img {
        max-height: 90px;
    }
    .footer-logo-shape .logo-text {
        font-size: 1.2rem;
    }
    .logo-elegant {
        height: 72px;
        max-width: 260px;
    }
    .logo-house-bg {
        width: 130px;
        height: 105px;
        opacity: 0.75;
        filter: blur(2.5px);
    }
    .hero-elegant-section {
        min-height: 50vh;
        max-height: none;
        overflow: visible;
        margin-top: -2px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    .hero-elegant-bg-wrap,
    .hero-elegant-overlay,
    .hero-template-gradient-bottom {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
    .header-template-fullwidth + .hero-elegant-section,
    .header-template-fullwidth + section.hero-elegant-section {
        margin-top: -2px !important;
    }
    .header-template-fullwidth {
        margin-bottom: 0 !important;
        z-index: 1060 !important;
    }
    .hero-elegant-section {
        z-index: 0;
    }
    .hero-elegant-content {
        padding: 1.25rem 1rem 1rem;
    }
    .hero-elegant-title,
    .hero-template-title {
        font-size: clamp(1.6rem, 5vw, 2.25rem);
        line-height: 1.15;
    }
    .hero-badge-text {
        font-size: 0.8rem;
    }
    .hero-elegant-description {
        font-size: 0.9375rem;
        line-height: 1.65;
        max-width: min(18em, 92%);
    }
    .hero-elegant-cta .btn-elegant-lg {
        font-size: 0.9375rem;
        padding: 0.6rem 1rem;
    }
    .hero-social-strip {
        right: 0.35rem;
        gap: 0.35rem;
    }
    .hero-template .hero-elegant-body .container-fluid {
        padding-right: 1rem;
        padding-top: 1.25rem;
        padding-bottom: 2rem;
    }
    .hero-social-link {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    .hero-announcement-bar {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media (max-width: 575.98px) {
    .header-template-fullwidth {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        z-index: 1060 !important;
    }
    .header-template-fullwidth + section.hero-elegant-section,
    .header-template-fullwidth ~ section.hero-elegant-section {
        margin-top: -2px !important;
        padding-top: 88px !important; /* clear fixed header, minimal gap so text isn’t pushed down */
    }
    section.hero-elegant-section.hero-template {
        padding-top: 88px !important;
    }
    .hero-elegant-section {
        min-height: 45vh;
        max-height: none;
        overflow: visible;
        margin-top: -2px !important;
        padding-top: 88px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        z-index: 0;
    }
    body.template-fullwidth > main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    body.template-fullwidth > main > section.hero-elegant-section:first-child {
        margin-top: -2px !important;
        padding-top: 88px !important;
    }
    .hero-elegant-content {
        padding-top: 1rem;
    }
    .hero-elegant-title,
    .hero-template-title {
        font-size: clamp(2rem, 5vw, 2.25rem);
        line-height: 1.2;
    }
    .hero-badge-text {
        font-size: 0.75rem;
    }
    .hero-elegant-description {
        font-size: 0.9rem;
        line-height: 1.65;
        max-width: min(16em, 88%);
    }
    .hero-elegant-cta .btn-elegant-lg {
        font-size: 0.875rem;
        padding: 0.5rem 0.9rem;
    }
    .hero-template .hero-elegant-body .container-fluid {
        padding-top: 1rem;
    }
    .brand-strip,
    .index-brand-strip {
        padding: 0.2rem 0 0.35rem;
        margin-bottom: 1.25rem;
    }
    .brand-strip-tagline,
    .index-brand-tagline {
        font-size: 0.8125rem;
    }
    /* Contact page: mobile fixes – no body padding; brand strip provides top padding (no gap after header) */
    body.template-fullwidth.contact-page {
        padding-top: 0 !important;
        background-color: #ffffff !important;
    }
    body.template-fullwidth.contact-page main {
        position: relative;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template:first-child {
        margin-top: 0 !important;
        padding-top: 108px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0.2rem !important;
        background-color: var(--template-gold) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        top: 0;
        display: block !important;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template .container {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
        max-width: 100%;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template .brand-strip-tagline {
        margin-top: 0;
        margin-bottom: 0;
    }
    body.template-fullwidth.contact-page main > .brand-strip-template + .container,
    body.template-fullwidth.contact-page main .container.py-4,
    body.template-fullwidth.contact-page main > .container:first-of-type,
    body.template-fullwidth.contact-page main > div.container,
    body.template-fullwidth.contact-page main > .brand-strip-template + div.container {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .brand-section-title,
    .index-page .index-section-title {
        font-size: 1.15rem;
        margin-bottom: 1rem;
        padding-bottom: 0.4rem;
    }
    .product-details-page .d-flex.flex-wrap.gap-2 .btn {
        width: 100%;
        min-height: 44px;
    }
    .product-detail-specs-table th,
    .product-detail-specs-table td {
        font-size: 0.8125rem;
        padding: 0.5rem 0.4rem;
    }
    .download-page .download-page-search-btn,
    .download-page-search-inner .download-page-search-btn {
        width: auto;
        min-width: 120px;
        max-width: 200px;
        min-height: 44px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .download-page .row.g-2 .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer-logo {
        max-height: 180px;
    }
    .footer-newsletter-text,
    .footer-newsletter-input,
    .footer-newsletter-btn {
        max-width: 100%;
    }
    .whatsapp-float {
        width: 48px;
        height: 48px;
        font-size: 26px;
        right: 1rem;
        bottom: 1rem;
    }
}
@media (max-width: 399.98px) {
    .navbar-main .logo-white-bg {
        min-width: 120px;
    }
    .navbar-main .site-logo {
        height: 40px;
        max-width: 160px;
    }
    .header-utility .gap-3 a,
    .header-utility .d-flex span {
        font-size: 0.75rem;
    }
    /* Extra small screens - Index page */
    .index-page {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .product-category-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .new-arrivals-section,
    .company-profile-section,
    .index-featured-section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .product-category-title,
    .new-arrivals-title,
    .company-profile-heading,
    .index-featured-section .index-section-title {
        font-size: 1.25rem;
    }
    .product-category-section .card-body,
    .product-category-section .category-card-ref .card-body {
        min-height: 0;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        gap: 0.2rem;
    }
    .product-category-section .category-card-title {
        margin-bottom: 0.1rem;
    }
    .product-card .card-body {
        padding: 0.75rem;
    }
    .btn-view-more,
    .btn-primary,
    .btn-outline-dark {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
    }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE STYLES FOR INDEX PAGE
   ============================================ */

/* Large Desktop (1400px and up) */
@media (min-width: 1400px) {
    .index-page .container {
        max-width: 1320px;
    }
    .hero-elegant-content {
        max-width: 1000px;
    }
}

/* Desktop (992px - 1399px) */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .product-category-section .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* Tablet Landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .index-page {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .product-category-section .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    .product-category-section .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    .new-arrivals-section .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .new-arrivals-section .col-lg-3 {
        flex: 0 0 auto;
        width: 50%;
    }
    .index-featured-section .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .index-featured-section .col-lg-3 {
        flex: 0 0 auto;
        width: 50%;
    }
    .company-profile-image {
        max-height: 400px;
        object-fit: cover;
    }
}

/* Tablet Portrait and Mobile Landscape (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .index-page {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .product-category-section {
        padding: 1.75rem 0;
    }
    .product-category-section .row > * {
        margin-bottom: 0.5rem;
    }
    .new-arrivals-section {
        padding: 1.5rem 1rem;
    }
    .company-profile-section {
        padding: 1.75rem 0;
    }
    .index-featured-section {
        padding: 1.75rem 0;
    }
    .product-card .card-img-top {
        height: 160px;
        object-fit: contain !important;
        object-position: center !important;
        background: #f8f9fa !important;
    }
    .index-featured-section .product-card .card-img-top {
        height: 220px;
        min-height: 220px;
        object-fit: contain !important;
        object-position: center !important;
        background: #ffffff !important;
    }
    .category-card-img-wrap {
        min-height: 160px;
    }
    .about-page-banner {
        min-height: 220px;
        margin-bottom: 2rem;
    }
    .about-page-banner-content {
        padding: 2rem 1rem;
    }
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575.98px) {
    .index-page {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100%;
        overflow-x: hidden;
    }
    .about-page-banner {
        min-height: 180px;
        margin-bottom: 1.5rem;
    }
    .about-page-banner-content {
        padding: 1.5rem 1rem;
    }
    .about-page-banner-title {
        font-size: clamp(2rem, 6vw, 2.5rem);
    }
    
    /* Section spacing – consistent padding, no negative margins */
    .product-category-section {
        margin-bottom: 2.5rem !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .new-arrivals-section {
        margin-bottom: 2.5rem !important;
        padding: 1.5rem 1rem !important;
        max-width: 100%;
    }
    .company-profile-section,
    .index-featured-section {
        margin-bottom: 2.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100%;
    }
    
    /* New Arrivals: proper row spacing and card alignment */
    .new-arrivals-section .row {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        overflow: visible;
    }
    
    .new-arrivals-section .row > * {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        margin-bottom: 1.5rem;
        overflow: visible;
    }
    .new-arrivals-section .col-md-6,
    .new-arrivals-section .col-lg-3 {
        overflow: visible;
    }

    /* Ensure category images stay fully visible inside yellow block on mobile */
    .product-category-section .category-card-img-wrap {
        min-height: 180px;
    }
    .product-category-section .category-card-img-wrap .category-card-img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        object-position: center bottom;
        display: block;
    }
    
    /* New Arrivals cards: consistent padding and alignment */
    .new-arrivals-section .new-arrival-card {
        margin: 0;
        border-radius: 0;
    }
    .new-arrivals-section .new-arrival-card {
        border-radius: 0.5rem !important;
        overflow: hidden !important;
    }
    .new-arrivals-section .new-arrival-card .card-body {
        padding: 1rem 1rem 1.25rem 1rem;
        border-top: none !important;
        border-radius: 0 0 0.5rem 0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 140px;
        flex-grow: 1;
        height: 100%;
    }
    .new-arrivals-section .product-card-template .card-text {
        flex-grow: 1;
        margin-bottom: 0.5rem;
        flex-shrink: 1;
        min-height: 0;
    }
    .new-arrivals-section .product-card-template-link {
        margin-top: auto !important;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .new-arrivals-section .new-arrival-card .card-title {
        margin-bottom: 0.5rem;
        padding-left: 0;
        padding-right: 0;
    }
    .new-arrivals-section .new-arrival-card .product-card-template-link {
        margin-top: 0.75rem;
        padding-left: 0;
    }
    
    /* Rows: use Bootstrap gutter only, no negative margin overflow */
    .product-category-section .row,
    .index-featured-section .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        max-width: calc(100% + 1rem);
    }
    
    .product-category-section .row > *,
    .index-featured-section .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 1rem;
    }
    
    /* Section titles – centered, single line where possible */
    .product-category-title,
    .new-arrivals-title,
    .company-profile-heading,
    .index-featured-section .index-section-title {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
        margin-bottom: 1rem;
        text-align: center;
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.3 !important;
        padding-bottom: 0.5rem !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    /* Reduce spacing between Why Choose Us title and image on mobile */
    .company-profile-section .company-profile-heading {
        margin-top: 0.4rem !important;
        margin-bottom: 0.25rem !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        position: relative !important;
        z-index: 10 !important;
        line-height: 1.3 !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    .company-profile-section .row.mt-3 {
        margin-top: 0.4rem !important;
    }
    
    .product-category-tagline,
    .new-arrivals-tagline {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Cards – full width, consistent height */
    .product-category-section .col,
    .new-arrivals-section .col-md-6,
    .new-arrivals-section .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .index-featured-section .col-md-6,
    .index-featured-section .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* New Arrivals card mobile fixes */
    .new-arrivals-section .new-arrival-card {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .new-arrivals-section .product-card-template-img-wrap {
        height: auto !important;
        min-height: 180px;
        margin: 0;
        overflow: visible !important;
        background: #ffffff !important;
        padding: 0.75rem;
        border-radius: 0.5rem 0.5rem 0 0 !important;
        border: none !important;
    }
    .new-arrivals-section .product-card-template-img-wrap.overflow-hidden {
        overflow: visible !important;
    }
    .new-arrivals-section .product-card-template-img-inner {
        overflow: visible !important;
        background: #ffffff !important;
        position: relative !important;
        height: auto !important;
        min-height: 180px;
        inset: auto;
        padding: 0.75rem;
        border: none !important;
    }
    .new-arrivals-section .product-card-template-img-inner .card-img-top,
    .new-arrivals-section .product-card-template-img-inner .product-card-template-img {
        object-fit: contain !important;
        object-position: center !important;
        background: #ffffff !important;
        width: 100% !important;
        height: auto !important;
        max-height: 180px !important;
        max-width: 100% !important;
        display: block;
        margin: 0 auto;
        border-radius: 0;
        border: none !important;
    }
    .new-arrivals-section .new-arrival-badge {
        top: 0.75rem;
        left: 0.75rem;
        right: auto;
        margin-top: 0;
        margin-left: 0;
        width: auto;
        padding: 0.35rem 0.75rem;
        font-size: 0.7rem;
    }
    .new-arrivals-section .card-body {
        padding: 1.25rem 1rem !important;
    }
    .new-arrivals-section .card-title {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }
    .new-arrivals-section .text-secondary {
        font-size: 0.8125rem;
        margin-bottom: 0.5rem;
    }
    .new-arrivals-section .product-card-template-link {
        font-size: 0.875rem;
        margin-top: auto !important;
        margin-bottom: 0;
    }
    
    .product-card .card-img-top {
        height: 140px;
        object-fit: contain;
        padding: 0.75rem;
        box-sizing: border-box;
    }
    .index-featured-section .product-card .card-img-top {
        height: 200px;
        min-height: 200px;
    }
    .category-card-img-wrap {
        min-height: 140px;
    }
    
    .product-card .card-title {
        font-size: 0.9375rem;
    }
    
    .product-card .card-text {
        font-size: 0.8125rem;
    }
    
    /* Buttons – centered section CTAs */
    .product-category-section .mt-4.text-center,
    .new-arrivals-section .mt-4.text-center {
        text-align: center;
    }
    
    .btn-view-more,
    .btn-primary.btn-sm,
    .btn-outline-dark {
        font-size: 0.8125rem;
        padding: 0.5rem 1rem;
    }
    
    /* Company Profile – stack image then text, centered */
    .company-profile-section .row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }
    
    .company-profile-section .col-lg-5,
    .company-profile-section .col-lg-7 {
        max-width: 100%;
        flex: 0 0 100%;
        text-align: center;
    }
    
    .company-profile-section .company-profile-image-wrap {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
    
    .company-profile-section .company-profile-content {
        text-align: center;
    }
    
    .company-profile-title {
        font-size: clamp(1.125rem, 5vw, 1.5rem);
    }
    
    .company-profile-content {
        font-size: 0.875rem;
        line-height: 1.6;
    }
    
    .company-profile-image {
        margin-bottom: 1.5rem;
        max-width: 100%;
        height: auto;
    }
    
    .company-profile-section .btn-dark.btn-lg {
        display: inline-block;
    }
}

/* Extra Small Mobile (up to 399px) */
@media (max-width: 399.98px) {
    .index-page {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .product-category-section {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .new-arrivals-section {
        padding: 1.25rem 0.75rem !important;
    }
    .new-arrivals-section .row {
        margin-left: 0;
        margin-right: 0;
        overflow: visible;
    }
    .new-arrivals-section .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        overflow: visible;
    }
    .new-arrivals-section .col-md-6,
    .new-arrivals-section .col-lg-3 {
        overflow: visible;
    }
    .new-arrivals-section .card-body {
        padding: 1rem 0.75rem !important;
    }
    .new-arrivals-section .new-arrival-badge {
        top: 0.5rem;
        left: 0.5rem;
        right: auto;
        margin: 0;
        padding: 0.3rem 0.65rem;
        font-size: 0.65rem;
    }
    .new-arrivals-section .product-card-template-img-wrap {
        overflow: visible;
        background: #ffffff !important;
    }
    .new-arrivals-section .product-card-template-img-inner {
        overflow: visible;
        background: #ffffff !important;
    }
    .new-arrivals-section .product-card-template-img-inner .card-img-top,
    .new-arrivals-section .product-card-template-img-inner .product-card-template-img {
        object-fit: contain !important;
        object-position: center !important;
        background: #ffffff !important;
    }
    .company-profile-section,
    .index-featured-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .product-category-title,
    .new-arrivals-title,
    .company-profile-heading,
    .index-featured-section .index-section-title {
        font-size: 1.125rem;
    }
    /* Reduce spacing between Why Choose Us title and image on small mobile */
    .company-profile-section .company-profile-heading {
        margin-top: 0.3rem !important;
        margin-bottom: 0.2rem !important;
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        position: relative !important;
        z-index: 10 !important;
        line-height: 1.3 !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    .company-profile-section .row.mt-3 {
        margin-top: 0.4rem !important;
    }
    
    .product-card .card-img-top {
        height: 120px;
        object-fit: contain !important;
        object-position: center !important;
        background: #f8f9fa !important;
        padding: 0.5rem;
        box-sizing: border-box;
    }
    body.template-fullwidth.products-page .product-card .card-img-top,
    body.template-fullwidth.search-page .product-card .card-img-top {
        height: 220px;
        min-height: 220px;
        padding: 0.75rem;
    }
    .index-featured-section .product-card .card-img-top {
        height: 180px;
        min-height: 180px;
        object-fit: contain !important;
        object-position: center !important;
        background: #ffffff !important;
    }
    .category-card-img-wrap {
        min-height: 120px;
    }
    
    .product-card .card-body {
        padding: 0.75rem;
    }
    
    .category-card .card-body,
    .product-category-section .category-card-ref .card-body {
        min-height: 0;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        gap: 0.25rem;
    }
    .product-category-section .category-card-title {
        margin-bottom: 0.1rem;
    }
    .btn-view-more,
    .btn-primary.btn-sm,
    .btn-outline-dark {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
    }
    .hero-carousel .hero-title {
        font-size: 1.25rem;
    }
    .hero-carousel .hero-lead {
        font-size: 0.875rem;
    }
    main .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .brand-strip-tagline,
    .index-brand-tagline {
        font-size: 0.75rem;
    }
    .product-category-section .category-card-title {
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }
    .product-category-section .category-card-ref .card-body {
        min-height: 0;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        gap: 0.25rem;
    }
    .btn-view-more {
        padding: 0.3rem 0.75rem;
        font-size: 0.75rem;
    }
    .product-card .card-title {
        font-size: 1rem;
    }
    .product-card .card-text {
        font-size: 0.8125rem;
    }
    .company-profile-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
    .company-profile-content {
        font-size: 0.875rem;
    }
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
}

/* Product image lightbox: tap/click product image to view large */
.product-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}
.product-image-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
.product-image-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}
.product-image-lightbox-inner {
    position: relative;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 2px solid var(--template-gold);
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    z-index: 1;
    padding: 3rem 2rem 2rem 2rem;
}
.product-image-lightbox-image-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin-top: 0;
}
.product-image-lightbox-overlay {
    display: none;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    text-align: center;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 0.25rem;
    max-width: 100%;
    width: 100%;
    margin-bottom: 1rem;
    order: -1;
}
.product-image-lightbox-brand {
    font-size: 1rem;
    font-weight: 700;
    color: var(--template-gold);
    font-family: var(--template-font-heading), sans-serif;
    line-height: 1.3;
}
.product-image-lightbox-brand:empty {
    display: none;
}
.product-image-lightbox-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-top: 0.25rem;
}
.product-image-lightbox-title:empty {
    display: none;
}
.product-image-lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 0.25rem;
    z-index: 10;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.product-image-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.8);
}
.product-image-lightbox-img {
    max-width: 100%;
    max-height: calc(90vh - 10rem);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    padding: 1rem;
    box-sizing: border-box;
}
/* Mobile responsive styles for product image lightbox */
@media (max-width: 767px) {
    .product-image-lightbox-inner {
        padding: 2.5rem 1rem 1.5rem 1rem;
        max-height: 85vh;
    }
    .product-image-lightbox-overlay {
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.75rem;
    }
    .product-image-lightbox-brand {
        font-size: 0.875rem;
    }
    .product-image-lightbox-title {
        font-size: 0.75rem;
    }
    .product-image-lightbox-img {
        max-height: calc(85vh - 8rem);
        padding: 0.75rem;
    }
    .product-image-lightbox-close {
        top: 0.5rem;
        right: 0.5rem;
        width: 2rem;
        height: 2rem;
        font-size: 1.25rem;
    }
}

/* Clickable cursor: product details gallery main image and thumbnails */
.pd-gallery-main,
.pd-thumb,
.product-gallery-main,
.product-gallery-zoom-wrap img {
    cursor: pointer;
}

/* ========== New Arrivals: force remove white rectangle (final override) ========== */
body .new-arrivals-section .new-arrival-card,
body .new-arrivals-section .new-arrival-card:hover,
body .new-arrivals-section .new-arrival-card:focus,
body .new-arrivals-section .new-arrival-card:focus-within {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}
body .new-arrivals-section .new-arrival-card::before,
body .new-arrivals-section .new-arrival-card::after {
    display: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
body .new-arrivals-section .new-arrival-card-link,
body .new-arrivals-section .new-arrival-card-link:hover,
body .new-arrivals-section .new-arrival-card-link:focus,
body .new-arrivals-section .new-arrival-card-link:focus-visible,
body .new-arrivals-section .new-arrival-card-link:active {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
body .new-arrivals-section .new-arrival-card-link::before,
body .new-arrivals-section .new-arrival-card-link::after {
    display: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Column wrapper: remove any frame when it contains new-arrival card */
body .new-arrivals-section .col-md-6.col-lg-3:has(.new-arrival-card),
body .new-arrivals-section .col-md-6.col-lg-3:has(.new-arrival-card:hover) {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========== Large desktop optimizations (scale nicely on big screens) ========== */
/* Header: same max-width and padding as hero so logo aligns with hero text */
@media (min-width: 1400px) {
    .header-template-fullwidth .header-template-top-bar .header-content-wrap {
        max-width: min(1680px, 95vw);
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .header-template-fullwidth .navbar-elegant .navbar-elegant-content-wrap {
        max-width: min(1680px, 95vw);
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .header-template-fullwidth .navbar-elegant .navbar-elegant-content-wrap .header-logo-shape {
        margin-left: -0.5rem;
    }
    .header-template-fullwidth .navbar-elegant .navbar-elegant-content-wrap .navbar-elegant-container {
        padding-left: 1.5rem;
    }
    .hero-elegant-section {
        min-height: 100vh;
        max-height: none;
    }
    .hero-banner-carousel-section .hero-banner-carousel,
    .hero-banner-carousel-section .carousel-inner,
    .hero-banner-carousel-item {
        min-height: 100vh;
    }
    .hero-template .hero-elegant-body .container-fluid {
        padding-top: 6rem;
        padding-bottom: 6rem;
        max-width: min(1680px, 96vw);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .hero-template .hero-elegant-body .row {
        gap: 0 4rem;
    }
    .hero-elegant-title,
    .hero-template-title {
        font-size: clamp(2.5rem, 4vw, 4.75rem);
    }
    .hero-elegant-description {
        font-size: clamp(1rem, 1.25vw, 1.4rem);
        max-width: 560px;
    }
    .hero-badge-text {
        font-size: clamp(0.8rem, 1vw, 0.9rem);
    }
    .hero-brand-panel-outer {
        max-width: 520px;
        margin-right: 5rem;
    }
    .brand-panel-box {
        padding: 1.75rem 2rem;
        min-width: 400px;
    }
    .brand-panel-heading {
        font-size: 1.5rem;
    }
    .brand-panel-logo {
        max-width: 140px;
        height: 70px;
    }
    .index-page .container,
    .index-page-template .container {
        max-width: min(1680px, 95vw);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .index-section-title,
    .product-category-title,
    .section-title-template {
        font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    }
    .company-profile-section .container,
    .index-featured-section .container,
    .cta-template-section .container,
    .features-template-section .container {
        max-width: min(1680px, 95vw);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .about-stats-section-company-profile {
        max-width: 75%;
    }
    .cta-template-title {
        font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    }
    .features-template-section .container {
        max-width: min(1680px, 95vw);
    }
    main .container {
        max-width: min(1680px, 95vw);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media (min-width: 1600px) {
    .header-template-fullwidth .header-template-top-bar .header-content-wrap,
    .header-template-fullwidth .navbar-elegant .navbar-elegant-content-wrap {
        max-width: min(1800px, 95vw);
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .hero-elegant-section {
        min-height: 100vh;
        max-height: none;
    }
    .hero-banner-carousel-section .hero-banner-carousel,
    .hero-banner-carousel-section .carousel-inner,
    .hero-banner-carousel-item {
        min-height: 100vh;
    }
    .hero-template .hero-elegant-body .container-fluid {
        max-width: min(1800px, 96vw);
        width: 100%;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .hero-elegant-title,
    .hero-template-title {
        font-size: clamp(2.75rem, 4.5vw, 5.5rem);
    }
    .hero-elegant-description {
        font-size: clamp(1.05rem, 1.35vw, 1.55rem);
        max-width: 600px;
    }
    .hero-badge-text {
        font-size: clamp(0.85rem, 1.1vw, 1rem);
    }
    .hero-brand-panel-outer {
        max-width: 540px;
        margin-right: 6rem;
    }
    .brand-panel-box {
        padding: 2rem 2.25rem;
        min-width: 420px;
    }
    .brand-panel-logo {
        max-width: 150px;
        height: 76px;
    }
    .index-page .container,
    .index-page-template .container {
        max-width: min(1800px, 95vw);
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .company-profile-section .container,
    .index-featured-section .container,
    .cta-template-section .container,
    .features-template-section .container {
        max-width: min(1800px, 95vw);
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .about-stats-section-company-profile {
        max-width: 80%;
        padding: 1.75rem 3.25rem;
    }
    .about-stats-section-company-profile .about-stat-number {
        font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    }
    .about-stats-section-company-profile .about-stat-label {
        font-size: 0.8rem;
    }
    .cta-template-section .container,
    .features-template-section .container {
        max-width: min(1800px, 95vw);
    }
    main .container {
        max-width: min(1800px, 95vw);
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}
@media (min-width: 1920px) {
    .header-template-fullwidth .header-template-top-bar .header-content-wrap,
    .header-template-fullwidth .navbar-elegant .navbar-elegant-content-wrap {
        max-width: min(1920px, 95vw);
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .hero-template .hero-elegant-body .container-fluid {
        max-width: min(1920px, 96vw);
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .hero-elegant-title,
    .hero-template-title {
        font-size: clamp(3rem, 5vw, 6rem);
    }
    .hero-elegant-description {
        font-size: clamp(1.1rem, 1.4vw, 1.65rem);
        max-width: 640px;
    }
    .hero-badge-text {
        font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    }
    .index-page .container,
    .index-page-template .container {
        max-width: min(1920px, 95vw);
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .company-profile-section .container,
    .index-featured-section .container,
    .cta-template-section .container,
    .features-template-section .container {
        max-width: min(1920px, 95vw);
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .about-stats-section-company-profile {
        max-width: 85%;
    }
    main .container {
        max-width: min(1920px, 95vw);
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Index page brand section: light beige background, white rounded box, horizontal logos */
.index-brand-section {
    background-color: #f5f0e8;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    margin-left: calc(-1 * var(--bs-gutter-x, 0.75rem));
    margin-right: calc(-1 * var(--bs-gutter-x, 0.75rem));
    padding-left: var(--bs-gutter-x, 0.75rem);
    padding-right: var(--bs-gutter-x, 0.75rem);
}
.index-brand-logos-box {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    max-width: 100%;
}
.index-brand-logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 1.5rem 2rem;
}
.index-brand-logo-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    transition: opacity 0.2s, transform 0.2s;
}
.index-brand-logo-item:hover {
    opacity: 0.85;
    transform: scale(1.03);
}
.index-brand-logo-img {
    max-height: 48px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
}
@media (min-width: 768px) {
    .index-brand-section {
        margin-left: calc(-1 * var(--bs-gutter-x, 1rem));
        margin-right: calc(-1 * var(--bs-gutter-x, 1rem));
        padding-left: var(--bs-gutter-x, 1rem);
        padding-right: var(--bs-gutter-x, 1rem);
    }
    .index-brand-logos-box {
        padding: 2.25rem 3rem;
    }
    .index-brand-logo-img {
        max-height: 56px;
        max-width: 140px;
    }
}
@media (max-width: 767.98px) {
    .index-brand-section {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .index-brand-logos-box {
        padding: 1.5rem 1rem;
    }
    .index-brand-logos-row {
        gap: 1rem 1.25rem;
        justify-content: center;
    }
    .index-brand-logo-img {
        max-height: 40px;
        max-width: 100px;
    }
}

/* Exclusive Brands Section */
.exclusive-brands-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.brand-section-header {
    width: 100%;
}
.exclusive-brands-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #000;
    text-align: center;
}
.exclusive-brands-section hr {
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0.2;
}
.brand-logo-item {
    padding: 1rem;
    height: 100px;
    transition: transform 0.2s, opacity 0.2s;
}
.brand-logo-item:hover {
    transform: scale(1.05);
    opacity: 0.8;
}
.brand-logo-img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s;
}
.brand-logo-item:hover .brand-logo-img {
    opacity: 0.85;
}
@media (max-width: 767.98px) {
    .exclusive-brands-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .exclusive-brands-section h2 {
        font-size: 1.5rem;
    }
    .brand-logos-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        align-items: flex-start;
    }
    .brand-logos-row > [class*="col-"] {
        flex: 0 0 calc(50% - 0.25rem);
        max-width: calc(50% - 0.25rem);
        display: flex;
        justify-content: center;
    }
    .brand-logo-item {
        position: relative;
        width: 138px;
        height: 138px;
        flex-shrink: 0;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        box-sizing: border-box;
    }
    .brand-logo-item .brand-logo-img {
        max-width: 85%;
        max-height: 85%;
        width: auto;
        height: auto;
        min-width: 50%;
        min-height: 40px;
        object-fit: contain;
    }
}