/* ===== Utility: Button Link ===== */ /* Add class="btn-orange" to any tag in the CMS to style it as a button */ a.btn-orange, p.btn-orange a, a.btn-orange:visited, p.btn-orange a:visited { display: inline-block; background: var(--primary-color); color: #ffffff; padding: 12px 28px; border-radius: 6px; font-family: var(--font-primary); font-size: 15px; font-weight: 600; text-decoration: none; letter-spacing: 0.3px; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 2px 8px rgba(255, 107, 53, 0.35); } a.btn-orange:hover, p.btn-orange a:hover, a.btn-orange:focus, p.btn-orange a:focus { background: var(--primary-dark); color: #ffffff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255, 107, 53, 0.45); } a.btn-orange:active, p.btn-orange a:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3); } /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #ff6b35; --primary-dark: #e55a2b; --secondary-color: #2d3142; --text-dark: #1a1a1a; --text-light: #666; --bg-light: #f8f9fa; --bg-white: #ffffff; --border-color: #e0e0e0; --success-color: #22c55e; --warning-color: #f59e0b; --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body { font-family: var(--font-primary); color: var(--text-dark); line-height: 1.6; /* * overflow-x: hidden moved to #page below. * Setting overflow on in iOS Safari causes touch events to not * propagate correctly through React's synthetic event system, which makes * the block-based checkout form slow/unresponsive on iPhone. */ } /* Clip horizontal page overflow here instead of on body (iOS Safari fix) */ #page { overflow-x: hidden; } .container { max-width: 1320px; margin: 0 auto; padding: 0 20px; } /* Top Banner */ .top-banner { background: var(--primary-color); color: white; padding: 12px 0; position: relative; } .banner-slider { display: flex; justify-content: center; align-items: center; } .banner-item { display: none; text-align: center; font-size: 14px; font-weight: 500; letter-spacing: 0.5px; padding: 0 20px; animation: fadeIn 0.5s ease; } .banner-item.active { display: block; } .banner-item a { color: white; text-decoration: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Header & Navigation */ .header { position: sticky; top: 0; z-index: 1000; background: var(--secondary-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease-in-out; } .header.header-hidden { transform: translateY(-100%); } .navbar { background: var(--bg-white); /* background: linear-gradient(135deg, var(--secondary-color) 0%, var(--text-dark) 100%); */ padding: 15px 0; position: relative; } .nav-container { display: flex; justify-content: space-between; align-items: center; gap: 24px; max-height: 70px; } .logo { flex: 1; } .logo img { height: 150px; margin: 70px 0 0 0; width: auto; } .nav-menu { display: flex; list-style: none; gap: 35px; justify-content: center; } /* Hide mobile menu elements on desktop */ .mobile-menu-header { display: none; } .mobile-menu-scroll { display: contents; /* On desktop, act as if wrapper doesn't exist */ } .nav-link { text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 15px; transition: color 0.3s; display: flex; align-items: center; gap: 5px; } .nav-link:hover, .nav-link.active { color: var(--primary-color); } .arrow { font-size: 10px; transition: transform 0.3s; } .dropdown { position: relative; } .dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 20px; background: transparent; display: none; } .dropdown-menu { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); background: white; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); display: none; opacity: 0; transition: opacity 0.3s ease; z-index: 1000; } /* Mega Menu Styles */ .mega-menu { width: calc(100vw - 40px); /* Full width minus container padding */ max-width: 1320px; /* Match .container max-width */ padding: 0; box-sizing: border-box; /* Scroll when taller than the available viewport space below the nav. --mega-menu-top is set by JS; fall back to 80px (approx nav row height). */ max-height: calc(100vh - var(--mega-menu-top, 80px) - 16px); overflow-y: auto; overflow-x: hidden; /* Hide scrollbar visually across all browsers */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / Edge legacy */ background: white; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* Absolute so it anchors to the sticky #masthead and overlays page content */ position: absolute; left: 50% !important; transform: translateX(-50%) !important; z-index: 1001; margin-top: 0; } /* Hide WebKit scrollbar track/thumb */ .mega-menu::-webkit-scrollbar { display: none; } /* Mega Menu Header */ .mega-menu-header { background: white; padding: 20px 20px 10px; } .shop-all-cta { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #FF7A00 0%, #FF9500 100%); color: white; text-align: center; padding: 16px 24px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3); transition: all 0.3s ease; } .shop-all-cta:hover { background: linear-gradient(135deg, #FF8500 0%, #FFA500 100%); box-shadow: 0 6px 16px rgba(255, 122, 0, 0.4); transform: translateY(-2px); } .shop-all-cta svg { flex-shrink: 0; } /* Mega Menu Content */ .mega-menu-content { display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding: 20px; background: white; border-radius: 0; overflow: visible; } /* Left column stacks categories + clinical vertically */ .mega-menu-left-col { display: flex; flex-direction: column; gap: 20px; } /* Mega Menu Sections */ .mega-menu-section { padding: 25px; background: white; border: 1px solid var(--border-color); border-radius: 8px; box-sizing: border-box; } .mega-menu-section h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--text-dark); margin-bottom: 8px; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--primary-color); } .mega-menu-section .section-subtitle { font-size: 12px; font-weight: 600; color: var(--primary-color); margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.5px; } .mega-menu-section h4 svg { color: var(--primary-color); flex-shrink: 0; } /* Menu Links */ .menu-links { display: flex; flex-direction: column; gap: 4px; } .menu-links a { display: block; padding: 6px 12px; color: var(--text-dark); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s ease; border-radius: 4px; position: relative; padding-left: 12px; } .menu-links a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 2px; background: var(--primary-color); transition: width 0.3s ease; } .menu-links a:hover { background: white; color: var(--primary-color); padding-left: 20px; } .menu-links a:hover::before { width: 12px; } /* Brand Grid */ .brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 20px; } .brand-grid a { display: block; padding: 8px 12px; color: var(--text-light); text-decoration: none; font-size: 13px; transition: all 0.2s ease; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; padding-left: 12px; } .brand-grid a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 2px; background: var(--primary-color); transition: width 0.3s ease; } .brand-grid a:hover { color: var(--primary-color); background: var(--bg-light); padding-left: 20px; } .brand-grid a:hover::before { width: 12px; } /* Show More Button - Hidden as all brands are visible */ .show-more-btn { display: none; } .nav-icons { display: flex; gap: 15px; align-items: center; flex: 1; justify-content: flex-end; } .icon-btn { background: transparent; border: none; cursor: pointer; padding: 8px; color: var(--text-dark); transition: all 0.3s; position: relative; } .icon-btn:hover { color: var(--primary-color); transform: scale(1.1); } .cart-count { position: absolute; top: 0; right: 0; background: var(--primary-color); color: white; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 10px; min-width: 18px; text-align: center; } .mobile-menu-btn { display: none; flex-direction: column; gap: 4px; background: transparent; border: none; cursor: pointer; padding: 5px; } .mobile-menu-btn span { width: 25px; height: 3px; background: var(--text-dark); border-radius: 3px; transition: all 0.3s; } /* Prominent Header Search */ .header-search { padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .header-search .search-form { position: relative; display: flex; align-items: center; max-width: 800px; margin: 0 auto; } .header-search .search-icon { position: absolute; left: 20px; color: #999; pointer-events: none; z-index: 1; } .header-search .search-input { width: 100%; padding: 14px 58px 14px 52px; font-size: 15px; border: none; background: #f8f9fa; border-radius: 50px; outline: none; transition: all 0.3s ease; font-family: var(--font-primary); color: var(--text-dark); } .header-search .search-input::placeholder { color: #999; transition: color 0.3s ease; } .header-search .search-input:focus { background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .header-search .search-input:focus::placeholder { color: #bbb; } .header-search .search-input:focus~.search-icon { color: var(--primary-color); } .header-search .search-submit-btn { position: absolute; right: 4px; background: #dddddd; border: none; color: white; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .header-search .search-submit-btn:hover { background: #5a6268; transform: scale(1.05); } .header-search .search-submit-btn svg { width: 18px; height: 18px; } .entry-content p { margin-bottom: 1.5em; } .entry-content ul, .entry-content ol, .entry-content .wp-block-list { margin: 0 0 1.5em 0; padding-left: 1.75em; } .entry-content ul, .entry-content .wp-block-list:not(ol) { list-style: disc; } .entry-content ol { list-style: decimal; } .entry-content li { margin-bottom: 0.5em; padding-left: 0.25em; } .entry-content ul ul, .entry-content ol ol, .entry-content ul ol, .entry-content ol ul { margin-top: 0.5em; margin-bottom: 0; } .has-text-align-center { text-align: center; } .has-text-align-left { text-align: left; } .has-text-align-right { text-align: right; } .entry-content h2, .entry-content h3 { margin: 1.5em 0 0.75em; font-weight: 700; color: var(--text-dark); } .entry-title{ font-size: 32px; font-weight: 900; margin-top: 20px; } /* Remove old search overlay styles */ /* Hero Section - Redesigned with Wow Factor */ .hero { position: relative; height: 75vh; min-height: 550px; max-height: 800px; overflow: hidden; } .hero-slider { height: 100%; position: relative; } .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center 40%; background-repeat: no-repeat; opacity: 0; visibility: hidden; display: flex; align-items: center; transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s; } /* Background layer for Ken Burns effect */ @keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.08); } } .hero-bg-layer { position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; transform: scale(1); } .hero-slide.active .hero-bg-layer { animation: kenBurns 8s ease-out forwards; } /* Improved overlay for better text readability */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.3) 100%); z-index: 1; } /* Gradient overlay variant - stronger on left for left-aligned text */ .hero-overlay-gradient { background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 70%, transparent 100%); } .hero-slide.active { opacity: 1; visibility: visible; z-index: 2; } /* Hero Content with positioning variants */ .hero-content { position: relative; z-index: 3; color: white; max-width: 700px; padding: 0 40px; } /* Text positioning based on data attribute */ [data-text-position="center"] .hero-content { text-align: center; margin: 0 auto; } [data-text-position="left"] .hero-content { text-align: left; margin-left: 0; margin-right: auto; } [data-text-position="right"] .hero-content { text-align: right; margin-left: auto; margin-right: 0; } [data-text-position="left"] .hero-buttons, [data-text-position="right"] .hero-buttons { justify-content: flex-start; } [data-text-position="right"] .hero-buttons { justify-content: flex-end; } /* Hero Badge - Small label above title */ .hero-badge { display: inline-block; padding: 8px 20px; background: rgba(255, 107, 53, 0.9); color: white; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; border-radius: 30px; margin-bottom: 20px; opacity: 0; transform: translateY(30px); animation: none; } .hero-slide.active .hero-badge { animation: fadeSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; } /* Hero Title with split lines for staggered animation */ .hero-title { font-size: clamp(40px, 6vw, 72px); font-weight: 900; line-height: 1.05; margin-bottom: 24px; text-transform: uppercase; letter-spacing: -2px; } .title-line { display: block; opacity: 0; transform: translateY(60px) rotateX(-15deg); transform-origin: center bottom; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); } .hero-slide.active .title-line:nth-child(1) { animation: titleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; } .hero-slide.active .title-line:nth-child(2) { animation: titleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards; } @keyframes titleReveal { to { opacity: 1; transform: translateY(0) rotateX(0); } } .hero-subtitle { font-size: clamp(16px, 2vw, 22px); margin-bottom: 40px; font-weight: 400; line-height: 1.6; opacity: 0; transform: translateY(30px); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .hero-slide.active .hero-subtitle { animation: fadeSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards; } @keyframes fadeSlideUp { to { opacity: 1; transform: translateY(0); } } .hero-buttons { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; opacity: 0; transform: translateY(30px); } .hero-slide.active .hero-buttons { animation: fadeSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards; } /* Glowing CTA Button */ .btn-glow { position: relative; background: linear-gradient(135deg, var(--primary-color) 0%, #ff8c42 100%); box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4), 0 0 40px rgba(255, 107, 53, 0.2); overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .btn-glow::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s ease; } .btn-glow:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 30px rgba(255, 107, 53, 0.5), 0 0 60px rgba(255, 107, 53, 0.3); } .btn-glow:hover::before { left: 100%; } /* Outline Button */ .btn-outline { background: transparent; border: 2px solid rgba(255, 255, 255, 0.8); color: white; backdrop-filter: blur(10px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .btn-outline:hover { background: white; color: var(--secondary-color); border-color: white; transform: translateY(-3px); } /* Hero Controls - Redesigned */ .hero-controls { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 20px; z-index: 10; pointer-events: none; } .hero-prev, .hero-next { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); color: white; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; pointer-events: auto; } .hero-prev:hover, .hero-next:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); transform: scale(1.1); } .hero-prev:active, .hero-next:active { transform: scale(0.95); } /* Hero Dots - Styled like product sliders */ .hero-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; align-items: center; } .hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); border: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; } .hero-dot:hover { background: rgba(255, 255, 255, 0.8); } .hero-dot.active { background: white; width: 28px; border-radius: 5px; } /* Particle effect container */ .hero-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } /* Floating particles animation */ .hero-particles::before, .hero-particles::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 107, 53, 0.15) 0%, transparent 70%); animation: floatParticle 20s infinite ease-in-out; } .hero-particles::before { top: 20%; left: 10%; animation-delay: 0s; } .hero-particles::after { bottom: 20%; right: 10%; animation-delay: -10s; } @keyframes floatParticle { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } 25% { transform: translate(50px, -30px) scale(1.1); opacity: 0.7; } 50% { transform: translate(20px, 20px) scale(0.9); opacity: 0.4; } 75% { transform: translate(-30px, 10px) scale(1.05); opacity: 0.6; } } /* Buttons */ .btn { display: inline-block; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 15px; transition: all 0.3s; border: none; cursor: pointer; text-align: center; } .btn-primary { background: var(--primary-color); color: white; } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(255, 107, 53, 0.3); } .btn-secondary { background: transparent; color: white; border: 2px solid white; } .btn-secondary:hover { background: white; color: var(--text-dark); } .btn-add-to-cart { width: 100%; background: var(--secondary-color) !important; color: white; padding: 12px; } .btn-add-to-cart:hover { background: var(--text-dark); } .btn-quick-add { background: white; color: var(--text-dark); padding: 10px 20px; font-size: 14px; } /* Sections */ .section { padding: 80px 0; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .section.visible { opacity: 1; transform: translateY(0); } /* Page-load fade-in for non-home page wrappers that don't use .section */ .page-entry { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .page-entry.visible { opacity: 1; transform: translateY(0); } .section-header { text-align: center; margin-bottom: 50px; position: relative; } .section-title { font-size: 42px; font-weight: 800; margin-bottom: 10px; color: var(--text-dark); } .section-title.center { text-align: center; } .section-subtitle { font-size: 18px; color: var(--text-light); margin-bottom: 10px; } .section-subtitle.center { text-align: center; } .section-link { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--primary-color); text-decoration: none; font-weight: 600; font-size: 16px; transition: all 0.3s; } .section-link:hover { gap: 10px; } /* Product Grid */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .product-card { background: white; border-radius: 12px; overflow: hidden; transition: box-shadow 0.3s, border-color 0.3s; border: 1px solid var(--border-color); position: relative; text-decoration: none; } /* Hover effects for desktop only */ @media (hover: hover) and (pointer: fine) { .product-card { transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); } .product-card:hover .product-image img { transform: scale(1.05); filter: blur(3px); } .product-card:hover .product-overlay { opacity: 1; } } .product-badge { position: absolute; top: 15px; right: 15px; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; z-index: 2; letter-spacing: 0.5px; } .product-badge.sale { background: var(--primary-color); color: white; } .product-badge.new { background: var(--success-color); color: white; } .product-badge.bestseller { background: var(--warning-color); color: white; } /* WooCommerce Sale Badge - styled to match product-badge */ .woocommerce span.onsale { position: absolute; top: 10px; left: 10px; padding: 0px 12px; border-radius: 6px; font-size: 12px; font-weight: bold; text-transform: uppercase; z-index: 2; letter-spacing: 0.5px; background: #ff6b35; color: white; border: 1px solid #ffffff; /* line-height: 1; */ } .product-image { position: relative; aspect-ratio: 1; overflow: hidden; background: white; } .product-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s, filter 0.3s; padding: 20px; } .product-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; pointer-events: none; /* Prevent overlay from blocking clicks */ } .product-info { padding: 20px; } .product-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--text-dark); line-height: 1.4; min-height: 44px; /* max-height: 44px; */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; padding: 0 !important; } .product-title a{ color: var(--text-dark); } .product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .stars { color: var(--warning-color); font-size: 14px; } .reviews { font-size: 13px; color: var(--text-light); } .product-price { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .price-current { font-size: 24px; font-weight: 800; color: var(--text-dark); } .price-original { font-size: 16px !important; color: var(--text-light); text-decoration: line-through; } .price-original .woocommerce-Price-amount.amount{ font-size: 16px !important; color: var(--text-muted) !important; font-weight: 400 !important; } .product-note { font-size: 13px; color: var(--text-light) !important; margin-bottom: 15px; } /* Product Slider Styles */ .product-slider-container { position: relative; margin: 0 -20px; padding: 0 60px; } .product-slider-wrapper { overflow: hidden; border-radius: 12px; padding: 20px 0; margin: -20px 0; } .product-slider { display: flex; gap: 30px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 20px; } .product-slider .product-card { flex: 0 0 calc(25% - 22.5px); min-width: max(calc(25% - 22.5px), 270px); } .woocommerce nav.woocommerce-pagination ul{ border: none !important; } /* Slider Navigation Buttons */ .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: white; border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; color: var(--text-dark); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .slider-nav:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); transform: translateY(-50%) scale(1.05); } .slider-nav:active { transform: translateY(-50%) scale(0.95); } .slider-nav:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .slider-nav-prev { left: 10px; } .slider-nav-next { right: 10px; } /* Slider Indicators */ .slider-indicators { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; padding: 15px 0; } .slider-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--border-color); border: 2px solid transparent; cursor: pointer; transition: all 0.3s ease; padding: 0; position: relative; } .slider-indicator:hover { background: var(--text-light); transform: scale(1.3); border-color: var(--text-light); } .slider-indicator.active { background: var(--primary-color); width: 40px; border-radius: 5px; border-color: var(--primary-color); box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3); } .slider-indicator:focus { outline: 2px solid var(--primary-color); outline-offset: 3px; } /* Slider Progress Counter */ .slider-progress { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 25px; font-size: 14px; color: var(--text-light); font-weight: 500; } .slider-count { background: var(--bg-light); padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border-color); } .slider-count-current { color: var(--primary-color); font-weight: 700; font-size: 16px; } .slider-count-total { color: var(--text-light); } /* Best Sellers Section */ .best-sellers { background: var(--bg-light); } /* Recent Blogs Section */ .recent-blogs { background: var(--bg-light); } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; } .blog-card { background: white; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); transition: all 0.3s ease; display: flex; flex-direction: column; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .blog-image { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-light); } .blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .blog-card:hover .blog-image img { transform: scale(1.05); } .blog-categories { position: absolute; top: 15px; left: 15px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 1; } .blog-category { background: var(--primary-color); color: white; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .blog-content { padding: 25px; display: flex; flex-direction: column; flex: 1; } .blog-title { font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; line-height: 1.3; transition: color 0.3s; } .blog-card:hover .blog-title { color: var(--primary-color); } .blog-excerpt { font-size: 14px; color: var(--text-light); line-height: 1.6; margin-bottom: 20px; flex: 1; } .blog-meta { display: flex; gap: 20px; margin-bottom: 15px; font-size: 13px; color: var(--text-light); } .blog-date, .blog-read-time { display: flex; align-items: center; } .blog-link { color: var(--primary-color); text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.3s; display: inline-block; } .blog-link:hover { gap: 8px; padding-left: 5px; } /* Stretched link — makes the whole card clickable */ .blog-card { position: relative; } .blog-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .blog-categories { position: relative; z-index: 2; } /* Athletes Section */ .athletes-section { background: white; } .athletes-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 40px; } .athlete-card { flex: 0 0 calc(25% - 23px); background: white; border-radius: 16px; overflow: hidden; transition: all 0.4s ease; border: 1px solid var(--border-color); text-decoration: none; display: block; } .athlete-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); border-color: var(--primary-color); } .athlete-image { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--bg-light); } .athlete-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .athlete-card:hover .athlete-image img { transform: scale(1.08); } .athlete-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%); display: flex; align-items: flex-end; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.4s ease; } .athlete-card:hover .athlete-overlay { opacity: 1; } .view-profile { color: white; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .athlete-info { padding: 20px; text-align: center; } .athlete-name { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; } .athlete-sport { font-size: 14px; color: var(--text-light); font-weight: 500; } /* Brands Section */ .brands-section { background: var(--bg-light); } .brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 40px; align-items: center; justify-items: center; padding: 30px 0; } .brand-logo { padding: 20px; transition: all 0.3s; filter: grayscale(100%); opacity: 0.6; } .brand-logo:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.1); } .brand-logo img { max-width: 150px; height: auto; display: block; } /* Instagram Section */ .instagram-section { background: white; } .instagram-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; } .instagram-post { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; cursor: pointer; } .instagram-post img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .instagram-post:hover img { transform: scale(1.1); } .instagram-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .instagram-post:hover .instagram-overlay { opacity: 0; } .instagram-cta { text-align: center; } .social-media-cards { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; overflow-x: auto; overflow-y: visible; padding-top: 4px; padding-bottom: 8px; } .social-icon-link { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: var(--bg-light); color: var(--text-dark); border: 1px solid var(--border-color); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; overflow: hidden; } .social-icon-link img, .social-icon-link svg { width: 20px; height: 20px; object-fit: contain; display: block; } .social-icon-link:hover { transform: translateY(-3px); background: var(--primary-color); color: white; border-color: var(--primary-color); } .social-icon-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; } .social-icon-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Google Reviews Section */ .google-reviews-section { background: var(--bg-light); padding: 60px 0; } .reviews-header { text-align: center; margin-bottom: 40px; } .reviews-rating-title { font-size: 28px; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; letter-spacing: 2px; } .reviews-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; } .reviews-stars .star { color: #fbbf24; font-size: 28px; } .reviews-count { font-size: 14px; color: var(--text-light); margin-bottom: 15px; } .reviews-link { color: var(--text-dark); text-decoration: underline; } .reviews-link:hover { color: var(--primary-color); } .google-logo { height: 30px; width: auto; } .reviews-slider-container { display: flex; align-items: center; gap: 20px; position: relative; } .reviews-nav { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color); background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dark); transition: all 0.3s; z-index: 10; } /* WooCommerce variations select styling to match design */ table.variations th.label label { font-weight: 700; color: var(--text-dark); display: block; margin-bottom: 0px; } table.variations { width: 100%; max-width: 100%; } table.variations td.value { padding-top: 0px; width: 100%; } table.variations select { width: 100% !important; max-width: 100%; padding: 12px 18px; font-size: 14px; color: var(--text-dark); background: #f3f4f5; border: 1px solid var(--border-color); border-radius: 8px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); } table.variations select:focus { outline: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); background: #fff; } table.variations .reset_variations { display: block; clear: both; margin-left: 12px; color: var(--primary-dark); font-size: 13px; /* vertical-align: middle; */ } @media (max-width: 600px) { table.variations select { padding: 14px 16px; } } .sp-reviews-summary{ background-color: var(--bg-light) !important; } .reviews-nav:hover { background: var(--primary-color); border-color: var(--primary-color); color: white; } .reviews-slider-wrapper { flex: 1; overflow: hidden; } .reviews-slider { display: flex; gap: 20px; transition: transform 0.3s ease; } .review-card { flex: 0 0 calc(25% - 15px); background: var(--secondary-color); border-radius: 12px; padding: 24px; color: white; min-width: 280px; } .review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .reviewer-avatar { width: 44px; height: 44px; border-radius: 50%; background: #6366f1; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; color: white; overflow: hidden; } .reviewer-avatar.dark { background: #374151; } .reviewer-avatar.teal { background: #14b8a6; } .reviewer-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; } .reviewer-info { display: flex; align-items: center; gap: 8px; flex: 1; } .reviewer-name { font-weight: 600; font-size: 15px; } .google-icon { width: 18px; height: 18px; } .review-date { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-bottom: 8px; margin-left: 56px; } .review-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .review-rating .stars { color: #fbbf24; font-size: 14px; letter-spacing: 2px; } .review-rating .verified { color: #3b82f6; font-size: 14px; font-weight: bold; } .review-text { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } @media (max-width: 1200px) { .review-card { flex: 0 0 calc(33.333% - 14px); } } @media (max-width: 900px) { .review-card { flex: 0 0 calc(50% - 10px); } } @media (max-width: 600px) { .review-card { flex: 0 0 100%; } .reviews-nav { display: none; } .reviews-slider { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; } .review-card { scroll-snap-align: start; } } /* Newsletter Section */ .newsletter-section { background: linear-gradient(135deg, var(--secondary-color) 0%, var(--text-dark) 100%); color: white; padding: 60px 0; } .newsletter-content { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; align-items: center; } .newsletter-title { font-size: 36px; font-weight: 800; margin-bottom: 15px; } .newsletter-description { font-size: 16px; opacity: 0.9; } .newsletter-form { display: flex; gap: 15px; } .newsletter-input { flex: 1; padding: 16px 20px; border: none; border-radius: 8px; font-size: 15px; background: rgba(255, 255, 255, 0.1); color: white; backdrop-filter: blur(10px); } .newsletter-input::placeholder { color: rgba(255, 255, 255, 0.6); } .newsletter-input:focus { outline: none; background: rgba(255, 255, 255, 0.15); } /* WPForms newsletter override */ .newsletter-section .wpforms-container { width: 100% !important; max-width: none !important; } .newsletter-section .wpforms-form { display: flex !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; max-width: none !important; } .newsletter-section .wpforms-field-container { flex: 1 !important; display: flex !important; align-items: stretch !important; min-width: 0; } .newsletter-section .wpforms-field-email { flex: 1 !important; display: flex !important; align-items: stretch !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Override WPForms fixed field sizes (wpforms-field-small/medium/large) */ .newsletter-section .wpforms-field-email input[type="email"], .newsletter-section .wpforms-field-email input[type="email"].wpforms-field-small, .newsletter-section .wpforms-field-email input[type="email"].wpforms-field-medium, .newsletter-section .wpforms-field-email input[type="email"].wpforms-field-large { flex: 1 !important; width: 100% !important; max-width: none !important; padding: 16px 20px !important; border: none !important; border-radius: 8px 0 0 8px !important; font-size: 15px !important; background: rgba(255, 255, 255, 0.1) !important; color: white !important; backdrop-filter: blur(10px); box-shadow: none !important; height: auto !important; } .newsletter-section .wpforms-field-email input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.6) !important; } .newsletter-section .wpforms-field-email input[type="email"]:focus { outline: none !important; background: rgba(255, 255, 255, 0.15) !important; box-shadow: none !important; } .newsletter-section .wpforms-field-label { display: none !important; } .newsletter-section .wpforms-submit-container { display: flex !important; align-items: stretch !important; flex-shrink: 0; padding: 0 !important; margin: 0 !important; } .newsletter-section button.wpforms-submit { padding: 16px 28px !important; background: var(--primary-color) !important; color: white !important; border: none !important; border-radius: 0 8px 8px 0 !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; transition: filter 0.2s ease !important; white-space: nowrap; height: auto !important; box-shadow: none !important; text-transform: uppercase; letter-spacing: 0.05em; } .newsletter-section button.wpforms-submit:hover { filter: brightness(0.88) !important; } .newsletter-section .wpforms-submit-spinner { display: none !important; } /* Footer */ .footer { background: var(--secondary-color); color: white; padding: 60px 0 30px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 50px; } footer .custom-logo-link, footer .footer-acf-logo { display: block; max-width: 120px; margin-bottom: 20px; } footer .custom-logo { max-width: 100%; height: auto; display: block; aspect-ratio: auto; } .footer-text { color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin-bottom: 25px; } .footer-social { display: flex; gap: 15px; } .social-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: white; transition: all 0.3s; } .social-link:hover { background: var(--primary-color); transform: translateY(-3px); } .footer-column h4 { font-size: 16px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; } .footer-column ul li { list-style: none; } .footer-column ul li{ margin-bottom: 12px; } .footer-column ul li a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: all 0.3s; font-size: 14px; } .footer-column ul li a:hover { color: var(--primary-color); padding-left: 5px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); font-size: 14px; } .payment-methods { display: flex; align-items: center; gap: 10px; } .payment-methods span { margin-right: 5px; } .payment-methods img { height: 25px; opacity: 0.8; transition: opacity 0.3s; } .payment-methods img:hover { opacity: 1; } /* ========================================= WordPress Site Header Maps WordPress theme classes to the existing visual design / mockup styles ========================================= */ #masthead.site-header { background: var(--bg-white); /* padding: 10px 0 0; */ position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); transition: transform 0.35s ease, box-shadow 0.3s ease; } #masthead.site-header.header-hidden { transform: translateY(-100%); box-shadow: none; } /* Search bar row */ .site-header__search { background: var(--bg-white); padding: 4px 0 14px; } .site-header__search-inner { max-width: 780px; margin: -15px auto 10px auto; padding: 0 20px; } .header-search-form { display: flex; align-items: center; gap: 10px; background: #f5f5f5; border: 1px solid #e8e8e8; border-radius: 40px; padding: 11px 20px; width: 100%; transition: border-color 0.2s, box-shadow 0.2s; } .header-search-form:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 234, 88, 12), 0.1); } .header-search-icon { color: #aaa; flex-shrink: 0; } .header-search-input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; color: var(--text-dark); min-width: 0; } .header-search-input::placeholder { color: #aaa; } .header-search-submit { background: none; border: none; padding: 0; cursor: pointer; color: #aaa; display: flex; align-items: center; flex-shrink: 0; transition: color 0.2s; } .header-search-submit:hover { color: var(--primary-color); } .site-header__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; max-width: 1320px; margin: 0 auto; padding: 0 20px; min-height: 70px; } /* Branding / Logo */ .site-branding { flex: 1; position: relative; z-index: 2; margin-bottom: -44px; } .site-branding .custom-logo-link img.custom-logo { height: 122px; width: auto; } .site-branding .site-title { text-decoration: none; font-size: 22px; font-weight: 700; color: var(--text-dark); transition: color 0.3s; } .site-branding .site-title:hover { color: var(--primary-color); } .site-branding .site-description { font-size: 12px; color: var(--text-light); margin: 0; } /* Main Navigation – hide toggle on desktop */ .main-navigation .menu-toggle { display: none; } /* Nav menu list */ .main-navigation ul.menu { display: flex; list-style: none; gap: 35px; justify-content: center; margin: 0; padding: 0; } /* Individual nav items */ .main-navigation ul.menu>li { position: relative; } /* Nav links */ .main-navigation ul.menu>li>a { text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 15px; transition: color 0.3s; display: flex; align-items: center; gap: 5px; padding: 5px 0; } /* Hover & current-page state */ .main-navigation ul.menu>li>a:hover, .main-navigation ul.menu>li.current-menu-item>a, .main-navigation ul.menu>li.current_page_item>a, .main-navigation ul.menu>li.current-menu-ancestor>a { color: var(--primary-color); } /* Header icons area */ .site-header__icons { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: flex-end; margin-right: -10px; } .site-header__icons .header-icon { display: flex; align-items: center; text-decoration: none; color: var(--text-dark); padding: 8px; position: relative; transition: all 0.3s; } .site-header__icons .header-icon:hover { color: var(--primary-color); transform: scale(1.1); } .site-header__icons .header-icon--cart .cart-count { position: absolute; top: 0; right: 0; background: var(--primary-color); color: white; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 10px; min-width: 18px; text-align: center; } /* ========================================= MEGA MENU – WordPress navigation integration ========================================= */ /* The Shop

needs overflow visible so the absolute mega menu can escape */ .main-navigation ul.menu > li.has-mega-menu { position: static; overflow: visible; } /* Dropdown arrow appended to the Shop link via CSS */ .main-navigation ul.menu > li.has-mega-menu > a::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 6px; vertical-align: middle; transition: transform 0.25s ease; } /* Rotate arrow when mega menu is open */ .main-navigation ul.menu > li.has-mega-menu.mega-menu-open > a::after { transform: rotate(180deg); } /* The mega menu panel starts hidden */ .main-navigation ul.menu > li.has-mega-menu .mega-menu { display: none; opacity: 0; transition: opacity 0.25s ease; } /* Show via JS-toggled class */ .main-navigation ul.menu > li.has-mega-menu.mega-menu-open .mega-menu { display: block; opacity: 1; } /* Sub-heading inside the categories section (e.g. Clinical Testing) */ .mega-menu-sub-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-dark); margin-top: 20px; margin-bottom: 6px; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); } /* Horizontal rule between category groups */ .mega-menu-section-divider { border: none; border-top: 1px solid var(--border-color); margin: 18px 0 10px; } /* Empty-state message */ .mega-menu-empty { color: var(--text-light); font-size: 13px; padding: 8px 0; } /* ── Mobile overrides for WordPress mega menu ─────────────────────────────── */ @media (max-width: 1024px) { /* Remove the CSS arrow; JS adds an inline toggle indicator */ .main-navigation ul.menu > li.has-mega-menu > a::after { display: none; } /* Toggle button appended by JS */ .mega-menu-mobile-toggle { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 14px 4px; background: none; border: none; cursor: pointer; color: var(--text-dark); font-weight: 500; font-size: 15px; width: 100%; text-align: left; border-bottom: 1px solid var(--border-color); transition: color 0.2s; } .mega-menu-mobile-toggle:hover, .mega-menu-mobile-toggle.open { color: var(--primary-color); } .mega-menu-mobile-toggle svg { transition: transform 0.25s ease; flex-shrink: 0; } .mega-menu-mobile-toggle.open svg { transform: rotate(180deg); } /* Panel is hidden by default on mobile too */ .main-navigation ul.menu > li.has-mega-menu .mega-menu { display: none; opacity: 1; position: static !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; z-index: auto; } /* Show when open on mobile */ .main-navigation ul.menu > li.has-mega-menu.mega-menu-open .mega-menu { display: block; } /* Single-column layout on mobile */ .mega-menu-content { grid-template-columns: 1fr !important; } .brand-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* Responsive Design */ @media (max-width: 1024px) { .nav-menu { gap: 20px; } .dropdown-menu { min-width: 500px; } .hero-title { font-size: 42px; } .section-title { font-size: 36px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1100px) { .logo img { height: 80px; margin: -10px 0 0 0; width: auto; } } @media (max-width: 1024px) { .navbar { overflow: visible; padding: 10px 0; } .nav-container { max-height: none; align-items: center; min-height: 60px; flex-wrap: wrap; } .logo { order: 1; } .logo img { height: 50px; margin: 0; } .nav-icons { order: 2; display: flex; gap: 10px; } .mobile-menu-btn { order: 3; display: flex; } .nav-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; flex-direction: column; padding: 0; box-shadow: none; gap: 0; z-index: 9999; /* Above everything */ width: 100%; height: 100vh; height: 100dvh; /* Dynamic viewport height for mobile browsers */ overflow: hidden; /* Container doesn't scroll, inner content does */ } .nav-menu.active { display: flex; } /* Lock body scroll when menu is open */ body.menu-open { overflow: hidden; position: fixed; width: 100%; height: 100%; } /* Mobile Menu Header - Fixed at top */ .mobile-menu-header { display: flex !important; justify-content: space-between; align-items: center; padding: 15px 20px !important; border-bottom: 2px solid var(--primary-color) !important; background: white; flex-shrink: 0; /* Don't shrink */ } /* Scrollable menu content */ .mobile-menu-scroll { display: block; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 20px 20px 20px; } .mobile-menu-logo { display: block; } .mobile-menu-logo img { height: 50px; width: auto; } .mobile-menu-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: var(--text-dark); border-radius: 50%; transition: all 0.2s ease; } .mobile-menu-close:hover { background: var(--bg-light); color: var(--primary-color); } .nav-menu li { width: 100%; border-bottom: 1px solid var(--border-color); } .nav-menu li:last-child { border-bottom: none; } .nav-link { display: block; padding: 15px 10px; width: 100%; color: var(--text-dark); } .nav-link:hover, .nav-link.active { color: var(--primary-color); } /* Disable hover behavior on mobile - use click only */ .dropdown:hover .dropdown-menu, .dropdown-menu:hover { display: none; opacity: 0; } .dropdown:hover .arrow { transform: none; } .dropdown.active .arrow { transform: rotate(180deg); } .dropdown-menu { position: static; transform: none; margin-top: 0; min-width: 100%; padding: 0; box-shadow: none; border-top: 1px solid var(--border-color); display: none; grid-template-columns: 1fr; gap: 0; } /* Reset mega-menu for mobile */ .mega-menu { position: static !important; transform: none !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin-top: 0 !important; border-radius: 0; padding: 0 !important; } .mega-menu-header { border-radius: 0; margin: 0; padding: 15px 15px 10px; } .mega-menu-content { grid-template-columns: 1fr; gap: 15px; padding: 15px; overflow: visible; } .mega-menu-section { padding: 20px; border: 1px solid var(--border-color); border-radius: 8px; } .mega-menu-section h4 { padding-left: 0; padding-right: 0; } .categories-section { border: 1px solid var(--border-color); border-radius: 8px; } .brands-section { border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; } .brand-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .brand-grid a { font-size: 13px; padding: 6px 4px; } .mega-menu-header { border-radius: 0; } .dropdown.active .dropdown-menu { display: block; opacity: 1; pointer-events: auto; } .dropdown.active .mega-menu { display: block; } /* Shop All CTA at top on mobile */ .shop-all-cta { order: -1; margin-bottom: 10px; padding: 14px 20px; font-size: 13px; } .dropdown-column { order: 0; } .header-search { padding: 10px 0; } .header-search .search-input { font-size: 14px; padding: 12px 52px 12px 42px; } .mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-btn.active span:nth-child(2) { opacity: 0; } .mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); } .hero { height: 600px; min-height: 500px; } .hero-title { font-size: clamp(28px, 5vw, 40px); letter-spacing: -1px; } .hero-subtitle { font-size: 15px; margin-bottom: 30px; } .hero-content { padding: 0 20px; } .hero-badge { font-size: 11px; padding: 6px 16px; } .hero-buttons { flex-direction: column; gap: 12px; } .hero-buttons .btn { width: 100%; max-width: 280px; } /* Force center alignment on mobile for better UX */ [data-text-position="left"] .hero-content, [data-text-position="right"] .hero-content { text-align: center; margin: 0 auto; } [data-text-position="left"] .hero-buttons, [data-text-position="right"] .hero-buttons { justify-content: center; align-items: center; } /* Simplify overlay for mobile */ .hero-overlay-gradient { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%); } .hero-prev, .hero-next { width: 44px; height: 44px; } .hero-prev svg, .hero-next svg { width: 20px; height: 20px; } .hero-dots { bottom: 20px; } .hero-particles::before, .hero-particles::after { width: 150px; height: 150px; } .section { padding: 50px 0; } .section-title { font-size: 28px; } .section-link { position: static; display: block; margin-top: 10px; } .product-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } /* Slider responsive adjustments */ .product-slider .product-card { flex: 0 0 calc(33.333% - 20px); min-width: max(calc(33.333% - 20px), 270px); } .product-slider-container { padding: 0 50px; } .slider-nav { width: 40px; height: 40px; } .blog-grid { grid-template-columns: 1fr; gap: 25px; } .brands-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .instagram-grid { grid-template-columns: repeat(2, 1fr); } .athletes-grid { gap: 20px; } .athletes-grid .athlete-card { flex: 0 0 calc(50% - 10px); } .newsletter-content { grid-template-columns: 1fr; gap: 30px; text-align: center; } .newsletter-form { flex-direction: column; } .newsletter-section .wpforms-form { flex-direction: column; } .newsletter-section .wpforms-field-email input[type="email"] { border-radius: 8px; } .newsletter-section .wpforms-submit { border-radius: 8px; width: 100%; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { flex-direction: column; gap: 20px; text-align: center; } } /* Tablet adjustments for slider */ @media (max-width: 768px) { .product-slider .product-card { flex: 0 0 calc(50% - 15px); min-width: max(calc(50% - 15px), 270px); } .product-slider { gap: 20px; } .product-slider-container { padding: 0 45px; } .slider-progress { margin-top: 20px; font-size: 13px; } .slider-count { padding: 6px 14px; } } /* Medium mobile / Small tablet breakpoint */ @media (max-width: 768px) { .hero { height: 400px; min-height: 350px; max-height: 450px; } .hero-slide { background-position: center center; background-size: cover; } .hero-bg-layer { background-size: cover; background-position: center center; } .hero-content { max-width: 90%; padding: 0 50px; } .hero-title { font-size: 32px; margin-bottom: 15px; } .hero-subtitle { font-size: 16px; margin-bottom: 25px; line-height: 1.5; } .hero-buttons { flex-direction: column; gap: 12px; align-items: center; } .hero-buttons .btn { padding: 16px 32px; width: 100%; max-width: 320px; } .hero-controls { padding: 0 15px; } .hero-prev, .hero-next { width: 44px; height: 44px; } } @media (max-width: 480px) { .hero { height: 350px; min-height: 300px; max-height: 400px; } .hero-slide { background-position: center center; background-size: cover; } .hero-bg-layer { background-position: center center; background-size: cover; } .hero-content { max-width: 100%; padding: 0 40px; } .hero-title { font-size: 24px; line-height: 1.2; margin-bottom: 8px; } .hero-subtitle { font-size: 15px; margin-bottom: 18px; line-height: 1.4; } .hero-buttons { flex-direction: column; gap: 10px; align-items: center; } .hero-buttons .btn { width: 100%; max-width: 300px; padding: 15px 24px; font-size: 16px; } .hero-controls { padding: 0 10px; } .hero-prev, .hero-next { width: 40px; height: 40px; padding: 0; } .hero-prev svg, .hero-next svg { width: 20px; height: 20px; } .product-grid { grid-template-columns: 1fr; } /* Mobile slider adjustments */ .product-slider .product-card { flex: 0 0 calc(100% - 40px); min-width: calc(100% - 40px); } /* Extra small mobile mega menu adjustments */ .brand-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .brand-grid a { font-size: 13px; padding: 5px 4px; } .product-slider-container { padding: 0 40px; margin: 0 -10px; } .slider-nav { width: 36px; height: 36px; } .slider-nav-prev { left: 5px; } .slider-nav-next { right: 5px; } .slider-indicators { gap: 6px; margin-top: 20px; } .slider-indicator { width: 6px; height: 6px; } .slider-indicator.active { width: 24px; } .slider-progress { margin-top: 15px; font-size: 12px; } .slider-count { padding: 5px 12px; } .slider-count-current { font-size: 14px; } .instagram-grid { grid-template-columns: 1fr; } .athletes-grid .athlete-card { flex: 0 0 100%; } } /* Animations */ @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Pre-hide cards before their section becomes visible so there is no flash from visible → animation-start-state when the class is added. */ .section:not(.visible) .product-card { opacity: 0; transform: translateY(30px); } .section.visible .product-card { /* fill-mode: both holds the 'from' state during the delay period, preventing cards 2-4 from flashing visible while waiting to animate. */ animation: slideUp 0.5s ease both; } .section.visible .product-card:nth-child(1) { animation-delay: 0.1s; } .section.visible .product-card:nth-child(2) { animation-delay: 0.2s; } .section.visible .product-card:nth-child(3) { animation-delay: 0.3s; } .section.visible .product-card:nth-child(4) { animation-delay: 0.4s; } /* Parallax Sections */ .section.visible { will-change: auto; } /* Floating Action Buttons */ .floating-actions { position: fixed; bottom: 30px; right: 30px; z-index: 1000; display: flex; flex-direction: column; gap: 15px; } .fab { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); border: none; color: white; cursor: pointer; box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4); display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; animation: fabFloat 3s ease-in-out infinite; } @keyframes fabFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .fab:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 8px 30px rgba(255, 107, 53, 0.5); animation: none; } .fab svg { width: 24px; height: 24px; } .fab-tooltip { position: absolute; right: 70px; background: #2d3447; color: white; padding: 8px 15px; border-radius: 8px; font-size: 14px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.3s; } .fab:hover .fab-tooltip { opacity: 1; right: 75px; } .fab-tooltip::after { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-left-color: #2d3447; } /* Support Menu */ .fab-support { position: relative; } .support-menu { position: absolute; bottom: 0; right: 75px; background: white; border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); padding: 20px; min-width: 270px; opacity: 0; visibility: hidden; transform: translateX(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .support-menu.active { opacity: 1; visibility: visible; transform: translateX(0); } .support-menu::before { content: ''; position: absolute; right: -8px; top: 20px; border: 8px solid transparent; border-left-color: white; } .support-menu h4 { font-size: 15px; font-weight: 700; color: var(--text-dark); margin: 0 0 16px; padding-bottom: 14px; text-align: center; border-bottom: 1px solid var(--border-color); } .support-option { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 10px; cursor: pointer; transition: all 0.2s; text-decoration: none; color: var(--text-dark); } .support-option:hover { background: var(--bg-light); } .support-option-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .support-option-icon.whatsapp { background: #25D366; color: white; } .support-option-icon.email { background: #EA4335; color: white; } .support-option-icon.phone { background: #4285F4; color: white; } .support-option-icon svg { width: 20px; height: 20px; } .support-option-text { flex: 1; } .support-option-text span { display: block; font-size: 14px; font-weight: 700; color: var(--text-dark); } .support-option-text small a { color: var(--text-light); text-decoration: none; } .support-option-text small { display: block; font-size: 12px; color: var(--text-light); margin-top: 3px; } .support-divider { height: 1px; background: var(--border-color); margin: 10px 0; } .social-links-fab { display: flex; gap: 8px; padding: 10px; } .social-link-fab { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-light); color: var(--text-dark); transition: all 0.2s; text-decoration: none; } .social-link-fab:hover { background: var(--primary-color); color: white; transform: translateY(-3px); } .social-link-fab svg { width: 16px; height: 16px; } /* ===================================================== Blood Testing Promo Section ===================================================== */ .blood-testing-promo { padding: 80px 0; background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%); position: relative; overflow: hidden; } .blood-testing-promo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(255, 122, 0, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(0, 180, 216, 0.06) 0%, transparent 50%); pointer-events: none; } .blood-testing-inner { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: center; position: relative; z-index: 1; } .blood-testing-label { font-size: 14px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 12px; } .blood-testing-title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: #fff; margin: 0 0 16px; line-height: 1.2; } .blood-testing-desc { font-size: 17px; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin: 0 0 32px; max-width: 540px; } .blood-testing-benefits { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; } .benefit-item { display: flex; align-items: flex-start; gap: 16px; } .benefit-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 122, 0, 0.1); border: 1px solid rgba(255, 122, 0, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .benefit-icon svg { width: 24px; height: 24px; color: var(--primary-color); } .benefit-text { display: flex; flex-direction: column; gap: 4px; } .benefit-text strong { font-size: 16px; font-weight: 700; color: #fff; } .benefit-text span { font-size: 14px; color: rgba(255, 255, 255, 0.6); } .blood-testing-cta { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #FF7A00 0%, #FF9500 100%); color: #fff; padding: 16px 32px; border-radius: 10px; font-size: 16px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; box-shadow: 0 8px 24px rgba(255, 122, 0, 0.35); } .blood-testing-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(255, 122, 0, 0.45); } .blood-testing-cta svg { transition: transform 0.3s ease; } .blood-testing-cta:hover svg { transform: translateX(4px); } .blood-testing-visual { display: flex; justify-content: center; } .visual-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 28px; backdrop-filter: blur(10px); width: 100%; max-width: 400px; } .visual-card-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .test-panel-list { display: flex; flex-direction: column; gap: 16px; } .test-panel-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px; background: rgba(255, 255, 255, 0.04); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.2s ease; } .test-panel-item:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 122, 0, 0.2); } .panel-info { display: flex; flex-direction: column; gap: 4px; } .panel-info strong { font-size: 14px; font-weight: 600; color: #fff; } .panel-info span { font-size: 12px; color: rgba(255, 255, 255, 0.5); line-height: 1.4; } .panel-price { font-size: 18px; font-weight: 800; color: var(--primary-color); flex-shrink: 0; } .view-all-panels { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--primary-color); font-size: 14px; font-weight: 600; text-decoration: none; text-align: center; transition: opacity 0.2s ease; } .view-all-panels:hover { opacity: 0.8; } /* Blood Testing Promo - Responsive */ @media (max-width: 900px) { .blood-testing-inner { grid-template-columns: 1fr; gap: 40px; } .visual-card { max-width: 100%; } .blood-testing-desc { max-width: 100%; } } @media (max-width: 600px) { .blood-testing-promo { padding: 60px 0; } .blood-testing-benefits { gap: 16px; } .benefit-icon { width: 42px; height: 42px; } .test-panel-item { flex-direction: column; gap: 10px; } .panel-price { align-self: flex-start; } .blood-testing-cta { width: 100%; justify-content: center; } } /* Mobile FAB adjustments */ @media (max-width: 768px) { .floating-actions { bottom: 20px; right: 20px; } .fab { width: 56px; height: 56px; } .support-menu { right: 70px; min-width: 200px; } .fab-tooltip { display: none; } } /* ========================================= WordPress Site Header – Mobile / Responsive ========================================= */ @media (max-width: 1024px) { #masthead.site-header { /* padding: 10px 0; */ } /* Single-row layout: logo left, [cart + toggle] right */ .site-header__inner { flex-wrap: nowrap; min-height: 60px; max-height: none; align-items: center; } .site-branding { flex: 1; order: 1; margin-bottom: 0; } .site-branding .custom-logo-link img.custom-logo { height: 77px; } .site-header__search { padding: 8px 0 12px; } /* Icons and toggle sit together on the right */ .site-header__icons { order: 2; flex: none; gap: 4px; } /* Nav sits inline – only the toggle button is visible */ .main-navigation { order: 3; flex: none; position: static; } /* Show hamburger toggle button on mobile */ .main-navigation .menu-toggle { display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 8px; color: var(--text-dark); transition: color 0.3s; line-height: 0; } .main-navigation .menu-toggle:hover { color: var(--primary-color); } /* Remove the old pseudo-element hamburger (now using inline SVG) */ .main-navigation .menu-toggle::before { display: none; } /* Drop-down menu panel below the sticky header */ .main-navigation #primary-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-white); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); z-index: 9999; max-height: calc(100dvh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* #masthead must be the positioning parent */ #masthead.site-header { position: sticky; top: 0; } .main-navigation.toggled #primary-menu, .main-navigation #primary-menu.toggled-on { display: block; } .main-navigation ul.menu { flex-direction: column; gap: 0; padding: 8px 20px 16px; } .main-navigation ul.menu>li { width: 100%; border-bottom: 1px solid var(--border-color); } .main-navigation ul.menu>li:last-child { border-bottom: none; } .main-navigation ul.menu>li>a { display: block; padding: 14px 4px; width: 100%; } } /* ======================================================================= SHOP PAGE — Custom Layout (Filter Sidebar + Product Grid) ======================================================================= */ .shop-page { padding-bottom: 80px; } /* Page header */ /* ---------- Shop page header — dark stage design ---------- */ .shop-page-header { position: relative; background: #1a1a2e; padding: 60px 0 50px; min-height: 380px; display: flex; align-items: center; text-align: center; margin-bottom: 40px; border-bottom: 3px solid var(--primary-color); overflow: hidden; } /* Decorative ring — top right */ .shop-page-header::before { content: ''; position: absolute; top: -90px; right: -70px; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(255, 107, 53, 0.20); pointer-events: none; z-index: 1; } /* Decorative ring — bottom left */ .shop-page-header::after { content: ''; position: absolute; bottom: -80px; left: -50px; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(255, 107, 53, 0.11); pointer-events: none; z-index: 1; } .shop-page-header .container { position: relative; z-index: 2; width: 100%; } /* Override text colours for dark background */ .shop-page-header .shop-page-title { color: #ffffff; font-size: clamp(28px, 4vw, 50px); font-weight: 900; text-transform: uppercase; letter-spacing: -1px; line-height: 1.1; margin-bottom: 14px; } /* Orange accent rule above title */ .shop-page-header .shop-page-title::before { content: ''; display: block; width: 44px; height: 3px; background: var(--primary-color); border-radius: 2px; margin: 0 auto 20px; } .shop-page-header .shop-page-desc { color: rgba(255, 255, 255, 0.58); font-size: 16px; /* max-width: 520px; */ margin: 0 auto; } /* Image variant — hide the decorative rings when a header image is present */ .shop-page-header--has-image::before, .shop-page-header--has-image::after { display: none; } /* Image panel: occupies only the right 62% of the header. background-size: cover fills that zone completely — there is no empty space to the left of the image, so the overlay's solid dark zone (which matches #1a1a2e) creates an invisible seam at the element's left edge that is viewport-width-independent. No more hard edges. */ .shop-page-header__img { position: absolute; top: 0; bottom: 0; left: 28%; /* wider than before — athlete sits further left on screen */ right: 0; background-size: cover; background-position: 70% center; /* show more of right/athlete, less edge-cropped */ background-repeat: no-repeat; z-index: 0; max-width: 1600px; } /* when greater than 2000px */ @media (min-width: 2000px) { .shop-page-header__img { left: 50%; } } /* Gradient overlay. KEY: left: -16px overhangs the image div's left boundary, so the solid-dark portion of the gradient smothers any sub-pixel colour bleed that the browser produces at the div edge. The overhang is over the plain dark header background so it is completely invisible. */ .shop-page-header__img::after { content: ''; position: absolute; top: 0; bottom: 0; left: -16px; /* overhang kills sub-pixel edge artifact */ right: 0; background: linear-gradient( to right, #1a1a2e 0%, #1a1a2e 14%, /* solid dark through first ~14% — safe zone */ rgba(26,26,46,0.92) 22%, rgba(26,26,46,0.72) 32%, rgba(26,26,46,0.40) 44%, rgba(26,26,46,0.12) 54%, transparent 63%, rgba(26,26,46,0.18) 82%, rgba(26,26,46,0.50) 100% ); pointer-events: none; } .shop-page-title { font-size: 32px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; } .shop-page-desc { font-size: 16px; color: var(--text-light); margin: 0; } /* Two-column layout: sidebar + main */ .shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; } .shop-mobile-filters-toggle { display: none; } /* ----------------------------------------------------------------------- Filter Sidebar ----------------------------------------------------------------------- */ .shop-filters { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; position: sticky; top: 90px; } .filters-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); } .filters-heading h3 { font-size: 16px; font-weight: 700; color: var(--text-dark); margin: 0; } .filters-clear-all { font-size: 13px; font-weight: 600; color: var(--primary-color); text-decoration: none; transition: color 0.2s; } .filters-clear-all:hover { color: var(--primary-dark); text-decoration: underline; } .filter-group { border-bottom: 1px solid var(--border-color); } .filter-group:last-child { border-bottom: none; } .filter-group-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; background: none; border: none; cursor: pointer; color: var(--text-dark); font-size: 14px; font-weight: 600; font-family: var(--font-primary); text-align: left; } .filter-group-heading { display: inline-flex; align-items: center; gap: 8px; } .filter-selected-count { font-size: 12px; font-weight: 600; color: var(--primary-color); } .filter-group-toggle:hover { color: var(--primary-color); } .filter-chevron { transition: transform 0.25s ease; flex-shrink: 0; } .filter-group-toggle[aria-expanded="false"] .filter-chevron { transform: rotate(180deg); } .filter-group-body { padding-bottom: 12px; } .filter-group-body[hidden] { display: none; } .filter-cat-search, .filter-goal-search, .filter-brand-search { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; font-family: var(--font-primary); color: var(--text-dark); background: var(--bg-light); margin-bottom: 12px; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .filter-cat-search:focus, .filter-goal-search:focus, .filter-brand-search:focus { border-color: var(--primary-color); } .filter-options { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; } #category-filter-list { max-height: 220px; overflow-y: auto; } .filter-option { padding: 4px 0; } .filter-option label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text-dark); transition: color 0.2s; user-select: none; } .filter-option label:hover { color: var(--primary-color); } .filter-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-color); cursor: pointer; flex-shrink: 0; } .filter-option-row { display: flex; align-items: center; justify-content: space-between; } .filter-option-row label { flex: 1; } .filter-subcat-toggle { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted, #888); display: flex; align-items: center; border-radius: 4px; transition: color 0.2s, background 0.2s; flex-shrink: 0; } .filter-subcat-toggle:hover { color: var(--primary-color); } .filter-subcat-toggle svg { transition: transform 0.2s; } .filter-subcat-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .filter-subcats { list-style: none; margin: 0; padding: 0 0 0 26px; } .filter-subcats[hidden] { display: none; } .filter-option--child { padding: 3px 0; } .filter-price-range { padding: 4px 0 8px; } .filter-price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .filter-price-inputs input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; font-family: var(--font-primary); outline: none; } .filter-price-inputs input:focus { border-color: var(--primary-color); } .filter-price-inputs span { color: var(--text-light); font-size: 13px; flex-shrink: 0; } .btn-outline-sm { width: 100%; padding: 8px 16px; border: 2px solid var(--secondary-color); background: none; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: var(--font-primary); cursor: pointer; transition: all 0.2s; } .btn-outline-sm:hover { background: var(--secondary-color); color: white; } /* ----------------------------------------------------------------------- Shop Main Area ----------------------------------------------------------------------- */ .shop-main { min-width: 0; } .shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 12px 16px; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 10px; } .shop-toolbar p.woocommerce-result-count { font-size: 14px; color: var(--text-light); margin: 0; } .shop-sort { display: flex; align-items: center; gap: 8px; } .sort-label { font-size: 14px; color: var(--text-light); white-space: nowrap; } .shop-toolbar .woocommerce-ordering { margin: 0; padding: 0; } .shop-toolbar select.orderby { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; font-family: var(--font-primary); color: var(--text-dark); background: var(--bg-white); cursor: pointer; outline: none; } /* ----------------------------------------------------------------------- Search notice banner ----------------------------------------------------------------------- */ .shop-search-notice { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 10px 16px; background: #fff8e6; border: 1px solid #f5c842; border-radius: 8px; font-size: 14px; color: var(--text-dark); } .shop-search-notice svg { flex-shrink: 0; color: #c8960a; } .shop-search-notice strong { font-weight: 600; } .shop-search-notice__clear { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 10px; background: var(--bg-white); border: 1px solid #f5c842; border-radius: 6px; font-size: 13px; color: var(--text-dark); text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .shop-search-notice__clear:hover { background: #fef0c0; border-color: #c8960a; text-decoration: none; } /* ----------------------------------------------------------------------- Product Grid — WooCommerce ul.products override ----------------------------------------------------------------------- */ .shop-page ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; float: none !important; } /* Disable WooCommerce clearfix pseudo-elements; they create a phantom grid cell when ul.products is display:grid. */ .shop-page ul.products::before, .shop-page ul.products::after { content: none !important; display: none !important; } /* Reset WooCommerce default item sizing */ .shop-page ul.products li.product { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; clear: none !important; } /* ----------------------------------------------------------------------- Product Category Tiles — subcategory items within ul.products ----------------------------------------------------------------------- */ /* Force the first product card onto a fresh grid row so categories never share a row with products. */ .shop-page ul.products li.product-category + li:not(.product-category), ul.products li.product-category + li:not(.product-category) { grid-column-start: 1; margin-top: 12px; } /* Category tiles: compact horizontal layout, visually distinct from products. */ .shop-page ul.products li.product-category, ul.products li.product-category { height: 108px !important; background: var(--bg-light) !important; border-radius: 10px !important; border: 1px solid var(--border-color) !important; overflow: hidden !important; } /* Horizontal row layout: image left, title to the right. */ .shop-page ul.products li.product-category a, ul.products li.product-category a { display: grid !important; grid-template-columns: 84px minmax(0, 1fr) !important; align-items: center !important; column-gap: 12px !important; padding: 12px !important; text-decoration: none !important; color: var(--text-dark) !important; height: 100% !important; box-sizing: border-box !important; writing-mode: horizontal-tb !important; text-orientation: mixed !important; } .shop-page ul.products li.product-category img, ul.products li.product-category img { grid-column: 1 !important; width: 84px !important; min-width: 84px !important; max-width: 84px !important; height: 84px !important; min-height: 84px !important; max-height: 84px !important; object-fit: cover !important; border-radius: 0 !important; background: #eceff1 !important; justify-self: start !important; align-self: center !important; } /* Reset possible WooCommerce heading styles that can hide/clip category names. */ .shop-page ul.products li.product-category a h2.woocommerce-loop-category__title, ul.products li.product-category a h2.woocommerce-loop-category__title { grid-column: 2 !important; align-self: center !important; position: static !important; float: none !important; clear: none !important; width: auto !important; max-width: none !important; display: block !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; writing-mode: horizontal-tb !important; text-orientation: mixed !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; white-space: normal !important; text-indent: 0 !important; clip: auto !important; clip-path: none !important; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-break: normal; font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; padding: 0 !important; color: var(--text-dark) !important; line-height: 1.2 !important; text-align: left !important; min-height: 84px !important; max-height: 84px !important; display: grid !important; align-content: center !important; overflow: hidden !important; } .shop-page ul.products li.product-category a h2.woocommerce-loop-category__title .count, ul.products li.product-category a h2.woocommerce-loop-category__title .count { background-color: transparent !important; /* make text invisible */ color: transparent !important; display: inline !important; margin-left: 6px !important; font-size: 12px !important; font-weight: 500 !important; line-height: inherit !important; vertical-align: baseline !important; } /* ----------------------------------------------------------------------- Product Card — WooCommerce price HTML overrides ----------------------------------------------------------------------- */ .shop-page .product-info { display: flex; flex-direction: column; } .shop-page .product-price { margin-bottom: 12px; } /* Regular price */ .shop-page .product-price .woocommerce-Price-amount { font-size: 22px; font-weight: 800; color: var(--text-dark); } /* Original (strikethrough) price */ .shop-page .product-price del { font-size: 16px; margin-right: 4px; } .shop-page .product-price del .woocommerce-Price-amount { font-size: 16px; font-weight: 400; color: var(--text-light); } /* Sale price */ .shop-page .product-price ins { text-decoration: none; } .shop-page .product-price ins .woocommerce-Price-amount { font-size: 22px; font-weight: 800; color: var(--text-dark); } /* ----------------------------------------------------------------------- WooCommerce Add to Cart button override ----------------------------------------------------------------------- */ .shop-page ul.products li.product a.button, .shop-page ul.products li.product button.button { display: block !important; width: 100% !important; background: var(--secondary-color) !important; color: white !important; padding: 12px 20px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 700 !important; font-family: var(--font-primary) !important; text-align: center !important; text-decoration: none !important; border: none !important; cursor: pointer !important; transition: background 0.2s, transform 0.2s !important; box-sizing: border-box !important; line-height: 1.4 !important; } .shop-page ul.products li.product a.button:hover, .shop-page ul.products li.product button.button:hover { background: #1a1a2e !important; transform: translateY(-1px) !important; color: white !important; } /* ----------------------------------------------------------------------- WooCommerce Add to Cart button in product sliders (home page) ----------------------------------------------------------------------- */ .product-slider .product-card a.button, .product-slider .product-card button.button { display: block !important; width: 100% !important; background: var(--secondary-color) !important; color: white !important; padding: 12px 20px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 700 !important; font-family: var(--font-primary) !important; text-align: center !important; text-decoration: none !important; border: none !important; cursor: pointer !important; transition: background 0.2s, transform 0.2s !important; box-sizing: border-box !important; line-height: 1.4 !important; } .product-slider .product-card a.button:hover, .product-slider .product-card button.button:hover { background: #1a1a2e !important; transform: translateY(-1px) !important; color: white !important; } /* Hide "View basket" link on shop page */ .shop-page ul.products li.product a.added_to_cart.wc-forward { display: none !important; } /* Hide "View basket" link in sliders */ .product-slider .product-card a.added_to_cart.wc-forward { display: none !important; } /* Ensure checkmark icon shows on slider add-to-cart buttons after adding. Uses a plain Unicode tick so it renders on pages where woocommerce-general.css is dequeued (e.g. athlete / coach profile pages). */ .product-slider .product-card a.button.added::after { font-family: inherit !important; content: " ✓" !important; margin-left: 0 !important; vertical-align: middle !important; } /* Header cart pulse when an item is added. */ .site-header__icons .header-icon--cart.is-cart-pulse { animation: cartPulse 0.6s ease; } /* Floating thumbnail used by fly-to-cart animation. */ .fly-to-cart-item { position: fixed; z-index: 9999; pointer-events: none; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.65s ease; will-change: transform, opacity; } .fly-to-cart-item img { display: block; width: 100%; height: 100%; object-fit: cover; } @keyframes cartPulse { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Product image link wrapper */ .shop-page .product-image-link { display: block; text-decoration: none; } /* ----------------------------------------------------------------------- WooCommerce Pagination ----------------------------------------------------------------------- */ .shop-page nav.woocommerce-pagination { margin-top: 40px; text-align: center; } .shop-page nav.woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; margin: 0; } .shop-page nav.woocommerce-pagination ul li a, .shop-page nav.woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-dark); text-decoration: none; transition: all 0.2s; } .shop-page nav.woocommerce-pagination ul li a:hover { background: var(--primary-color); border-color: var(--primary-color); color: white; } .shop-page nav.woocommerce-pagination ul li span.current { background: var(--secondary-color); border-color: var(--secondary-color); color: white; } /* ----------------------------------------------------------------------- Responsive — Shop Page ----------------------------------------------------------------------- */ @media (max-width: 1024px) { .shop-layout { grid-template-columns: 200px 1fr; gap: 20px; } .shop-page ul.products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .shop-layout { grid-template-columns: 1fr; } .shop-page-header { min-height: 240px; padding: 40px 0 30px; } /* On tablet the image zone widens so the athlete stays visible */ .shop-page-header__img { left: 12%; } .shop-page-header__img::after { background: linear-gradient( to right, #1a1a2e 0%, #1a1a2e 8%, rgba(26,26,46,0.88) 20%, rgba(26,26,46,0.55) 36%, rgba(26,26,46,0.18) 52%, transparent 62%, rgba(26,26,46,0.22) 86%, rgba(26,26,46,0.55) 100% ); } .shop-mobile-filters-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-white); color: var(--text-dark); font-size: 14px; font-weight: 700; font-family: var(--font-primary); padding: 12px 14px; margin-bottom: 12px; cursor: pointer; } .shop-mobile-filters-count { min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--primary-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; } .shop-filters { position: static; display: none; margin-bottom: 16px; } .shop-filters.mobile-open { display: block; } .shop-page ul.products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .shop-page ul.products { grid-template-columns: 1fr !important; } .shop-page-title { font-size: 26px; } .shop-page-header { min-height: 180px; padding: 30px 0 20px; } /* On small screens drop the image — solid dark looks cleaner */ .shop-page-header__img, .shop-page-header__img::after { display: none; } .shop-toolbar { flex-direction: column; gap: 8px; align-items: flex-start; } } /* ======================================================================= Single Product Page ======================================================================= */ /* Single product page wrapper */ .single-product-page { padding: 0 0 60px; overflow-x: hidden; } /* Breadcrumb */ .single-product-page .woocommerce-breadcrumb, .single-product .woocommerce-breadcrumb { font-size: 13px; color: var(--text-light); margin-bottom: 24px; padding: 16px 0 0; text-transform: uppercase; letter-spacing: 0.5px; } .single-product-page .woocommerce-breadcrumb a, .single-product .woocommerce-breadcrumb a { color: var(--primary-color); text-decoration: none; font-weight: 600; } .single-product-page .woocommerce-breadcrumb a:hover, .single-product .woocommerce-breadcrumb a:hover { text-decoration: underline; } /* Two-column product layout */ .woocommerce div.product { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 48px !important; align-items: start !important; margin-bottom: 0 !important; } /* Sections below the two columns must span full width */ .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related.products, .woocommerce div.product .up-sells.products, .woocommerce div.product #reviews, .woocommerce div.product .sp-customer-reviews, .woocommerce div.product .woocommerce-notices-wrapper { grid-column: 1 / -1 !important; } /* Gallery — left column */ .woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; } .woocommerce div.product .woocommerce-product-gallery .flex-viewport{ margin-bottom: 10px; max-height: 480px; } .single-product .woocommerce-product-gallery__wrapper { margin-bottom: 12px; border-radius: 12px; overflow: hidden; background: var(--bg-light); } .single-product .woocommerce-product-gallery__image img { width: 100%; max-height: 480px; height: auto; object-fit: contain; display: block; } .single-product .flex-control-thumbs { display: flex !important; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .single-product .flex-control-thumbs li { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color 0.2s; } .single-product .flex-control-thumbs li.flex-active-slide, .single-product .flex-control-thumbs li:hover { border-color: var(--primary-color); } .single-product .flex-control-thumbs li img { width: 100%; height: 100%; object-fit: cover; } /* Summary — right column */ .woocommerce div.product .summary.entry-summary { width: 100% !important; float: none !important; padding-top: 8px; } /* Product title */ .single-product .product_title { font-size: 24px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--text-dark) !important; margin-bottom: 12px !important; } /* Rating */ .single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .single-product .woocommerce-product-rating .star-rating { font-size: 14px !important; color: var(--warning-color) !important; width: auto !important; } .single-product .woocommerce-product-rating .stars { font-size: 14px; color: var(--warning-color); } .single-product .woocommerce-product-rating .woocommerce-review-link { font-size: 13px; color: var(--text-light); text-decoration: none; } .single-product .woocommerce-product-rating .woocommerce-review-link:hover { color: var(--primary-color); } /* Short description */ .single-product .woocommerce-product-details__short-description { font-size: 14px; color: var(--text-light); font-style: italic; line-height: 1.6; margin-bottom: 16px; } /* Benefit tags inside short description */ .single-product .woocommerce-product-details__short-description .benefit-tags, .single-product .summary .sp-product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; font-style: normal; } .single-product .woocommerce-product-details__short-description .benefit-tag, .single-product .summary .sp-product-tags .benefit-tag { display: inline-block; padding: 5px 12px; background: #f1f1f1; border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--text-dark); font-style: normal; text-decoration: none; } /* Price */ .single-product .summary .price { font-size: 30px !important; font-weight: 800 !important; color: var(--text-dark) !important; margin-bottom: 20px !important; display: block; line-height: 1.2 !important; } .single-product .summary .price del { font-size: 18px; font-weight: 400; color: var(--text-light); } .single-product .summary .price ins { text-decoration: none; color: var(--primary-dark); } /* Variations */ .single-product .variations_form { margin-bottom: 0; } .single-product .variations { width: 100%; border: none !important; margin-bottom: 0 !important; } .single-product .variations tr { display: block; margin-bottom: 16px; } .single-product .variations .label { display: block; padding-bottom: 6px; } .single-product .variations .label label { font-size: 14px; font-weight: 700; color: var(--text-dark); } .single-product .variations .value { display: block; } .single-product .variations select { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; font-family: var(--font-primary); color: var(--text-dark); background: var(--bg-white); cursor: pointer; outline: none; } .single-product .variations select:focus { border-color: var(--primary-color); } /* Reset link */ .single-product .reset_variations { font-size: 12px; color: var(--text-light); text-decoration: none; display: block; margin-top: 4px; } /* Variation swatches (if plugin adds them as buttons) */ .single-product .variable-items-wrapper { display: flex; gap: 8px; flex-wrap: wrap; } .single-product .variable-item { padding: 8px 16px !important; border: 1px solid var(--border-color) !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; background: var(--bg-white) !important; color: var(--text-dark) !important; transition: all 0.2s !important; } .single-product .variable-item.selected, .single-product .variable-item:hover { border-color: var(--primary-color) !important; background: #fff3ee !important; color: var(--primary-color) !important; } /* Per-serving note */ .single-product .per-serving-note { font-size: 13px; color: var(--text-light); margin-bottom: 12px; } /* Quantity */ .single-product .cart { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .single-product .quantity { display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .single-product .quantity .qty-btn { width: 40px; height: 44px; background: var(--bg-white); border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dark); transition: background 0.2s; } .single-product .quantity .qty-btn:hover { background: var(--bg-light); } .single-product .quantity input.qty { width: 50px; height: 44px; border: none !important; border-left: 1px solid var(--border-color) !important; border-right: 1px solid var(--border-color) !important; text-align: center; font-size: 16px; font-weight: 600; font-family: var(--font-primary); outline: none; -moz-appearance: textfield; } .single-product .quantity input.qty::-webkit-outer-spin-button, .single-product .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Add to cart button */ /* Enhanced pulse animation with ring effect */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 10px 30px rgba(255, 122, 0, 0.4), 0 0 0 0 rgba(255, 122, 0, 0.4); } 50% { box-shadow: 0 10px 35px rgba(255, 122, 0, 0.55), 0 0 0 8px rgba(255, 122, 0, 0.15); } } .single-product .single_add_to_cart_button, .single-product button.single_add_to_cart_button { position: relative; flex: 1; min-width: 200px; background: linear-gradient(135deg, var(--primary-color) 0%, #ff8c42 100%) !important; color: white !important; padding: 14px 24px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 700 !important; font-family: var(--font-primary) !important; text-align: center !important; border: none !important; cursor: pointer !important; letter-spacing: 1px !important; text-transform: uppercase !important; height: 44px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(255, 122, 0, 0.4), 0 0 0 0 rgba(255, 122, 0, 0.4); animation: pulse-glow 2.5s ease-in-out infinite !important; transition: transform 0.2s ease !important; } .single-product .single_add_to_cart_button::before, .single-product button.single_add_to_cart_button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s ease; } .single-product .single_add_to_cart_button:hover, .single-product button.single_add_to_cart_button:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 15px 40px rgba(255, 122, 0, 0.5), 0 0 0 0 rgba(255, 122, 0, 0) !important; animation: none !important; } .single-product .single_add_to_cart_button:hover::before, .single-product button.single_add_to_cart_button:hover::before { left: 100%; } .single-product .single_add_to_cart_button.atc-added, .single-product button.single_add_to_cart_button.atc-added { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4), 0 0 0 0 rgba(34, 197, 94, 0.4) !important; animation: none !important; } /* Payment methods row */ .single-product .sp-payment-methods { display: flex; gap: 10px; margin-bottom: 12px; } .single-product .sp-payment-methods .pm-gpay { flex: 1; background: #000; color: white; border: none; border-radius: 6px; padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; } .single-product .sp-payment-methods .pm-paypal { flex: 1; background: #ffc439; color: #003087; border: none; border-radius: 6px; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; } /* Trust badges */ .single-product .sp-trust-badges { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .single-product .sp-trust-badge { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 999px; font-size: 13px; color: var(--text-dark); } .single-product .sp-trust-badge svg { flex-shrink: 0; color: var(--primary-color); } /* Product meta (SKU, categories) */ .single-product .product_meta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 13px; color: var(--text-light); overflow-wrap: break-word; word-break: break-word; } .single-product .product_meta a { color: var(--primary-color); text-decoration: none; } /* ----------------------------------------------------------------------- Product Tabs → Accordion ----------------------------------------------------------------------- */ .single-product .woocommerce-tabs { margin-top: 32px; clear: both; } .single-product .woocommerce-tabs ul.tabs.wc-tabs, .single-product-page .woocommerce-tabs ul.tabs.wc-tabs { display: none !important; } .single-product .woocommerce-tabs .panel[hidden], .single-product-page .woocommerce-tabs .panel[hidden] { display: none !important; } .single-product .woocommerce-tabs .panel, .single-product-page .woocommerce-tabs .panel { display: block !important; padding: 0 20px !important; font-size: 14px; line-height: 1.7; color: var(--text-dark); border-bottom: none; max-height: 0; overflow: hidden; opacity: 0; margin-bottom: 0px !important; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease, border 0.3s ease; } .single-product .woocommerce-tabs .panel.open, .single-product-page .woocommerce-tabs .panel.open { max-height: 2000px; opacity: 1; padding: 20px 20px !important; border-bottom: 1px solid var(--border-color); } /* Accordion trigger headers (injected by JS) */ .sp-accordion-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); cursor: pointer; user-select: none; transition: all 0.2s; margin: 0 -20px; border-radius: 8px; } .sp-accordion-header:hover .sp-accordion-label { color: var(--primary-color); } .sp-accordion-icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--primary-color); transition: color 0.2s; } .sp-accordion-label { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dark); transition: color 0.2s; } .sp-accordion-chevron { flex-shrink: 0; transition: transform 0.3s ease; color: var(--text-light); } .sp-accordion-header.open .sp-accordion-chevron { transform: rotate(180deg); } .sp-accordion-header.open .sp-accordion-label { color: var(--primary-color); } /* Orange background for any open tab */ .sp-accordion-header.open { background: linear-gradient(135deg, #FF7844 0%, #FF9060 100%); border-bottom: none; margin-bottom: 0; } .sp-accordion-header.open .sp-accordion-label, .sp-accordion-header.open .sp-accordion-icon, .sp-accordion-header.open .sp-accordion-chevron { color: #ffffff !important; } .sp-accordion-header.open:hover .sp-accordion-label { color: #ffffff !important; } /* Mobile margins for tabs */ @media (max-width: 768px) { .woocommerce-tabs.wc-tabs-wrapper { padding: 0px; } .sp-accordion-header { margin: 0; } .single-product .woocommerce-tabs .panel, .single-product-page .woocommerce-tabs .panel { padding: 0 !important; } .single-product .woocommerce-tabs .panel.open, .single-product-page .woocommerce-tabs .panel.open { padding: 20px 0 !important; } } /* ----------------------------------------------------------------------- Related Products ----------------------------------------------------------------------- */ .single-product .related.products { margin-top: 48px; clear: both; } .single-product .related.products > h2 { font-size: 26px; font-weight: 800; text-align: center; margin-bottom: 24px; color: var(--text-dark); } /* Override related products heading text via PHP hook */ .single-product .related.products ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; float: none !important; } .single-product .related.products ul.products::before, .single-product .related.products ul.products::after { content: none !important; display: none !important; } .single-product .related.products ul.products li.product { margin: 0 !important; width: auto !important; float: none !important; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: box-shadow 0.2s; } .single-product .related.products ul.products li.product:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .single-product .related.products ul.products li.product .woocommerce-loop-product__link img { width: 100%; height: 180px; object-fit: contain; padding: 12px; display: block; } .single-product .related.products ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; font-weight: 600 !important; padding: 0 14px 6px !important; color: var(--text-dark); line-height: 1.4; } .single-product .related.products ul.products li.product .star-rating { margin: 0 14px 6px !important; font-size: 12px !important; width: auto !important; } .single-product .related.products ul.products li.product .price { display: block; padding: 0 14px 10px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--text-dark) !important; } .single-product .related.products ul.products li.product .price del { font-size: 13px; font-weight: 400; color: var(--text-light) !important; margin-right: 4px; } .single-product .related.products ul.products li.product .price ins { text-decoration: none; } .single-product .related.products ul.products li.product a.button, .single-product .related.products ul.products li.product button.button { display: block !important; width: 100% !important; background: var(--secondary-color) !important; color: white !important; padding: 12px 20px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 700 !important; font-family: var(--font-primary) !important; text-align: center !important; border: none !important; cursor: pointer !important; text-decoration: none !important; transition: background 0.2s, transform 0.2s !important; box-sizing: border-box !important; line-height: 1.4 !important; } .single-product .related.products ul.products li.product a.button:hover, .single-product .related.products ul.products li.product button.button:hover { background: #1a1a2e !important; transform: translateY(-1px) !important; color: white !important; } /* Hide "View basket" link on related products */ .single-product .related.products ul.products li.product a.added_to_cart.wc-forward { display: none !important; } /* ----------------------------------------------------------------------- Customer Reviews Section (below related products) ----------------------------------------------------------------------- */ .sp-customer-reviews { margin-top: 48px; clear: both; grid-column: 1 / -1; } .sp-reviews-heading { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 20px; } .sp-reviews-summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 24px; background: var(--bg-white); } .sp-reviews-summary-left .sp-reviews-score { font-size: 20px; font-weight: 800; color: var(--text-dark); margin-bottom: 4px; } .sp-reviews-summary-left .star-rating { font-size: 16px !important; width: auto !important; margin-bottom: 4px; } .sp-reviews-count { font-size: 13px; color: var(--text-light); } /* Individual reviews (WooCommerce renders these as

inside #comments) */ .sp-customer-reviews #reviews #comments { margin-top: 24px; } .sp-customer-reviews #reviews #comments h2 { display: none; } .sp-customer-reviews #reviews .commentlist { list-style: none; padding: 0; margin: 0; } .sp-customer-reviews #reviews .commentlist .review { padding: 20px 0; border-bottom: 1px solid var(--border-color); } .sp-customer-reviews #reviews .commentlist .review:last-child { border-bottom: none; } .sp-customer-reviews #reviews .commentlist .review .star-rating { font-size: 14px !important; width: auto !important; margin-bottom: 8px; } .sp-customer-reviews #reviews .commentlist .review .comment_container img.avatar { display: none; } .sp-customer-reviews #reviews .commentlist .review .comment-text .meta { margin-bottom: 8px; } .sp-customer-reviews #reviews .commentlist .review .comment-text .meta strong.woocommerce-review__author { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-right: 8px; } .sp-customer-reviews #reviews .commentlist .review .comment-text .meta .woocommerce-review__verified { font-size: 12px; color: var(--success-color); font-weight: 600; } .sp-customer-reviews #reviews .commentlist .review .comment-text .meta time { display: block; font-size: 12px; color: var(--text-light); margin-top: 2px; } .sp-customer-reviews #reviews .commentlist .review .comment-text .description p { font-size: 14px; color: var(--text-dark); line-height: 1.7; margin: 0; } .sp-customer-reviews #reviews .commentlist .review .comment-text{ margin: 0px !important; border-top: none !important; border-left: none !important; border-right: none !important; } .sp-customer-reviews #reviews .commentlist .review .comment-text .meta time{ display: inline-block !important; margin-top: 0px !important; margin-left: 8px !important; } .sp-customer-reviews .star-rating{ float: none !important; } /* Review form */ .sp-customer-reviews #reviews #respond { margin-top: 32px; padding: 32px; background: #f5f5f5; border-radius: 12px; border: 1px solid #e5e5e5; } .sp-customer-reviews #reviews #respond #reply-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; } .sp-customer-reviews #reviews #respond .comment-form-rating { margin-bottom: 16px; } .sp-customer-reviews #reviews #respond p { margin-bottom: 14px; } .sp-customer-reviews #reviews #respond label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-dark); } .sp-customer-reviews #reviews #respond input[type="text"], .sp-customer-reviews #reviews #respond input[type="email"], .sp-customer-reviews #reviews #respond textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; font-family: var(--font-primary); color: var(--text-dark); outline: none; } .sp-customer-reviews #reviews #respond input:focus, .sp-customer-reviews #reviews #respond textarea:focus { border-color: var(--primary-color); } .sp-customer-reviews #reviews #respond .form-submit input[type="submit"] { background: var(--primary-color); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: var(--font-primary); cursor: pointer; transition: background 0.2s; } .sp-customer-reviews #reviews #respond .form-submit input[type="submit"]:hover { background: var(--primary-dark); } /* Keep legacy write-review-btn styles */ .write-review-btn { display: inline-block; padding: 10px 20px; background: var(--primary-color); color: white; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s; } .write-review-btn:hover { background: var(--primary-dark); color: white; } /* Comments/Reviews pagination */ .sp-customer-reviews .comments-pagination, .sp-customer-reviews #comments .navigation { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color); } .sp-customer-reviews .comments-pagination ul, .sp-customer-reviews #comments .navigation .page-numbers, .sp-customer-reviews ul.page-numbers { display: flex; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; background: none !important; } .sp-customer-reviews .comments-pagination li { margin: 0; } .woocommerce nav.woocommerce-pagination ul li{ border: none !important; } /* Target all pagination elements */ .sp-customer-reviews .comments-pagination a, .sp-customer-reviews .comments-pagination span, .sp-customer-reviews .page-numbers, .sp-customer-reviews #comments a.page-numbers, .sp-customer-reviews #comments span.page-numbers { display: inline-flex !important; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px !important; border: none !important; border-radius: 8px; background: #f5f5f5 !important; color: var(--text-dark) !important; text-decoration: none !important; font-size: 14px; font-weight: 500; transition: all 0.2s; margin: 0 !important; } .sp-customer-reviews .comments-pagination a:hover, .sp-customer-reviews .page-numbers:hover, .sp-customer-reviews #comments a.page-numbers:hover { /* background: #e8e8e8 !important; */ } .sp-customer-reviews .comments-pagination .current, .sp-customer-reviews .page-numbers.current, .sp-customer-reviews #comments span.page-numbers.current { background: var(--primary-color) !important; color: white !important; font-weight: 600; } .sp-customer-reviews .comments-pagination .dots, .sp-customer-reviews .page-numbers.dots, .sp-customer-reviews #comments .page-numbers.dots { background: transparent !important; pointer-events: none; min-width: auto; padding: 0 8px !important; } .sp-customer-reviews .comments-pagination .dots:hover, .sp-customer-reviews .page-numbers.dots:hover { background: transparent !important; } .sp-customer-reviews .comments-pagination .prev, .sp-customer-reviews .comments-pagination .next, .sp-customer-reviews .page-numbers.prev, .sp-customer-reviews .page-numbers.next, .sp-customer-reviews #comments a.prev.page-numbers, .sp-customer-reviews #comments a.next.page-numbers { font-weight: 500; padding: 0 16px !important; min-width: 50px; } .sp-customer-reviews .comments-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------- Responsive — Single Product ----------------------------------------------------------------------- */ @media (max-width: 900px) { .woocommerce div.product { grid-template-columns: 1fr !important; gap: 24px !important; } .single-product .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .single-product .related.products ul.products { grid-template-columns: 1fr !important; } .single-product .sp-payment-methods { flex-direction: column; } } /* ----------------------------------------------------------------------- Blog Listing Page ----------------------------------------------------------------------- */ .blog-listing-page { padding: 60px 0 80px; background: var(--bg-light); min-height: 60vh; } .blog-page-title { font-size: 42px; font-weight: 800; color: var(--text-dark); margin: 0 0 8px; } /* Category filter bar */ .blog-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; } .blog-filter-bar .filter-btn { padding: 8px 20px; border-radius: 25px; border: 1px solid var(--border-color); background: white; color: var(--text-dark); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.2s ease; white-space: nowrap; } .blog-filter-bar .filter-btn:hover { border-color: var(--primary-color); color: var(--primary-color); } .blog-filter-bar .filter-btn.active { background: var(--primary-color); border-color: var(--primary-color); color: white; font-weight: 600; } /* Blog grid — 3 columns on listing page */ .blog-listing-page .blog-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 50px; } /* No results */ .blog-no-results { grid-column: 1 / -1; text-align: center; color: var(--text-light); font-size: 16px; padding: 60px 0; } /* Pagination */ .blog-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .blog-pagination .page-numbers { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border-color); background: white; color: var(--text-dark); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1; transition: all 0.2s ease; display: inline-block; } .blog-pagination .page-numbers:hover { border-color: var(--primary-color); color: var(--primary-color); } .blog-pagination .page-numbers.current { background: var(--primary-color); border-color: var(--primary-color); color: white; font-weight: 600; } .blog-pagination .page-numbers.dots { border-color: transparent; background: transparent; cursor: default; } /* Responsive */ @media (max-width: 1024px) { .blog-listing-page .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .blog-listing-page .blog-grid { grid-template-columns: 1fr; } .blog-page-title { font-size: 30px; } .blog-filter-bar { gap: 8px; } .blog-filter-bar .filter-btn { font-size: 13px; padding: 7px 14px; } } /* ----------------------------------------------------------------------- Single Blog Post ----------------------------------------------------------------------- */ .blog-single { background: var(--bg-light); } /* Hero */ .blog-single-hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; background: var(--text-dark); overflow: hidden; } .blog-single-hero--no-image { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); min-height: 280px; } .blog-single-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .blog-single-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.30) 100%); } .blog-single-hero__inner { position: relative; z-index: 1; padding-top: 180px !important; width: 100%; text-align: center; } .blog-single-hero__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; justify-content: center; } .blog-single-hero__title { font-size: 48px; font-weight: 800; color: white; line-height: 1.15; margin: 0 auto 14px; max-width: 800px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } .blog-single-hero__date { color: rgba(255, 255, 255, 0.75); font-size: 15px; margin: 0; } /* Body */ .blog-single-body { padding: 60px 20px 80px; max-width: 820px; } .blog-single-intro { font-size: 20px; line-height: 1.7; color: var(--text-dark); font-weight: 500; border-left: 4px solid var(--primary-color); padding-left: 20px; margin: 0 0 40px; } .blog-single-content { font-size: 16px; line-height: 1.8; color: var(--text-dark); /* Prevent any inherited multi-column layout from block/parent theme styles */ column-count: 1 !important; column-width: auto !important; columns: unset !important; } .blog-single-content *, .blog-single-content p, .blog-single-content div { column-count: unset !important; column-width: unset !important; columns: unset !important; } .blog-single-content h2 { font-size: 28px; font-weight: 700; margin: 40px 0 16px; color: var(--text-dark); } .blog-single-content h3 { font-size: 22px; font-weight: 700; margin: 32px 0 12px; color: var(--text-dark); } .blog-single-content p { margin-bottom: 20px; } .blog-single-content ul, .blog-single-content ol { padding-left: 24px; margin-bottom: 20px; } .blog-single-content li { margin-bottom: 8px; } .blog-single-content img { max-width: 100%; border-radius: 8px; margin: 20px 0; } .blog-single-content a { color: var(--primary-color); text-decoration: underline; } .blog-single-back { display: inline-block; margin-top: 48px; color: var(--primary-color); font-weight: 600; font-size: 15px; text-decoration: none; transition: opacity 0.2s; } .blog-single-back:hover { opacity: 0.75; } /* Responsive */ @media (max-width: 768px) { .blog-single-hero { min-height: 360px; } .blog-single-hero__title { font-size: 32px; } .blog-single-intro { font-size: 17px; } .blog-single-body { padding: 40px 20px 60px; } } @media (max-width: 480px) { .blog-single-hero__title { font-size: 26px; } } /* Blog breadcrumb */ .blog-breadcrumb { background: var(--bg-light); border-bottom: 1px solid var(--border-color); padding: 12px 0; } .blog-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; } .blog-breadcrumb__item { display: flex; align-items: center; } .blog-breadcrumb__item:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--text-light); } .blog-breadcrumb__item a { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: opacity 0.2s; } .blog-breadcrumb__item a:hover { opacity: 0.75; } .blog-breadcrumb__item--current { color: var(--text-dark); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } /* Related blogs */ .blog-related { background: var(--bg-light); padding: 60px 0 80px; border-top: 1px solid var(--border-color); } .blog-related__title { font-size: 32px; font-weight: 800; color: var(--text-dark); margin: 0 0 32px; } .blog-related .blog-grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .blog-related .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .blog-related .blog-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .blog-related { padding: 40px 0 60px; } .blog-related__title { font-size: 26px; } } /* ======================================================================= 404 Page ======================================================================= */ .page-404-main { background: var(--bg-white); } /* Hero section */ .page-404-hero { background: var(--secondary-color); padding: 80px 0 100px; text-align: center; position: relative; overflow: hidden; } .page-404-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(255, 107, 53, 0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 70% at 80% 50%, rgba(255, 107, 53, 0.06) 0%, transparent 70%); pointer-events: none; } .page-404-container { position: relative; z-index: 1; } .page-404-number { font-size: clamp(140px, 20vw, 220px); font-weight: 900; line-height: 1; color: rgba(255, 107, 53, 0.12); letter-spacing: -8px; margin-bottom: -20px; user-select: none; } .page-404-title { font-size: clamp(28px, 4vw, 48px); font-weight: 800; color: #ffffff; margin-bottom: 20px; line-height: 1.2; } .page-404-title span { color: var(--primary-color); } .page-404-subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.65); max-width: 540px; margin: 0 auto 40px; line-height: 1.7; } .page-404-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .page-404-btn { font-size: 15px; padding: 14px 32px; letter-spacing: 0.3px; } .page-404-btn-outline { display: inline-block; padding: 14px 32px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.35); color: #ffffff; font-weight: 600; font-size: 15px; text-decoration: none; transition: all 0.3s; letter-spacing: 0.3px; } .page-404-btn-outline:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(255, 107, 53, 0.08); } /* Pillar cards */ .page-404-pillars { padding: 64px 0 80px; background: var(--bg-light); } .page-404-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .page-404-pillar { background: var(--bg-white); border-radius: 16px; padding: 36px 28px; text-align: center; border: 1px solid var(--border-color); transition: box-shadow 0.3s, transform 0.3s; } .page-404-pillar:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); transform: translateY(-4px); } .page-404-pillar-icon { font-size: 40px; display: block; margin-bottom: 16px; line-height: 1; } .page-404-pillar h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; } .page-404-pillar p { font-size: 14px; color: var(--text-light); line-height: 1.6; margin: 0; } /* Responsive */ @media (max-width: 768px) { .page-404-hero { padding: 60px 0 80px; } .page-404-number { font-size: 120px; } .page-404-pillars-grid { grid-template-columns: 1fr; gap: 20px; } .page-404-actions { flex-direction: column; align-items: center; } .page-404-btn, .page-404-btn-outline { width: 100%; max-width: 320px; text-align: center; } } /* ========================================================== About Page ========================================================== */ /* Two-column layout: collage | text */ .about-content-grid { display: grid; grid-template-columns: 400px 1fr; gap: 64px; align-items: start; } /* ---- Rich-text column ---- */ .about-text { font-size: 16px; line-height: 1.9; color: var(--text-dark); } .about-text h2 { font-size: 26px; font-weight: 700; margin: 28px 0 14px; color: var(--text-dark); } .about-text h3 { font-size: 20px; font-weight: 600; margin: 22px 0 10px; color: var(--text-dark); } .about-text p { margin-bottom: 16px; } .about-text ul { list-style: none; padding: 0; margin: 0 0 20px; } .about-text ul li { position: relative; padding: 5px 0 5px 26px; font-size: 15px; line-height: 1.7; } .about-text ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 10px; height: 10px; background: var(--primary-color); border-radius: 50%; } /* ---- Collage column: organic vertical stack ---- */ .about-gallery-collage { display: flex; flex-direction: column; padding-bottom: 80px; /* room for last frame's shadow */ } /* Base frame – GSAP owns opacity & rotation */ .collage-frame { position: relative; background: #fff; padding: 8px; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); overflow: hidden; opacity: 0; margin-bottom: -40px; /* subtle overlap – images remain clearly visible */ flex-shrink: 0; } .collage-frame:last-child { margin-bottom: 0; } .collage-frame img { display: block; width: 100%; object-fit: cover; border-radius: 8px; } /* ---------------------------------------------------------------- Per-frame pattern: 4-cycle via nth-child so any number of images get an organic left/right cascade without fixed class names. z-index is set inline by PHP (descending) so frame 1 is always visually on top. ---------------------------------------------------------------- */ /* 1 – wide, left-anchored, tall */ .collage-frame:nth-child(4n+1) { width: 88%; margin-left: 0%; } .collage-frame:nth-child(4n+1) img { height: 210px; } /* 2 – narrower, pushed right, shorter */ .collage-frame:nth-child(4n+2) { width: 68%; margin-left: 24%; box-shadow: 0 14px 45px rgba(0, 0, 0, 0.2); } .collage-frame:nth-child(4n+2) img { height: 175px; } /* 3 – medium-wide, slight left indent */ .collage-frame:nth-child(4n+3) { width: 80%; margin-left: 6%; } .collage-frame:nth-child(4n+3) img { height: 195px; } /* 4 – compact, right-centre offset */ .collage-frame:nth-child(4n+4) { width: 64%; margin-left: 18%; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22); } .collage-frame:nth-child(4n+4) img { height: 162px; } /* ---- Responsive ---- */ @media (max-width: 1100px) { .about-content-grid { grid-template-columns: 340px 1fr; gap: 48px; } } @media (max-width: 860px) { .about-content-grid { grid-template-columns: 1fr; gap: 0; } /* On mobile show as a 2-column grid – no horizontal scroll needed */ .about-gallery-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex-direction: unset; padding-bottom: 0; } .collage-frame { width: 100% !important; margin-bottom: 0 !important; margin-left: 0 !important; } .collage-frame img { height: 160px !important; } .about-gallery-col { order: 2; margin-top: 40px; margin-bottom: 0; } .about-text-col { order: 1; } } @media (max-width: 480px) { .collage-frame { padding: 5px; border-radius: 10px; } .collage-frame img { height: 130px !important; } } /* ─── WooCommerce Tab Panel Tables ───────────────────────────────────────────── */ .woocommerce-tabs .wc-tab { font-size: 0.9rem; color: var(--text-dark); overflow-wrap: break-word; word-break: break-word; } /* Constrain all media inside tab panels */ .woocommerce-tabs .wc-tab img, .woocommerce-tabs .wc-tab video, .woocommerce-tabs .wc-tab iframe { max-width: 100% !important; height: auto; } /* Scrollable wrapper for wide tables */ .woocommerce-tabs .wc-tab .woocommerce-product-attributes, .woocommerce-tabs .wc-tab table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .woocommerce-tabs .wc-tab table { min-width: 280px; border-collapse: collapse; margin-bottom: 1rem; background: var(--bg-white); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .woocommerce-tabs .wc-tab thead tr { background: var(--secondary-color); color: #fff; } .woocommerce-tabs .wc-tab thead th { padding: 10px 14px; text-align: left; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .woocommerce-tabs .wc-tab tbody tr:nth-child(even) { background: var(--bg-light); } .woocommerce-tabs .wc-tab tbody td { padding: 10px 14px; vertical-align: top; border-bottom: 1px solid var(--border-color); line-height: 1.8; } .woocommerce-tabs .wc-tab tbody tr:last-child td { border-bottom: none; } .woocommerce-tabs .wc-tab tbody td:first-child { font-weight: 500; } .woocommerce-tabs .wc-tab p { margin-top: 0.5rem; color: var(--text-light); font-size: 0.82rem; line-height: 1.6; } .wc-block-components-express-payment__event-buttons{ display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px; align-items: stretch; list-style: none; padding: 0; margin: 0; } .wc-block-components-express-payment__event-buttons > li { min-width: 0; } .wc-block-components-express-payment__event-buttons > li > div, .wc-block-components-express-payment__event-buttons > li > div > div { width: 100%; height: 100%; } /* Afterpay button fill */ .btn-afterpay_express { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* Google Pay button fill */ #ppc-button-googlepay-container { width: 100% !important; } @media (max-width: 600px) { .wc-block-components-express-payment__event-buttons { grid-template-columns: 1fr !important; } } /* ======================================================================= FAQ Page ======================================================================= */ .faq-listing-page { background: var(--bg-white); padding: 80px 0 100px; } .faq-accordion { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: white; transition: box-shadow 0.2s ease; } .faq-item:has(.faq-question[aria-expanded="true"]) { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border-color: var(--primary-color); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: none; border: none; cursor: pointer; text-align: left; color: var(--text-dark); font-size: 17px; font-weight: 700; line-height: 1.4; transition: color 0.2s ease; } .faq-question:hover, .faq-question[aria-expanded="true"] { color: var(--primary-color); } .faq-question__icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; position: relative; transition: transform 0.3s ease, background-color 0.2s ease; } /* Plus icon via pseudo-elements */ .faq-question__icon::before, .faq-question__icon::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease, opacity 0.3s ease; } .faq-question__icon::before { width: 10px; height: 2px; } .faq-question__icon::after { width: 2px; height: 10px; } /* Rotate to X when open */ .faq-question[aria-expanded="true"] .faq-question__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; } .faq-answer:not([hidden]) { max-height: 2000px; } .faq-answer[hidden] { display: block !important; /* keep in DOM for animation */ max-height: 0; visibility: hidden; } .faq-answer__inner { padding: 0 24px 22px; color: var(--text-light); font-size: 15px; line-height: 1.8; } .faq-answer__inner p:last-child { margin-bottom: 0; } .faq-no-results { text-align: center; color: var(--text-light); font-size: 16px; padding: 60px 0; } @media (max-width: 768px) { .faq-listing-page { padding: 50px 0 70px; } .faq-question { font-size: 15px; padding: 18px 20px; } .faq-answer__inner { padding: 0 20px 18px; } } /* ----------------------------------------------------------------------- Single Product — Nutrition CTA Banner ----------------------------------------------------------------------- */ .sp-nutrition-cta { display: flex; align-items: center; gap: 20px; margin: 28px 0 8px; padding: 20px 28px; background: linear-gradient(135deg, #1a2744 0%, #2d3142 100%); border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); grid-column: 1 / -1; } .sp-nutrition-cta__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--primary-color); border-radius: 50%; color: #fff; } .sp-nutrition-cta__body { display: flex; flex-direction: column; gap: 6px; } .sp-nutrition-cta__text { margin: 0; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.9); line-height: 1.4; } .sp-nutrition-cta__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--primary-color); text-decoration: none; letter-spacing: 0.02em; text-transform: uppercase; transition: gap 0.2s ease, opacity 0.2s ease; } .sp-nutrition-cta__link:hover { gap: 10px; opacity: 0.85; text-decoration: none; color: var(--primary-color); } /* Ensure it spans full width inside WooCommerce's product grid */ .woocommerce div.product .sp-nutrition-cta { grid-column: 1 / -1 !important; } @media (max-width: 600px) { .sp-nutrition-cta { flex-direction: column; align-items: flex-start; padding: 18px 20px; } }