:root { /* ── Brand Palette ── */ --gold: #C6A972; --gold-light: #D4BB8A; --black: #111111; --silver: #9A9999; --gallery: #ECECEC; --white: #FFFFFF; --brand-accent: #9A9999; --brand-bg: #ECECEC; /* ── Typography ── */ --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-script: 'Dancing Script', cursive; /* ── Spacing scale ── */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 80px; --space-2xl: 120px; /* ── Easing ── */ --ease-luxury: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.0, 0, .2, 1); /* ── Shadows ── */ --shadow-xs: 0 1px 3px rgba(0,0,0,.06); --shadow-sm: 0 2px 8px rgba(0,0,0,.07); --shadow-md: 0 4px 24px rgba(0,0,0,.09); --shadow-lg: 0 8px 48px rgba(0,0,0,.12); --shadow-gold: 0 4px 24px rgba(198,169,114,.25); /* ── Border radius ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* ── Transitions ── */ --t-fast: .18s var(--ease-luxury); --t-med: .32s var(--ease-luxury); --t-slow: .55s var(--ease-luxury); } /* ── Luxury scroll-reveal ── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } .reveal-delay-4 { transition-delay: .4s; } /* ── Gold accent utility ── */ .gold { color: var(--gold); } .gold-bg { background: var(--gold); } .gold-border { border-color: var(--gold) !important; } /* ── Luxury button base ── */ .btn-luxury { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 32px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; border: none; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .btn-luxury:active { transform: scale(.98); } .btn-luxury--dark { background: var(--black); color: var(--white); } .btn-luxury--dark:hover { background: #2a2a2a; } .btn-luxury--gold { background: var(--gold); color: var(--white); box-shadow: var(--shadow-gold); } .btn-luxury--gold:hover { background: var(--gold-light); } .btn-luxury--ghost { background: transparent; color: var(--black); border: 1.5px solid var(--black); height: 50px; } .btn-luxury--ghost:hover { background: var(--black); color: var(--white); } /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Prevent spacing issues from reappearing */ *::before, *::after { box-sizing: border-box; } /* Ensure consistent spacing for all elements */ body, html { margin: 0; padding: 0; } body { overflow-x: hidden; } /* Fix any potential spacing issues with flexbox and grid */ .flex-container { display: flex; align-items: center; justify-content: center; } .grid-container { display: grid; gap: 1rem; } /* Prevent unwanted margins on common elements */ h1, h2, h3, h4, h5, h6, p, ul, ol, li { margin: 0; padding: 0; } /* Ensure consistent button spacing */ button, .btn { margin: 0; padding: 0; border: none; background: none; cursor: pointer; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #000000; background-color: #fff; } .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3.5vw, 60px); } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; font-weight: 600; line-height: 1.2; color: #000000; } h1 { font-size: 2.5rem; font-weight: 700; } h2 { font-size: 2rem; margin-bottom: 1rem; } h3 { font-size: 1.5rem; margin-bottom: 0.5rem; } /* Announcement Slider */ .announcement-slider { position: relative; overflow: hidden; background: linear-gradient(135deg, #000000, #333333) !important; color: white !important; text-align: center; padding: 10px 0; font-size: 0.9rem; font-weight: 500; height: 40px; width: 100%; } .announcement-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; } .announcement-slide.active { opacity: 1; transform: translateX(0); } .announcement-slide.prev { transform: translateX(-100%); } .announcement-text { margin-right: 10px; color: white !important; } .announcement-link { color: white; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; cursor: pointer; transition: color 0.3s ease; } .announcement-link:hover { color: #ECECEC; } .announcement-link-text { background: rgba(255, 255, 255, 0.2); padding: 4px 12px; border-radius: 4px; font-weight: 600; transition: background 0.3s ease; } .announcement-link:hover .announcement-link-text { background: rgba(255, 255, 255, 0.3); } /* Override any conflicting styles for announcement slider */ .announcement-slider * { color: white !important; } .announcement-slider .announcement-text { color: white !important; font-weight: 500 !important; } .announcement-slider .announcement-link { color: white !important; } .announcement-slider .announcement-link-text { color: white !important; background: rgba(255, 255, 255, 0.2) !important; } /* Header */ .header { background: white; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); position: sticky; top: 0; z-index: 1000; margin: 0; padding: 0; } .header-top { display: block; margin: 0; padding: 0; background: linear-gradient(135deg, #000000, #333333); } /* Old promo-banner styles removed - using announcement-slider instead */ .shop-now-btn { background: #9A9999; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px; font-size: 0.9rem; font-weight: 500; transition: background 0.3s ease; } .shop-now-btn:hover { background: #333333; } .header-actions { display: flex; align-items: center; gap: 20px; } .sign-in, .cart { color: #000000; text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .sign-in:hover, .cart:hover { color: #000000; } .cart i { margin-right: 5px; } /* Main Navigation */ .main-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .nav-brand a { text-decoration: none; color: inherit; } .nav-brand a:hover { text-decoration: none; } .nav-brand h1 { font-size: 1.8rem; color: #000000; font-weight: 700; margin: 0; } .nav-menu { display: flex; list-style: none; gap: 30px; } .nav-item { position: relative; } .nav-link { color: #000000; text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 5px; transition: color 0.3s ease; } .nav-link:hover { color: #000000; } .nav-link i { font-size: 0.8rem; } /* Dropdown Menus */ .dropdown-menu { position: absolute; top: 100%; left: 0; background: white; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 20px; min-width: 300px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 100; } .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-column { margin-bottom: 15px; } .dropdown-column h4 { color: #000000; font-size: 1rem; margin-bottom: 10px; font-weight: 600; } .dropdown-menu a { display: block; color: #666; text-decoration: none; padding: 5px 0; transition: color 0.3s ease; } .dropdown-menu a:hover { color: #000000; } .nav-actions { display: flex; align-items: center; gap: 15px; } .search-btn, .account-btn, .cart-btn { color: #000000; text-decoration: none; font-size: 1.1rem; transition: color 0.3s ease; } .search-btn:hover, .account-btn:hover, .cart-btn:hover { color: #000000; } .cart-btn { position: relative; } .cart-btn .icon-bag { width: 20px; height: 20px; stroke: currentColor; transition: stroke 0.3s ease; } .cart-count { position: absolute; top: -8px; right: -8px; background: #c00; color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 0.7rem; font-weight: 600; display: none; align-items: center; justify-content: center; min-width: 20px; z-index: 10; } .cart-count.show { display: flex !important; } .mobile-menu-btn { display: none; background: none; border: none; font-size: 1.2rem; color: #000000; cursor: pointer; } /* Hero Section */ .hero-section { position: relative; width: 100%; height: auto; overflow: hidden; } .hero__image-wrapper { position: relative; width: 100%; height: auto; overflow: hidden; } .hero__image { width: 100%; height: auto; object-fit: unset; object-position: unset; transition: transform 0.8s ease; transform: translateX(-100%); animation: slideInFromLeft 1.2s ease-out forwards; } @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .hero-section:hover .hero__image { transform: scale(1.05); animation-play-state: paused; } .hero__link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; text-decoration: none; } /* Responsive Images */ .small--hide { display: block; } .medium-up--hide { display: none; } @media (max-width: 768px) { .small--hide { display: none; } .medium-up--hide { display: block; } .hero-section { height: auto; min-height: unset; max-height: unset; } .hero__image-wrapper { height: auto; } .hero__image { width: 100%; height: auto; object-fit: unset; margin-left: 0; animation: none; transform: none; } } @media (max-width: 480px) { .hero-section { height: auto; min-height: unset; max-height: unset; } .hero__image { width: 100%; height: auto; object-fit: unset; margin-left: 0; } } /* SEA Collection Section */ .sea-collection { background: #9A9999; color: white; padding: 60px 0; text-align: center; } .sea-content h2 { font-size: 2.5rem; margin-bottom: 20px; } .sea-content p { font-size: 1.1rem; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; } /* Best Sellers Section */ .best-sellers { padding: 100px 0; background: linear-gradient(135deg, #ECECEC 0%, #ECECEC 100%); position: relative; overflow: hidden; } .best-sellers::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); pointer-events: none; } /* Best Sellers Page Specific Styles */ .bestsellers-page { padding: 80px 0 40px 0; background: #fff; } /* Shopify Collection Header Styles */ .shopify-section { margin-bottom: 0; } .page-width { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .page-content { padding: 0; } .page-content--top { padding-top: 0; } .center-text { text-align: center; } .collection-header-mars { padding: 40px 0; background: transparent; } .collection-header-mars.section-header { margin-bottom: 0; } .collection-header-mars.section-header--flush { margin-bottom: 0; padding-bottom: 0; } .collection-header--text { max-width: 900px; margin: 0 auto; } .collection-header--text .section-header__title { font-size: 3rem; font-weight: 700; color: #000000; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); position: relative; } .collection-header--text .section-header__title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, #000000, #333333); border-radius: 2px; } .collection-header--text p { font-size: 1.2rem; line-height: 1.7; color: #666; margin: 0 auto 20px; max-width: 800px; } .collection-header--text p:first-of-type, .collection-header--text p:last-of-type { margin: 0; } .page-header { text-align: center; margin-bottom: 40px; padding: 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .page-header h1 { font-size: 2.5rem; color: #000000; margin-bottom: 15px; } .page-subtitle { font-size: 1.1rem; color: #666; max-width: 800px; margin: 0 auto; line-height: 1.6; text-align: center; } /* Collection Toolbar */ .collection-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 80px 0 40px 0; padding: 40px 20px; flex-wrap: wrap; gap: 20px; background: #ECECEC; border-radius: 12px; border: 1px solid rgba(139, 69, 19, 0.1); } .collection-info { font-size: 0.9rem; color: #666; } .collection-controls { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .collection-sort { display: flex; align-items: center; gap: 10px; } .collection-sort label { font-size: 0.9rem; color: #000000; font-weight: 500; } .collection-sort select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; background: white; cursor: pointer; } .collection-view { display: flex; gap: 5px; } .collection__view-btn { padding: 8px 12px; border: 1px solid #ddd; background: white; cursor: pointer; transition: all 0.3s ease; border-radius: 4px; } .collection__view-btn:hover { background: #ECECEC; } .collection__view-btn.active { background: #9A9999; color: white; border-color: #000000; } /* Best Seller Product Cards */ .bestseller-product { position: relative; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .bestseller-product:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); } .product-badge { position: absolute; top: 10px; left: 10px; background: #9A9999; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; z-index: 2; } .product-discount { position: absolute; top: 10px; right: 10px; background: #e74c3c; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; z-index: 2; } .product-actions { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px; opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .bestseller-product:hover .product-actions { opacity: 1; } .quick-view-btn, .add-to-cart-btn { width: 40px; height: 40px; border-radius: 50%; background: white; color: #000000; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .quick-view-btn:hover, .add-to-cart-btn:hover { background: #9A9999; color: white; transform: scale(1.1); } .product-rating { display: flex; align-items: center; gap: 5px; margin: 8px 0; } .stars { color: #ffc107; font-size: 0.9rem; } .rating-count { font-size: 0.8rem; color: #666; } .collection-product__price { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .current-price { font-size: 1.1rem; font-weight: 600; color: #000000; } .original-price { font-size: 0.9rem; color: #999; text-decoration: line-through; } .product-description { font-size: 0.9rem; color: #666; line-height: 1.4; margin: 8px 0; } /* Load More Section */ .load-more-section { text-align: center; margin: 60px 0 40px 0; padding: 0 20px; } .load-more-btn { background: #9A9999; color: white; padding: 15px 30px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.3s ease; } .load-more-btn:hover { background: #333333; } /* Responsive Design for Best Sellers */ @media (max-width: 768px) { .bestsellers-page { padding: 70px 0 30px 0; } .collection-header-mars { padding: 30px 0; } .collection-header--text .section-header__title { font-size: 2.2rem; } .collection-header--text p { font-size: 1.1rem; } .collection-toolbar { margin: 60px 0 30px 0; padding: 20px 15px; flex-direction: column; align-items: stretch; gap: 15px; } .collection__products-grid { margin: 30px 0 40px 0; padding: 0 15px; } .load-more-section { margin: 40px 0 30px 0; padding: 0 15px; } .collection-controls { justify-content: space-between; } .page-header h1 { font-size: 2rem; } .page-subtitle { font-size: 1rem; } } @media (max-width: 480px) { .bestsellers-page { padding: 60px 0 20px 0; } .collection-header-mars { padding: 20px 0; } .collection-header--text .section-header__title { font-size: 1.8rem; } .collection-header--text p { font-size: 1rem; } .collection-toolbar { margin: 50px 0 20px 0; padding: 15px 10px; } .collection__products-grid { margin: 20px 0 30px 0; padding: 0 10px; } .load-more-section { margin: 30px 0 20px 0; padding: 0 10px; } .page-header { margin-bottom: 30px; } .page-header h1 { font-size: 1.8rem; } .collection-controls { flex-direction: column; gap: 15px; } .collection-sort { justify-content: space-between; } } .best-sellers .section-header { display: block; text-align: center; position: relative; z-index: 2; margin-bottom: 50px; padding: 0 20px; } .best-sellers h2 { text-align: center; color: #000000; margin-bottom: 16px; font-size: 2.6rem; font-weight: 700; position: relative; letter-spacing: -0.02em; } .best-sellers h2::after { content: ''; display: block; width: 50px; height: 3px; background: #9A9999; margin: 14px auto 0; border-radius: 2px; } .best-sellers .section-header__description { color: #555; font-size: 1rem; line-height: 1.8; text-align: center; max-width: 680px; margin: 20px auto 0; font-weight: 400; } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 40px; } .product-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .product-image { position: relative; overflow: hidden; } .product-image img { width: 100%; height: 300px; object-fit: cover; transition: transform 0.3s ease; } .product-card:hover .product-image img { transform: scale(1.05); } .quick-view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover .quick-view { opacity: 1; } .quick-view-btn { background: white; color: #000000; border: none; padding: 12px 24px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .quick-view-btn:hover { background: #9A9999; color: white; } .product-info { padding: 20px; } .product-info h3 { color: #000000; margin-bottom: 10px; font-size: 1.1rem; } .price { color: #000000; font-weight: 600; font-size: 1.1rem; } /* Enhanced View All Button */ .best-sellers .view-all { text-align: center; margin-top: 60px; position: relative; z-index: 2; } .best-sellers .view-all-btn { display: inline-block; padding: 18px 40px; background: linear-gradient(135deg, #000000 0%, #333333 100%); color: white; text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; box-shadow: 0 8px 25px rgba(139, 69, 19, 0.2); } .best-sellers .view-all-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s; } .best-sellers .view-all-btn:hover::before { left: 100%; } .best-sellers .view-all-btn:hover { background: linear-gradient(135deg, #333333 0%, #000000 100%); transform: translateY(-4px); box-shadow: 0 15px 35px rgba(139, 69, 19, 0.4); } .best-sellers .view-all-btn:active { transform: translateY(-2px); } /* General view-all button for other sections */ .view-all { text-align: center; } .view-all-btn { background: #9A9999; color: white; padding: 15px 30px; text-decoration: none; border-radius: 8px; font-weight: 600; transition: background 0.3s ease; } .view-all-btn:hover { background: #333333; } /* Texture Selection */ .texture-selection { padding: 80px 0; background: white; } .texture-selection h2 { text-align: center; color: #000000; margin-bottom: 50px; } .texture-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; } .texture-card { text-align: center; transition: transform 0.3s ease; } .texture-card:hover { transform: translateY(-5px); } .texture-image { margin-bottom: 15px; } .texture-image img { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; } .texture-card h3 { color: #000000; font-size: 1.1rem; } /* Additional styles for the texture selection section */ .texture-selection .h1 { font-size: 2.5rem; font-weight: 700; color: #000000; text-align: center; margin-bottom: 50px; } .texture-selection .page-width { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .texture-selection .page-width--medium { max-width: 1000px; } .texture-selection .collection-list-mars { padding: 0 20px; } .texture-selection .section-header { text-align: center; margin-bottom: 50px; } .texture-selection .section-header__title { color: #000000; font-size: 2.5rem; font-weight: 700; margin: 0; } .texture-selection .grid { display: flex; flex-wrap: wrap; margin: 0 -15px; } .texture-selection .grid--uniform { align-items: stretch; } .texture-selection .grid--tight { margin: 0 -10px; } .texture-selection .grid__item { padding: 0 15px; margin-bottom: 30px; } .texture-selection .grid--tight .grid__item { padding: 0 10px; margin-bottom: 20px; } .texture-selection .medium-up--one-half { width: 50%; } .texture-selection .collection-item { position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .texture-selection .collection-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .texture-selection .collection-item--overlaid { position: relative; } .texture-selection .collection-image { position: relative; width: 100%; height: 0; overflow: hidden; border-radius: 12px; } .texture-selection .collection-image--square { padding-bottom: 100%; } .texture-selection .image-wrap { position: relative; width: 100%; height: 100%; } .texture-selection .collection-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .texture-selection .collection-item:hover .collection-image img { transform: scale(1.05); } .texture-selection .collection-item__title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; z-index: 2; } .texture-selection .collection-item__title--overlaid { background: transparent; border-radius: 12px; } .texture-selection .collection-item__title--center { text-align: center; } .texture-selection .collection-item--title { color: white !important; font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; background: #9A9999 !important; padding: 12px 30px !important; border-radius: 30px !important; transition: all 0.3s ease; display: inline-block; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .texture-selection .collection-item:hover .collection-item--title { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); background: #222222 !important; } .texture-selection .collection-item--title.btn { background: #9A9999 !important; color: white !important; padding: 12px 30px !important; border-radius: 30px !important; border: none !important; text-decoration: none !important; } .texture-selection .collection-item--caption { display: block; margin-bottom: 5px; font-size: 0.9rem; opacity: 0.9; } /* As Seen On Section */ .as-seen-on { padding: 80px 0; background: #f8f6f0; } .as-seen-on h2 { text-align: center; color: #000000; margin-bottom: 50px; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .testimonial { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-align: center; } .testimonial p { font-style: italic; color: #666; line-height: 1.6; } /* Blog Section */ .blog-section { padding: 80px 0; background: white; } .blog-section h2 { text-align: center; color: #000000; margin-bottom: 50px; font-size: 2.5rem; font-weight: 700; } .blog-section .slideshow-wrapper { position: relative; overflow: hidden; margin-bottom: 40px; } .blog-section .slideshow-wrapper { position: relative; padding: 0 60px; } .blog-posts-slider { display: flex; transition: transform 0.3s ease; } .blog-post-slide { min-width: 33.333%; flex-shrink: 0; padding: 0 15px; } .blog-post-slide--flex { display: flex; align-items: center; gap: 30px; background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-post-slide--flex:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .blog-post-slide--caption { flex: 1; padding: 30px; } .blog-post-slide--title { color: #000000; font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; line-height: 1.3; text-decoration: none; transition: color 0.3s ease; } .blog-post-slide--title:hover { color: #333333; } .blog-post-slide--excerpt { color: #666; line-height: 1.6; margin-bottom: 20px; } .blog-post-slide--excerpt.medium-down--hide { display: block; } .blog-post-slide--image { flex: 0 0 40%; position: relative; } .blog-post-slide--image .image-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; } .blog-post-slide--image .grid__image-ratio--square { padding-bottom: 100%; } .blog-post-slide--image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .blog-post-slide--flex:hover .blog-post-slide--image img { transform: scale(1.05); } .blog-post-slide .btn { display: inline-block; padding: 10px 20px; background: #9A9999; color: white; text-decoration: none; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; transition: all 0.3s ease; } .blog-post-slide .btn:hover { background: #333333; transform: translateY(-2px); } /* Flickity Navigation Buttons */ .flickity-button { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(139, 69, 19, 0.8); border: none; color: white; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; z-index: 10; } .flickity-button:hover { background: rgba(139, 69, 19, 1); transform: translateY(-50%) scale(1.1); } .flickity-button:disabled { opacity: 0.3; cursor: not-allowed; } .flickity-previous { left: 20px; } .flickity-next { right: 20px; } .flickity-button-icon { width: 20px; height: 20px; fill: white; } .flickity-button-icon .arrow { fill: white; } /* Style Selection */ .style-selection { padding: 80px 0; background: #ECECEC; } .style-selection .page-width { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .style-selection .page-width--medium { max-width: 1000px; } .style-selection .collection-list-mars { padding: 0 20px; } .style-selection .section-header { text-align: center; margin-bottom: 50px; } .style-selection .section-header__title { color: #000000; font-size: 2.5rem; font-weight: 700; margin: 0; } .style-selection .grid { display: flex; flex-wrap: wrap; margin: 0 -15px; } .style-selection .grid--uniform { align-items: stretch; } .style-selection .grid--tight { margin: 0 -10px; } .style-selection .grid__item { padding: 0 15px; margin-bottom: 30px; } .style-selection .grid--tight .grid__item { padding: 0 10px; margin-bottom: 20px; } .style-selection .medium-up--one-third { width: 33.333%; } .style-selection .collection-item { position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .style-selection .collection-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .style-selection .collection-item--overlaid { position: relative; } .style-selection .collection-image { position: relative; width: 100%; height: 0; overflow: hidden; border-radius: 12px; } .style-selection .collection-image--square { padding-bottom: 100%; } .style-selection .image-wrap { position: relative; width: 100%; height: 100%; } .style-selection .collection-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .style-selection .collection-item:hover .collection-image img { transform: scale(1.05); } .style-selection .collection-item__title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; z-index: 2; } .style-selection .collection-item__title--overlaid { background: transparent; border-radius: 12px; } .style-selection .collection-item__title--center { text-align: center; } .style-selection .collection-item--title { color: white !important; font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; background: #9A9999 !important; padding: 12px 30px !important; border-radius: 30px !important; transition: all 0.3s ease; display: inline-block; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .style-selection .collection-item:hover .collection-item--title { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); background: #222222 !important; } .style-selection .collection-item--title.btn { background: #9A9999 !important; color: white !important; padding: 12px 30px !important; border-radius: 30px !important; border: none !important; text-decoration: none !important; } .style-selection .collection-item--caption { display: block; margin-bottom: 5px; font-size: 0.9rem; opacity: 0.9; } /* Customer Testimonials */ .customer-testimonials { padding: 80px 0; background: #f8f6f0; } .customer-testimonials .page-width { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .customer-testimonials .section-header { text-align: center; margin-bottom: 50px; } .customer-testimonials .section-header h2 { color: #000000; font-size: 2.5rem; font-weight: 700; margin: 0; } .testimonials-mars--section-caption { margin-top: 15px; } .testimonials-mars--section-caption p { color: #666; font-size: 1.1rem; margin: 0; } .slideshow-wrapper { position: relative; overflow: hidden; } .testimonials-slider { display: flex; transition: transform 0.3s ease; } .testimonials-slide--custom { min-width: 100%; flex-shrink: 0; } .testimonial-slide--flex { display: flex; align-items: center; gap: 40px; background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; } .testimonial-image { flex: 0 0 40%; position: relative; } .testimonial-image .image-wrap { position: relative; width: 100%; height: 0; padding-bottom: 66.66666666666667%; overflow: hidden; } .testimonial-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .testimonials-slider__text { flex: 1; padding: 40px; position: relative; } .quote-icon { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; opacity: 0.1; } .quote-icon svg { width: 100%; height: 100%; fill: #000000; } .rte-setting { margin-bottom: 20px; } .rte-setting h5 { color: #000000; font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; line-height: 1.3; } .rte-setting p { color: #666; line-height: 1.6; margin: 0; } .testimonial-stars { color: #ffd700; font-size: 1.2rem; margin-bottom: 15px; display: block; } .testimonials-slider__text cite { font-style: normal; font-weight: 600; color: #000000; font-size: 1.1rem; display: block; margin-bottom: 5px; } .testimonials__info { color: #666; font-size: 0.9rem; } .flickity-page-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; list-style: none; padding: 0; } .flickity-page-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: #ddd; cursor: pointer; transition: background 0.3s ease; } .flickity-page-dots .dot.is-selected { background: #9A9999; } /* Help Section */ .help-section { padding: 80px 0; background: white; } .help-section .page-width { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .help-section .grid { display: flex; flex-wrap: wrap; margin: 0 -15px; } .help-section .grid--uniform { align-items: stretch; } .help-section .grid--flush-bottom { margin-bottom: 0; } .help-section .grid--tight { margin: 0 -10px; } .help-section .grid__item { padding: 0 15px; margin-bottom: 30px; } .help-section .grid--tight .grid__item { padding: 0 10px; margin-bottom: 20px; } .help-section .small--one-half { width: 50%; } .help-section .medium-up--one-quarter { width: 25%; } .help-section .text-left { text-align: left; } .help-section .image-wrap { position: relative; width: 100%; height: 0; overflow: hidden; border-radius: 8px; margin-bottom: 20px; } .help-section .svg-mask--square { padding-bottom: 66.66666666666667%; } .help-section .image-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .help-section .image-wrap:hover img { transform: scale(1.05); } .help-section .column-title { color: #000000; font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; line-height: 1.3; } .help-section .column-caption { margin-bottom: 20px; } .help-section .column-caption p { color: #666; line-height: 1.6; margin: 0; } .help-section .btn { display: inline-block; padding: 10px 20px; border: 2px solid #000000; background: transparent; color: #000000; text-decoration: none; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; transition: all 0.3s ease; } .help-section .btn--secondary { border-color: #000000; color: #000000; } .help-section .btn--small { padding: 8px 16px; font-size: 0.8rem; } .help-section .btn:hover { background: #9A9999; color: white; transform: translateY(-2px); } .help-section .grid__item>div { max-width: 650px; } /* Showroom Section */ .showroom-section { padding: 80px 0; background: #ECECEC; } .showroom-section .page-width { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .showroom-section .section-header { text-align: center; margin-bottom: 50px; } .showroom-section .section-header__title { color: #000000; font-size: 2.5rem; font-weight: 700; margin: 0; } .showroom-section .locations-description { color: #666; font-size: 1.1rem; margin-top: 15px; } .location-wrap { display: flex; flex-wrap: wrap; margin: 0 -15px; } .location-wrap .grid--tight { margin: 0 -10px; } .location-item { padding: 0 15px; margin-bottom: 30px; } .location-wrap .grid--tight .location-item { padding: 0 10px; margin-bottom: 20px; } .location-item.one-half { width: 50%; } .location-item.small--one-whole { width: 100%; } .location-item--inner { background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .location-item--inner:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .location-item--image { position: relative; width: 100%; height: 0; overflow: hidden; } .location-item--image .image-wrap { position: relative; width: 100%; height: 0; padding-bottom: 96.34703196347031%; } .location-item--image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .location-item--inner:hover .location-item--image img { transform: scale(1.05); } .location-item--text { padding: 30px; } .location-item--text-wrap h5 { color: #000000; font-size: 1.3rem; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; } .location-item--text-wrap p { color: #666; line-height: 1.6; margin-bottom: 15px; } .location-item--text-wrap p:last-child { margin-bottom: 0; } .location-item--text-wrap a { color: #000000; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; } .location-item--text-wrap a:hover { color: #333333; } /* Newsletter Section */ .newsletter-section { padding: 80px 0; background: #9A9999; color: white; text-align: center; } .newsletter-section h2 { margin-bottom: 20px; } .newsletter-section p { margin-bottom: 30px; font-size: 1.1rem; } .newsletter-form { display: flex; max-width: 500px; margin: 0 auto 20px; gap: 10px; } .newsletter-form input { flex: 1; padding: 15px; border: none; border-radius: 6px; font-size: 1rem; } .newsletter-form button { background: white; color: #000000; border: none; padding: 15px 30px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .newsletter-form button:hover { background: #ECECEC; } .disclaimer { font-size: 0.9rem; opacity: 0.8; } /* Footer */ .footer { background: #9A9999; color: white; padding: 60px 0 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-section h4 { color: #000000; margin-bottom: 20px; font-size: 1.2rem; } .footer-section p { color: #ccc; line-height: 1.6; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 10px; } .footer-section ul li a { color: #ccc; text-decoration: none; transition: color 0.3s ease; } .footer-section ul li a:hover { color: #000000; } .footer-bottom { border-top: 1px solid #555; padding-top: 30px; text-align: center; } .social-links { margin-bottom: 20px; } .social-links a { color: #ccc; font-size: 1.5rem; margin: 0 15px; transition: color 0.3s ease; } .social-links a:hover { color: #000000; } .payment-methods { margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } .payment-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 28px; background: rgba(255, 255, 255, 0.1); border-radius: 6px; transition: all 0.3s ease; cursor: pointer; } .payment-icon i { font-size: 20px; color: #ccc; transition: all 0.3s ease; } .payment-icon:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .payment-icon:hover i { color: #000000; transform: scale(1.1); } /* Specific styling for different payment methods */ .payment-icon .fa-cc-amex { color: #006fcf; } .payment-icon .fa-apple-pay { color: #000; } .payment-icon .fa-cc-diners-club { color: #0079be; } .payment-icon .fa-cc-discover { color: #ff6000; } .payment-icon .fa-google-pay { color: #4285f4; } .payment-icon .fa-cc-mastercard { color: #eb001b; } .payment-icon .fa-cc-paypal { color: #003087; } .payment-icon .fa-shopify { color: #96bf48; } .payment-icon .fa-cc-visa { color: #1434cb; } /* Fallback for older browsers */ .payment-methods span { color: #ccc; margin: 0 10px; font-size: 0.9rem; } /* Mobile responsive styles for payment methods */ @media (max-width: 768px) { .payment-methods { gap: 8px; justify-content: center; } .payment-icon { width: 36px; height: 24px; } .payment-icon i { font-size: 18px; } } @media (max-width: 480px) { .payment-methods { gap: 6px; } .payment-icon { width: 32px; height: 22px; } .payment-icon i { font-size: 16px; } } .footer-links { margin-bottom: 20px; } .footer-links a { color: #ccc; text-decoration: none; margin: 0 15px; transition: color 0.3s ease; } .footer-links a:hover { color: #000000; } .copyright { color: #999; font-size: 0.9rem; } /* Responsive Design */ @media (max-width: 768px) { .main-nav { padding: 10px 0; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; flex-direction: column; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-height: 80vh; overflow-y: auto; } .nav-menu.active { display: flex !important; } .nav-menu .nav-item { margin-bottom: 15px; border-bottom: 1px solid #ECECEC; padding-bottom: 15px; width: 100%; } .nav-menu .nav-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .nav-menu .nav-link { font-size: 1.1rem; justify-content: space-between; width: 100%; padding: 5px 0; } .nav-menu .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 10px 0 10px 15px; margin-top: 10px; margin-left: 5px; min-width: auto; border-left: 2px solid #000; display: flex; flex-direction: column; gap: 15px; } .nav-menu .dropdown-menu a { font-size: 0.95rem; color: #555; padding: 0; } .mobile-menu-btn { display: block; } .account-btn, .currency-selector { display: none !important; } /* Mobile currency pills */ .mob-cv-pills { display: flex; gap: 2px; align-items: center; } .mob-cv-pill { background: #f4f4f4; border: 1.5px solid transparent; border-radius: 5px; width: 28px; height: 28px; font-size: 13px; font-weight: 700; cursor: pointer; color: #555; display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s, background .15s; padding: 0; font-family: var(--font-sans, sans-serif); } .mob-cv-pill.active { border-color: var(--gold, #C6A972); color: var(--gold, #C6A972); background: #fff; } .nav-actions { gap: 12px; } .nav-brand h1 { font-size: 1.4rem; } .announcement-text { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 90vw; margin: 0 auto; } .announcement-link { font-size: 11px !important; } .announcement-slider .announcement-link-text { background: #C6A972 !important; color: #000 !important; padding: 3px 12px !important; border-radius: 20px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; } .cart-count { width: 16px; height: 16px; min-width: 16px; font-size: 0.6rem; top: -4px; right: -4px; } .hero-content h2 { font-size: 2rem; } .hero-navigation { grid-template-columns: 1fr; gap: 20px; } .products-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .texture-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* Style selection responsive styles */ .style-selection .medium-up--one-third { width: 50%; } .style-selection .collection-list-mars { padding: 0 15px; } .style-selection .grid--tight { margin: 0 -5px; } .style-selection .grid--tight .grid__item { padding: 0 5px; margin-bottom: 15px; } .style-selection .collection-item--title { font-size: 1rem; } .style-selection .section-header__title { font-size: 2rem; } .newsletter-form { flex-direction: column; } .footer-content { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 480px) { .container { padding: 0 15px; } .hero { padding: 40px 0; } .hero-content h2 { font-size: 1.8rem; } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .texture-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Style selection mobile styles */ .style-selection .medium-up--one-third { width: 100%; } .style-selection .collection-list-mars { padding: 0 10px; } .style-selection .collection-item--title { font-size: 0.9rem; } .style-selection .section-header__title { font-size: 1.8rem; } .testimonials-grid, .testimonials-carousel { grid-template-columns: 1fr; } /* Testimonials responsive styles */ .testimonial-slide--flex { flex-direction: column; gap: 20px; } .testimonial-image { flex: none; width: 100%; } .testimonials-slider__text { padding: 30px 20px; } .customer-testimonials .section-header h2 { font-size: 2rem; } /* Help section responsive styles */ .help-section .medium-up--one-quarter { width: 50%; } .help-section .grid--tight { margin: 0 -5px; } .help-section .grid--tight .grid__item { padding: 0 5px; margin-bottom: 15px; } .help-section .column-title { font-size: 1.2rem; } /* Showroom section responsive styles */ .location-item.one-half { width: 100%; } .location-wrap .grid--tight { margin: 0 -5px; } .location-wrap .grid--tight .location-item { padding: 0 5px; margin-bottom: 15px; } .showroom-section .section-header__title { font-size: 2rem; } .blog-grid { grid-template-columns: 1fr; } /* Blog section responsive styles */ .blog-post-slide { min-width: 50%; } .blog-post-slide--flex { flex-direction: column; gap: 20px; } .blog-post-slide--image { flex: none; width: 100%; } .blog-post-slide--caption { padding: 20px; } .blog-section h2 { font-size: 2rem; } /* Testimonials mobile styles */ .testimonials-slider__text { padding: 20px 15px; } .rte-setting h5 { font-size: 1.1rem; } .customer-testimonials .section-header h2 { font-size: 1.8rem; } /* Help section mobile styles */ .help-section .small--one-half { width: 100%; } .help-section .medium-up--one-quarter { width: 100%; } .help-section .column-title { font-size: 1.1rem; } /* Showroom section responsive styles */ .location-item.one-half { width: 100%; } .location-wrap .grid--tight { margin: 0 -5px; } .location-wrap .grid--tight .location-item { padding: 0 5px; margin-bottom: 15px; } .showroom-section .section-header__title { font-size: 1.8rem; } /* Blog section mobile styles */ .blog-post-slide { min-width: 100%; } .blog-post-slide--caption { padding: 15px; } .blog-post-slide--title { font-size: 1.1rem; } .blog-section h2 { font-size: 1.8rem; } /* Best sellers mobile styles */ .best-sellers { padding: 50px 0; } .best-sellers .section-header { margin-bottom: 36px; } .best-sellers h2 { font-size: 1.9rem; } .best-sellers .section-header__description { font-size: 0.95rem; margin-top: 14px; } .best-sellers .grid-product__meta { padding: 15px; } .best-sellers .grid-product__title { font-size: 0.95rem; min-height: 2.4rem; } .best-sellers .grid-product__price { font-size: 1rem; } .grid-product__actions { padding: 0 15px 15px; } .best-sellers .grid-product__actions .add-to-cart-btn { padding: 10px 14px !important; font-size: 13px !important; } /* Best sellers tablet styles */ .best-sellers { padding: 60px 0; } .best-sellers h2 { font-size: 2.2rem; } .best-sellers .section-header__description { font-size: 1.1rem; } .best-sellers .grid-product__title { font-size: 1rem; } .best-sellers .grid-product__price { font-size: 1.1rem; } .best-sellers .grid-product__actions .add-to-cart-btn { padding: 12px 16px !important; font-size: 14px !important; } /* Showroom section mobile styles */ .location-item--text { padding: 20px; } .location-item--text-wrap h5 { font-size: 1.2rem; } } /* Sign In Modal Styles */ .signin-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; } .signin-modal .modal-overlay { background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; } .signin-modal .modal-content { background: white; border-radius: 12px; max-width: 450px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .signin-container { padding: 40px; } .signin-container h2 { color: #000000; text-align: center; margin-bottom: 10px; font-size: 2rem; } .signin-subtitle { text-align: center; color: #666; margin-bottom: 30px; font-size: 1rem; } .signin-form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; } .form-group label { margin-bottom: 8px; font-weight: 600; color: #000000; font-size: 0.9rem; } .form-group input { padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; } .form-group input:focus { outline: none; border-color: #000000; } .form-options { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; } .remember-me { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #666; cursor: pointer; } .remember-me input[type="checkbox"] { width: auto; margin: 0; } .forgot-password { color: #000000; text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; } .forgot-password:hover { color: #333333; } .signin-btn { background: #9A9999; color: white; border: none; padding: 15px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.3s ease; margin-top: 10px; } .signin-btn:hover { background: #333333; } .signin-btn:disabled { background: #ccc; cursor: not-allowed; } .divider { text-align: center; position: relative; margin: 20px 0; } .divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e0e0e0; } .divider span { background: white; padding: 0 15px; color: #666; font-size: 0.9rem; } .social-signin { display: flex; flex-direction: column; gap: 12px; } .social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; background: white; color: #000000; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .social-btn:hover { border-color: #000000; background: #f8f6f0; } .google-btn:hover { border-color: #db4437; color: #db4437; } .facebook-btn:hover { border-color: #4267B2; color: #4267B2; } .signup-link { text-align: center; margin-top: 20px; color: #666; font-size: 0.9rem; } .signup-link a { color: #000000; text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .signup-link a:hover { color: #333333; } /* Error and Success Messages */ .form-error { color: #e74c3c; font-size: 0.8rem; margin-top: 5px; } .form-success { color: #27ae60; font-size: 0.8rem; margin-top: 5px; } .input-error { border-color: #e74c3c !important; } .input-success { border-color: #27ae60 !important; } /* Loading State */ .signin-btn.loading { position: relative; color: transparent; } .signin-btn.loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid transparent; border-top: 2px solid white; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* Responsive Design for Sign In Modal */ @media (max-width: 480px) { .signin-container { padding: 30px 20px; } .signin-container h2 { font-size: 1.5rem; } .form-options { flex-direction: column; align-items: flex-start; gap: 10px; } .social-signin { gap: 10px; } .social-btn { padding: 10px; font-size: 0.8rem; } } /* Enhanced Best Sellers Section Styles */ .page-width { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .page-width--flush-small { padding: 0; } .section-header { text-align: center; margin-bottom: 50px; } .section-header__title { color: #000000; font-size: 2.5rem; font-weight: 700; margin: 0; } .grid-overflow-wrapper { overflow: hidden; } .grid { display: flex; flex-wrap: wrap; margin: 0 -15px; } .grid--uniform { align-items: stretch; } .grid__item { padding: 0 15px; margin-bottom: 30px; } .small--one-half { width: 50%; } .medium-up--one-quarter { width: 25%; } .grid-product { height: 100%; position: relative; } .grid-product__content { height: 100%; display: flex; flex-direction: column; } .grid__item-image-wrapper { position: relative; flex: 1; display: flex; flex-direction: column; } .grid-product__image-mask { position: relative; overflow: hidden; border-radius: 8px; background: #ECECEC; } .grid__image-ratio { position: relative; width: 100%; height: 0; overflow: hidden; } .grid__image-ratio--square { padding-bottom: 100%; } .grid__image-ratio img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .grid-product:hover .grid__image-ratio img { transform: scale(1.05); } .grid-product__secondary-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease; } .grid-product:hover .grid-product__secondary-image { opacity: 1; } .quick-product__btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.95); color: #000000; border: none; padding: 12px 24px; border-radius: 6px; font-weight: 600; font-size: 0.9rem; cursor: pointer; opacity: 0; transition: all 0.3s ease; z-index: 10; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .grid-product:hover .quick-product__btn { opacity: 1; } .quick-product__btn:hover { background: #9A9999; color: white; transform: translate(-50%, -50%) scale(1.05); } .grid-product__link { text-decoration: none; color: inherit; display: block; margin-top: 15px; } .grid-product__meta { text-align: center; } .grid-product__title { color: #000000; font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; line-height: 1.3; } .grid-product__title--heading { font-family: 'Playfair Display', serif; } .grid-product__price { color: #000000; font-weight: 600; font-size: 1.1rem; } /* Responsive adjustments for the new grid */ @media (max-width: 768px) { .medium-up--one-quarter { width: 50%; } .section-header__title { font-size: 2rem; } .grid { margin: 0 -10px; } .grid__item { padding: 0 10px; margin-bottom: 20px; } } @media (max-width: 480px) { .small--one-half { width: 100%; } .medium-up--one-quarter { width: 100%; } .section-header__title { font-size: 1.8rem; } .grid { margin: 0 -5px; } .grid__item { padding: 0 5px; margin-bottom: 15px; } .quick-product__btn { padding: 10px 20px; font-size: 0.8rem; } } /* Enhanced Texture Selection Collection Grid Styles */ .page-width--medium { max-width: 1000px; } .collection-list-mars { padding: 0 20px; } .grid--tight { margin: 0 -10px; } .grid--tight .grid__item { padding: 0 10px; margin-bottom: 20px; } .collection-item { position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .collection-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .collection-item--overlaid { position: relative; } .collection-image { position: relative; width: 100%; height: 0; overflow: hidden; border-radius: 12px; } .collection-image--square { padding-bottom: 100%; } .image-wrap { position: relative; width: 100%; height: 100%; } .collection-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .collection-item:hover .collection-image img { transform: scale(1.05); } .collection-item__title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 2; } .collection-item__title--overlaid { background: transparent; border-radius: 12px; } .collection-item__title--center { text-align: center; } .collection-item--title { color: white; font-weight: 600; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 1px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.3); padding: 10px 20px; border-radius: 8px; transition: all 0.3s ease; } .collection-item:hover .collection-item--title { transform: scale(1.1); text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); } .collection-item--caption { display: block; margin-bottom: 5px; font-size: 0.9rem; opacity: 0.9; } /* Specific image positioning for each collection */ .collection-image--curly { object-position: center center; } .collection-image--wavy { object-position: center center; } .collection-image--straight { object-position: center center; } .collection-image--textured { object-position: center center; } /* Responsive adjustments for collection grid */ @media (max-width: 768px) { .medium-up--one-half { width: 100%; } .collection-list-mars { padding: 0 15px; } .grid--tight { margin: 0 -5px; } .grid--tight .grid__item { padding: 0 5px; margin-bottom: 15px; } .collection-item--title { font-size: 1.3rem; } /* Texture selection responsive styles */ .texture-selection .medium-up--one-half { width: 100%; } .texture-selection .collection-list-mars { padding: 0 15px; } .texture-selection .grid--tight { margin: 0 -5px; } .texture-selection .grid--tight .grid__item { padding: 0 5px; margin-bottom: 15px; } .texture-selection .collection-item--title { font-size: 1.3rem; } .texture-selection .section-header__title { font-size: 2rem; } } @media (max-width: 480px) { .collection-list-mars { padding: 0 10px; } .collection-item--title { font-size: 1.2rem; } .section-header__title { font-size: 1.8rem; } /* Texture selection mobile styles */ .texture-selection .collection-list-mars { padding: 0 10px; } .texture-selection .collection-item--title { font-size: 1.2rem; } .texture-selection .section-header__title { font-size: 1.8rem; } } /* Product Page Styles */ .product-page { padding: 40px 0 80px; background: #ECECEC; } .breadcrumb { margin-bottom: 30px; font-size: 0.9rem; color: #666; } .breadcrumb a { color: #000000; text-decoration: none; transition: color 0.3s ease; } .breadcrumb a:hover { color: #333333; } .breadcrumb span { margin: 0 8px; color: #999; } .product-details { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .product-gallery { display: flex; flex-direction: column; gap: 20px; } .main-image { position: relative; overflow: hidden; border-radius: 8px; background: #ECECEC; } .main-image img { width: 100%; height: 500px; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .main-image:hover img { transform: scale(1.05); } .thumbnail-images { display: flex; gap: 15px; overflow-x: auto; padding: 10px 0; } .thumbnail { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; flex-shrink: 0; } .thumbnail:hover, .thumbnail.active { border-color: #000000; transform: scale(1.05); } .product-info h1 { color: #000000; font-size: 2.2rem; margin-bottom: 15px; line-height: 1.2; } .product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .stars { color: #ffd700; font-size: 1.1rem; } .rating-text { color: #666; font-size: 0.9rem; } .product-price { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; } .current-price { color: #000000; font-size: 1.8rem; font-weight: 700; } .original-price { color: #999; font-size: 1.2rem; text-decoration: line-through; } .discount { background: #e74c3c; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; } .product-description { margin-bottom: 30px; color: #666; line-height: 1.6; } .product-options { margin-bottom: 30px; } .option-group { margin-bottom: 25px; } .option-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #000000; font-size: 0.9rem; } .option-group select { width: 100%; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; background: white; transition: border-color 0.3s ease; } .option-group select:focus { outline: none; border-color: #000000; } .color-options { display: flex; gap: 15px; flex-wrap: wrap; } .color-option { display: flex; align-items: center; gap: 8px; padding: 10px 15px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; background: white; } .color-option:hover, .color-option.active { border-color: #000000; background: #f8f6f0; } .color-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ddd; } .color-1b { background: #1a1a1a; } .color-2 { background: #2c2c2c; } .color-4 { background: #4a4a4a; } .color-6 { background: #6b6b6b; } .quantity-selector { display: flex; align-items: center; gap: 0; border: 2px solid #e0e0e0; border-radius: 8px; overflow: hidden; width: fit-content; } .quantity-selector button { background: #ECECEC; border: none; padding: 12px 16px; cursor: pointer; font-size: 1.2rem; font-weight: 600; color: #000000; transition: background 0.3s ease; } .quantity-selector button:hover { background: #e0e0e0; } .quantity-selector input { border: none; padding: 12px 16px; text-align: center; font-size: 1rem; width: 60px; background: white; } .quantity-selector input:focus { outline: none; } .add-to-cart-section { display: flex; gap: 15px; margin-bottom: 30px; } .add-to-cart-btn, .buy-now-btn { flex: 1; padding: 15px 20px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .add-to-cart-btn { background: #9A9999; color: white; } .add-to-cart-btn:hover { background: #333333; transform: translateY(-2px); } .buy-now-btn { background: #9A9999; color: white; } .buy-now-btn:hover { background: #555; transform: translateY(-2px); } .product-features { margin-bottom: 30px; } .feature { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #666; font-size: 0.9rem; } .feature i { color: #27ae60; font-size: 1rem; } .social-sharing { display: flex; align-items: center; gap: 15px; padding-top: 20px; border-top: 1px solid #e0e0e0; } .social-sharing span { font-weight: 600; color: #000000; font-size: 0.9rem; } .share-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: white; text-decoration: none; transition: transform 0.3s ease; } .share-btn:hover { transform: scale(1.1); } .share-btn.facebook { background: #4267B2; } .share-btn.twitter { background: #1DA1F2; } .share-btn.pinterest { background: #E60023; } .share-btn.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } .product-tabs { background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 60px; } .tab-nav { display: flex; border-bottom: 1px solid #e0e0e0; } .tab-btn { flex: 1; padding: 20px; border: none; background: white; color: #666; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border-bottom: 3px solid transparent; } .tab-btn:hover, .tab-btn.active { color: #000000; background: #f8f6f0; border-bottom-color: #000000; } .tab-content { padding: 40px; } .tab-panel { display: none; } .tab-panel.active { display: block; } .tab-panel h3 { color: #000000; margin-bottom: 20px; font-size: 1.5rem; } .tab-panel h4 { color: #000000; margin: 25px 0 15px; font-size: 1.2rem; } .tab-panel p { color: #666; line-height: 1.6; margin-bottom: 15px; } .tab-panel ul { color: #666; line-height: 1.6; margin-bottom: 20px; padding-left: 20px; } .tab-panel li { margin-bottom: 8px; } .product-specs { width: 100%; border-collapse: collapse; margin-top: 20px; } .product-specs td { padding: 12px 0; border-bottom: 1px solid #e0e0e0; } .product-specs td:first-child { font-weight: 600; color: #000000; width: 40%; } .product-specs td:last-child { color: #666; } .reviews-summary { margin-bottom: 30px; text-align: center; padding: 20px; background: #f8f6f0; border-radius: 8px; } .overall-rating { display: flex; flex-direction: column; align-items: center; gap: 10px; } .rating-number { font-size: 3rem; font-weight: 700; color: #000000; } .total-reviews { color: #666; font-size: 0.9rem; } .review { background: white; padding: 25px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #e0e0e0; } .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .reviewer-info { display: flex; align-items: center; gap: 10px; } .reviewer-name { font-weight: 600; color: #000000; } .review-date { color: #999; font-size: 0.9rem; } .review p { color: #666; line-height: 1.6; margin: 0; } .related-products { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .related-products h2 { color: #000000; text-align: center; margin-bottom: 40px; font-size: 2rem; } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .product-image img { width: 100%; height: 200px; object-fit: cover; } .product-card h3 { padding: 15px 20px 5px; color: #000000; font-size: 1rem; margin: 0; } .product-card .price { padding: 0 20px 15px; color: #000000; font-weight: 600; } .product-card .add-to-cart-btn { margin: 0 20px 20px; padding: 10px 15px; font-size: 0.9rem; } /* Responsive Design for Product Page */ @media (max-width: 768px) { .product-details { grid-template-columns: 1fr; gap: 30px; padding: 20px; } .main-image img { height: 300px; } .thumbnail-images { justify-content: center; } .product-info h1 { font-size: 1.8rem; } .current-price { font-size: 1.5rem; } .add-to-cart-section { flex-direction: column; } .color-options { justify-content: center; } .tab-nav { flex-wrap: wrap; } .tab-btn { flex: 1 1 50%; padding: 15px 10px; font-size: 0.9rem; } .tab-content { padding: 20px; } .related-products { padding: 20px; } .products-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } } @media (max-width: 480px) { .product-page { padding: 20px 0 40px; } .product-details { padding: 15px; gap: 20px; } .main-image img { height: 250px; } .thumbnail { width: 60px; height: 60px; } .product-info h1 { font-size: 1.5rem; } .current-price { font-size: 1.3rem; } .tab-btn { flex: 1 1 100%; padding: 12px 8px; font-size: 0.8rem; } .tab-content { padding: 15px; } .related-products { padding: 15px; } .products-grid { grid-template-columns: 1fr; } } /* Cart Toast Notification */ .cart-toast { position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); z-index: 10000; transform: translateX(100%); transition: transform 0.3s ease; } .cart-toast.show { transform: translateX(0); } .toast-content { display: flex; align-items: center; gap: 10px; } .toast-content i { font-size: 1.2rem; } /* Best Sellers Add to Cart Buttons */ .grid-product__actions { padding: 10px; text-align: center; } /* Enhanced Product Grid Styling */ .best-sellers .grid { position: relative; z-index: 2; } .best-sellers .grid__item { margin-bottom: 30px; } .best-sellers .grid-product { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; border: 1px solid rgba(139, 69, 19, 0.1); } .best-sellers .grid-product:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); border-color: rgba(139, 69, 19, 0.2); } .best-sellers .grid-product__content { position: relative; } .best-sellers .grid__item-image-wrapper { position: relative; overflow: hidden; } .best-sellers .grid-product__image-mask { position: relative; overflow: hidden; } .best-sellers .grid__image-ratio { position: relative; overflow: hidden; } .best-sellers .grid__image-ratio img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .best-sellers .grid-product:hover .grid__image-ratio img { transform: scale(1.05); } .best-sellers .grid-product__secondary-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease; } .best-sellers .grid-product:hover .grid-product__secondary-image { opacity: 1; } .best-sellers .grid-product__meta { padding: 20px; background: white; } .best-sellers .grid-product__title { color: #000000; font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; line-height: 1.3; min-height: 2.6rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .best-sellers .grid-product__price { color: #000000; font-size: 1.2rem; font-weight: 700; margin-bottom: 15px; } /* Enhanced Add to Cart Button */ .grid-product__actions { padding: 0 20px 20px; background: white; } /* Best Sellers Add to Cart Button - High Specificity */ .best-sellers .grid-product__actions .add-to-cart-btn { width: 100% !important; background: linear-gradient(135deg, #000000 0%, #333333 100%) !important; color: white !important; border: none !important; padding: 14px 20px !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; position: relative !important; overflow: hidden !important; } .best-sellers .grid-product__actions .add-to-cart-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .best-sellers .grid-product__actions .add-to-cart-btn:hover::before { left: 100%; } .best-sellers .grid-product__actions .add-to-cart-btn:hover { background: linear-gradient(135deg, #333333 0%, #000000 100%) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 20px rgba(139, 69, 19, 0.3) !important; } .best-sellers .grid-product__actions .add-to-cart-btn:active { transform: translateY(-1px) !important; } .best-sellers .grid-product__actions .add-to-cart-btn i { font-size: 14px; transition: transform 0.3s ease; } .best-sellers .grid-product__actions .add-to-cart-btn:hover i { transform: scale(1.1); } /* Force override any conflicting styles for best sellers add to cart button */ .best-sellers .grid__item .grid-product__actions .add-to-cart-btn { background: linear-gradient(135deg, #000000 0%, #333333 100%) !important; background-color: #9A9999 !important; color: white !important; border: none !important; box-shadow: none !important; } .best-sellers .grid__item .grid-product__actions .add-to-cart-btn:hover { background: linear-gradient(135deg, #333333 0%, #000000 100%) !important; background-color: #333333 !important; } /* Best Sellers Mobile Carousel Styling */ @media (max-width: 768px) { .best-sellers .grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; margin: 0 -15px; padding-left: 15px; padding-right: 15px; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .best-sellers .grid::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .best-sellers .grid__item { flex: 0 0 75%; max-width: 75%; scroll-snap-align: center; padding: 0 10px; } .best-sellers .grid-product__title { font-size: 1rem; min-height: 2.4rem; } .best-sellers .grid-product__price { font-size: 1.1rem; margin-bottom: 10px; } .best-sellers .grid-product__actions { padding: 0 15px 15px; } .best-sellers .grid-product__meta { padding: 15px; } } /* Best Sellers Page Specific Button Styling */ .bestsellers-page .collection-product__btn--primary { background: linear-gradient(135deg, #000000 0%, #333333 100%) !important; background-color: #9A9999 !important; color: white !important; border: none !important; padding: 12px 20px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; text-decoration: none !important; display: inline-block !important; text-align: center !important; width: 100% !important; margin-bottom: 8px !important; } .bestsellers-page .collection-product__btn--primary:hover { background: linear-gradient(135deg, #333333 0%, #000000 100%) !important; background-color: #333333 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3) !important; } .bestsellers-page .collection-product__btn--secondary { background: #666 !important; background-color: #666 !important; color: white !important; border: none !important; padding: 12px 20px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; text-decoration: none !important; display: inline-block !important; text-align: center !important; width: 100% !important; } .bestsellers-page .collection-product__btn--secondary:hover { background: #555 !important; background-color: #555 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } /* Best Sellers Page Product Actions Overlay Buttons */ .bestsellers-page .product-actions .add-to-cart-btn { background: linear-gradient(135deg, #000000 0%, #333333 100%) !important; background-color: #9A9999 !important; color: white !important; border: none !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(139, 69, 19, 0.3) !important; } .bestsellers-page .product-actions .add-to-cart-btn:hover { background: linear-gradient(135deg, #333333 0%, #000000 100%) !important; background-color: #333333 !important; transform: scale(1.1) !important; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.4) !important; } .bestsellers-page .product-actions .quick-view-btn { background: white !important; background-color: white !important; color: #000000 !important; border: none !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } .bestsellers-page .product-actions .quick-view-btn:hover { background: #9A9999 !important; background-color: #9A9999 !important; color: white !important; transform: scale(1.1) !important; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3) !important; } /* Products page styles */ .template-collection { background: #f8f9fa; } .collection { padding: 2rem 0; } .collection__title { text-align: center; margin-bottom: 3rem; } .collection__title .title { font-size: 3rem; font-weight: 700; color: #000000; margin-bottom: 1rem; } .collection__description { max-width: 600px; margin: 0 auto; font-size: 1.1rem; color: #6c757d; line-height: 1.6; } .collection__filters { background: white; border-bottom: 1px solid #e9ecef; padding: 1.5rem 0; margin-bottom: 2rem; } .collection__filters-wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .collection__filters-left { display: flex; align-items: center; gap: 1rem; } .collection__filter-group { display: flex; align-items: center; gap: 0.5rem; } .collection__filter-label { font-weight: 500; color: #495057; } .collection__filter-select { padding: 0.5rem 1rem; border: 1px solid #ced4da; border-radius: 0.375rem; background: white; font-size: 0.9rem; min-width: 150px; } .collection__filters-right { display: flex; align-items: center; } .collection__view-toggle { display: flex; border: 1px solid #ced4da; border-radius: 0.375rem; overflow: hidden; } .collection__view-btn { padding: 0.5rem; background: white; border: none; cursor: pointer; transition: all 0.2s ease; color: #6c757d; } .collection__view-btn:hover { background: #f8f9fa; color: #495057; } .collection__view-btn.active { background: #007bff; color: white; } .collection__products { margin-bottom: 3rem; } .collection__products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin: 40px 0 60px 0; padding: 0 20px; } .collection__products-grid.list-view { grid-template-columns: 1fr; gap: 1rem; } .collection__pagination { text-align: center; } .collection__load-more { padding: 1rem 2rem; font-size: 1rem; font-weight: 500; } /* Product card styles for products page */ .collection-product { background: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .collection-product:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .collection-product__image { position: relative; overflow: hidden; } .collection-product__image img { width: 100%; height: 300px; object-fit: cover; transition: transform 0.3s ease; } .collection-product:hover .collection-product__image img { transform: scale(1.05); } .collection-product__content { padding: 1.5rem; } .collection-product__title { font-size: 1.1rem; font-weight: 600; color: #000000; margin-bottom: 0.5rem; line-height: 1.4; } .collection-product__price { font-size: 1.2rem; font-weight: 700; color: #e74c3c; margin-bottom: 1rem; } .collection-product__actions { display: flex; gap: 0.5rem; } .collection-product__btn { flex: 1; padding: 0.75rem; border: none; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; text-align: center; display: inline-block; } .collection-product__btn--primary { background: #007bff; color: white; } .collection-product__btn--primary:hover { background: #0056b3; } .collection-product__btn--secondary { background: #6c757d; color: white; } .collection-product__btn--secondary:hover { background: #545b62; } /* List view styles */ .collection__products-grid.list-view .collection-product { display: flex; align-items: center; padding: 1rem; } .collection__products-grid.list-view .collection-product__image { width: 200px; height: 200px; flex-shrink: 0; margin-right: 1.5rem; } .collection__products-grid.list-view .collection-product__image img { height: 100%; } .collection__products-grid.list-view .collection-product__content { flex: 1; padding: 0; } .collection__products-grid.list-view .collection-product__actions { width: 200px; flex-shrink: 0; } /* Responsive design */ @media (max-width: 768px) { .collection__filters-wrapper { flex-direction: column; align-items: stretch; } .collection__filters-left { justify-content: center; } .collection__products-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .collection__products-grid.list-view .collection-product { flex-direction: column; text-align: center; } .collection__products-grid.list-view .collection-product__image { width: 100%; height: 250px; margin-right: 0; margin-bottom: 1rem; } .collection__products-grid.list-view .collection-product__actions { width: 100%; } } /* Placeholder Image Styles */ .placeholder-image { background: #9A9999; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; text-align: center; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .placeholder-image:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Product Page Styles */ .breadcrumb { background: #f8f9fa; padding: 1rem 0; border-bottom: 1px solid #e9ecef; } .breadcrumb .container { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #6c757d; } .breadcrumb a { color: #6c757d; text-decoration: none; transition: color 0.3s ease; } .breadcrumb a:hover { color: #000000; } .breadcrumb span { color: #adb5bd; } .product-section { padding: 3rem 0; background: #fff; } .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1200px; margin: 0 auto; } .product-images { display: flex; flex-direction: column; gap: 1rem; } .main-image { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .main-image:hover img { transform: scale(1.05); } .thumbnail-images { display: flex; gap: 0.5rem; justify-content: center; } .thumbnail { width: 80px; height: 80px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; object-fit: cover; } .thumbnail:hover, .thumbnail.active { border-color: #000000; transform: scale(1.05); } .product-details { display: flex; flex-direction: column; gap: 1.5rem; } .product-title { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #000000; margin: 0; line-height: 1.2; } .product-price { font-size: 1.8rem; font-weight: 600; color: #000000; } .current-price { font-size: 2rem; } .product-description { font-size: 1.1rem; line-height: 1.6; color: #555; } .product-options { display: flex; flex-direction: column; gap: 1rem; } .option-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: #000000; } .option-buttons { display: flex; gap: 1rem; } .option-btn { padding: 0.75rem 1.5rem; border: 2px solid #e9ecef; background: #fff; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; color: #555; } .option-btn:hover, .option-btn.active { border-color: #000000; background: #9A9999; color: #fff; } .quantity-selector { display: flex; flex-direction: column; gap: 0.5rem; } .quantity-selector label { font-weight: 600; color: #000000; } .quantity-controls { display: flex; align-items: center; border: 2px solid #e9ecef; border-radius: 8px; width: fit-content; } .quantity-btn { padding: 0.75rem 1rem; border: none; background: #f8f9fa; cursor: pointer; font-size: 1.2rem; font-weight: 600; color: #555; transition: all 0.3s ease; } .quantity-btn:hover { background: #9A9999; color: #fff; } .quantity-controls input { width: 60px; padding: 0.75rem; border: none; text-align: center; font-size: 1rem; font-weight: 600; background: #fff; } .add-to-cart-section { display: flex; gap: 1rem; margin-top: 1rem; } .add-to-cart-btn, .buy-now-btn { flex: 1; padding: 1rem 2rem; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .add-to-cart-btn { background: #9A9999; color: #fff; } .add-to-cart-btn:hover { background: #333333; transform: translateY(-2px); } .buy-now-btn { background: #9A9999; color: #fff; } .buy-now-btn:hover { background: #1a252f; transform: translateY(-2px); } .stock-status { padding: 0.75rem; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 8px; color: #155724; font-weight: 500; } .share-section { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid #e9ecef; } .share-section span { font-weight: 600; color: #000000; } .share-buttons { display: flex; gap: 0.5rem; } .share-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; } .share-btn.facebook { background: #3b5998; color: #fff; } .share-btn.twitter { background: #1da1f2; color: #fff; } .share-btn.pinterest { background: #bd081c; color: #fff; } .share-btn:hover { transform: scale(1.1); } /* Product Features Section */ .product-features { padding: 4rem 0; background: #f8f9fa; } .product-features h2 { text-align: center; font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #000000; margin-bottom: 3rem; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .feature-item { text-align: center; padding: 2rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .feature-item:hover { transform: translateY(-5px); } .feature-item i { font-size: 3rem; color: #000000; margin-bottom: 1rem; } .feature-item h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 600; color: #000000; margin-bottom: 1rem; } .feature-item p { color: #555; line-height: 1.6; } /* Product Description Section */ .product-description-section { padding: 4rem 0; background: #fff; } .description-content { max-width: 800px; margin: 0 auto; } .description-content h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #000000; margin-bottom: 2rem; } .description-content h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 600; color: #000000; margin: 2rem 0 1rem 0; } .description-content p { font-size: 1.1rem; line-height: 1.7; color: #555; margin-bottom: 1.5rem; } .description-content ul { margin: 1rem 0; padding-left: 2rem; } .description-content li { font-size: 1.1rem; line-height: 1.7; color: #555; margin-bottom: 0.5rem; } .description-content ol { margin: 1rem 0; padding-left: 2rem; } .description-content ol li { font-size: 1.1rem; line-height: 1.7; color: #555; margin-bottom: 0.5rem; } /* Delivery Section */ .delivery-section { padding: 4rem 0; background: #f8f9fa; } .delivery-section h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #000000; margin-bottom: 2rem; text-align: center; } .delivery-section p { font-size: 1.1rem; line-height: 1.7; color: #555; margin-bottom: 1.5rem; max-width: 800px; margin-left: auto; margin-right: auto; } /* Quality Section */ .quality-section { padding: 4rem 0; background: #fff; } .quality-section h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #000000; margin-bottom: 2rem; text-align: center; } .quality-section p { font-size: 1.1rem; line-height: 1.7; color: #555; margin-bottom: 1.5rem; max-width: 800px; margin-left: auto; margin-right: auto; } /* Returns Section */ .returns-section { padding: 4rem 0; background: #f8f9fa; } .returns-section h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #000000; margin-bottom: 2rem; text-align: center; } .returns-section p { font-size: 1.1rem; line-height: 1.7; color: #555; margin-bottom: 1.5rem; max-width: 800px; margin-left: auto; margin-right: auto; } /* Related Products */ .related-products { padding: 4rem 0; background: #fff; } .related-products h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #000000; margin-bottom: 3rem; text-align: center; } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .product-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .product-card:hover { transform: translateY(-5px); } .product-card .product-image { width: 100%; aspect-ratio: 1; overflow: hidden; } .product-card .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .product-card:hover .product-image img { transform: scale(1.05); } .product-info { padding: 1.5rem; text-align: center; } .product-info h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 600; color: #000000; margin-bottom: 0.5rem; } .product-info .price { font-size: 1.2rem; font-weight: 600; color: #000000; margin-bottom: 1rem; } .shop-now-btn { padding: 0.75rem 1.5rem; background: #9A9999; color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .shop-now-btn:hover { background: #333333; transform: translateY(-2px); } /* Responsive Design */ @media (max-width: 768px) { .product-grid { grid-template-columns: 1fr; gap: 2rem; } .product-title { font-size: 2rem; } .option-buttons { flex-direction: column; } .add-to-cart-section { flex-direction: column; } .features-grid { grid-template-columns: 1fr; } .products-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .description-content h2, .delivery-section h2, .quality-section h2, .returns-section h2, .related-products h2 { font-size: 2rem; } } /* Screen reader only text */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Blog Page Styles */ .blog-posts-section { padding: 4rem 0; background: #ffffff; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-top: 2rem; } .blog-post { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-post:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .blog-post.featured { grid-column: span 2; } .post-image { width: 100%; height: 250px; overflow: hidden; } .blog-post.featured .post-image { height: 300px; } .post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .blog-post:hover .post-image img { transform: scale(1.05); } .post-content { padding: 1.5rem; } .post-meta { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: 0.9rem; color: #666; } .post-date { color: #000000; font-weight: 500; } .post-category { background: #9A9999; color: #ffffff; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; } .post-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 600; color: #000000; margin-bottom: 1rem; line-height: 1.3; } .blog-post.featured .post-title { font-size: 2rem; } .post-excerpt { color: #666; line-height: 1.6; margin-bottom: 1.5rem; } .read-more-btn { display: inline-block; color: #000000; text-decoration: none; font-weight: 600; border-bottom: 2px solid #000000; padding-bottom: 0.25rem; transition: all 0.3s ease; } .read-more-btn:hover { color: #333333; border-bottom-color: #333333; } .newsletter-section { background: #f8f9fa; padding: 4rem 0; text-align: center; } .newsletter-content h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #000000; margin-bottom: 1rem; } .newsletter-content p { font-size: 1.1rem; color: #666; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .newsletter-form { display: flex; max-width: 500px; margin: 0 auto; gap: 1rem; } .newsletter-form input { flex: 1; padding: 1rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; outline: none; transition: border-color 0.3s ease; } .newsletter-form input:focus { border-color: #000000; } .newsletter-form button { padding: 1rem 2rem; background: #9A9999; color: #ffffff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; } .newsletter-form button:hover { background: #333333; } /* Responsive Design for Blog */ @media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; gap: 1.5rem; } .blog-post.featured { grid-column: span 1; } .post-content { padding: 1rem; } .post-title { font-size: 1.25rem; } .blog-post.featured .post-title { font-size: 1.5rem; } .newsletter-form { flex-direction: column; } .newsletter-content h2 { font-size: 2rem; } } .recently-viewed-mini .product-info .price { font-size: 0.8rem; color: #000000; font-weight: 600; } .no-recent-items-mini { text-align: center; color: #999; font-size: 0.85rem; font-style: italic; padding: 1rem; grid-column: 1 / -1; } /* Mini Newsletter in Cart */ .newsletter-mini { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; } .newsletter-mini h4 { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 600; color: #000000; margin-bottom: 0.75rem; } .newsletter-mini p { font-size: 0.9rem; color: #666; margin-bottom: 1rem; line-height: 1.4; } .newsletter-form-mini { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; } .newsletter-form-mini input { padding: 0.75rem; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 0.9rem; outline: none; transition: border-color 0.3s ease; } .newsletter-form-mini input:focus { border-color: #000000; } .newsletter-form-mini button { padding: 0.75rem 1rem; background: #9A9999; color: #ffffff; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.3s ease; } .newsletter-form-mini button:hover { background: #333333; } .disclaimer-mini { font-size: 0.75rem; color: #999; margin: 0; line-height: 1.3; } /* Cart Summary Always Visible */ .cart-summary { display: block !important; /* Always show cart summary for recently viewed */ } .cart-summary .summary-card { min-height: 400px; /* Ensure enough space for recently viewed */ } /* Hide checkout actions when cart is empty */ .checkout-actions { display: block; } .checkout-actions.hidden { display: none; } /* Mini Recently Viewed in Cart */ .recently-viewed-mini { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; } .recently-viewed-mini h4 { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 600; color: #000000; margin-bottom: 1rem; } .recently-viewed-mini .recently-viewed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; } .recently-viewed-mini .product-card { background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .recently-viewed-mini .product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .recently-viewed-mini .product-image { width: 100%; height: 100px; overflow: hidden; } .recently-viewed-mini .product-image img { width: 100%; height: 100%; object-fit: cover; } .recently-viewed-mini .product-info { padding: 0.75rem; } .recently-viewed-mini .product-info h5 { font-size: 0.9rem; font-weight: 600; color: #000000; margin-bottom: 0.25rem; line-height: 1.2; } .recently-viewed-mini .product-info .price { font-size: 0.8rem; color: #000000; font-weight: 600; } /* Cart Page Styles */ .cart-section { padding: 3rem 0; background: #ffffff; min-height: 60vh; } .cart-header { text-align: center; margin-bottom: 3rem; } .cart-header h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #000000 !important; margin-bottom: 1rem; } .cart-subtitle { font-size: 1.1rem; color: #666666; margin: 0; } .cart-content { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; } .cart-items { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 2rem; } .empty-cart { text-align: center; padding: 4rem 2rem; } .empty-cart-content i { font-size: 4rem; color: #666666; margin-bottom: 2rem; } .empty-cart-content h2 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 600; color: #000000; margin-bottom: 1rem; } .empty-cart-content p { font-size: 1.1rem; color: #666666; margin-bottom: 2rem; } .continue-shopping-btn { display: inline-block; padding: 1rem 2rem; background: #9A9999 !important; color: #ffffff !important; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; } .continue-shopping-btn:hover { background: #333333; transform: translateY(-2px); } .cart-item { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #e0e0e0; } .cart-item:last-child { border-bottom: none; } .cart-item-image { width: 100px; height: 100px; border-radius: 8px; overflow: hidden; flex-shrink: 0; } .cart-item-image img { width: 100%; height: 100%; object-fit: cover; } .cart-item-details { flex: 1; } .cart-item-name { font-size: 1.2rem; font-weight: 600; color: #000000; margin-bottom: 0.5rem; } .cart-item-price { font-size: 1.1rem; color: #000000; font-weight: 600; } .cart-item-quantity { display: flex; align-items: center; gap: 0.5rem; } .quantity-controls { display: flex; align-items: center; border: 2px solid #e0e0e0; border-radius: 8px; } .quantity-btn { padding: 0.5rem 0.75rem; border: none; background: #ECECEC; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000000; transition: all 0.3s ease; } .quantity-btn:hover { background: #9A9999; color: #ffffff; } .quantity-controls input { width: 50px; padding: 0.5rem; border: none; text-align: center; font-size: 1rem; font-weight: 600; background: #ffffff; } .remove-item-btn { background: none; border: none; color: #9A9999; cursor: pointer; font-size: 1.2rem; padding: 0.5rem; transition: color 0.3s ease; } .remove-item-btn:hover { color: #c82333; } .cart-summary { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 2rem; height: fit-content; position: sticky; top: 2rem; } .summary-card h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 600; color: #000000; margin-bottom: 1.5rem; } .summary-line { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid #e0e0e0; color: #000000; } .summary-line.total { font-weight: 700; font-size: 1.2rem; border-bottom: 2px solid #000000; margin-top: 1rem; } .checkout-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } .checkout-btn { padding: 1rem 2rem; background: #9A9999; color: #ffffff; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .checkout-btn:hover { background: #333333; transform: translateY(-2px); } .clear-cart-btn { padding: 0.75rem 1.5rem; background: #9A9999; color: #ffffff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .clear-cart-btn:hover { background: #c82333; transform: translateY(-2px); } .continue-shopping-link { text-align: center; color: #000000; text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .continue-shopping-link:hover { color: #666666; } .payment-methods { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; } .payment-methods h4 { font-size: 1rem; font-weight: 600; color: #000000; margin-bottom: 1rem; } .payment-icons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .payment-icon { width: 40px; height: 40px; background: #ECECEC; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #666666; font-size: 1.2rem; } /* Cart Responsive Design */ @media (max-width: 768px) { .cart-content { grid-template-columns: 1fr; gap: 2rem; } .cart-item { flex-direction: column; text-align: center; } .cart-item-image { width: 150px; height: 150px; } .recently-viewed-mini .recently-viewed-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.75rem; } .recently-viewed-mini .product-image { height: 80px; } .recently-viewed-mini .product-info { padding: 0.5rem; } .recently-viewed-mini .product-info h5 { font-size: 0.8rem; } .recently-viewed-mini .product-info .price { font-size: 0.75rem; } .newsletter-mini h4 { font-size: 1.1rem; } .newsletter-mini p { font-size: 0.85rem; } .newsletter-form-mini input { padding: 0.65rem; font-size: 0.85rem; } .newsletter-form-mini button { padding: 0.65rem 0.9rem; font-size: 0.85rem; } .disclaimer-mini { font-size: 0.7rem; } } .form-row { display: flex; gap: 1rem; margin-bottom: 1rem; } .form-row .form-group { flex: 1; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: #000000; font-weight: 500; } .form-group input, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid #cccccc; border-radius: 4px; font-size: 1rem; background: #ffffff; color: #000000; } .form-group input:focus, .form-group select:focus { outline: none; border-color: #333333; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1); } .form-group input[type="checkbox"] { width: auto; margin-right: 0.5rem; } .checkout-buttons { display: flex; gap: 1rem; margin-top: 2rem; } .back-to-cart-btn, .place-order-btn { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .back-to-cart-btn { background: #ECECEC; color: #000000; border: 1px solid #cccccc; } .back-to-cart-btn:hover { background: #e0e0e0; } .place-order-btn { background: #9A9999; color: #ffffff; } .place-order-btn:hover { background: #333333; } @media (max-width: 768px) { .form-row { flex-direction: column; gap: 0; } .checkout-buttons { flex-direction: column; } .checkout-btn { background: #9A9999; color: #ffffff; border: none; padding: 1rem 2rem; border-radius: 4px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-right: 1rem; margin-bottom: 1rem; } .checkout-btn:hover { background: #333333; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .checkout-btn:active { transform: translateY(0); } @media (max-width: 768px) { .checkout-btn { width: 100%; margin-right: 0; margin-bottom: 1rem; } } } /* Account Modal Styles */ .account-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; overflow-y: auto; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } .account-modal-content { background: #ffffff; border-radius: 8px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .account-close { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; color: #666666; z-index: 1001; } .account-close:hover { color: #000000; } .account-header { padding: 30px 30px 20px; border-bottom: 1px solid #eeeeee; } .account-header h2 { color: #000000; font-size: 1.8rem; font-weight: 600; margin-bottom: 5px; } .account-header p { color: #666666; font-size: 0.9rem; } .account-content { padding: 30px; } .account-section { margin-bottom: 30px; } .account-section h3 { color: #000000; font-size: 1.2rem; font-weight: 600; margin-bottom: 15px; } .account-info { display: flex; flex-direction: column; gap: 10px; } .info-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #ECECEC; } .info-item:last-child { border-bottom: none; } .info-item label { color: #666666; font-weight: 500; min-width: 100px; } .info-item span { color: #000000; font-weight: 400; } .account-actions { display: flex; flex-direction: column; gap: 10px; } .btn-secondary { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: #ECECEC; border: 1px solid #cccccc; border-radius: 4px; color: #000000; text-decoration: none; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; } .btn-secondary:hover { background: #e0e0e0; border-color: #999999; } .btn-secondary i { font-size: 0.8rem; } /* Mobile Responsive */ @media (max-width: 768px) { .account-modal-content { margin: 10px; max-width: calc(100% - 20px); max-height: calc(100vh - 20px); } .account-header { padding: 20px 20px 15px; } .account-content { padding: 20px; } .account-header h2 { font-size: 1.5rem; } .info-item { flex-direction: column; align-items: flex-start; gap: 5px; } .info-item label { min-width: auto; font-size: 0.8rem; } .account-actions { gap: 8px; } .btn-secondary { padding: 10px 15px; font-size: 0.85rem; } } /* Checkout Page Styles */ .checkout-section { padding: 8rem 0 2rem 0; background: #ECECEC; min-height: 80vh; margin-top: 6rem; } .checkout-header { text-align: center; margin-bottom: 3rem; } .checkout-header h1 { color: #000000; font-size: 2.5rem; font-weight: 700; margin-bottom: 2.5rem; } .checkout-subtitle { color: #666666; font-size: 1.1rem; } .checkout-content { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .checkout-form-container { background: #ffffff; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .checkout-summary { background: #ffffff; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); height: fit-content; position: sticky; top: 2rem; } .summary-card h3 { color: #000000; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600; } .order-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #eeeeee; } .order-item:last-child { border-bottom: none; } .order-item .item-image { width: 60px; height: 60px; border-radius: 4px; overflow: hidden; } .order-item .item-image img { width: 100%; height: 100%; object-fit: cover; } .order-item .item-details { flex: 1; } .order-item .item-details h4 { color: #000000; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; } .order-item .item-details p { color: #666666; font-size: 0.8rem; margin: 0.1rem 0; } .order-item .item-price { color: #000000; font-weight: 600; font-size: 0.9rem; } .summary-line { display: flex; justify-content: space-between; padding: 0.5rem 0; color: #666666; } .summary-line.total { font-weight: 600; font-size: 1.1rem; color: #000000; border-top: 2px solid #eeeeee; margin-top: 1rem; padding-top: 1rem; } .form-error { color: #e74c3c; font-size: 0.8rem; margin-top: 0.25rem; } .input-error { border-color: #e74c3c !important; box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1) !important; } @media (max-width: 768px) { .checkout-content { grid-template-columns: 1fr; gap: 2rem; } .checkout-form-container, .checkout-summary { padding: 1rem; } .checkout-header h1 { font-size: 2rem; } } .form-row { display: flex; gap: 1rem; margin-bottom: 1rem; } .form-row .form-group { flex: 1; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: #000000; font-weight: 500; } .form-group input, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid #cccccc; border-radius: 4px; font-size: 1rem; background: #ffffff; color: #000000; } .form-group input:focus, .form-group select:focus { outline: none; border-color: #333333; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1); } .form-group input[type="checkbox"] { width: auto; margin-right: 0.5rem; } .checkout-buttons { display: flex; gap: 1rem; margin-top: 2rem; } .back-to-cart-btn, .place-order-btn { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .back-to-cart-btn { background: #ECECEC; color: #000000; border: 1px solid #cccccc; } .back-to-cart-btn:hover { background: #e0e0e0; } .place-order-btn { background: #9A9999; color: #ffffff; } .place-order-btn:hover { background: #333333; } @media (max-width: 768px) { .form-row { flex-direction: column; gap: 0; } .checkout-buttons { flex-direction: column; } .checkout-btn { background: #9A9999; color: #ffffff; border: none; padding: 1rem 2rem; border-radius: 4px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-right: 1rem; margin-bottom: 1rem; } .checkout-btn:hover { background: #333333; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .checkout-btn:active { transform: translateY(0); } } @media (max-width: 768px) { .checkout-btn { width: 100%; margin-right: 0; margin-bottom: 1rem; } } /* Checkout Form Styles */ .checkout-form-section { background: #ffffff; border-radius: 8px; padding: 2rem; margin-top: 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .checkout-form-section h3 { color: #000000; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600; } .checkout-form { max-width: 600px; } .form-row { display: flex; gap: 1rem; margin-bottom: 1rem; } .form-row .form-group { flex: 1; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: #000000; font-weight: 500; } .form-group input, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid #cccccc; border-radius: 4px; font-size: 1rem; background: #ffffff; color: #000000; } .form-group input:focus, .form-group select:focus { outline: none; border-color: #333333; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1); } .form-group input[type="checkbox"] { width: auto; margin-right: 0.5rem; } .checkout-buttons { display: flex; gap: 1rem; margin-top: 2rem; } .back-to-cart-btn, .place-order-btn { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .back-to-cart-btn { background: #ECECEC; color: #000000; border: 1px solid #cccccc; } .back-to-cart-btn:hover { background: #e0e0e0; } .place-order-btn { background: #9A9999; color: #ffffff; } .place-order-btn:hover { background: #333333; } @media (max-width: 768px) { .form-row { flex-direction: column; gap: 0; } .checkout-buttons { flex-direction: column; } .checkout-form-section { padding: 1rem; } } /* Payment Settings Styles */ .payment-settings-container { display: grid; gap: 2rem; margin-top: 2rem; } .payment-provider-card, .payment-methods-card, .payment-stats-card { background: #ffffff; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .provider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #eeeeee; } .provider-info { display: flex; align-items: center; gap: 1rem; } .provider-logo { width: 40px; height: 40px; object-fit: contain; } .provider-info .paystack-logo-container { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; } .provider-info .paystack-logo-container svg { width: 100%; height: 100%; } .bank-logo-container { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #2c5282; border-radius: 8px; } .bank-logo-container i { font-size: 1.5rem; color: white; } .provider-info h3 { margin: 0; color: #000000; font-size: 1.2rem; } .provider-info p { margin: 0; color: #666666; font-size: 0.9rem; } .provider-settings { margin-top: 1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: #000000; font-weight: 500; } .form-group input, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid #cccccc; border-radius: 4px; font-size: 1rem; background: #ffffff; color: #000000; } .form-group input:focus, .form-group select:focus { outline: none; border-color: #333333; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1); } .form-help { display: block; margin-top: 0.25rem; color: #666666; font-size: 0.8rem; } .form-group input[type="checkbox"] { width: auto; margin-right: 0.5rem; } .form-actions { display: flex; gap: 1rem; margin-top: 2rem; } .payment-methods-list { display: flex; flex-direction: column; gap: 1rem; } .payment-method-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid #eeeeee; border-radius: 6px; transition: all 0.3s ease; } .payment-method-item:hover { border-color: #cccccc; background: #ECECEC; } .method-info { display: flex; align-items: center; gap: 0.75rem; } .method-info i { font-size: 1.2rem; color: #333333; } .method-info span { font-weight: 500; color: #000000; } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cccccc; transition: 0.3s; border-radius: 24px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } input:checked+.toggle-slider { background-color: #9A9999; } input:checked+.toggle-slider:before { transform: translateX(26px); } .payment-stats-card .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .stat-item { text-align: center; padding: 1.5rem; background: #f8f9fa; border-radius: 6px; } .stat-item .stat-value { font-size: 2rem; font-weight: 700; color: #000000; margin-bottom: 0.5rem; } .stat-item .stat-label { color: #666666; font-size: 0.9rem; } @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } .form-actions { flex-direction: column; } .payment-stats-card .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* Admin Toast Notifications */ .admin-toast { position: fixed; top: 20px; right: 20px; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); padding: 1rem 1.5rem; z-index: 10000; transform: translateX(400px); transition: transform 0.3s ease; max-width: 400px; border-left: 4px solid #cccccc; } .admin-toast.show { transform: translateX(0); } .admin-toast-success { border-left-color: #28a745; } .admin-toast-error { border-left-color: #9A9999; } .admin-toast-info { border-left-color: #17a2b8; } .toast-content { display: flex; align-items: center; gap: 0.75rem; } .toast-content i { font-size: 1.2rem; } .admin-toast-success .toast-content i { color: #28a745; } .admin-toast-error .toast-content i { color: #9A9999; } .admin-toast-info .toast-content i { color: #17a2b8; } .toast-content span { color: #000000; font-weight: 500; } /* Checkout Payment Methods Styles */ .payment-methods-section { margin: 2rem 0; } .payment-methods-section h4 { color: #000000; font-size: 1.2rem; font-weight: 600; margin-bottom: 1.5rem; } .payment-methods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .payment-method-card { border: 2px solid #eeeeee; border-radius: 8px; padding: 1.5rem; cursor: pointer; transition: all 0.3s ease; background: #ffffff; opacity: 1; } .payment-method-card:hover { border-color: #cccccc; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .payment-method-card.selected { border-color: #000000; background: #f8f9fa; } .payment-method-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .payment-provider-logo { width: 40px; height: 40px; object-fit: contain; } .paystack-logo-container { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .paystack-logo-container svg { width: 100%; height: 100%; } .payment-method-icon { font-size: 2rem; color: #333333; width: 40px; text-align: center; } .payment-method-info { flex: 1; } .payment-method-info h5 { margin: 0; color: #000000; font-size: 1.1rem; font-weight: 600; } .payment-method-info p { margin: 0.25rem 0 0 0; color: #666666; font-size: 0.9rem; } .payment-method-radio { position: relative; } .payment-method-radio input[type="radio"] { opacity: 0; position: absolute; } .radio-custom { width: 20px; height: 20px; border: 2px solid #cccccc; border-radius: 50%; display: inline-block; position: relative; transition: all 0.3s ease; } .payment-method-radio input[type="radio"]:checked+.radio-custom { border-color: #000000; background: #9A9999; } .payment-method-radio input[type="radio"]:checked+.radio-custom::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: #ffffff; border-radius: 50%; } .payment-method-details { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eeeeee; } .supported-methods, .mobile-money-providers { display: flex; flex-wrap: wrap; gap: 0.5rem; } .method-tag, .provider-tag { background: #ECECEC; color: #333333; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 500; } .card-icons { display: flex; gap: 0.75rem; align-items: center; } .card-icons i { font-size: 1.5rem; color: #333333; } .bank-info { color: #666666; font-style: italic; } .payment-details-section { margin: 2rem 0; padding: 1.5rem; background: #f8f9fa; border-radius: 8px; border: 1px solid #eeeeee; display: none; } .payment-details-section h4 { color: #000000; font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; } .payment-form { background: #ffffff; padding: 1.5rem; border-radius: 6px; border: 1px solid #dddddd; } @media (max-width: 768px) { .payment-methods-grid { grid-template-columns: 1fr; } .payment-method-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .payment-method-radio { align-self: flex-end; } } /* Payment Details Styles */ .paystack-payment-info { padding: 1rem; } .payment-info-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .payment-logo { width: 50px; height: 50px; object-fit: contain; } .payment-info-header h5 { margin: 0; color: #000000; font-size: 1.2rem; font-weight: 600; } .payment-info-header p { margin: 0.25rem 0 0 0; color: #666666; font-size: 0.9rem; } .payment-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .feature-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: #f8f9fa; border-radius: 6px; } .feature-item i { color: #28a745; font-size: 1.1rem; } .feature-item span { color: #333333; font-size: 0.9rem; font-weight: 500; } .payment-note { background: #e3f2fd; border: 1px solid #bbdefb; border-radius: 6px; padding: 1rem; } .payment-note p { margin: 0; color: #1976d2; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; } .payment-note i { font-size: 1rem; } .card-payment-form { padding: 1rem; } .card-payment-form .form-group { margin-bottom: 1rem; } .card-payment-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .card-payment-form input { width: 100%; padding: 0.75rem; border: 1px solid #dddddd; border-radius: 4px; font-size: 1rem; } .card-payment-form input:focus { outline: none; border-color: #000000; } .card-payment-form .card-icons { display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eeeeee; } .card-payment-form .card-icons i { font-size: 2rem; color: #333333; } /* Bank Transfer Modal Styles */ .bank-transfer-modal .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid #eeeeee; } .bank-transfer-modal .modal-header h3 { margin: 0; color: #000000; font-size: 1.3rem; font-weight: 600; } .bank-transfer-modal .modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #666666; } .bank-transfer-modal .modal-body { padding: 1.5rem; } .bank-transfer-modal .modal-footer { display: flex; gap: 1rem; justify-content: flex-end; padding: 1.5rem; border-top: 1px solid #eeeeee; } .bank-transfer-details h4 { color: #000000; font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; } .bank-info { background: #f8f9fa; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; } .bank-info p { margin: 0.5rem 0; color: #333333; } .transfer-note { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; padding: 1rem; } .transfer-note p { margin: 0; color: #856404; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; } .transfer-note i { font-size: 1rem; } .bank-address, .transfer-instructions { background: #f8f9fa; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; border-left: 4px solid #2c5282; } .bank-address h5, .transfer-instructions h5 { margin: 0 0 0.5rem 0; color: #2c5282; font-size: 1rem; font-weight: 600; } .bank-address p, .transfer-instructions p { margin: 0; color: #333333; line-height: 1.5; } /* Save delivery details section */ .save-delivery-section { margin: 20px 0; padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } .save-delivery-section .form-group { margin-bottom: 15px; } .save-delivery-section label { display: flex; align-items: center; font-weight: 500; color: #333; cursor: pointer; } .save-delivery-section input[type="checkbox"] { margin-right: 10px; transform: scale(1.2); } .saved-addresses-section { margin-top: 20px; padding: 15px; background: white; border-radius: 8px; border: 1px solid #dee2e6; } .saved-addresses-section h4 { margin: 0 0 15px 0; color: #333; font-size: 18px; } .saved-addresses-list { margin-bottom: 15px; } .saved-address-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; margin-bottom: 10px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } .address-info { flex: 1; line-height: 1.5; } .address-info strong { color: #333; font-size: 16px; } .address-actions { display: flex; gap: 10px; } .address-actions .btn { padding: 6px 12px; font-size: 12px; } .no-addresses { text-align: center; color: #666; font-style: italic; padding: 20px; } /* Modal styles for address management */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background: white; border-radius: 8px; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #e9ecef; } .modal-header h3 { margin: 0; color: #333; } .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .modal-close:hover { color: #333; } .modal-body { padding: 20px; } .modal-footer { padding: 20px; border-top: 1px solid #e9ecef; text-align: right; } .modal-address-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px; margin-bottom: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } .address-details h4 { margin: 0 0 10px 0; color: #333; font-size: 16px; } .address-details p { margin: 5px 0; color: #666; font-size: 14px; } .address-details p strong { color: #333; } .modal-address-item .address-actions { display: flex; flex-direction: column; gap: 8px; min-width: 120px; } .modal-address-item .address-actions .btn { padding: 8px 12px; font-size: 12px; white-space: nowrap; } /* Responsive design for saved addresses */ @media (max-width: 768px) { .saved-address-item { flex-direction: column; align-items: stretch; } .address-actions { margin-top: 10px; justify-content: center; } .modal-address-item { flex-direction: column; align-items: stretch; } .modal-address-item .address-actions { margin-top: 15px; flex-direction: row; justify-content: center; min-width: auto; } } /* Admin delivery addresses section */ .content-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .content-section .section-header h2 { margin: 0; color: #333; } .delivery-addresses-container { margin-top: 20px; } .addresses-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; } .delivery-address-card { background: white; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; } .delivery-address-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .address-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #e9ecef; } .address-header h4 { margin: 0; color: #333; font-size: 18px; } .address-details p { margin: 8px 0; color: #666; line-height: 1.4; } .address-details p strong { color: #333; font-weight: 600; } .empty-state { text-align: center; padding: 60px 20px; color: #666; } .empty-state i { font-size: 48px; color: #ccc; margin-bottom: 20px; } .empty-state h3 { margin: 0 0 10px 0; color: #333; } .empty-state p { margin: 0 0 20px 0; color: #666; } /* Admin badge for checkout */ .admin-badge { background: #007bff; color: white; font-size: 10px; padding: 2px 6px; border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Form row styling for modal */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; } @media (max-width: 768px) { .addresses-list { grid-template-columns: 1fr; } .section-header { flex-direction: column; align-items: stretch; gap: 15px; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 768px) { .payment-features { grid-template-columns: 1fr; } .card-payment-form .form-row { grid-template-columns: 1fr; } .bank-transfer-modal .modal-footer { flex-direction: column; } } /* Pending Orders Styles */ .pending-orders-stats { display: flex; gap: 1rem; align-items: center; } .stat-item { display: flex; align-items: center; gap: 0.5rem; background: #fff3cd; padding: 0.5rem 1rem; border-radius: 20px; color: #856404; font-weight: 600; } .stat-item i { color: #ffc107; } .pending-orders-container { background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .pending-orders-list { display: grid; gap: 2rem; } .pending-order-card { background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 12px; padding: 2rem; transition: all 0.3s ease; } .pending-order-card:hover { border-color: #ffc107; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15); } .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #dee2e6; } .order-info h4 { margin: 0; color: #2c3e50; font-size: 1.3rem; } .order-date { color: #6c757d; font-size: 0.9rem; } .status-badge { padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; } .status-badge.pending { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; } .order-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .customer-info, .order-items, .bank-details { background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #e9ecef; } .customer-info h5, .order-items h5, .bank-details h5 { margin: 0 0 1rem 0; color: #2c3e50; font-size: 1.1rem; border-bottom: 1px solid #e9ecef; padding-bottom: 0.5rem; } .customer-info p, .bank-details p { margin: 0.5rem 0; color: #495057; } .items-list { margin-bottom: 1rem; } .order-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #f8f9fa; } .order-item:last-child { border-bottom: none; } .item-name { font-weight: 600; color: #2c3e50; } .item-quantity { color: #6c757d; font-size: 0.9rem; } .item-price { color: #28a745; font-weight: 600; } .order-total { text-align: right; padding-top: 1rem; border-top: 2px solid #e9ecef; font-size: 1.1rem; color: #2c3e50; } .order-actions { display: flex; gap: 1rem; justify-content: flex-end; } .order-actions .btn { padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; transition: all 0.3s ease; } .btn-success { background: #28a745; border: 1px solid #28a745; color: white; } .btn-success:hover { background: #218838; border-color: #1e7e34; } .btn-danger { background: #9A9999; border: 1px solid #9A9999; color: white; } .btn-danger:hover { background: #c82333; border-color: #bd2130; } .btn-info { background: #17a2b8; border: 1px solid #17a2b8; color: white; } .btn-info:hover { background: #138496; border-color: #117a8b; } /* Order Details Modal */ .order-details-modal { max-width: 800px; max-height: 90vh; overflow-y: auto; } .order-details-content { display: grid; gap: 2rem; } .detail-section { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; border: 1px solid #e9ecef; } .detail-section h4 { margin: 0 0 1rem 0; color: #2c3e50; font-size: 1.2rem; border-bottom: 1px solid #dee2e6; padding-bottom: 0.5rem; } .item-detail { background: white; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid #e9ecef; } .item-detail:last-child { margin-bottom: 0; } /* Bank Transfer Success Modal */ .bank-transfer-success { max-width: 600px; } .success-header { text-align: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #e9ecef; } .success-header i { font-size: 3rem; color: #28a745; margin-bottom: 1rem; } .success-header h3 { color: #2c3e50; margin-bottom: 0.5rem; } .success-header p { color: #6c757d; margin: 0; } .bank-transfer-details, .order-summary { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; border: 1px solid #e9ecef; } .bank-transfer-details h4, .order-summary h4 { margin: 0 0 1rem 0; color: #2c3e50; font-size: 1.2rem; } .bank-info p { margin: 0.5rem 0; color: #495057; } .bank-address, .transfer-instructions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dee2e6; } .bank-address h5, .transfer-instructions h5 { margin: 0 0 0.5rem 0; color: #2c3e50; font-size: 1rem; } .transfer-note { background: #d1ecf1; border: 1px solid #bee5eb; border-radius: 6px; padding: 1rem; margin-top: 1rem; } .transfer-note p { margin: 0; color: #0c5460; } .transfer-note i { color: #17a2b8; margin-right: 0.5rem; } /* Responsive adjustments for pending orders */ @media (max-width: 768px) { .order-details { grid-template-columns: 1fr; } .order-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .order-actions { flex-direction: column; width: 100%; } .order-actions .btn { width: 100%; } } /* Mobile currency pills hidden on desktop */ @media (min-width: 769px) { .mob-cv-pills { display: none; } } /* Currency Selector Styles */ .currency-selector { position: relative; display: inline-block; } .currency-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; color: #495057; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .currency-btn:hover { background: #e9ecef; border-color: #007bff; color: #007bff; } .currency-btn i { font-size: 0.8rem; } .currency-code { font-weight: 600; } .currency-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #e9ecef; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; min-width: 200px; } .currency-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } .currency-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; transition: background-color 0.2s ease; border-bottom: 1px solid #f8f9fa; } .currency-option:last-child { border-bottom: none; } .currency-option:hover { background: #f8f9fa; } .currency-option.active { background: #e3f2fd; color: #1976d2; } .currency-flag { font-size: 1.2rem; width: 20px; text-align: center; } .currency-name { flex: 1; font-size: 0.9rem; color: #495057; } .currency-option.active .currency-name { color: #1976d2; } .currency-option .currency-code { font-size: 0.8rem; font-weight: 600; color: #6c757d; } .currency-option.active .currency-code { color: #1976d2; } /* Nav actions spacing */ .nav-actions { display: flex; align-items: center; gap: 1rem; } /* Mobile responsive */ @media (max-width: 768px) { .currency-btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; } .currency-dropdown { min-width: 180px; } .currency-option { padding: 0.6rem 0.8rem; } .nav-actions { gap: 0.5rem; } } /* Currency Toast Notification */ .currency-toast { position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10000; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; transform: translateX(100%); transition: transform 0.3s ease; } .currency-toast-content { display: flex; align-items: center; gap: 8px; } .currency-toast i { font-size: 16px; } .currency-toast.show { transform: translateX(0); } /* Mobile responsive for toast */ @media (max-width: 768px) { .currency-toast { top: 10px; right: 10px; left: 10px; transform: translateY(-100%); transition: transform 0.3s ease; } .currency-toast.show { transform: translateY(0); } } /* Currency Settings Styles */ .currency-settings-container { display: flex; flex-direction: column; gap: 2rem; } .currency-rates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .currency-rate-item { background: #fff; border: 1px solid #e1e5e9; border-radius: 12px; padding: 1.5rem; transition: all 0.3s ease; } .currency-rate-item:hover { border-color: #007bff; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1); } .currency-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .currency-flag { font-size: 1.5rem; } .currency-name { font-weight: 600; color: #2c3e50; flex: 1; } .currency-symbol { font-size: 1.25rem; font-weight: 700; color: #007bff; } .rate-controls { display: flex; flex-direction: column; gap: 0.5rem; } .rate-controls label { font-size: 0.875rem; font-weight: 500; color: #6c757d; } .rate-input { padding: 0.75rem; border: 1px solid #ced4da; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; } .rate-input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } .rate-input[readonly] { background-color: #f8f9fa; color: #6c757d; } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; margin-top: 0.5rem; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch label { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 24px; } .toggle-switch label:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; } .toggle-switch input:checked+label { background-color: #28a745; } .toggle-switch input:checked+label:before { transform: translateX(26px); } .settings-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .currency-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .stat-card { background: #fff; border: 1px solid #e1e5e9; border-radius: 12px; padding: 1.5rem; display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; } .stat-card:hover { border-color: #007bff; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1); } .stat-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #007bff, #0056b3); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.25rem; } .stat-content h4 { margin: 0 0 0.25rem 0; font-size: 0.875rem; font-weight: 600; color: #6c757d; } .stat-value { font-size: 1.5rem; font-weight: 700; color: #2c3e50; } /* Mobile responsive */ @media (max-width: 768px) { .currency-rates-grid { grid-template-columns: 1fr; } .currency-stats-grid { grid-template-columns: 1fr; } .settings-actions { flex-direction: column; } .currency-info { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } /* Announcement Status Card Styles */ .announcement-actions { display: flex; gap: 1rem; align-items: center; } .announcement-status-card { background: #fff; border: 1px solid #e1e5e9; border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .status-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: #2c3e50; display: flex; align-items: center; gap: 0.5rem; } .status-indicator { display: flex; align-items: center; gap: 0.5rem; } .status-dot { width: 12px; height: 12px; border-radius: 50%; animation: pulse 2s infinite; } .status-dot.online { background-color: #28a745; } .status-dot.offline { background-color: #9A9999; } .status-dot.fetching { background-color: #ffc107; } .status-text { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .status-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .status-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #f8f9fa; } .status-item:last-child { border-bottom: none; } .status-item .label { font-size: 0.875rem; color: #6c757d; font-weight: 500; } .status-item .value { font-size: 0.875rem; color: #2c3e50; font-weight: 600; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } } /* Source badge styles */ .source-badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .source-badge.live { background-color: #d4edda; color: #155724; } .source-badge.local { background-color: #d1ecf1; color: #0c5460; } /* API Configuration Section */ .api-config-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e1e5e9; } .api-config-section h4 { margin: 0 0 1rem 0; font-size: 1rem; font-weight: 600; color: #2c3e50; display: flex; align-items: center; gap: 0.5rem; } .config-item { margin-bottom: 1rem; } .config-item label { display: block; font-size: 0.875rem; font-weight: 500; color: #6c757d; margin-bottom: 0.5rem; } .config-item input { width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 6px; font-size: 0.875rem; transition: border-color 0.3s ease; } .config-item input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; } /* Mobile responsive for announcements */ @media (max-width: 768px) { .announcement-actions { flex-direction: column; align-items: stretch; } .status-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .status-details { grid-template-columns: 1fr; } } /* Blog Section Mobile Flickity Styling */ @media (max-width: 768px) { .blog-section .slideshow-wrapper { padding: 0; } .blog-section .flickity-prev-next-button { display: none !important; } .blog-post-slide { width: 85% !important; /* Let Flickity know each slide is 85% wide */ min-width: unset !important; padding: 0 10px !important; /* Remove our native scroll stuff so we don't break JS */ } .blog-post-slide--flex { flex-direction: column !important; gap: 0 !important; height: auto !important; /* let it determine its own height */ } .blog-post-slide--image { width: 100% !important; flex: none !important; } /* Ensure image wrap is visible on mobile */ .blog-post-slide--image .image-wrap { height: auto !important; padding-bottom: 100% !important; /* enforce square ratio safely */ } .blog-post-slide--caption { padding: 20px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; } .blog-post-slide--meta { display: flex !important; flex-direction: column !important; flex: 1 !important; } .blog-post-slide--title { font-size: 1.15rem !important; margin-bottom: 10px !important; line-height: 1.3 !important; } .blog-post-slide .btn { margin-top: 15px !important; align-self: flex-start !important; } .blog-section h2 { font-size: 2rem !important; margin-bottom: 30px !important; } } /* Testimonials Mobile Premium Styling */ @media (max-width: 768px) { /* Hide arrows on mobile because swipe is intuitive and they block text */ .customer-testimonials .flickity-prev-next-button { display: none !important; } .testimonials-slide--custom { width: 100% !important; /* One testimonial per view */ padding: 0 15px !important; } .testimonial-slide--flex { flex-direction: column !important; gap: 0 !important; border-radius: 16px !important; } .testimonial-image { width: 100% !important; flex: none !important; } .testimonial-image .image-wrap { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .testimonials-slider__text { padding: 30px 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .customer-testimonials .section-header h2 { font-size: 2rem !important; margin-bottom: 10px !important; } .customer-testimonials .testimonials-mars--section-caption p { font-size: 1.1rem !important; padding: 0 15px !important; margin-bottom: 20px !important; } .testimonials-slider__text h5 { font-size: 1.25rem !important; margin-bottom: 15px !important; line-height: 1.4 !important; } .testimonials-slider__text p { font-size: 1rem !important; line-height: 1.6 !important; } .testimonial-stars { font-size: 1.2rem !important; margin: 15px 0 10px !important; } .testimonials-slider__text .quote-icon { margin-bottom: 15px !important; } } /* Help Section Mobile Carousel Styling */ @media (max-width: 768px) { .help-section .grid { flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 25px !important; margin: 0 -15px !important; padding-left: 15px !important; padding-right: 15px !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .help-section .grid::-webkit-scrollbar { display: none !important; } .help-section .grid__item { flex: 0 0 75% !important; max-width: 75% !important; min-width: unset !important; width: 75% !important; scroll-snap-align: center !important; padding: 0 10px !important; display: flex !important; flex-direction: column !important; } .help-section .grid__item > div:first-child { margin-bottom: 15px !important; } .help-section .column-title { font-size: 1.5rem !important; margin-bottom: 15px !important; } .help-section .column-caption { flex: 1 !important; } .help-section .column-caption p { /* Mobile responsive for announcements */ @media (max-width: 768px) { .announcement-actions { flex-direction: column; align-items: stretch; } .status-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .status-details { grid-template-columns: 1fr; } } /* Blog Section Mobile Flickity Styling */ @media (max-width: 768px) { .blog-section .slideshow-wrapper { padding: 0; } .blog-section .flickity-prev-next-button { display: none !important; } .blog-post-slide { width: 85% !important; /* Let Flickity know each slide is 85% wide */ min-width: unset !important; padding: 0 10px !important; /* Remove our native scroll stuff so we don't break JS */ } .blog-post-slide--flex { flex-direction: column !important; gap: 0 !important; height: auto !important; /* let it determine its own height */ } .blog-post-slide--image { width: 100% !important; flex: none !important; } /* Ensure image wrap is visible on mobile */ .blog-post-slide--image .image-wrap { height: auto !important; padding-bottom: 100% !important; /* enforce square ratio safely */ } .blog-post-slide--caption { padding: 20px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; } .blog-post-slide--meta { display: flex !important; flex-direction: column !important; flex: 1 !important; } .blog-post-slide--title { font-size: 1.15rem !important; margin-bottom: 10px !important; line-height: 1.3 !important; } .blog-post-slide .btn { margin-top: 15px !important; align-self: flex-start !important; } .blog-section h2 { font-size: 2rem !important; margin-bottom: 30px !important; } } /* Testimonials Mobile Premium Styling */ @media (max-width: 768px) { /* Hide arrows on mobile because swipe is intuitive and they block text */ .customer-testimonials .flickity-prev-next-button { display: none !important; } .testimonials-slide--custom { width: 100% !important; /* One testimonial per view */ padding: 0 15px !important; } .testimonial-slide--flex { flex-direction: column !important; gap: 0 !important; border-radius: 16px !important; } .testimonial-image { width: 100% !important; flex: none !important; } .testimonial-image .image-wrap { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .testimonials-slider__text { padding: 30px 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .customer-testimonials .section-header h2 { font-size: 2rem !important; margin-bottom: 10px !important; } .customer-testimonials .testimonials-mars--section-caption p { font-size: 1.1rem !important; padding: 0 15px !important; margin-bottom: 20px !important; } .testimonials-slider__text h5 { font-size: 1.25rem !important; margin-bottom: 15px !important; line-height: 1.4 !important; } .testimonials-slider__text p { font-size: 1rem !important; line-height: 1.6 !important; } .testimonial-stars { font-size: 1.2rem !important; margin: 15px 0 10px !important; } .testimonials-slider__text .quote-icon { margin-bottom: 15px !important; } } /* Help Section Mobile Carousel Styling */ @media (max-width: 768px) { .help-section .grid { flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 25px !important; margin: 0 -15px !important; padding-left: 15px !important; padding-right: 15px !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .help-section .grid::-webkit-scrollbar { display: none !important; } .help-section .grid__item { flex: 0 0 75% !important; max-width: 75% !important; min-width: unset !important; width: 75% !important; scroll-snap-align: center !important; padding: 0 10px !important; display: flex !important; flex-direction: column !important; } .help-section .grid__item > div:first-child { margin-bottom: 15px !important; } .help-section .column-title { font-size: 1.5rem !important; margin-bottom: 15px !important; } .help-section .column-caption { flex: 1 !important; } .help-section .column-caption p { font-size: 1.1rem !important; line-height: 1.5 !important; } .help-section .btn { margin-top: auto !important; width: 100% !important; } } /* Premium Mobile Styling Overrides */ @media (max-width: 768px) { .container, .page-width { padding-left: 20px !important; padding-right: 20px !important; margin-left: auto !important; margin-right: auto !important; } /* Ensure mobile nav active menu is positioned above other content layers */ .nav-menu { z-index: 1050 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; border-radius: 0 0 16px 16px !important; border-top: 1px solid rgba(0, 0, 0, 0.05) !important; } /* Modal padding and layouts on small devices */ .modal-content, .account-modal-content, .edit-profile-modal-content { padding: 24px !important; border-radius: 16px !important; } .signin-container { padding: 24px 20px !important; } } @media (max-width: 480px) { .container, .page-width { padding-left: 16px !important; padding-right: 16px !important; } .signin-container { padding: 24px 16px !important; } } /* ── Fire icon blaze animation ────────────────────────── */ @keyframes fire-blaze { 0% { transform: scaleY(1) rotate(-5deg); filter: drop-shadow(0 0 2px rgba(255,100,0,.45)); } 18% { transform: scaleY(1.22) rotate( 4deg); filter: drop-shadow(0 0 6px rgba(255,170,0,.95)); } 34% { transform: scaleY(0.87) rotate(-3deg); filter: drop-shadow(0 0 3px rgba(255,220,0,.60)); } 52% { transform: scaleY(1.17) rotate( 6deg); filter: drop-shadow(0 0 8px rgba(255,60, 0,1.00)); } 70% { transform: scaleY(0.91) rotate(-4deg); filter: drop-shadow(0 0 4px rgba(255,130,0,.75)); } 88% { transform: scaleY(1.09) rotate( 2deg); filter: drop-shadow(0 0 5px rgba(255,90, 0,.80)); } 100% { transform: scaleY(1) rotate(-5deg); filter: drop-shadow(0 0 2px rgba(255,100,0,.45)); } } .fa-fire { display: inline-block; transform-origin: 50% 90%; animation: fire-blaze 1.15s ease-in-out infinite; will-change: transform, filter; }