/* ══════════════════════════════════════════════════════════════ ISOPOD KEEPERS — Premium Redesign v4 Luxury dark auction marketplace. Inspired by Richard Mille, Audemars Piguet, Christie's, Sotheby's. INSTALLATION: 1. Upload hero-background.png and nav-background.png to WordPress Media Library 2. Update image URLs in the :root block below 3. Paste into Appearance > Customize > Additional CSS OR add as CSS snippet via Code Snippets plugin ══════════════════════════════════════════════════════════════ TABLE OF CONTENTS (with line numbers) ══════════════════════════════════════════════════════════════ 1. VARIABLES & DESIGN TOKENS .............. L54 2. GLOBAL RESETS & BASE ................... L119 3. ASTRA VARIABLE OVERRIDES ............... L355 4. TYPOGRAPHY ............................. L395 5. LINKS & SELECTION ...................... L421 6. SCROLLBAR .............................. L448 7. ACCESSIBILITY .......................... L459 8. ANNOUNCEMENT BAR ....................... L472 9. HEADER & NAVIGATION .................... L509 10. HERO SECTION ........................... L1007 11. GOLDEN TICKET BANNER ................... L1225 12. TRUST BAR .............................. L1394 13. SECTION HEADINGS & DIVIDERS ............ L1466 14. AUCTION FLOOR (White Content Area) ..... L1560 15. SPECIES CARDS .......................... L1643 16. FOUNDING KEEPERS ....................... L1714 17. LOGO CAROUSEL .......................... L1730 18. FOOTER ................................. L1786 19. BUTTONS (Global) ....................... L2031 20. FORMS & INPUTS ......................... L2249 21. PRODUCT CARDS & GRID ................... L2279 22. SINGLE PRODUCT PAGE .................... L2340 23. WOOCOMMERCE NOTICES & MESSAGES ......... L3669 24. WOOCOMMERCE CART & CHECKOUT ............ L3707 25. WOOCOMMERCE BLOCKS (Gutenberg) ......... L4356 26. WOOCOMMERCE MISC ...................... L4398 27. AUCTION PLUGIN OVERRIDES ............... L4802 28. DOKAN MARKETPLACE OVERRIDES ............ L4885 29. SEARCH (FiboSearch) OVERRIDES .......... L5001 30. GOLDEN TICKET PAGE ..................... L5043 31. WORDPRESS BLOCK EDITOR OVERRIDES ....... L6037 32. WHITE-PAGE OVERRIDES ................... L6617 33. MY ACCOUNT PAGES ....................... L6933 34. ORDER SUCCESS / THANK YOU .............. L7400 35. SELLER CARDS & STORE PAGE .............. L7576 36. FOUNDING KEEPERS (nuclear specificity) . L8342 37. DOKAN INDIVIDUAL STORE PAGE ............ L8455 38. FUTURE-PROOFING — Defensive Styles ...... L8900 39. RESPONSIVE — Comprehensive ............. L9479 40. PRINT .................................. L9723 ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 1. VARIABLES & DESIGN TOKENS All custom properties for the Isopod Keepers design system. These are the single source of truth for colors, typography, spacing, and animation across the entire site. ══════════════════════════════════════════════════════════════ */ :root { /* Opt out of browser-imposed dark mode (Chrome's force-dark flag, browser extensions, OS-level Chromium auto-dark). The site is designed for an authored mix of dark-bg pages (homepage, auctions, golden-ticket) and white-bg pages (cart, checkout, my-account); auto-darkening inverts our white-page text to invisible. Discovered 2026-05-05 — dev's checkout screenshot showed Vendor Shipping & Refund Policies + form labels as pale text on a force-dark background. `color-scheme: light` tells the UA that our pages are authored for light backgrounds and to skip its auto-darken pass. We still ship our own dark UI on dark-bg pages via normal CSS — this only blocks UA color inversion. */ color-scheme: light; /* IMAGE PATHS — Update after uploading to WordPress */ --ik-img-hero: url('../images/hero-background.png'); --ik-img-nav: url('../images/nav-background.png'); /* Backgrounds — dark but not black */ --ik-bg-deep: #0E0E0C; --ik-bg-base: #151513; --ik-bg-raised: #1E1E1B; --ik-bg-elevated: #282825; --ik-bg-hover: #333330; /* Borders */ --ik-border-subtle: rgba(255, 255, 255, 0.04); --ik-border-default: rgba(255, 255, 255, 0.07); --ik-border-strong: rgba(255, 255, 255, 0.12); --ik-border-gold: rgba(196, 163, 90, 0.2); /* Text — high contrast, WCAG AA compliant */ --ik-text-primary: #FFFFFF; --ik-text-secondary: #D5D5D5; --ik-text-tertiary: #AAAAAA; /* Gold — bright enough to read on dark backgrounds */ --ik-gold: #FFCC33; --ik-gold-light: #FFDB66; --ik-gold-bright: #FFE680; --ik-gold-dark: #E6B800; --ik-gold-deep: #CC9900; --ik-gold-gradient: linear-gradient(135deg, #E6B800 0%, #FFE066 50%, #FFCC33 100%); /* Typography */ --ik-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ik-font-display: 'Playfair Display', Georgia, serif; --ik-text-xs: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem); /* 10-12px */ --ik-text-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem); /* 13-14px */ --ik-text-base: clamp(0.875rem, 0.85rem + 0.15vw, 0.938rem);/* 14-15px */ --ik-text-lg: clamp(1.05rem, 1rem + 0.3vw, 1.188rem); /* 17-19px */ --ik-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20-24px */ --ik-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24-32px */ --ik-text-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem); /* 30-40px */ --ik-text-4xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.25rem); /* 36-52px */ --ik-text-hero: clamp(3rem, 2.5rem + 3.5vw, 5rem); /* 48-80px */ /* Animation — luxury is SLOW */ --ik-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ik-duration: 0.4s; --ik-duration-slow: 0.6s; /* Layout */ --ik-max-width: 1200px; --ik-radius: 0; /* Sharp corners everywhere — no exceptions except avatars */ --ik-radius-sm: 0; --ik-radius-md: 0; } /* ══════════════════════════════════════════════════════════════ 2. GLOBAL RESETS & BASE Dark background on all wrapper elements, smooth scrolling, film grain texture overlay for luxury depth. ══════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; overflow-x: hidden !important; } body { overflow-x: hidden !important; } body, html { background: var(--ik-bg-deep) !important; color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; font-family: var(--ik-font-body) !important; font-size: var(--ik-text-base) !important; font-weight: 400 !important; line-height: 1.7 !important; letter-spacing: 0.01em !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Film grain texture — subtle overlay for premium depth */ body::before { content: '' !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: 9999 !important; opacity: 0.02 !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important; mix-blend-mode: overlay !important; } /* Dark background on all major WordPress/Astra wrapper elements */ .hfeed, .site, #page { background: var(--ik-bg-deep) !important; } #content, .site-content, #primary, .content-area, .ast-article-single { background: transparent !important; } /* WHITE content area for ALL standard pages. Homepage (1381) and Golden Ticket (2594) are excluded — they use dark themes. CRITICAL: scope to #content so .ast-container in the header stays dark. */ body:not(.page-id-1381):not(.page-id-2594) #content, body:not(.page-id-1381):not(.page-id-2594) #content .ast-container, body:not(.page-id-1381):not(.page-id-2594) .site-main, body:not(.page-id-1381):not(.page-id-2594) .entry-content { background: #FFFFFF !important; } body:not(.page-id-1381):not(.page-id-2594) .entry-content p, body:not(.page-id-1381):not(.page-id-2594) .entry-content li, body:not(.page-id-1381):not(.page-id-2594) .entry-content span, body:not(.page-id-1381):not(.page-id-2594) .entry-content td, body:not(.page-id-1381):not(.page-id-2594) .entry-content th, body:not(.page-id-1381):not(.page-id-2594) .entry-content label, body:not(.page-id-1381):not(.page-id-2594) .entry-content address { color: #333333 !important; -webkit-text-fill-color: #333333 !important; font-family: var(--ik-font-body) !important; font-style: normal !important; } body:not(.page-id-1381):not(.page-id-2594) .entry-content h1, body:not(.page-id-1381):not(.page-id-2594) .entry-content h2:not(.ik-gold-bar):not(.wp-block-heading), body:not(.page-id-1381):not(.page-id-2594) .entry-content h3, body:not(.page-id-1381):not(.page-id-2594) .entry-content h4 { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; font-family: var(--ik-font-body) !important; font-style: normal !important; } /* Preserve white text in dark background blocks (About values, Isopod Care CTA) */ body.page .entry-content .has-white-color, body.page .entry-content .has-white-color p, body.page .entry-content .has-white-color li, body.page .entry-content .wp-block-group[style*="background-color:#0f2230"] p, body.page .entry-content .wp-block-group[style*="background-color:#0f2230"] li, body.page .entry-content .wp-block-group[style*="background-color:#0f2230"] h2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* Nuclear white bg override — catches anything the rules above miss. The .ast-article-single is the article wrapper that inherits the dark body bg. Also ensures content area has proper padding and minimum height. */ body:not(.page-id-1381):not(.page-id-2594) .ast-article-single, body:not(.page-id-1381):not(.page-id-2594) #primary, body:not(.page-id-1381):not(.page-id-2594) .content-area { background: #FFFFFF !important; background-color: #FFFFFF !important; } /* White-page button override — .wp-block-button__link defaults to transparent bg + white text (dark theme). On white pages, switch to gold bg + black text for primary CTA visibility. Selector includes #content to reach (1,4,2) and beat the white-page link rule at line 2668 (#content a, specificity 1,2,2). */ body:not(.page-id-1381):not(.page-id-2594) #content .entry-content .wp-block-button__link, body:not(.page-id-1381):not(.page-id-2594) #content .entry-content .wp-element-button { background: #FFCC33 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: none !important; border-color: #FFCC33 !important; } body:not(.page-id-1381):not(.page-id-2594) #content .entry-content .wp-block-button__link:hover, body:not(.page-id-1381):not(.page-id-2594) #content .entry-content .wp-element-button:hover { background: #FFDB66 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border-color: #FFDB66 !important; } /* Content area — MUST match nav width exactly. Nav uses: max-width: var(--ik-max-width), margin: 0 auto, padding: 0 clamp(1.5rem, 4vw, 3rem) Content must use the same. */ body:not(.page-id-1381):not(.page-id-2594):not(.page-id-1384):not(.page-id-1386):not(.page-id-2510):not(.woocommerce-account):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content:not(.woocommerce-Tabs-panel) { min-height: 40vh !important; max-width: var(--ik-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 clamp(1.5rem, 4vw, 3rem) 60px !important; } /* Gold bar must be full viewport width, flush to nav. Entry-content has max-width + padding, so gold bar uses 100vw breakout. */ body:not(.page-id-1381):not(.page-id-2594) .entry-content > h2.ik-gold-bar { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; margin-left: -50vw !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; } /* Content below gold bar needs its own top spacing */ body:not(.page-id-1381):not(.page-id-2594) .entry-content > h2.ik-gold-bar + * { margin-top: 32px !important; } /* Page builder template kills all spacing — keep it killed for flush gold bar. But constrain inner elements to max-width for consistent content width. */ body.page.ast-page-builder-template:not(.page-id-1381) #content, body.page.ast-page-builder-template:not(.page-id-1381) #primary, body.page.ast-page-builder-template:not(.page-id-1381) .site-main, body.page.ast-page-builder-template:not(.page-id-1381) .ast-article-single { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.page.ast-page-builder-template:not(.page-id-1381) .ast-container { max-width: 100% !important; padding: 0 !important; } /* Entry header (empty on these pages) — kill any space it takes */ body:not(.page-id-1381):not(.page-id-2594) .entry-header { margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; } /* Constrained group within content — match nav/footer width */ body:not(.page-id-1381):not(.page-id-2594) .entry-content > .wp-block-group.is-layout-constrained { max-width: var(--ik-max-width) !important; margin-left: auto !important; margin-right: auto !important; } /* Block Editor columns — equal height cards, always */ .entry-content .wp-block-columns { align-items: stretch !important; } .entry-content .wp-block-columns .wp-block-column > .wp-block-group { height: 100% !important; } /* Container — limit content width but allow alignfull blocks to break out */ .ast-container { max-width: var(--ik-max-width) !important; } /* Force full-width — kill Astra's 20px container padding */ #primary .ast-container, .site-content .ast-container, #content .ast-container, div.ast-container, .ast-container, .ast-container-fluid { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; } #primary.content-area, .site-main, .entry-content, .entry-content.clear, .ast-article-single, article.page { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; } /* All content blocks full width */ .entry-content > .wp-block-group, .entry-content > .wp-block-group.alignfull, .entry-content > .wp-block-group.is-layout-constrained { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ══════════════════════════════════════════════════════════════ 3. ASTRA VARIABLE OVERRIDES Override Astra's global color palette, old --ik-* variables from a previous design iteration (still served by LiteSpeed combined CSS), and WordPress/plugin color tokens. Without these, elements using var() fallbacks show red, navy, teal, and blue instead of our dark+gold palette. ══════════════════════════════════════════════════════════════ */ /* Override Astra's global color palette — prevents red/navy defaults */ :root { --ast-global-color-0: #E6B800 !important; /* was #d94948 (red) → gold */ --ast-global-color-1: #FFFFFF !important; /* keep white */ --ast-global-color-2: #1A1A1A !important; /* was #011627 (navy) → near-black */ --ast-global-color-3: #AAAAAA !important; /* was rgba(1,22,39,0.75) → muted text */ --ast-global-color-4: #1E1E1B !important; /* was #f9f8f8 (off-white) → dark surface */ --ast-global-color-5: #FFFFFF !important; /* keep white for content areas */ --ast-global-color-6: #0E0E0C !important; /* was #011627 → deep dark */ --ast-global-color-7: #0E0E0C !important; /* was #011627 → deep dark */ --ast-global-color-8: #151513 !important; /* was #f9f8f8 → dark base */ --ast-border-color: #E8E8E6 !important; /* light border for white-bg pages */ /* Override old design iteration variables still in LiteSpeed combined CSS */ --ik-bg: #0E0E0C !important; /* was #f3f5f7 (light gray) */ --ik-surface: #1E1E1B !important; /* was #ffffff */ --ik-dark: #0E0E0C !important; --ik-text: #D5D5D5 !important; /* was #102a3a (dark blue-green) */ --ik-muted: #AAAAAA !important; /* was #5f7384 */ --ik-primary: #E6B800 !important; /* was #1f6f5e (teal) */ --ik-accent: #FFCC33 !important; /* was #e24c4b (red) */ /* Override WordPress/plugin color tokens */ --swiper-theme-color: #FFCC33 !important; /* was #007aff (blue) */ --wp-admin-theme-color: #E6B800 !important; /* was #007cba (blue) */ --wp--preset--color--vivid-cyan-blue: #FFCC33 !important; --wp--preset--color--pale-cyan-blue: #FFE680 !important; --wp--preset--color--cyan-bluish-gray: #AAAAAA !important; } /* Body/site background — white for all pages except GT (page-id-2594). Astra uses --ast-global-color-6 for body bg, which we set to #0E0E0C. That's correct for GT but bleeds to product/other pages as a dark "border box." */ body:not(.page-id-2594), body:not(.page-id-2594) #content, body:not(.page-id-2594) #primary, body:not(.page-id-2594) .site-main { background-color: #FFFFFF !important; } /* ══════════════════════════════════════════════════════════════ 4. TYPOGRAPHY Global heading and body text styles. Inter for body, Playfair Display ONLY for hero headlines. No italic ever. ══════════════════════════════════════════════════════════════ */ /* H3 headings inside content */ .entry-content h3.wp-block-heading { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-xl) !important; font-weight: 400 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Body paragraphs */ .entry-content p { font-family: var(--ik-font-body) !important; font-weight: 400 !important; color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; line-height: 1.8 !important; } /* Footer paragraphs — no max-width constraint */ .site-footer .entry-content p, .ik-footer p { max-width: none !important; } /* ══════════════════════════════════════════════════════════════ 5. LINKS & SELECTION Default link color is muted white (not blue), gold on hover. Entry content links override teal from old theme iteration. ══════════════════════════════════════════════════════════════ */ a { transition: color var(--ik-duration) ease !important; color: rgba(255,255,255,0.45) !important; -webkit-text-fill-color: rgba(255,255,255,0.45) !important; } a:hover { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } /* Entry content links — override teal #1f6f5e from old theme */ .entry-content a:not(.wp-block-button__link):not([class*="ik-"]) { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } .entry-content a:not(.wp-block-button__link):not([class*="ik-"]):hover { color: var(--ik-gold-bright) !important; -webkit-text-fill-color: var(--ik-gold-bright) !important; } /* Text selection highlight — gold-tinted */ ::selection { background: rgba(196, 163, 90, 0.25); color: #fff; } /* ══════════════════════════════════════════════════════════════ 6. SCROLLBAR Thin, dark scrollbar with gold thumb. Minimal chrome. ══════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #000; } ::-webkit-scrollbar-thumb { background: var(--ik-gold-deep); border-radius: 2px; } * { scrollbar-width: thin; scrollbar-color: var(--ik-gold-deep) #000; } /* ══════════════════════════════════════════════════════════════ 7. ACCESSIBILITY Reduced motion support per WCAG and user preference. ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════════════════════ 8. ANNOUNCEMENT BAR Gold gradient ticker bar at very top of page. Also overrides WooCommerce store notice banner. ══════════════════════════════════════════════════════════════ */ .top-announcement-bar { background: linear-gradient(90deg, #C9A020, #E8C840 30%, #FFD966 50%, #E8C840 70%, #C9A020) !important; border-bottom: none !important; padding: 0.5rem 0 !important; position: relative !important; overflow: hidden !important; } .announcement-item { font-family: var(--ik-font-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #1A1200 !important; -webkit-text-fill-color: #1A1200 !important; white-space: nowrap !important; padding: 0 4rem !important; /* Force every glyph (text + any emoji like 🔔) to render as solid black. `font-variant-emoji: text` alone isn't reliable — Chromium's emoji fonts lack monochrome glyphs for some codepoints (e.g. U+1F514 bell) and fall back to colored. `filter: brightness(0)` runs at rasterization and zeroes the RGB of every pixel inside the span. Existing text was already #1A1200 (very dark) so the visual change is imperceptible; emoji become clean black silhouettes that read on the gold bar. */ font-variant-emoji: text !important; filter: brightness(0) !important; } /* Marquee track — scrolling animation */ .announcement-marquee-track { display: flex !important; white-space: nowrap !important; animation: marquee 30s linear infinite !important; will-change: transform !important; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* WooCommerce store notice — gold banner style */ .woocommerce-store-notice.demo_store { background: var(--ik-gold) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; font-family: var(--ik-font-body) !important; font-size: var(--ik-text-sm) !important; font-weight: 500 !important; padding: 0.5rem 1rem !important; letter-spacing: 0.05em !important; } /* ══════════════════════════════════════════════════════════════ 9. HEADER & NAVIGATION Black header bar, wordmark logo, nav links, dropdowns, mobile menu, and CTA button. No sticky nav — stays in document flow for luxury feel. ══════════════════════════════════════════════════════════════ */ /* --- Header bar --- */ .site-header, #masthead { background: #000000 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; box-shadow: none !important; position: relative !important; z-index: 100 !important; } /* No sticky nav — normal document flow */ /* Thin gold line at bottom of header */ .site-header::after, #masthead::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 10% !important; right: 10% !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255,204,51,0.4), transparent) !important; } /* Transparent background for all header bar layers */ .ast-below-header-bar, .ast-below-header-wrap, .ast-below-header, .ast-primary-header-bar, .ast-primary-header, .main-header-bar { background: transparent !important; border: none !important; box-shadow: none !important; } /* --- Logo — replace chest logo with wordmark everywhere --- */ .site-branding .custom-logo, .site-branding img.custom-logo, #ast-mobile-header .custom-logo, img.custom-logo { content: url('../images/wordmark.png') !important; max-height: 36px !important; max-width: 120px !important; width: auto !important; object-fit: contain !important; transition: opacity var(--ik-duration) ease !important; } .custom-logo-link:hover .custom-logo { opacity: 0.7 !important; } /* Nav item visibility is managed by Astra Header Builder / menu config — do NOT override */ /* Nav order is managed in Appearance > Menus — do NOT override with CSS order */ /* --- Golden Ticket nav — gold text, no border on the li or link --- */ li.golden-ticket-btn { border: none !important; outline: none !important; box-shadow: none !important; } .main-header-menu .golden-ticket-btn > a.menu-link, #ast-hf-menu-1 .golden-ticket-btn > a.menu-link, .golden-ticket-btn > a.menu-link, .golden-ticket-btn > a { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; } .main-header-menu .golden-ticket-btn > a.menu-link:hover, #ast-hf-menu-1 .golden-ticket-btn > a.menu-link:hover, .golden-ticket-btn > a.menu-link:hover, .golden-ticket-btn > a:hover { color: var(--ik-gold-bright) !important; -webkit-text-fill-color: var(--ik-gold-bright) !important; } /* Golden Ticket in mobile menu — gold */ .ast-hf-mobile-menu .golden-ticket-btn > a.menu-link { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } /* NOTE FOR DEVELOPER: Show/hide of nav items is generally the staging site's responsibility (WP menu admin + PHP filters / login-conditional menus / plugin behavior). CSS in this project controls APPEARANCE ONLY. The mockup-leftover hides on /my-watchlist, /my-account, /cart and the My Bids/Wins (`menu-item-2485`) hide were removed 2026-04-27 per Ruth's directive, and so was the unconditional `.menu-item:first-child` hide. ONE NARROW EXCEPTION KEPT BELOW: hide Register/Login when the user is already logged in. WP doesn't have native support for hiding menu items by login state without a plugin or PHP filter, so this CSS stopgap stands until the developer wires up a `wp_nav_menu_objects` filter (or installs a plugin like Nav Menu Roles) — at which point this rule should be removed. The selector applies to BOTH desktop and mobile menus since `body.logged-in` is set globally, so the rule preserves desktop/mobile parity. See feedback_css_appearance_only.md for the broader rule. */ body.logged-in .menu-item:has(> a[href*="/register"]), body.logged-in .menu-item:has(> a[href*="/login"]), body.logged-in li:has(> a[href*="/register/"]), body.logged-in li:has(> a[href*="/login/"]) { display: none !important; } /* --- NAV LAYOUT — Logo + primary links left, account/cart right --- */ /* Pseudo-element logo removed — Astra Header Builder already puts the logo in the below-header left section. No need for a duplicate. */ #ast-desktop-header ul#ast-hf-menu-1::before { display: none !important; content: none !important; } /* Force EVERY wrapper to be full width — the key is ast-inline-flex */ #ast-desktop-header .main-navigation.ast-inline-flex { display: flex !important; width: 100% !important; max-width: 100% !important; } #ast-desktop-header .ast-below-header-wrap, #ast-desktop-header .ast-below-header-bar, #ast-desktop-header .site-below-header-wrap, #ast-desktop-header .ast-builder-grid-row-container, #ast-desktop-header .site-header-below-section-center, #ast-desktop-header .ast-builder-menu-1, #ast-desktop-header .ast-main-header-bar-alignment, #ast-desktop-header .main-header-bar-navigation, #ast-desktop-header nav.site-navigation { width: 100% !important; max-width: 100% !important; } #ast-desktop-header .ast-builder-grid-row { width: 100% !important; max-width: var(--ik-max-width) !important; margin: 0 auto !important; padding: 0 clamp(1.5rem, 4vw, 3rem) !important; } /* THE NAV UL — flex row, full width, no default padding */ #ast-desktop-header ul#ast-hf-menu-1 { display: flex !important; align-items: center !important; width: 100% !important; justify-content: flex-start !important; flex-wrap: nowrap !important; padding-left: 0 !important; margin-left: 0 !important; } /* Right-side nav items — Register, Login, Cart */ #ast-desktop-header .ast-below-header-bar { position: relative !important; } /* --- Menu 2 layout (right section) — Register, Login, My Account --- */ /* NOTE: Do NOT set display here — Astra Header Builder controls visibility */ #ast-desktop-header #ast-hf-menu-2 { align-items: center !important; gap: 0 !important; list-style: none !important; } /* Register & Login links — white text with gold border separators */ /* NOTE: Do NOT set display here — Astra Header Builder controls visibility */ #ast-hf-menu-2 li:has(> a[href*="/register/"]), #ast-hf-menu-2 li:has(> a[href*="/login/"]) { align-items: center !important; border-left: 1px solid rgba(255, 204, 51, 0.25) !important; } #ast-hf-menu-2 li:has(> a[href*="/login/"]) { border-right: 1px solid rgba(255, 204, 51, 0.25) !important; } #ast-hf-menu-2 li:has(> a[href*="/register/"]) > a, #ast-hf-menu-2 li:has(> a[href*="/login/"]) > a { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; padding: 0.75rem clamp(1rem, 2vw, 1.5rem) !important; display: flex !important; align-items: center !important; transition: all var(--ik-duration) ease !important; font-family: var(--ik-font-body) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; } #ast-hf-menu-2 li:has(> a[href*="/register/"]) > a:hover, #ast-hf-menu-2 li:has(> a[href*="/login/"]) > a:hover { background: rgba(255, 204, 51, 0.06) !important; color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } /* My Account dropdown in Menu 2 — white text (only Golden Ticket is gold) */ #ast-hf-menu-2 .member-only > a { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* --- Header cart widget (Astra WooCommerce cart in right section) --- */ #ast-desktop-header .ast-header-woo-cart { display: flex !important; align-items: center !important; margin-left: 0.5rem !important; } /* Hide the "Cart / $0.00" text, show only the bag icon */ .ast-site-header-cart .ast-woo-header-cart-info-wrap { display: none !important; } /* Remove the outline border Astra adds */ .ast-menu-cart-outline .ast-addon-cart-wrap { border: none !important; padding: 0 !important; } .ast-site-header-cart .ast-cart-menu-wrap, .ast-site-header-cart .ast-addon-cart-wrap { border: none !important; background: transparent !important; } /* Cart icon — gold */ .ast-site-header-cart .ast-icon, .ast-site-header-cart svg, .ast-site-header-cart .astra-cart-drawer-title svg { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; fill: var(--ik-gold) !important; width: 22px !important; height: 22px !important; display: inline-block !important; } /* Header social icons (Facebook etc.) — Astra renders inline SVG with no fill attribute, so it defaults to black and disappears on the dark header. Force white to match nav-item color. */ .ast-header-social-1-wrap .ahfb-svg-iconset svg, .ast-header-social-1-wrap .ahfb-svg-iconset svg path { fill: #FFFFFF !important; } .ast-site-header-cart a.cart-container { padding: 0.5rem !important; display: flex !important; align-items: center !important; } /* Cart count badge (Astra uses ::after on the icon element) */ .ast-site-header-cart .ast-cart-menu-wrap .count, .ast-site-header-cart .ast-addon-cart-wrap .count, .ast-site-header-cart i.astra-icon::after { background: var(--ik-gold) !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; font-family: var(--ik-font-body) !important; font-size: 10px !important; font-weight: 700 !important; min-width: 16px !important; height: 16px !important; line-height: 16px !important; border-radius: 50% !important; text-align: center !important; } /* --- Right section layout — Menu 2 + Cart side by side --- */ #ast-desktop-header .site-header-below-section-right { display: flex !important; align-items: center !important; gap: 0 !important; } /* --- Nav links --- */ .main-header-menu .menu-link, .main-header-menu .menu-item > a { font-family: var(--ik-font-body) !important; font-size: 13px !important; font-weight: 500 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; padding: 0.75rem 0.875rem !important; transition: color var(--ik-duration) ease !important; text-decoration: none !important; position: relative !important; white-space: nowrap !important; } .main-header-menu .menu-link:hover, .main-header-menu .menu-item > a:hover { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } .main-header-menu .current-menu-item > a, .main-header-menu .current_page_item > a { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* Active state — keep white (only the .golden-ticket-btn item should read as gold; other current-page items inherit the default white from the rule above at .main-header-menu .current-menu-item > a). The gold variant here previously made the "current" nav item look like Golden Ticket, which Ruth flagged 2026-05-16. The :not(.golden-ticket-btn) guard is belt-and-suspenders — Golden Ticket's own rule at lines 637-647 already wins specificity, but this makes intent explicit. */ .main-header-menu > li.current-menu-item:not(.golden-ticket-btn) > .menu-link, .main-header-menu > li.current_page_item:not(.golden-ticket-btn) > .menu-link { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* Hover — just brighten to white, no underline pseudo-element */ .main-header-menu > li > .menu-link::after { display: none !important; } /* --- Dropdowns --- These styles are DESKTOP-ONLY (floating dropdown card with bg + border + shadow + backdrop-filter). On mobile the sub-menu lives inline in the drawer and needs different treatment (see line ~1080 mobile sub-menu block). Scoped to min-width:769 to keep the desktop look without bleeding into the mobile drawer where the floating-card styling looked broken. */ @media (min-width: 769px) { .main-header-menu .sub-menu { background: rgba(0, 0, 0, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: var(--ik-radius-sm) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important; padding: 8px !important; min-width: 200px !important; backdrop-filter: blur(20px) !important; } .main-header-menu .sub-menu .menu-link { padding: 8px 16px !important; border-radius: var(--ik-radius-sm) !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0.02em !important; font-weight: 400 !important; color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; } .main-header-menu .sub-menu .menu-link::after { display: none !important; } .main-header-menu .sub-menu .menu-link:hover { background: rgba(255, 255, 255, 0.04) !important; color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: rgba(255,255,255,0.9) !important; } } /* Dropdown arrows */ .ast-header-navigation-arrow, .ast-icon.icon-arrow { color: rgba(255,255,255,0.25) !important; -webkit-text-fill-color: rgba(255,255,255,0.25) !important; } /* Account button in nav */ .ik-account-btn > a { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } /* --- CTA button in header — outline style (luxury) --- */ .ast-custom-button, .ast-builder-button-wrap .ast-custom-button-link .ast-custom-button { background: transparent !important; color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; font-family: var(--ik-font-body) !important; font-weight: 500 !important; font-size: 12px !important; padding: 10px 24px !important; border-radius: 0 !important; border: 1px solid rgba(196, 163, 90, 0.4) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; transition: all var(--ik-duration) ease !important; } .ast-custom-button:hover, .ast-builder-button-wrap .ast-custom-button-link:hover .ast-custom-button { border-color: var(--ik-gold) !important; background: rgba(196, 163, 90, 0.06) !important; color: var(--ik-gold-bright) !important; -webkit-text-fill-color: var(--ik-gold-bright) !important; } /* --- Tablet nav extension (2026-05-18 Ruth) ----------------------------- Astra's default header-swap breakpoint is 921px (inline @media (max-width: 921.9px) hides #ast-desktop-header, shows #ast-mobile-header). At iPad Pro 12" portrait (1024) the desktop nav still renders, REGISTER + LOGIN wrap onto two lines because the row runs out of horizontal room. We EXTEND that header-swap up to <=1099 here (between 921 and 1099 we ALSO force the swap). We deliberately do NOT change Astra's global breakpoint setting (e.g. via astra_header_break_point filter) because that would also move sidebar collapse, content-layout, and other Astra breakpoint-conditional behaviors -- causing layout regressions on pages we did not intend to touch. This is header visibility ONLY. The hamburger's click handler is bound on page load directly to .menu-toggle so the off-canvas drawer works at the extended range too. */ @media (max-width: 1099px) { body #ast-desktop-header { display: none !important; } body #ast-mobile-header { display: block !important; } } /* 2026-05-18 ARCHITECTURAL DECOUPLING (Ruth) ----------------------------- We flip our own `ik-header-mobile-nav-extended` class on body at <=1099 (via the JS in functions.php), so Astra's `ast-header-break-point` stays at its native <=921 threshold and doesn't drag its other mobile-mode behaviors (sidebar collapse, table-row stacking, content-density shifts) into tablet. For the drawer to actually open at our extended range, we need to mirror Astra's drawer-display rule against our class too. Astra's rule is: .ast-main-header-nav-open.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content { display: block } We add an equivalent that fires on our class. Any additional Astra drawer behaviors that are class-gated on `ast-header-break-point` and which we want at tablet need a parallel rule here. Listed surgically rather than blanket-mapped so we don't pull in mobile-mode layout rules accidentally. */ body.ik-header-mobile-nav-extended.ast-main-header-nav-open .ast-mobile-header-wrap .ast-mobile-header-content { display: block !important; } /* --- Mobile header & menu --- */ .ast-mobile-header-wrap { background: rgba(0, 0, 0, 0.97) !important; backdrop-filter: blur(30px) !important; } .menu-toggle, .ast-mobile-menu-trigger-fill { background: transparent !important; border: none !important; border-left: none !important; border-right: none !important; border-radius: 0 !important; color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; padding: 0 !important; } /* Mobile header grid row — match desktop nav padding so logo and hamburger align with content edges */ #ast-mobile-header .ast-builder-grid-row { padding: 0 clamp(1.5rem, 4vw, 3rem) !important; } /* Remove the line between mobile header bar and menu content */ #ast-mobile-header .ast-mobile-header-bar, #ast-mobile-header .site-header-primary-section-left, #ast-mobile-header .ast-builder-grid-row, .ast-mobile-header-wrap .ast-primary-header-bar, .ast-mobile-header-wrap .ast-main-header-bar-alignment { border-bottom: none !important; box-shadow: none !important; } /* Mobile drawer outer surface: dark bg + asymmetric padding (Ruth's spec 2026-05-17): .5rem top, 3rem horizontal (matches logo's left edge and X's right edge in the header bar), 1.5rem bottom. The inner nav/menu wrappers used to ALSO get padding: 1.5rem, which stacked across 4 nested layers (each adding ~24px on every side) and asymmetrically — .ast-builder-menu-1 only matched the MAIN menu so the secondary (MY ACCOUNT) menu skipped one layer and sat 21px further left. Zeroing all inner wrappers makes every menu inherit the drawer's natural inset uniformly. No border-top either (Ruth removed it). */ .ast-mobile-header-content { background: var(--ik-bg-deep) !important; border: none !important; padding: .5rem 3rem 1.5rem !important; } .ast-mobile-header-content .main-header-bar-navigation, .ast-mobile-header-content .main-navigation, .ast-mobile-header-content .ast-builder-menu-1, .ast-mobile-header-content .ast-builder-menu-2 { background: var(--ik-bg-deep) !important; border-top: none !important; padding: 0 !important; } /* Astra core ships .ast-builder-layout-element:not(.ast-builder-menu):not(...) with padding: 15px 20px (drawer-internal layout elements like the cart row). In our drawer, that becomes redundant padding on top of the outer drawer's 3rem horizontal — and the cart row ends up inset more than the menu items. Zero it so cart inherits the drawer's natural inset like every menu item. */ .ast-mobile-header-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element), .ast-mobile-popup-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element) { padding: 0 !important; } /* Mobile menu — dark background (override Astra's rgb(249,249,249) default) */ #ast-mobile-header .main-header-menu, .ast-mobile-header-wrap .main-header-menu, .ast-mobile-header-content .main-header-menu { background: var(--ik-bg-deep) !important; background-color: var(--ik-bg-deep) !important; } /* Mobile menu links — UPPERCASE + 0.1em letter-spacing to mirror desktop nav. Earlier this was deliberately mixed-case; Ruth confirmed 2026-04-28 that was not intentional and the two should match. */ .ast-mobile-header-content .main-header-menu .menu-link, .ast-mobile-header-content .main-header-menu .menu-item > a, #ast-mobile-header .main-header-menu .menu-link, #ast-mobile-header .main-header-menu .menu-item > a { font-size: 15px !important; font-weight: 500 !important; padding: 14px 0 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: transparent !important; } .ast-mobile-header-content .main-header-menu .menu-link:hover, .ast-mobile-header-content .main-header-menu .menu-item > a:hover, #ast-mobile-header .main-header-menu .menu-link:hover, #ast-mobile-header .main-header-menu .menu-item > a:hover { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } .ast-mobile-header-content .main-header-menu .menu-link::after, #ast-mobile-header .main-header-menu .menu-link::after { display: none !important; } /* Mobile menu sub-menus — Ruth's spec 2026-05-17: subtle inset container (slightly lighter than drawer bg so it reads as nested under parent), no harsh border/shadow/radius, items uppercase with separators between, no shrink-wrapped min-width (fills drawer's natural inset). */ #ast-mobile-header .main-header-menu .sub-menu, .ast-mobile-header-wrap .main-header-menu .sub-menu { background: var(--ik-bg-raised) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; width: 100% !important; backdrop-filter: none !important; } /* Mobile sub-menu items — match parent menu typography (uppercase, white, 17px, letter-spacing 1.7px) so the sub-nav reads as a continuation of the menu rhythm. Separator between items via border-bottom. padding: 14px 1.5rem — vertical matches parent menu rhythm; horizontal 1.5rem gives breathing room inside the gray inset container so items aren't flush against its edges (Ruth, 2026-05-17). */ #ast-mobile-header .main-header-menu .sub-menu .menu-link, .ast-mobile-header-wrap .main-header-menu .sub-menu .menu-link { display: block !important; padding: 14px 1.5rem !important; border-radius: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 17px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 1.7px !important; line-height: 51px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } #ast-mobile-header .main-header-menu .sub-menu > li:last-child .menu-link, .ast-mobile-header-wrap .main-header-menu .sub-menu > li:last-child .menu-link { border-bottom: none !important; } /* (Removed 2026-04-27: nav show/hide rules belong on the staging site (WP menu admin + PHP/plugin conditionals), not in this CSS file. The removed rules were: - `.menu-item > a[href*="/my-watchlist|/watchlist|/my-account|/cart"] { display: none }` scoped to `#ast-mobile-header`/`.ast-mobile-header-content` — were unconditionally hiding those items on mobile, comment claimed logged-out-only but had no scope. - The same selectors against the parent `
  • ` via `:has()`. - `.main-header-menu .menu-item:first-child { display: none }` — intended to hide "Home" but Home was removed from the WP menu admin, so the rule was hiding whatever happened to be first (Golden Ticket on top-level + Isopod Care under Help + My Account inside the My Account submenu, because :first-child leaks into nested ULs). - `.menu-item-2485 { display: none }` (My Bids/Wins) on mobile — same mockup-leftover pattern. See feedback_css_appearance_only.md for the universal rule.) */ /* Mobile menu dropdown arrows — gold */ #ast-mobile-header .ast-header-navigation-arrow, #ast-mobile-header .ast-icon.icon-arrow, #ast-mobile-header .ast-menu-toggle { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } /* Astra core ships .ast-header-break-point .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle with right:20px + horizontal padding ~14.5px, which makes the caret sit ~34px in from the menu row's right edge. Force flush-right so the caret aligns with the right edge of the drawer's natural inset — same column the cart bag uses. */ #ast-mobile-header .ast-menu-toggle, .ast-mobile-header-wrap .ast-menu-toggle, .ast-mobile-header-content .ast-menu-toggle { right: 0 !important; padding-right: 0 !important; padding-left: 0 !important; } /* Mobile nav — spacing before Register/Login (gap-only separator, no border line; Ruth 2026-05-18 flagged the gold border-top as a rogue line in the drawer). The 12px margin + 12px padding gives a ~24px visual gap that distinguishes Register/Login from the main nav items above without needing a horizontal rule. */ #ast-hf-menu-1-mobile .menu-item:has(> a[href*="/register"]), .ast-mobile-header-content .menu-item:has(> a[href*="/register"]) { margin-top: 12px !important; padding-top: 12px !important; } /* Register — gold, centered (uniform with Login below). The earlier "outline button" border was inconsistent with Login's plain-gold treatment. */ #ast-hf-menu-1-mobile .menu-item:has(> a[href*="/register"]) > .menu-link, .ast-mobile-header-content .menu-item:has(> a[href*="/register"]) > .menu-link { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; display: block !important; text-align: center !important; padding: 14px 0 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; font-size: 14px !important; font-weight: 600 !important; border-bottom: none !important; } /* Login — gold text, centered in mobile menu */ #ast-hf-menu-1-mobile .menu-item:has(> a[href*="/login"]) > .menu-link, .ast-mobile-header-content .menu-item:has(> a[href*="/login"]) > .menu-link { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; text-align: center !important; display: block !important; font-size: 14px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border-bottom: none !important; } /* Hide "Take Action" Astra header button in mobile menu */ .ast-mobile-header-content .ast-header-button-1, .ast-mobile-header-content [data-section="section-hb-button-1"], #ast-mobile-header .ast-header-button-1 { display: none !important; } /* Clean up empty dividers/borders in mobile menu area */ .ast-mobile-header-content .ast-builder-menu-1 > .ast-main-header-bar-alignment, .ast-mobile-header-content .main-header-bar-navigation, .ast-mobile-header-content nav.site-navigation, .ast-mobile-header-content .main-navigation { border: none !important; padding-top: 0 !important; } .ast-mobile-header-content { border: none !important; padding: 0.5rem 1.5rem 1.5rem !important; } /* Kill ALL stray borders/lines inside mobile header content */ .ast-mobile-header-content *, .ast-mobile-header-content::before, .ast-mobile-header-content::after { border-top: none !important; } /* Re-add only the subtle separator between menu items */ #ast-mobile-header .main-header-menu .menu-link, .ast-mobile-header-content .main-header-menu .menu-link { border-bottom: 1px solid rgba(255,255,255,0.06) !important; } /* ══════════════════════════════════════════════════════════════ 10. HERO SECTION Cinematic full-width hero with Ken Burns zoom, dark gradient overlay, overline label, Playfair heading, and dual CTA buttons. ══════════════════════════════════════════════════════════════ */ .entry-content > .wp-block-group.alignfull.has-background:first-child, .entry-content > .wp-block-group.alignfull:first-of-type { background-color: #000 !important; background-image: var(--ik-img-hero) !important; background-size: cover !important; background-position: center 35% !important; background-repeat: no-repeat !important; padding-top: clamp(5rem, 10vw, 8rem) !important; padding-bottom: clamp(5rem, 10vw, 8rem) !important; margin-bottom: 0 !important; position: relative !important; overflow: hidden !important; min-height: auto !important; display: flex !important; align-items: center !important; animation: heroZoom 25s ease-in-out infinite alternate !important; background-attachment: fixed !important; } /* Ken Burns slow zoom on the background */ @keyframes heroZoom { 0% { background-size: 100% auto; } 100% { background-size: 108% auto; } } /* Dark gradient overlay + vignette combined */ .entry-content > .wp-block-group.alignfull:first-of-type::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.85) 100%), radial-gradient(ellipse at 50% 0%, rgba(196, 163, 90, 0.03) 0%, transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.4) 0%, transparent 70%), radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.4) 0%, transparent 70%) !important; z-index: 1 !important; pointer-events: none !important; } /* Hero content container */ .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-columns { gap: clamp(2rem, 5vw, 4rem) !important; align-items: center !important; max-width: var(--ik-max-width) !important; margin-inline: auto !important; padding-inline: clamp(2rem, 6vw, 4rem) !important; position: relative !important; z-index: 2 !important; flex-wrap: nowrap !important; } /* Hero text column — wider than image column */ .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-column:first-child { width: 55% !important; min-width: 55% !important; flex-grow: 1 !important; flex-shrink: 0 !important; } /* Hero image column — shrink it down */ .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-column:last-child { width: 40% !important; min-width: 0 !important; flex-shrink: 1 !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; } /* Overline label — "Premium Auction Platform" */ .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-column:first-child::before { content: 'Premium Auction Platform' !important; display: block !important; font-family: var(--ik-font-body) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.25em !important; text-transform: uppercase !important; color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; margin-bottom: 16px !important; opacity: 1 !important; } /* Hero heading — large serif. ONLY on homepage (page-id-1381) + Golden Ticket (page-id-2594). Other pages with a dark hero block (About, Isopod Care, etc.) should use Inter per STYLE-GUIDE.md. */ body.page-id-1381 .entry-content > .wp-block-group.alignfull:first-of-type h1, body.page-id-1381 .entry-content > .wp-block-group.alignfull:first-of-type h1.wp-block-heading, body.page-id-1381 .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-heading, body.page-id-2594 .entry-content > .wp-block-group.alignfull:first-of-type h1, body.page-id-2594 .entry-content > .wp-block-group.alignfull:first-of-type h1.wp-block-heading, body.page-id-2594 .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-heading { font-family: 'Playfair Display', Georgia, serif !important; font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; margin-bottom: 20px !important; } /* Content pages dark hero H1 — Inter font, large but not Playfair (per STYLE-GUIDE) */ body:not(.page-id-1381):not(.page-id-2594) .entry-content > .wp-block-group.alignfull:first-of-type h1, body:not(.page-id-1381):not(.page-id-2594) .entry-content > .wp-block-group.alignfull:first-of-type h1.wp-block-heading { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(2rem, 1.5rem + 2vw, 3rem) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* === Content pages with a top-level H1 (FAQ, Policies, Contact, etc.) === */ /* H1 at the root of .entry-content → full-bleed gold bar. Excludes homepage (1381), GT (2594), Auctions (1384), Sellers (1386) which have their own H1 rules. Excludes About/Isopod Care because their H1 is wrapped in a dark hero block (not a direct child of .entry-content). */ body:not(.page-id-1381):not(.page-id-2594):not(.page-id-1384):not(.page-id-1386) .entry-content > h1, body:not(.page-id-1381):not(.page-id-2594):not(.page-id-1384):not(.page-id-1386) .entry-content > h1.wp-block-heading { font-family: 'Inter', sans-serif !important; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem) !important; font-weight: 700 !important; line-height: 1 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; background: linear-gradient(90deg, #C99A00, #FFCC33 30%, #FFD966 50%, #FFCC33 70%, #C99A00) !important; border-top: 1px solid rgba(255,220,100,0.6) !important; border-bottom: 1px solid rgba(160,130,40,0.5) !important; border-left: none !important; border-right: none !important; width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; margin: 0 -50vw 32px !important; padding: 1.5rem 2rem !important; text-align: center !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; box-sizing: border-box !important; text-shadow: none !important; display: block !important; } /* === Login (1569) + Register (1572) + My Bids (2489) + My Won Auctions (1696): H1 lives in header.entry-header, not entry-content. Gold bar treatment. === */ body.page-id-1569 article .entry-header h1, body.page-id-1569 article .entry-header h1.entry-title, body.page-id-1572 article .entry-header h1, body.page-id-1572 article .entry-header h1.entry-title, body.page-id-2489 article .entry-header h1, body.page-id-2489 article .entry-header h1.entry-title, body.page-id-1696 article .entry-header h1, body.page-id-1696 article .entry-header h1.entry-title { font-family: 'Inter', sans-serif !important; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem) !important; font-weight: 700 !important; line-height: 1 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; background: linear-gradient(90deg, #C99A00, #FFCC33 30%, #FFD966 50%, #FFCC33 70%, #C99A00) !important; border-top: 1px solid rgba(255,220,100,0.6) !important; border-bottom: 1px solid rgba(160,130,40,0.5) !important; border-left: none !important; border-right: none !important; width: 100% !important; max-width: none !important; margin: 0 0 32px 0 !important; padding: 1.5rem 2rem !important; text-align: center !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; box-sizing: border-box !important; text-shadow: none !important; display: block !important; opacity: 1 !important; } /* Make sure entry-header itself doesn't constrain the gold bar width */ body.page-id-1569 article .entry-header, body.page-id-1572 article .entry-header, body.page-id-2489 article .entry-header, body.page-id-1696 article .entry-header { margin: 0 !important; padding: 0 !important; } /* === Policies page (page-id-1394) — sub-section H2s → plain text (no gold bar) === */ body.page-id-1394 .entry-content h2, body.page-id-1394 .entry-content h2.wp-block-heading { font-family: 'Inter', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; background: none !important; background-image: none !important; border: none !important; width: auto !important; max-width: 100% !important; margin: 32px 0 12px 0 !important; padding: 0 !important; text-align: left !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: none !important; box-sizing: content-box !important; } /* Hero body text */ .entry-content > .wp-block-group.alignfull:first-of-type .has-white-color, .entry-content > .wp-block-group.alignfull:first-of-type p:not(.wp-block-heading) { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-lg) !important; font-weight: 400 !important; color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; line-height: 1.8 !important; max-width: none !important; margin-top: 0 !important; margin-bottom: 24px !important; } /* Hero buttons container. Post_content lacks the `is-layout-flex` class WP normally generates, so the container falls back to display:block and `gap` is ignored — buttons render flush. Force flex here so the 1rem gap actually applies. */ .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-buttons { display: flex !important; flex-wrap: wrap !important; gap: 1rem !important; margin-top: 0 !important; } /* Primary CTA — gold filled, prominent. Padding + 1px transparent border match the secondary button so both render at identical dimensions. No box-shadow halo (it read as a yellow "border" around the gold button). */ .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-button:first-child .wp-block-button__link { background: var(--ik-gold) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 1px solid transparent !important; font-family: var(--ik-font-body) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 16px 44px !important; border-radius: 0 !important; transition: all var(--ik-duration) ease !important; text-decoration: none !important; box-shadow: none !important; } .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-button:first-child .wp-block-button__link:hover { background: var(--ik-gold-bright) !important; box-shadow: none !important; transform: translateY(-2px) !important; } /* Golden Ticket hero button — gold outline with ticket icon */ .entry-content > .wp-block-group.alignfull:first-of-type .ik-gt-hero-btn .wp-block-button__link { background: transparent !important; color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; border: 1px solid rgba(255, 204, 51, 0.4) !important; font-family: var(--ik-font-body) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 16px 44px !important; border-radius: 0 !important; transition: all var(--ik-duration) ease !important; text-decoration: none !important; } .entry-content > .wp-block-group.alignfull:first-of-type .ik-gt-hero-btn .wp-block-button__link:hover { border-color: var(--ik-gold) !important; background: rgba(255, 204, 51, 0.06) !important; color: var(--ik-gold-bright) !important; -webkit-text-fill-color: var(--ik-gold-bright) !important; } /* Secondary CTA — gold outline */ .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-button:nth-child(n+2) .wp-block-button__link { background: transparent !important; color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; border: 1px solid rgba(196, 163, 90, 0.35) !important; font-family: var(--ik-font-body) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 16px 44px !important; border-radius: 0 !important; transition: all var(--ik-duration) ease !important; text-decoration: none !important; } .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-button:nth-child(n+2) .wp-block-button__link:hover { border-color: var(--ik-gold) !important; background: rgba(196, 163, 90, 0.04) !important; } /* Hero right column — logo/figure container */ .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-column:last-child figure, .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-column:last-child .wp-block-image { margin-left: auto !important; margin-right: 0 !important; text-align: right !important; } /* Hero logo image */ .entry-content > .wp-block-group.alignfull:first-of-type .wp-block-column:last-child figure img { max-width: 480px !important; opacity: 1 !important; position: relative !important; z-index: 1 !important; filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.5)) !important; } /* Gold line at bottom of hero — none, trust bar handles separation */ .entry-content > .wp-block-group.alignfull:first-of-type { border-bottom: none !important; box-shadow: none !important; } /* Trust bar — now using HTML, disable the ::after version */ .entry-content > .wp-block-group.alignfull:first-of-type::after { display: none !important; } /* ══════════════════════════════════════════════════════════════ 10b. CONTENT-PAGE HERO BANNERS About (1388) + Isopod Care (1744) inherited the homepage's flex hero layout but their content is just H1 + tagline — not the 55/40 column split. Override: full-bleed banner, centered stack, drop the Ken Burns animation and fixed bg attachment (which look jittery on shorter pages and break iOS scroll). ══════════════════════════════════════════════════════════════ */ body.page-id-1388 #content .entry-content > .wp-block-group.alignfull:first-of-type, body.page-id-1744 #content .entry-content > .wp-block-group.alignfull:first-of-type { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; margin-top: 0 !important; margin-right: -50vw !important; margin-bottom: 48px !important; margin-left: -50vw !important; display: block !important; animation: none !important; background-attachment: scroll !important; background-position: center 40% !important; padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem) !important; min-height: auto !important; text-align: center !important; } /* Stronger overlay so the H1 reads cleanly across image variations */ body.page-id-1388 #content .entry-content > .wp-block-group.alignfull:first-of-type::before, body.page-id-1744 #content .entry-content > .wp-block-group.alignfull:first-of-type::before { background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 100%), radial-gradient(ellipse at 50% 50%, rgba(196,163,90,0.05) 0%, transparent 60%) !important; } /* H1 — Inter, bold, white, centered */ /* Note: About (1388) has h1 as direct child of .alignfull. Isopod Care (1744) nests h1 inside an inner constrained group, so we need the deeper selector for that page. */ body.page-id-1388 #content .entry-content > .wp-block-group.alignfull:first-of-type > h1, body.page-id-1744 #content .entry-content > .wp-block-group.alignfull:first-of-type > h1, body.page-id-1744 #content .entry-content > .wp-block-group.alignfull:first-of-type > .wp-block-group > h1 { font-family: var(--ik-font-body) !important; font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; margin: 0 auto !important; max-width: var(--ik-max-width) !important; line-height: 1.15 !important; text-align: center !important; position: relative !important; z-index: 2 !important; width: auto !important; display: block !important; text-shadow: 0 2px 16px rgba(0,0,0,0.5) !important; padding: 0 !important; background: none !important; border: none !important; } /* Tagline paragraph — sits below H1, centered, slightly muted white */ body.page-id-1388 #content .entry-content > .wp-block-group.alignfull:first-of-type p, body.page-id-1744 #content .entry-content > .wp-block-group.alignfull:first-of-type p { font-family: var(--ik-font-body) !important; font-size: clamp(0.95rem, 1.2vw, 1.0625rem) !important; font-weight: 400 !important; letter-spacing: 0.04em !important; color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; margin: 18px auto 0 !important; max-width: 720px !important; text-align: center !important; line-height: 1.55 !important; position: relative !important; z-index: 2 !important; width: auto !important; } /* Subtle gold accent under the H1 — divider line. Isopod Care nests h1 inside an inner group; include the deeper selector. */ body.page-id-1388 #content .entry-content > .wp-block-group.alignfull:first-of-type > h1::after, body.page-id-1744 #content .entry-content > .wp-block-group.alignfull:first-of-type > h1::after, body.page-id-1744 #content .entry-content > .wp-block-group.alignfull:first-of-type > .wp-block-group > h1::after { content: '' !important; display: block !important; width: 64px !important; height: 2px !important; background: var(--ik-gold) !important; margin: 18px auto 0 !important; } /* ══════════════════════════════════════════════════════════════ 10c. CONTENT-PAGE CLOSING-LINE CENTERING + ISOPOD CARE CTA - About / Contact: closing/info paragraphs at the root of entry-content centered. - FAQ: intro paragraph centered with breathing room before the accordion blocks. - Isopod Care CTA box ("Ready to Start Your Isopod Colony?"): proper padding, design-system dark surface, centered stack. The block's inline `background-color:#0f2230` was being overridden to near-black and its padding-left/right zeroed by the universal alignfull rule (line 351), so it read as a no-padding mistake. ══════════════════════════════════════════════════════════════ */ /* About — center the closing "Explore our live auctions..." paragraph */ body.page-id-1388 #content .entry-content > p { text-align: center !important; } /* FAQ — center the "For full details..." paragraph + add space below */ body.page-id-1392 #content .entry-content > p { text-align: center !important; margin-bottom: 32px !important; } /* Contact — center the support info paragraphs */ body.page-id-1390 #content .entry-content > p { text-align: center !important; } /* Isopod Care CTA box — second .alignfull.has-background is the "Ready to Start Your Isopod Colony?" block. Restore proper padding + design-system dark surface. */ body.page-id-1744 #content .entry-content > .wp-block-group.alignfull.has-background:not(:first-of-type) { background: #1E1E1B !important; padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) !important; margin: 48px 0 !important; border: none !important; border-radius: 0 !important; text-align: center !important; /* Stay at content-width — DO NOT break out to viewport */ width: 100% !important; max-width: 100% !important; position: static !important; left: auto !important; } /* Inner content constrained for comfortable reading */ body.page-id-1744 #content .entry-content > .wp-block-group.alignfull.has-background:not(:first-of-type) > * { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; } body.page-id-1744 #content .entry-content > .wp-block-group.alignfull.has-background:not(:first-of-type) h2 { font-family: var(--ik-font-body) !important; font-size: clamp(1.25rem, 2.4vw, 1.625rem) !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; margin: 0 0 12px !important; line-height: 1.25 !important; text-align: center !important; } body.page-id-1744 #content .entry-content > .wp-block-group.alignfull.has-background:not(:first-of-type) p { font-family: var(--ik-font-body) !important; font-size: 1rem !important; color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; margin: 0 auto 24px !important; text-align: center !important; line-height: 1.55 !important; } body.page-id-1744 #content .entry-content > .wp-block-group.alignfull.has-background:not(:first-of-type) .wp-block-buttons { justify-content: center !important; margin: 0 !important; } /* ══════════════════════════════════════════════════════════════ 11. GOLDEN TICKET BANNER Full-width gold gradient CTA strip between hero and trust bar. Includes shimmer animation, hat decoration, and ticket graphic. ══════════════════════════════════════════════════════════════ */ .ik-gt-banner { display: block !important; width: 100% !important; background: linear-gradient( 135deg, #7A5C00 0%, #9A7800 8%, #C9A000 18%, #E6B800 28%, #FFCC33 38%, #FFE066 48%, #FFF2A8 52%, #FFE066 56%, #FFCC33 65%, #E6B800 75%, #C9A000 85%, #9A7800 92%, #7A5C00 100% ) !important; border-top: 2px solid #FFE066 !important; border-bottom: 2px solid #FFE066 !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; transition: all 0.4s ease !important; } .ik-gt-banner:hover { background: linear-gradient( 135deg, #8A6A00 0%, #AA8800 8%, #D4AA00 18%, #F0C800 28%, #FFCC33 38%, #FFE680 48%, #FFF5C0 52%, #FFE680 56%, #FFCC33 65%, #F0C800 75%, #D4AA00 85%, #AA8800 92%, #8A6A00 100% ) !important; } /* Bright sheen centered behind the ticket graphic */ .ik-gt-banner-glow { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: radial-gradient(ellipse 35% 140% at 75% 50%, rgba(255,255,255,0.35) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 30% 0%, rgba(255,255,255,0.08) 0%, transparent 50%) !important; pointer-events: none !important; z-index: 0 !important; } /* Shimmer sweep animation */ .ik-gt-banner::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 50% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), rgba(255,255,255,0.3), rgba(255,255,255,0.15), transparent) !important; animation: gtShimmer 4s ease-in-out infinite !important; pointer-events: none !important; z-index: 1 !important; } @keyframes gtShimmer { 0% { left: -100%; } 100% { left: 200%; } } .ik-gt-banner-inner { display: flex !important; align-items: center !important; justify-content: center !important; gap: clamp(1.5rem, 4vw, 3rem) !important; max-width: var(--ik-max-width) !important; margin: 0 auto !important; padding: 36px clamp(2rem, 5vw, 3rem) !important; position: relative !important; z-index: 3 !important; } .ik-gt-banner-icon { width: 52px !important; height: 52px !important; flex-shrink: 0 !important; filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.3)) drop-shadow(0 0 6px rgba(255,255,255,0.3)) !important; } /* Hat hanging off the top-left of the G */ .ik-gt-banner-hat { position: absolute !important; width: 34px !important; height: auto !important; top: 0px !important; left: -12px !important; transform: rotate(-24deg) !important; pointer-events: none !important; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5)) !important; transition: transform 0.4s ease !important; z-index: 4 !important; } .ik-gt-banner:hover .ik-gt-banner-hat { transform: rotate(-20deg) translateY(-2px) !important; } .ik-gt-banner-text { display: flex !important; flex-direction: column !important; gap: 4px !important; } .ik-gt-banner-label { position: relative !important; font-family: var(--ik-font-display) !important; font-size: 36px !important; font-weight: 900 !important; color: #1A1000 !important; -webkit-text-fill-color: #1A1000 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1.2 !important; text-shadow: 2px 3px 1px rgba(255,255,240,0.7) !important; padding-top: 10px !important; } .ik-gt-banner-tagline { font-family: var(--ik-font-display) !important; font-size: 18px !important; font-weight: 400 !important; color: #3D2800 !important; -webkit-text-fill-color: #3D2800 !important; letter-spacing: 0.02em !important; line-height: 1.4 !important; } .ik-gt-banner-btn-img { height: 140px !important; width: auto !important; flex-shrink: 0 !important; margin: -20px 0 !important; transition: transform 0.3s ease, filter 0.3s ease !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important; } .ik-gt-banner:hover .ik-gt-banner-btn-img { transform: scale(1.05) !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15)) !important; } /* --- Staging GT banner (image-based, class .gt-hp-banner) --- */ .gt-hp-banner { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .gt-hp-banner-link { display: block !important; width: 100% !important; text-decoration: none !important; } .gt-hp-banner-img { width: 100% !important; height: auto !important; max-height: 200px !important; object-fit: cover !important; display: block !important; border: none !important; } /* ══════════════════════════════════════════════════════════════ 12. TRUST BAR Full-width bar with gold diamond separators between values. Stacks into a bordered list on mobile. Placed LAST in source order so responsive overrides win. ══════════════════════════════════════════════════════════════ */ /* Trust bar — HTML version, full-width */ .ik-trust-bar { background: linear-gradient(180deg, #222018 0%, #110F0A 50%, #000000 100%) !important; border-top: 1px solid rgba(255, 204, 51, 0.25) !important; padding: 18px 2rem !important; width: 100% !important; margin: 0 !important; } .ik-trust-bar-inner { max-width: 1120px !important; margin: 0 auto !important; padding: 0 16px !important; } /* NOTE FOR DEVELOPER: Add this HTML between the hero block and the "Go To Auction Floor" block in the WordPress page editor (Custom HTML block):
    Built by Keepers Earned Reputation Growth Over Ego Responsible Keeping Structured for Stability
    */ /* Trust bar flex layout — base rule (overridden by responsive grid below) */ .ik-trust-bar-inner { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 0 !important; max-width: var(--ik-max-width) !important; margin: 0 auto !important; padding: 0 16px !important; } /* Hide
    and

    wrappers WordPress Classic editor inserts */ .ik-trust-bar-inner br { display: none !important; } /* Classic editor wraps inline content in

    tags — flatten them */ .ik-trust-bar-inner p { display: inline !important; margin: 0 !important; padding: 0 !important; } span.ik-trust-item { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-family: var(--ik-font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; white-space: nowrap !important; } /* Gold diamond separators between items. Works with direct siblings AND when

    tags wrap each span. First item has no separator (handled by :first-child exclusion). */ span.ik-trust-item ~ span.ik-trust-item::before, .ik-trust-bar-inner p ~ p span.ik-trust-item::before { content: '◆' !important; color: var(--ik-gold-dark) !important; -webkit-text-fill-color: var(--ik-gold-dark) !important; font-size: 5px !important; margin: 0 clamp(0.75rem, 1.5vw, 1.25rem) !important; display: inline-block !important; vertical-align: middle !important; } /* Don't double-up diamonds if spans are direct siblings inside

    */ .ik-trust-bar-inner p:first-child span.ik-trust-item::before { display: none !important; } /* ══════════════════════════════════════════════════════════════ 13. SECTION HEADINGS & DIVIDERS Gold gradient bar headings for section separation. Kill all WordPress block gaps so sections sit flush. ══════════════════════════════════════════════════════════════ */ /* No dividers — gold heading strips handle section separation */ .entry-content > .wp-block-group + .wp-block-group::before { display: none !important; } /* Section headings — refined gold bar with premium typography */ .entry-content h2.wp-block-heading, .entry-content h2.wp-block-heading.has-text-align-center, h2.wp-block-heading, h2.ik-gold-bar { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: var(--ik-text-2xl) !important; font-weight: 700 !important; font-style: normal !important; line-height: 1 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; background: linear-gradient(90deg, #C99A00, #FFCC33 30%, #FFD966 50%, #FFCC33 70%, #C99A00) !important; border-top: 1px solid rgba(255, 220, 100, 0.6) !important; border-bottom: 1px solid rgba(160, 130, 40, 0.5) !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 2.5rem !important; padding: 1.5rem 2rem !important; text-align: center !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; max-width: none !important; box-sizing: border-box !important; position: relative !important; } /* Kill ALL gaps between sections — gold strips must sit flush */ .entry-content > .wp-block-group, .entry-content > .wp-block-group.alignfull, .entry-content > .wp-block-group.is-layout-constrained, .entry-content > .wp-block-group + .wp-block-group { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; } /* WordPress block spacing — nuke it */ .entry-content > *, .entry-content > .wp-block-group + * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* Astra article spacing */ .ast-article-single .entry-content > *:first-child { margin-top: 0 !important; } .entry-content:not(.woocommerce-Tabs-panel) { gap: 0 !important; display: block !important; } /* Kill gap between hero and auction floor heading */ .entry-content > .wp-block-group.alignfull:first-of-type { margin-bottom: 0 !important; padding-bottom: clamp(4rem, 8vw, 6rem) !important; } .entry-content > .wp-block-group.alignfull:first-of-type + .wp-block-group { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; } .entry-content > .wp-block-group.alignfull:first-of-type + .wp-block-group > h2:first-child { margin-top: 0 !important; } .entry-content h2.has-text-align-center { position: relative !important; } /* Heading pseudo-elements — not needed with gold bar */ .entry-content h2.wp-block-heading::before, .entry-content h2.wp-block-heading::after { display: none !important; } /* ══════════════════════════════════════════════════════════════ 14. AUCTION FLOOR (White Content Area) The second wp-block-group is the white "Auction Floor" section. White background with dark text, constrained content width. ══════════════════════════════════════════════════════════════ */ /* Auction Floor section — full-width white wrapper. .ik-auction-floor-section wraps the gold bar H2 + species card grid. Entire row is white background. */ .ik-auction-floor-section, body.page-id-1381 .entry-content > .ik-auction-floor-section { background: #FFFFFF !important; background-color: #FFFFFF !important; width: 100% !important; padding: 0 0 clamp(2rem, 4vw, 3rem) 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } /* Fallback selectors for older structure without wrapper */ body.page-id-1381 .entry-content > .wp-block-group:nth-of-type(3), .entry-content > .ik-trust-bar + .wp-block-group, div.ik-trust-bar + div.wp-block-group, body.page-id-1381 .entry-content > h2.wp-block-heading + div { background: #FFFFFF !important; background-color: #FFFFFF !important; padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 6vw, 4rem) clamp(3rem, 6vw, 5rem) !important; } /* "Go To Auction Floor" H2 — no bottom margin so it connects with cards. Gold bar styling is applied in section heading rules. */ .ik-auction-floor-section > h2.wp-block-heading, body.page-id-1381 .entry-content > h2.wp-block-heading.has-text-align-center { margin-bottom: 0 !important; } /* Content inside the Auction Floor section — constrain width, centered */ body.page-id-1381 .entry-content > .wp-block-group:nth-of-type(3) > *, .entry-content > .ik-trust-bar + .wp-block-group > * { max-width: var(--ik-max-width) !important; margin-left: auto !important; margin-right: auto !important; } /* "Go To Auction Floor" section wrapper — kill Astra's default wp-block-group padding so the gold bar is full-width and flush against the trust bar above. */ body.page-id-1381 .entry-content > .ik-trust-bar + .wp-block-group { padding: 0 !important; margin: 0 !important; } /* "Go To Auction Floor" + "Founding Keepers" headings — restore FULL gold bar. L7776 has .entry-content .wp-block-group h2.wp-block-heading { background: none } which strips the gold bar from section headings. These rules use higher specificity to re-apply the gold bar on homepage. Includes direct-child H2 for staging structure. */ body.page-id-1381 .entry-content > .wp-block-group:nth-of-type(3) > h2.wp-block-heading, body.page-id-1381 .entry-content > .ik-trust-bar + .wp-block-group > h2.wp-block-heading, body.page-id-1381 .entry-content > .wp-block-group:last-of-type > h2.wp-block-heading, body.page-id-1381 .entry-content > h2.wp-block-heading.has-text-align-center, .ik-auction-floor-section > h2.wp-block-heading { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: var(--ik-text-2xl) !important; font-weight: 700 !important; line-height: 1 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; background: linear-gradient(90deg, #C99A00, #FFCC33 30%, #FFD966 50%, #FFCC33 70%, #C99A00) !important; border-top: 1px solid rgba(255, 220, 100, 0.6) !important; border-bottom: 1px solid rgba(160, 130, 40, 0.5) !important; border-left: none !important; border-right: none !important; width: 100% !important; max-width: none !important; margin: 0 0 2.5rem 0 !important; padding: 1.5rem 2rem !important; text-align: center !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; box-sizing: border-box !important; position: relative !important; display: block !important; } /* ══════════════════════════════════════════════════════════════ 15. SPECIES CARDS Override inline white backgrounds on species cards. Overlay text on bottom of image with gradient fade. Handles both "background:#fff" and "background: #fff" variants. ══════════════════════════════════════════════════════════════ */ .entry-content [style*="grid-template-columns"] { gap: 24px !important; } /* Hide stray
    tags WordPress Classic editor inserts between and inside cards. These occupy grid cells and break the 4-column layout into 2 columns. */ .entry-content [style*="grid-template-columns"] > br { display: none !important; } .entry-content a[style*="background:#fff"] br, .entry-content a[style*="background: #fff"] br { display: none !important; } .entry-content a[style*="background:#fff"], .entry-content a[style*="background: #fff"], .entry-content [style*="display:block"][style*="background:#fff"] { background: var(--ik-bg-raised) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: var(--ik-radius-sm) !important; overflow: hidden !important; text-decoration: none !important; transition: all var(--ik-duration-slow) var(--ik-ease) !important; position: relative !important; } @media (hover: hover) and (pointer: fine) { .entry-content a[style*="background:#fff"]:hover, .entry-content a[style*="background: #fff"]:hover { border-color: rgba(196, 163, 90, 0.15) !important; transform: translateY(-4px) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important; } } .entry-content a[style*="background:#fff"] img, .entry-content a[style*="background: #fff"] img { height: 260px !important; object-fit: cover !important; transition: transform 0.8s var(--ik-ease) !important; display: block !important; width: 100% !important; } @media (hover: hover) and (pointer: fine) { .entry-content a[style*="background:#fff"]:hover img, .entry-content a[style*="background: #fff"]:hover img { transform: scale(1.05) !important; } } .entry-content a[style*="background:#fff"] span, .entry-content a[style*="background: #fff"] span { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-base) !important; font-weight: 600 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-style: normal !important; text-align: center !important; display: block !important; letter-spacing: 0.03em !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%) !important; z-index: 2 !important; text-shadow: 0 1px 6px rgba(0,0,0,0.8) !important; padding: 50px 16px 14px !important; } /* Founding Keepers section — leather texture + gradient SCOPED TO HOMEPAGE ONLY (page-id-1381). Uses :last-of-type instead of nth-of-type to survive HTML structure changes (GT banner + trust bar divs shift the count). */ body.page-id-1381 .entry-content > .wp-block-group:last-of-type { background: linear-gradient(180deg, rgba(10,7,4,0.6) 0%, rgba(20,14,8,0.3) 50%, rgba(10,7,4,0.7) 100%) no-repeat 0 0 / 100% 100%, url('../images/texture-leather.png') repeat 0 0 / auto auto #1A120B !important; padding-bottom: clamp(3rem, 6vw, 5rem) !important; } /* Founding Keepers children — constrain to max-width, centered */ body.page-id-1381 .entry-content > .wp-block-group:last-of-type > * { max-width: var(--ik-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(1rem, 3vw, 2rem) !important; padding-right: clamp(1rem, 3vw, 2rem) !important; } /* Carousel: constrain to content container, with side padding so logos breathe. Swiper still calculates slide widths fine inside a constrained max-width. */ body.page-id-1381 .entry-content > .wp-block-group:last-of-type > .logo-carousel-free { max-width: var(--ik-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(1rem, 3vw, 2rem) !important; padding-right: clamp(1rem, 3vw, 2rem) !important; box-sizing: border-box !important; } /* Founding Keepers heading — gold bar must span full width */ body.page-id-1381 .entry-content > .wp-block-group:last-of-type > h2 { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* ══════════════════════════════════════════════════════════════ 15. SPECIES CARDS Override inline white backgrounds on species cards. Overlay text on bottom of image with gradient fade. ══════════════════════════════════════════════════════════════ */ .entry-content [style*="grid-template-columns"] { gap: 24px !important; } .entry-content a[style*="background:#fff"], .entry-content a[style*="background: #fff"], .entry-content [style*="display:block"][style*="background:#fff"] { background: var(--ik-bg-raised) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: var(--ik-radius-sm) !important; overflow: hidden !important; text-decoration: none !important; transition: all var(--ik-duration-slow) var(--ik-ease) !important; position: relative !important; } @media (hover: hover) and (pointer: fine) { .entry-content a[style*="background:#fff"]:hover { border-color: rgba(196, 163, 90, 0.15) !important; transform: translateY(-4px) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important; } } .entry-content a[style*="background:#fff"] img { height: 260px !important; object-fit: cover !important; transition: transform 0.8s var(--ik-ease) !important; display: block !important; width: 100% !important; } @media (hover: hover) and (pointer: fine) { .entry-content a[style*="background:#fff"]:hover img { transform: scale(1.05) !important; } } /* Species card — text overlaid on image */ .entry-content a[style*="background:#fff"] { position: relative !important; } .entry-content a[style*="background:#fff"] span { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-base) !important; font-weight: 600 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-style: normal !important; text-align: center !important; display: block !important; letter-spacing: 0.03em !important; /* Overlay on bottom of image */ position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%) !important; z-index: 2 !important; text-shadow: 0 1px 6px rgba(0,0,0,0.8) !important; padding: 50px 16px 14px !important; } /* ══════════════════════════════════════════════════════════════ 16. FOUNDING KEEPERS Centered text block describing founding keepers. ══════════════════════════════════════════════════════════════ */ .entry-content p.has-text-align-center { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-base) !important; font-weight: 400 !important; color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; max-width: 480px !important; margin-inline: auto !important; line-height: 1.8 !important; } /* ══════════════════════════════════════════════════════════════ 17. LOGO CAROUSEL Grayscale logos that reveal on hover. Swiper pagination dots. ══════════════════════════════════════════════════════════════ */ .logo-carousel-free, .sp-lc-container { padding-block: 2rem !important; max-width: var(--ik-max-width) !important; margin-inline: auto !important; } .sp-logo-carousel { -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%) !important; overflow: hidden !important; width: 100% !important; } .sp-lc-logo { display: flex !important; align-items: center !important; justify-content: center !important; padding: 1.5rem 3rem !important; border: none !important; border-radius: 0 !important; } /* Founding keeper logos — ~50% larger, grayscale by default */ .sp-lc-image, .sp-logo-carousel img, .logo-carousel-free img, .sp-lc-container img { max-height: 180px !important; max-width: 300px !important; width: auto !important; height: auto !important; opacity: 0.5 !important; filter: grayscale(100%) brightness(1.5) !important; transition: all var(--ik-duration-slow) ease !important; border: none !important; box-shadow: none !important; outline: none !important; } .sp-lc-image:hover, .sp-logo-carousel img:hover, .logo-carousel-free img:hover { opacity: 1 !important; filter: grayscale(0%) brightness(1) !important; } /* CSS-only scroll fallback — ONLY when Swiper JS has NOT initialized. Swiper adds .swiper-container-initialized when active. */ .sp-logo-carousel:not(.swiper-container-initialized) .swiper-wrapper { animation: carouselScroll 40s linear infinite !important; } @keyframes carouselScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Pause on hover */ .sp-logo-carousel:hover .swiper-wrapper { animation-play-state: paused !important; } /* Swiper pagination dots — !important beats plugin's non-!important inline styles */ .sp-lc-container .sp-lc-pagination .swiper-pagination-bullet { background: rgba(255,255,255,0.15) !important; width: 5px !important; height: 5px !important; } .sp-lc-container .sp-lc-pagination .swiper-pagination-bullet-active { background: var(--ik-gold) !important; opacity: 1 !important; } /* Hide empty pagination container when Swiper didn't initialize */ .sp-lc-pagination.swiper-pagination:empty { display: none !important; } /* ══════════════════════════════════════════════════════════════ 18. FOOTER Leather-textured footer with gold accents, 2-column grid, quick links row, bottom bar, and copyright section. ══════════════════════════════════════════════════════════════ */ /* --- Footer background — leather texture --- */ .site-footer, #colophon { background-color: #1A120B !important; background: linear-gradient(180deg, rgba(20,14,8,0.5) 0%, rgba(10,7,4,0.2) 40%, rgba(5,3,1,0.6) 100%) no-repeat 0 0 / 100% 100%, url('../images/texture-leather.png') repeat 0 0 / auto auto #1A120B !important; border-top: none !important; position: relative !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Kill ALL blue in footer — override WordPress defaults */ .site-footer a, .site-footer a:link, .site-footer a:visited, .site-footer p, .site-footer span, .site-footer div, .site-footer li, #colophon a, #colophon a:link, #colophon a:visited, .ik-footer a, .ik-footer a:link, .ik-footer a:visited { color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; } .site-footer a:hover, #colophon a:hover, .ik-footer a:hover { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } /* Gold line at top of footer */ .site-footer::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent 5%, rgba(212, 168, 48, 0.4) 20%, rgba(212, 168, 48, 0.6) 50%, rgba(212, 168, 48, 0.4) 80%, transparent 95%) !important; z-index: 2 !important; } /* Footer content above gold line */ .site-footer > *, #colophon > * { position: relative !important; z-index: 1 !important; } /* --- Footer layout — consistent 30px (1.875rem) gap between sections --- */ /* Hide empty Astra footer sections */ .site-footer-primary-section-2, .site-footer-primary-section-3, .site-footer-primary-section-4 { display: none !important; } .site-footer-primary-section-1 { width: 100% !important; } /* Footer wrapper */ .site-primary-footer-wrap { background: transparent !important; padding: 30px clamp(2rem, 6vw, 4rem) 0 clamp(2rem, 6vw, 4rem) !important; max-width: var(--ik-max-width) !important; margin: 0 auto !important; } .site-primary-footer-inner-wrap.ast-builder-grid-row { max-width: 100% !important; padding: 0 !important; display: block !important; } /* --- Main 2-column grid (Isopod Keepers + Support) — weighted right --- */ .ik-footer-grid { display: grid !important; grid-template-columns: 2fr 3fr !important; gap: 0 3rem !important; align-items: start !important; } .ik-footer-grid > div:first-child { order: 1 !important; } .ik-footer-grid > div:nth-child(3) { order: 2 !important; } .ik-footer-grid > div:nth-child(2) { order: 3 !important; } /* --- Footer headings --- */ .ik-footer h3, .ik-footer-grid h3, .ik-footer-grid > div h3, .ik-footer-grid > div:first-child h3, .ik-footer-grid > div:nth-child(3) h3, #colophon .ik-footer h3, .site-footer .ik-footer-grid > div > h3 { font-family: var(--ik-font-body) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; margin: 0 0 14px 0 !important; margin-bottom: 14px !important; padding: 0 !important; border: none !important; } /* --- Footer text --- */ .ik-footer p, .ik-footer-grid p { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-sm) !important; font-weight: 400 !important; color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; line-height: 1.7 !important; max-width: none !important; margin: 0 0 5px 0 !important; padding: 0 !important; } .ik-footer strong { color: rgba(255,255,255,0.6) !important; -webkit-text-fill-color: rgba(255,255,255,0.6) !important; font-weight: 500 !important; } .ik-footer a, .ik-footer-grid a { font-size: var(--ik-text-sm) !important; color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; text-decoration: none !important; transition: color var(--ik-duration) ease !important; } .ik-footer a:hover, .ik-footer-grid a:hover { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } /* Tagline gets a bit more space below it */ .ik-footer-grid > div:first-child > p:first-of-type { margin-bottom: 10px !important; } /* --- Support column — 2-column sub-grid --- */ .ik-footer-grid > div:nth-child(3) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 2.5rem !important; align-items: start !important; align-content: start !important; } .ik-footer-grid > div:nth-child(3) h3 { grid-column: 1 / -1 !important; margin: 0 0 14px 0 !important; padding: 0 !important; } .ik-footer-grid > div:nth-child(3) p { margin: 0 0 4px 0 !important; padding: 0 !important; } .ik-footer-grid > div:nth-child(3) p a { display: block !important; margin-top: 2px !important; } /* --- Quick links row --- */ .ik-footer-grid > div:nth-child(2) { grid-column: 1 / -1 !important; text-align: center !important; border-top: 1px solid rgba(255,255,255,0.06) !important; margin: 30px 0 0 0 !important; padding: 30px 0 0 0 !important; } .ik-footer-grid > div:nth-child(2) h3 { margin: 0 0 10px 0 !important; } .ik-footer-grid > div:nth-child(2) p { display: inline !important; margin: 0 !important; line-height: 1 !important; } .ik-footer-grid > div:nth-child(2) p + p::before { content: '·' !important; color: rgba(255, 204, 51, 0.3) !important; -webkit-text-fill-color: rgba(255, 204, 51, 0.3) !important; margin: 0 1rem !important; } /* --- Bottom bar (All bids... + copyright) --- */ #colophon .ik-footer .ik-footer-bottom, .site-footer .ik-footer .ik-footer-bottom, .ik-footer-bottom { margin-top: 26px !important; padding-top: 26px !important; padding-bottom: 26px !important; border-top: 1px solid rgba(255,255,255,0.06) !important; text-align: center !important; } .ik-footer-bottom p { font-size: 11px !important; color: var(--ik-text-tertiary) !important; -webkit-text-fill-color: var(--ik-text-tertiary) !important; margin: 0 0 3px 0 !important; padding: 0 !important; text-align: center !important; } /* --- Copyright bar (below footer) --- */ .site-below-footer-wrap { border-top: none !important; padding: 15px 0 !important; background: transparent !important; } .site-below-footer-inner-wrap { max-width: var(--ik-max-width) !important; margin-inline: auto !important; padding-inline: clamp(2rem, 6vw, 4rem) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.25rem !important; text-align: center !important; } .ast-footer-copyright, .ast-footer-copyright p, .ast-footer-html-1 .ast-builder-html-element, .ast-footer-html-1 .ast-builder-html-element p { font-family: var(--ik-font-body) !important; font-size: 12px !important; font-weight: 400 !important; color: #D5D5D5 !important; -webkit-text-fill-color: #D5D5D5 !important; letter-spacing: 0.08em !important; margin: 0 !important; padding: 0 !important; } /* ══════════════════════════════════════════════════════════════ 19. BUTTONS (Global) All WooCommerce, WordPress, and custom buttons. Outline by default, gold-filled for primary CTA (bid button). ══════════════════════════════════════════════════════════════ */ /* --- Base button style — outline, uppercase, 0-radius --- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wp-block-button__link, .wp-element-button, button.single_add_to_cart_button, .woocommerce a.button.alt, .woocommerce button.button.alt { font-family: var(--ik-font-body) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 14px 32px !important; border-radius: 0 !important; background: transparent !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.25) !important; cursor: pointer !important; transition: all var(--ik-duration) ease !important; text-decoration: none !important; line-height: 1.2 !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .wp-block-button__link:hover, .wp-element-button:hover, button.single_add_to_cart_button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { border-color: var(--ik-gold) !important; color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; background: rgba(196, 163, 90, 0.04) !important; } /* --- Bid button — the ONE filled button (primary CTA) --- */ .woocommerce .bid_button, a.bid_button, button.bid_button { background: var(--ik-gold) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; font-weight: 500 !important; border: none !important; border-radius: 0 !important; padding: 16px 40px !important; font-size: 11px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; } .woocommerce .bid_button:hover, a.bid_button:hover, button.bid_button:hover { background: var(--ik-gold-bright) !important; } /* --- WordPress block outline button — override teal --- */ .wp-block-button.is-style-outline .wp-block-button__link { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; border-color: var(--ik-gold) !important; background: transparent !important; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255,204,51,0.08) !important; color: var(--ik-gold-bright) !important; -webkit-text-fill-color: var(--ik-gold-bright) !important; } /* --- Astra outline button — override red --- */ .ast-outline-button, a.ast-outline-button { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; border-color: var(--ik-gold) !important; } /* --- Login/Register page layout --- Constrain all content within .woocommerce to match form width. Privacy policy text and submit button sit outside #customer_login but still need to be centered at the same max-width. */ body.page-id-1569 .entry-content .woocommerce, body.page-id-1572 .entry-content .woocommerce { max-width: 680px !important; margin: 0 auto !important; } /* Hide duplicate form headings — gold bar already provides the page title */ body.page-id-1569 #customer_login h2, body.page-id-1572 #customer_login h2 { display: none !important; } /* --- WooCommerce form overrides for white-background pages --- Login, Register, My Account, Checkout all render on white. Global form styles target dark-theme (dark bg, white text). These overrides flip everything for white pages. */ /* Links — #9A7E2E on white backgrounds, NOT #FFCC33. Global `a` and `.entry-content a` rules set gold for dark-bg pages. On white pages, links must be the AA-compliant dark gold. Scoped to #content to protect nav/header/footer links. Specificity must beat `.entry-content a:not(…):not(…)` (0,3,1). */ body:not(.page-id-1381):not(.page-id-2594) #content a, body:not(.page-id-1381):not(.page-id-2594) #content a:link, body:not(.page-id-1381):not(.page-id-2594) #content a:visited { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } body:not(.page-id-1381):not(.page-id-2594) #content a:hover { color: #7A6420 !important; -webkit-text-fill-color: #7A6420 !important; } /* Card title + auction button color overrides — must beat the white-page link rule above (specificity 1,2,2) by adding ID + specific class chain. Each rule below: 1 ID + 3+ classes + 2 elements = 1,3+,2+ wins. */ body.page-id-1384 #content h3.ik-ac-title a, body.page-id-1384 #content h3.ik-ac-title a:link, body.page-id-1384 #content h3.ik-ac-title a:visited { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } body.page-id-1384 #content h3.ik-ac-title a:hover { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } body.page-id-1384 #content a.ik-ac-bid-btn, body.page-id-1384 #content a.ik-ac-bid-btn:link, body.page-id-1384 #content a.ik-ac-bid-btn:visited { color: #000 !important; -webkit-text-fill-color: #000 !important; } body.page-id-1384 #content a.ik-ac-view-btn, body.page-id-1384 #content a.ik-ac-view-btn:link, body.page-id-1384 #content a.ik-ac-view-btn:visited { color: #333 !important; -webkit-text-fill-color: #333 !important; } body.page-id-1384 #content a.ik-coming-soon-btn, body.page-id-1384 #content a.ik-coming-soon-btn:link, body.page-id-1384 #content a.ik-coming-soon-btn:visited, body.page-id-1384 #content a.ik-auction-reset-btn, body.page-id-1384 #content a.ik-auction-reset-btn:link, body.page-id-1384 #content a.ik-auction-reset-btn:visited { color: #333 !important; -webkit-text-fill-color: #333 !important; } body.page-id-1384 #content a.ik-coming-soon-btn:hover, body.page-id-1384 #content a.ik-auction-reset-btn:hover { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } /* Beat .entry-content a:not():not() specificity (0,3,1) on white pages. Custom button classes and card title links use higher-specificity override rules above (under "Card title + auction button color overrides"). */ body:not(.page-id-1381):not(.page-id-2594) .entry-content a:not(.wp-block-button__link) { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } body:not(.page-id-1381):not(.page-id-2594) .entry-content a:not(.wp-block-button__link):hover { color: #7A6420 !important; -webkit-text-fill-color: #7A6420 !important; } /* Buttons — gold filled primary CTA on white. MUST include -webkit-text-fill-color to beat other -webkit-text-fill-color rules. */ body:not(.page-id-1381):not(.page-id-2594) .woocommerce .button, body:not(.page-id-1381):not(.page-id-2594) .woocommerce-Button, body:not(.page-id-1381):not(.page-id-2594) .woocommerce-form-login .woocommerce-button, body:not(.page-id-1381):not(.page-id-2594) .woocommerce-form-register .woocommerce-button, body:not(.page-id-1381):not(.page-id-2594) .woocommerce button.button { background: #FFCC33 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 1px solid #FFCC33 !important; font-family: var(--ik-font-body) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 12px 32px !important; border-radius: 0 !important; cursor: pointer !important; } body:not(.page-id-1381):not(.page-id-2594) .woocommerce .button:hover, body:not(.page-id-1381):not(.page-id-2594) .woocommerce-Button:hover, body:not(.page-id-1381):not(.page-id-2594) .woocommerce button.button:hover { background: #E6B800 !important; border-color: #E6B800 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Inputs — white bg, dark text, light border on white pages */ body:not(.page-id-1381):not(.page-id-2594) .woocommerce input[type="text"], body:not(.page-id-1381):not(.page-id-2594) .woocommerce input[type="email"], body:not(.page-id-1381):not(.page-id-2594) .woocommerce input[type="password"], body:not(.page-id-1381):not(.page-id-2594) .woocommerce input[type="tel"], body:not(.page-id-1381):not(.page-id-2594) .woocommerce input[type="url"], body:not(.page-id-1381):not(.page-id-2594) .woocommerce input[type="number"], body:not(.page-id-1381):not(.page-id-2594) .woocommerce input[type="search"], body:not(.page-id-1381):not(.page-id-2594) .woocommerce select, body:not(.page-id-1381):not(.page-id-2594) .woocommerce textarea { background: #FFFFFF !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; border: 1px solid #D0D0CE !important; border-radius: 0 !important; } /* Q&A search — preserve left padding for magnifying glass icon */ .woocommerce-Tabs-panel input[type="search"].pl-10 { padding-left: 2.5rem !important; } /* Q&A search placeholder — visible gray on white bg */ .woocommerce-Tabs-panel input[type="search"]::placeholder { color: #999999 !important; -webkit-text-fill-color: #999999 !important; } body:not(.page-id-1381):not(.page-id-2594) .woocommerce input:focus, body:not(.page-id-1381):not(.page-id-2594) .woocommerce textarea:focus, body:not(.page-id-1381):not(.page-id-2594) .woocommerce select:focus { border-color: #9A7E2E !important; } body:not(.page-id-1381):not(.page-id-2594) .woocommerce ::placeholder { color: #999999 !important; -webkit-text-fill-color: #999999 !important; } /* Labels — dark text on white */ body:not(.page-id-1381):not(.page-id-2594) .woocommerce label { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } body:not(.page-id-1381):not(.page-id-2594) .woocommerce label .required { color: #CC0000 !important; -webkit-text-fill-color: #CC0000 !important; } /* Form layout — side-by-side first/last name fields */ body:not(.page-id-1381):not(.page-id-2594) .woocommerce .form-row-first { float: left !important; width: 48% !important; } body:not(.page-id-1381):not(.page-id-2594) .woocommerce .form-row-last { float: right !important; width: 48% !important; } body:not(.page-id-1381):not(.page-id-2594) .woocommerce .form-row-wide { width: 100% !important; clear: both !important; } /* Lost password / secondary links */ body:not(.page-id-1381):not(.page-id-2594) .woocommerce .lost_password a, body:not(.page-id-1381):not(.page-id-2594) .woocommerce .woocommerce-LostPassword a { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-size: 13px !important; } /* Remember me checkbox label */ body:not(.page-id-1381):not(.page-id-2594) .woocommerce .woocommerce-form__label-for-checkbox { font-size: 13px !important; color: #666666 !important; -webkit-text-fill-color: #666666 !important; } /* Privacy policy text */ body:not(.page-id-1381):not(.page-id-2594) .woocommerce .woocommerce-privacy-policy-text p { color: #666666 !important; -webkit-text-fill-color: #666666 !important; font-size: 13px !important; } /* Password show/hide toggle — WooCommerce JS handles this on the live site. Hidden in mockups since it's non-functional without the JS. */ .show-password-input { display: none !important; } /* Dokan role selection radios */ body:not(.page-id-1381):not(.page-id-2594) .woocommerce .vendor-customer-registration label { color: #333333 !important; -webkit-text-fill-color: #333333 !important; font-size: 14px !important; } /* Login/Register column headings */ body:not(.page-id-1381):not(.page-id-2594) .woocommerce h2 { font-family: var(--ik-font-body) !important; font-weight: 700 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-style: normal !important; } /* ══════════════════════════════════════════════════════════════ 20. FORMS & INPUTS Dark inputs with subtle borders, gold focus state. 16px minimum font-size prevents iOS zoom on focus. ══════════════════════════════════════════════════════════════ */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea, select { background: var(--ik-bg-deep) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: var(--ik-font-body) !important; font-size: 16px !important; font-weight: 400 !important; padding: 12px 16px !important; transition: border-color var(--ik-duration) ease !important; } input:focus, textarea:focus, select:focus { border-color: var(--ik-gold-dark) !important; outline: none !important; box-shadow: none !important; } ::placeholder { color: rgba(255,255,255,0.2) !important; -webkit-text-fill-color: rgba(255,255,255,0.2) !important; } label { font-size: var(--ik-text-sm) !important; font-weight: 400 !important; color: rgba(255,255,255,0.5) !important; -webkit-text-fill-color: rgba(255,255,255,0.5) !important; } /* ══════════════════════════════════════════════════════════════ 21. PRODUCT CARDS & GRID WooCommerce product loop cards with dark background, hover lift effect, and gold pricing. ══════════════════════════════════════════════════════════════ */ .woocommerce ul.products li.product { background: var(--ik-bg-raised) !important; border: 1px solid rgba(255,255,255,0.04) !important; border-radius: var(--ik-radius-sm) !important; overflow: hidden !important; padding: 0 !important; transition: all var(--ik-duration-slow) var(--ik-ease) !important; } @media (hover: hover) and (pointer: fine) { .woocommerce ul.products li.product:hover { border-color: rgba(196, 163, 90, 0.12) !important; transform: translateY(-3px) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important; } .woocommerce ul.products li.product:hover a img { transform: scale(1.04) !important; } } .woocommerce ul.products li.product a img { margin: 0 !important; border-radius: 0 !important; transition: transform 0.8s var(--ik-ease) !important; } .woocommerce ul.products li.product .woocommerce-loop-product__link { overflow: hidden !important; display: block !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-base) !important; font-weight: 400 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; padding: 1rem 1.25rem 0.5rem !important; margin: 0 !important; } .woocommerce ul.products li.product .price { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; font-size: var(--ik-text-lg) !important; font-weight: 500 !important; padding: 0 1.25rem 1rem !important; } .woocommerce ul.products li.product .button { margin: 0 1.25rem 1.25rem !important; width: calc(100% - 2.5rem) !important; text-align: center !important; } /* Auction price and countdown — #9A7E2E for white bg contexts, #FFCC33 for dark */ .auction-price, .woocommerce-auction-price { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-weight: 500 !important; } .auction-time-left, .wsa_countdown, [class*="countdown"] { font-variant-numeric: tabular-nums !important; color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-weight: 500 !important; } /* ══════════════════════════════════════════════════════════════ 22. SINGLE PRODUCT PAGE Product detail page: title, price, tabs, and panels. ══════════════════════════════════════════════════════════════ */ /* --- Product page typography — ensure Inter applies everywhere --- */ .single-product, .single-product body, .single-product .ast-woocommerce-container, .single-product .ast-woocommerce-container *, .single-product .summary, .single-product .summary *, .single-product .woocommerce-tabs, .single-product .woocommerce-tabs *, .single-product section.related *, .single-product .ik-ac-card * { font-family: var(--ik-font-body) !important; } /* Links on product pages — gold only for specific link types, NOT all links. Card titles, buttons, and tabs have their own specific colors. */ .single-product .product_meta a, .single-product .posted_in a, .single-product .wsawl-link a, .single-product .woocommerce-breadcrumb a { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } .single-product .product_meta a:hover, .single-product .posted_in a:hover, .single-product .wsawl-link a:hover, .single-product .woocommerce-breadcrumb a:hover { color: #7A6420 !important; -webkit-text-fill-color: #7A6420 !important; } /* --- Product page layout --- */ .single-product .product-gallery-wrap { float: left !important; width: 48% !important; } .single-product .summary.entry-summary { float: right !important; width: 48% !important; display: flex !important; flex-direction: column !important; } /* Reorder summary: Breadcrumb → Category → Title → Price → Cart/Bid → Short description → Vendor meta. form.cart and .auction-ajax-change share order:4 because they're mutually exclusive (simple products render form.cart; auction products render .auction-ajax-change). Without an explicit order, form.cart defaults to 0 and floats up to sit beside the breadcrumb, pushing the title down — Ruth 2026-05-16. */ .single-product .summary .woocommerce-breadcrumb { order: 0 !important; } .single-product .summary .single-product-category { order: 1 !important; } .single-product .summary .product_title { order: 2 !important; } .single-product .summary .price { order: 3 !important; } /* :not(.auction_form) — auction products have form.auction_form.cart nested inside .auction-ajax-change. Without the :not(), this rule wins on specificity (0,3,1) over the intended .auction-ajax-change .auction_form { order: 2 } rule below (0,2,0), pushing the bid form to row 4 instead of row 2. Ruth 2026-05-19: bid must sit right under the price. */ .single-product .summary form.cart:not(.auction_form) { order: 4 !important; } .single-product .summary .auction-ajax-change { order: 4 !important; } .single-product .summary .woocommerce-product-details__short-description { order: 5 !important; } .single-product .summary .product_meta { order: 6 !important; } /* Ruth 2026-05-19: WC + Astra's stock indicator ("10 in stock" / "Out of stock") has no explicit order so it floats up above the title (top-of-fold). Push it to the bottom of the summary, after CTAs / description / meta — it's informational, not primary CTA, so it doesn't deserve top-of-fold real estate. Astra wraps the stock in .ast-stock-detail; WC default is p.stock. */ .single-product .summary .stock, .single-product .summary p.stock, .single-product .summary .availability, .single-product .summary .ast-stock-detail { order: 7 !important; } .single-product .product-container::after, .single-product .woocommerce-tabs::before { content: "" !important; display: table !important; clear: both !important; } .single-product .woocommerce-tabs { clear: both !important; } /* Gallery thumbnails — small, clickable row below main image */ .single-product .woocommerce-product-gallery .gallery-thumbs, .single-product .product-gallery-wrap .gallery-thumbs { display: flex !important; gap: 8px !important; margin-top: 12px !important; margin-bottom: 2rem !important; padding: 0 !important; } .single-product .woocommerce-product-gallery .gallery-thumbs img, .single-product .product-gallery-wrap .gallery-thumbs img { width: 72px !important; height: 72px !important; min-width: 72px !important; max-width: 72px !important; object-fit: cover !important; border: 2px solid #E8E8E6 !important; border-radius: 6px !important; cursor: pointer !important; transition: border-color 0.2s ease !important; opacity: 0.6 !important; } .single-product .woocommerce-product-gallery .gallery-thumbs img:hover, .single-product .product-gallery-wrap .gallery-thumbs img:hover, .single-product .woocommerce-product-gallery .gallery-thumbs img.active, .single-product .product-gallery-wrap .gallery-thumbs img.active { border-color: #9A7E2E !important; opacity: 1 !important; } /* Auction card grid — reusable anywhere (product page, tabs, etc.) */ .ik-auction-card-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; } @media (max-width: 921px) { .ik-auction-card-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .ik-auction-card-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } } /* Single product page: keep gallery LEFT + summary RIGHT side-by-side at tablet (≥600px) — only collapse to a single stacked column at phone sizes (<600). WooCommerce default has a max-width:768 media query that un-floats both columns; we override at 600+ to re-apply the 2-column layout, then explicitly stack at <600. 2026-04-27. */ @media (min-width: 600px) { body.single-product div.product .woocommerce-product-gallery, body.single-product div.product .product-gallery-wrap { float: left !important; width: 50% !important; clear: none !important; } body.single-product div.product .summary.entry-summary { float: right !important; width: 48% !important; clear: none !important; margin-top: 0 !important; } } @media (max-width: 599px) { body.single-product div.product .woocommerce-product-gallery, body.single-product div.product .product-gallery-wrap, body.single-product div.product .summary.entry-summary { float: none !important; width: 100% !important; } body.single-product div.product .summary.entry-summary { margin-top: 24px !important; } } @media (max-width: 480px) { .ik-auction-card-grid { grid-template-columns: 1fr !important; } } /* --- Product page base — white content area, NOT the header --- */ .single-product #primary, .single-product .site-main, .single-product .ast-article-single, .single-product .ast-woocommerce-container { background: #FFFFFF !important; } .single-product .ast-woocommerce-container { max-width: var(--ik-max-width) !important; margin: 0 auto !important; padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) !important; } /* Dark text on white background — comprehensive reset for product page content */ .single-product .ast-woocommerce-container, .single-product .ast-woocommerce-container p, .single-product .ast-woocommerce-container span, .single-product .ast-woocommerce-container div, .single-product .ast-woocommerce-container li, .single-product .ast-woocommerce-container td, .single-product .summary, .single-product .summary p, .single-product .summary span, .single-product .summary div, .single-product .woocommerce-tabs, .single-product .woocommerce-tabs p, .single-product .woocommerce-tabs span, .single-product .woocommerce-tabs div, .single-product .woocommerce-tabs td, .single-product section.related, .single-product section.related p, .single-product section.related span, .single-product section.related div { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } .woocommerce div.product .product_title { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-3xl) !important; font-weight: 600 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; line-height: 1.3 !important; margin-bottom: 0.75rem !important; } /* --- Category label above title --- */ .single-product-category { display: block !important; margin-bottom: 6px !important; } .single-product-category, .single-product-category a { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-xs) !important; font-weight: 500 !important; color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; text-decoration: none !important; } /* --- Sold-by vendor badge --- Hidden on single product page (redundant with vendor card below). Visible on product cards in grids (auctions listing, related products). */ .single-product .summary > .ik-sold-by { display: none !important; } .ik-sold-by { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 12px !important; font-family: var(--ik-font-body) !important; font-size: 13px !important; font-weight: 500 !important; } .ik-sold-by a { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } .ik-sold-by a:hover { color: #7A6420 !important; -webkit-text-fill-color: #7A6420 !important; } .ik-sold-by img { border-radius: 50% !important; border: 1px solid #E8E8E6 !important; } /* --- Price / bid display --- */ .woocommerce div.product .price, .single-product .summary .price, .single-product .price { font-size: var(--ik-text-2xl) !important; color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-weight: 500 !important; margin-bottom: 1.5rem !important; } /* Price labels — all auction states */ .auction-price .current.auction, .auction-price .winned-for.auction, span.winned-for.auction, span.sold-for.auction { font-size: var(--ik-text-base) !important; font-weight: 400 !important; color: #666666 !important; -webkit-text-fill-color: #666666 !important; display: block !important; margin-bottom: 4px !important; } /* Finished auction states — "Winning Bid:" and "Sold for" labels */ span.winned-for.auction, span.sold-for.auction { font-family: var(--ik-font-body) !important; } /* WB-1 fix: the WC Auctions plugin renders the "Sold for" label without the colon (`Sold for: $2`) while "Winning Bid:" has the colon INSIDE the span. Combined with our display:block rule above, the orphan ": " text node falls onto the value line, producing "Sold for" / ": $2". Inject the colon into the label via ::after, and zero out font-size on the TD to suppress the orphan colon text node — restored on element children. */ span.sold-for.auction::after { content: ":"; } td:has(> span.sold-for.auction) { font-size: 0 !important; } td:has(> span.sold-for.auction) > span, td:has(> span.sold-for.auction) > span * { font-size: 14px !important; } .woocommerce div.product .woocommerce-Price-amount, .woocommerce div.product .woocommerce-Price-amount *, .woocommerce div.product .woocommerce-Price-currencySymbol, .single-product .woocommerce-Price-amount, .single-product .woocommerce-Price-amount *, .single-product .woocommerce-Price-currencySymbol, .single-product .summary .woocommerce-Price-amount, .single-product .summary .woocommerce-Price-currencySymbol { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-weight: 600 !important; } /* --- Short description --- */ .woocommerce div.product .woocommerce-product-details__short-description, .woocommerce div.product .woocommerce-product-details__short-description p { color: #333333 !important; -webkit-text-fill-color: #333333 !important; font-size: var(--ik-text-base) !important; line-height: 1.7 !important; margin-bottom: 1.5rem !important; padding-bottom: 0 !important; border-bottom: none !important; } /* --- Product meta (category) — hidden on single product, redundant with .single-product-category above title --- */ .single-product .product_meta > .posted_in { display: none !important; } .product_meta { font-size: var(--ik-text-sm) !important; color: #666666 !important; -webkit-text-fill-color: #666666 !important; margin-top: 24px !important; margin-bottom: 1.5rem !important; padding-top: 24px !important; } .product_meta a { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; text-decoration: none !important; } /* --- Dokan vendor info block — single source of truth for ALL vendor cards (summary, tabs, everywhere). No "Sold by" label — already inferred. --- */ .dokan-vendor-info-wrap { display: flex !important; align-items: center !important; gap: 14px !important; background: #F8F8F6 !important; border: 1px solid #E8E8E6 !important; border-radius: 4px !important; padding: 14px 18px !important; margin-bottom: 1.25rem !important; } .dokan-vendor-image img { max-height: 56px !important; width: auto !important; border-radius: 50% !important; object-fit: cover !important; border: 1px solid #E8E8E6 !important; } .dokan-vendor-name h5, .dokan-vendor-name a { font-size: 15px !important; font-weight: 600 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; margin: 0 !important; text-decoration: none !important; } /* Vendor rating — must look identical in summary AND tabs */ .dokan-vendor-rating, .woocommerce-tabs .dokan-vendor-rating { display: flex !important; align-items: center !important; gap: 6px !important; line-height: 1 !important; margin: 2px 0 !important; padding: 0 !important; } /* Override tab panel p styles inside vendor cards */ .dokan-vendor-rating p, .woocommerce-tabs .dokan-vendor-rating p, .woocommerce-tabs .wc-tab .dokan-vendor-rating p, .single-product .woocommerce-tabs .panel .dokan-vendor-rating p { margin: 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #333 !important; -webkit-text-fill-color: #333 !important; line-height: 1 !important; } .dokan-ratings-count, .woocommerce-tabs .dokan-ratings-count, .woocommerce-tabs .wc-tab .dokan-ratings-count, .single-product .woocommerce-tabs .panel .dokan-ratings-count { font-size: 12px !important; color: #666 !important; -webkit-text-fill-color: #666 !important; margin: 2px 0 0 0 !important; padding: 0 !important; line-height: 1 !important; } /* Vendor image in tabs — match summary size */ .woocommerce-tabs .dokan-vendor-image img { max-height: 56px !important; width: auto !important; border-radius: 50% !important; object-fit: cover !important; border: 1px solid #E8E8E6 !important; } /* Vendor name in tabs — match summary */ .woocommerce-tabs .dokan-vendor-name h5 { font-size: 15px !important; font-weight: 600 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; } .dokan-vendor-name h5, .dokan-vendor-name a { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; font-family: var(--ik-font-body) !important; font-size: var(--ik-text-base) !important; font-weight: 600 !important; text-decoration: none !important; margin: 0 !important; } .dokan-vendor-rating { display: flex !important; align-items: center !important; gap: 6px !important; } .dokan-vendor-rating p { font-size: var(--ik-text-sm) !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; margin: 0 !important; } /* Preserve icon fonts — must beat the wildcard reset: .single-product .ast-woocommerce-container * { font-family: Inter !important; } at specificity (0,2,0). Boost to (0,3,0)+ */ .single-product .ast-woocommerce-container .dashicons, .single-product .woocommerce-tabs .dashicons, body.page-id-1384 .dashicons, .dashicons, .dashicons-before::before, i.dashicons-star-filled, i.dashicons-star-half { font-family: dashicons !important; } .dokan-vendor-rating .star-rating-inline, .dokan-vendor-rating i.dashicons-star-filled { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } .dokan-ratings-count { font-size: var(--ik-text-xs) !important; color: #666666 !important; -webkit-text-fill-color: #666666 !important; margin: 0 !important; } /* --- Auction details block — condition, countdown, end time --- */ .auction-ajax-change { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 1.5rem !important; padding-bottom: 0 !important; border-bottom: none !important; } /* Hide item condition — redundant, not relevant to buyers */ .auction-condition { display: none !important; } /* --- Auction timing card — groups time left, countdown, end date, timezone as one cohesive visual unit with internal row dividers --- */ .auction-time { background: #F8F8F6 !important; border: 1px solid #E8E8E6 !important; border-radius: 4px 4px 0 0 !important; padding: 16px 20px 0 20px !important; margin-bottom: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; text-align: center !important; } .auction-time-countdown { display: flex !important; justify-content: center !important; gap: clamp(1.5rem, 4vw, 3rem) !important; padding: 12px 0 16px !important; margin: 0 !important; border-bottom: 1px solid #E8E8E6 !important; } .countdown_section { text-align: center !important; font-size: var(--ik-text-xs) !important; color: #666666 !important; -webkit-text-fill-color: #666666 !important; background: transparent !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .countdown_amount, .single-product .countdown_amount, .single-product .ast-woocommerce-container .countdown_amount { display: block !important; font-family: var(--ik-font-body) !important; font-size: var(--ik-text-2xl) !important; font-weight: 600 !important; color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-variant-numeric: tabular-nums !important; line-height: 1.2 !important; margin-bottom: 4px !important; } /* --- Auction end time — bottom of timing card, single line --- */ .auction-end { font-size: 12px !important; font-weight: 500 !important; color: #333 !important; -webkit-text-fill-color: #333 !important; background: #F8F8F6 !important; border: 1px solid #E8E8E6 !important; border-top: none !important; border-radius: 0 0 4px 4px !important; padding: 12px 20px !important; margin-top: -1px !important; text-align: center !important; line-height: 1.6 !important; } /* Hide the
    between auction ends and timezone to keep on one line */ .auction-end br { display: none !important; } /* --- Bid form + watchlist — same row via flex wrapping on parent --- */ .auction-ajax-change { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; } /* Reorder inside auction-ajax-change — Ruth spec 2026-05-19: price (in .summary above) → bid → time left → auction ends → watchlist. */ .auction-ajax-change .auction-condition { order: 10 !important; } .auction-ajax-change .ik-secondary-actions { order: 1 !important; flex: 0 0 100% !important; width: 100% !important; } .auction-ajax-change .auction_form { order: 2 !important; } .auction-ajax-change .auction-time { order: 3 !important; width: 100% !important; flex: 0 0 100% !important; } .auction-ajax-change .auction-end { order: 4 !important; width: 100% !important; flex: 0 0 100% !important; } .auction-ajax-change .wsawl-link { order: 5 !important; flex: 0 0 100% !important; } /* Bid form — inline, not full width */ .auction_form.cart { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin-top: 20px !important; margin-bottom: 24px !important; flex: 0 0 100% !important; width: 100% !important; } .auction_form .quantity.buttons_added { display: flex !important; align-items: center !important; border: none !important; border-radius: 0 !important; /* overflow:visible so the input's bottom border isn't clipped at the wrap's bottom edge (input is exactly same height as wrap, so the 1px border falls on the clip boundary -- Ruth 2026-05-18 LATE EOD). */ overflow: visible !important; margin-right: 12px !important; box-shadow: none !important; } .auction_form .minus-bid, .auction_form .plus-bid { background: #F0F0EE !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; border: none !important; width: 48px !important; height: 52px !important; font-size: 18px !important; font-weight: 400 !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; line-height: 1 !important; } .auction_form .minus-bid:hover, .auction_form .plus-bid:hover { background: #E8E8E6 !important; color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } .auction_form .input-text.qty.bid { background: #FFFFFF !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; border: none !important; width: 100px !important; height: 52px !important; text-align: center !important; font-family: var(--ik-font-body) !important; font-size: 18px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; padding: 0 8px !important; } /* Bid button — gold filled, prominent CTA Higher specificity to beat the global outline button style */ .woocommerce div.product .bid_button, .woocommerce .bid_button.button.alt, .woocommerce .bid_button.button, .auction_form .bid_button, button.bid_button, .bid_button { background: var(--ik-gold) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; font-family: var(--ik-font-body) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; border: none !important; border-radius: 0 !important; padding: 14px 40px !important; height: 52px !important; cursor: pointer !important; transition: all 0.3s ease !important; white-space: nowrap !important; } .woocommerce div.product .bid_button:hover, .woocommerce .bid_button.button.alt:hover, .auction_form .bid_button:hover, button.bid_button:hover, .bid_button:hover { background: var(--ik-gold-bright) !important; box-shadow: 0 4px 16px rgba(255,204,51,0.25) !important; } /* --- Secondary actions row (Buy Now + Get Support side by side, 50/50) --- */ .ik-secondary-actions { display: flex !important; gap: 8px !important; margin-top: 12px !important; margin-bottom: 16px !important; } /* --- Buy Now button — gold filled, secondary CTA --- */ .woocommerce button.single_add_to_cart_button, .woocommerce .single_add_to_cart_button.button.alt { background: var(--ik-gold) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border: 1px solid var(--ik-gold) !important; font-weight: 600 !important; flex: 1 1 0% !important; width: 0 !important; text-align: center !important; margin: 0 !important; padding: 14px 16px !important; } /* Price inside Buy Now button — black bold. Must beat .single-product .summary .woocommerce-Price-amount (0,3,0) */ .single-product .single_add_to_cart_button .woocommerce-Price-amount, .single-product .single_add_to_cart_button .woocommerce-Price-amount *, .single-product .single_add_to_cart_button .woocommerce-Price-currencySymbol { color: #000 !important; -webkit-text-fill-color: #000 !important; font-weight: 700 !important; } /* 2026-05-16: "Buy now for $100" was rendering as "BUY NOW FOR$100" on the auction PDP — the trailing space in the text node "Buy now for " is being visually swallowed by the leading edge of the $ glyph after uppercase transform + 1.1px letter-spacing. Add a tiny left margin to the inline price span to restore the visible word break. */ .single-product .single_add_to_cart_button .woocommerce-Price-amount { margin-left: 0.3em !important; } .woocommerce button.single_add_to_cart_button:hover, .woocommerce .single_add_to_cart_button.button.alt:hover { background: var(--ik-gold-bright) !important; box-shadow: 0 4px 16px rgba(255,204,51,0.25) !important; } /* --- Get Support / Chat Now — gray outline base style --- */ .woocommerce button.dokan-store-support-btn.button.alt, .woocommerce button.dokan-store-support-btn-product.button.alt, .woocommerce button.dokan-live-chat.button.alt, .dokan-store-support-btn, .dokan-store-support-btn-product, .dokan-live-chat { background: transparent !important; color: #333 !important; -webkit-text-fill-color: #333 !important; border: 1px solid #D0D0CE !important; text-align: center !important; font-size: 11px !important; letter-spacing: 0.14em !important; padding: 14px 16px !important; margin: 0 !important; width: auto !important; } /* In the product summary secondary actions row, use flex equal-width */ .ik-secondary-actions .dokan-store-support-btn, .ik-secondary-actions .dokan-store-support-btn-product, .ik-secondary-actions .dokan-live-chat { flex: 1 1 0% !important; width: 0 !important; } .woocommerce button.dokan-store-support-btn.button.alt:hover, .woocommerce button.dokan-store-support-btn-product.button.alt:hover, .woocommerce button.dokan-live-chat.button.alt:hover, .dokan-store-support-btn:hover, .dokan-store-support-btn-product:hover, .dokan-live-chat:hover { background: rgba(0, 0, 0, 0.03) !important; border-color: #999 !important; } /* Responsive: stack Buy Now + Get Support on mobile */ @media (max-width: 480px) { .ik-secondary-actions { flex-direction: column !important; } } /* Mobile/tablet: CHAT NOW button on the single-product Vendor Info tab is parented by `.list-unstyled` (NOT .ik-secondary-actions), so the flex-1-fill rule above doesn't reach it. The base rule sets width:auto which sizes to text content (~105px). Override on mobile to span the full content row per mobile UX standard. Panel id is `tab-seller` with class `.woocommerce-Tabs-panel--seller` (no `tab-` prefix). */ @media (max-width: 768px) { body.single-product #tab-seller .dokan-live-chat, body.single-product #tab-seller .dokan-store-support-btn, body.single-product #tab-seller .dokan-store-support-btn-product, body.single-product .woocommerce-Tabs-panel--seller .dokan-live-chat, body.single-product .woocommerce-Tabs-panel--seller .dokan-store-support-btn { width: 100% !important; max-width: none !important; display: block !important; } } /* --- Dokan Q&A search bar — fix black background --- */ .dokan-product-qa-frontend-root input[type="search"] { background: #F8F8F6 !important; color: #333 !important; -webkit-text-fill-color: #333 !important; border: 1px solid #D0D0CE !important; font-family: var(--ik-font-body) !important; font-size: 14px !important; } /* --- Dokan Q&A "Post your Question" — gold filled button --- */ .dokan-product-qa-frontend-root button[type="button"] { background: #FFCC33 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border: none !important; border-radius: 0 !important; font-family: var(--ik-font-body) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; padding: 12px 24px !important; box-shadow: none !important; } /* Dokan Q&A "LOGIN TO POST YOUR QUESTION" empty-state button on the logged- out single-product Q&A tab is rendered by the React UI inside a Tailwind .bg-slate-100 notice card → .flex.shrink-0 row. The .shrink-0 caps the wrapper to button content width, so the button never spans the row. On mobile, undo .shrink-0 + force button full-width per mobile UX standard. Color override (red-600 → gold) deferred pending Ruth's call. */ @media (max-width: 768px) { body.single-product .bg-slate-100 .flex.shrink-0 { flex-shrink: 1 !important; width: 100% !important; } body.single-product .bg-slate-100 .flex.shrink-0 > button { width: 100% !important; max-width: none !important; justify-content: center !important; } } .dokan-product-qa-frontend-root button[type="button"]:hover { background: #FFDB66 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; } /* --- Watchlist button — outline style, sits next to bid on desktop, wraps below on tablet/mobile (acceptable — secondary action) --- */ .wsawl-link { display: block !important; margin: 0 0 16px 0 !important; padding: 0 !important; width: 100% !important; } .wsawl-link a, .add-wsawl { font-family: var(--ik-font-body) !important; font-size: 11px !important; font-weight: 600 !important; color: #333 !important; -webkit-text-fill-color: #333 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border: 1px solid #D0D0CE !important; padding: 14px 32px !important; border-radius: 0 !important; display: block !important; width: 100% !important; text-align: center !important; text-decoration: none !important; box-sizing: border-box !important; text-decoration: none !important; transition: color 0.3s ease !important; } .wsawl-link a:hover, .add-wsawl:hover { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } /* --- Product gallery --- */ .woocommerce-product-gallery { background: transparent !important; } .woocommerce-product-gallery .flex-viewport { border-radius: var(--ik-radius-md) !important; overflow: hidden !important; background: #F0F0EE !important; } .woocommerce-product-gallery .flex-control-thumbs li img { border-radius: var(--ik-radius-sm) !important; border: 2px solid transparent !important; opacity: 0.5 !important; transition: all 0.3s ease !important; } .woocommerce-product-gallery .flex-control-thumbs li img.flex-active, .woocommerce-product-gallery .flex-control-thumbs li img:hover { border-color: #9A7E2E !important; opacity: 1 !important; } /* --- Tabs --- */ .woocommerce div.product .woocommerce-tabs { margin-top: 3rem !important; clear: both !important; } /* Tab bar — must work with or without .woocommerce div.product wrapper. Designed to be clearly interactive — active tab has background + bottom border so users immediately recognize these as clickable tabs. */ .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce-tabs ul.tabs, ul.tabs.wc-tabs { display: flex !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; list-style: none !important; border-bottom: 2px solid #E8E8E6 !important; overflow-x: auto !important; background: transparent !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce-tabs ul.tabs li, ul.tabs.wc-tabs li { background: transparent !important; border: 1px solid transparent !important; border-bottom: none !important; margin: 0 0 -2px 0 !important; padding: 0 !important; border-radius: 4px 4px 0 0 !important; list-style: none !important; display: block !important; transition: all 0.2s ease !important; } /* Active tab — lifted card look with background */ .woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce-tabs ul.tabs li.active, ul.tabs.wc-tabs li.active { background: #F8F8F6 !important; border-color: #E8E8E6 !important; border-bottom: 2px solid #F8F8F6 !important; } /* Inactive tab hover — subtle hint it's clickable */ .woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover, .woocommerce-tabs ul.tabs li:not(.active):hover, ul.tabs.wc-tabs li:not(.active):hover { background: rgba(0,0,0,0.02) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a, .woocommerce-tabs ul.tabs li a, ul.tabs.wc-tabs li a { color: #999999 !important; -webkit-text-fill-color: #999999 !important; font-family: var(--ik-font-body) !important; font-size: 13px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 14px 24px !important; display: block !important; white-space: nowrap !important; text-decoration: none !important; transition: all 0.2s ease !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li.active a, ul.tabs.wc-tabs li.active a, .single-product ul.tabs.wc-tabs li.active a { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; font-weight: 600 !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover, .woocommerce-tabs ul.tabs li a:hover, ul.tabs.wc-tabs li a:hover { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } /* Tab panels — hide inactive, show active. Local mockups: JS toggles .active class on panels. Staging: WC JS sets inline display:block/none (NO .active class added). ONLY use display:none (no !important) so WC inline display:block wins. Do NOT set height/overflow/visibility — WC has no inline overrides for those and they'd break the visible panel on staging. */ .woocommerce-tabs .wc-tab:not(.active), .woocommerce-tabs .panel:not(.active), .woocommerce-tabs .woocommerce-Tabs-panel:not(.active), .wc-tabs-wrapper .wc-tab:not(.active), div.woocommerce-tabs div.wc-tab:not(.active) { display: none; } /* Local mockup: show the panel with .active class */ .woocommerce-tabs .wc-tab.active, .woocommerce-tabs .panel.active { display: block !important; } /* ══════════════════════════════════════════════════════════════ Auction-item tabs → accordion at ≤768 Paired by the "Auction Item Tabs Accordion" snippet, which sets inline `style="order: N"` on each tab

  • and matching panel so they interleave (label → panel → label → panel) inside a flex column at small viewports. Desktop is untouched (no flex parent + no @media match → order values are ignored). Specificity note: the existing tab-strip rules at line 3907-3974 use `.woocommerce div.product .woocommerce-tabs ul.tabs` (0,4,4) with `!important`. To win, our rules use the `.woocommerce div.product` prefix too — matching specificity AND adding our `.ik-tabs-paired` class for one extra weight. ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .woocommerce div.product .ik-tabs-paired, body .ik-tabs-paired { display: flex !important; flex-direction: column !important; } /* Lift
  • labels into the wrapper's flex flow so they can interleave with their (sibling) panels via `order`. */ .woocommerce div.product .ik-tabs-paired ul.tabs, .woocommerce div.product .ik-tabs-paired ul.wc-tabs, body .ik-tabs-paired ul.tabs, body .ik-tabs-paired ul.wc-tabs { display: contents !important; border: none !important; overflow: visible !important; } /* Each tab label = full-width accordion header */ .woocommerce div.product .ik-tabs-paired ul.tabs > li, .woocommerce div.product .ik-tabs-paired ul.wc-tabs > li, body .ik-tabs-paired ul.tabs > li, body .ik-tabs-paired ul.wc-tabs > li { width: 100% !important; margin: 0 !important; border: 1px solid #E8E8E6 !important; border-bottom: none !important; border-radius: 0 !important; background: #F8F8F6 !important; display: block !important; } .woocommerce div.product .ik-tabs-paired ul.tabs > li.active, .woocommerce div.product .ik-tabs-paired ul.wc-tabs > li.active, body .ik-tabs-paired ul.tabs > li.active, body .ik-tabs-paired ul.wc-tabs > li.active { background: #FFFFFF !important; } .woocommerce div.product .ik-tabs-paired ul.tabs > li > a, .woocommerce div.product .ik-tabs-paired ul.wc-tabs > li > a, body .ik-tabs-paired ul.tabs > li > a, body .ik-tabs-paired ul.wc-tabs > li > a { display: block !important; padding: 14px 16px !important; white-space: normal !important; font-size: 14px !important; } /* Each panel = full-width content block, attached to its label above */ .woocommerce div.product .ik-tabs-paired .panel, .woocommerce div.product .ik-tabs-paired .woocommerce-Tabs-panel, .woocommerce div.product .ik-tabs-paired .wc-tab, body .ik-tabs-paired .panel, body .ik-tabs-paired .woocommerce-Tabs-panel, body .ik-tabs-paired .wc-tab { width: 100% !important; margin: 0 !important; padding: 16px !important; border: 1px solid #E8E8E6 !important; border-top: none !important; background: #FFFFFF !important; max-width: none !important; } /* Bottom border on the last tab label (its panel may be hidden). */ .woocommerce div.product .ik-tabs-paired ul.tabs > li:last-of-type, .woocommerce div.product .ik-tabs-paired ul.wc-tabs > li:last-of-type, body .ik-tabs-paired ul.tabs > li:last-of-type, body .ik-tabs-paired ul.wc-tabs > li:last-of-type { border-bottom: 1px solid #E8E8E6 !important; } } /* Active tab panel content styling */ .woocommerce div.product .woocommerce-tabs .panel, .woocommerce-tabs .wc-tab, .single-product .woocommerce-tabs .panel { background: transparent !important; border: none !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; padding: 2rem 0 !important; font-family: var(--ik-font-body) !important; font-size: 14px !important; line-height: 1.7 !important; max-width: 100% !important; } /* Tab panel headings — clean, not gold-bar style */ .woocommerce div.product .woocommerce-tabs .panel h2, .woocommerce-tabs .wc-tab h2, .single-product .woocommerce-tabs .panel h2 { font-family: var(--ik-font-body) !important; font-size: 18px !important; font-weight: 600 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; margin: 0 0 16px 0 !important; padding: 0 !important; text-transform: none !important; background: none !important; border: none !important; letter-spacing: 0 !important; width: auto !important; text-align: left !important; line-height: 1.4 !important; } /* Tab panel paragraphs */ .woocommerce-tabs .wc-tab p, .single-product .woocommerce-tabs .panel p { font-size: 14px !important; line-height: 1.7 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; margin: 0 0 12px 0 !important; } /* Tab panel strong/bold */ .woocommerce-tabs .wc-tab strong, .single-product .woocommerce-tabs .panel strong { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; font-weight: 600 !important; } /* Tab panel horizontal rules — subtle dividers */ .woocommerce-tabs .wc-tab hr, .single-product .woocommerce-tabs .panel hr { border: none !important; border-top: 1px solid #E8E8E6 !important; background: transparent !important; height: 0 !important; margin: 16px 0 !important; } /* Tab panel tables (auction history, etc.) */ .woocommerce-tabs .wc-tab table, .single-product .woocommerce-tabs table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; margin: 0 0 16px 0 !important; } .woocommerce-tabs .wc-tab th, .single-product .woocommerce-tabs th { background: #F8F8F6 !important; font-weight: 600 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; text-align: left !important; padding: 10px 14px !important; border-bottom: 1px solid #E8E8E6 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } .woocommerce-tabs .wc-tab td, .single-product .woocommerce-tabs td { padding: 10px 14px !important; border-bottom: 1px solid #E8E8E6 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; font-size: 13px !important; } /* Tab panel links */ .woocommerce-tabs .wc-tab a:not(.ik-ac-bid-btn):not(.ik-ac-view-btn), .single-product .woocommerce-tabs .panel a:not(.ik-ac-bid-btn):not(.ik-ac-view-btn) { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; text-decoration: none !important; } .woocommerce-tabs .wc-tab a:not(.ik-ac-bid-btn):not(.ik-ac-view-btn):hover { color: #7A6420 !important; -webkit-text-fill-color: #7A6420 !important; } .woocommerce div.product .woocommerce-tabs .panel strong { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; font-weight: 600 !important; } /* Auction history table */ .auction-history-table { width: 100% !important; border-collapse: collapse !important; } .auction-history-table td { padding: 12px 16px !important; border-bottom: 1px solid #E8E8E6 !important; font-size: var(--ik-text-sm) !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; } .auction-history-table tr.start td { color: #666666 !important; -webkit-text-fill-color: #666666 !important; } /* Vendor info list in tab */ .woocommerce-tabs .list-unstyled { list-style: none !important; padding: 0 !important; margin: 0 !important; } .woocommerce-tabs .list-unstyled li { padding: 10px 0 !important; border-bottom: 1px solid #E8E8E6 !important; display: flex !important; gap: 12px !important; font-size: var(--ik-text-sm) !important; color: #666666 !important; -webkit-text-fill-color: #666666 !important; } .woocommerce-tabs .list-unstyled .details { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } .woocommerce-tabs .list-unstyled .details a { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; text-decoration: none !important; } /* More Products tab — constrain the product grid */ .woocommerce-Tabs-panel ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; } @media (max-width: 768px) { .woocommerce-Tabs-panel ul.products.columns-4 { grid-template-columns: repeat(2, 1fr) !important; } } /* Chat button in vendor tab */ .dokan-live-chat, .dokan-live-chat-whatsapp { background: #FFFFFF !important; color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; border: 1px solid #D0D0CE !important; font-family: var(--ik-font-body) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; padding: 10px 24px !important; cursor: pointer !important; } .dokan-live-chat:hover { background: #F8F8F6 !important; border-color: #9A7E2E !important; } /* --- Related products section --- */ /* Related products — stays in the white content area */ section.related.products { margin-top: 3rem !important; padding-top: 3rem !important; border-top: 1px solid #E8E8E6 !important; } section.related.products > h2 { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-xl) !important; font-weight: 600 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; margin-bottom: 1.5rem !important; text-transform: capitalize !important; background: none !important; padding: 0 !important; border: none !important; } /* Product card grid — remove Astra default left padding on ul.products, set consistent gap for both columns and rows */ .single-product ul.products, .woocommerce-Tabs-panel ul.products { padding-left: 0 !important; margin-left: 0 !important; gap: 20px !important; } /* Product card grid items — remove Astra default bottom margin (grid gap handles spacing) */ .single-product ul.products li.product, .woocommerce-Tabs-panel ul.products li.product { margin-bottom: 0 !important; } /* Product cards on white backgrounds — match .ik-ac-card pattern from auctions page White card, #E8E8E6 border, gold hover, image top, info padded below, full-width gold BID NOW button flush at bottom */ .single-product ul.products li.product, .woocommerce-Tabs-panel ul.products li.product { background: #FFFFFF !important; border: 1px solid #E8E8E6 !important; border-radius: 0 !important; overflow: hidden !important; padding: 0 !important; transition: all 0.35s ease !important; display: flex !important; flex-direction: column !important; } .single-product ul.products li.product:hover, .woocommerce-Tabs-panel ul.products li.product:hover { border-color: rgba(154,126,46,0.3) !important; transform: translateY(-4px) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important; } /* Image area */ .single-product ul.products .astra-shop-thumbnail-wrap, .woocommerce-Tabs-panel ul.products .astra-shop-thumbnail-wrap { position: relative !important; overflow: hidden !important; } .single-product ul.products .astra-shop-thumbnail-wrap img, .woocommerce-Tabs-panel ul.products .astra-shop-thumbnail-wrap img { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; transition: transform 0.4s ease !important; } .single-product ul.products li.product:hover .astra-shop-thumbnail-wrap img, .woocommerce-Tabs-panel ul.products li.product:hover .astra-shop-thumbnail-wrap img { transform: scale(1.04) !important; } /* Info area */ .single-product ul.products .astra-shop-summary-wrap, .woocommerce-Tabs-panel ul.products .astra-shop-summary-wrap { padding: 16px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; } /* Category label */ .single-product ul.products .ast-woo-product-category, .woocommerce-Tabs-panel ul.products .ast-woo-product-category { font-size: 10px !important; color: #999 !important; -webkit-text-fill-color: #999 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 4px !important; display: block !important; } /* Product title */ .single-product ul.products .woocommerce-loop-product__title, .woocommerce-Tabs-panel ul.products .woocommerce-loop-product__title { margin: 0 0 8px !important; background: none !important; border: none !important; padding: 0 !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; } body.single-product.woocommerce ul.products li.product .woocommerce-loop-product__title, body.single-product.woocommerce ul.products li.product .woocommerce-loop-product__title a, .woocommerce-Tabs-panel ul.products .woocommerce-loop-product__title, .woocommerce-Tabs-panel ul.products .woocommerce-loop-product__title a { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; text-decoration: none !important; } body.single-product.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover, .woocommerce-Tabs-panel ul.products .woocommerce-loop-product__title a:hover { color: #6F5A1F !important; -webkit-text-fill-color: #6F5A1F !important; } /* Price */ .single-product ul.products .price, .woocommerce-Tabs-panel ul.products .price { font-size: 13px !important; color: #666 !important; -webkit-text-fill-color: #666 !important; margin: 0 0 4px !important; } .single-product ul.products .price strong, .single-product ul.products .price .woocommerce-Price-amount, .woocommerce-Tabs-panel ul.products .price strong, .woocommerce-Tabs-panel ul.products .price .woocommerce-Price-amount { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-weight: 600 !important; } .single-product ul.products .auction-price .current.auction, .woocommerce-Tabs-panel ul.products .auction-price .current.auction { color: #666 !important; -webkit-text-fill-color: #666 !important; font-size: 12px !important; font-weight: 400 !important; } /* Vendor badge */ .single-product ul.products .ik-sold-by, .woocommerce-Tabs-panel ul.products .ik-sold-by { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 12px !important; } .single-product ul.products .ik-sold-by span, .single-product ul.products .ik-sold-by a, .woocommerce-Tabs-panel ul.products .ik-sold-by span, .woocommerce-Tabs-panel ul.products .ik-sold-by a { color: #999 !important; -webkit-text-fill-color: #999 !important; font-size: 11px !important; } .single-product ul.products .ik-sold-by img, .woocommerce-Tabs-panel ul.products .ik-sold-by img { width: 24px !important; height: 24px !important; border-radius: 50% !important; object-fit: cover !important; } /* BID NOW button — full-width gold, flush to card bottom. Must beat .woocommerce ul.products li.product .button (0,4,2) */ .single-product.woocommerce ul.products li.product .button, .woocommerce-Tabs-panel ul.products li.product .button { display: block !important; text-align: center !important; padding: 12px !important; background: #FFCC33 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border: none !important; border-radius: 0 !important; margin: auto 0 0 0 !important; width: 100% !important; cursor: pointer !important; } .single-product.woocommerce ul.products li.product .button:hover, .woocommerce-Tabs-panel ul.products li.product .button:hover { background: #FFDB66 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; } /* Auction Finished button — outline style. IMPORTANT: Do NOT target [aria-label^="Read more"] — WC uses that aria-label on ALL auction product grid buttons (active AND finished), which incorrectly makes active "Bid now" buttons look like finished ones. Only use [disabled] for truly disabled buttons. Finished auction text ("Auction finished") still shows correctly via button text content. */ .single-product.woocommerce ul.products li.product .button[disabled], .woocommerce-Tabs-panel ul.products li.product .button[disabled] { background: transparent !important; border: 1px solid #D0D0CE !important; color: #666 !important; -webkit-text-fill-color: #666 !important; cursor: default !important; } /* Hide Astra on-card bag icon button on product page cards */ .single-product ul.products .ast-on-card-button, .woocommerce-Tabs-panel ul.products .ast-on-card-button { display: none !important; } /* Move ik-sold-by below image area to blend with summary visually */ .single-product ul.products .ik-sold-by, .woocommerce-Tabs-panel ul.products .ik-sold-by { padding: 8px 16px 0 !important; border-top: none !important; background: #FFFFFF !important; } /* Star rating inline (used in vendor cards) */ .star-rating-inline { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; letter-spacing: 2px !important; font-size: 14px !important; vertical-align: middle !important; line-height: 1 !important; } /* Gallery main image — only the primary image, NOT thumbnails */ .single-product .product-gallery-wrap img#main-gallery-img, .single-product .woocommerce-product-gallery__image img { width: 100% !important; height: auto !important; display: block !important; border-radius: 8px !important; } /* Auction card images — used in .ik-ac-card */ .ik-ac-image { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; } /* Vendor avatar — consistent everywhere, never oval */ .ik-sold-by img, .ik-ac-vendor img, .dokan-vendor-image img, .avatar { border-radius: 50% !important; object-fit: cover !important; aspect-ratio: 1/1 !important; } /* --- Auction badge on product cards --- */ .auction-bage { position: absolute !important; top: 10px !important; left: 10px !important; background: var(--ik-gold-dark) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; font-family: var(--ik-font-body) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 3px !important; z-index: 2 !important; } /* Hide empty auction badge (WC renders empty span on some cards) */ .auction-bage:empty { display: none !important; } /* Related Products card — inject LIVE/FINISHED badge into the empty .auction-bage span based on price markers. The auction WC plugin renders .winned-for.auction inside .price for finished auctions; active auctions show a price block without that class. */ body.single-product section.related li.product .auction-bage { display: inline-block !important; position: absolute !important; top: 12px !important; left: 12px !important; z-index: 2 !important; padding: 4px 10px !important; border-radius: 0 !important; font-family: var(--ik-font-body) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1 !important; } body.single-product section.related li.product:has(.winned-for.auction) .auction-bage { background: #E8E8E6 !important; color: #555 !important; -webkit-text-fill-color: #555 !important; } body.single-product section.related li.product:has(.winned-for.auction) .auction-bage::before { content: "Finished" !important; } body.single-product section.related li.product.product-type-auction:not(:has(.winned-for)) .auction-bage { background: #D9F0DA !important; color: #1F6F2A !important; -webkit-text-fill-color: #1F6F2A !important; } body.single-product section.related li.product.product-type-auction:not(:has(.winned-for)) .auction-bage::before { content: "Live" !important; } /* Related Products card — empty inside .ik-sold-by collapses so the avatar+name row sits flush */ body.single-product section.related li.product .ik-sold-by > a:empty { display: none !important; } /* --- Breadcrumb (visible on product page) --- */ .woocommerce-breadcrumb { font-family: var(--ik-font-body) !important; font-size: var(--ik-text-xs) !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; margin-bottom: 1rem !important; } .woocommerce-breadcrumb a { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; text-decoration: none !important; } .woocommerce-breadcrumb a:hover { color: #7A6420 !important; -webkit-text-fill-color: #7A6420 !important; } /* ══════════════════════════════════════════════════════════════ 23. WOOCOMMERCE NOTICES & MESSAGES Dark notice boxes with gold/red left border accents. Overrides default purple/green top borders and icon colors. ══════════════════════════════════════════════════════════════ */ /* Info and success messages — gold accent */ .woocommerce-info, .woocommerce-message { background: var(--ik-bg-elevated) !important; border-left: 2px solid var(--ik-gold-dark) !important; color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; } /* Error messages — red accent */ .woocommerce-error { background: var(--ik-bg-elevated) !important; border-left: 2px solid #F87171 !important; color: var(--ik-text-secondary) !important; -webkit-text-fill-color: var(--ik-text-secondary) !important; } /* Override default top borders (purple #a46497, green #8fae1b) */ .woocommerce-info, .woocommerce-message, .woocommerce-error { border-top: none !important; } .woocommerce-info::before, .woocommerce-message::before { color: var(--ik-gold) !important; -webkit-text-fill-color: var(--ik-gold) !important; } .woocommerce-error::before { color: #F87171 !important; -webkit-text-fill-color: #F87171 !important; } /* WooCommerce store notice banner */ .woocommerce-store-notice, p.demo_store { background: var(--ik-gold) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; } /* ══════════════════════════════════════════════════════════════ 24. WOOCOMMERCE CART & CHECKOUT Dark-themed cart table, payment box, order review, and discount display for the checkout flow. ══════════════════════════════════════════════════════════════ */ /* Cart table + Checkout payment — white bg on these pages */ .woocommerce-cart table.cart { background: #FFFFFF !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; } /* Small/help text in cart and checkout */ .cart_totals p small, .woocommerce table small, .checkout .create-account small, #payment div.payment_box span.help { color: var(--ik-text-tertiary) !important; -webkit-text-fill-color: var(--ik-text-tertiary) !important; } /* Cart discount — gold highlight */ .woocommerce .cart-discount td { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } /* --- Cart page white-page overrides --- */ .woocommerce-cart .shop_table { background: #FFFFFF !important; border: 1px solid #E8E8E6 !important; border-collapse: collapse !important; } .woocommerce-cart .shop_table th { background: #FAFAF8 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; font-family: var(--ik-font-body) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 12px 16px !important; border-bottom: 1px solid #E8E8E6 !important; } .woocommerce-cart .shop_table td { padding: 16px !important; border-bottom: 1px solid #E8E8E6 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; font-size: 14px !important; vertical-align: middle !important; } .woocommerce-cart .shop_table td a { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } /* Remove button — centered in cell */ .woocommerce-cart .product-remove { text-align: center !important; } .woocommerce-cart .product-remove a.remove { color: #CC0000 !important; -webkit-text-fill-color: #CC0000 !important; font-size: 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; } .woocommerce-cart .product-thumbnail img { width: 80px !important; height: 80px !important; object-fit: cover !important; border: 1px solid #E8E8E6 !important; } .woocommerce-cart .variation dt { font-weight: 600 !important; color: #666666 !important; -webkit-text-fill-color: #666666 !important; } .woocommerce-cart .variation dd p { color: #666666 !important; -webkit-text-fill-color: #666666 !important; } /* Cart totals */ .cart_totals { background: #FFFFFF !important; } /* Top breathing room for "CART TOTALS" heading. The .cart_totals box already has 20px L/R padding from base styles; pt was 0, leaving the heading flush to the box top. Match the L/R inset. */ body.woocommerce-cart .cart_totals { padding-top: 20px !important; } .cart_totals h2 { font-family: var(--ik-font-body) !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; margin-bottom: 12px !important; } .cart_totals .shop_table th { text-transform: none !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; } /* Checkout button — gold filled, full width */ .wc-proceed-to-checkout .checkout-button { background: #FFCC33 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 1px solid #FFCC33 !important; display: block !important; text-align: center !important; font-family: var(--ik-font-body) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-radius: 0 !important; padding: 16px !important; text-decoration: none !important; } .wc-proceed-to-checkout .checkout-button:hover { background: #E6B800 !important; border-color: #E6B800 !important; } /* Shipping methods on cart — left-aligned, no indent */ .woocommerce-shipping-methods { list-style: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; } .woocommerce-shipping-methods li { padding: 4px 0 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; margin-left: 0 !important; padding-left: 0 !important; } .woocommerce-shipping-methods li label { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } .woocommerce-shipping-methods .shipping_method { accent-color: #9A7E2E !important; margin-right: 8px !important; margin-left: 0 !important; } .woocommerce-shipping-destination { color: #666666 !important; -webkit-text-fill-color: #666666 !important; font-size: 13px !important; margin-top: 8px !important; } /* Cart prices — larger and bold for emphasis */ .woocommerce-cart .product-price .woocommerce-Price-amount, .woocommerce-cart .product-subtotal .woocommerce-Price-amount { font-size: 16px !important; font-weight: 700 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } /* Cart totals prices — larger and bold */ .cart_totals .woocommerce-Price-amount { font-size: 16px !important; font-weight: 700 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } /* Total row — even larger */ .cart_totals .order-total .woocommerce-Price-amount { font-size: 20px !important; } /* Coupon input */ .woocommerce-cart .coupon .input-text { background: #FFFFFF !important; border: 1px solid #D0D0CE !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; border-radius: 0 !important; } /* --- Checkout page white-page overrides --- Keep Astra's 55/40 float layout (billing left, order right). Just fix input widths and styling. */ /* Billing + Additional Info stacked inside their column */ .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none !important; width: 100% !important; } /* Form inputs must fill their containers */ .woocommerce-checkout .woocommerce-input-wrapper { display: block !important; } .woocommerce-checkout .woocommerce-input-wrapper .input-text, .woocommerce-checkout .woocommerce-input-wrapper select, .woocommerce-checkout .woocommerce-input-wrapper textarea { width: 100% !important; box-sizing: border-box !important; } .woocommerce-checkout h3 { font-family: var(--ik-font-body) !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; margin-bottom: 16px !important; padding-bottom: 12px !important; border-bottom: 1px solid #E8E8E6 !important; } /* Checkout order review table */ .woocommerce-checkout-review-order-table { background: #FFFFFF !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; border: 1px solid #E8E8E6 !important; width: 100% !important; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { color: #333333 !important; -webkit-text-fill-color: #333333 !important; padding: 12px 16px !important; border-bottom: 1px solid #E8E8E6 !important; } /* Checkout prices — larger and bold for visibility */ .woocommerce-checkout-review-order-table .woocommerce-Price-amount { font-size: 16px !important; font-weight: 700 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } /* Checkout total row — even larger */ .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount { font-size: 20px !important; } .woocommerce-checkout-review-order-table thead th { background: #FAFAF8 !important; font-family: var(--ik-font-body) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } /* Order review — remove Astra's 2em side padding so table aligns with heading */ .woocommerce-checkout form #order_review, .woocommerce.woocommerce-checkout form #order_review, .woocommerce-page.woocommerce-checkout form #order_review { padding: 0 !important; border: none !important; } /* Order review heading — match billing h3 vertical position. Astra puts padding: 20px 0 14px on #customer_details h3. Match that top padding here. */ .woocommerce-checkout form #order_review_heading, .woocommerce.woocommerce-checkout form #order_review_heading, .woocommerce-page.woocommerce-checkout form #order_review_heading { padding: 20px 0 12px !important; margin: 0 0 16px !important; border: none !important; border-bottom: 1px solid #E8E8E6 !important; } /* Push order table down to align PRODUCT row with Email address input on left. Left side: h3 (14px + 12px padding-bottom + 16px margin-bottom) + label (~20px) + gap = ~62px Right side: h3 (same) + table starts immediately. Need ~40px extra to match. */ .woocommerce-checkout-review-order { margin-top: 30px !important; } /* Checkout payment section */ .woocommerce-checkout #payment { background: #FAFAF8 !important; border: 1px solid #E8E8E6 !important; padding: 20px !important; border-radius: 0 !important; } .woocommerce-checkout #payment ul.payment_methods { list-style: none !important; padding: 0 !important; margin: 0 0 16px !important; border: none !important; } .woocommerce-checkout #payment .payment_method label { color: #333333 !important; -webkit-text-fill-color: #333333 !important; font-size: 14px !important; font-weight: 600 !important; } .woocommerce-checkout #payment div.payment_box { background: #FFFFFF !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; border: 1px solid #E8E8E6 !important; padding: 16px !important; margin-top: 8px !important; } .woocommerce-checkout #payment div.payment_box label { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } /* Place order button */ #place_order { background: #FFCC33 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 1px solid #FFCC33 !important; font-family: var(--ik-font-body) !important; font-weight: 700 !important; font-size: 16px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-radius: 0 !important; padding: 16px 32px !important; width: 100% !important; } #place_order:hover { background: #E6B800 !important; border-color: #E6B800 !important; } /* Privacy text in checkout */ .woocommerce-checkout .woocommerce-privacy-policy-text p { color: #666666 !important; -webkit-text-fill-color: #666666 !important; font-size: 13px !important; margin-bottom: 16px !important; } /* Checkout responsive — stack billing/shipping */ @media (max-width: 768px) { .woocommerce-checkout .col2-set { flex-direction: column !important; gap: 0 !important; } } /* --- My Bids table --- */ .my_auctions_activity { width: 100% !important; border-collapse: collapse !important; background: #FFFFFF !important; } .my_auctions_activity th { background: #FAFAF8 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; font-family: var(--ik-font-body) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 12px 16px !important; border-bottom: 1px solid #E8E8E6 !important; text-align: left !important; } .my_auctions_activity td { padding: 12px 16px !important; border-bottom: 1px solid #E8E8E6 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; font-size: 14px !important; } .my_auctions_activity td a { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } /* Currently winning (active auction) — gold left border + subtle bg */ .my_auctions_activity tr.winning { background: rgba(255, 204, 51, 0.08) !important; border-left: 3px solid #FFCC33 !important; } .my_auctions_activity tr.winning td { font-weight: 600 !important; } /* Won auction (closed + winning) — stronger gold highlight */ .my_auctions_activity tr.closed.winning { background: rgba(255, 204, 51, 0.15) !important; border-left: 3px solid #9A7E2E !important; } .my_auctions_activity tr.closed.winning td { font-weight: 700 !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } /* Lost/ended auction (closed, not winning) — muted */ .my_auctions_activity tr.closed:not(.winning) { opacity: 0.6 !important; } /* "Sold for" status text */ .my_auctions_activity .sold-for.auction, .my_auctions_activity .winned-for.auction { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; } /* Bid status text */ .my_auctions_activity .current.auction { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase !important; } /* --- My Won Auctions page --- Override inline styles from Code Snippet. */ .ik-won-count { font-size: 15px !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; margin-bottom: 20px !important; } .ik-won-auctions-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin: 0 !important; padding: 0 !important; } @media (max-width: 768px) { .ik-won-auctions-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .ik-won-auctions-grid { grid-template-columns: 1fr !important; } } /* Kill Astra's auto-margin centering on grid children. Astra rule: .entry-content[data-ast-blocks-layout] > *:not(.wp-block-group) > * applies margin-left/right: auto to grandchildren, shrinking our cards. */ .ik-won-auctions-grid > *, .ik-won-card, .ik-won-card > * { margin-left: 0 !important; margin-right: 0 !important; } .ik-won-card { border: 1px solid #E8E8E6 !important; border-radius: 0 !important; overflow: hidden !important; background: #FFFFFF !important; transition: border-color 0.2s ease !important; display: flex !important; flex-direction: column !important; width: auto !important; } .ik-won-card:hover { border-color: rgba(154, 126, 46, 0.3) !important; } .ik-won-image { display: block !important; width: 100% !important; } .ik-won-image img { width: 100% !important; height: 200px !important; object-fit: cover !important; display: block !important; } .ik-won-details { padding: 16px !important; padding-bottom: 52px !important; flex: 1 !important; position: relative !important; } /* Pin button/badge to bottom of details container */ body .entry-content a.ik-won-pay-btn, a.ik-won-pay-btn, .ik-won-status.ik-paid { position: absolute !important; bottom: 16px !important; left: 16px !important; } .ik-won-title { margin: 0 0 8px !important; font-family: var(--ik-font-body) !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } .ik-won-title a { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; text-decoration: none !important; } .ik-won-title a:hover { color: #9A7E2E !important; -webkit-text-fill-color: #9A7E2E !important; } .ik-won-bid, .ik-won-date { margin: 4px 0 !important; font-size: 14px !important; color: #666666 !important; -webkit-text-fill-color: #666666 !important; font-family: var(--ik-font-body) !important; } .ik-won-bid strong { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } /* Add to Cart button — gold filled, matches our button system */ /* Add to Cart button — gold filled with BLACK text. High specificity to beat Code Snippet inline