/* Theme Name: Soura Child Theme URI: https://tejasharia.com Description: Child theme for Soura By Sonu G — Bridal Boutique, Indiranagar Bengaluru Author: Sonu Gowda Author URI: https://tejasharia.com Template: astra Version: 1.1.4 License: GNU General Public License v2 or later Text Domain: soura-child */ /* ============================================================ ALL SOURA WEBSITE STYLES Extracted from soura-website-v3.html + WooCommerce overrides ============================================================ */ /* ===== ROOT VARS ===== */ :root { --primary: #20433c; --primary-light: #2a5a51; --primary-dark: #162e29; --secondary: #e9b337; --secondary-light: #f0c55a; --secondary-dark: #c99520; --bg: #faf8f4; --bg-warm: #f5f0e8; --text-dark: #1a1a1a; --text-mid: #4a4a4a; --text-light: #888; --border: rgba(32,67,60,0.15); --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', sans-serif; --font-brand: 'Bodoni Moda', 'Bodoni 72', 'Didot', 'Book Antiqua', Georgia, serif; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family: var(--font-body); background: var(--bg); color: var(--text-dark); font-size:15px; line-height:1.6; } /* ===== NAVIGATION ===== */ /* overflow:visible is REQUIRED — overflow:hidden clips dropdown sub-menus */ /* z-index:500 ensures nav sits above the sticky page-nav (z-index:150) */ nav { background: var(--primary); display:flex; align-items:center; justify-content:space-between; padding: 0 32px 0 24px; height: 72px; position:sticky; top:0; z-index:500; overflow:visible; } /* CHANGE 1 — brand logo area */ .nav-logo { display:flex; align-items:center; gap:12px; cursor:pointer; text-decoration:none; flex-shrink:0; height:100%; } /* Logo image — hard-constrained to nav height so it never overflows */ .nav-logo-img { height: 52px !important; /* fits inside 72px nav with 10px breathing room top+bottom */ max-height: 52px !important; width: auto !important; max-width: 160px !important; /* prevents very wide logos from eating nav space */ display: block !important; object-fit: contain !important; object-position: left center !important; flex-shrink: 0; } /* SVG placeholder shown until real logo is uploaded */ .nav-logo-placeholder { height:48px; width:48px; border-radius:50%; background:rgba(233,179,55,0.15); border:1.5px solid rgba(233,179,55,0.35); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .nav-logo-placeholder svg { width:28px; height:28px; } .nav-logo-text { display:flex; flex-direction:column; line-height:1.1; } .nav-logo-text strong { font-family:var(--font-brand); color:var(--secondary); font-size:22px; font-weight:700; letter-spacing:0.04em; } .nav-logo-text span { font-family:var(--font-brand); color:rgba(233,179,55,0.65); font-size:12px; font-weight:400; font-style:italic; letter-spacing:0.1em; } /* Nav links — vertically centered via flex on the nav itself */ /* overflow:visible is critical — any overflow:hidden here clips sub-menus */ .nav-links { display:flex; gap:28px; list-style:none; align-items:center; height:100%; overflow:visible; } .nav-links > li { display:flex; align-items:center; height:100%; position:relative; } /* FIX #01 — nav links now use data-section for smooth scroll */ .nav-links a { font-family:var(--font-brand); color: rgba(255,255,255,0.82); text-decoration:none; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; transition:color 0.2s; cursor:pointer; font-weight:400; display:flex; align-items:center; height:100%; } .nav-links a:hover { color: var(--secondary); } .nav-right { display:flex; gap:12px; align-items:center; height:100%; } /* FIX #12 — custom dropdown arrows restored */ .btn-outline { border: 1px solid rgba(233,179,55,0.5); color: var(--secondary); background:transparent; padding:8px 20px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; } .btn-outline:hover { background: var(--secondary); color: var(--primary); } .btn-solid { background: var(--secondary); color: var(--primary); border:none; padding:8px 20px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:var(--font-body); font-weight:600; transition:all 0.2s; } .btn-solid:hover { background: var(--secondary-dark); } /* ===== PAGE NAV ===== */ /* z-index:100 — must stay BELOW nav (z-index:500) so sub-menus drop over it */ /* overflow:visible on desktop so nothing clips; scroll only on mobile */ .page-nav { display:none !important; } /* Removed — was overlapping sub-menus */ /* Only allow horizontal scroll on mobile — no scrollbar on desktop */ @media(max-width:900px){ .page-nav { overflow-x:auto; padding:0 16px; scrollbar-width:none; } .page-nav::-webkit-scrollbar { display:none; } } .pnav-item { font-family:var(--font-brand); padding:16px 20px; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-light); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all 0.2s; font-weight:400; } .pnav-item.active, .pnav-item:hover { color:var(--primary); border-bottom-color:var(--primary); } /* ===== PAGE SECTIONS (hidden/shown by page-nav) ===== */ .page-section { display:none; } .page-section.active { display:block; } /* ===== HERO ===== */ .hero { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #2f5e55 100%); min-height: 88vh; display:flex; align-items:center; padding: 0 80px; position:relative; overflow:hidden; } .hero::before { content:''; position:absolute; top:-60px; right:-60px; width:480px; height:480px; border:1px solid rgba(233,179,55,0.15); border-radius:50%; pointer-events:none; } .hero::after { content:''; position:absolute; top:-20px; right:-20px; width:360px; height:360px; border:1px solid rgba(233,179,55,0.08); border-radius:50%; pointer-events:none; } .hero-content { max-width:600px; z-index:1; } .hero-eyebrow { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--secondary); margin-bottom:20px; } .hero-title { font-family: var(--font-display); color:#fff; font-size:72px; line-height:1.05; font-weight:300; margin-bottom:24px; } .hero-title em { font-style:italic; color:var(--secondary); } .hero-sub { color:rgba(255,255,255,0.68); font-size:15px; margin-bottom:40px; max-width:440px; line-height:1.7; } .hero-cta { display:flex; gap:16px; flex-wrap:wrap; } /* FIX #25 — badge moved to responsive position */ .hero-badge { position:absolute; right:80px; top:50%; transform:translateY(-50%); text-align:center; } @media(max-width:900px){ .hero-badge { display:none; } } .badge-ring { width:140px; height:140px; border:1px solid rgba(233,179,55,0.3); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(233,179,55,0.06); } .badge-ring strong { font-family:var(--font-display); font-size:28px; color:var(--secondary); } .badge-ring span { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.5); } /* ===== SECTION COMMON ===== */ section { padding: 80px; } .section-label { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--secondary); margin-bottom:12px; display:block; } .section-title { font-family:var(--font-display); font-size:48px; font-weight:300; line-height:1.1; margin-bottom:16px; color:var(--primary); } .section-title em { font-style:italic; } .section-sub { color:var(--text-mid); max-width:520px; line-height:1.8; } .divider { width:48px; height:2px; background:var(--secondary); margin: 20px 0; } /* ===== MARQUEE ===== */ .marquee-strip { background:var(--secondary); padding:12px 0; overflow:hidden; white-space:nowrap; } .marquee-inner { display:inline-block; animation: marquee 22s linear infinite; } .marquee-inner span { font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--primary); font-weight:600; margin: 0 40px; } @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ===== COLLECTIONS GRID ===== */ .collections { background:var(--bg-warm); } .col-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:3px; margin-top:48px; } .col-card { background:var(--primary); aspect-ratio:3/4; position:relative; overflow:hidden; cursor:pointer; transition:transform 0.25s; } .col-card:hover { transform:scale(1.01); z-index:1; } .col-card:first-child { grid-row: span 2; aspect-ratio:auto; } .col-card-body { position:absolute; bottom:0; left:0; right:0; padding:24px; background:linear-gradient(to top, rgba(0,0,0,0.72), transparent); } .col-card-body h3 { font-family:var(--font-display); color:#fff; font-size:22px; font-weight:300; } .col-card-body p { font-size:12px; color:rgba(255,255,255,0.6); letter-spacing:0.08em; text-transform:uppercase; margin-top:4px; } .col-card-thumb { width:100%; height:100%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:64px; color:rgba(233,179,55,0.2); } /* ===== ABOUT STRIP ===== */ .about-strip { display:flex; background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .about-left { flex:0 0 44%; background:var(--primary); padding:72px 56px; } .about-right { flex:1; padding:72px 56px; } .about-left .section-title { color:#fff; } .about-left .section-sub { color:rgba(255,255,255,0.65); max-width:380px; } .about-left .divider { background:var(--secondary); } .award-list { list-style:none; margin-top:40px; display:flex; flex-direction:column; gap:12px; } .award-list li { display:flex; align-items:center; gap:12px; } .award-dot { width:6px; height:6px; border-radius:50%; background:var(--secondary); flex-shrink:0; } .award-list li span { font-size:13px; color:rgba(255,255,255,0.75); } .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:40px; } .stat-item strong { font-family:var(--font-display); font-size:52px; font-weight:300; color:var(--primary); line-height:1; } .stat-item p { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-light); margin-top:6px; } .cred-tag { display:inline-block; border:1px solid var(--border); color:var(--primary); font-size:12px; letter-spacing:0.06em; padding:6px 14px; margin:4px; border-radius:2px; } /* ===== SERVICES ===== */ .services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; } .svc-card { border:1px solid var(--border); padding:32px 28px; background:#fff; transition:all 0.25s; cursor:default; } .svc-card:hover { border-color:var(--secondary); transform:translateY(-4px); box-shadow: 0 12px 40px rgba(32,67,60,0.08); } .svc-icon { width:48px; height:48px; border-radius:50%; background:var(--bg-warm); display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:22px; } .svc-card h3 { font-family:var(--font-display); font-size:22px; font-weight:400; color:var(--primary); margin-bottom:10px; } .svc-card p { font-size:13px; color:var(--text-mid); line-height:1.7; } /* ===== CATEGORIES — FIX #02 + #09: JS tab switching ===== */ .cat-section { background:var(--primary); } .cat-section .section-title { color:#fff; } .cat-section .section-label { color:var(--secondary); } .cat-section .section-sub { color:rgba(255,255,255,0.55); } .cat-section .divider { background:var(--secondary); } .cat-tabs { display:flex; gap:2px; margin-top:48px; } .cat-tab { flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); padding:18px 16px; text-align:center; cursor:pointer; transition:all 0.2s; } .cat-tab.active, .cat-tab:hover { background:var(--secondary); border-color:var(--secondary); } .cat-tab h4 { font-family:var(--font-display); font-size:20px; color:#fff; font-weight:300; margin-bottom:4px; } .cat-tab.active h4, .cat-tab:hover h4 { color:var(--primary); } .cat-tab p { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); } .cat-tab.active p, .cat-tab:hover p { color:rgba(32,67,60,0.7); } .cat-sub-panel { display:none; } .cat-sub-panel.active { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .cat-sub-chip { padding:8px 18px; border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.7); font-size:12px; letter-spacing:0.08em; cursor:pointer; transition:all 0.2s; border-radius:2px; } .cat-sub-chip:hover, .cat-sub-chip.active { border-color:var(--secondary); color:var(--secondary); background:rgba(233,179,55,0.08); } .rental-badge { display:inline-block; margin-left:8px; background:rgba(233,179,55,0.2); color:var(--secondary); font-size:10px; padding:2px 8px; border-radius:2px; } /* ===== SHOP / FILTERS — FIX #08, #11, #12, #18 ===== */ .shop-section { background:var(--bg-warm); } .filter-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--border); } .filter-label { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-light); } /* FIX #12 — wrapper with arrow */ .select-wrap { position:relative; display:inline-block; } .select-wrap::after { content:'▾'; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--primary); pointer-events:none; } .filter-select { border:1px solid var(--border); background:#fff; padding:8px 28px 8px 12px; font-size:13px; color:var(--text-dark); font-family:var(--font-body); appearance:none; cursor:pointer; outline:none; } .filter-select:focus { border-color:var(--primary); } /* FIX #08 — active tag dismissal */ .active-filter { display:inline-flex; align-items:center; gap:6px; background:rgba(32,67,60,0.08); border:1px solid rgba(32,67,60,0.2); color:var(--primary); font-size:12px; padding:5px 12px; border-radius:2px; } .active-filter .x { cursor:pointer; opacity:0.5; font-size:14px; line-height:1; } .active-filter .x:hover { opacity:1; color:red; } #active-tags { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .product-card { background:#fff; border:1px solid var(--border); overflow:hidden; cursor:pointer; transition:box-shadow 0.2s; } .product-card:hover { box-shadow:0 8px 32px rgba(32,67,60,0.1); } .product-thumb { background:var(--bg-warm); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:56px; color:rgba(32,67,60,0.15); position:relative; } .product-badge { position:absolute; top:12px; left:12px; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:4px 10px; } .badge-new { background:var(--primary); color:#fff; } .badge-rent { background:var(--secondary); color:var(--primary); font-weight:600; } .badge-custom { background:var(--bg-warm); color:var(--primary); border:1px solid var(--border); } .badge-oos { background:#888; color:#fff; } .product-info { padding:16px; } .product-info h4 { font-family:var(--font-display); font-size:18px; font-weight:400; color:var(--primary); } .product-info .price { font-size:14px; color:var(--text-mid); margin-top:4px; } .product-info .price strong { color:var(--primary); font-weight:600; } .product-actions { display:flex; gap:8px; margin-top:12px; } .btn-cart { flex:1; background:var(--primary); color:#fff; border:none; padding:9px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; font-family:var(--font-body); transition:background 0.2s; } .btn-cart:hover { background:var(--primary-light); } /* FIX #11 — wishlist toggle */ .btn-wish { width:36px; height:36px; border:1px solid var(--border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-light); font-size:16px; transition:all 0.2s; } .btn-wish.wishlisted { color:#e33; border-color:#e33; background:#fff5f5; } .load-more-wrap { text-align:center; margin-top:40px; } .video-tip { font-size:13px; color:var(--text-light); margin-bottom:14px; } .video-tip a { color:var(--primary); font-weight:500; text-decoration:none; } .video-tip a:hover { text-decoration:underline; } /* ===== MEASURE CTA ===== */ /* FIX #07 — button scrolls to measurement form */ .measure-cta { background:var(--secondary); padding:56px 80px; display:flex; justify-content:space-between; align-items:center; gap:24px; } .measure-cta h2 { font-family:var(--font-display); font-size:40px; font-weight:300; color:var(--primary); } .measure-cta p { color:rgba(32,67,60,0.7); margin-top:8px; max-width:400px; } .btn-dark { background:var(--primary); color:#fff; border:none; padding:14px 36px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; font-family:var(--font-body); font-weight:600; white-space:nowrap; transition:background 0.2s; } .btn-dark:hover { background:var(--primary-light); } /* ===== VIRTUAL TRY-ON ===== */ .tryon { background:#fff; border-top:1px solid var(--border); } .tryon-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-top:48px; } .tryon-visual { background:var(--bg-warm); border:1px solid var(--border); aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; position:relative; min-height:300px; } .tryon-visual-label { font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-light); } .tryon-preview-icon { font-size:80px; opacity:0.2; transition:opacity 0.3s; } .tryon-visual .tryon-btns { position:absolute; bottom:16px; left:16px; right:16px; display:flex; gap:8px; } .tryon-steps { list-style:none; display:flex; flex-direction:column; gap:24px; margin-top:32px; } .tryon-step { display:flex; gap:20px; align-items:flex-start; } .step-num { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:18px; color:var(--primary); flex-shrink:0; } .step-body h4 { font-size:15px; font-weight:500; color:var(--primary); } .step-body p { font-size:13px; color:var(--text-mid); margin-top:3px; } /* FIX #19 — try-on feedback states */ .tryon-status { position:absolute; top:12px; right:12px; font-size:11px; padding:4px 10px; border-radius:2px; display:none; } .tryon-status.show { display:block; } .tryon-status.ok { background:rgba(32,67,60,0.1); color:var(--primary); } /* ===== AWARDS ===== */ .awards { background:var(--bg-warm); } /* FIX #20 — styled scrollbar */ .awards-scroll { display:flex; gap:24px; margin-top:48px; overflow-x:auto; padding-bottom:12px; scroll-snap-type:x mandatory; } .awards-scroll::-webkit-scrollbar { height:4px; } .awards-scroll::-webkit-scrollbar-track { background:var(--border); border-radius:2px; } .awards-scroll::-webkit-scrollbar-thumb { background:var(--secondary); border-radius:2px; } .award-card { flex:0 0 260px; background:#fff; border:1px solid var(--border); padding:32px 24px; text-align:center; scroll-snap-align:start; } .award-card .star { font-size:28px; margin-bottom:16px; } .award-card h4 { font-family:var(--font-display); font-size:18px; font-weight:400; color:var(--primary); margin-bottom:8px; } .award-card p { font-size:12px; color:var(--text-light); line-height:1.6; } /* ===== GALLERY — FIX #16 ===== */ .gallery-section { background:var(--primary); padding:80px 0; } .gallery-section .section-title { color:#fff; padding:0 80px; } .gallery-section .section-label { color:var(--secondary); padding:0 80px; display:block; } .gallery-section .divider { margin:20px 80px; } .gallery-tabs { display:flex; gap:2px; margin:0 80px 0; } .gallery-tab { padding:10px 20px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.5); transition:all 0.2s; } .gallery-tab.active, .gallery-tab:hover { background:var(--secondary); color:var(--primary); border-color:var(--secondary); font-weight:600; } .gallery-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin-top:24px; } .gallery-cell { background:rgba(255,255,255,0.04); aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:40px; color:rgba(233,179,55,0.15); cursor:pointer; transition:all 0.25s; position:relative; overflow:hidden; } .gallery-cell:hover { background:rgba(233,179,55,0.1); } .gallery-cell:hover::after { content:'🔍'; position:absolute; font-size:20px; } /* FIX #16 — real file inputs wired to upload zones */ .gallery-upload { margin:40px 80px 0; display:flex; gap:16px; } .upload-zone { flex:1; border:1px dashed rgba(255,255,255,0.2); padding:28px; text-align:center; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; } .upload-zone:hover { border-color:var(--secondary); background:rgba(233,179,55,0.04); } .upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; } .upload-zone strong { font-family:var(--font-display); font-size:20px; color:rgba(255,255,255,0.6); display:block; margin-bottom:8px; } .upload-zone p { font-size:13px; color:rgba(255,255,255,0.4); } .upload-zone .up-feedback { font-size:12px; color:var(--secondary); margin-top:6px; min-height:16px; } /* ===== BLOG ===== */ .blog { background:var(--bg); } .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; } .blog-card { background:#fff; border:1px solid var(--border); overflow:hidden; cursor:pointer; transition:box-shadow 0.2s; } .blog-card:hover { box-shadow:0 6px 24px rgba(32,67,60,0.08); } .blog-thumb { background:var(--bg-warm); height:200px; display:flex; align-items:center; justify-content:center; font-size:52px; } .blog-body { padding:24px; } .blog-cat { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--secondary); font-weight:600; } .blog-body h3 { font-family:var(--font-display); font-size:24px; font-weight:400; color:var(--primary); margin:8px 0; line-height:1.2; } .blog-body p { font-size:13px; color:var(--text-mid); line-height:1.7; } .blog-meta { display:flex; justify-content:space-between; margin-top:16px; font-size:12px; color:var(--text-light); } .read-more { color:var(--primary); font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; margin-top:12px; display:inline-block; text-decoration:none; } /* ===== CONTACT — FIX #14 ===== */ .contact { background:#fff; display:grid; grid-template-columns:1fr 1fr; } .contact-left { background:var(--primary); padding:80px 60px; } .contact-right { padding:80px 60px; } .contact-left .section-title { color:#fff; } .contact-left .divider { background:var(--secondary); } .contact-detail { display:flex; gap:16px; align-items:flex-start; margin-top:28px; } .contact-icon { width:40px; height:40px; border-radius:50%; background:rgba(233,179,55,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; } .contact-detail h5 { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.4); } .contact-detail p { font-size:15px; color:#fff; margin-top:2px; } .form-group { margin-bottom:20px; } .form-label { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mid); margin-bottom:6px; display:block; } .form-input { width:100%; border:1px solid var(--border); padding:11px 14px; font-size:14px; font-family:var(--font-body); outline:none; transition:border-color 0.2s; background:#fff; } .form-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(32,67,60,0.06); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-select-wrap { position:relative; } .form-select-wrap::after { content:'▾'; position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--text-mid); pointer-events:none; } .form-select { width:100%; border:1px solid var(--border); padding:11px 14px; font-size:14px; font-family:var(--font-body); outline:none; background:#fff; appearance:none; } .form-select:focus { border-color:var(--primary); } .form-success { display:none; background:rgba(32,67,60,0.08); border:1px solid rgba(32,67,60,0.2); color:var(--primary); padding:14px 20px; font-size:14px; margin-top:16px; border-radius:2px; } .form-success.show { display:block; } .form-error { font-size:12px; color:#c0392b; margin-top:4px; display:none; } .form-error.show { display:block; } /* ===== MEASUREMENT FORM — FIX #03 #04 #05 #13 #15 #17 #21 ===== */ .mform { background:var(--bg); } .mform-header { background:var(--primary); padding:40px 80px; } .mform-card { background:#fff; border:1px solid var(--border); padding:40px; max-width:960px; margin:48px auto 0; } .mform-tabs { display:flex; gap:2px; border-bottom:2px solid var(--border); margin-bottom:32px; } .mform-tab { padding:12px 24px; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; color:var(--text-light); transition:all 0.2s; } .mform-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:500; } .mform-panel { display:none; } .mform-panel.active { display:block; } .mform-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .mform-field { display:flex; flex-direction:column; } .mform-field label { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-light); margin-bottom:5px; } /* FIX #21 — input focus ring */ .mform-field input { width:100%; border:1px solid var(--border); padding:9px 12px; font-size:14px; font-family:var(--font-body); outline:none; transition:border-color 0.2s; } .mform-field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(32,67,60,0.06); } /* FIX #15 — min=0 enforced via CSS visual cue */ .mform-field input.required-field { border-left:2px solid var(--secondary); } .mform-section-title { grid-column:1/-1; font-family:var(--font-display); font-size:20px; color:var(--primary); margin-top:16px; padding-top:20px; border-top:1px solid var(--border); } .mform-section-title.first { border-top:none; margin-top:0; padding-top:0; } .checkbox-grid { display:flex; flex-wrap:wrap; gap:10px; grid-column:1/-1; } .cb-item { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-mid); cursor:pointer; padding:5px 10px; border:1px solid var(--border); border-radius:2px; transition:all 0.15s; } .cb-item:hover { border-color:var(--primary); } .cb-item input { accent-color:var(--primary); margin:0; } .cb-item:has(input:checked) { background:rgba(32,67,60,0.06); border-color:var(--primary); color:var(--primary); } /* FIX #17 — real file inputs in upload buttons */ .upload-row { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; } .upload-btn { border:1px dashed var(--border); padding:20px 16px; text-align:center; cursor:pointer; font-size:12px; color:var(--text-light); letter-spacing:0.06em; text-transform:uppercase; position:relative; overflow:hidden; transition:all 0.2s; } .upload-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(32,67,60,0.02); } .upload-btn input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; } .upload-btn .up-name { font-size:11px; color:var(--secondary); margin-top:5px; display:none; text-transform:none; letter-spacing:0; } .upload-btn .up-name.show { display:block; } /* FIX #13 — class conflict resolved: outer div is .mform-note-wrap, textarea is .note-area */ .mform-note-wrap { grid-column:1/-1; } .note-area { width:100%; border:1px solid var(--border); padding:12px; font-size:14px; font-family:var(--font-body); min-height:80px; resize:vertical; outline:none; } .note-area:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(32,67,60,0.06); } .mform-actions { grid-column:1/-1; margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; } /* Kids gender selector */ .gender-selector { grid-column:1/-1; display:flex; gap:12px; margin-bottom:8px; } .gender-btn { flex:1; max-width:180px; padding:12px 24px; border:1px solid var(--border); background:#fff; font-size:13px; font-family:var(--font-body); cursor:pointer; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-mid); transition:all 0.2s; } .gender-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); } .kids-girl-only { display:none; } .gender-girl .kids-girl-only { display:flex; flex-direction:column; } .kids-boy-only { display:none; } .gender-boy .kids-boy-only { display:flex; flex-direction:column; } /* ===== CHANGE 2: HOME PAGE LOGIN NUDGE ===== */ .login-nudge { background:#fff; border-bottom:3px solid var(--secondary); padding:28px 80px; } .login-nudge.hidden { display:none; } .login-nudge-inner { display:flex; align-items:center; gap:40px; flex-wrap:wrap; } .login-nudge-left { display:flex; align-items:flex-start; gap:16px; flex:0 0 auto; max-width:320px; } .login-nudge-icon { font-size:36px; flex-shrink:0; margin-top:2px; } .login-nudge-left h3 { font-family:var(--font-display); font-size:26px; color:var(--primary); font-weight:300; line-height:1.1; margin-bottom:6px; } .login-nudge-left h3 em { font-style:italic; } .login-nudge-left p { font-size:13px; color:var(--text-mid); line-height:1.6; } .login-nudge-benefits { display:flex; flex-direction:column; gap:7px; flex:1; min-width:220px; } .nudge-benefit { font-size:13px; color:var(--text-mid); display:flex; align-items:center; gap:8px; } .nudge-check { color:var(--primary); font-weight:600; background:rgba(32,67,60,0.08); width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; } .login-nudge-actions { display:flex; flex-direction:column; gap:10px; flex-shrink:0; } /* Logged-in welcome bar shown instead of nudge */ .login-welcome { background:var(--primary); padding:14px 80px; display:none; align-items:center; justify-content:space-between; } .login-welcome.show { display:flex; } .login-welcome p { font-size:13px; color:rgba(255,255,255,0.8); } .login-welcome p strong { color:var(--secondary); } .login-welcome-links { display:flex; gap:16px; } .login-welcome-links a { font-size:12px; color:rgba(255,255,255,0.6); cursor:pointer; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; } .login-welcome-links a:hover { color:var(--secondary); } /* ===== CHANGE 4+5: LOGIN MODAL ===== */ .auth-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:10500; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(2px); } .auth-overlay.show { display:flex; } .auth-modal { background:#fff; width:100%; max-width:480px; border-top:3px solid var(--secondary); position:relative; max-height:90vh; overflow-y:auto; } .auth-modal-close { position:absolute; top:16px; right:20px; font-size:22px; cursor:pointer; color:var(--text-light); line-height:1; background:none !important; border:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background 0.2s, color 0.2s; } .auth-modal-close:hover { color:var(--primary) !important; background:rgba(32,67,60,0.06) !important; } .auth-modal-close:hover { color:var(--text-dark); } .auth-modal-head { padding:36px 40px 0; } .auth-modal-head h2 { font-family:var(--font-display); font-size:34px; color:var(--primary); font-weight:300; margin-bottom:4px; } .auth-modal-head h2 em { font-style:italic; } .auth-modal-head p { font-size:13px; color:var(--text-light); margin-bottom:24px; } .auth-modal-body { padding:0 40px 36px; } /* Tab switcher inside modal */ .auth-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:28px; } .auth-tab { flex:1; padding:10px; text-align:center; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; color:var(--text-light); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.2s; } .auth-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:500; } .auth-panel { display:none; } .auth-panel.active { display:block; } /* Social sign-in buttons — CHANGE 5 */ .social-signin { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; } .social-btn { display:flex; align-items:center; gap:12px; width:100%; padding:11px 16px; border:1px solid var(--border); background:#fff; font-size:13px; font-family:var(--font-body); cursor:pointer; color:var(--text-dark); transition:all 0.18s; text-align:left; } .social-btn:hover { background:var(--bg-warm); border-color:rgba(32,67,60,0.3); } .social-btn svg, .social-btn img { width:18px; height:18px; flex-shrink:0; } .social-btn span { font-size:13px; } .auth-divider { display:flex; align-items:center; gap:12px; margin:18px 0; } .auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); } .auth-divider span { font-size:11px; color:var(--text-light); letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; } .auth-field { margin-bottom:16px; } .auth-field label { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-light); display:block; margin-bottom:5px; } .auth-field input { width:100%; border:1px solid var(--border); padding:10px 14px; font-size:14px; font-family:var(--font-body); outline:none; transition:border-color 0.2s; } .auth-field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(32,67,60,0.06); } .auth-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .auth-forgot { font-size:12px; color:var(--primary); cursor:pointer; text-align:right; margin-top:-8px; margin-bottom:16px; } .auth-forgot:hover { text-decoration:underline; } .auth-submit { width:100%; background:var(--primary) !important; color:#fff !important; border:none !important; padding:13px !important; font-size:13px !important; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:var(--font-body); font-weight:600 !important; transition:background 0.2s; margin-top:4px; line-height:1.4 !important; } .auth-submit:hover { background:var(--primary-light); } .auth-switch { font-size:13px; color:var(--text-mid); text-align:center; margin-top:18px; } .auth-switch a { color:var(--primary); cursor:pointer; font-weight:500; } .auth-switch a:hover { text-decoration:underline; } .auth-success { background:rgba(32,67,60,0.07); border:1px solid rgba(32,67,60,0.18); color:var(--primary); padding:14px 16px; font-size:13px; margin-top:12px; display:none; border-radius:2px; } .auth-success.show { display:block; } /* ===== COOKIE BANNER — FIX #06 ===== */ .cookie-banner { position:fixed; bottom:0; left:0; right:0; background:var(--primary-dark); padding:16px 40px; display:flex; justify-content:space-between; align-items:center; gap:20px; z-index:9999; border-top:2px solid var(--secondary); transition:transform 0.4s ease; } .cookie-banner.hidden { transform:translateY(110%); } .cookie-text { font-size:13px; color:rgba(255,255,255,0.72); max-width:560px; line-height:1.6; } .cookie-text a { color:var(--secondary); text-decoration:none; } .cookie-text a:hover { text-decoration:underline; } .cookie-btns { display:flex; gap:10px; flex-shrink:0; } /* Cookie prefs modal */ .cookie-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:10000; display:none; align-items:center; justify-content:center; padding:20px; } .cookie-modal-overlay.show { display:flex; } .cookie-modal { background:#fff; max-width:520px; width:100%; padding:36px; border-top:3px solid var(--secondary); } .cookie-modal h3 { font-family:var(--font-display); font-size:28px; color:var(--primary); margin-bottom:6px; } .cookie-modal p { font-size:13px; color:var(--text-mid); margin-bottom:20px; } .cookie-pref-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); } .cookie-pref-row:last-of-type { border-bottom:none; } .cookie-pref-row span { font-size:13px; color:var(--text-dark); } .cookie-pref-row small { font-size:11px; color:var(--text-light); display:block; } .toggle-wrap { position:relative; width:44px; height:24px; flex-shrink:0; } .toggle-wrap input { opacity:0; position:absolute; width:100%; height:100%; cursor:pointer; z-index:1; margin:0; } .toggle-track { position:absolute; inset:0; background:var(--border); border-radius:12px; transition:background 0.2s; } .toggle-wrap input:checked ~ .toggle-track { background:var(--primary); } .toggle-knob { position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.2); } .toggle-wrap input:checked ~ .toggle-knob { transform:translateX(20px); } .cookie-modal-actions { display:flex; gap:10px; margin-top:20px; } /* ===== FOOTER — FIX #22 (placeholder URLs noted) ===== */ footer { background:var(--primary-dark); padding:64px 80px 32px; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.08); } .footer-brand p { font-size:13px; color:rgba(255,255,255,0.42); line-height:1.7; max-width:280px; } .footer-col h5 { font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:20px; } .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; } .footer-col ul a { font-size:13px; color:rgba(255,255,255,0.55); text-decoration:none; transition:color 0.2s; cursor:pointer; } .footer-col ul a:hover { color:var(--secondary); } .footer-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:16px; flex-wrap:wrap; } .footer-bottom p { font-size:12px; color:rgba(255,255,255,0.22); } .social { display:flex; gap:12px; } .social-link { width:34px; height:34px; border:1px solid rgba(255,255,255,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:rgba(255,255,255,0.4); text-decoration:none; transition:all 0.2s; cursor:pointer; } .social-link:hover { border-color:var(--secondary); color:var(--secondary); } /* ===== TOAST NOTIFICATION ===== */ .toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--primary); color:#fff; padding:12px 24px; font-size:13px; border-radius:3px; opacity:0; transition:all 0.3s; z-index:10001; pointer-events:none; white-space:nowrap; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* ===== ABOUT PAGE ===== */ .about-page-hero { background:var(--primary); padding:80px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .about-photo-placeholder { background:rgba(255,255,255,0.06); border:1px solid rgba(233,179,55,0.2); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; font-size:80px; opacity:0.4; } .timeline { position:relative; padding-left:28px; } .timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(233,179,55,0.3); } .timeline-item { position:relative; padding-bottom:28px; } .timeline-item::before { content:''; position:absolute; left:-31px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--secondary); } .timeline-item h4 { font-family:var(--font-display); font-size:20px; color:#fff; font-weight:300; } .timeline-item p { font-size:13px; color:rgba(255,255,255,0.55); margin-top:4px; } /* ===== GALLERY PAGE ===== */ .gallery-page { background:var(--primary); min-height:60vh; } .gallery-header { padding:60px 80px 40px; } .gallery-filter-bar { display:flex; gap:8px; padding:0 80px 24px; flex-wrap:wrap; } .g-filter-btn { padding:10px 24px; border:1.5px solid rgba(255,255,255,0.45); color:#fff; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; transition:all 0.2s; background:transparent; font-family:var(--font-brand); border-radius:0; font-weight:400; } .g-filter-btn.active, .g-filter-btn:hover { background:var(--secondary); border-color:var(--secondary); color:var(--primary); font-weight:600; } .gallery-full-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; } .gallery-full-cell { background:rgba(255,255,255,0.04); aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:48px; color:rgba(233,179,55,0.15); cursor:pointer; transition:background 0.2s; position:relative; overflow:hidden; } .gallery-full-cell:hover { background:rgba(233,179,55,0.08); } .gallery-full-cell .cell-label { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.7); padding:8px 12px; transform:translateY(100%); transition:transform 0.2s; font-family:var(--font-body); } .gallery-full-cell:hover .cell-label { transform:translateY(0); } .gallery-video-section { padding:60px 80px; } .gallery-video-section h3 { font-family:var(--font-display); font-size:32px; color:#fff; font-weight:300; margin-bottom:24px; } .video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .video-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); padding:20px; cursor:pointer; transition:background 0.2s; } .video-card:hover { background:rgba(233,179,55,0.06); border-color:rgba(233,179,55,0.2); } .video-thumb { background:rgba(0,0,0,0.3); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:12px; } .video-card h4 { font-size:14px; color:rgba(255,255,255,0.7); } .video-card p { font-size:12px; color:rgba(255,255,255,0.35); margin-top:4px; } /* Admin upload panel */ .admin-upload-panel { margin:0 80px 60px; border:1px dashed rgba(255,255,255,0.15); padding:32px; } .admin-upload-panel h4 { font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:16px; } .upload-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .admin-upload-zone { border:1px dashed rgba(255,255,255,0.15); padding:24px; text-align:center; cursor:pointer; position:relative; overflow:hidden; transition:all 0.2s; } .admin-upload-zone:hover { border-color:var(--secondary); } .admin-upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; } .admin-upload-zone p { font-size:13px; color:rgba(255,255,255,0.4); } .admin-upload-zone strong { display:block; font-size:22px; margin-bottom:8px; } .admin-upload-zone .feedback { font-size:12px; color:var(--secondary); margin-top:6px; min-height:16px; } /* ===== BACK-TO-TOP ===== */ /* Back-to-top removed for cleaner premium look */ .back-to-top, .back-to-top.show { display:none !important; } /* ============================================================ WOOCOMMERCE BRAND OVERRIDES ============================================================ */ /* Buttons */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background-color: var(--primary) !important; color: #ffffff !important; font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border-radius: 0 !important; padding: 12px 28px !important; border: none !important; } .woocommerce a.button:hover, .woocommerce button.button:hover { background-color: var(--primary-light) !important; } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt { background-color: var(--secondary) !important; color: var(--primary) !important; font-weight: 600 !important; } .woocommerce a.button.alt:hover { background-color: var(--secondary-dark) !important; } /* Form fields */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--border) !important; border-radius: 0 !important; font-family: var(--font-body) !important; font-size: 14px !important; padding: 10px 14px !important; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(32,67,60,0.06) !important; outline: none !important; } /* Notices */ .woocommerce-message { border-top-color: var(--primary) !important; } .woocommerce-error { border-top-color: #c0392b !important; } /* My Account nav */ .woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; } .woocommerce-MyAccount-navigation ul li a { display: block; padding: 10px 16px; color: var(--text-mid); text-decoration: none; border-left: 3px solid transparent; transition: all 0.2s; font-size: 13px; } .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { color: var(--primary); border-left-color: var(--secondary); background: rgba(32,67,60,0.04); font-weight: 500; } /* Product titles & prices */ ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display) !important; font-size: 20px !important; font-weight: 400 !important; color: var(--primary) !important; } .price { color: var(--primary) !important; font-weight: 600 !important; } .star-rating span::before { color: var(--secondary) !important; } /* Cart & checkout tables */ .shop_table th { background: var(--primary) !important; color: #ffffff !important; font-family: var(--font-body) !important; font-size: 11px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } /* ── Astra default header/footer — hidden via CSS ──────────── */ /* wp_head() and wp_footer() REMAIN INTACT — Elementor needs them */ /* We hide the visual elements only, not the WordPress hooks */ .site-header, #masthead, .ast-site-header-wrap, .main-header-bar, .ast-main-header-wrap { display: none !important; } .site-footer, #colophon, .ast-site-footer, .footer-widget-area { display: none !important; } .ast-container { max-width: 100% !important; padding: 0 !important; } /* entry-content padding removal — EXCLUDE WooCommerce pages */ body:not(.single-product):not(.woocommerce-page) .entry-content { padding: 0 !important; margin: 0 !important; } body:not(.single-product) .ast-page-builder-template .entry-content { margin: 0 !important; } /* Remove Astra's body padding that compensates for its sticky header */ .ast-header-break-point .ast-mobile-header-stack { display: none !important; } body.ast-header-sticky-disabled { padding-top: 0 !important; } /* Typography overrides to match mockup */ h1, h2, h3, h4, h5 { font-family: var(--font-display) !important; font-weight: 300 !important; line-height: 1.1 !important; } a { color: var(--primary); transition: color 0.2s; } a:hover { color: var(--secondary-dark); } /* ===== POLICY PAGE TABS ===== */ .policy-tab { display:inline-block; padding:10px 20px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--text-light); font-family:var(--font-body); transition:all 0.2s; border-radius:2px; } .policy-tab:hover { color:var(--primary); border-color:var(--primary); background:rgba(32,67,60,0.04); } .policy-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:500; } /* ===== WOOCOMMERCE MY ACCOUNT — BRAND STYLING ===== */ /* This styles the native WooCommerce My Account page */ .woocommerce-account .woocommerce { padding: 60px 80px; max-width:1200px; margin:0 auto; } .woocommerce-MyAccount-navigation { background:#fff; border:1px solid var(--border); padding:16px 0; } .woocommerce-MyAccount-navigation ul li a { padding:12px 24px; border-left:3px solid transparent; display:block; color:var(--text-mid); font-size:13px; letter-spacing:0.04em; text-decoration:none; transition:all 0.2s; } .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { color:var(--primary); border-left-color:var(--secondary); background:rgba(32,67,60,0.04); font-weight:500; } .woocommerce-MyAccount-content { padding-left:32px; } .woocommerce-MyAccount-content h2 { font-family:var(--font-display) !important; color:var(--primary) !important; font-weight:300 !important; } /* Blog page styles */ .blog .entry-title a { font-family:var(--font-display) !important; color:var(--primary) !important; font-size:28px !important; font-weight:400 !important; text-decoration:none; } .blog .entry-title a:hover { color:var(--secondary-dark) !important; } .blog .entry-summary p { color:var(--text-mid); font-size:14px; line-height:1.7; } .blog article { border-bottom:1px solid var(--border); padding-bottom:40px; margin-bottom:40px; } /* ═══════════════════════════════════════════════════════════ FINAL BUG FIXES — compiled from full site audit ═══════════════════════════════════════════════════════════ */ /* BUG #5 #6 #18 — Hide WordPress/Astra page title H1 injected above content */ .entry-title, .page-title, .ast-archive-description .ast-archive-title, h1.page-title, h1.entry-title, .woocommerce-products-header__title { display:none !important; } /* BUG #19 — Remove large gap above Elementor content */ /* Remove padding on non-WooCommerce pages only */ body:not(.single-product):not(.woocommerce-page) .entry-content, body:not(.single-product):not(.woocommerce-page) .entry-content > .elementor, body:not(.single-product):not(.woocommerce-page) .ast-article-single .entry-content { padding:0 !important; margin:0 !important; } body:not(.single-product):not(.woocommerce):not(.woocommerce-page) .post-0 .entry-content, body:not(.single-product):not(.woocommerce-page) .page .entry-content { padding-top:0 !important; } body:not(.single-product):not(.woocommerce-page) .ast-page-builder-template .entry-content { padding:0 !important; margin:0 !important; } /* Remove Astra's body top-padding compensation */ body { padding-top:0 !important; } .ast-single-post .entry-header { display:none !important; } /* BUG #4 — Category sub-panels: ensure display:none !important so JS toggle works */ .cat-sub-panel { display:none !important; } .cat-sub-panel.active { display:flex !important; flex-wrap:wrap; gap:10px; margin-top:28px; } /* BUG #16 — Cookie banner: prevent it covering footer by adding body padding */ body.cookie-active { padding-bottom:80px; } /* The JS will add/remove this class */ /* BUG #9 — Explore Collections button — ensure btn-solid class renders on tags */ a.btn-solid { display:inline-block; background:var(--secondary); color:var(--primary) !important; border:none; padding:8px 20px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:var(--font-body); font-weight:600; text-decoration:none !important; transition:background 0.2s; } a.btn-solid:hover { background:var(--secondary-dark); color:var(--primary) !important; } a.btn-outline { display:inline-block; border:1px solid rgba(233,179,55,0.5); color:var(--secondary) !important; background:transparent; padding:8px 20px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:var(--font-body); text-decoration:none !important; transition:all 0.2s; } a.btn-outline:hover { background:var(--secondary); color:var(--primary) !important; } /* Ensure hero CTA buttons look right on dark background */ .hero a.btn-outline { border-color:rgba(255,255,255,0.5) !important; color:#fff !important; } .hero a.btn-outline:hover { border-color:var(--secondary) !important; color:var(--secondary) !important; } /* Ensure all