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

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    margin: 0;

}
.color-grid { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.color-btn { width:18px; height:18px; border-radius:50%; border:1px solid #999; cursor:pointer; }
.color-btn.active { outline:2px solid #111; outline-offset:2px; }
/* Universal hide helper */
.hidden {
  display: none !important;
}

/* 
/* ========== SCROLL ANIMATIONS ========== */
@keyframes fadeInUp {           
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Base animation class - applied to elements that should animate */
.animate-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
}

/* Animation states */
.animate-fade-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-slide-left {
    animation: slideInLeft 0.6s ease forwards;
}

.animate-slide-right {
    animation: slideInRight 0.6s ease forwards;
} 

/* Staggered delays for card grids */
.product-card:nth-child(1).animate-fade-up,
.featured-product-card:nth-child(1).animate-fade-up,
.product-slide .product-card:nth-child(1).animate-fade-up { animation-delay: 0.1s; }

.product-card:nth-child(2).animate-fade-up,
.featured-product-card:nth-child(2).animate-fade-up,
.product-slide .product-card:nth-child(2).animate-fade-up { animation-delay: 0.2s; }

.product-card:nth-child(3).animate-fade-up,
.featured-product-card:nth-child(3).animate-fade-up,
.product-slide .product-card:nth-child(3).animate-fade-up { animation-delay: 0.3s; }

.product-card:nth-child(4).animate-fade-up,
.featured-product-card:nth-child(4).animate-fade-up,
.product-slide .product-card:nth-child(4).animate-fade-up { animation-delay: 0.4s; }

.product-card:nth-child(5).animate-fade-up,
.featured-product-card:nth-child(5).animate-fade-up { animation-delay: 0.5s; }

.product-card:nth-child(6).animate-fade-up,
.featured-product-card:nth-child(6).animate-fade-up { animation-delay: 0.6s; }

/* ========== PRODUCT DETAILS PAGE FADE-IN ========== */
.product-details-section {
    padding: 2rem 0;
    flex: 1;
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

.product-details {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    animation: fadeInUp 0.6s ease;
}

.product-details-image {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    animation: fadeIn 0.5s ease;
}

.product-details-info {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    padding: 20px;
    animation: fadeInUp 0.6s ease 0.15s backwards;
}

/* Product details image - no border */
.product-details-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ========== CLICKABLE BUTTONS FIX ========== */
.product-card,
.featured-product-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.product-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
    background-color: white;
    padding: 0;
    border: none;
    border-radius: 0;
    display: block;
}

.product-info {
    padding: 1rem;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 2;
}

.product-buttons {
    display: flex;
    gap: 0.5rem;
    position: relative;
    z-index: 10;
    margin-top: auto;
}

.add-to-cart-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    position: relative;
    z-index: 10;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.add-to-cart-btn:hover{
        color:white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.add-to-cart-btn:active,
.view-details-btn:active {  
    transform: translateY(0);
}
.topage{
    color: white;
    text-decoration: none;

}
/* Featured product card - no border */
.featured-product-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
}

.featured-product-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
    background-color: #f8f9fa;
    padding: 10px;
    border: none;
    border-radius: 0;
}
.qty-stepper{
  display:flex;
  align-items:center;
  gap:5px;
}

.qty-stepper #qty-input{
  width:70px;
  height:42px;
  text-align:center;
  border:1px solid black;
  border-radius:10px;
  font-size:16px;
}

.qty-stepper .qty-btn{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid black;
  background:black;
  cursor:pointer;
  font-size:18px;
  font-weight:700;
}/* ✅ Add this CSS (in style.css or in your product-details page <style>) */

/* MAIN IMAGE */
.product-large-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* ===================== MODEL OPTIONS (Buttons) ===================== */
.model-selector {
  margin: 14px 0;
}

.model-title {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 15px;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.model-btn {
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  color: #111;
  padding: 10px 8px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease;
  user-select: none;
}

/* hover */
.model-btn:hover {
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* selected state (your JS adds .selected) */
.model-btn.selected {
  border-color: #111;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  font-weight: 700;
}

/* keyboard focus */
.model-btn:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}


.hint-black { color: #000 !important; 
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.8;}
.hint-white { color: #fff !important;
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.8; }
main {
    position: relative;
    z-index: 1;
    /* No padding-top - content starts immediately below fixed navbar */
}

/* Hero section */
.hero {
    padding: 3rem 0;
}

/* Products section */
.products-section {
    padding: 2rem 0;
}


/* About section */
.about-section {
    padding: 2rem 20px;
}

/* Cart section */
.cart-section {
    padding: 1.5rem 0;
    margin-bottom: 1rem;
}

/* Contact section */
.contact-section {
    padding: 2rem 0;
}

/* Related photos section */
.related-photos-section {
    padding: 2rem 0;
}

/* Featured products section */
.featured-products-top {
    padding: 1.5rem 1rem;
}

/* Product details section */
.product-details-section {
    padding: 1.5rem 0;
}


.product-details-info {
    margin-top: 0;
}

.container {
    
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    min-height: 50px

}
.social-icons {
    display: flex;
    gap: 15px;
    font-size: 1.5rem;
    
}
.social-icons a {
    color: white;
    font-size: 28px;
}
.container-footer {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 1rem;
    min-height: 50px;

}



.logo-container {
  height: 50px;          /* navbar logo area height */
  display: flex;
  align-items: center;
  flex-shrink: 0;        /* prevents shrinking on mobile */
}

.logo {
  height: 40px;          /* logo size */
  width: auto;           /* keep ratio */
  object-fit: contain;   /* no distortion */
  display: block;
}

.hamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    z-index: 1001;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.nav-menu {
    list-style: none;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #000413;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    margin: 0;
}


.nav-menu.active {
    display: block;
}

.nav-menu li {
    border-bottom: 1px solid #eee;
}

.nav-menu a {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: white;
    transition: background-color 0.3s;
}

.nav-menu a:hover {
    background-color: #f8f9fa;
    color: #020617;
}

/* Login / Sign in button in navbar */
.nav-login-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1rem !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-radius: 25px !important;
    margin: 0.5rem 0 !important;
    font-weight: 500 !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

.nav-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    color: white !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

@media (min-width: 1025px) {
    .nav-login-btn {
        margin: 0 0.5rem !important;
        padding: 0.4rem 1rem !important;
    }
}

/* ========== HERO SECTION - POSITIONING FOR SPACE EFFECT ========== */
.hero {
    background: #020617;
    color: white;
    padding: 4rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
}
.p-footer{
    font-size: small;
}

.hero-content h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.cta-button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: white ;
    color: black;
}
.cta-header {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}
#btn-gtproducts{
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;

}

#btn-gtproducts:hover {
    background-color:  #000413;
    color: white;
}
.btn-header:hover {
    background-color: white ;
    color: black;
}

/* Products Section */
.products-section {
    padding: 2rem 0;
}

.products-section h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.filter-container {
    margin-bottom: 2rem;
    text-align: center;
}

.filter-container label {
    margin-right: 0.5rem;
    font-weight: bold;
}

#model-filter {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.product-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.product-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    
}

.product-info {
    padding: 1rem;
}

.product-name {
    font-size: 1.2rem;
    font-weight: bold;
    
}

.product-model {
    color: #666;
    margin-bottom: 0.5rem;
}

.product-price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #007bff;
    margin:0;
}
.cart-section {
    padding: 2rem 0;
    background-color: white;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    position: relative;
    z-index: 10;
        padding-top: calc(2rem + 20px);
}

.cart-section h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #000413;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 1rem;
}

.cart-item-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

.cart-item-info {
    flex: 1;
    min-width: 200px;
}

.cart-item-info h3 {
    margin-bottom: 0.5rem;
}

.cart-item-info p {
    color: #666;
    margin-bottom: 0.25rem;
}

.cart-total {
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 1rem;
    text-align: center;
}

.remove-from-cart-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.remove-from-cart-btn:hover {
    background-color: #c82333;
}

.remove-from-cart-btn i {
    font-size: 14px;
}
/* Contact Section */
.contact-section {
    padding: 2rem 0;
    background-color: #eef2f7;
}

.contact-section h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.contact-section p {
    text-align: center;
    font-size: 1.1rem;
}

.contact-section a {
    color: #007bff;
    text-decoration: none;
}

.contact-section a:hover {
    text-decoration: underline;
}

/* Success Message */
.success-message {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background-color: #000413;
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    z-index: 1001;

    opacity: 0;
    pointer-events: none; /* ✅ THIS FIXES FREEZE */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.success-message.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Footer - Full width at bottom */
footer {
    background: #000413;
    color: white;
    display: flex;
    text-align: center;
    padding: 0;
    width: 100%;
    margin-top: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 10;
}

footer .container-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    max-width: 100%;
}

footer .social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

footer .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    cursor: pointer;
}


footer .social-icons a:hover {
    background-color: #007bff;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

footer .copyright {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

/* Tablet styles */
@media (min-width: 768px) {
     .products-hero-section h1 {
        font-size: 2.5rem;
    }

    .products-hero-section p {
        font-size: 1.2rem;
    }
      .about-section {
        padding: 0 15px;
    }
    
    .about-section h1 {
        font-size: 1.8rem;
    }
    
    .about-box {
        padding: 20px;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
      .related-photos-section {
        padding: 2rem 0;
    }

    .related-photos-title {
        font-size: 1.5rem;
    }

    .related-photos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .related-photo-item {
        border-radius: 8px;
    }c

    .related-photo-item img {
        padding: 10px;
    }
    .hamburger {
        display: none;
    }

    .nav-menu {
        display: flex;
        position: static;
        width: auto;
        background-color: transparent;
        box-shadow: none;
    }

    .nav-menu li {
        border-bottom: none;
    }

    .nav-menu a {
        padding: 0.5rem 1rem;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .product-card {
        width: 280px;
        margin: 0 auto;
    }

    .product-image {
        height: auto;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.2rem;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2rem;
    }

    .product-card {
        width: 320px;
        margin: 0 auto;
    }

    .product-image {
        height: auto;
    }

    .hero {
        padding: 6rem 0;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-content p {
        font-size: 1.3rem;
    }

    .products-section h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 470px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

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

    .product-slide .product-card {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
    }
}

/* Floating Cart Button */
.floating-cart-btn {
    position: fixed;
    bottom: 80px; /* Above footer on mobile */
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
}

.floating-cart-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
    background-color: #0056b3;
}

.floating-cart-btn:active {
    transform: scale(0.95);
}

.floating-cart-btn i {
    font-size: 24px;
    color: white;
}

.floating-cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff4757;
    color: white;
    font-size: 12px;
    font-weight: bold;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid white;
    transition: transform 0.3s ease;
}

.floating-cart-count.pulse {
    animation: pulse-animation 0.3s ease;
}

@keyframes pulse-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Mobile styles for floating cart - Position above footer, not screen bottom */
@media (max-width: 767px) {
    .floating-cart-btn {
        width: 55px;
        height: 55px;
        bottom: 70px; /* Position above footer */
        right: 15px;
    }

    .floating-cart-btn i {
        font-size: 22px;
    }

    .floating-cart-count {
        width: 20px;
        height: 20px;
        font-size: 11px;
        min-width: 20px;
    }
    
   
    .product-slide {
        display: flex;
        gap: 0.75rem;
    }

    .product-slide .product-card {
        flex: 0 0 calc(50% - 0.375rem);
        max-width: calc(50% - 0.375rem);
    }

    .slider-btn {
        width: 32px;
        height: 32px;
    }

    .slider-btn i {
        font-size: 14px;
    }
    
    /* Featured products mobile - 2 per row */
    .featured-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .featured-product-card {
        min-width: 0;
    }
}

/* ============================================
   UNIFIED MOBILE SLIDER STYLES (max-width: 767px)
   Fixes: image display, card height, spacing, button alignment
   ============================================ */
@media (max-width: 767px) {
    /* ---- Slider Container ---- */
    .product-slider-container {
        padding: 0 16px !important;
        overflow: visible;
    }
    
    /* Fade edges - 18px like requested */
    .product-slider-container::before {
        width: 18px !important;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.5) 60%, transparent 100%);
    }
    
    .product-slider-container::after {
        width: 18px !important;
        background: linear-gradient(to left, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.5) 60%, transparent 100%);
    }
    
    /* ---- Slider Buttons ---- */
    .slider-btn {
        width: 28px !important;
        height: 28px !important;
    }
    
    .slider-btn i {
        font-size: 12px !important;
    }
    
    /* ---- Slider Cards - Match Featured Products Style ---- */
    .product-slide {
        gap: 0.5rem !important;
    }
    
    .product-slide .product-card {
        flex: 0 0 calc(50% - 0.25rem) !important;
        max-width: calc(50% - 0.25rem) !important;
        min-height: auto !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid #f0f0f0 !important;
    }
    
    /* ---- Slider Card Image - Fixed Display ---- */
    .product-slide .product-card .product-image {
        height: 130px !important;
        width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        padding: 10px !important;
        background-color: #f8f9fa !important;
        border-radius: 0 !important;
    }
    
    /* ---- Slider Card Info ---- */
    .product-slide .product-card .product-info {
        padding: 0.75rem !important;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .product-slide .product-card .product-name {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .product-slide .product-card .product-model {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .product-slide .product-card .product-price {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* ---- Buttons - Stacked Vertically, Full Width ---- */
    .product-slide .product-card .product-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
        margin-top: auto !important;
    }
    
    .product-slide .product-card .add-to-cart-btn,
    .product-slide .product-card .view-details-btn {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        padding: 0.65rem 0.5rem !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-radius: 50px !important;
        flex: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Add to Cart Button Style */
    .product-slide .product-card .add-to-cart-btn {
        background-color: #007bff !important;
        color: white !important;
        border: none !important;
    }
    
    .product-slide .product-card .add-to-cart-btn:hover {
        background-color: #000413 !important;
        color: white !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }
    
    /* View Details Button - Same as Add to Cart */
    .product-slide .product-card .view-details-btn {
        background-color: #007bff !important;
        color: white !important;
        border: none !important;
        text-decoration: none !important;
    }
    
    .product-slide .product-card .view-details-btn:hover {
        background-color: #000413 !important;
        color: white !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }
    
    /* For <a> tags acting as buttons */
    .product-slide .product-card a.view-details-btn {
        display: block !important;
        line-height: 1.4 !important;
    }
    
    /* Active states */
    .product-slide .product-card .add-to-cart-btn:active,
    .product-slide .product-card .view-details-btn:active {
        transform: translateY(0);
    }
}

/* ============================================
   ADD-TO-CART POPUP (UNIFIED - IMAGE LEFT, DETAILS RIGHT)
   ============================================ */
.cart-popup {
    position: fixed;
    inset: 0;
    display: none;              /* MUST be none when closed - prevents click freeze */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999999;
    pointer-events: none;       /* no click blocking when closed */
}

.cart-popup.active {
    display: flex;
    pointer-events: auto;       /* allow clicks only when active */
}

.cart-popup-content {
    position: relative;
    background: white;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: row;
    z-index: 1000000;
    pointer-events: auto;       /* MUST be clickable */
}

.cart-popup.active .cart-popup-content {
    transform: scale(1);
}

/* Popup Image - Left Side */
.cart-popup-image {
    flex: 0 0 200px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 16px 0 0 16px;
}

.cart-popup-image img {
    width: 100%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* Popup Details - Right Side */
.cart-popup-details {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.cart-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cart-popup-header h3 {
    color: #000413;
    font-size: 1.3rem;
    margin: 0;
}

.cart-popup-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.3s ease;
}

.cart-popup-close:hover {
    color: #333;
}

.cart-popup-product {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    flex: 1;
}

.cart-popup-product h4 {
    color: #000413;
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}

.cart-popup-product p {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
}

.cart-popup-price {
    font-size: 1.3rem !important;
    font-weight: bold;
    color: #007bff !important;
    margin-top: 0.5rem !important;
}

/* Quantity Selector */
.cart-popup-qty-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom:  20px;
    padding: 1rem;
    background: #e9ecef;
    border-radius: 10px;
}

.qty-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #007bff;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.qty-btn:hover {
    background: #0056b3;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.qty-btn:active {
    transform: scale(0.95);
}

.qty-btn-minus {
    background: #6c757d;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.qty-btn-minus:hover {
    background: #5a6268;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.qty-btn-minus:disabled {
    background: #ddd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.qty-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #000413;
    min-width: 50px;
    text-align: center;
}

.cart-popup-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: auto;
}

.cart-popup-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-popup-btn-cancel {
    background-color: #6c757d;
    color: white;
}

.cart-popup-btn-cancel:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
}

.cart-popup-btn-confirm {
    background-color: #28a745;
    color: white;
}

.cart-popup-btn-confirm:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* Mobile Responsive for Cart Popup */
@media (max-width: 600px) {
    .cart-popup-content {
        flex-direction: column;
        width: 95%;
    }
    
    .cart-popup-image {
        flex: none;
        padding: 1rem;
        border-radius: 16px 16px 0 0;
    }
    
    .cart-popup-image img {
        max-width: 150px;
    }
    
    .cart-popup-details {
        padding: 1.25rem;
    }
    
    .cart-popup-header h3 {
        font-size: 1.1rem;
    }
    
    .cart-popup-qty-selector {
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .qty-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .qty-value {
        font-size: 1.5rem;
        min-width: 40px;
    }
    
    .cart-popup-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .cart-popup-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Product Slider Styles */
.product-slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
    overflow: hidden;
}

.product-slider {
    display: flex;
    will-change: transform;
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
}

.product-slide {
    display: flex;
    gap: 1rem;
    min-width: 100%;
    justify-content: center;
    flex-shrink: 0;
    padding: 10px 0;
}

.product-slide .product-card {
    flex: 0 0 calc(25% - 0.75rem);
    max-width: calc(25% - 0.75rem);
    height: auto;
    display: flex;
    flex-direction: column;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #000413;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.slider-btn:hover {
    background-color: #007bff;
}

.slider-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slider-btn-prev {
    left: 0;
}

.slider-btn-next {
    right: 0;
}

.slider-btn i {
    font-size: 18px;
}

.view-all-products {
    text-align: center;
    margin-top: 2rem;
}

.section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.no-products {
    text-align: center;
    padding: 2rem;
    font-size: 1.1rem;
    color: #666;
    width: 100%;
}

/* View Details Button */
.view-details-btn {
    background-color: #000413;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    flex: 1;
}

.view-details-btn:hover {
    background-color: #0056b3;
}

/* Slider Details Button */
.slider-details-btn {
    background-color: #000413;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.slider-details-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.product-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Responsive slider styles */
/* Large screens (> 1024px): 4 cards per slide */
.product-slide .product-card {
    flex: 0 0 calc(25% - 0.75rem);
    max-width: calc(25% - 0.75rem);
    height: auto;
    display: flex;
    flex-direction: column;
}

/* Match featured product card dimensions for slider cards */
.product-slide .product-card {
    min-height: 380px;
}

.product-slide .product-card .product-image {
    height: 220px;
    object-fit: contain;
    object-position: center;
    padding: 15px;
    background-color: #f8f9fa;
}

.product-slide .product-card .product-info {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Medium screens (481px - 1024px): 2 cards per slide */
@media (max-width: 1024px) {
    .product-slide .product-card {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
    }
    
    .product-slide {
        gap: 1.5rem;
    }
    
    .product-slide .product-card {
        min-height: 380px;
    }
    
    .product-slide .product-card .product-image {
        height: 200px;
        padding: 12px;
    }
}
  
/* Mobile screens (≤ 767px): 2 cards per slide */
@media (max-width: 767px) {
     .view-mode-btn.grid-3-columns {
    display: none;}
    .featured-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-product-image {
        height: auto;
    }

    .featured-title {
        font-size: 1.4rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    .product-buttons {
        flex-direction: column;
        gap: 0.4rem;
    }

    .product-buttons button {
        width: 100%;
        padding: 0.7rem;
        font-size: 0.9rem;
    }
    .product-slider-container::before {
        width: 35px;
    }
    
    .product-slider-container::after {
        width: 35px;
    }
    
    .product-slider-container {
        padding: 0 30px;
    }
    
    .related-photos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .related-photo-item img {
        padding: 8px;
    }

    .lightbox-close {
        top: 10px;
        right: 15px;
        font-size: 30px;
    }

    .lightbox-prev,
    .lightbox-next {
        font-size: 30px;
        padding: 10px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }
    .product-slider-container {
        padding: 0 30px;
    }

    .product-slide .product-card {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
    }

    .slider-btn {
        width: 28px;
        height: 28px;
    }

    .product-buttons {
        flex-direction: column;
    }

    .add-to-cart-btn,
    .view-details-btn {
        width: 100%;
    }
}

/* Products Hero Section */
.products-hero-section {
    background: #020617;
    color: white;
    padding: 5rem 0;
    text-align: center;
}

.products-hero-section h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.products-hero-section p {
    font-size: 1.1rem;
    opacity: 0.9;
}

@media (min-width: 1024px) {
    .products-hero-section h1 {
        font-size: 3rem;
    }
}



.product-image.error {
    object-fit: contain;
    padding: 20px;
    background-color: #f0f0f0;
}

.product-large-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background-color: #f0f0f0;
}

.product-large-image.error {
    object-fit: contain;
    padding: 40px;
    min-height: 300px;
}

/* Loading skeleton for images */
.product-image-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========== ABOUT PAGE - TITLE STYLING ========== */
.welcome-box {
    background: linear-gradient(135deg, #000413 0%, #1a2a4a 100%);
    color: white;
}

.welcome-box h2 {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    display: inline-block;
}

.welcome-box p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 0;
    font-weight: 400;
}

/* ========== WHATSAPP ICON - GLOBAL FIX ========== */
.social-icons a {
    color: white;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: transparent;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icons a:hover {
    background-color: #007bff;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

/* Footer social icons specific styling */
footer .social-icons a {
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

footer .social-icons a:hover {
    background-color: #007bff;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

.social-icons a:active {
    transform: scale(0.95);
}

.contact-box ul li a {
    color: #60a3ff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: 5px;
}

.contact-box ul li a:hover {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.contact-section a {
    color: #007bff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.contact-section a:hover {
    background-color: #25D366;
    color: white;
    box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3);
}

/* ========== MOBILE FIX: Featured Products Button Visibility ========== */
@media (max-width: 767px) {
    .featured-products-grid .product-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    
    .featured-products-grid .add-to-cart-btn,
    .featured-products-grid .view-details-btn {
        flex: 1;
        padding: 0.65rem 0.5rem;
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    
    .featured-products-grid .product-info {
        padding: 0.75rem;
    }
    
    .featured-products-grid .product-name {
        font-size: 0.95rem;
    }
    
    .featured-products-grid .product-price {
        font-size: 1.1rem;
    }
}

/* ========== CART CONFIRMATION MODAL ========== */
.confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.confirmation-modal.active {
    opacity: 1;
    visibility: visible;
}

.confirmation-modal-content {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.confirmation-modal.active .confirmation-modal-content {
    transform: scale(1);
}

.confirmation-modal-content h3 {
    color: #000413;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.confirmation-modal-content p {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.confirmation-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.confirmation-buttons button {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.confirmation-btn-cancel {
    background-color: #6c757d;
    color: white;
}

.confirmation-btn-cancel:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
}

.confirmation-btn-confirm {
    background-color: #dc3545;
    color: white;
}

.confirmation-btn-confirm:hover {
    background-color: #c82333;
    transform: translateY(-2px);
}

/* ========== EMPTY CART STATE ========== */
.empty-cart-message {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
}

.empty-cart-message p {
    font-size: 1.5rem;
    color: #28a745;
    margin-bottom: 1rem;
}

.empty-cart-message span {
    font-size: 2rem;
}

/* Hide checkout button when cart is empty */
#checkout-btn.hidden {
    display: none;
}

/* ========== CART ITEM ACTIONS ========== */
.cart-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cart-item-actions .view-item-btn,
.cart-item-actions .remove-from-cart-btn {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.view-item-btn {
    background-color: #007bff;
    color: white;
}

.view-item-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    color: white;
}

.remove-from-cart-btn {
    background-color: #dc3545;
    color: white;
}

.remove-from-cart-btn:hover {
    background-color: #c82333;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .cart-item-actions {
        flex-direction: row;
        width: 100%;
    }
    
    .cart-item-actions .view-item-btn,
    .cart-item-actions .remove-from-cart-btn {
        flex: 1;
        justify-content: center;
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* Animated bottom line for product title */
.product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transition: width 0.4s ease;
}

.product-card:hover {
    transform: translateX(8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.product-card:hover::after {
    width: 100%;
}

.product-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
    background-color: #f8f9fa;
    
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-info {
    padding: 1.25rem;
    padding-top: 0;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-info::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.25rem;
    right: 1.25rem;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.product-card:hover .product-info::after {
    transform: scaleX(1);
}

.product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0;
    color: #1a1a2e;
    transition: color 0.3s ease;
}

.product-card:hover .product-name {
    color: #007bff;
}

.product-model {
    color: #888;
     
    font-size: 0.9rem;
}

.product-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.product-card:hover .product-price {
    transform: scale(1.05);
}

/* ========== SEARCH BAR STYLES ========== */
.search-container {
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
}

.model-search-input {
    width: 100%;
    max-width: 500px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    outline: none;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.model-search-input::placeholder {
    color: #999;
    font-weight: 400;
}

.model-search-input:focus {
    border-color: #007bff;
    box-shadow: 0 4px 20px rgba(0, 123, 255, 0.25), 0 0 0 4px rgba(0, 123, 255, 0.1);
}

.model-search-input:hover {
    border-color: #b0d4ff;
}

/* Blur effect for non-matching products */
.product-card.blurred {
    filter: blur(4px);
    opacity: 0.4;
    pointer-events: none;
    transition: all 0.4s ease;
}

.product-card.blurred:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.product-card.blurred::after {
    width: 0;
}

/* Hide blurred products on mobile */
@media (max-width: 767px) {
    .product-card.blurred {
        display: none;
    }
    .model-search-input {
        width: auto;
    }
    .grid-3-columns{
       display: none;
    }
}

/* No products message when search returns nothing */
.no-search-results {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
    font-size: 1.1rem;
    grid-column: 1 / -1;
}

/* ========== PRODUCT DETAILS PAGE - DYNAMIC STYLING ========== */
.product-details-section {
    padding: 3rem 0;
    flex: 1;
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

.product-details {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
    align-items: flex-start;
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-details-image {
    flex: 1;
    min-width: 320px;
    max-width: 500px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.product-details-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 168, 255, 0.05) 100%);
    z-index: 1;
    pointer-events: none;
}

.product-large-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    transition: transform 0.4s ease;
    position: relative;
    z-index: 0;
}

.product-details-image:hover .product-large-image {
    transform: scale(1.08);
}

.product-details-info {
    flex: 1;
    min-width: 320px;
    max-width: 500px;
    padding: 1.5rem;
    animation: fadeInUp 0.6s ease 0.2s both;
}

.product-details-name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #1a1a2e;
    position: relative;
    display: inline-block;
}

.product-details-name::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.product-details-info:hover .product-details-name::after {
    width: 100px;
}

.product-details-model {
    font-size: 1.1rem;
    color: #888;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-details-model::before {
    content: '📱';
}

.product-details-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: #007bff;
    margin-bottom: 0;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 168, 255, 0.05) 100%);
    border-radius: 12px;
    display: inline-block;
    transition: all 0.3s ease;
    
}

.product-details-info:hover .product-details-price {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

.product-details-description {
    font-size: 1rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid #007bff;
    transition: all 0.3s ease;
}

.product-details-description:hover {
    background: #eef2f7;
}

.product-details-actions {
    
    margin-top: 1.5rem;
}

.back-to-products-btn:hover {
    background-color: #5a6268;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
    color: white;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 767px) {
    .product-details {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .product-details-image,
    .product-details-info {
        max-width: 100%;
        min-width: 100%;
    }

    .product-details-name {
        font-size: 1.6rem;
    }

    .product-details-price {
        font-size: 1.8rem;
        padding: 0.75rem 1.25rem;
    }
    
    .social-icons a {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

/* ========== FAQ ACCORDION STYLES ========== */
.faq-box {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

.faq-box h2 {
    color: #000413;
    font-size: 1.5rem;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #007bff;
    display: inline-block;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    border-radius: 10px;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: #007bff;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    font-weight: 600;
    color: #1a1a2e;
    font-size: 1rem;
    transition: all 0.3s ease;
    user-select: none;
}

.faq-question:hover {
    color: #007bff;
    background: rgba(0, 123, 255, 0.05);
}

.faq-question span {
    flex: 1;
    padding-right: 15px;
}

.faq-question i {
    font-size: 14px;
    color: #666;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* Active state for FAQ item */
.faq-item.active .faq-question {
    color: #007bff;
    background: rgba(0, 123, 255, 0.08);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: #007bff;
}
/* FAQ Answer - Hidden by default */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-box .faq-answer p {
    padding: 0 20px 20px 20px;
    color: black!important;
    line-height: 1.8;
    margin: 0;
    font-size: 0.95rem;
}
.faq-text{
    color: black;
}

/* Active state - expand answer */
.faq-item.active .faq-answer {
    max-height: 300px; /* Arbitrary large value, will be set by JS */
}

/* Mobile responsive FAQ */
@media (max-width: 767px) {
    .faq-box {
        padding: 20px;
    }
    
    .faq-box h2 {
        font-size: 1.3rem;
    }
    
    .faq-question {
        padding: 15px;
        font-size: 0.95rem;
    }
    
    .faq-answer p {
        padding: 0 15px 15px 15px;
        font-size: 0.9rem;
    }
}

/* ========== POPULAR SEARCHES SECTION ========== */
.popular-searches-box {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

.popular-searches-box h2 {
    color: #000413;
    font-size: 1.5rem;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #007bff;
    text-align: center!important;
}

.popular-searches-grid {
     display: flex;
    flex-direction: column; 
    gap: 20px;
}

.popular-series {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    width: 100%;
}

.popular-series:hover {
    border-color: #007bff;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.15);
}

.popular-series h3 {
    color: #007bff!important;
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.popular-series h3 i {
    color: #007bff;
    font-size: 1.3rem;
}

.popular-models {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popular-models li {
    margin-bottom: 8px;
}

.popular-models li a {
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
}

.popular-models li a:hover {
    color: #007bff;
    background: rgba(0, 123, 255, 0.08);
    padding-left: 15px;
}

/* Mobile responsive Popular Searches */
@media (max-width: 767px) {
    .popular-searches-box {
        padding: 20px;
    }
    
    .popular-searches-box h2 {
        font-size: 1.3rem;
    }
    
     .popular-searches-grid {
        gap: 15px;
    }
    
    .popular-series {
        padding: 15px;
    }
    
    .popular-series h3 {
        font-size: 1rem;
    }
    
    .popular-models li a {
        font-size: 0.85rem;
    }
}

/* ========== ABOUT PAGE STYLES ========== */
.about-section {
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px 20px;
}

.about-section h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5rem;
    color: #000413;
}
.about-box-index{
    background: #000413;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}
.about-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.about-box {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.about-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.about-box h2 {
    color: #000413;
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
    display: inline-block;
}

.about-box h3 {
    color: #007bff;
    font-size: 1.2rem;
    margin-top: 20px;
    margin-bottom: 10px;
}

.about-box h4 {
    color: black;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: normal;
}

.about-box p {
    line-height: 1.8;
    color: black;
    margin-bottom: 15px;
}

.about-box ul {
    list-style: none;
    padding: 0;
}

.about-box ul li {
    padding: 12px 15px;
    background: #f8f9fa;
    margin-bottom: 10px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    transition: all 0.3s ease;
}

.about-box ul li:hover {
    background: #eef2f7;
    transform: translateX(5px);
}

.about-box ul li strong {
    color: #000413;
}

/* Contact box special styling */
.contact-box {
    background: linear-gradient(135deg, #000413 0%, #1a2a4a 100%);
    color: white;
}

.contact-box h2 {
    color: white;
    border-bottom-color: #007bff;
}

.contact-box p {
    color: #ddd;
}

.contact-box ul li {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: #007bff;
}

.contact-box ul li:hover {
    background: rgba(255, 255, 255, 0.15);
}

.contact-box ul li strong {
    color: white;
}

/* ========== FEATURE BOX - NAVBAR THEME STYLING ========== */
.about-box {
    background: #000413;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 8px 30px rgba(0, 4, 19, 0.25);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.about-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 4, 19, 0.35);
}

.about-box h2 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #007bff;
    display: inline-block;
}

.about-box h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transition: all 0.4s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.about-box:hover h2::after {
    width: 100%;
}

.about-box:hover h2 {
    color: #007bff;
}

.about-box h3 {
    color: white;
    font-size: 1.2rem;
    margin-top: 20px;
    margin-bottom: 10px;
}

.about-box h4 {
    color: white;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: normal;
}

.about-box p {
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
}

.about-box ul {
    list-style: none;
    padding: 0;
}

.about-box ul li {
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 10px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
}

.about-box ul li:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.about-box ul li strong {
    color: white;
}

/* Feature Grid - Responsive 3 columns desktop, 1 column mobile */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* Feature Items - Navbar Theme */
.feature-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-item:hover {
    background: #007bff;
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.4);
    border-color: transparent;
}

.feature-item i {
    font-size: 2.5rem;
    color: #007bff;
    margin-bottom: 18px;
    transition: all 0.3s ease;
    display: inline-block;
}

.feature-item:hover i {
    color: white;
    transform: scale(1.15);
}

.feature-item h4 {
    color: white;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.feature-item:hover h4 {
    color: white;
}

.feature-item p {
    font-size: 0.95rem;
    margin: 0;
    transition: all 0.3s ease;
    color: white!important;
    line-height: 1.6;
}

.feature-item:hover p {
    color:  white!important;
}

/* Tablet - 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - 1 column */
@media (max-width: 767px) {
    .about-box {
        padding: 20px 15px;
        border-radius: 12px;
    }
    
    .about-box h2 {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .feature-item {
        padding: 25px 15px;
    }
    
    .feature-item i {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .feature-item h4 {
        font-size: 1.1rem;
    }
    
    .feature-item p {
        font-size: 0.9rem;
    }
}


/* ========== GLOBAL BUTTON STYLING - 50px BORDER-RADIUS ========== */
.cta-button,
.add-to-cart-btn,
.view-details-btn,
.slider-details-btn,
.remove-from-cart-btn,
.back-to-products-btn,
#checkout-btn,
.floating-cart-btn,
.slider-btn {
    border-radius: 50px !important;
}

/* Ensure input buttons also get the style */
button[type="submit"],
button[type="button"] {
    border-radius: 50px;
}

/* ========== ABOUT PAGE - WELCOME/CONTACT BOX STYLING ========== */
/* Both .welcome-box and .contact-box share the same styles for consistency */
.welcome-box,
.contact-box {
    background: linear-gradient(135deg, #000413 0%, #1a2a4a 100%);
    color: white;
}

.welcome-box h2,
.contact-box h2 {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    display: inline-block;
    position: relative;
}

.welcome-box p,
.contact-box p {
    color: #ddd;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 0;
    font-weight: 400;
}

.welcome-box ul li,
.contact-box ul li {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: #007bff;
}

.welcome-box ul li:hover,
.contact-box ul li:hover {
    background: rgba(255, 255, 255, 0.15);
}

.welcome-box ul li strong,
.contact-box ul li strong {
    color: white;
}

/* ========== ABOUT PAGE - TITLE HOVER LINES ANIMATION ========== */
.about-box h2 {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.about-box h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transition: all 0.4s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.about-box h2:hover::after {
    width: 100%;
}

.about-box h2:hover {
    color: #007bff;
}

/* Section titles with animated underline */
.about-section h1 {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.about-section h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transition: all 0.4s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.about-section h1:hover::after {
    width: 100px;
}

/* H3 titles with animated underline */
.about-box h3 {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}

.about-box h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transition: all 0.4s ease;
    border-radius: 2px;
}

.about-box h3:hover::after {
    width: 80px;
}

.about-box h3:hover {
    color: #007bff;
}

/* H4 titles with animated underline */
.about-box h4 {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.about-box h4::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transition: all 0.4s ease;
    border-radius: 2px;
}

.about-box h4:hover::after {
    width: 100%;
}

.about-box h4:hover {
    color: #007bff;
}

/* Feature item titles with animated underline */
.feature-item h4 {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.feature-item h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transition: all 0.4s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.feature-item h4:hover::after {
    width: 80px;
}

/* ========== FEATURED PRODUCTS SECTION - TOP OF SLIDER ========== */
.featured-products-top {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 1rem;
    background: linear-gradient(180deg, rgba(0, 123, 255, 0.03) 0%, transparent 100%);
    border-radius: 16px;
}

.featured-title {
    font-size: 2rem;
    font-weight: 700;
    color: #000413;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.featured-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transition: all 0.4s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.featured-title:hover::after {
    width: 120px;
}

.featured-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.featured-product-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
}

.featured-product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.featured-product-card:hover {
    transform: translateX(8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.featured-product-card:hover::before {
    transform: scaleX(1);
}

.featured-product-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
    background-color: #f8f9fa;
}

.featured-product-card:hover .featured-product-image {
    transform: scale(1.08);
}

.featured-product-info {
    padding: 1.5rem;
    text-align: center;
}

.featured-product-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.featured-product-card:hover .featured-product-name {
    color: #007bff;
}

.featured-product-model {
    color: #888;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.featured-product-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 1.25rem;
    display: block;
    transition: transform 0.3s ease;
}

.featured-product-card:hover .featured-product-price {
    transform: scale(1.08);
}

.featured-product-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 0.85rem 1.75rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    text-decoration: none;
    display: inline-block;
}

.featured-product-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
    background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
    color: white;
}

.view-all-featured {
    margin-top: 1.5rem;
}

.view-all-featured .cta-button {
    background: linear-gradient(135deg, #000413 0%, #1a2a4a 100%);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

.view-all-featured .cta-button:hover {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

/* Slider divider */
.slider-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
    padding: 0 1rem;
}

.divider-line {
    flex: 1;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #007bff, transparent);
}

.divider-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #007bff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ========== PRODUCT SLIDER - TRANSPARENT FADE EDGES ========== */
.product-slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
    overflow: hidden;
}

/* Left fade edge */
.product-slider-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 70%, transparent 100%);
    z-index: 5;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Right fade edge */
.product-slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 70%, transparent 100%);
    z-index: 5;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Adjust slider buttons to be above the fade */
.product-slider-container .slider-btn {
    z-index: 10;
}

/* Make fade more subtle on mobile */
@media (max-width: 767px) {
    .product-slider-container::before {
        width: 50px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.5) 60%, transparent 100%);
    }
    
    .product-slider-container::after {
        width: 50px;
        background: linear-gradient(to left, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.5) 60%, transparent 100%);
    }
    
    .product-slider-container {
        padding: 0 40px;
    }
}

 

/* ========== RESPONSIVE FEATURED PRODUCTS ========== */
@media (max-width: 1024px) {
    .featured-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .featured-product-image {
        height: auto;
    }
}

@media (max-width: 767px) {
    .featured-products-top {
        padding: 1.5rem 0.75rem;
        margin-bottom: 2rem;
    }

    .featured-title {
        font-size: 1.6rem;
    }

    .featured-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .featured-product-image {
        height: auto;
    }

    .featured-product-info {
        padding: 1rem;
    }

    .featured-product-name {
        font-size: 1rem;
    }

    .featured-product-price {
        font-size: 1.2rem;
    }

    .product-buttons {
        gap: 0.5rem;
    }

    .product-buttons button {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    .slider-divider {
        margin: 1.5rem 0;
    }

    .divider-line {
        max-width: 80px;
    }

    .divider-text {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }
}
 

/* ========== RELATED PHOTOS SECTION ========== */
.related-photos-section {
    padding: 3rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
    z-index: 1;
}

.related-photos-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #000413;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.related-photos-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #00a8ff);
    transform: translateX(-50%);
    border-radius: 2px;
}

.related-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.related-photo-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.related-photo-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.related-photo-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background-color: #f8f9fa;
    padding: 15px;
    transition: transform 0.3s ease;
}

.related-photo-item:hover img {
    transform: scale(1.1);
}

/* Lightbox Zoom Overlay */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-overlay img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox-overlay.active img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 2001;
}

.lightbox-close:hover {
    color: #007bff;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: white;
    cursor: pointer;
    padding: 20px;
    transition: color 0.3s ease;
    z-index: 2001;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    color: #007bff;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* ========== CART BUTTONS ROW ========== */
.cart-buttons-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.clear-cart-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 600;
}

.clear-cart-btn:hover {
    background-color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* ========== CART ITEM WITH IMAGES ========== */
.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cart-item-media {
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-img {
    display: block;
    width: 86px;
    height: 86px;
    object-fit: contain;
    border-radius: 12px;
    background: #f8f9fa;
    padding: 6px;
}

/* Responsive related photos */
@media (max-width: 767px) {
    .cart-item {
        flex-direction: column;
        text-align: center;
    }
    
    .cart-item-media {
        width: 100%;
        max-width: 120px;
        height: auto;
        flex: none;
    }
    
    .cart-item-img {
        width: 100%;
        max-width: 120px;
        height: auto;
    }
    
    .cart-item-info {
        width: 100%;
    }
    
    .cart-item-actions {
        width: 100%;
        justify-content: center;
    }
}
footer {
    position: relative;
    z-index: 9999;
}

footer * {
    pointer-events: auto !important;
}
/* ===== MAIN DROPDOWN ===== */
/* ===================== DROPDOWN BASE ===================== */
.dropdown { position: relative; }

.dropdown-toggle{
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===================== MAIN DROPDOWN MENU ===================== */
.dropdown-menu{
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  list-style: none;
  padding: 10px 0;
  min-width: 230px;
  border-radius: 12px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.18);
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

/* ===================== SERIES ROW ===================== */
.dropdown-sub{
  position: relative;
  margin-bottom: 6px;
}

.dropdown-sub > span{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 15px;
  color: #000;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

/* Arrow */
.dropdown-sub > span::after{
  content: "›";
  transition: transform .25s ease;
}

/* ===================== SUBMENU (DEFAULT HIDDEN) ===================== */
.submenu{
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  background: #fff;
  list-style: none;
  min-width: 220px;
  padding: 10px 0;
  border-radius: 12px;
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
  z-index: 1001;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(10px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

/* Links */
.submenu li a{
  display: block;
  padding: 10px 18px;
  text-decoration: none;
  color: #444;
  font-size: 14px;
  transition: all .2s ease;
}

.submenu li a:hover{
  background: rgba(0, 123, 255, 0.12);
  color: #007bff;
  padding-left: 22px;
}

/* =========================================================
   DESKTOP ONLY (HOVER ENABLED)
   ========================================================= */
@media (hover: hover) and (pointer: fine){

  .dropdown:hover > .dropdown-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .dropdown-sub:hover > .submenu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .dropdown-sub:hover > span::after{
    transform: rotate(90deg);
  }

  /* bridge gap so submenu doesn't close when moving mouse */
  .dropdown-sub::after{
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 12px;
    height: 100%;
  }
}

/* =========================================================
   MOBILE + TABLET ONLY (CLICK ONLY, HOVER DISABLED)
   ========================================================= */
@media (hover: none), (pointer: coarse){

  /* IMPORTANT: kill hover effects completely */
  .dropdown:hover > .dropdown-menu,
  .dropdown-sub:hover > .submenu{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
  }

  /* open main by click (.active added by JS) */
  .dropdown.active > .dropdown-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* MOBILE submenu should open UNDER the series item (not right) */
  .submenu{
    position: static;        /* makes it flow under */
    min-width: 100%;
    margin: 6px 0 10px;
    transform: none;
    box-shadow: none;
    border-radius: 10px;
    padding: 6px 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    transition: opacity .2s ease, height .2s ease, visibility 0s linear .2s;
  }

  .dropdown-sub.active > .submenu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    transition-delay: 0s;
  }

  /* arrow rotates ONLY when active */
  .dropdown-sub.active > span::after{
    transform: rotate(90deg);
  }

  /* no gap bridge on mobile */
  .dropdown-sub::after{ display: none; }
}

/* ========== NAVBAR SCROLL BEHAVIOR ========== */
.navbar {
    background: #000413;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    transition: transform 0.3s ease-in-out;
   
}

.navbar.navbar-hidden {
    transform: translateY(-100%);
}

.navbar.navbar-visible {
    transform: translateY(0);
}

/* ========== BREADCRUMB STYLES ========== */
.breadcrumb-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #f8f9fa;
    position: relative;
    z-index: 1;
}

.breadcrumb-top-line,
.breadcrumb-bottom-line {
    width: 100%;
    height: 1px;
    background: #000413;
}

.breadcrumb-container {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #555;
    flex-wrap: wrap;
    justify-content: center;
}

.breadcrumb a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.breadcrumb-separator {
    color: #999;
    font-size: 0.8rem;
}

.breadcrumb-current {
    color: #000413;
    font-weight: 600;
}

/* ========== VIEW MODE BUTTONS ========== */
.view-mode-section {
    width: 100%;
    background: #fff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border-bottom: 1px solid #eee;
}

.view-mode-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    margin-right: 5px;
}

.view-mode-buttons {
    display: flex;
    gap: 8px;
}

.view-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #e0e0e0;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.view-mode-btn:hover {
    border-color: #007bff;
    background: rgba(0, 123, 255, 0.05);
}

.view-mode-btn.active {
    border-color: #007bff;
    background: #007bff;
    color: white;
}

.view-mode-btn.active svg,
.view-mode-btn.active i {
    color: white;
}

.view-mode-btn svg,
.view-mode-btn i {
    font-size: 18px;
    color: #555;
    transition: color 0.3s ease;
}

.view-mode-btn.active svg,
.view-mode-btn.active i {
    color: white;
}

.view-mode-btn:hover svg,
.view-mode-btn:hover i {
    color: #007bff;
}

/* List View Icon */
.view-mode-btn.list-view svg {
    width: 20px;
    height: 20px;
}

/* Mobile: Sticky view mode section */
@media (max-width: 767px) {
    .view-mode-section {
        position: sticky;
        top: 50px;
        z-index: 100;
        background: #fff;
        padding: 12px 15px;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }
    
    .view-mode-label {
        font-size: 0.85rem;
    }
    
    .view-mode-buttons {
        gap: 6px;
    }
    
    .view-mode-btn {
        width: 36px;
        height: 36px;
    }
    
    .view-mode-btn svg,
    .view-mode-btn i {
        font-size: 16px;
    }
    
    /* View Details Overlay Button - Force visible on mobile */
    .view-details-overlay {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background-color: #007bff !important;
        color: white !important;
        border: none;
        border-radius: 50px;
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        text-decoration: none;
    }
    
    .view-details-overlay:hover {
        background-color: #000413 !important;
        color: white !important;
    }
    
    .view-details-overlay:active {
        background-color: #000413 !important;
        color: white !important;
    }
}

/* ========== PRODUCT GRID VIEW MODES ========== */

/* 3-Column Grid (Desktop Default) */
.product-grid.view-3-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.product-grid.view-3-columns .product-card {
    width: 100%;
    max-width: 100%;
}

/* 2-Column Grid */
.product-grid.view-2-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.product-grid.view-2-columns .product-card {
    width: 100%;
}

/* List View */
.product-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-grid.view-list .product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.product-grid.view-list .product-image {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
    object-fit: contain;
}

.product-grid.view-list .product-info {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.product-grid.view-list .product-details {
    flex: 1;
}

.product-grid.view-list .product-name {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.product-grid.view-list .product-model {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.product-grid.view-list .product-price {
    font-size: 1.3rem;
    margin-bottom: 0;
}

.product-grid.view-list .product-buttons {
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.product-grid.view-list .add-to-cart-btn,
.product-grid.view-list .view-details-btn {
    width: 100%;
    padding: 0.75rem 1rem;
}

/* ========== RESPONSIVE VIEW MODES ========== */

/* Mobile: Default to 2 columns, List view as option */
@media (max-width: 767px) {
    .view-mode-section {
        padding: 12px 15px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .view-mode-label {
        font-size: 0.85rem;
    }

    .view-mode-buttons {
        gap: 6px;
    }

    .view-mode-btn {
        width: 36px;
        height: 36px;
    }

    .view-mode-btn svg,
    .view-mode-btn i {
        font-size: 16px;
    }

    /* Mobile: 2-column grid default */
    .product-grid.view-3-columns,
    .product-grid.view-2-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .product-grid.view-3-columns .product-card,
    .product-grid.view-2-columns .product-card {
        width: 100%;
    }

    /* Mobile List View - smaller cards */
    .product-grid.view-list .product-card {
        flex-direction: column;
        align-items: stretch;
    }

    .product-grid.view-list .product-image {
        width: 100%;
        height: auto;
    }

    .product-grid.view-list .product-info {
        flex-direction: column;
        align-items: stretch;
    }

    .product-grid.view-list .product-buttons {
        flex-direction: row;
        width: 100%;
    }

    .product-grid.view-list .add-to-cart-btn,
    .product-grid.view-list .view-details-btn {
        flex: 1;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .product-grid.view-3-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== SMOOTH TRANSITION ANIMATIONS ========== */
.product-grid.view-3-columns,
.product-grid.view-2-columns,
.product-grid.view-list {
    transition: all 0.4s ease;
}

.product-grid.view-3-columns .product-card,
.product-grid.view-2-columns .product-card,
.product-grid.view-list .product-card {
    transition: all 0.4s ease;
}

/* ========== BREADCRUMB IN PRODUCTS PAGE ========== */
.products-page-content {
    padding-top: 0;
}

.products-hero-section {
    margin-top: 0;
}

/* ========== MODEL PAGE BREADCRUMB ========== */
.model-page-content {
    padding-top: 0;
}

/* ========== CART ITEM EDIT BUTTON ========== */
.edit-cart-item-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.edit-cart-item-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.edit-cart-item-btn i {
    font-size: 14px;
}

@media (max-width: 767px) {
    .cart-item-actions .edit-cart-item-btn {
        flex: 1;
        justify-content: center;
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* ========== CART DELIVERY INFO ========== */
.cart-delivery-info {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid #e9ecef;
}

.cart-delivery-info h4 {
    color: #000413;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-delivery-info h4 i {
    color: #007bff;
}

.delivery-details {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
}

.delivery-details p {
    margin-bottom: 0.5rem;
}

.delivery-details strong {
    color: #000413;
}

.delivery-note {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #ddd;
}

/* ========== CART TOTALS WITH DELIVERY ========== */
.cart-totals {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-top: 1.5rem;
}

.cart-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.cart-totals-row:last-child {
    border-bottom: none;
}

.cart-totals-row.subtotal {
    font-size: 1rem;
    color: #666;
}

.cart-totals-row.delivery {
    font-size: 1rem;
    color: #666;
}

.cart-totals-row.delivery span {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

.cart-totals-row.total {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000413;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 2px solid #000413;
}

.cart-totals-row.total .amount {
    color: #007bff;
    font-size: 1.5rem;
}

@media (max-width: 767px) {
    .cart-delivery-info {
        padding: 1rem;
    }
    
    .cart-delivery-info h4 {
        font-size: 1rem;
    }
    
    .cart-totals {
        padding: 1.25rem;
    }
    
    .cart-totals-row.total {
        font-size: 1.1rem;
    }
    
    .cart-totals-row.total .amount {
        font-size: 1.3rem;
    }
}

/* ========== ADD-TO-CART TOAST NOTIFICATION ========== */
/* Unified toast style for all add-to-cart actions */
.add-to-cart-toast {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background-color: #000413;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    z-index: 4000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    max-width: 90%;
    width: 400px;
    text-align: center;
}

.add-to-cart-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.add-to-cart-toast-title {
    color: #007bff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.add-to-cart-toast-details {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.add-to-cart-toast-details strong {
    color: white;
    font-weight: 600;
}

.add-to-cart-toast-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.add-to-cart-toast-btn {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    flex: 1;
    max-width: 150px;
}

.add-to-cart-toast-btn-cancel {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.add-to-cart-toast-btn-cancel:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.add-to-cart-toast-btn-view {
    background-color: #007bff;
    color: white;
}

.add-to-cart-toast-btn-view:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    color: white;
}

/* Mobile responsive for toast */
@media (max-width: 500px) {
    .add-to-cart-toast {
        width: 95%;
        padding: 0.75rem 1rem;
        top: 60px;
    }

    .add-to-cart-toast-title {
        font-size: 1rem;
    }

    .add-to-cart-toast-details {
        font-size: 0.85rem;
    }

    .add-to-cart-toast-buttons {
        gap: 0.5rem;
    }

    .add-to-cart-toast-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ========== HERO SPACE EFFECTS: METEORS + STARS ========== */

/* Star Layer - Background layer */
.star-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Individual Star */
.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: star-twinkle linear infinite;
    pointer-events: none;
}

/* Star Twinkle Animation */
@keyframes star-twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Meteor Layer - Foreground layer */
.meteor-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* Individual Meteor */
.meteor {
    position: absolute;
    width: 80px;
    height: 2px;
    animation: meteor-fall linear infinite;
    pointer-events: none;
}

/* Meteor Tail */
.meteor::before {
    content: '';
    position: absolute;
    right: 4px;
    top: 0;
    width: 76px;
    height: 2px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.1) 80%, transparent 100%);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Meteor Head */
.meteor::after {
    content: '';
    position: absolute;
    right: 0;
    top: -1px;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 255, 255, 0.8), 0 0 35px rgba(255, 255, 255, 0.6);
    animation: meteor-glow 0.5s ease-in-out infinite alternate;
}

/* Meteor Fall Animation */
@keyframes meteor-fall {
    0% {
        transform: translateY(-10px) translateX(0) rotate(45deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(100vw) rotate(45deg);
        opacity: 0;
    }
}

/* Meteor Glow Animation */
@keyframes meteor-glow {
    0% {
        opacity: 0.6;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Mobile responsive meteors and stars */
@media (max-width: 767px) {
    .meteor {
        width: 1px;
        height: 1px;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.2);
    }

    .meteor::before {
        transform: scale(0.3);
    }

    .star {
        width: 1px;
        height: 1px;
    }

    @keyframes meteor-fall {
        0% {
            transform: translateY(-5px) translateX(0) rotate(45deg);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(100vh) translateX(100vw) rotate(45deg);
            opacity: 0;
        }
    }
}

/* ========== VIEW MODE SECTION ========== */
.view-mode-section{
    max-width:1200px;
    margin:20px auto 10px auto;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:10px;
    padding:0 15px;
}

@media(max-width:767px){
    .view-mode-section{
        justify-content:center;
        margin:15px auto;
    }
}

/* ========== MOBILE SVG VISIBILITY FIX ========== */
/* Fix invisible SVG rectangles in grid-2-columns view mode button on mobile */
@media (max-width: 767px) {
    .view-mode-btn.grid-2-columns svg rect {
        stroke: #555 !important;
        stroke-width: 2 !important;
        fill: none !important;
    }

    .view-mode-btn.grid-2-columns.active svg rect {
        stroke: white !important;
        stroke-width: 2 !important;
        fill: none !important;
    }

    .view-mode-btn.grid-2-columns:hover svg rect {
        stroke: #007bff !important;
        stroke-width: 2 !important;
        fill: none !important;
    }
}
/* ===================== FORCE CLICK ONLY ON MOBILE/TABLET ===================== */
/* Put this at the VERY END of style.css */

@media (max-width: 1024px) {

  /* Disable any hover/focus opening */
  .dropdown:hover > .dropdown-menu,
  .dropdown:focus-within > .dropdown-menu,
  .dropdown-sub:hover > .submenu,
  .dropdown-sub:focus-within > .submenu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
  }

  /* Open main menu only by .active */
  .dropdown.active > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Open submenu only by .active */
  .dropdown-sub.active > .submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* Make submenu stacked under the series (mobile UX) */
  .submenu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    min-width: 100% !important;
    box-shadow: none !important;
    margin: 6px 0 10px !important;
    border-radius: 10px !important;
    transform: none !important;
  }

  /* No gap bridge on mobile */
  .dropdown-sub::after { display: none !important; }
}
/* ===================== MOBILE/TABLET: SUBMENU INSIDE DROPDOWN + SMOOTH ===================== */
@media (max-width: 1024px) {

  /* main dropdown animation */
  .dropdown-menu {
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .dropdown.active > .dropdown-menu {
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* series row */
  .dropdown-sub > span {
    border-bottom: 1px solid #eee;
  }

  /* submenu becomes inside dropdown (not right/left) */
  .submenu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 100% !important;

    margin: 0 0 10px !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 10px !important;

    /* smooth open/close */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    pointer-events: none;

    transition:
      max-height .35s ease,
      opacity .25s ease,
      transform .25s ease;
  }

  /* open submenu on active */
  .dropdown-sub.active > .submenu {
    max-height: 500px;      /* enough height for links */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    padding: 8px 0 !important;
  }

  /* submenu links style */
  .submenu li a {
    padding: 12px 18px;
    font-size: 14px;
    border-radius: 10px;
  }

  /* arrow rotate on active */
  .dropdown-sub > span::after {
    transition: transform .25s ease;
  }
  .dropdown-sub.active > span::after {
    transform: rotate(90deg);
  }
}

/* ========== NEW SPACE EFFECT: STARS + METEORS ========== */

/* Wrapper for space effect - must be inside hero sections */
.space-effect {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Stars layer */
.stars {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    background: transparent;
}

/* Stars generated with box-shadow for performance - 50+ stars */
.stars {
    box-shadow: 
        10vw 10vh 1px rgba(255, 255, 255, 0.8),
        15vw 5vh 2px rgba(255, 255, 255, 0.6),
        20vw 25vh 1px rgba(255, 255, 255, 0.9),
        25vw 15vh 2px rgba(255, 255, 255, 0.7),
        30vw 35vh 1px rgba(255, 255, 255, 0.8),
        35vw 10vh 2px rgba(255, 255, 255, 0.5),
        40vw 45vh 1px rgba(255, 255, 255, 0.9),
        45vw 20vh 2px rgba(255, 255, 255, 0.7),
        50vw 55vh 1px rgba(255, 255, 255, 0.8),
        55vw 30vh 2px rgba(255, 255, 255, 0.6),
        60vw 65vh 1px rgba(255, 255, 255, 0.9),
        65vw 40vh 2px rgba(255, 255, 255, 0.7),
        70vw 75vh 1px rgba(255, 255, 255, 0.8),
        75vw 50vh 2px rgba(255, 255, 255, 0.5),
        80vw 85vh 1px rgba(255, 255, 255, 0.9),
        85vw 60vh 2px rgba(255, 255, 255, 0.7),
        90vw 95vh 1px rgba(255, 255, 255, 0.8),
        5vw 70vh 2px rgba(255, 255, 255, 0.6),
        12vw 80vh 1px rgba(255, 255, 255, 0.9),
        18vw 90vh 2px rgba(255, 255, 255, 0.7),
        22vw 5vh 1px rgba(255, 255, 255, 0.8),
        28vw 15vh 2px rgba(255, 255, 255, 0.5),
        32vw 25vh 1px rgba(255, 255, 255, 0.9),
        38vw 35vh 2px rgba(255, 255, 255, 0.7),
        42vw 45vh 1px rgba(255, 255, 255, 0.8),
        48vw 55vh 2px rgba(255, 255, 255, 0.6),
        52vw 65vh 1px rgba(255, 255, 255, 0.9),
        58vw 75vh 2px rgba(255, 255, 255, 0.7),
        62vw 85vh 1px rgba(255, 255, 255, 0.8),
        68vw 95vh 2px rgba(255, 255, 255, 0.5),
        72vw 10vh 1px rgba(255, 255, 255, 0.9),
        78vw 20vh 2px rgba(255, 255, 255, 0.7),
        82vw 30vh 1px rgba(255, 255, 255, 0.8),
        88vw 40vh 2px rgba(255, 255, 255, 0.6),
        92vw 50vh 1px rgba(255, 255, 255, 0.9),
        3vw 60vh 2px rgba(255, 255, 255, 0.7),
        8vw 70vh 1px rgba(255, 255, 255, 0.8),
        14vw 80vh 2px rgba(255, 255, 255, 0.5),
        19vw 90vh 1px rgba(255, 255, 255, 0.9),
        26vw 5vh 2px rgba(255, 255, 255, 0.7),
        33vw 15vh 1px rgba(255, 255, 255, 0.8),
        39vw 25vh 2px rgba(255, 255, 255, 0.6),
        44vw 35vh 1px rgba(255, 255, 255, 0.9),
        49vw 45vh 2px rgba(255, 255, 255, 0.7),
        54vw 55vh 1px rgba(255, 255, 255, 0.8),
        59vw 65vh 2px rgba(255, 255, 255, 0.5),
        64vw 75vh 1px rgba(255, 255, 255, 0.9),
        69vw 85vh 2px rgba(255, 255, 255, 0.7),
        74vw 95vh 1px rgba(255, 255, 255, 0.8),
        79vw 10vh 2px rgba(255, 255, 255, 0.6),
        84vw 20vh 1px rgba(255, 255, 255, 0.9),
        89vw 30vh 2px rgba(255, 255, 255, 0.7);
    animation: twinkle 3s ease-in-out infinite alternate;
}

/* Second layer of stars - different positions and sizes */
.stars2 {
    position: absolute;
    inset: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        5vw 8vh 2px rgba(255, 255, 255, 0.7),
        12vw 18vh 1px rgba(255, 255, 255, 0.5),
        18vw 28vh 2px rgba(255, 255, 255, 0.8),
        24vw 38vh 1px rgba(255, 255, 255, 0.6),
        30vw 48vh 2px rgba(255, 255, 255, 0.9),
        36vw 58vh 1px rgba(255, 255, 255, 0.7),
        42vw 68vh 2px rgba(255, 255, 255, 0.5),
        48vw 78vh 1px rgba(255, 255, 255, 0.8),
        54vw 88vh 2px rgba(255, 255, 255, 0.6),
        60vw 98vh 1px rgba(255, 255, 255, 0.9),
        66vw 12vh 2px rgba(255, 255, 255, 0.7),
        72vw 22vh 1px rgba(255, 255, 255, 0.5),
        78vw 32vh 2px rgba(255, 255, 255, 0.8),
        84vw 42vh 1px rgba(255, 255, 255, 0.6),
        90vw 52vh 2px rgba(255, 255, 255, 0.9),
        2vw 62vh 1px rgba(255, 255, 255, 0.7),
        8vw 72vh 2px rgba(255, 255, 255, 0.5),
        14vw 82vh 1px rgba(255, 255, 255, 0.8),
        20vw 92vh 2px rgba(255, 255, 255, 0.6),
        95vw 8vh 1px rgba(255, 255, 255, 0.9),
        97vw 22vh 2px rgba(255, 255, 255, 0.7),
        3vw 36vh 1px rgba(255, 255, 255, 0.5),
        7vw 50vh 2px rgba(255, 255, 255, 0.8),
        11vw 64vh 1px rgba(255, 255, 255, 0.6),
        15vw 78vh 2px rgba(255, 255, 255, 0.9),
        19vw 92vh 1px rgba(255, 255, 255, 0.7),
        23vw 6vh 2px rgba(255, 255, 255, 0.5),
        27vw 20vh 1px rgba(255, 255, 255, 0.8),
        31vw 34vh 2px rgba(255, 255, 255, 0.6),
        35vw 48vh 1px rgba(255, 255, 255, 0.9),
        41vw 62vh 2px rgba(255, 255, 255, 0.7),
        47vw 76vh 1px rgba(255, 255, 255, 0.5),
        53vw 90vh 2px rgba(255, 255, 255, 0.8);
    animation: twinkle 4s ease-in-out infinite alternate-reverse;
}

/* Twinkle animation for stars */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* Meteors container */
.meteors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* Individual meteor */
.meteors .meteor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 1) 100%);
    border-radius: 50%;
    transform-origin: left center;
    animation: meteorMove 4s linear infinite;
    opacity: 0;
    pointer-events: none;
}

/* Meteor head glow effect */
.meteors .meteor::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8), 0 0 20px 4px rgba(255, 255, 255, 0.5);
}

/* Meteor trail */
.meteors .meteor::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    border-radius: 2px;
}

/* Meteor animation */
@keyframes meteorMove {
    0% {
        transform: translateX(-100px) translateY(-100px) rotate(-45deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(calc(100vh + 100px)) rotate(-45deg);
        opacity: 0;
    }
}

/* Meteor delays for natural look */
.meteors .meteor:nth-child(1) { animation-delay: 0s; }
.meteors .meteor:nth-child(2) { animation-delay: 1.5s; }
.meteors .meteor:nth-child(3) { animation-delay: 3s; }
.meteors .meteor:nth-child(4) { animation-delay: 0.8s; }
.meteors .meteor:nth-child(5) { animation-delay: 2.2s; }
.meteors .meteor:nth-child(6) { animation-delay: 4s; }
.meteors .meteor:nth-child(7) { animation-delay: 1.2s; }
.meteors .meteor:nth-child(8) { animation-delay: 2.8s; }
.meteors .meteor:nth-child(9) { animation-delay: 0.5s; }
.meteors .meteor:nth-child(10) { animation-delay: 3.5s; }

/* Products Hero Section - also needs positioning for space effect */
.products-hero-section {
    background: #020617;
    color: white;
    padding: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.products-hero-section .container {
    position: relative;
    z-index: 2;
}

.products-hero-section h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.products-hero-section p {
    font-size: 1.1rem;
    opacity: 0.9;
}

@media (min-width: 1024px) {
    .products-hero-section h1 {
        font-size: 3rem;
    }
}
@media (max-width: 767px) {
  /* ===== FIX: Remove padding from slider product images ===== */
.product-slider .product-card .product-image {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  height: auto !important;
}

/* Make image fill container properly */
.product-slider .product-card .product-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
}

/* ===== RELATED PHOTOS SECTION - FULL WIDTH FIX ===== */
/* Break out of container restriction */
.related-photos-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 3rem 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

/* Remove container restriction for the grid */
.related-photos-section .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ===== RELATED PHOTOS GRID - DESKTOP & MOBILE UNIFIED ===== */
#related-photos-grid {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #000413;
    border-radius: 16px;
    margin-top: 20px;
}

/* Show ONLY first 8 items */
#related-photos-grid .related-photo-item:nth-child(n+9) {
    display: none !important;
}

/* Photo item - rectangular, NOT circular */
#related-photos-grid .related-photo-item {
    aspect-ratio: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    flex: none !important;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Image - always rectangular, never circular */
#related-photos-grid .related-photo-item img {
    width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
    object-fit: contain !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
}

/* Hover effect - desktop only */
@media (hover: hover) {
    #related-photos-grid .related-photo-item:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
    }
}

/* ===== MOBILE: HORIZONTAL SCROLL WITH SNAP ===== */
@media (max-width: 767px) {
    /* Break out of container on mobile too */
    .related-photos-section {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Horizontal scroll container */
    #related-photos-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch;
        padding: 16px !important;
        padding-bottom: 20px !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Prevent layout shift */
        transform: translateX(0);
    }
    
    /* Hide scrollbar */
    #related-photos-grid::-webkit-scrollbar {
        display: none !important;
    }
    #related-photos-grid {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    
    /* Bigger rectangular cards on mobile */
    #related-photos-grid .related-photo-item {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        border-radius: 16px !important;
    }
    
    /* Bigger images on mobile */
    #related-photos-grid .related-photo-item img {
        height: 200px !important;
        min-height: 200px !important;
        border-radius: 16px !important;
    }
    
    /* Snap scroll effect */
    #related-photos-grid .related-photo-item {
        scroll-snap-align: center !important;
    }
    
    #related-photos-grid {
        scroll-snap-type: x mandatory !important;
    }
}

/* ===== PREVENT HORIZONTAL OVERFLOW - GLOBAL ===== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
} 
/* ip11:mercedes karl    nike 
ip 13: mercdes karl   nike amg = jdi 
ip12Promax mercdes karl    
ip16: mercdes karl    nike   jdi prada 
ip 17Pro : all pics need  edits 
 */
@media (hover: none) and (pointer: coarse) {

  .view-mode-btn svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 22px !important;
    height: 22px !important;
    max-width: none !important;
    max-height: none !important;

    position: relative !important;
    z-index: 2 !important;

    transform: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* make sure button itself isn't hiding children */
  .view-mode-btn {
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
@media (min-width: 1024px) {
    .products-hero-section h1 {
        font-size: 3rem;
    }
}
@media (max-width: 767px) {
  /* Force icons visible on real iPhone */
  .view-mode-btn svg {
    stroke: #000413 !important;  /* always visible */
    fill: none !important;
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }

  /* When active, make icon white (if your active bg is dark) */
  .view-mode-btn.active svg {
    stroke: #ffffff !important;
  }
}
@media (max-width: 767px) {
  .product-slide {
    min-width: 100%;
    display: flex;
    justify-content: center;
  }

  .product-slide .product-card {
    width: 100%;
    max-width: 420px; /* or 100% if you want full */
  }
}
/* ================= MOBILE: SLIDER SHOW 1 CARD ONLY ================= */
@media (max-width: 767px) {

  /* the track that moves left/right */
  .product-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* each slide must take full screen width */
  .product-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 12px !important; /* small side space */
    box-sizing: border-box !important;
  }

  /* show 1 card inside the slide */
  .product-slide .product-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 420px !important; /* keep it nice centered */
    margin: 0 auto !important;
  }

  /* ensure image scales well */
  .product-slide .product-card .product-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}
.product-slider {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}
.product-slide {
  flex: 0 0 100%;
}
/* ================= MOBILE: 1 CARD PER SLIDE (FIXED) ================= */
@media (max-width: 767px) {

  /* parent should clip */
  .product-slider-container{
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
  }

  /* moving track (DON'T CLIP HERE) */
  .product-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow: visible !important;   /* ✅ IMPORTANT */
    transition: transform .4s ease; /* smooth */
    will-change: transform;
  }

  /* each slide = full screen width */
  .product-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* card centered */
  .product-slide .product-card {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }
}
/* ===== MOBILE: KEEP ARROWS FIXED + CLICKABLE ===== */
@media (max-width: 767px) {

  .product-slider-container{
    position: relative !important;
    overflow: hidden !important;
  }

  /* arrows */
  .slider-btn{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 9999 !important;     /* ✅ above slider */
    pointer-events: auto !important;
  }

  .slider-btn-prev{ left: 6px !important; }
  .slider-btn-next{ right: 6px !important; }

  /* make sure slider doesn't cover them */
  .product-slider{
    position: relative !important;
    z-index: 1 !important;
  }

  /* add safe space so card doesn't hide arrows */
  .product-slide{
    padding-left: 44px !important;
    padding-right: 44px !important;
  }
}