/* Theme Name: Trans-First Child Theme Theme URI: https://trans-first.com Description: Custom secure identity-affirming platform adjustments for Astra. Author: Trans-First Team Version: 1.0.0 Template: astra Text Domain: trans-first-child */ /* ========================================================================== 1. GLOBAL HEADER BACKGROUND & SIGNATURE PINK SHADOW FADE TRACK ========================================================================== */ .ast-primary-header-bar, .site-header, #masthead { background-color: #ffffff !important; /* RESTORES: The clean crisp pink bottom divider border trace line */ border-bottom: 1px solid rgba(244, 143, 177, 0.15) !important; /* RESTORES: The signature subtle pink glowing ambient shadow fade */ box-shadow: 0 4px 12px rgba(244, 143, 177, 0.12), 0 1px 3px rgba(0, 0, 0, 0.02) !important; } /* ========================================================================== 5. ISOLATED 5-COLUMN CATEGORY ROW ENGINE ========================================================================== */ @media (min-width: 922px) { .wp-block-columns:has(> .wp-block-column:nth-child(5)) { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 1200px !important; margin: 40px auto !important; } .wp-block-columns:has(> .wp-block-column:nth-child(5)) > .wp-block-column { display: flex !important; flex-direction: column !important; align-items: center !important; width: 18% !important; min-width: 18% !important; max-width: 18% !important; } .wp-block-columns:has(> .wp-block-column:nth-child(5)) img { width: 100% !important; height: 240px !important; border-radius: 16px !important; object-fit: cover !important; } } /* ADMIN BAR BUTTON CLEANUP MATRIX: Safely scopes variables to only touch the search form container */ #wpadminbar #adminbarsearch input[type="submit"], #wpadminbar #adminbarsearch .ab-item, #wpadminbar #adminbarsearch button, #wpadminbar #adminbarsearch input { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; color: inherit !important; transform: none !important; box-shadow: none !important; } /* ========================================================================== 4. HOMEPAGE 5-COLUMN GRID SPECIFIC LOCK (DESKTOP: 922PX AND UP) ========================================================================== */ @media (min-width: 922px) { /* 1. Selects ONLY the column wrapper that contains your 5 specific items */ .wp-block-columns:has(> .wp-block-column:nth-child(5)), .curated-grid-container { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; flex-wrap: nowrap !important; /* Locks all 5 blocks side-by-side */ width: 100% !important; max-width: 1200px !important; margin: 40px auto !important; } /* 2. Locks each card item to exactly 18% width footprint */ .wp-block-columns:has(> .wp-block-column:nth-child(5)) > .wp-block-column, .curated-grid-card { display: flex !important; flex-direction: column !important; align-items: center !important; width: 18% !important; min-width: 18% !important; max-width: 18% !important; text-align: center !important; } /* 3. Forces the image containers to render as 240px rectangular blocks */ .wp-block-columns:has(> .wp-block-column:nth-child(5)) img, .wp-block-columns:has(> .wp-block-column:nth-child(5)) figure, .curated-grid-card .rectangle-box img { width: 100% !important; height: 240px !important; /* Perfect signature rectangle layout height */ border-radius: 16px !important; /* Smooth curved card edges */ object-fit: cover !important; } /* 4. Centers and refines card headers */ .wp-block-columns:has(> .wp-block-column:nth-child(5)) h3, .curated-grid-card h3 { font-size: 15px !important; font-weight: 600 !important; margin-top: 14px !important; margin-bottom: 4px !important; color: #111111 !important; } /* 5. Centers and refines subtexts */ .wp-block-columns:has(> .wp-block-column:nth-child(5)) p, .curated-grid-card p { font-size: 13px !important; font-weight: 400 !important; color: #64748b !important; margin: 0 !important; } } /* ========================================================================== 5. HOMEPAGE 5-COLUMN GRID MOBILE & TABLET FALLBACK RESCUE (BELOW 921PX) ========================================================================== */ @media (max-width: 921px) { .wp-block-columns:has(> .wp-block-column:nth-child(5)), .curated-grid-container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; /* Safely drops items to next row on tablets/phones */ justify-content: center !important; gap: 16px !important; width: 100% !important; margin: 20px auto !important; } .wp-block-columns:has(> .wp-block-column:nth-child(5)) > .wp-block-column, .curated-grid-card { width: calc(45% - 8px) !important; /* Creates a clean 2-column stacked deck on small screens */ min-width: calc(45% - 8px) !important; max-width: 50% !important; margin-bottom: 16px !important; text-align: center !important; } .wp-block-columns:has(> .wp-block-column:nth-child(5)) img, .curated-grid-card .rectangle-box img { height: 180px !important; /* Proportional image scaling for small viewports */ width: 100% !important; object-fit: cover !important; } } /* ========================================================================== 6. PRIMARY COHORT SUBMIT & NAV BUTTON ACTIONS ========================================================================== */ .wpforms-form button[type="submit"].wpforms-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background-color: #42A5F5 !important; color: #ffffff !important; border: none !important; border-radius: 30px !important; padding: 14px 35px !important; font-size: 18px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0.5px !important; cursor: pointer !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; transition: all 0.3s ease-in-out !important; margin-top: 15px !important; line-height: 1 !important; } .wpforms-form button[type="submit"].wpforms-submit:hover { background-color: #1A2530 !important; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important; transform: translateY(-1px); } .wp-block-button__link { background-color: #42A5F5 !important; color: #ffffff !important; font-weight: 700 !important; font-size: 18px !important; } .wp-block-button__link:hover { color: #ffffff !important; } /* ========================================================================== 11. PREMIUM 3-COLUMN PILLAR CARDS OVERHAUL (AXIS-LOCKED MATRIX EXPLOIT) ========================================================================== */ /* Forces the columns to adopt a relative positioning grid chassis */ .wp-block-columns .wp-block-column { position: relative !important; padding-bottom: 80px !important; /* Creates an un-collapsible structural base gap for the button */ display: flex !important; flex-direction: column !important; } /* Rounded image corners inside the cards */ .wp-block-column img, .wp-block-column .wp-block-image img { border-radius: 10px !important; margin-bottom: 16px !important; width: 100% !important; height: auto !important; object-fit: cover !important; } /* Symmetrical text heading spacing */ .wp-block-column h4 { margin-top: 0px !important; margin-bottom: 12px !important; font-weight: 700 !important; color: #1a2530 !important; } /* HARD PIN VERTICAL EXPLOIT: Clips the buttons right to the bottom dead center */ .wp-block-column .wp-block-buttons { position: absolute !important; bottom: 25px !important; /* Hard-coded anchor line forces both buttons onto a straight line */ left: 50% !important; transform: translateX(-50%) !important; /* Flawlessly dead-centers the button container on the horizontal axis */ width: calc(100% - 40px) !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* FORCES ALL BUTTON CAPSULES TO STRETCH TO AN IDENTICAL LENGTH SYSTEM */ .wp-block-column .wp-block-button .wp-block-button__link { min-width: 190px !important; /* Locks every blue capsule to the exact same premium horizontal width */ text-align: center !important; display: block !important; } /* Restores the inner link items to display smoothly inside the center matrix */ .wp-block-column .wp-block-button { display: inline-block !important; margin: 0 auto !important; } /* ========================================================================== 14. INTERACTIVE GENTLE HOVER & FOCUS GLOW MATRIX EFFECT (#2290FF) ========================================================================== */ /* 1. RESTING BASE LINE UPGRADE (Overrides Point 13 safely from down here) */ .site-header .dgwt-wcas-sf-wrapp { border: 1.5px solid #e2e8f0 !important; /* Thickens the gray line slightly without touching 13 */ } /* 2. Triggers a VERY GENTLE, soft ambient blue mist when mouse hovers */ .site-header .dgwt-wcas-search-form:hover .dgwt-wcas-sf-wrapp { border: 1.5px solid rgba(34, 144, 255, 0.5) !important; /* Softened bolder blue line */ box-shadow: 0 0 8px rgba(34, 144, 255, 0.15) !important; /* Gentle ambient blue fog */ } /* 3. Expands to the fuller premium typing glow when actively clicked / focused */ .site-header .dgwt-wcas-search-form:focus-within .dgwt-wcas-sf-wrapp { border: 1.5px solid #2290FF !important; /* Active bold blue frame */ box-shadow: 0 0 0 3px rgba(34, 144, 255, 0.18) !important; background-color: #ffffff !important; /* Flashes clean white when typing */ } /* 4. NAVIGATION RECOVERY SYSTEM (Pulls the 4 text items back onto the page) */ .site-header .main-header-bar-navigation, .site-header .ast-header-sections-navigation, .site-header .ast-builder-menu-1, .site-header .ast-header-right-section, .site-header .ast-header-right-section-wrap { margin-left: auto !important; /* Pulls menu inward toward the center capsule */ margin-right: 0 !important; /* Wipes out excessive invisible right-side margins */ padding-right: 20px !important; /* Locks a secure padding bumper from the physical screen edge */ display: flex !important; justify-content: flex-end !important; } .site-header .ast-builder-grid-row { display: flex !important; justify-content: space-between !important; /* Forces Logo, Search, and Menus to divide space symmetrically */ width: 100% !important; max-width: 100% !important; } /* ========================================================================== 18. TOP BANNER ANNOUNCEMENT CONTROLLER - MISSION VISIBILITY ========================================================================== */ .ast-above-header-bar, .ast-above-header, [class*="above-header"] p, [class*="above-header"] span, .ast-above-header-section-1 { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #1a1a1a !important; /* 🌟 THE RESCUE OVERRIDE: Forces the bar to stay completely visible across all responsive layout modes */ display: flex !important; visibility: visible !important; opacity: 1 !important; /* Allows the pink container to grow vertically when the text wraps on tight viewports */ height: auto !important; white-space: normal !important; } /* ========================================================================== 19. WOOCOMMERCE PRODUCT CATALOG GRID SYSTEM - PREMIUM SAAS CLEANUP ========================================================================== */ .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: #1a1a1a !important; letter-spacing: -0.01em !important; margin: 8px 0 4px 0 !important; } .woocommerce ul.products li.product .price { font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 12px !important; } .woocommerce ul.products li.product .ast-woo-product-category { font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #9ca3af !important; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { background-color: #42A5F5 !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0px !important; padding: 10px 20px !important; border-radius: 4px !important; transition: background-color 0.2s ease-in-out !important; border: none !important; text-transform: none !important; } .woocommerce ul.products li.product .button:hover { background-color: #1e88e5 !important; color: #ffffff !important; } /* ========================================================================== 21. SINGLE PRODUCT SUMMARY COLUMN - TYPOGRAPHIC SCALING MATRIX ========================================================================== */ /* 1. FLEX ORDERING REARRANGEMENT */ .single-product div.product .summary { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* 2. BREADCRUMBS TRAIL */ .single-product .woocommerce-breadcrumb, .single-product .woocommerce-breadcrumb * { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #4b5563 !important; letter-spacing: -0.01em !important; margin-bottom: 20px !important; order: 1 !important; } .single-product .woocommerce-breadcrumb a { color: #4b5563 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .single-product .woocommerce-breadcrumb a:hover { color: #1e88e5 !important; } /* 3. CATEGORY BLOCK HIGHLIGHT */ .single-product div.product .summary .posted_in:first-of-type, .single-product div.product .summary > a[href*="product-category"], .single-product div.product .summary > .ast-woo-product-category { font-family: 'Inter', sans-serif !important; color: #42A5F5 !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 8px !important; order: 2 !important; } /* 4. MAIN PRODUCT TITLE */ .single-product .product_title, .single-product h1.product_title { font-family: 'Inter', sans-serif !important; font-size: 28px !important; font-weight: 700 !important; color: #1a1a1a !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; margin: 0 0 16px 0 !important; order: 3 !important; } /* 5. REDUNDANCY PURGE CONTROLLER */ .single-product .product_meta, .single-product .product_meta .posted_in { display: none !important; } /* 6. PRODUCT TABS SYSTEM - DUAL-ACCENT FLAG ARCHITECTURE */ .single-product .woocommerce-tabs ul.tabs li a { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; color: #6b7280 !important; transition: color 0.2s ease-in-out !important; } .single-product .woocommerce-tabs ul.tabs li a:hover, .single-product .woocommerce-tabs ul.tabs li:hover a { color: #42A5F5 !important; } .single-product .woocommerce-tabs ul.tabs li.active a { color: #1a1a1a !important; } /* TOP ACCENT LINE OVERRIDE */ .single-product .woocommerce-tabs ul.tabs li.active::before, .single-product .woocommerce-tabs ul.tabs li.active a::before, .woocommerce-tabs ul.tabs li.active::before { background: #42A5F5 !important; background-color: #42A5F5 !important; border-top: 3px solid #42A5F5 !important; } /* BOTTOM ACCENT LINE OVERRIDE */ .single-product .woocommerce-tabs ul.tabs li.active, .single-product .woocommerce-tabs ul.tabs li.active a { border-top: none !important; border-bottom: 3px solid #F48FB1 !important; border-bottom-color: #F48FB1 !important; } /* ========================================================================== PRODUCT TABS ENGINE - ELEGANT SLOW FADE TRANSITIONS ========================================================================== */ /* Applies a smooth, global slow fade to the borders and lines of the tabs */ .single-product .woocommerce-tabs ul.tabs li, .single-product .woocommerce-tabs ul.tabs li::before, .single-product .woocommerce-tabs ul.tabs li a::before, .woocommerce-tabs ul.tabs li::before, .single-product .woocommerce-tabs ul.tabs li a { transition: all 0.35s ease-in-out !important; /* Controls the exact premium velocity of the fade */ } /* ========================================================================== PRODUCT TABS ENGINE - SOLID TRACK CHASSIS (PERFECT LENGTH MATCH) ========================================================================== */ /* 1. Clean, matching crisp solid grey line tracks across the top and bottom */ .woocommerce div.product .woocommerce-tabs .tabs, .single-product .woocommerce-tabs ul.tabs { box-shadow: none !important; border-left: none !important; border-right: none !important; background-color: transparent !important; border-top: 1px solid #e2e8f0 !important; border-bottom: 1px solid #e2e8f0 !important; } /* 2. Vaporize native theme borders, backgrounds, and legacy clip-lines completely */ .single-product .woocommerce-tabs ul.tabs li.active, .single-product .woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li, .woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { border: none !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* 3. Expands internal width tracking footprints so elements stretch out wide and match */ .single-product .woocommerce-tabs ul.tabs li { position: relative !important; display: inline-block !important; padding: 0 !important; margin: 0 12px !important; } .single-product .woocommerce-tabs ul.tabs li a { position: relative !important; display: inline-block !important; width: auto !important; /* Premium horizontal cushion width footprint */ padding-left: 28px !important; padding-right: 28px !important; padding-top: 10px !important; padding-bottom: 10px !important; transition: color 0.35s ease-in-out !important; } /* ========================================================================== BLUE TOP LINE MATRIX - ANCHORED TO TEXT LINK TOP (LEFT-TO-RIGHT) ========================================================================== */ /* RESTING STATE: Anchor left-axis layer blueprint onto text link top */ .single-product .woocommerce-tabs ul.tabs li a::before { content: "" !important; position: absolute !important; top: -2px !important; /* Aligns flat on the top grey line border track */ left: 0 !important; right: auto !important; width: 0 !important; height: 6px !important; background-color: #42A5F5 !important; /* Platform Blue */ transition: width 0.35s ease-in-out !important; } /* ACTIVE ENFORCER: Slides blue line left-to-right ONLY when parent tab is clicked */ .single-product .woocommerce-tabs ul.tabs li.active a::before { width: 100% !important; } /* ========================================================================== PINK BOTTOM LINE MATRIX - ANCHORED TO TEXT LINK BOTTOM (RIGHT-TO-LEFT) ========================================================================== */ /* RESTING STATE: Anchor right-axis layer blueprint strictly onto text link bottom */ .single-product .woocommerce-tabs ul.tabs li a::after { content: "" !important; position: absolute !important; bottom: -2px !important; /* Aligns flat on the bottom grey line border track */ right: 0 !important; /* Locks right wall anchor coordinate grid */ left: auto !important; width: 0 !important; height: 4px !important; background-color: #F48FB1 !important; /* Flagship Hot Pink */ transition: width 0.35s ease-in-out !important; } /* ACTIVE ENFORCER: Slides pink line right-to-left ONLY when parent tab is clicked */ .single-product .woocommerce-tabs ul.tabs li.active a::after { width: 100% !important; } /* ========================================================================== FINAL PLATFORM REPAIR: RE-ALIGNS VENDOR GRID HOVER TRACKS ========================================================================== */ /* 1. Rounds the outer container links to perfectly match your circle elements */ html body .dokan-store-footer a, html body .dokan-store-avatar-wrap a, html body .seller-avatar a, html body .dokan-store-footer a:hover, html body .dokan-store-avatar-wrap a:hover { border-radius: 50% !important; /* Locks perfect circular geometry boundaries */ overflow: hidden !important; /* 🚀 CLIPS AWAY any rectangular pink leaks from the sides */ display: inline-flex !important; align-items: center !important; justify-content: center !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; } /* 2. Disables background color overrides on these specific round link blocks */ html body .dokan-store-footer a, html body .dokan-store-avatar-wrap a, html body .dokan-store-footer a:hover, html body .dokan-store-avatar-wrap a:hover { background: transparent !important; background-color: transparent !important; background-image: none !important; /* 🚀 FORCES the core pink image gradients off the screen */ } /* 3. Ensures the inner graphics maintain their clean circular tracks independently */ html body .dokan-store-footer a :is(i, span, svg), html body .dokan-store-avatar-wrap :is(img, div, span, i) { border-radius: 50% !important; overflow: hidden !important; } /* ========================================================================== THE ULTIMATE FINAL BOSS REPAIRED - BALANCED PERFECT CIRCLE ENGINE ========================================================================== */ /* 1. Transparent Parent Container (Zero Interferences) */ #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer a, #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer a:hover { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* 2. BASE STATE: Perfect Blue Circle Icon Box */ #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer a span.dashicons-arrow-right-alt2, #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer a span.dokan-btn-theme { background-color: #42A5F5 !important; /* Flagship brand blue */ color: #ffffff !important; /* Pure white arrow */ /* === MATHEMATICAL CIRCLE ENGINE === */ width: 36px !important; height: 36px !important; aspect-ratio: 1 / 1 !important; /* Forces strict 1:1 geometry */ box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 50% !important; /* === MODERN FLEX CENTERING === */ display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; /* Scales chevron cleanly */ overflow: hidden !important; transition: background-color 0.2s ease !important; } /* 3. HOVER STATE: Restores Dark Blue Effect Explicitly */ #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer a:hover span.dashicons-arrow-right-alt2, #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer a:hover span.dokan-btn-theme { background-color: #1976D2 !important; /* Rich dark blue hover effect */ color: #ffffff !important; } /* 4. ICON ENGINE: Centers the font symbol inside the geometric box */ #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer a span.dashicons-arrow-right-alt2::before { display: inline-block !important; width: auto !important; height: auto !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== IMAGE ZOOM HARNESS - SHARP RADIUS PRESERVATION ENGINE ========================================================================== */ /* 1. LOCKS CONTAINER SIZES: Prevents the layout or box frames from expanding */ .wp-block-columns .wp-block-column, .wp-block-image, .dokan-category-card, .store-categories-wrap li, .store-categories-wrap a, [class*="category-card"], .wp-block-post-featured-image { overflow: hidden !important; position: relative !important; display: block !important; border-radius: 16px !important; /* Locks your corner radius firmly in place */ transform: none !important; /* Prevents container boxes from growing */ } /* 2. BASE IMAGE CONFIG: Sets transition effects exclusively on the image asset */ .wp-block-columns img, .wp-block-image img, .dokan-category-card img, .store-categories-wrap img, [class*="category-card"] img, .wp-block-post-featured-image img { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; transform: scale(1) !important; transform-origin: center center !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ========================================================================== IMAGE ZOOM HARNESS - ANTI-EXPANSION GRID SHIELD ========================================================================== */ /* 1. STRUCTURAL LOCK: Completely freezes the physical width of all columns and image containers */ .wp-block-columns .wp-block-column, .wp-block-columns > div, .wp-block-image, .wp-block-image figure, .dokan-category-card, .store-categories-wrap li, [class*="category-card"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: 0 !important; overflow: hidden !important; position: relative !important; border-radius: 16px !important; /* Forces your corners to remain strictly rounded */ transform: none !important; /* Hard-blocks any outer box frame scaling expansion */ transition: none !important; /* Kills Astra's container layout resizing animations */ } /* 2. BASE IMAGE CONFIG: Prepares the image asset layer to transform independently inside its container */ .wp-block-columns img, .wp-block-image img, .wp-block-image figure img, .dokan-category-card img, .store-categories-wrap img, [class*="category-card"] img { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; transform: scale(1) !important; transform-origin: center center !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; } /* ========================================================================== THE APEX ZOOM ENGINE - ZERO CONTAINER RECALCULATION ========================================================================== */ /* 1. LOCK CONTAINER FRAMES: Freeze the image boxes and set rounded corners */ .wp-block-image, .wp-block-image figure, .dokan-category-card, [class*="category-card"] { position: relative !important; overflow: hidden !important; /* Crisp mask clips the zoom inside */ border-radius: 16px !important; /* Forces your beautiful smooth corners */ display: block !important; width: 100% !important; transform: none !important; /* Hard-kills any container expansion */ transition: none !important; /* Stops Astra from changing box sizes */ } /* 2. FORCE RAW IMAGE ASSETS TO NEVER EXPAND HIERARCHY */ .wp-block-columns img, .wp-block-image img, .dokan-category-card img, [class*="category-card"] img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; /* Keeps photo dimensions perfectly proportional */ pointer-events: none !important; /* Tells the browser to ignore layout hover triggers on the image itself */ /* Prepares only the graphical visual layer for micro-zoom */ will-change: transform !important; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; transform: scale(1) !important; } /* 3. MICRO-TARGET THE VISUAL SCALE ONLY */ .wp-block-column:hover img, .wp-block-image:hover img, .wp-block-image figure:hover img, .dokan-category-card:hover img, [class*="category-card"]:hover img { transform: scale(1.06) !important; /* Pure 6% graphical zoom inside the box boundary */ } /* 4. EMERGENCY BLOCK: Neutralizes any external script or CSS hover triggers on column layouts */ .wp-block-column:hover, .wp-block-column, .wp-block-columns > div { flex: 1 1 0% !important; /* Forces columns to stay in completely equal sizes */ width: 0 !important; /* Completely blocks layout engine resizing */ min-width: 0 !important; max-width: 100% !important; transform: none !important; transition: none !important; } /* ========================================================================== FLUID VERTICAL LOCK - 15% LONGER PORTRAIT ENGINE ========================================================================== */ /* 1. LOCK BY PROPORTION: Stretches the frame height by exactly 15% */ .wp-block-image, .wp-block-image figure, .dokan-category-card .image-wrap, [class*="category-card"] .image-container { height: auto !important; max-height: none !important; /* === 15% LONGER RATIO: Sets vertical height to 1.15x the horizontal width === */ aspect-ratio: 1 / 1.15 !important; display: block !important; width: 100% !important; max-width: 100% !important; margin-bottom: 15px !important; /* Static margin buffer above text title link */ } /* 2. RE-ANCHOR IMAGE PROPORTIONS: Fills out the newly expanded vertical frame */ .wp-block-columns img, .wp-block-image img, .dokan-category-card img, [class*="category-card"] img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* Pulls in original portrait data to fill the space */ } /* ========================================================================== FORCE WOOCOMMERCE PRODUCT BUTTON HOVER REPAIR ========================================================================== */ .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product a.button:hover, .woocommerce ul.products li.product .added_to_cart:hover { background-color: transparent !important; /* Prevents the button from filling in solid blue */ background: transparent !important; color: #42A5F5 !important; /* Changes the text color to a clean light blue on hover */ border-color: #42A5F5 !important; /* Keeps the border a clean light blue on hover */ } /* ========================================================================== THE CURATED 5-CARD GRID HOVER ZOOM ENGINE - ASPECT RATIO FIX ========================================================================== */ /* 1. MASK PROTECTION: Forces a strict 15% longer aspect ratio frame on the boxes */ .curated-grid-container .curated-grid-card, .curated-grid-container .rectangle-box { position: relative !important; overflow: hidden !important; /* Crisply slices the image zoom inside the card */ border-radius: 16px !important; /* Locks your smooth card corners */ display: block !important; width: 100% !important; max-width: 100% !important; /* === FIX: Overrides Astra's 240px height limit and matches the top layout row === */ height: auto !important; max-height: none !important; aspect-ratio: 1 / 1.15 !important; /* Forces the exact same 15% longer canvas shape */ transform: none !important; /* Firmly blocks any structural card scaling */ transition: none !important; /* Prevents theme-level layout shifting */ } /* 2. BASE IMAGE CONFIG: Corrects Astra's width/height constraints and arms animation */ .curated-grid-container .rectangle-box img, .curated-grid-card .rectangle-box img { display: block !important; width: 100% !important; /* Overrides Astra's breaking 108% width setting */ max-width: 100% !important; /* === FIX: Forces the image to expand to full container scale without hard cropping === */ height: 100% !important; max-height: none !important; object-fit: cover !important; /* Keeps the picture proportions flawless */ /* Hardware acceleration scaling config */ will-change: transform !important; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; transform: scale(1) !important; } /* 3. FLOATING ZOOM EFFECT: Magnifies ONLY the graphic assets on mouse hover */ .curated-grid-card:hover .rectangle-box img, .curated-grid-container .curated-grid-card:hover img { transform: scale(1.06) !important; /* Uniform 6% inner pixel magnification */ } /* 4. ANTI-WARPING BLOCK: Disables layout shifts on the text elements below */ .curated-grid-card:hover { transform: none !important; transition: none !important; } /* ========================================================================== BLUE SORT-BY DROPDOWN SELECTOR BOX - DEFINITIVE CENTER METHOD ========================================================================== */ .dokan-store-list-filter-wrap .orderby, .dokan-store-list-filter-wrap select, .store-list-toolbar select, .dokan-store-list-filter-form select, select[name="stores_orderby"] { background-color: transparent !important; background: transparent !important; border: 1px solid #42A5F5 !important; color: #333333 !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; height: 38px !important; /* Locked dimensional height grid track */ border-radius: 4px !important; box-shadow: none !important; outline: none !important; /* 🚀 REPAIR HACK: Forces browser to convert select container engine to center text strings */ display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; text-align-last: center !important; /* Flawless math alignment bounds */ padding: 0 16px !important; width: auto !important; min-width: 140px !important; } /* Strips out native platform desktop down-arrow blocks that squeeze choices leftward */ select[name="stores_orderby"]::-ms-expand { display: none !important; } /* Custom Blue Heart Bullet Points */ ul.heart-bullets { list-style: none; /* Removes standard black dots */ padding-left: 0; /* Resets default browser indent */ margin-left: 24px; /* Creates clean alignment spacing */ } ul.heart-bullets li { position: relative; padding-left: 30px; /* Leaves room for the blue heart icon */ margin-bottom: 12px; /* Adds comfortable line spacing between points */ line-height: 1.6; } ul.heart-bullets li::before { content: "💙"; /* The universal blue heart emoji */ position: absolute; left: 0; top: 1px; /* Vertically aligns the heart with the first line of text */ font-size: 16px; /* Adjusts size proportionally to your font */ } /* ========================================================================== ROUND CORNERS ON /SHOP IMAGES - RADIUS ========================================================================== */ /* Round the corners of WooCommerce product images */ .woocommerce ul.products li.product a img { border-radius: 12px !important; overflow: hidden; } /* Hide only the breadcrumbs on the shop archive page */ .archive.woocommerce .woocommerce-breadcrumb { display: none !important; } /* ========================================================================== MY ACCOUNT PAGE NAVIGATION CLEAN-UP ========================================================================== */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block !important; text-align: left !important; /* Centers or aligns all menu options uniformly left */ padding: 10px 15px !important; /* Balances the layout box spacing */ } /* ========================================================================== MODERN STRIPE / PAYMENT FORM STYLING ========================================================================== */ /* 1. The Main Form Container - Adds rounded corners and professional padding */ .woocommerce-account .wc-credit-card-form, #add_payment_method #payment, .woocommerce-account form#add_payment_method { background-color: #f8fafc !important; /* Soft, clean modern grey background */ border: 1px solid #e2e8f0 !important; /* Muted modern border line */ border-radius: 16px !important; /* Matches your smooth 16px card layout */ padding: 24px !important; /* Gives the fields breathing room */ } /* 2. Style the Tab Selector Buttons (Card / Bank) */ .wc-stripe-payment-token-picker, .wc-stripe-payment-token-picker-item { border-radius: 12px !important; /* Smooth rounded corners for input selectors */ border: 1px solid #cbd5e1 !important; background: #ffffff !important; transition: all 0.2s ease !important; } /* 3. Make Form Input Fields Look Modern and Uniform */ .woocommerce-account form .form-row input.input-text, .woocommerce-account .wc-credit-card-form-card-number, .woocommerce-account .wc-credit-card-form-card-expiry, .woocommerce-account .wc-credit-card-form-card-cvc { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; /* Clean input border line */ border-radius: 8px !important; /* Subtle corner roundness for small fields */ padding: 12px 16px !important; /* Elegant sizing padding */ font-family: 'Inter', sans-serif !important; font-size: 15px !important; color: #333333 !important; box-shadow: none !important; } /* 4. Highlight Inputs Nicely When Clicked (Using Your Brand Blue) */ .woocommerce-account form .form-row input.input-text:focus { border-color: #42A5F5 !important; /* Brand blue focus outline */ outline: none !important; background-color: #ffffff !important; } /* 5. Clean Up Text Labels */ .woocommerce-account form .form-row label { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; color: #4a5568 !important; /* Elegant charcoal color for text labels */ margin-bottom: 6px !important; font-size: 14px !important; } /* ========================================================================== STRIPE CONNECT - CLEAN PAYMENT SELECTOR OVERRIDE ========================================================================== */ /* 1. Hide the standalone payment radio button selector dot */ #add_payment_method #payment ul.payment_methods li input[type=radio], .woocommerce-account .woocommerce-MyAccount-content input[type="radio"], .woocommerce-checkout input[name="payment_method"] { display: none !important; } /* 2. Slide the text over into the empty space left behind */ #add_payment_method #payment ul.payment_methods li label, .woocommerce-account .woocommerce-MyAccount-content label[for^="payment_method_"], .woocommerce-checkout label[for^="payment_method_"] { padding-left: 0 !important; margin-left: 0 !important; font-weight: 600 !important; color: #333333 !important; } /* ========================================================================== MY ACCOUNT DETAILS - GRID SPACING & NAVIGATION FIX ========================================================================== */ /* 1. Shrink the massive gap below the Display Name input field box */ .woocommerce-account form .form-row-wide { margin-bottom: 8px !important; } /* 2. Tighten up the italicized helper text layout space */ .woocommerce-account form em { display: block !important; margin-top: 4px !important; margin-bottom: 15px !important; font-size: 13px !important; line-height: 1.4 !important; } /* 3. Fix the navigation box so all menu item text aligns perfectly to the left */ .woocommerce-MyAccount-navigation ul li { text-align: left !important; } .woocommerce-MyAccount-navigation ul li a { display: block !important; text-align: left !important; padding-left: 15px !important; /* Balanced left side breathing room */ } /* 2. Tighten, recolor, and align the italicized helper text cleanly */ .woocommerce-account form em { display: block !important; margin-top: 6px !important; margin-bottom: 20px !important; font-size: 13px !important; line-height: 1.4 !important; color: #64748b !important; /* Elegant muted slate gray */ padding-left: 4px !important; /* Syncs text alignment with typed field inputs */ font-style: italic !important; } /* ========================================================================== MY ACCOUNT FORMS - UNIFORM TYPOGRAPHY ENGINE ========================================================================== */ /* 1. Force all form labels, input texts, and select fields to use Inter */ .woocommerce-account form .form-row label, .woocommerce-account form .form-row input.input-text, .woocommerce-account form .form-row select, .woocommerce-account .select2-container .select2-selection, .woocommerce-account .select2-results__option { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* 2. Polish the Field Text Labels */ .woocommerce-account form .form-row label { font-weight: 500 !important; color: #334155 !important; /* Clean charcoal gray for readability */ font-size: 14px !important; margin-bottom: 6px !important; } /* 3. Polish the Dropdown Menu Selectors (Country & State) */ .woocommerce-account .select2-container--default .select2-selection--single { border-color: #cbd5e1 !important; /* Muted modern input border gray */ height: 42px !important; /* Matches the height footprint of input fields */ display: flex !important; align-items: center !important; } /* 4. Fix dropdown placeholder alignment */ .woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered { color: #64748b !important; /* Elegant gray for unselected placeholder text */ font-size: 15px !important; padding-left: 8px !important; } /* ========================================================================== SELECT2 CONTAINER POPUP - COMPACT LIST OVERRIDE ========================================================================== */ /* 1. Shrink font size and fix typography for the dropdown list items */ .select2-container--default .select2-results__option, .select2-dropdown .select2-results__options, .select2-results__option { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 14px !important; /* Reduces text size to match the rest of your form input text */ padding: 6px 12px !important; /* Tightens up the vertical space between country rows */ color: #333333 !important; } /* 2. Style the hover/selected item background to match your clean blue accent */ .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option[aria-selected=true] { background-color: #42A5F5 !important; /* Brand blue highlight background */ color: #ffffff !important; /* Clean white text when highlighted */ } /* 3. Tighten the search box inside the dropdown if it appears */ .select2-dropdown .select2-search--dropdown .select2-search__field { font-family: 'Inter', sans-serif !important; font-size: 14px !important; padding: 6px 10px !important; border-radius: 6px !important; border: 1px solid #cbd5e1 !important; } /* ========================================================================== MY ACCOUNT LOGIN & REGISTER - QUICK REPAIRS ========================================================================== */ /* 1. Shrink and fix the massive "Lost your password?" link text size */ .woocommerce-account .lost_password a { font-family: 'Inter', sans-serif !important; font-size: 14px !important; /* Makes it look like a neat helper link */ font-weight: 500 !important; text-decoration: none !important; /* Removes any ugly default underlines */ } /* 2. Reskin the annoying green radio buttons to match your brand blue */ .woocommerce-account form.register .form-row input[type="radio"] { accent-color: #42A5F5 !important; /* Forces the selector dots to turn blue */ transform: scale(1.1) !important; /* Cleans up the sizing scale slightly */ } /* 3. Give the radio button text a tiny bit of space away from the dots */ .woocommerce-account form.register .form-row input[type="radio"] + label, .woocommerce-account form.register .form-row label.radio { font-family: 'Inter', sans-serif !important; font-size: 14px !important; margin-left: 6px !important; /* Keeps it from looking crammed */ display: inline-block !important; } /* ========================================================================== DOKAN REGISTRATION FORM - UNIFORM 'INTER' TYPOGRAPHY MATRIX ========================================================================== */ /* 1. Force everything inside the vendor registration form fields to Inter */ .woocommerce-account form.register, .woocommerce-account form.register .form-row label, .woocommerce-account form.register p, .woocommerce-account form.register span, .woocommerce-account form.register small { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* 2. Standardize all field input headers (First Name, Last Name, Shop Name, etc) */ .woocommerce-account form.register .form-row label { font-size: 14px !important; /* Crisp, standard user-interface sizing */ font-weight: 500 !important; /* Clean medium thickness profile */ color: #1e293b !important; /* Modern slate/charcoal gray */ margin-bottom: 6px !important; /* Tight, controlled cushion above input boxes */ } /* 3. Tighten the space around the "http://localhost/store/" live URL preview text */ .woocommerce-account form.register #url-text, .woocommerce-account form.register .dokan-shop-url-wrapper, .woocommerce-account form.register small.dokan-wcs-url-help { font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: #64748b !important; /* Soft muted helper gray */ margin-top: 4px !important; /* Pulls text tight under the input field box */ margin-bottom: 12px !important; font-weight: 400 !important; display: block !important; } /* 4. Fix the paragraph block text at the top ("A link to set a new password...") */ .woocommerce-account form.register > p:first-of-type, .woocommerce-account form.register .woocommerce-privacy-policy-text p { font-size: 15px !important; line-height: 1.5 !important; color: #334155 !important; margin-bottom: 20px !important; } /* ========================================================================== FOOTER TAGLINE TYPOGRAPHY POLISH ========================================================================== */ /* Forces the footer mission statement text to an elegant italic weight */ .site-footer p, .site-footer .widget_text p, footer p { font-style: italic !important; font-family: 'Inter', sans-serif !important; opacity: 0.85; /* Softens the bright white slightly for a premium, clean look */ } /* ========================================================================== COMMUNITY GALLERY IMAGE SPACING ENGINE - VISUAL BALANCE OVERRIDE ========================================================================== */ /* 1. Constrains the 5-image row to perfectly mirror the top grid container boundaries */ .curated-grid-container, [class*="gallery"] { display: flex !important; gap: 20px !important; /* Clean layout gap track between images */ width: 100% !important; max-width: 1200px !important; /* Forces it flush with standard theme row limits */ margin-left: auto !important; /* Centers the entire image row track on screen */ margin-right: auto !important; padding: 0 !important; } /* 2. Forces each of the 5 images to fill its column frame cleanly without warping */ .curated-grid-container img, [class*="gallery"] img { border-radius: 16px !important; /* Maintains your smooth rounded card corners */ width: 100% !important; height: auto !important; object-fit: cover !important; } /* -------------------------------------------------------------------------- 5. PRESERVED COMPONENTS: Sort Label, Grids, and Alert Boxes -------------------------------------------------------------------------- */ /* Style the "Sort by" text flag neatly */ .dokan-store-list-filter-wrap .sort-by-label, .store-list-toolbar label { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; color: #333333 !important; font-size: 15px !important; } /* Modernize the Grid/List view layout toggle icons on the far right */ .dokan-store-list-filter-wrap .dokan-layouts i, .store-list-toolbar .dokan-layouts i, .dokan-store-list-filter-wrap .dokan-error i { color: #94a3b8 !important; /* Elegant soft slate gray for unselected states */ font-size: 16px !important; transition: color 0.15s ease !important; } /* Active/Click State Override: Snaps clicked toolbar icons straight to your brand blue */ .dokan-store-list-filter-wrap .dokan-layouts button.active i, .store-list-toolbar .dokan-layouts button.active i, .dokan-store-list-filter-wrap .dokan-layouts button:hover i { color: #42A5F5 !important; } /* Polish the "No vendor found!" critical notification banner box */ .dokan-store-list-filter-wrap .dokan-error, div.dokan-error, .dokan-alert-danger { border-radius: 12px !important; /* Smoothly curves out the sharp alert box corners */ font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; background-color: #fff5f5 !important; /* Soft premium tinted background */ border: 1px solid #fee2e2 !important; border-left: 5px solid #ef4444 !important; /* Striking solid left warning track red edge */ color: #991b1b !important; /* Deep readable dark crimson alert text */ padding: 16px 20px !important; } /* ========================================================================== DOKAN TOOLBAR - COMPLETE ORANGE-RED TO BRAND BLUE TRANSLATION MATRIX ========================================================================== */ /* 1. Reset BOTH default view buttons to use your clean slate gray when idle */ .dokan-store-list-filter-wrap .dokan-layouts button, .store-list-toolbar .dokan-layouts button, .dokan-store-list-filter-wrap .dokan-layouts button i, .store-list-toolbar .dokan-layouts button i { color: #64748b !important; /* Slate gray instead of dark charcoal or red */ opacity: 0.8 !important; transition: all 0.2s ease-in-out !important; } /* 2. HOVER INSTRUCTION: Forces the bright blue flash to activate when a mouse cursor touches them */ .dokan-store-list-filter-wrap .dokan-layouts button:hover, .store-list-toolbar .dokan-layouts button:hover, .dokan-store-list-filter-wrap .dokan-layouts button:hover i, .store-list-toolbar .dokan-layouts button:hover i { color: #42A5F5 !important; /* Your signature brand light blue */ opacity: 1 !important; } /* 3. ACTIVE/ON CLICK INSTRUCTION: Destroys the hardcoded red and locks the button to brand blue */ .dokan-store-list-filter-wrap .dokan-layouts button.active, .store-list-toolbar .dokan-layouts button.active, .dokan-store-list-filter-wrap .dokan-layouts button.active i, .store-list-toolbar .dokan-layouts button.active i, button.dokan-view-grid.active, button.dokan-view-list.active, button.dokan-view-grid.active i, button.dokan-view-list.active i { color: #42A5F5 !important; /* Firmly snaps the clicked state to brand blue */ opacity: 1 !important; } /* ========================================================================== PREMIUM STATIC TOP ANNOUNCEMENT BAR POLISH ========================================================================== */ .ast-above-header, [class*="announcement-bar"] { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; /* Slightly smaller profile looks cleaner */ letter-spacing: 0.3px !important; /* Elegant modern spacing tracking */ padding: 8px 0 !important; /* Clean vertical balance track padding */ } /* ========================================================================== PREMIUM 3-BUTTON HEADER UTILITY CLUSTER ========================================================================== */ /* 1. Force the parent block to display horizontally and coordinate-shift it LEFT */ .custom-header-utility-row, .widget_custom_html .custom-header-utility-row, div[class*="custom-header-utility"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; white-space: nowrap !important; gap: 20px !important; /* Visual spacing gap between the 3 icons */ /* 🌟 THE ULTIMATE SHIFT: Bypasses container boundaries completely */ position: relative !important; left: -60px !important; /* Increase this to -40px, -50px, etc. to slide it further LEFT */ } /* 2. Standardize link behavior and enforce inline rendering */ .header-utility-icon-link { text-decoration: none !important; color: #1a202c !important; /* Solid charcoal black default */ display: inline-flex !important; align-items: center !important; transition: color 0.15s ease-in-out !important; padding: 4px !important; } /* 3. All buttons shift to your identity-affirming theme blue uniformly on hover */ .header-utility-icon-link:hover { color: #42A5F5 !important; } /* 4. Perfectly matched bounding sizing for all vectors */ .utility-basket-svg { width: 22px !important; height: 22px !important; display: block !important; } /* Balance the visual weights of the first two utility icons */ .header-utility-icon-link:nth-child(1) svg { stroke-width: 2.8px !important; /* Thickens the globe lines */ } .header-utility-icon-link:nth-child(2) svg { stroke-width: 3.4px !important; /* Extra thickening to make the open bell shape look equally bold */ } /* Custom Tooltip Styling - Forcing Inter Font & Pure Bold Weight */ .header-utility-icon-link { position: relative !important; } .header-utility-icon-link::after { content: attr(data-custom-tooltip); position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%) scale(0.95); background: #1a202c !important; /* Premium charcoal black background */ color: #ffffff !important; /* 🌟 THE INTER FONT FIX: Keeps typography completely clean and bold */ font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; /* Forces bold appearance */ font-size: 11px !important; letter-spacing: 0.02em !important; padding: 6px 10px !important; border-radius: 5px !important; white-space: nowrap !important; opacity: 0; pointer-events: none; transition: transform 0.1s ease-out, opacity 0.1s ease-out !important; z-index: 99999 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; } /* Fast fade-in toggle on hover */ .header-utility-icon-link:hover::after { opacity: 1 !important; transform: translateX(-50%) scale(1) !important; } /* ========================================================================== TRANS-FIRST REFINED SOCIAL ICON COMPRESSION ========================================================================== */ /* 🌟 UPDATED: Compresses the icon canvases slightly to sit beautifully with 14px links */ .site-footer .wp-block-social-links .wp-social-link a, .site-footer .wp-block-social-links .wp-social-link svg, .wp-block-social-links .wp-social-link a, .wp-block-social-links .wp-social-link svg { width: 20px !important; /* Reduced from 26px to match smaller text metrics */ height: 20px !important; /* Reduced from 26px to match smaller text metrics */ font-size: 20px !important; /* Fits the icon scale cleanly into your column rhythm */ line-height: 1 !important; } /* Maintain clean horizontal grouping gaps */ ul.wp-block-social-links, .site-footer .wp-block-social-links { gap: 16px !important; margin-top: 18px !important; /* Locks them comfortably beneath "How to Buy" */ } /* ========================================================================== TRANS-FIRST CORE DESIGN OVERRIDE: STORE LIST & SELLER DASHBOARD ========================================================================== */ /* 1. FORCE HOMEPAGE CARD EDGES ON THE DOKAN STORE LIST PANEL */ body .dokan-store-list-wrapper .dokan-single-store, body .dokan-stores-wrapper .dokan-single-store, body [class*="dokan-single-store"] { border: 1px solid #e2e8f0 !important; border-radius: 16px !important; /* Forces your exact rounded grid photo corners */ overflow: hidden !important; background-color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important; } /* Elegant boutique hover animation */ body .dokan-store-list-wrapper .dokan-single-store:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06) !important; } /* 2. OVERHAUL DEFAULT GREY BANNER SLOTS & PROFILE AVATARS */ body .dokan-single-store .store-header-image { background-color: #f7fafc !important; border-bottom: 1px solid #edf2f7 !important; } body .dokan-single-store .store-avatar img, body [class*="store-avatar"] img { border: 4px solid #ffffff !important; border-radius: 50% !important; /* Perfect circular framing */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important; } /* 3. CONVERT BOUTIQUE BUTTONS TO MATCH YOUR PREMIUM CHARCOAL LOOK */ body .dokan-single-store .store-footer a.dokan-btn-theme, body [class*="store-footer"] a { background-color: #1a202c !important; /* Clean charcoal color block */ color: #ffffff !important; border: none !important; border-radius: 8px !important; /* Smooth rounded button edges */ font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; padding: 10px 20px !important; transition: background-color 0.2s ease !important; } body .dokan-single-store .store-footer a.dokan-btn-theme:hover { background-color: #F48FB1 !important; /* Switches to your pink branding bar accent color on hover */ color: #ffffff !important; } /* 4. OVERHAUL THE FRONTEND SELLER DASHBOARD TOOLBAR */ body .dokan-dashboard-wrap .dokan-dash-sidebar, body div.dokan-dash-sidebar { background-color: #ffffff !important; border-right: 1px solid #e2e8f0 !important; padding-top: 20px !important; } body .dokan-dashboard-wrap .dokan-dash-sidebar ul.dashboard-menu li a, body div.dokan-dash-sidebar ul.dashboard-menu li a { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #4a5568 !important; padding: 14px 22px !important; transition: all 0.2s ease !important; } /* Smooth active accent tabs utilizing your premium ribbon color */ body .dokan-dashboard-wrap .dokan-dash-sidebar ul.dashboard-menu li.active a, body .dokan-dashboard-wrap .dokan-dash-sidebar ul.dashboard-menu li a:hover, body div.dokan-dash-sidebar ul.dashboard-menu li.active a { background-color: #fff5f7 !important; /* Soft minimal pink backdrop tint */ color: #1a202c !important; border-left: 4px solid #F48FB1 !important; /* Striking pink vertical indicator block */ } /* ========================================================================== KILL-SWITCH: DISABLE MALFUNCTIONING WOOCOMMERCE PRODUCT ZOOM ========================================================================== */ /* 1. Force the zoomed clone image to hide completely */ .zoomImg, .zoomWindow, .zoomContainer, div.zoomContainer { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* 2. Freeze the main product image container so it stops stretching on mouse hover */ .woocommerce-product-gallery__image, .woocommerce-product-gallery__image:hover, .single-product .wp-post-image, .single-product .wp-post-image:hover { cursor: default !important; transform: none !important; } /* 3. Hide the little floating search glass magnifier icon in the corner */ .woocommerce-product-gallery__trigger, a.woocommerce-product-gallery__trigger { display: none !important; } /* ========================================================================== TRANS-FIRST SINGLE PRODUCT UNIFIED GRID & TYPOGRAPHY RESTORE ========================================================================== */ @media (min-width: 922px) { /* 1. Force the layout containers into an inline grid setup */ .single-product #content .ast-container div.product { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-start !important; } /* 2. Lock the image gallery onto the left side */ .single-product div.product .images, .single-product .woocommerce-product-gallery { width: 46% !important; margin: 0 0 40px 0 !important; float: left !important; } /* 3. Pull the text block and pricing directly to the right side */ .single-product div.product .summary.entry-summary { width: 48% !important; margin: 0 0 40px 0 !important; float: right !important; clear: none !important; } /* 4. Force the Description Tabs to slide down and span full-width across the bottom */ .single-product div.product .woocommerce-tabs, .single-product div.product .related.products { width: 100% !important; clear: both !important; margin-top: 30px !important; display: block !important; } } /* ========================================================================== TRANS-FIRST SINGLE PRODUCT UNIFIED GRID & TWO-COLUMN SPLIT ========================================================================== */ @media (min-width: 922px) { /* 1. Force the layout containers into an inline grid setup */ .single-product #content .ast-container div.product { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-start !important; } /* 2. Lock the image gallery onto the left side */ .single-product div.product .images, .single-product .woocommerce-product-gallery { width: 46% !important; margin: 0 0 40px 0 !important; float: left !important; } /* 3. Pull the text block and pricing directly to the right side */ .single-product div.product .summary.entry-summary { width: 48% !important; margin: 0 0 40px 0 !important; float: right !important; clear: none !important; } /* 4. Force the Description Tabs to slide down and span full-width across the bottom */ .single-product div.product .woocommerce-tabs, .single-product div.product .related.products { width: 100% !important; clear: both !important; margin-top: 30px !important; display: block !important; } } /* ========================================================================== INTER SANS-SERIF FONT SYSTEM & REPLICATED BRAND SIZING ========================================================================== */ /* 5. Main Product Title Headers (Balanced at a clean 28px) */ .single-product h1.product_title, .single-product .entry-title, .single-product div.product [class*="title"] { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 28px !important; /* Fixed oversized scaling down to 28px */ font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; text-transform: none !important; transform: none !important; font-stretch: 100% !important; color: #1a202c !important; /* Premium charcoal branding */ display: block !important; margin-top: 4px !important; margin-bottom: 12px !important; } /* 6. HARD COLOR-LOCKED: Voice & Presentation Category Title (Large, Black Inter) */ .single-product a[href*="product_cat"], .single-product .posted_in a, .single-product [class*="posted_in"] a, .single-product .ast-woo-product-category a, body .single-product .summary .posted_in a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; color: #1a202c !important; /* Hard-locked into your rich black charcoal brand color */ font-size: 18px !important; /* Bold, prominent scale size footprint */ font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; text-decoration: none !important; font-stretch: 100% !important; transform: none !important; display: inline-block !important; margin-bottom: 6px !important; transition: color 0.2s ease-in-out !important; } /* 7. Secondary Lower Navigation Breadcrumbs (Small, Clean Slate Color) */ .single-product .woocommerce-breadcrumb, .single-product .woocommerce-breadcrumb a { font-family: 'Inter', -apple-system, sans-serif !important; color: #718096 !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: normal !important; text-decoration: none !important; } /* 8. Symmetrical Identity Blue hover animation triggers when hovering links */ .single-product a[href*="product_cat"]:hover, .single-product .posted_in a:hover, .single-product .woocommerce-breadcrumb a:hover { color: #42A5F5 !important; /* Turns your sharp high-contrast blue instantly on hover */ } /* ========================================================================== TRANS-FIRST MAXIMUM FULL-WIDTH CONTENT OVERRIDE ========================================================================== */ @media (min-width: 922px) { /* 1. Break out of Astra's default narrow site container on the product page */ body.single-product .site-content .ast-container { max-width: 1400px !important; /* Force layout canvas wide */ width: 100% !important; margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; } /* 2. Overwrite the inner main structural alignment box */ body.single-product #primary, body.single-product .content-area { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* 3. Force the product elements into a balanced, spacious row */ body.single-product div.product { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-start !important; } /* 4. Expand the image module to fill the left panel space */ body.single-product div.product .images, body.single-product .woocommerce-product-gallery { width: 48% !important; margin: 0 0 40px 0 !important; float: left !important; } /* 5. Spread your text detail lines comfortably on the right side */ body.single-product div.product .summary.entry-summary { width: 48% !important; margin: 0 0 40px 0 !important; float: right !important; clear: none !important; } } /* -------------------------------------------------------------------------- 1. GLOBAL BUTTON BASE STATE: Signature Trans-First Identity Blue Pills -------------------------------------------------------------------------- */ .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button, .site-main ul.products li.product .button, .woocommerce div.product .button, .single-product .button, .woocommerce div.product form.cart .button, .woocommerce-cart .wc-proceed-to-checkout a.button, .woocommerce-checkout #payment #place_order, .woocommerce-page .button, .woocommerce-account .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, a.button, button.button, input[type="submit"].button, input[type="button"], button, .wpforms-form button[type="submit"].wpforms-submit, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit, .wp-block-button__link, .woocommerce-MyAccount-content a.dokan-btn, .woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"], .woocommerce-MyAccount-content a.btn-theme, a.dokan-btn.dokan-btn-theme { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background-color: #42A5F5 !important; background: #42A5F5 !important; color: #ffffff !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; padding: 12px 28px !important; border: none !important; border-radius: 50px !important; box-shadow: 0 4px 12px rgba(66, 165, 245, 0.15) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; box-sizing: border-box !important; line-height: 1 !important; height: auto !important; text-decoration: none !important; } /* -------------------------------------------------------------------------- 2. CONTAINMENT CALIBRATIONS & ELEMENT HEIGHT SYNC -------------------------------------------------------------------------- */ /* WPForms placement layout spacer */ .wpforms-form button[type="submit"].wpforms-submit, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit { height: 44px !important; margin-top: 15px !important; } /* Dokan Account Links vertical size synchronization */ .woocommerce-MyAccount-content a.dokan-btn, .woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"], a.dokan-btn.dokan-btn-theme { height: 44px !important; } /* Custom Radio Option layout spacing alignment */ input[type="radio"] + label, .woocommerce input[type="radio"] + label, .woocommerce-page input[type="radio"] + label, .wpforms-form input[type="radio"] + label { margin-right: 8px !important; margin-bottom: 8px !important; } /* Hide structural native browser check circles globally across templates */ input[type="radio"], .woocommerce input[type="radio"], .woocommerce-page input[type="radio"], .wpforms-form input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; } /* -------------------------------------------------------------------------- 3. RADIO BUTTON OPTIONS BASE STATE: Solid Premium Slate Charcoal/Black -------------------------------------------------------------------------- */ input[type="radio"] + label, .woocommerce input[type="radio"] + label, .woocommerce-page input[type="radio"] + label, .wpforms-form input[type="radio"] + label { background-color: #1e293b !important; /* Options rest quietly in charcoal black */ background: #1e293b !important; color: #ffffff !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; padding: 12px 28px !important; border: none !important; border-radius: 50px !important; display: inline-block !important; text-align: center !important; box-sizing: border-box !important; box-shadow: 0 4px 12px rgba(30, 41, 59, 0.08) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; width: auto !important; height: auto !important; } /* -------------------------------------------------------------------------- 4. INTERACTIVE HOVER INTERCHANGES (THE COLOR FLIP) -------------------------------------------------------------------------- */ /* Primary Buttons on Hover: Turn Slate Charcoal/Black */ .woocommerce ul.products li.product .button:hover, .woocommerce-page ul.products li.product .button:hover, .site-main ul.products li.product .button:hover, .woocommerce div.product .button:hover, .single-product .button:hover, .woocommerce div.product form.cart .button:hover, .woocommerce-cart .wc-proceed-to-checkout a.button:hover, .woocommerce-checkout #payment #place_order:hover, .woocommerce-page .button:hover, .woocommerce-account .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, a.button:hover, button.button:hover, input[type="submit"].button:hover, input[type="button"]:hover, button:hover, .wpforms-form button[type="submit"].wpforms-submit:hover, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit:hover, .wp-block-button__link:hover, .woocommerce-MyAccount-content a.dokan-btn:hover, .woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"]:hover, .woocommerce-MyAccount-content a.btn-theme:hover, a.dokan-btn.dokan-btn-theme:hover { background-color: #1e293b !important; /* Identity Blue turns charcoal black on hover */ background: #1e293b !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(30, 41, 59, 0.2) !important; /* Soft structure depth shadow */ transform: translateY(-2px) !important; /* Smooth micro-kinetic 2px hover lift */ } /* Radio Buttons on Hover: Flash into Identity Blue */ input[type="radio"] + label:hover, .woocommerce input[type="radio"] + label:hover, .woocommerce-page input[type="radio"] + label:hover, .wpforms-form input[type="radio"] + label:hover { background-color: #42A5F5 !important; /* Previews option by flashing signature blue */ background: #42A5F5 !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(66, 165, 245, 0.25) !important; transform: translateY(-2px) !important; } /* -------------------------------------------------------------------------- 5. LOCKED ACTIVE STATES: Radio Persistent Selections -------------------------------------------------------------------------- */ /* Selected Radios lock permanently into Identity Blue */ input[type="radio"]:checked + label, .woocommerce input[type="radio"]:checked + label, .woocommerce-page input[type="radio"]:checked + label, .wpforms-form input[type="radio"]:checked + label { background-color: #42A5F5 !important; /* Chosen status stays identity blue */ background: #42A5F5 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(66, 165, 245, 0.3) !important; transform: translateY(0) !important; } /* Physical tactile click compression scaling */ .woocommerce ul.products li.product .button:active, .woocommerce div.product .button:active, .wpforms-form button[type="submit"].wpforms-submit:active, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit:active, .wp-block-button__link:active, .woocommerce-checkout #payment #place_order:active, .woocommerce-MyAccount-content a.dokan-btn:active, a.dokan-btn.dokan-btn-theme:active, button:active, input[type="radio"] + label:active { transform: translateY(0) scale(0.98) !important; /* Snaps flat under cursor click force */ } /* ========================================================================== PRODUCT LOOP HOVER FIX - FORCES SOLID CHARCOAL BACKGROUND ========================================================================== */ .woocommerce ul.products li.product .button:hover, .woocommerce-page ul.products li.product .button:hover, .woocommerce ul.products li.product a.button:hover, .woocommerce-page ul.products li.product a.button:hover, .site-main ul.products li.product .button:hover, .site-main ul.products li.product a.button:hover { background-color: #1e293b !important; /* Forces solid deep charcoal background */ background: #1e293b !important; /* Overrides page builder transparent layers */ color: #ffffff !important; /* Keeps the text crisp white */ box-shadow: 0 6px 16px rgba(30, 41, 59, 0.2) !important; transform: translateY(-2px) !important; } /* -------------------------------------------------------------------------- 2. SPECIFIC CONTAINER HEIGHT AND SPACING FIXES -------------------------------------------------------------------------- */ .wpforms-form button[type="submit"].wpforms-submit, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit { height: 44px !important; margin-top: 15px !important; } .woocommerce-MyAccount-content a.dokan-btn, .woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"], a.dokan-btn.dokan-btn-theme { height: 44px !important; } input[type="radio"] + label, .woocommerce input[type="radio"] + label, .woocommerce-page input[type="radio"] + label, .wpforms-form input[type="radio"] + label { margin-right: 8px !important; margin-bottom: 8px !important; display: inline-flex !important; align-items: center !important; } input[type="radio"], .woocommerce input[type="radio"], .woocommerce-page input[type="radio"], .wpforms-form input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; } /* ========================================================================== TRANS-FIRST ULTIMATE MASTER DESIGN SYSTEM (PRODUCTION CHASSIS) ========================================================================== */ /* -------------------------------------------------------------------------- 1. GLOBAL BUTTON BASE STATE: Signature Trans-First Identity Blue Pills -------------------------------------------------------------------------- */ /* WooCommerce Loop grids & single product pages */ .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button, .site-main ul.products li.product .button, .woocommerce div.product .button, .single-product .button, .woocommerce div.product form.cart .button, /* WooCommerce cart & checkout forms */ .woocommerce-cart .wc-proceed-to-checkout a.button, .woocommerce-checkout #payment #place_order, .woocommerce-page .button, .woocommerce-account .button, /* Pure generic button elements everywhere else */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, a.button, button.button, input[type="submit"].button, input[type="button"], button, /* WPForms core submit button arrays */ .wpforms-form button[type="submit"].wpforms-submit, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit, /* WordPress block editor buttons */ .wp-block-button__link, /* Dokan theme links & store list layouts */ .woocommerce-MyAccount-content a.dokan-btn, .woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"], .woocommerce-MyAccount-content a.btn-theme, a.dokan-btn.dokan-btn-theme { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background-color: #42A5F5 !important; /* Resting Signature Identity Blue */ background: #42A5F5 !important; color: #ffffff !important; /* Crisp high-contrast white typography */ font-family: 'Inter', -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; /* Eliminates bulky block uppercase text */ padding: 12px 28px !important; /* Elegant modern proportion mapping */ border: none !important; border-radius: 50px !important; /* Full premium capsule layout curve */ box-shadow: 0 4px 12px rgba(66, 165, 245, 0.15) !important; /* Soft blue tinted shadow */ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; box-sizing: border-box !important; line-height: 1 !important; height: auto !important; text-decoration: none !important; } /* -------------------------------------------------------------------------- 2. SPECIFIC CONTAINER HEIGHT AND SPACING FIXES -------------------------------------------------------------------------- */ /* WPForms placement layout spacer */ .wpforms-form button[type="submit"].wpforms-submit, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit { height: 44px !important; margin-top: 15px !important; } /* Dokan Account Links vertical size synchronization */ .woocommerce-MyAccount-content a.dokan-btn, .woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"], a.dokan-btn.dokan-btn-theme { height: 44px !important; } /* Custom Radio Option layout spacing alignment */ input[type="radio"] + label, .woocommerce input[type="radio"] + label, .woocommerce-page input[type="radio"] + label, .wpforms-form input[type="radio"] + label { margin-right: 8px !important; margin-bottom: 8px !important; } /* Hide structural native browser check circles globally across templates */ input[type="radio"], .woocommerce input[type="radio"], .woocommerce-page input[type="radio"], .wpforms-form input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; } /* -------------------------------------------------------------------------- 3. RADIO BUTTON OPTIONS BASE STATE: Solid Premium Slate Charcoal/Black -------------------------------------------------------------------------- */ input[type="radio"] + label, .woocommerce input[type="radio"] + label, .woocommerce-page input[type="radio"] + label, .wpforms-form input[type="radio"] + label { background-color: #1e293b !important; background: #1e293b !important; color: #ffffff !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; padding: 12px 28px !important; border: 2px solid transparent !important; border-radius: 50px !important; display: inline-block !important; text-align: center !important; box-sizing: border-box !important; box-shadow: 0 4px 12px rgba(30, 41, 59, 0.08) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; width: auto !important; height: auto !important; } /* -------------------------------------------------------------------------- 4. INTERACTIVE HOVER INTERCHANGES (THE COLOR FLIP) -------------------------------------------------------------------------- */ /* Primary Buttons on Hover: Turn Slate Charcoal/Black */ .woocommerce ul.products li.product .button:hover, .woocommerce-page ul.products li.product .button:hover, .site-main ul.products li.product .button:hover, .woocommerce div.product .button:hover, .single-product .button:hover, .woocommerce div.product form.cart .button:hover, .woocommerce-cart .wc-proceed-to-checkout a.button:hover, .woocommerce-checkout #payment #place_order:hover, .woocommerce-page .button:hover, .woocommerce-account .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, a.button:hover, button.button:hover, input[type="submit"].button:hover, .wpforms-form button[type="submit"].wpforms-submit:hover, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit:hover, .wp-block-button__link:hover, .woocommerce-MyAccount-content a.dokan-btn:hover, .woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"]:hover, .woocommerce-MyAccount-content a.btn-theme:hover, a.dokan-btn.dokan-btn-theme:hover { background-color: #1e293b !important; /* Identity Blue turns charcoal black on hover */ background: #1e293b !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(30, 41, 59, 0.2) !important; /* Soft structure depth shadow */ transform: translateY(-2px) !important; /* Smooth micro-kinetic 2px hover lift */ } /* Radio Buttons on Hover: Flash into Identity Blue */ input[type="radio"] + label:hover, .woocommerce input[type="radio"] + label:hover, .woocommerce-page input[type="radio"] + label:hover, .wpforms-form input[type="radio"] + label:hover { background-color: #42A5F5 !important; /* Previews option by flashing signature blue */ background: #42A5F5 !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(66, 165, 245, 0.25) !important; transform: translateY(-2px) !important; } /* -------------------------------------------------------------------------- 5. LOCKED ACTIVE STATES: Radio Persistent Selections -------------------------------------------------------------------------- */ /* Selected Radios lock permanently into Identity Blue */ input[type="radio"]:checked + label, .woocommerce input[type="radio"]:checked + label, .woocommerce-page input[type="radio"]:checked + label, .wpforms-form input[type="radio"]:checked + label { background-color: #42A5F5 !important; /* Chosen status stays identity blue */ background: #42A5F5 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(66, 165, 245, 0.3) !important; transform: translateY(0) !important; } /* Physical tactile click compression scaling */ .woocommerce ul.products li.product .button:active, .woocommerce div.product .button:active, .wpforms-form button[type="submit"].wpforms-submit:active, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit:active, .wp-block-button__link:active, .woocommerce-checkout #payment #place_order:active, .woocommerce-MyAccount-content a.dokan-btn:active, a.dokan-btn.dokan-btn-theme:active, input[type="radio"] + label:active { transform: translateY(0) scale(0.98) !important; /* Snaps flat under cursor click force */ } /* ========================================================================== TRANS-FIRST DOKAN FILTER BUTTON MODULE (TOTAL HARD MASK REPAIR) ========================================================================== */ .dokan-store-list-filter-wrap .dokan-filter-btn, button.dokan-filter-btn, .dokan-store-list-filter-wrap .filter-btn, .dokan-store-list-filter-button, .dokan-btn-theme.toggle-sidebar, #dokan-store-listing-filter-form-wrap button.dokan-store-list-filter-button { background-color: #42A5F5 !important; /* Signature Trans-First Identity Blue */ background: #42A5F5 !important; color: #ffffff !important; border-radius: 50px !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; padding: 12px 28px 12px 24px !important; /* Visual trick to balance the left icon spacing */ letter-spacing: -0.01em !important; text-transform: none !important; box-shadow: 0 4px 12px rgba(66, 165, 245, 0.15) !important; border: none !important; height: 44px !important; width: auto !important; position: relative !important; margin-right: 8px !important; margin-bottom: 8px !important; /* === HORIZONTAL LAYOUT ENGINE MATRIX === */ display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Injects your clean FontAwesome custom sliders icon on the left */ .dokan-store-list-filter-wrap .dokan-filter-btn::before, button.dokan-filter-btn::before, .dokan-store-list-filter-button::before, .dokan-btn-theme.toggle-sidebar::before { content: "\f1de" !important; font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 400 !important; display: inline-block !important; visibility: visible !important; font-size: 14px !important; color: #ffffff !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; height: auto !important; width: auto !important; transition: color 0.2s ease !important; } /* Hover Physics: Blue layout turns to deep charcoal black */ .dokan-store-list-filter-wrap .dokan-filter-btn:hover, button.dokan-filter-btn:hover, .dokan-store-list-filter-button:hover, .dokan-btn-theme.toggle-sidebar:hover, #dokan-store-listing-filter-form-wrap button.dokan-store-list-filter-button:hover { background-color: #1e293b !important; background: #1e293b !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(30, 41, 59, 0.2) !important; transform: translateY(-2px) !important; } .dokan-store-list-filter-wrap .dokan-filter-btn:hover::before, button.dokan-filter-btn:hover::before, .dokan-store-list-filter-button:hover::before, .dokan-btn-theme.toggle-sidebar:hover::before { color: #ffffff !important; } /* THE ABSOLUTE MASK NUKE: Turns the theme's core icon tag completely transparent */ .dokan-store-list-filter-wrap .dokan-filter-btn i, button.dokan-filter-btn i, .dokan-store-list-filter-button i, .dokan-btn-theme.toggle-sidebar i, .dokan-store-list-filter-wrap .dokan-filter-btn .dokan-icon, .dokan-store-list-filter-button .dokan-icon, .dokan-btn-theme.toggle-sidebar .dokan-icon { color: transparent !important; /* Vaporizes font paint color properties completely */ font-size: 0px !important; /* Shrinks its tracking box footprint to absolute zero */ width: 0px !important; height: 0px !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; display: none !important; visibility: hidden !important; } /* ========================================================================== PRODUCT LOOP HOVER FIX - FORCES SOLID CHARCOAL BACKGROUND ========================================================================== */ .woocommerce ul.products li.product .button:hover, .woocommerce-page ul.products li.product .button:hover, .woocommerce ul.products li.product a.button:hover, .woocommerce-page ul.products li.product a.button:hover, .site-main ul.products li.product .button:hover, .site-main ul.products li.product a.button:hover { background-color: #1e293b !important; /* Forces solid deep charcoal background */ background: #1e293b !important; /* Overrides page builder transparent layers */ color: #ffffff !important; /* Keeps the text crisp white */ box-shadow: 0 6px 16px rgba(30, 41, 59, 0.2) !important; transform: translateY(-2px) !important; } /* -------------------------------------------------------------------------- 4. INTERACTIVE HOVER INTERCHANGES (THE COLOR FLIP) -------------------------------------------------------------------------- */ /* Primary Buttons on Hover: Turn Slate Charcoal/Black */ .woocommerce ul.products li.product .button:hover, .woocommerce-page ul.products li.product .button:hover, .site-main ul.products li.product .button:hover, .woocommerce div.product .button:hover, .single-product .button:hover, .woocommerce div.product form.cart .button:hover, .woocommerce-cart .wc-proceed-to-checkout a.button:hover, .woocommerce-checkout #payment #place_order:hover, .woocommerce-page .button:hover, .woocommerce-account .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, a.button:hover, button.button:hover, input[type="submit"].button:hover, input[type="button"]:hover, button:hover, .wpforms-form button[type="submit"].wpforms-submit:hover, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit:hover, .wp-block-button__link:hover, .woocommerce-MyAccount-content a.dokan-btn:hover, .woocommerce-account .woocommerce-MyAccount-content a[href*="dashboard"]:hover, .woocommerce-MyAccount-content a.btn-theme:hover, a.dokan-btn.dokan-btn-theme:hover { background-color: #1e293b !important; /* Identity Blue turns charcoal black on hover */ background: #1e293b !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(30, 41, 59, 0.2) !important; /* Soft structure depth shadow */ transform: translateY(-2px) !important; /* Smooth micro-kinetic 2px hover lift */ } /* Radio Buttons on Hover: Flash into Identity Blue */ input[type="radio"] + label:hover, .woocommerce input[type="radio"] + label:hover, .woocommerce-page input[type="radio"] + label:hover, .wpforms-form input[type="radio"] + label:hover { background-color: #42A5F5 !important; /* Previews option by flashing signature blue */ background: #42A5F5 !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(66, 165, 245, 0.25) !important; transform: translateY(-2px) !important; } /* -------------------------------------------------------------------------- 5. LOCKED ACTIVE STATES: Radio Persistent Selections -------------------------------------------------------------------------- */ /* Selected Radios lock permanently into Identity Blue */ input[type="radio"]:checked + label, .woocommerce input[type="radio"]:checked + label, .woocommerce-page input[type="radio"]:checked + label, .wpforms-form input[type="radio"]:checked + label { background-color: #42A5F5 !important; /* Chosen status stays identity blue */ background: #42A5F5 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(66, 165, 245, 0.3) !important; transform: translateY(0) !important; } /* Physical tactile click compression scaling */ .woocommerce ul.products li.product .button:active, .woocommerce div.product .button:active, .wpforms-form button[type="submit"].wpforms-submit:active, div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit:active, .wp-block-button__link:active, .woocommerce-checkout #payment #place_order:active, .woocommerce-MyAccount-content a.dokan-btn:active, a.dokan-btn.dokan-btn-theme:active, button:active, input[type="radio"] + label:active { transform: translateY(0) scale(0.98) !important; /* Snaps flat under cursor click force */ } /* ========================================================================== TRANS-FIRST DOKAN FILTER BUTTON ONLY MODULE (THE ULTIMATE SHIELD NUKE) ========================================================================== */ /* 1. Target strictly the main toolbar filter layout containers */ .dokan-store-list-filter-wrap .dokan-filter-btn, button.dokan-filter-btn, .dokan-store-list-filter-wrap .filter-btn, .dokan-store-list-filter-button, .dokan-btn-theme.toggle-sidebar, #dokan-store-listing-filter-form-wrap button.dokan-store-list-filter-button { background-color: #42A5F5 !important; /* Signature Trans-First Identity Blue */ background: #42A5F5 !important; color: #ffffff !important; /* Crisp high-contrast white text */ border-radius: 50px !important; /* Full capsule shape alignment */ font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; padding: 12px 28px 12px 24px !important; /* Asymmetrical padding trick to center left icon */ letter-spacing: -0.01em !important; text-transform: none !important; box-shadow: 0 4px 12px rgba(66, 165, 245, 0.15) !important; border: none !important; height: 44px !important; width: auto !important; position: relative !important; margin-right: 8px !important; margin-bottom: 8px !important; /* === HORIZONTAL LAYOUT ENGINE MATRIX === */ display: inline-flex !important; flex-direction: row !important; /* Forces strict left-to-right alignment tracking */ align-items: center !important; /* Dead-centers text and sliders vertically */ justify-content: center !important; gap: 8px !important; /* Balanced breathing room between icon and font */ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* 3. INTERACTIVE ACTIONS: Blue element flips to premium charcoal black on hover */ .dokan-store-list-filter-wrap .dokan-filter-btn:hover, button.dokan-filter-btn:hover, .dokan-store-list-filter-button:hover, .dokan-btn-theme.toggle-sidebar:hover, #dokan-store-listing-filter-form-wrap button.dokan-store-list-filter-button:hover { background-color: #1e293b !important; /* Turns premium charcoal black on hover */ background: #1e293b !important; color: #ffffff !important; /* Typography remains white */ box-shadow: 0 6px 16px rgba(30, 41, 59, 0.2) !important; transform: translateY(-2px) !important; } .dokan-store-list-filter-wrap .dokan-filter-btn:hover::before, button.dokan-filter-btn:hover::before, .dokan-store-list-filter-button:hover::before, .dokan-btn-theme.toggle-sidebar:hover::before { color: #ffffff !important; } /* 4. THE ABSOLUTE CHILD DESTROYER: Forcefully targets and removes native HTML icons or paths */ .dokan-store-list-filter-wrap .dokan-filter-btn i, button.dokan-filter-btn i, .dokan-store-list-filter-button i, .dokan-btn-theme.toggle-sidebar i, .dokan-store-list-filter-wrap .dokan-filter-btn svg, button.dokan-filter-btn svg, .dokan-store-list-filter-button svg, .dokan-btn-theme.toggle-sidebar svg, .dokan-store-list-filter-wrap .dokan-filter-btn img, button.dokan-filter-btn img, .dokan-store-list-filter-button img, .dokan-btn-theme.toggle-sidebar img, .dokan-store-list-filter-wrap .dokan-filter-btn .dokan-icon, .dokan-store-list-filter-button .dokan-icon, /* Target theme-default elements specifically containing background mask coordinates */ .dokan-store-list-filter-wrap .dokan-filter-btn span::before, .dokan-store-list-filter-wrap .dokan-filter-btn span::after, button.dokan-filter-btn span::before, button.dokan-filter-btn span::after { display: none !important; /* Completely blocks theme rendering chains */ visibility: hidden !important; font-size: 0px !important; width: 0px !important; /* Forces static vector lines to drop to zero footprint width */ height: 0px !important; opacity: 0 !important; content: none !important; background: none !important; background-image: none !important; } /* Clear underlying native background image masks on the button wrappers */ .dokan-store-list-filter-wrap .dokan-filter-btn, button.dokan-filter-btn, .dokan-store-list-filter-button, .dokan-btn-theme.toggle-sidebar { background-image: none !important; mask-image: none !important; -webkit-mask-image: none !important; } /* ========================================================================== FORCE DELETION OF INTRODUCED SLIDER ICON FONTS ========================================================================== */ /* This strips the content variable assignment directly out of your custom override */ #dokan-store-listing-filter-form-wrap button.dokan-store-list-filter-button::before, .dokan-store-list-filter-wrap .right .item button.dokan-store-list-filter-button::before, button.dokan-store-list-filter-button::before { content: "" !important; display: none !important; width: 0 !important; margin: 0 !important; padding: 0 !important; } /* Re-balance the text position so it isn't pushed to the right side */ button.dokan-store-list-filter-button { padding-left: 20px !important; padding-right: 20px !important; } /* ========================================================================== TRANS-FIRST DOKAN FILTER CANCEL BUTTON OVERRIDE (ID SPECIFIC) ========================================================================== */ /* 1. Nuke the unwanted shadow outline completely */ #dokan-store-listing-filter-form-wrap button#cancel-filter-btn, button#cancel-filter-btn.dokan-btn.dokan-btn-theme { box-shadow: none !important; outline: none !important; background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; /* Keeps default button text black */ border: 2px solid #ececec !important; /* Replaces shadow with a clean flat light line */ } /* 2. Force the solid pink background on hover only */ #dokan-store-listing-filter-form-wrap button#cancel-filter-btn:hover, button#cancel-filter-btn.dokan-btn.dokan-btn-theme:hover { background-color: #F48FB1 !important; background: #F48FB1 !important; color: #000000 !important; /* Shifts text to white for clear readability on pink */ border-color: #F48FB1 !important; box-shadow: none !important; } /* ========================================================================== DOKAN SELLER FOOTER ARROW HOVER TO CHARCOAL ========================================================================== */ /* Target the specific right-arrow element wrapper on hover */ #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer a:hover span.dashicons-arrow-right-alt2, .store-footer a:hover span.dokan-btn-theme.dokan-btn-round, #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer a span.dashicons-arrow-right-alt2:hover { background-color: #1e293b !important; /* Turns to your signature solid charcoal */ background: #1e293b !important; border-color: #1e293b !important; color: #ffffff !important; /* Keeps the white arrow icon clean and visible */ } /* ========================================================================== TRANS-FIRST DOKAN FILTER BUTTON CLEAN REBUILD (THE 3-GLYPH STACK) ========================================================================= */ /* 1. Base button container layout specifications */ #dokan-store-listing-filter-form-wrap button.dokan-store-list-filter-button, .dokan-store-list-filter-wrap button.dokan-store-list-filter-button, button.dokan-store-list-filter-button { font-family: 'Inter', sans-serif !important; background-color: #55b0fb !important; /* Your signature light blue color */ background-image: none !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-indent: 0 !important; box-shadow: none !important; border: none !important; border-radius: 50px !important; transition: background-color 0.2s ease !important; /* Perfect balanced padding framing properties */ padding-left: 18px !important; padding-right: 22px !important; } /* 2. THE SOLID CHARCOAL HOVER: Locks down stable hover background tracking */ #dokan-store-listing-filter-form-wrap button.dokan-store-list-filter-button:hover, .dokan-store-list-filter-wrap button.dokan-store-list-filter-button:hover, button.dokan-store-list-filter-button:hover { background-color: #1e293b !important; /* Your signature charcoal color */ background-image: none !important; box-shadow: none !important; filter: none !important; color: #ffffff !important; } /* 3. Clone and duplicate the native slider glyph to create a perfect 3-line stack */ #dokan-store-listing-filter-form-wrap button.dokan-store-list-filter-button::before, .dokan-store-list-filter-wrap button.dokan-store-list-filter-button::before, button.dokan-store-list-filter-button::before { /* 1. KEEP THE ACTIVE GLYPH STABLE */ content: "\f1de" !important; font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 400 !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-size: 14px !important; color: #ffffff !important; margin-right: 10px !important; /* Spaces the icon array cleanly from your text */ margin-left: 0 !important; padding: 0 !important; line-height: 1 !important; /* 2. REPLICATE SHADOW LAYERS ABOVE AND BELOW TO FORM THE 3 LINES */ position: relative !important; box-shadow: 0 -6px 0 0 #ffffff, /* Clones the exact slider line right above the middle one */ 0 6px 0 0 #ffffff !important; /* Clones the exact slider line right below the middle one */ transform: translateY(-0.5px) !important; /* Perfect vertical alignment balance layout */ } /* 4. Complete Nuke: Erase Dokan's loose font icon wrapper elements */ button.dokan-store-list-filter-button .dokan-icons, button.dokan-store-list-filter-button i, .dokan-store-list-filter-wrap .dokan-icons, .dokan-icon-div { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== TRANS-FIRST MOBILE MENU TRIGGER (GLITCH-PROOF DUAL LAYER LOCK) ========================================================================== */ /* 1. AT REST STATE: Lock both layers to light blue with white lines */ .ast-mobile-menu-trigger, [data-section="section-header-mobile-trigger"] button, [data-section="section-header-mobile-trigger"] .ast-button-wrap, [data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-container { background-color: #55b0fb !important; /* Your signature light blue */ border-radius: 50px !important; /* Hard-locks the pill shape on both layers */ color: #ffffff !important; /* Pure white menu lines */ box-shadow: none !important; /* Strips out messy dark ring overlays */ border: none !important; transition: background-color 0.2s ease !important; } /* 2. ON HOVER STATE: Force both stacked layers to turn charcoal at the same time */ .ast-mobile-menu-trigger:hover, [data-section="section-header-mobile-trigger"] button:hover, [data-section="section-header-mobile-trigger"] .ast-button-wrap:hover, [data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-container:hover, [data-section="section-header-mobile-trigger"]:hover button, [data-section="section-header-mobile-trigger"]:hover .ast-button-wrap { background-color: #1e293b !important; /* Your signature solid charcoal color */ border-radius: 50px !important; /* Keeps it perfectly rounded on hover */ color: #ffffff !important; /* Lines remain pure white on hover */ } /* 3. CORE VECTOR LOCK: Prevents the lines from shifting or changing color */ .ast-mobile-menu-trigger .ast-mobile-svg, .ast-mobile-menu-trigger:hover .ast-mobile-svg, [data-section="section-header-mobile-trigger"] svg { fill: currentColor !important; stroke: currentColor !important; } /* ========================================================================== GLOBAL FOOTER TYPOGRAPHY & LINK STYLES (SAFE RESIZING) ========================================================================== */ /* Enforces white text and uniform Inter sans-serif on all footer menu links */ .site-footer .footer-widget-area a, .site-footer .footer-widget-area ul li a, .custom-saas-footer-col a, .custom-saas-footer-col ul li a { color: #ffffff !important; text-decoration: none !important; font-family: 'Inter', -apple-system, sans-serif !important; font-weight: 500 !important; font-size: 14px !important; transition: color 0.25s ease-in-out !important; } /* Accent pink hover dynamics across all links uniformly */ .site-footer .footer-widget-area a:hover, .site-footer .footer-widget-area ul li a:hover, .custom-saas-footer-col a:hover, .custom-saas-footer-col ul li a:hover { color: #F48FB1 !important; } /* Forces clean INTER headings right back to their original 18px */ .custom-saas-footer-col h3, .site-footer .footer-widget-area .widget-title { font-family: 'Inter', sans-serif !important; font-style: normal !important; font-weight: 700 !important; font-size: 18px !important; color: #ffffff !important; letter-spacing: -0.01em !important; text-transform: none !important; margin-bottom: 16px !important; margin-top: 0 !important; } /* Global footer description block text settings */ .site-footer .footer-widget-area p, .site-footer .footer-widget-area .textwidget p, .custom-saas-footer-col p { font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.6 !important; color: #e5e7eb !important; letter-spacing: -0.01em !important; } /* Tightened vertical list spacing for a sleek directory layout */ .custom-saas-footer-col li { margin-bottom: 6px !important; line-height: 1.3 !important; padding: 0 !important; } /* ========================================================================== STRATEGIC DESKTOP-ONLY LAYOUT SWITCHES (PROTECTS MOBILE AND TABLET) ========================================================================== */ @media (min-width: 922px) { /* --- FROM BLOCK 1 & 2: FOOTER GRID SNAP & COLUMN GAP BALANCE --- */ /* Ensure the container drops any hidden internal padding bounds on desktop */ .custom-saas-footer-col, .custom-saas-footer-col ul { margin-left: 0 !important; padding-left: 0 !important; list-style: none !important; list-style-type: none !important; } /* Micro-nudge the bold title LEFT to fix the font alignment illusion */ .custom-saas-footer-col h3 { margin-left: -2px !important; padding-left: 0 !important; text-align: left !important; } /* Drop all indents on the text items so they sit naturally flat */ .custom-saas-footer-col li { padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; text-align: left !important; } /* Keep the links block-aligned for clean tracking */ .custom-saas-footer-col li a { display: inline-block !important; text-align: left !important; } /* Fine-tune the middle creator column position to lock onto the exact row center */ .footer-widgets .widget:nth-child(3), footer .widget:nth-child(3), .footer-widgets div:nth-child(3), [class*="footer-"] div:nth-child(3) { padding-left: 18px !important; margin-right: -18px !important; } /* --- FROM BLOCK 3: TYPOGRAPHY BOUNDS OVERRIDES --- */ /* Strictly isolates the unique Fraunces Serif layout ONLY to Column 1 on Desktop */ .site-footer .footer-widget-area .ast-builder-grid-row > div:first-child h3, .site-footer .footer-widget-area .site-footer-section:first-child h3, [class*="footer-widget-2"] h3 { font-family: 'Fraunces', Georgia, serif !important; font-style: normal !important; font-weight: 900 !important; font-size: 24px !important; letter-spacing: -0.02em !important; } /* Compresses list margins and eliminates gaps on desktop */ .custom-saas-footer-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } /* Adds the specific margin spacing beneath description paragraphs on desktop */ .site-footer .footer-widget-area p, .site-footer .footer-widget-area .textwidget p, .custom-saas-footer-col p { margin-top: 12px !important; } } /* ========================================================================== THE RESOLUTION: RESPON-STACKING WRAPPER FOR SMALLER DEVICES ========================================================================== */ @media (max-width: 921px) { /* 1. Targets Astra's native layout containers and forces them vertical */ .site-footer .footer-widget-area [class*="ast-footer-grid"], .site-footer .footer-widget-area .ast-builder-grid-row, .site-footer .ast-footer-row-inline { display: flex !important; flex-direction: column !important; /* Forces 1-column stack */ flex-wrap: wrap !important; gap: 36px !important; /* Adds clear spacing between stacked lists */ height: auto !important; min-height: 0 !important; } /* 2. Resets column block item wrappers to occupy 100% full container widths */ .site-footer .footer-widget-area .ast-builder-grid-row-wrap, .site-footer [class*="ast-footer-layout-element"], .custom-saas-footer-col { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; clear: both !important; float: none !important; margin: 0 0 12px 0 !important; /* Cleans out conflicting margins */ text-align: left !important; } } /* ========================================================================== CHILD THEME RESPONSIVE STACKING PATCH ========================================================================== */ @media (max-width: 921px) { /* 1. Dissolve Astra's horizontal row grid structures */ .site-footer .footer-widget-area [class*="-grid-row"], .site-footer [class*="ast-footer-grid"], .site-footer .ast-footer-row-inline { display: flex !important; flex-direction: column !important; /* Force items to sit on top of each other */ gap: 36px !important; /* Healthy breathing room vertical gap */ } /* 2. Force your widget column blocks to occupy 100% full screen width */ .custom-saas-footer-col { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin: 0 0 12px 0 !important; text-align: left !important; } } /* ========================================================================== MOBILE FOOTER LEFT ALIGNMENT NUDGE ========================================================================== */ @media (max-width: 921px) { /* Adds clean breathing room padding to the left side of all mobile footer widgets */ .site-footer .footer-widget-area .custom-saas-footer-col { padding-left: 24px !important; padding-right: 24px !important; /* Balances the right side text wrapping */ box-sizing: border-box !important; } } /* ========================================================================== FINAL MASTER MOBILE HEIGHT & GAP CONTROLLER ========================================================================== */ @media (max-width: 921px) { /* Micro-nudge the logo container down so it doesn't clip the top header */ [data-section="sidebar-footer-focus-item"], html body footer .footer-widget-area [class*="-grid-row"] > div:first-child { margin-top: 24px !important; } /* Target Astra's secondary section wrappers and flatten them out */ .site-footer-primary-section-2, [class*="site-footer-section-"] { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; } /* Ensure all link columns keep their clean vertical tracking distance */ .custom-saas-footer-col ul { margin-bottom: 44px !important; padding-bottom: 0 !important; } /* Standardize inner headers */ .custom-saas-footer-col h3 { margin-top: 0 !important; margin-bottom: 16px !important; } } /* ========================================================================== FINAL LIST BALANCING OVERRIDE TRACK ========================================================================== */ @media (max-width: 921px) { /* Completely flattens list items to drop legacy theme indentation */ html body footer .custom-saas-footer-col ul, html body footer .custom-saas-footer-col ol, html body footer .custom-saas-footer-col li, html body footer .custom-saas-footer-col li a { margin-left: 0 !important; padding-left: 0 !important; list-style: none !important; list-style-type: none !important; text-indent: 0 !important; } } /* ========================================================================== COMBINED MOBILE ALIGNMENT MASTER CONTROL BLOCK (ALIGNMENT FIX) ========================================================================== */ @media (max-width: 921px) { /* --- MOBILE FOOTER TITLE GUTTER ALIGNMENT MATCH --- */ /* Micro-nudge the titles to line up perfectly above the links */ .custom-saas-footer-col h3, .site-footer .footer-widget-area .widget-title { margin-left: 24px !important; /* Perfectly matches the column gutter track */ text-align: left !important; } /* --- PART 1: SOCIAL MEDIA ICONS RESPONSIVE GUTTER MATCH --- */ /* Target the specific social block containers directly and shift them over 24px */ .site-footer #block-27, .site-footer .widget_block[id*="block-27"], .site-footer .wp-block-social-links, ul.wp-block-social-links, .site-footer [id*="block-"] ul { margin-left: 24px !important; /* The magic 24px track shift */ padding-left: 0 !important; box-sizing: border-box !important; } /* --- PART 2: HYPERLINK OVER-SHIFT EMERGENCY RESET (SPECIFIC FIX) --- */ /* Keeps your standard text link items flat and locked flush onto their 24px padding track */ .custom-saas-footer-col ul, .custom-saas-footer-col ol { margin-left: 0 !important; padding-left: 0 !important; } .custom-saas-footer-col li { padding-left: 24px !important; margin-left: 0 !important; text-indent: 0 !important; box-sizing: border-box !important; } .custom-saas-footer-col li a { margin-left: 0 !important; padding-left: 0 !important; display: inline-block !important; } } /* ========================================================================== THE RESOLUTION: SOCIAL MEDIA FLEX START ALIGNMENT LOCK ========================================================================== */ @media (max-width: 921px) { /* 1. Reset WordPress block containers to line up flush left natively */ .site-footer .wp-block-social-links, ul.wp-block-social-links, .wp-block-social-links.is-layout-flex { display: flex !important; justify-content: flex-start !important; /* Forces icons to stay flush left */ padding-left: 0 !important; /* Cleared out padding to hand over to left coordinate shift */ margin-left: 0 !important; box-sizing: border-box !important; gap: 16px !important; /* Restores your exact original compact design spacing precisely */ } /* 2. Strip out any rogue negative margins forcing hidden offsets */ .site-footer .wp-block-social-links li.wp-social-link { margin-left: 0 !important; margin-right: 0 !important; /* Zeroed out individual margins to let your core gap parameter take over */ } } /* ========================================================================== THE UNBREAKABLE MASTER COORDINATE TRANSFORM TRACK ========================================================================== */ @media (max-width: 921px) { /* Physically shifts the entire icon row right 24px, completely ignoring container bounds */ .site-footer .wp-block-social-links, ul.wp-block-social-links, [class*="wp-block-social-links"] { position: relative !important; left: 24px !important; /* Changes the position directly to match your track */ transform: none !important; margin-left: 0 !important; } } /* ========================================================================== TABLET RESPONSIVE REPAIR PACK (UNBREAKABLE GRID OVERRIDE) ========================================================================== */ @media (min-width: 600px) and (max-width: 1024px) { /* 1. Force Astra's parent row elements to change from 4 columns to 2 columns */ html body .site-footer .ast-builder-footer-grid, html body .site-footer .ast-footer-row, html body .site-footer [class*="ast-footer-grid"], html body .site-footer .ast-builder-grid-row, .site-footer .footer-widget-area [class*="-grid-row"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* Forces 2 columns side-by-side */ gap: 48px 24px !important; /* Adds clear vertical and horizontal spacing */ width: 100% !important; max-width: 100% !important; } /* 2. Reset child columns to cleanly fill up their newly assigned grid cells */ html body .site-footer .ast-builder-footer-grid > div, html body .site-footer .ast-footer-row > div, html body .site-footer [class*="ast-footer-layout-element"], html body .site-footer .footer-widget-area .ast-builder-grid-row > div, .custom-saas-footer-col { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; /* Wipes out Astra's conflicting flex overrides */ margin: 0 !important; box-sizing: border-box !important; } /* 3. Ensure text inside the directories has room and drops single letter wrapping */ .custom-saas-footer-col, [data-section="sidebar-footer-focus-item"], .site-footer .footer-widget-area .widget { padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } .custom-saas-footer-col h3, .custom-saas-footer-col li, .custom-saas-footer-col li a { text-align: left !important; white-space: normal !important; word-break: normal !important; } } /* ========================================================================== TABLET RESPONSIVE REPAIR PACK (ASYMMETRIC TWO-COLUMN SPLIT) ========================================================================== */ @media (min-width: 600px) and (max-width: 1024px) { /* 1. Reset Astra's parent row to display as two wide side-by-side flex columns */ html body .site-footer .ast-builder-footer-grid, html body .site-footer .ast-footer-row, html body .site-footer [class*="ast-footer-grid"], html body .site-footer .ast-builder-grid-row, .site-footer .footer-widget-area [class*="-grid-row"] { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 0 !important; /* Managed explicitly below */ width: 100% !important; max-width: 100% !important; } /* 2. Group elements into Left (Column 1 & 2) and Right (Column 3 & 4) pairs */ /* LEFT SIDE: Logo block & Community & Legal */ [data-section="sidebar-footer-focus-item"], .site-footer-primary-section-2, .site-footer .footer-widget-area .ast-builder-grid-row > div:nth-child(1), .site-footer .footer-widget-area .ast-builder-grid-row > div:nth-child(2) { width: 48% !important; max-width: 48% !important; flex: 0 0 48% !important; clear: left !important; /* Forces Community down below the logo */ margin-bottom: 40px !important; box-sizing: border-box !important; } /* RIGHT SIDE: For Creators & Marketplace */ .site-footer-primary-section-3, .site-footer-primary-section-4, .site-footer .footer-widget-area .ast-builder-grid-row > div:nth-child(3), .site-footer .footer-widget-area .ast-builder-grid-row > div:nth-child(4), .custom-saas-footer-col:last-child { width: 48% !important; max-width: 48% !important; flex: 0 0 48% !important; clear: right !important; /* Forces Marketplace down below Creators */ margin-bottom: 40px !important; box-sizing: border-box !important; } /* 3. Maintain pristine vertical text alignment matching down your tracks */ .custom-saas-footer-col, [data-section="sidebar-footer-focus-item"], .site-footer .footer-widget-area .widget { padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } .custom-saas-footer-col h3, .custom-saas-footer-col li, .custom-saas-footer-col li a { text-align: left !important; white-space: nowrap !important; /* Keeps links flat on single lines */ } /* 4. Keep your social icons anchored nicely at the bottom right under marketplace */ .site-footer .wp-block-social-links, ul.wp-block-social-links { position: relative !important; left: 24px !important; margin-top: 16px !important; } } /* ========================================================================== STEP 0: MASTER BRAND TYPOGRAPHY SYSTEM [GLOBAL INTER LOCK] ========================================================================== */ html, body, p, h1, h2, h3, h4, h5, h6, a:not(.site-title) { /* 🌟 THE INTER COAT: Sweeps across headings and text to enforce Inter globally */ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* ========================================================================== STEP 5: BRAND LOGOTYPE CONTROLLER [POINT 16: CLAMP UPDATE - HORIZONTAL LOCK] ========================================================================== */ /* 1. Fluid Brand Title Scaling + Strict Horizontal Row Enforcement */ .site-branding .site-title, .site-branding .site-title a, .ast-site-identity .site-title, .ast-site-identity .site-title a, [class*="site-title-wrap"] .site-title, [class*="site-title-wrap"] .site-title a, .site-header .site-title, .site-header .site-title a { font-size: clamp(18px, 2vw + 6px, 36px) !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; word-break: keep-all !important; } /* 2. Global Logo Wrapper Alignment - ACTIVE ACROSS ALL STATES */ .ast-site-identity, .site-branding, .site-header-primary-section-left, .ast-site-identity a { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 0px !important; flex-wrap: nowrap !important; flex-shrink: 0 !important; position: relative !important; margin-left: 5px !important; } /* Eases up the right margin so the shield stays on its side */ .site-branding .site-logo-img, .ast-site-identity .custom-logo-link, .ast-site-identity img { margin-right: 0px !important; padding-right: 0px !important; } /* 🌟 THE DEEP PRIORITY SERIF LOCK: Heavy selector stack to permanently lock FRAUNCES here */ .site-branding .site-title, .site-branding .site-title a, .ast-site-identity .site-title, .ast-site-identity .site-title a, [class*="site-title-wrap"] .site-title, [class*="site-title-wrap"] .site-title a, .site-header .site-title, .site-header .site-title a, .site-title, .site-title a, .ast-site-title-wrap { /* 🌟 SUCCESS: Restores your exact custom editorial brand typography look from the footer */ font-family: "Fraunces", Georgia, serif !important; font-weight: 800 !important; letter-spacing: -0.01em !important; margin-left: 1px !important; padding-left: 0px !important; } /* ========================================================================== STEP 6: PRIMARY NAV TRACK - HORIZONTAL FLEX LOCK & FLUID TYPOGRAPHY ========================================================================== */ /* 1. Forces text links to lock side-by-side on a horizontal row and never stack */ .main-header-menu, .ast-builder-menu-1 .main-header-menu, .main-navigation .main-header-menu { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; /* THE ETSY GAP TRICK: Compresses link spacing from 25px down to 8px dynamically */ gap: clamp(8px, 1.5vw, 25px) !important; min-width: 0 !important; } /* 2. Forbids individual menu list items from breaking into separate lines */ .main-header-menu .menu-item, .ast-builder-menu-1 .main-header-menu .menu-item { display: inline-block !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* 3. Fluid Text Size Scaling Upgrade */ .main-header-menu .menu-item a, .ast-builder-menu-1 .main-header-menu .menu-item a, .main-navigation .main-header-menu .menu-item a { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; color: #1A2530 !important; letter-spacing: -0.02em !important; white-space: nowrap !important; display: block !important; /* THE CLAMP MAGIC: Scales typography from a crisp 14px on zoom up to your original bold 20px */ font-size: clamp(14px, 1vw + 5px, 20px) !important; /* Responsive internal click margins */ padding-left: clamp(4px, 0.6vw, 12px) !important; padding-right: clamp(4px, 0.6vw, 12px) !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* ========================================================================== STEP 5: MID-SCREEN / HIGHER ZOOM SQUEEZE ADAPTER (769PX - 1120PX VIEWPORTS) ========================================================================== */ @media (max-width: 1120px) and (min-width: 769px) { /* 1. Compresses the main outer container row padding to gain horizontal tarmac */ .ast-primary-header-bar .site-container, .ast-primary-header-bar .ast-builder-grid-row, .site-header .site-container { padding-left: 0px !important; /* 🌟 THE REPAIR: Keeps the shield locked hard to the left edge at 140% zoom */ padding-right: 0px !important; /* Matches your master right-edge zero cushion */ } /* 2. Forces the search box housing to shrink down more compactly to give links room */ .site-header .dgwt-wcas-search-wrapp, .site-header .dgwt-wcas-style-solaris, .dgwt-wcas-search-wrapp { max-width: 210px !important; margin-left: 10px !important; margin-right: 15px !important; } /* 3. Squeezes the empty gaps between your 4 text links and icons tightly together */ .main-header-menu, .ast-builder-menu-1 .main-header-menu, .main-navigation .main-header-menu { gap: 6px !important; } /* 4. Drops the text font size down to a clean, compact footprint so it stays inline */ .main-header-menu .menu-item a, .ast-builder-menu-1 .main-header-menu .menu-item a, .main-navigation .main-header-menu .menu-item a { font-size: 14px !important; padding-left: 6px !important; padding-right: 6px !important; } } /* ========================================================================== STEP 10: EARLY BREAKPOINT FORCE - THE 160% ZOOM CLIP SHIELD ========================================================================== */ @media (max-width: 1120px) { /* Prevents desktop links from forcing a massive horizontal layout spillover */ .main-header-bar-navigation { display: none !important; } /* 2. Forces Astra's clean mobile header layout row to become instantly active */ .ast-header-break-toggle .ast-mobile-header-wrap { display: block !important; } .ast-header-break-toggle .ast-primary-header-bar { display: flex !important; } } /* <--- NEATLY CLOSES THE UNIFIED MEDIA QUERY CONTAINER */ /* ========================================================================== DOKAN SCRIPTER INJECTION REPAIR: HEADER BASELINE & MOBILE GAP FIX ========================================================================== */ /* đŸ–Ĩī¸ 1. DESKTOP BASELINE FORCE (922px and Above) */ @media (min-width: 922px) { /* Stabilizes the exact desktop column classes and strips out the 8px script padding drag */ .site-footer .site-footer-primary-section-3, .site-footer .site-footer-primary-section-4, [class*="site-footer-primary-section-"] { margin-top: 0 !important; padding-top: 0 !important; align-self: flex-start !important; /* Force all footer grid headers to align perfectly along the top axis */ } } /* 📱 2. MOBILE VERTICAL STACK CONTROLLER (921px and Below) */ @media (max-width: 921px) { /* Bypasses the loose script layout spacing and hardcodes clean breathing room spacing */ .site-footer .site-footer-primary-section-3, .site-footer .site-footer-primary-section-4 { margin-top: 24px !important; /* Forces a consistent vertical rhythm layout between the blocks */ padding-top: 0 !important; } } /* ========================================================================== STEP 11: PEAK-ZOOM HIGH PRESSURE SQUEEZE (FINAL 160% ZOOM OVERRIDE) ========================================================================== */ @media (max-width: 1080px) and (min-width: 769px) { /* 1. Pulls the search bar down slightly further to buy space for the right edge */ .site-header .dgwt-wcas-search-wrapp, .dgwt-wcas-search-wrapp { width: clamp(140px, 8vw, 180px) !important; max-width: clamp(140px, 8vw, 180px) !important; margin-left: 6px !important; margin-right: 8px !important; } /* 2. Tightens the gaps between your 4 links and your icons to absolute zero buffers */ .main-header-menu, .ast-builder-menu-1 .main-header-menu, .main-navigation .main-header-menu { gap: 3px !important; } /* 3. Safely scales the nav link font down to 13px at maximum pressure to keep it all on screen */ .main-header-menu .menu-item a, .ast-builder-menu-1 .main-header-menu .menu-item a, .main-navigation .main-header-menu .menu-item a { font-size: 13px !important; padding-left: 3px !important; padding-right: 3px !important; } /* 4. Compresses the spacing on the parent wrapper container to maximize horizontal tarmac */ .ast-primary-header-bar .site-container, .ast-primary-header-bar .ast-builder-grid-row { padding-left: 8px !important; padding-right: 8px !important; } } /* ========================================================================== STEP 13: MOBILE POPUP DRAWER MIGRATION (SURGICAL BLOCK-38 CUSTOM WIDGET REPOSITION) ========================================================================== */ @media (max-width: 768px) { /* 1. Vaporizes the search capsule and your custom 3-button row from the main top bar row */ .site-header-primary-section-right .dgwt-wcas-search-wrapp, .site-header-primary-section-right .dgwt-wcas-style-solaris, .site-header-primary-section-right #block-38, .site-header-primary-section-right .widget_block { display: none !important; } /* 2. Forces your search capsule and custom icon links to show up perfectly stacked inside the open menu drawer */ .ast-mobile-popup-inner .dgwt-wcas-search-wrapp, .ast-mobile-popup-inner .dgwt-wcas-style-solaris, .ast-mobile-popup-inner #block-38, .ast-mobile-popup-inner .custom-header-utility-row { display: block !important; visibility: visible !important; width: 90% !important; max-width: 100% !important; margin: 20px auto !important; /* Spaces elements vertically inside the white drawer background */ text-align: center !important; } /* 3. Centers your custom utility buttons row horizontally inside the mobile popup menu */ .ast-mobile-popup-inner .custom-header-utility-row { display: flex !important; justify-content: center !important; gap: 20px !important; /* Restores elegant wide finger-tapping gaps for mobile devices */ } /* 4. Ensures the internal search box stretches nicely across the dropdown drawer width */ .ast-mobile-popup-inner .dgwt-wcas-search-form { margin: 0 auto !important; width: 100% !important; } } /* ========================================================================== STEP 14: CUSTOM UTILITY ROW SEPARATION CUSHION ========================================================================== */ .custom-header-utility-row, #block-38 .custom-header-utility-row { /* THE SPRING TRICK: Automatically pushes the 3 buttons away from "My Account" */ /* It maintains a comfortable 40px gap on wide screens, but compresses down to 15px under tight zoom */ margin-left: clamp(15px, 3vw, 40px) !important; } /* ========================================================================== FINAL DESKTOP TRACK REBALANCING MATRIX [THE ANTI-CLIP CLAMP ENGINE] ========================================================================== */ /* 1. Forces the parent right-side container to stretch wide and hold items without clipping */ .site-header-primary-section-right, .ast-header-primary-wrap .site-header-primary-section-right { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; overflow: visible !important; /* Forbids Astra from slicing off your icons */ gap: clamp(8px, 2vw, 35px) !important; /* Elastic space between menu text and your 3 buttons */ } /* 2. Controls your custom utility row architecture using pure flex alignment instead of margins */ .custom-header-utility-row, #block-38 .custom-header-utility-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; margin-left: 0 !important; /* Wipes out the rigid margin wedge causing the clipping */ /* Spacing between your 3 custom icons automatically shrinks from 16px down to 6px under pressure */ gap: clamp(6px, 1.2vw, 16px) !important; } /* 3. Ensures your custom widget box block stays inline horizontally on the row layout */ #block-38, .widget_block { margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; } /* 4. Fine-tunes your individual clickable icon padding footprints so they scale fluidly */ .header-utility-icon-link { padding-left: clamp(4px, 0.5vw, 10px) !important; padding-right: clamp(4px, 0.5vw, 10px) !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; } /* 5. Dynamically drops icon dimensions slightly under maximum zoom pressure to protect the edge */ .header-utility-icon-link svg, svg.utility-basket-actual-svg { width: clamp(20px, 1.8vw, 25px) !important; height: clamp(20px, 1.8vw, 25px) !important; } /* ========================================================================== FINAL DESKTOP TRACK TRACKING MATRIX [SURGICAL CELL SEGREGATION] ========================================================================== */ /* 1. Forces the shared Astra container element to spread items across a horizontal row */ .ast-builder-menu-1, .ast-builder-menu-1 .main-header-menu { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; } /* 2. Directly pushes your 3 custom icons area away from "My Account" to create the perfect separation gap */ .ast-builder-menu-1 #block-38, .ast-builder-menu-1 .widget_block { display: inline-flex !important; align-items: center !important; /* THE SPRING TRICK: Elegant 35px cushion on normal screens, scales down to 10px automatically under zoom */ margin-left: clamp(10px, 2.5vw, 35px) !important; margin-right: 0 !important; } /* 3. Controls the inner spacing between your 3 individual utility icons */ .ast-builder-menu-1 .custom-header-utility-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; /* Keeps your 3 icons grouped together beautifully without overlapping */ gap: clamp(8px, 1vw, 16px) !important; margin: 0 !important; } /* 4. Keeps the individual clickable icon link frames completely horizontal */ .ast-builder-menu-1 .header-utility-icon-link { display: inline-flex !important; align-items: center !important; padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap !important; } /* ========================================================================== STEP 15: WIDGET VISIBILITY SHIELD [ANTI-VANISHING REPAIR FORCE] ========================================================================== */ /* 1. Defeats Astra's hidden media queries and forces your 3 icons to stay visible */ #block-38, .ast-builder-menu-1 #block-38, .ast-builder-menu-1 .widget_block, .custom-header-utility-row { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* 2. Enforces strict horizontal row rules across all desktop and laptop zoom levels */ .ast-builder-menu-1, .ast-builder-menu-1 .main-header-menu { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; } /* 3. Re-locks your perfect separation spring from My Account */ .ast-builder-menu-1 #block-38 { /* Maintons a comfortable 35px cushion on wide views, compresses to 8px under peak pressure */ margin-left: clamp(8px, 2vw, 35px) !important; margin-right: 0 !important; } /* 4. Keeps the 3 custom icons elastically compressed together under high zoom */ .ast-builder-menu-1 .custom-header-utility-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: clamp(6px, 1vw, 15px) !important; } /* ========================================================================== STEP 15: CUSTOM UTILITY REBALANCING MODULE [ANTI-CLIPPING CLAMP ENGINE] ========================================================================== */ /* 1. Forces the main container to hold all links and icons in a strict, un-wrappable row */ .ast-builder-menu-1, .ast-builder-menu-1 .main-header-menu, .site-header-primary-section-right { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; } /* 2. Overrides Astra's layout boundaries so your custom icons are never sliced off */ #block-38, .ast-builder-menu-1 #block-38, .ast-builder-menu-1 .widget_block { display: inline-flex !important; align-items: center !important; overflow: visible !important; /* Elastic spacing cushion separates "My Account" from the 3 icons smoothly */ margin-left: clamp(8px, 2vw, 35px) !important; margin-right: 0 !important; } /* 3. Turns your custom utility row into a rubber band that shrinks under zoom pressure */ .custom-header-utility-row, .ast-builder-menu-1 .custom-header-utility-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; /* Gaps between your 3 icons compress from 16px down to a snug 6px at 160% zoom */ gap: clamp(6px, 1.2vw, 16px) !important; margin: 0 !important; } /* 4. Compresses the individual click padding around each icon link frame */ .header-utility-icon-link { display: inline-flex !important; align-items: center !important; padding-left: clamp(3px, 0.5vw, 10px) !important; padding-right: clamp(3px, 0.5vw, 10px) !important; margin: 0 !important; } /* 5. Dynamically drops icon size from 25px down to a crisp 18px at peak zoom to protect the edge */ .header-utility-icon-link svg, svg.utility-basket-actual-svg, .custom-header-utility-row svg { width: 20px !important; height: 20px !important; min-width: 20px !important; /* 🌟 Force them to stay small */ max-width: 20px !important; /* 🌟 Stop them from swelling up on zoom */ min-height: 20px !important; max-height: 20px !important; } /* ========================================================================== STEP 15: PRIMARY HEADER RUNWAY OPEN [THE MASTER EDGE RESTORATION] ========================================================================== */ /* 1. Forces the master container row to utilize every pixel of screen space available */ .site-header .ast-container, .site-header .ast-builder-grid-row-container-inner, .ast-header-builder .ast-primary-header-bar .site-container { max-width: 100% !important; width: 100% !important; display: flex !important; } /* 2. Instructs the right-side section column to dynamically widen instead of hitting a wall */ .site-header-primary-section-right, .ast-header-primary-wrap .site-header-primary-section-right { flex: 1 0 auto !important; /* 🌟 Prevents column collapse across low zoom intervals */ width: 100% !important; /* 🌟 Extends the right runway track continuously */ min-width: 0 !important; display: flex !important; justify-content: flex-end !important; /* Forces the navigation link track to stay flush right */ overflow: visible !important; } /* 3. Re-locks your strict horizontal track for both text menu links and custom icons together */ .ast-builder-menu-1, .main-navigation .main-header-menu { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; /* Elastic gap cushion between menu items automatically contracts */ gap: clamp(4px, 1.2vw, 24px) !important; } /* 4. Ensures the custom utility buttons widget is pulled tightly beside My Account */ .ast-builder-menu-1 #block-38 { display: inline-flex !important; align-items: center !important; /* Dynamic spring: 30px gap on desktop, compresses cleanly to 6px under extreme zoom */ margin-left: clamp(6px, 1.8vw, 30px) !important; margin-right: 0 !important; } /* 5. Squeezes your 3 individual custom icons closer together at peak pressure to save the edge */ .custom-header-utility-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: clamp(5px, 0.8vw, 14px) !important; } /* ========================================================================== STEP 16: FIBOSEARCH HIGH-ZOOM COMPRESSION ENGINE [4-LINKS SHIELD] ========================================================================== */ .site-header .dgwt-wcas-search-wrapp, .site-header .dgwt-wcas-style-solaris, .dgwt-wcas-search-wrapp { /* Lowering the clamp floor from 170px to 130px so it collapses smaller on zoom-in */ width: clamp(130px, 12vw + 1rem, 345px) !important; max-width: clamp(130px, 12vw + 1rem, 345px) !important; /* Tightens the outside margins to save precious layout pixels */ margin-left: clamp(6px, 1.5vw, 25px) !important; margin-right: clamp(6px, 1.5vw, 25px) !important; } /* ========================================================================== STEP 17: HIGH-ZOOM LINK SPACE CONDENSER [THE ANTI-OVERLAP REMEDY] ========================================================================== */ /* Tightens the text link list container to prevent any overflow or overlap */ .main-header-menu, .ast-builder-menu-1 .main-header-menu, .main-navigation .main-header-menu { /* THE SPRING TRICK: Reduces link spacing from 24px down to 4px under zoom pressure */ gap: clamp(4px, 1vw, 24px) !important; } /* Forces individual menu list anchors to compress their text footprint */ .main-header-menu .menu-item a, .ast-builder-menu-1 .main-header-menu .menu-item a, .main-navigation .main-header-menu .menu-item a { /* THE CLAMP DECEIT: Lets font scale down further to 14px right when zoom pressure hits */ font-size: clamp(14px, 1vw + 4px, 18px) !important; /* Shrinks horizontal padding around words to give the search bar absolute clearance */ padding-left: clamp(2px, 0.4vw, 10px) !important; padding-right: clamp(2px, 0.4vw, 10px) !important; white-space: nowrap !important; } /* ========================================================================== STEP 15: MASTER HEADER GRID CONTROLLER [THE ANTI-OVERLAP ROW ENGINE] ========================================================================== */ /* 1. Forces Astra's main header strip into a strict, unbreakable row with true space separation */ .site-header .ast-builder-grid-row, .site-header .ast-grid-common-row, .ast-primary-header-bar .site-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; /* Locks logo left and menu right globally */ width: 100% !important; } /* 1b. UPDATED TO FORCE UNBREAKABLE HORIZONTAL ROW FLOW ON ZOOM */ .site-header-primary-section-right { flex: 1 1 auto !important; display: flex !important; flex-direction: row !important; /* 🌟 FIX: Forces components to stay left-to-right */ flex-wrap: nowrap !important; /* 🌟 FIX: Stops links from dropping into a vertical tower */ justify-content: flex-end !important; align-items: center !important; } /* 2. Protects the horizontal workspace blocks so they can never overlap or slide under each other */ .site-header-primary-section-left, .site-header-primary-section-right, .dgwt-wcas-search-wrapp { position: relative !important; flex-shrink: 1 !important; } /* 3. Sets a firm defensive structural barrier to keep your 4 links and 3 icons safely horizontal */ .ast-builder-menu-1, .main-navigation .main-header-menu { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: clamp(5px, 1.2vw, 24px) !important; /* 🌟 THE INTER ENFORCER: Forces the 4 menu links to discard serifs and adopt Inter */ font-family: "Inter", -apple-system, sans-serif !important; } /* 3a. Deep target for the actual text strings inside the links */ .ast-builder-menu-1 a, .main-navigation .main-header-menu a, .main-navigation .main-header-menu a span { font-family: "Inter", -apple-system, sans-serif !important; } /* 4. Keeps your 3 custom icons widget perfectly in line with "My Account" without forcing margins */ .custom-header-utility-row { display: inline-flex !important; align-items: center !important; margin-left: 15px !important; /* Keeps a safe text gap from Sign In */ margin-right: -40px !important; /* Your custom balanced edge margin */ } /* 4b. 🌟 THE BYPASS: Forces the individual icons closer together, crushing the 20px inline gap trap */ .custom-header-utility-row > div, .custom-header-utility-row > a { margin-right: -14px !important; /* Pulls each neighboring icon tight to its left side */ } .custom-header-utility-row > div:last-child, .custom-header-utility-row > a:last-child { margin-right: 0 !important; /* Prevents the final globe icon from messing up your master edge margin */ } /* ========================================================================== TRUE MOBILE BREAKPOINT RESCUE ENGINE (FOR VIEWPORTS 480PX AND BELOW) ========================================================================== */ @media (max-width: 480px) { /* 1. CRUSHES THE INLINE HTML NOWRAP: Forces the pink bar text to wrap into 2-3 neat rows */ .ast-above-header-bar div, .ast-above-header-bar p, .ast-above-header-bar span, .ast-above-header-bar-container div { white-space: normal !important; /* Forces text wrap, breaking through the inline code block trap */ font-size: 11px !important; /* Shrinks font size cleanly so it fits mobile screens perfectly */ display: block !important; width: 100% !important; padding: 0 10px !important; /* Keeps text from scraping the screen edges */ } } /* <--- CLOSES THE 480px MOBILE BREAKPOINT SAFELY */ /* ========================================================================== SURGICAL MOBILE SHIELD CUSHION UNIFIER [COMPACT EDGE FIX] ========================================================================== */ @media (max-width: 921px) { /* 1. Clears any shifting effects from the outer row columns so the burger stays put */ .site-header-primary-section-left { margin-left: 0px !important; } /* 2. Keeps a balanced left margin cushion */ .site-branding, .ast-site-identity, .custom-logo-link { margin-left: 5px !important; padding-left: 0px !important; } /* 3. THE WALL PROTECTION: Keeps elements cleanly on the mobile canvas grid row */ .ast-primary-header-bar, .ast-mobile-header-wrap, .site-header-inner { padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; } } /* <--- CLOSES THE 921px MOBILE BREAKPOINT SAFELY */ /* ========================================================================== 3. Radius Capsule Layout Shell (FIXED: Handles Its Own Glow & Radii) ========================================================================== */ .site-header .dgwt-wcas-sf-wrapp { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 40px !important; border-radius: 50px !important; /* Restores your smooth capsule profile */ border: 1px solid #e2e8f0 !important; /* Restores your fine grey border line */ background-color: #fcfcfc !important; /* Restores your soft white interior color */ z-index: 1 !important; pointer-events: auto !important; /* 🌟 FIXED: Changed from 'none' to 'auto' to make the container clickable */ box-sizing: border-box !important; /* Smooth out the glow fading in and out */ transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out !important; } /* ========================================================================== NEW: UNIFIED GLOW INTERACTION SYSTEM (BLUE CAPSULE LOCK) ========================================================================== */ /* Triggers when hovering anywhere inside the search wrapper tarmac */ .site-header .dgwt-wcas-search-wrapp:hover .dgwt-wcas-sf-wrapp, .site-header .dgwt-wcas-search-form:hover .dgwt-wcas-sf-wrapp { border-color: #42A5F5 !important; /* Your signature blue border */ border-radius: 50px !important; /* Force-locks the capsule curve */ box-shadow: 0 0 10px rgba(66, 165, 245, 0.6) !important; /* Clean blue glowing vector radius */ } /* Triggers and sustains when the user clicks inside to type text */ .site-header .dgwt-wcas-search-input:focus ~ .dgwt-wcas-sf-wrapp, .site-header .dgwt-wcas-search-form:focus-within .dgwt-wcas-sf-wrapp { border-color: #42A5F5 !important; border-radius: 50px !important; box-shadow: 0 0 14px rgba(66, 165, 245, 0.8) !important; /* Slightly deeper blue focus halo */ } /* ========================================================================== PRODUCTION REPAIR: VAPORIZE STICKY HEADER PINK SHADOW LINE (< 1120PX) ========================================================================== */ @media (max-width: 1120px) { /* 1. Vaporize the pink/grey border decoration lines and shadow assets on mobile sticky rows */ .site-header, .ast-primary-header-bar, .ast-main-header-bar-alignment, .ast-mobile-header-wrap, div[class*="main-header-bar"] { box-shadow: none !important; /* 🌟 THE ERASER: Vaporizes that clipping accent line entirely */ border-bottom: none !important; -webkit-box-shadow: none !important; } /* 2. Alternatively, if you want a clean, full-width grey divider line instead, lock this in */ .ast-mobile-header-wrap { border-bottom: 1px solid #e2e8f0 !important; /* Elegant divider that spans wall-to-wall smoothly */ } } /* ========================================================================== PRODUCTION LOCK: SCALE MOBILE & TABLET ICONS SIZING ========================================================================== */ /* GLOBAL: Icon Base Sizes for both Mobile & Tablet (< 1120px) */ @media (max-width: 1120px) { .ast-mobile-popup-inner .utility-basket-svg, .ast-mobile-popup-inner .utility-basket-actual-svg, .custom-header-utility-row .utility-basket-svg, .custom-header-utility-row .utility-basket-actual-svg, #block-38 .utility-basket-svg, svg[class*="utility-basket"] { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; display: block !important; } .ast-mobile-popup-inner .header-utility-icon-link, .custom-header-utility-row .header-utility-icon-link { width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* SPECIFIC TABLET VIEW: Layout Enhancements (545px to 921px) */ @media (min-width: 545px) and (max-width: 921px) { /* Center the row of icons on wider tablet screens */ .ast-mobile-popup-inner .custom-header-utility-row { display: flex !important; justify-content: center !important; gap: 25px !important; /* Adds professional spacing between the basket, bell, and globe icons */ margin-bottom: 20px !important; } } /* ========================================================================== 1. SIGNATURE BLUE CAPSULE HOVER & INTUITIVE FOCUS GLOW SYSTEM (GLOBAL) ========================================================================== */ .site-header .dgwt-wcas-sf-wrapp { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 40px !important; border-radius: 50px !important; border: 1px solid #e2e8f0 !important; background-color: #fcfcfc !important; z-index: 1 !important; pointer-events: auto !important; box-sizing: border-box !important; transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out !important; } .site-header .dgwt-wcas-search-wrapp:hover .dgwt-wcas-sf-wrapp, .site-header .dgwt-wcas-search-form:hover .dgwt-wcas-sf-wrapp { border-color: #42A5F5 !important; border-radius: 50px !important; box-shadow: 0 0 10px rgba(66, 165, 245, 0.6) !important; } .site-header .dgwt-wcas-search-input:focus ~ .dgwt-wcas-sf-wrapp, .site-header .dgwt-wcas-search-form:focus-within .dgwt-wcas-sf-wrapp { border-color: #42A5F5 !important; border-radius: 50px !important; box-shadow: 0 0 14px rgba(66, 165, 245, 0.8) !important; } .ast-header-break-point .main-header-menu a:hover, .ast-header-break-point .main-header-menu .menu-item a:hover, #ast-hf-mobile-menu a:hover, #ast-hf-mobile-menu .menu-item.current-menu-item > a { color: #42A5F5 !important; } /* ========================================================================== 2. PURE PHONE VIEWPORT CONTROLLER (MAX-WIDTH: 768PX) ========================================================================== */ @media (max-width: 768px) { /* Instantly hide the tablet text links from showing up on mobile phone screens */ .tablet-only-link { display: none !important; } /* Keep your search capsule visible and active on phone viewports */ .mobile-only-search { display: flex !important; } /* Your original working mobile phone alignment parameters */ .ast-mobile-popup-inner .menu-item-type-custom, .ast-mobile-popup-inner li[class*="menu-item-2928"], #ast-hf-mobile-menu li.menu-item-type-custom { width: 100% !important; max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-top: 55px !important; margin-bottom: -15px !important; position: relative !important; top: 45px !important; left: 60px !important; } .ast-mobile-popup-inner li[class*="menu-item-2928"] .dgwt-wcas-search-wrapp:not(.dgwt-wcas-open), .ast-mobile-popup-inner li[class*="menu-item-2928"] .dgwt-wcas-search-form, #ast-hf-mobile-menu .dgwt-wcas-search-form { width: 94% !important; max-width: 380px !important; margin-left: auto !important; margin-right: auto !important; display: flex !important; align-items: center !important; position: relative !important; } .ast-mobile-popup-inner .header-widget-area:nth-of-type(1), .ast-mobile-popup-inner [data-section="sidebar-widgets-header-widget-1"], .ast-mobile-popup-inner .widget_block { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; position: relative !important; top: 25px !important; } .ast-mobile-popup-inner .custom-header-utility-row, div[class*="custom-header-utility"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; gap: 30px !important; left: 60px !important; position: relative !important; top: 30px !important; } .ast-mobile-popup-inner .saas-nav-dropdown, .ast-mobile-popup-inner #notificationSaasPanel, .ast-mobile-popup-inner #currencySaasPanel { margin: 0 !important; padding: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; display: none !important; } .ast-mobile-popup-inner .ast-mobile-nav-wrap .menu, .ast-mobile-popup-inner .ast-hf-mobile-menu, .ast-mobile-popup-inner .menu { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; font-size: 25px !important; font-weight: 800 !important; } } /* ========================================================================== 3. PURE TABLET VIEWPORT CONTROLLER (MIN-WIDTH: 769PX AND MAX-WIDTH: 1120PX) ========================================================================== */ @media (min-width: 769px) and (max-width: 1120px) { /* Vaporize the phone search box item completely when loaded on tablet screens */ .mobile-only-search, .ast-header-break-point .main-navigation ul li.menu-item-type-custom, li[class*="menu-item-2928"], li[class*="menu-item-2428"], .main-navigation .dgwt-wcas-search-wrapp { display: none !important; visibility: hidden !important; height: 0 !important; } /* Force your custom tablet navigation menu links to stack vertically and bold */ .tablet-only-link { display: block !important; width: 100% !important; text-align: left !important; margin: 18px 0 !important; /* Visual padding gaps spacing between links */ } /* Re-pin your tablet navigation menu lines list flush against the left sidebar bezel */ .main-navigation ul, .main-navigation ul.main-header-menu, #ast-hf-mobile-menu { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; padding-top: 40px !important; /* Air gap room space beneath the top close button line */ padding-left: 40px !important; /* Elegant indentation cushion buffer from the screen edge */ margin: 0 !important; } .main-navigation ul li a, #ast-hf-mobile-menu li a { font-size: 25px !important; font-weight: 800 !important; color: #1a202c !important; text-decoration: none !important; } } /* ========================================================================== TRANS-FIRST MARKETPLACE UNIFIED HERO DESIGN ENGINE (LEAK PROOF) ========================================================================== */ /* 1. Sets up the full template boundary spacing properties */ .trans-first-hero-container { max-width: 800px !important; margin: 0 auto !important; padding: 60px 20px 0 20px !important; /* Restores your exact premium layout dimensions */ font-family: 'Inter', system-ui, -apple-system, sans-serif !important; box-sizing: border-box !important; color: #475569 !important; line-height: 1.75 !important; text-align: left !important; } .trans-first-hero-header { margin-bottom: 24px !important; display: block !important; width: 100% !important; } /* 2. Formats your sleek slate gray mini subtitle label */ .trans-first-mini-title { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #64748b !important; display: block !important; margin-bottom: 14px !important; line-height: 1.2 !important; } /* 3. Manages your bold shop independent title scaling */ .terms-hero-title { font-size: clamp(32px, 7vw, 44px) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; color: #0f172a !important; margin: 0 0 24px 0 !important; word-break: keep-all !important; } /* 4. Keeps your abstract intro text easy to read */ .trans-first-hero-desc { font-size: 16px !important; line-height: 1.75 !important; color: #475569 !important; font-weight: 400 !important; margin: 0 !important; } /* 5. Locks down your custom accent divider line height and color */ .trans-first-brand-minibar { height: 1px !important; width: 100% !important; background-color: #F48FB1 !important; margin: 24px 0 16px 0 !important; display: block !important; } /* 6. Pure responsive mobile scalers rule layers */ @media (max-width: 768px) { .terms-hero-title { font-size: 32px !important; line-height: 1.2 !important; } .terms-heading-main { font-size: 22px !important; } } /* ========================================================================== 3. ORIGINAL HOVER GRAPHICS & BRAND TEXT FADES RESTORED ========================================================================== */ .main-header-bar-nav .menu-item a:hover, .main-header-menu .menu-item a:hover, .ast-primary-header-bar .main-header-bar-nav .menu-item:hover > a, .site-branding .site-title a:hover, .site-title-wrap .site-title a:hover, .ast-site-identity .site-title a:hover { color: #2290FF !important; transition: color 0.2s ease-in-out !important; } /* ========================================================================== 0. FONTS INJECTION & BRAND LOGO OVERRIDES ========================================================================== */ @import url('https://googleapis.com'); .site-branding .site-title, .site-branding .site-title a, .site-title-wrap .site-title, .site-title-wrap .site-title a, .ast-site-identity .site-title, .ast-site-identity .site-title a, h1.site-title, h1.site-title a { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.5px !important; text-transform: none !important; } /** * 5. SAAS ECOSYSTEM CATALOG GRID ARCHITECTURE (ACTIVE SHADOW PHYSICS MODEL) * Normalizes main homepage ecosystem cards to the soft gray border framework, * ensuring they sit cleanly as flat items until elevated with the premium * dual-layer hover shadow on mouseover. */ /* Baseline Saas Card Element Configurations */ .saas-grid-container .saas-card-cell { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; /* Matches global soft gray line framework */ border-radius: 9px !important; /* Unifies container card corner radius */ box-shadow: none !important; /* Clears out old hard inline shadow limits */ overflow: hidden !important; position: relative; z-index: 1; cursor: pointer !important; /* Physical acceleration transitions matching shop, blog, and merch layouts */ transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important, box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } /* Active Hover State: Saas Card Elevation Physics & Diffused Drop Shadow */ .saas-grid-container .saas-card-cell:hover { z-index: 2; /* Elevates layout stack above adjacent grid margins */ transform: translateY(-4px) !important; /* Clean premium lift effect off the page */ /* Exact signature dual-layer diffused drop shadow matrix used across your shop layout */ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.04) !important; } /** * 4. MERCHANDISE CATALOG GRID ARCHITECTURE (ACTIVE SHADOW PHYSICS MODEL) * Normalizes merchandise catalog items to the soft gray border framework and * uniform 8px radius, deploying the premium dual-layer hover shadow on mouseover. */ /* Baseline Merchandise Card Configurations */ .merch-grid .merch-card-cell { background: #ffffff !important; border: 1px solid #e2e8f0 !important; /* Matches global soft card border */ border-radius: 8px !important; /* Unifies corner radius down from 12px */ box-shadow: none !important; /* Strips out the legacy flat box shadow line */ overflow: hidden !important; position: relative; z-index: 1; cursor: pointer !important; /* Physical acceleration transitions matching shop and blog cards */ transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important, box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } /* Active Hover State: Merch Elevation Physics & Diffused Drop Shadow */ .merch-grid .merch-card-cell:hover { z-index: 2; /* Elevates layout over neighboring elements */ transform: translateY(-4px) !important; /* Clean premium lift effect */ /* Exact dual-layer diffused drop shadow matrix used on your shop layout */ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.04) !important; } /** * 3. INTERACTIVE FORM ELEMENT ARCHITECTURE (WPFORMS FOCUS PHYSICS) * Unifies global input fields, textareas, and selection blocks with the * soft gray outline structure, transitioning into the premium shadow matrix upon activation. */ /* Global Baseline Input Configurations */ div.wpforms-container .wpforms-form input[type="text"], div.wpforms-container .wpforms-form input[type="email"], div.wpforms-container .wpforms-form input[type="tel"], div.wpforms-container .wpforms-form input[type="url"], div.wpforms-container .wpforms-form input[type="password"], div.wpforms-container .wpforms-form textarea, div.wpforms-container .wpforms-form select { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; /* Matches soft card border */ border-radius: 8px !important; /* Matches theme corner radius */ padding: 12px 16px !important; /* Premium inner breathing room */ color: #0f172a !important; box-shadow: none !important; /* Clears default inner inset shadows */ box-sizing: border-box !important; outline: none !important; /* Physical acceleration transitions matching primary cards */ transition: border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important, box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } /* Active Focus Physics: Drop Shadow Trigger When Typing */ div.wpforms-container .wpforms-form input[type="text"]:focus, div.wpforms-container .wpforms-form input[type="email"]:focus, div.wpforms-container .wpforms-form input[type="tel"]:focus, div.wpforms-container .wpforms-form input[type="url"]:focus, div.wpforms-container .wpforms-form input[type="password"]:focus, div.wpforms-container .wpforms-form textarea:focus, div.wpforms-container .wpforms-form select:focus { border-color: #cbd5e1 !important; /* Slightly deepens border edge to stabilize focus */ /* Premium dual-layer diffused drop shadow matrix dropped on bottom-edge */ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.04) !important; } /* ========================================================================== TRANS-FIRST CUSTOM THEME ARCHITECTURE ========================================================================== */ /** * 1. GLOBAL ELEMENT ARCHITECTURE (NON-INTERACTIVE INFRASTRUCTURE) * Applies the uniform soft gray borders and matching border-radii across * stationary layout sections to prevent eye fatigue and maintain baseline uniformity. */ /* Technical Specification Tag Elements */ .technical-spec-tag { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; } /* Static Program Highlights & Process Container Blocks */ .program-highlight-box, .step-container { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; box-shadow: none !important; transform: none !important; } /** * 2. INTERACTIVE ELEMENT ARCHITECTURE (ACTIVE SHADOW PHYSICS MODELS) * Assigns responsive elevation curves and distinct multi-layered shadows to * primary click pathways (Shop Cards, Archive Blog Grids) to guide user interaction. */ /* Baseline Layout: Native Astra 4-Column Archive Blog Grid Inner Card Container */ .ast-blog-layout-4-grid .ast-article-inner { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; box-shadow: none !important; overflow: hidden; position: relative; z-index: 1; /* Physical acceleration transitions matching primary shop item layout */ transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important, box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } /* Active Hover State: Elevation Physics & Diffused Bottom Shadow Drop */ .ast-blog-layout-4-grid .ast-article-inner:hover { z-index: 2; transform: translateY(-4px) !important; /* Premium dual-layer diffused drop shadow matrix */ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.04) !important; } /* ========================================================================== TRANS-FIRST CORE SAAS PORTAL HOOKS (PURE ELEMENT OVERRIDES) ========================================================================== */ /* 1. Global Reset & Inter Font Injection Matrix */ .woocommerce-account .site-content, .woocommerce-account .main-content, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; box-sizing: border-box !important; text-align: left !important; } /* 2. Micro Layout Split Engine (Converts Stack into Side-by-Side Dashboard) */ .woocommerce-account .woocommerce { display: flex !important; flex-wrap: wrap !important; gap: 32px !important; margin-top: 30px !important; align-items: flex-start !important; width: 100% !important; max-width: 1200px !important; } /* 3. Sleek Floating Sidebar Component Layout */ .woocommerce-MyAccount-navigation { flex: 0 0 260px !important; width: 260px !important; max-width: 100% !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; padding: 14px !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important; } /* Wipe theme bullets, margins, and padding constraints */ .woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* 4. Format Tab Links into Sleek Menu Rows */ .woocommerce-MyAccount-navigation li a { display: block !important; padding: 10px 14px !important; color: #475569 !important; /* System Slate Text */ font-size: 13px !important; font-weight: 700 !important; /* Premium Medium Weight */ text-decoration: none !important; border-radius: 6px !important; border-left: 3px solid transparent !important; background: transparent !important; transition: all 0.15s ease-in-out !important; } /* Hover link action styling matching your calculator engine */ .woocommerce-MyAccount-navigation li a:hover { color: #42A5F5 !important; /* Active Brand Blue text */ background: #F8FAFC !important; border-left: 3px solid #F48FB1 !important; /* Brand Pink Left Tactical Edge Strip */ padding-left: 18px !important; /* Smooth rightward nudge offset */ } /* Active Highlight Tab Indicator */ .woocommerce-MyAccount-navigation li.is-active a { color: #0F172A !important; /* Deep Logo Charcoal */ background: #F1F5F9 !important; border-left: 3px solid #42A5F5 !important; /* Locked Active Blue Strip */ } /* 5. Main Workspace Control Panel (Right Side Dashboard Content) */ .woocommerce-MyAccount-content { flex: 1 !important; min-width: 320px !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; padding: 30px !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important; font-size: 14px !important; color: #475569 !important; line-height: 1.6 !important; } /* Clean formatting for account hello greetings lines */ .woocommerce-MyAccount-content p:first-of-type { font-size: 15px !important; color: #0F172A !important; font-weight: 700 !important; margin-top: 0 !important; margin-bottom: 16px !important; } /* Beautify links embedded inside dashboard context panels */ .woocommerce-MyAccount-content a { color: #42A5F5 !important; text-decoration: none !important; font-weight: 700 !important; transition: color 0.12s ease !important; } .woocommerce-MyAccount-content a:hover { color: #D01C6A !important; /* Pops to Pink on cursor focus */ } /* 6. Responsive Fallback Matrix for Mobile Devices */ @media (max-width: 768px) { .woocommerce-account .woocommerce { flex-direction: column !important; gap: 20px !important; } .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { width: 100% !important; flex: 1 1 100% !important; } } /* ========================================================================== TRANS-FIRST HIGH-CONTRAST PORTAL HOOKS (FIXED WRAPPER BYPASS) ========================================================================== */ /* 1. Force the breaking wrapper container box to be invisible */ .woocommerce-MyAccount-navigation { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* 2. Style the actual Inner Unordered List (ul) as your nav dropdown card */ .woocommerce-MyAccount-navigation ul { background-color: #ffffff !important; border: 1px solid #0f172a !important; /* Signature Deep Charcoal Outline Border */ border-radius: 6px !important; /* Sharp 6px corners matching dropdown menus */ box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05) !important; padding: 8px 0 !important; /* Balanced vertical menu clearance padding */ margin: 0 !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 0 !important; /* Stack links flush exactly like a dropdown list */ overflow: hidden !important; /* Forcefully clips the pink indicators inside the 6px boundary */ } /* 3. Style the Right Sidebar Content Sheet to match your dropdown style framework */ .woocommerce-MyAccount-content { background-color: #ffffff !important; border: 1px solid #0f172a !important; /* Signature Deep Charcoal Outline Border */ border-radius: 6px !important; /* Sharp 6px corners matching dropdown menus */ box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05) !important; padding: 30px !important; } /* 4. Format tab links into crisp bold items matching your header nav paths */ .woocommerce-MyAccount-navigation ul li a { display: flex !important; align-items: center !important; width: 100% !important; padding: 10px 16px !important; color: #0f172a !important; /* Signature Clear Deep Logo Charcoal Text */ font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; /* Forces bold weight while keeping everything else original */ text-decoration: none !important; box-sizing: border-box !important; background: transparent !important; background-color: transparent !important; border-radius: 0px !important; /* Strips out rounded button geometry entirely */ border-left: 3px solid transparent !important; /* Hidden default side accent channel */ transition: color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease !important; } /* ========================================================================== STRICT MOBILE-ONLY VIEWPORT RESPONSIVITY CORE (PHONE BREAKPOINT) ========================================================================== */ @media screen and (max-width: 480px) { /* 1. Dissolve side-by-side columns into a 100% full-width layout vertical stack */ .woocommerce-account .woocommerce { display: flex !important; flex-direction: column !important; gap: 20px !important; width: 100% !important; } /* 2. Force the navigation container box to expand fluidly across screen width */ .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } /* Specific mobile override to force elements out of the 260px trap */ @media screen and (max-width: 480px) { html body.woocommerce-account div.woocommerce nav.woocommerce-MyAccount-navigation, html body.woocommerce-account .woocommerce-MyAccount-navigation { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; float: none !important; } html body.woocommerce-account div.woocommerce div.woocommerce-MyAccount-content, html body.woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } /* Real Mobile Fix - Force Float Collapse */ @media screen and (max-width: 768px) { /* 1. Turn off floats and force both boxes to take up the full screen width */ nav.woocommerce-MyAccount-navigation, div.woocommerce-MyAccount-content { float: none !important; width: 100% !important; max-width: 100% !important; display: block !important; clear: both !important; margin-left: 0 !important; margin-right: 0 !important; } /* 2. Give the boxes a clean breathing gap when they stack on top of each other */ nav.woocommerce-MyAccount-navigation { margin-bottom: 24px !important; } } /* ========================================================================== THE SILVER BULLET: INLINE STYLE ATTRIBUTE OVERRIDE MATRIX ========================================================================== */ @media screen and (max-width: 768px) { /* 1. Smash the inline style width attribute on the left menu container */ html body.woocommerce-account nav.woocommerce-MyAccount-navigation[style], html body.woocommerce-account .woocommerce-MyAccount-navigation[style] { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; float: none !important; display: block !important; clear: both !important; margin: 0 0 24px 0 !important; } /* 2. Smash the inline style width attribute on the right content panel */ html body.woocommerce-account div.woocommerce-MyAccount-content[style], html body.woocommerce-account .woocommerce-MyAccount-content[style] { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; float: none !important; display: block !important; clear: both !important; margin: 0 !important; } } /* ========================================================================== THE UNBREAKABLE RESPONSIVE MATRIX: ELEMENT DISPLACEMENT OVERRIDE ========================================================================== */ @media screen and (max-width: 768px) { /* 1. Dissolve the row flex layout container completely */ html body.woocommerce-account div.woocommerce, html body.woocommerce-account .woocommerce { display: block !important; /* Changes from flex to block layout */ width: 100% !important; max-width: 100% !important; } /* 2. Break the 264px text block width cage on the left navigation */ html body.woocommerce-account nav.woocommerce-MyAccount-navigation, html body.woocommerce-account .woocommerce-MyAccount-navigation, html body.woocommerce-account .woocommerce-MyAccount-navigation[style] { display: block !important; float: none !important; clear: both !important; width: 100% !important; min-width: 100% !important; /* Forces it to explode past the 264px cage */ max-width: 100% !important; flex: none !important; /* Destroys the rigid flex-basis engine */ margin: 0 0 24px 0 !important; } /* 3. Break the companion cage on the right content panel workspace */ html body.woocommerce-account div.woocommerce-MyAccount-content, html body.woocommerce-account .woocommerce-MyAccount-content, html body.woocommerce-account .woocommerce-MyAccount-content[style] { display: block !important; float: none !important; clear: both !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex: none !important; margin: 0 !important; } } /* ========================================================================== MOBILE BUTTON RESCUE ENGINE (PREVENTS SQUISHING & CLIPPING) ========================================================================== */ @media screen and (max-width: 768px) { /* 1. Target the vendor dashboard link by all its active class arrays */ html body.woocommerce-account .woocommerce-MyAccount-content a.dokan-btn.vendor-dashboard, html body.woocommerce-account .woocommerce-MyAccount-content .dokan-btn, .vendor-dashboard { display: block !important; /* Changes from a rigid inline-flex to a natural block row */ width: 100% !important; /* Expands button to fill card width seamlessly */ max-width: 100% !important; text-align: center !important; /* Centers the text inside the fresh button block dimensions */ padding: 12px 16px !important; /* Adds an even, healthy touch target cushion area */ font-size: 14px !important; /* Sizes text cleanly for small viewports */ white-space: normal !important; /* Allows text to wrap comfortably instead of getting crushed */ word-break: break-word !important; height: auto !important; /* Lets button height expand naturally to fit its text */ line-height: 1.4 !important; } } /* ========================================================================== TRANS-FIRST CORE BRAND COLOR RE-ALIGNMENT: HOVER HIGHLIGHT SYSTEM ========================================================================== */ /* 1. Swap out the pink indicator bar on the left menu links for your clean Brand Blue */ .woocommerce-MyAccount-navigation ul li a:hover { color: #42a5f5 !important; /* Keeps text color snapped to active Brand Blue */ border-left: 3px solid #42a5f5 !important; /* Replaces tactical Brand Pink bar with your signature Brand Blue */ padding-left: 13px !important; /* Maintains the smooth rightward nudge offset */ } /* ========================================================================== MOBILE EXPANSION & TOTAL PINK SCRUB OVERRIDE ========================================================================== */ @media screen and (max-width: 768px) { /* 1. Total Pink Scrub: Lock both hover and active states to solid blue */ .woocommerce-MyAccount-navigation ul li a:hover, .woocommerce-MyAccount-navigation ul li.is-active a { color: #42a5f5 !important; border-left: 3px solid #42a5f5 !important; /* Replaces pink entirely with your Brand Blue */ background: transparent !important; background-color: transparent !important; } /* 2. Explode box width constraints to stretch the layout wide */ html body.woocommerce-account nav.woocommerce-MyAccount-navigation, html body.woocommerce-account div.woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { width: 95% !important; /* Stretches container blocks outward */ max-width: 95% !important; min-width: 95% !important; margin-left: auto !important; /* Centers the wider boxes perfectly on screen */ margin-right: auto !important; box-sizing: border-box !important; } } /* ========================================================================== SITE-WIDE RESPONSIVE HEADER CROSS-GRID CORRECTION (TABLET & MOBILE) ========================================================================== */ /* Target Astra theme's main mobile and tablet header element containers globally */ .ast-mobile-header-wrap .ast-mobile-header, .main-header-bar, header.site-header { border-bottom: 1px solid #0f172a !important; /* Signature Deep Charcoal Outline Line */ box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02) !important; /* Soft bottom layout drop shadow */ } /* Ensure any secondary theme bar wrapper line stays hidden to keep a singular clean grid edge */ .ast-mobile-header-wrap { border-bottom: none !important; } /* ========================================================================== GLOBAL ASTA SITE HEADER RESPONSIVE BORDER INJECTION ========================================================================== */ /* Target the absolute outermost row layers of the desktop and responsive mobile builders */ .ast-main-header-wrap, .main-header-bar-wrap, div[class*="ast-main-header-wrap"], header[id="masthead"] { border-bottom: 1px solid #0f172a !important; /* Signature Deep Charcoal Outline Line */ box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02) !important; } /* Clear any interior margin clipping that could cut off the line edge rendering */ .site-header, .ast-mobile-header-wrap { border-bottom: none !important; } /** * 6. GLOBAL BRAND TYPOGRAPHY ARCHITECTURE (HEADER & FOOTER TITLE TEXT) * Strips default sans-serif rendering and forces the premium Fraunces Serif * layout exclusively onto the "Trans-First" brand title strings across the site. */ /* 6a. Top Navigation Header Title */ .site-branding .site-title a, .site-header .site-branding .site-title a, /* 6b. Bottom Widget Footer Section Titles */ .site-footer .footer-widget-area .ast-builder-grid-row > div:first-child h3, .site-footer .footer-widget-area .site-footer-section:first-child h3, [class*="footer-widget-2"] h3 { font-family: 'Fraunces', Georgia, serif !important; font-style: normal !important; font-weight: 900 !important; font-size: 34px !important; letter-spacing: -0.02em !important; text-transform: none !important; /* Prevents Astra from forcing default header caps */ } /* ========================================================================== ASTRA HEADER: SITE BRAND TITLE BRAND BLUE HOVER TRANSITION ========================================================================== */ /* 1. Force the brand text title to smoothly fade to blue on hover */ .site-branding .site-title a:hover, .site-title-wrap .site-title a:hover, .ast-site-identity .site-title a:hover { color: #2290FF !important; transition: color 0.2s ease-in-out !important; } /* 2. Base state style rule to make sure it also fades smoothly when leaving the link */ .site-branding .site-title a, .site-title-wrap .site-title a, .ast-site-identity .site-title a { transition: color 0.2s ease-in-out !important; } /* ========================================================================== CHECKOUT PAGE: GLOBAL INTER TYPOGRAPHY FORCE UPGRADE ========================================================================== */ /* 1. Force Inter across all core text structures, headers, and textareas */ .wp-block-woocommerce-checkout, .wc-block-checkout, .wc-block-components-title, .wc-block-components-checkout-step__heading, .wc-block-components-checkout-step__title, .wc-block-components-title textarea, h1[class*="wc-block"], h2[class*="wc-block"], h3[class*="wc-block"], p[class*="wc-block"], span[class*="wc-block"] { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; } /* 2. Standardize form input labels, fields, select boxes, and placeholders */ .wc-block-components-text-input input, .wc-block-components-text-input label, .wc-block-components-combobox input, .wc-block-components-form input, .wc-block-components-form textarea, .wc-block-components-form select, .wc-block-components-radio-control__label, .wc-block-components-checkbox-control__label { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; } /* 3. Handle the order summary sidebar column elements (Cart item titles, prices, fees) */ .wc-block-components-sidebar, .wc-block-components-order-summary, .wc-block-components-product-name, .wc-block-components-totals-item, .wc-block-components-totals-item__label, .wc-block-components-totals-item__value { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; } /* ========================================================================== CHECKOUT PAGE: FULL WIDTH PLACE ORDER BUTTON UPGRADE ========================================================================== */ /* 1. Apply primary brand blue styling and force full container layout expansion */ .wc-block-components-checkout-place-order-button, button[class*="place-order-button"] { background-color: #3b82f6 !important; color: #ffffff !important; font-family: 'Inter', system-ui, -apple-system, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; padding: 16px 36px !important; border-radius: 9999px !important; border: none !important; cursor: pointer !important; display: flex !important; /* Switched to flex for total fill control */ align-items: center !important; justify-content: center !important; width: 100% !important; /* Forces the button to stretch 100% wide */ max-width: 100% !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important; transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out !important; box-sizing: border-box !important; } /* 2. Premium Charcoal hover state behavior matching your brand spec */ .wc-block-components-checkout-place-order-button:hover, button[class*="place-order-button"]:hover { background-color: #0f172a !important; color: #ffffff !important; } /* 3. Ensure the inner layout text properties are centered and clean */ .wc-block-components-checkout-place-order-button__text, .wc-block-components-checkout-place-order-button_text, .wc-block-components-checkout-place-order-button div { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; color: #ffffff !important; text-transform: none !important; width: 100% !important; text-align: center !important; } /* ========================================================================== MOBILE ONLY: FRAMING FIX FOR MAKEUP LANDSCAPE IMAGE (BELOW 600px) ========================================================================== */ @media (max-width: 599px) { /* Shifts the horizontal lens position to center on her face on mobile viewports */ div.saas-grid-container div.saas-grid-row div.saas-card-cell div.saas-img-wrapper img[alt*="Makeup"] { object-position: 75% 20% !important; /* Moves the camera lens slightly to the left */ transform: scale(1) !important; /* Prevents any container stretching */ } } /* ========================================================================== 1. GLOBAL GRID IMAGE HOOKS (ALL SCREENS) ========================================================================== */ div.saas-grid-container div.saas-img-wrapper { width: 100% !important; max-height: 800px !important; overflow: hidden !important; display: block !important; border-radius: 8px !important; /* Forces perfect rounded bottom corners globally */ } div.saas-grid-container div.saas-img-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ========================================================================== 2. TABLET ONLY CONFIGURATION (600px to 1024px viewport) ========================================================================== */ @media (min-width: 600px) and (max-width: 1024px) { /* Forces the balanced 2-column layout row */ .saas-grid-row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; width: 100% !important; margin-bottom: 24px !important; } /* FIXED: Tablet images are now vertically longer to look premium */ div.saas-grid-container div.saas-img-wrapper { height: 480px !important; /* <-- CHANGE THIS ONLY to adjust your tablet height format */ } div.saas-grid-container div.saas-img-wrapper img { object-position: center 30% !important; } } /* ========================================================================== 3. DESKTOP ONLY CONFIGURATION (1025px viewport and up) ========================================================================== */ @media (min-width: 1025px) { /* Keeps your desktop views tightly bounded in landscape rectangles */ div.saas-grid-container div.saas-img-wrapper { height: 300px !important; /* <-- CHANGE THIS ONLY to adjust your desktop height format */ } div.saas-grid-container div.saas-img-wrapper img { object-position: center 25% !important; } } /* ========================================================================== TRANS-FIRST CODES: UNIFIED FIXED REVISIT CONSET BUTTON NUDGE ========================================================================== */ /* Targets the absolute container wrapper to float the layout cleanly */ div.cky-btn-revisit-wrapper { left: 24px !important; /* Pulls the layout framework away from the screen edge */ bottom: 24px !important; /* Raises it up cleanly from the bottom bar */ } /* ========================================================================== TRANS-FIRST CODES: UNIFIED FIXED BANNER OVERLAY NUDGE ========================================================================== */ /* Moves the active cookie banner popup away from the bottom-left window corner */ div.cky-consent-container { left: 24px !important; /* Pulls it away from the left screen edge */ bottom: 24px !important; /* Raises it up from the bottom edge */ } /* ========================================================================== TRANS-FIRST: COOKIE YES BUTTON HOVER COLOR STATE SYNCHRONIZATION ========================================================================== */ /* Force all cookie buttons to match your site's dark charcoal hover block */ .cky-consent-container .cky-btn-customize:hover, .cky-consent-container .cky-btn-reject:hover, .cky-consent-container .cky-btn-accept:hover, button.cky-btn-customize:hover, button.cky-btn-reject:hover, button.cky-btn-accept:hover { background-color: #0f172a !important; /* Perfect matching dark slate/charcoal */ border-color: #0f172a !important; color: #ffffff !important; opacity: 1 !important; transition: background-color 0.2s ease-in-out !important; } /* ========================================================================== SUPREME OVERRIDE: FIXED PREFERENCES MODAL BUTTON COLOR BALANCING ========================================================================== */ /* 1. NORMAL STATE: Forces the button to look like your true brand blue */ #ckyPreferenceCenter div.cky-prefrence-btn-wrapper button.cky-btn-preferences { background-color: #42A5F5 !important; /* FIXED: Updated to your exact brand blue */ border-color: #42A5F5 !important; /* Symmetrically aligns the border line color */ color: #ffffff !important; display: inline-block !important; opacity: 1 !important; } /* 2. HOVER STATE: Kept exactly as it was to snap into your dark charcoal */ #ckyPreferenceCenter div.cky-prefrence-btn-wrapper button.cky-btn-preferences:hover { background-color: #0f172a !important; /* Your exact matching website charcoal */ border-color: #0f172a !important; color: #ffffff !important; } /* ========================================================================== TRANS-FIRST CODES: ASTRA SCROLL TO TOP HOVER BALANCING ========================================================================= */ /* Forces the floating scroll-up arrow button into your brand charcoal on hover */ #ast-scroll-top:hover { background-color: #0f172a !important; /* Perfect matching website charcoal */ border-color: #0f172a !important; /* Removes any residual theme borders */ color: #ffffff !important; /* Keeps the white layout arrow highly visible */ opacity: 1 !important; /* Prevents any native theme fade-out effects */ } /* Fixes any internal icon vector coloring on hover if needed */ #ast-scroll-top:hover .ast-icon svg { fill: #ffffff !important; } form { max-width: 800px !important; /* Matches your layout width perfectly */ margin: 0 auto !important; /* Centers the form on the page */ padding: 0 24px !important; /* Restores the missing left and right padding */ box-sizing: border-box !important; width: 100% !important; /* Keeps it responsive on smaller screens */ } /* Adjusts padding for mobile devices so it doesn't hug the edges */ @media (max-width: 480px) { form { padding: 0 16px !important; } } /* Adds a physical cushion directly underneath the buttons */ .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button, .astra-shop-summary-wrap a.button { margin-bottom: 30px !important; /* Pushes the next row's image down safely */ display: inline-flex !important; /* Ensures margin settings honor layout flow */ } /* ========================================== TRANS-FIRST PREMIUM SAAS MOBILE MENU ========================================== */ /* Targets the step card layout rows on mobile viewports */ @media (max-width: 768px) { section > div[style*="background: #ffffff"] { padding: 24px 20px !important; /* Adds clean internal padding around the number and text */ box-sizing: border-box !important; } } /* 1. FIXED: SOLID WHITE CONTAINER BACKGROUND (PREVENTS GREY BLEED ON ZOOM) */ .ast-header-break-point .main-header-bar-navigation, .ast-header-break-point .main-header-bar-navigation .main-header-menu, .ast-mobile-popup-inner, .ast-mobile-popup-wrapper { background-color: #ffffff !important; /* 🌟 SWAPPED TO SOLID WHITE */ background: #ffffff !important; /* 🌟 SWAPPED TO SOLID WHITE */ backdrop-filter: none !important; /* 🛑 KILLS MUDDY GREY BLUR EFFECT */ -webkit-backdrop-filter: none !important; border-bottom: 1px solid #e2e8f0 !important; /* Clean divider hairline */ box-shadow: none !important; /* 🛑 STRIPS EXTRA GRADIENT SHADOW EDGES */ padding-top: 24px !important; padding-bottom: 24px !important; } /* 2. FORCE TEXT LINKS TO SIGNATURE DARK CHARCOAL WITH GOOD TOUCH SPACING */ .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-item a, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu a, .ast-mobile-popup-content .ast-builder-menu-mobile a { color: #0F172A !important; /* Your crisp dark charcoal */ font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; padding: 12px 20px !important; /* Easy target to press on touchscreens */ display: block !important; transition: all 0.2s ease-in-out !important; /* Smooth animation engine */ } /* ========================================== MARKETPLACE DESKTOP GAP COMPRESSION ========================================== */ /* 1. Reset dynamic template container elements and clear excessive whitespace */ .archive .site-content, .archive #primary, .archive main, .dokan-shared-store-wrapper, div.woocommerce, .woocommerce-page, .woocommerce-products-header + .products, main.site-main ul.products, div.woocommerce ul.products { margin-top: 0 !important; padding-top: 0 !important; } /* 2. Tighten meta result text parameters and sorting box alignments */ .woocommerce-result-count, .woocommerce-ordering { margin-top: 0 !important; margin-bottom: 24px !important; } /* 3. Pull shop rows up into a crisp layout rhythm right beneath the pink line */ .archive .products-theme-wrapper, ul.products { margin-top: -5px !important; } /* 4. Shield the custom HTML brand indicator from bloating margins */ div[style*="background-color: #F48FB1"], div[style*="background: #F48FB1"] { margin-bottom: 20px !important; } /* ========================================== DESKTOP GRID CONTENT & BUTTON ALIGNMENT ========================================== */ @media (min-width: 601px) { /* 1. Force the product container cards to equal height columns */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; height: 100% !important; } /* 2. Dissolve links and stretch Astra containers to fill 100% card height */ ul.products li.product a.woocommerce-LoopProduct-link { display: contents !important; } .astra-shop-summary-wrap { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; flex-grow: 1 !important; height: 100% !important; } /* 3. Keep text spacing tight and vertically aligned */ ul.products li.product span.ast-woo-product-category { margin-bottom: 4px !important; display: block !important; } /* 4. Force titles to take up identical space (handles 1-3 lines smoothly) */ ul.products li.product .woocommerce-loop-product__title { margin-bottom: 8px !important; line-height: 1.4 !important; min-height: 68px !important; /* Squares title bounding box row across all items */ display: block !important; } /* 5. Force push price elements to create a uniform vertical gap */ ul.products li.product .price { margin-top: auto !important; /* Automatically drives pricing layout rows to base horizon */ margin-bottom: 20px !important; /* Fixed padding margin above button */ display: block !important; } /* 6. Lock all button variations firmly on a straight horizontal baseline line */ ul.products li.product .button, ul.products li.product a.button.product_type_simple { margin-top: auto !important; /* Forces the button down to the floor */ display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; } } /* TARGETED PLUGIN OVERRIDES - BRINGING DROPDOWN BACK ON SCREEN */ #dokan-store-listing-filter-wrap .right { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; } #stores_orderby { max-width: 140px !important; /* Forces the box to clip precisely within the mobile canvas view */ width: 100% !important; box-sizing: border-box !important; } @media (max-width: 375px) { #dokan-store-listing-filter-wrap .right .item #stores_orderby { padding: 8px 12px !important; /* Overrides the plugin's breaking layout properties */ margin: 0 !important; } } /* FORCE EXACT ID SPECIFICITY OVERRIDES FOR THE DOKAN NATIVE BUTTONS */ #dokan-store-listing-filter-form-wrap .apply-filter #cancel-filter-btn { background-color: #F48FB1 !important; color: #ffffff !important; padding: 12px 32px !important; border-radius: 9999px !important; font-size: 15.5px !important; font-weight: 600 !important; border: none !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } #dokan-store-listing-filter-form-wrap .apply-filter #apply-filter-btn { background-color: #42A5F5 !important; color: #ffffff !important; padding: 12px 32px !important; border-radius: 9999px !important; font-size: 15.5px !important; font-weight: 600 !important; border: none !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* HOVER TRANSITIONS TO BRAND CHARCOAL WITH ZERO SHADOWS */ #dokan-store-listing-filter-form-wrap .apply-filter #cancel-filter-btn:hover, #dokan-store-listing-filter-form-wrap .apply-filter #apply-filter-btn:hover { background-color: #1a2536 !important; color: #ffffff !important; box-shadow: none !important; } /************************************************************ * 1. DOKAN VENDOR LAYOUT: BLUE HOVER FILTER BUTTON ************************************************************/ .dokan-store-list-filter-wrap button.dokan-store-list-filter-button, button.dokan-store-list-filter-button { font-family: 'Inter', sans-serif !important; background-color: #55b0fb !important; color: #ffffff !important; border: none !important; border-radius: 50px !important; padding: 10px 22px 10px 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } /************************************************************ * 2. TRANS-FIRST: MULTI-VENDOR EARNINGS CALCULATOR ENGINE ************************************************************/ .tf-calc-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; border-radius: 12px !important; padding: 28px 24px !important; max-width: 450px !important; margin: 2rem auto !important; font-family: 'Inter', sans-serif !important; box-sizing: border-box !important; text-align: left !important; } .tf-calc-card h3 { color: #1E293B !important; font-size: 1.3rem !important; font-weight: 700 !important; margin: 0 0 6px 0 !important; } .tf-calc-sub { color: #64748B !important; font-size: 0.9rem !important; line-height: 1.4 !important; margin: 0 0 20px 0 !important; } .tf-input-wrapper { position: relative !important; display: flex !important; align-items: center !important; margin-bottom: 24px !important; } .tf-currency { position: absolute !important; left: 16px !important; font-size: 1.25rem !important; font-weight: 600 !important; color: #94A3B8 !important; } #tfPriceInput { width: 100% !important; padding: 12px 12px 12px 36px !important; font-size: 1.3rem !important; font-weight: 700 !important; color: #1E293B !important; border: 2px solid #E2E8F0 !important; border-radius: 8px !important; outline: none !important; font-family: 'Inter', sans-serif !important; box-sizing: border-box !important; background: #F8FAFC !important; } #tfPriceInput:focus { border-color: #42A5F5 !important; background: #FFFFFF !important; } .tf-results-grid { display: flex !important; gap: 14px !important; margin-bottom: 24px !important; } .tf-res-box { flex: 1 !important; border: 1px solid #E2E8F0 !important; background: #F8FAFC !important; padding: 16px 14px !important; border-radius: 8px !important; } .tf-tag-pink { font-size: 0.65rem !important; font-weight: 800 !important; text-transform: uppercase !important; color: #FFFFFF !important; background: #F48FB1 !important; padding: 2px 6px !important; border-radius: 4px !important; letter-spacing: 0.05em !important; } .tf-tag-blue { font-size: 0.65rem !important; font-weight: 800 !important; text-transform: uppercase !important; color: #FFFFFF !important; background: #42A5F5 !important; padding: 2px 6px !important; border-radius: 4px !important; letter-spacing: 0.05em !important; } .tf-stat-label { font-size: 0.75rem !important; color: #64748B !important; margin-top: 10px !important; font-weight: 600 !important; } .tf-amount { font-size: 1.6rem !important; font-weight: 800 !important; margin-top: 4px !important; } .tf-pink-text { color: #D01C6A !important; } .tf-blue-text { color: #1E88E5 !important; } .tf-customer-invoice { border-top: 1px solid #E2E8F0 !important; padding-top: 16px !important; } .tf-customer-invoice h4 { font-size: 0.85rem !important; color: #475569 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin: 0 0 12px 0 !important; font-weight: 700 !important; } .tf-invoice-line { display: flex !important; justify-content: space-between !important; font-size: 0.85rem !important; color: #64748B !important; margin-bottom: 6px !important; } .tf-invoice-line strong { color: #334155 !important; font-weight: 600 !important; } .tf-total-line { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px dashed #E2E8F0 !important; font-size: 0.95rem !important; color: #1E293B !important; } .tf-total-line strong { color: #10B981 !important; font-size: 1.1rem !important; font-weight: 800 !important; } /************************************************************ * TRANS-FIRST PREMIUM SAAS TEXT PATTERN ************************************************************/ /* The Uppercase Small Label (Eyebrow Tag) */ .tf-eyebrow { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #0f172a !important; /* Your exact charcoal */ margin-bottom: 12px !important; display: block !important; } /* The Heavy Main Title */ .tf-section-title { font-size: 32px !important; font-weight: 800 !important; color: #0f172a !important; tracking: -0.01em !important; line-height: 1.3 !important; margin-top: 0 !important; margin-bottom: 18px !important; } /************************************************************ * MAIN HERO BUTTON STYLING (BLUE TO CHARCOAL HOVER) ************************************************************/ button.tf-hero-button { font-family: 'Inter', sans-serif !important; background-color: #42A5F5 !important; /* Your signature blue */ color: #ffffff !important; font-size: 16px !important; font-weight: 600 !important; border: none !important; border-radius: 50px !important; /* Perfect Pill */ padding: 12px 30px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background-color 0.2s ease-in-out !important; text-transform: none !important; } /* Dynamic Hover Action State */ button.tf-hero-button:hover { background-color: #0f172a !important; /* Changes to your crisp charcoal on hover */ color: #ffffff !important; } /************************************************************ * HOMEPAGE HERO BUTTON FIX (REMOVES FILTER ICON & UNDERLINES) ************************************************************/ .home header a.dokan-store-list-filter-button { text-decoration: none !important; /* Wipes out the link underlines */ } .home header a.dokan-store-list-filter-button::before { display: none !important; /* Disables the filter slider icons completely */ } /************************************************************ * HOMEPAGE HERO: SET SHOP BUTTON TO PINK & CHARCOAL HOVER ************************************************************/ .home header a.dokan-store-list-filter-button[href*="page_id=7"] { background-color: #F48FB1 !important; /* Base Pink state */ } /* Explicit Hover Override */ .home header a.dokan-store-list-filter-button[href*="page_id=7"]:hover { background-color: #0f172a !important; /* Perfect Charcoal hover color */ box-shadow: none !important; /* Strips away the shadow effect */ } /************************************************************ * TRANS-FIRST MASTER PREMIUM BRAND LAYOUT ENGINE ************************************************************/ /* 1. Forces the entire page container to perfectly mimic your Home grid width constraints */ .page:not(.home) .entry-content, .page:not(.home) .site-main { max-width: 800px !important; margin: 40px auto 60px auto !important; padding: 0 20px !important; font-family: 'Inter', sans-serif !important; color: #475569 !important; line-height: 1.75 !important; box-sizing: border-box !important; } /* 2. Locks all main text page h1 titles back to your exact heavy Slate 900 Charcoal */ .page:not(.home) h1.entry-title, .page:not(.home) .entry-content h1 { font-size: 44px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; color: #0f172a !important; margin-bottom: 24px !important; } /* 3. Global Section Subheadings (H3) Editorial Authority */ .page:not(.home) .entry-content h3 { font-size: 26px !important; font-weight: 800 !important; color: #0f172a !important; margin: 40px 0 16px 0 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; } /* 4. Global Eyebrow Label Tag Classes */ .tf-global-eyebrow { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #0f172a !important; display: block !important; margin-bottom: 14px !important; } /************************************************************ * WOOCOMMERCE EYE ICON VERTICAL PIXEL COORD & SIZE ADJUST ************************************************************/ .woocommerce form .form-row span.password-input, p.woocommerce-form-row--last span.password-input, .woocommerce-account form .form-row span.password-input { position: relative !important; display: block !important; width: 100% !important; box-sizing: border-box !important; } .woocommerce form .show-password-input, .woocommerce form .show-password-input.display-password, .woocommerce form .show-password-input.hide-password, button.show-password-input, button.show-password-input.display-password, button.show-password-input.hide-password { position: absolute !important; /* 🛠ī¸ CHANGER CETTE VALEUR POUR LE REGLAGE VERTICAL (EX: 16px, 18px, 20px) */ top: 20px !important; transform: none !important; right: 16px !important; margin: 0 !important; padding: 0 !important; height: 28px !important; width: 28px !important; line-height: 1 !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; color: #0f172a !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* CARRIES THE LARGER SIZE ATTRIBUTE RULES */ button.show-password-input::before { font-size: 28px !important; /* Made the eye icon bigger */ line-height: 5 !important; display: block !important; margin: 0 !important; padding: 0 !important; } /************************************************************ * WOOCOMMERCE REGISTER: FIXED WIDE ROW SELECTION CHIPS ************************************************************/ /* Arrange options cleanly as wide stacked blocks with plenty of spacing */ .woocommerce-form-register .user-role { display: flex !important; flex-direction: column !important; gap: 12px !important; margin: 24px 0 !important; padding: 0 !important; border: none !important; width: 100% !important; box-sizing: border-box !important; } /* Transform labels into wide row selection chips */ .woocommerce-form-register .user-role label.radio { display: flex !important; align-items: center !important; justify-content: flex-start !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 16px 20px !important; font-size: 15px !important; font-weight: 600 !important; color: #0f172a !important; cursor: pointer !important; transition: all 0.2s ease-in-out !important; font-family: 'Inter', sans-serif !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } /* Add custom padding to the hidden default browser circular radio dot */ .woocommerce-form-register .user-role label.radio input[type="radio"] { margin-right: 14px !important; width: 18px !important; height: 18px !important; cursor: pointer !important; accent-color: #42A5F5 !important; /* Forces browser dot to use your brand blue */ } /* Modern hover border accent */ .woocommerce-form-register .user-role label.radio:hover { border-color: #42A5F5 !important; background: #ffffff !important; } /* Active State: Instantly highlights the chosen role with your brand blue */ .woocommerce-form-register .user-role label.radio input[type="radio"]:checked + span, .woocommerce-form-register .user-role label.radio:has(input[type="radio"]:checked) { background-color: #e3f2fd !important; /* Gentle brand blue background tint */ border-color: #42A5F5 !important; color: #0f172a !important; } /* Clean up privacy policy text typography constraints */ .woocommerce-form-register p.privacy-policy-text, .woocommerce-form-register .woocommerce-privacy-policy-text { font-family: 'Inter', sans-serif !important; color: #64748b !important; font-size: 13.5px !important; line-height: 1.6 !important; margin: 20px 0 !important; } /* Premium Pill Shape Register CTA Submit Trigger Button */ .woocommerce-form-register button[type="submit"].woocommerce-Button, .woocommerce-form-register input[type="submit"] { background-color: #0f172a !important; /* Your Slate 900 charcoal */ color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; border: none !important; border-radius: 50px !important; padding: 14px 40px !important; cursor: pointer !important; display: inline-block !important; transition: background-color 0.2s ease-in-out !important; box-shadow: none !important; width: auto !important; height: auto !important; } /* ========================================================================== TF LAYOUT ENGINE: RESTORE CORE DIRECTORY TOGGLE ICON PHYSICS ========================================================================== */ /* Forces the grid and list view toggle containers to run their native font stacks */ #dokan-store-listing-filter-wrap .right .toggle-view span, #dokan-store-listing-filter-wrap .right .toggle-view i, #dokan-store-listing-filter-wrap .right .toggle-view .dashicons { font-family: "dashicons", "Font Awesome 5 Free", "ast-font-icons" !important; font-weight: 900 !important; font-style: normal !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-transform: none !important; speak: never !important; /* Cleans up any stray rogue custom border lines or blocks */ border: none !important; background: transparent !important; } /* Restores crisp size specifications so the grid map returns to normal */ #dokan-store-listing-filter-wrap .right .toggle-view span:before, #dokan-store-listing-filter-wrap .right .toggle-view .active:before { font-size: 18px !important; line-height: 1 !important; } /************************************************************ * WOOCOMMERCE REGISTER CTA BUTTON COLOR FIX ************************************************************/ /* Premium Pill Shape Register CTA Submit Trigger Button */ .woocommerce-form-register button[type="submit"].woocommerce-Button, .woocommerce-form-register input[type="submit"], .woocommerce-form-register .woocommerce-form-register__submit { background-color: #42A5F5 !important; /* Fixed: Your brand blue base */ color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; border: none !important; border-radius: 50px !important; padding: 12px 36px !important; cursor: pointer !important; display: inline-block !important; transition: background-color 0.2s ease-in-out !important; box-shadow: none !important; width: auto !important; height: auto !important; } /* Flip registration button over to premium charcoal on cursor hover */ .woocommerce-form-register button[type="submit"].woocommerce-Button:hover, .woocommerce-form-register input[type="submit"]:hover, .woocommerce-form-register .woocommerce-form-register__submit:hover { background-color: #0f172a !important; /* Fixed: Transitions cleanly to Charcoal */ color: #ffffff !important; } /************************************************************ * WOOCOMMERCE REGISTER CARD: DESCRIPTION TEXT SCALE DOWN ************************************************************/ /* Targets specifically the info paragraph text string under the register heading */ .woocommerce-form-register p:not([class]), .woocommerce-form-register .woocommerce-form-row + p { font-family: 'Inter', sans-serif !important; font-size: 14px !important; /* Shrunk down to look tidy and neat */ color: #64748b !important; /* Soft slate gray so it doesn't fight the labels */ line-height: 1.6 !important; margin-top: -8px !important; margin-bottom: 24px !important; } /* ========================================== TRANS-FIRST BLOG LOOPS OVERRIDE ========================================== */ /* 1. Force container max-width and center alignment */ .blog #primary, .archive #primary, .blog main, .archive main, .blog .site-content, .blog .post-loop-container { max-width: 800px !important; margin: 0 auto !important; padding: 60px 20px !important; font-family: 'Inter', sans-serif !important; } /* 2. Format individual post entry blocks */ .blog article, .archive article, .blog .post, .archive .post { margin-bottom: 50px !important; text-align: left !important; line-height: 1.75 !important; color: #475569 !important; } /* 3. Post category/eyebrow links */ .blog article .cat-links, .blog article .entry-category, .blog article .meta-category a { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #0f172a !important; text-decoration: none !important; } /* 4. Post Titles (Main Hook Style) */ .blog article h2, .blog article h2 a, .blog article .entry-title, .blog article .entry-title a { font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: #0f172a !important; text-decoration: none !important; margin: 8px 0 12px 0 !important; display: block !important; } /* 5. Post meta (Date, author line) */ .blog article .entry-meta, .blog article .post-meta, .blog article .entry-date { font-size: 14px !important; color: #64748b !important; font-weight: 500 !important; margin-bottom: 16px !important; } /* 6. Post summary/excerpt paragraph text */ .blog article p, .blog article .entry-summary, .blog article .entry-content p { font-size: 16px !important; line-height: 1.7 !important; color: #475569 !important; } /* 7. "Read More" links */ .blog article .more-link, .blog article .read-more { font-size: 14px !important; font-weight: 600 !important; color: #42A5F5 !important; text-decoration: none !important; display: inline-block !important; margin-top: 12px !important; } /* Force category links to match the main slate text layout */ .blog article .cat-links a, .blog article .entry-category a, .blog article .meta-category a, .blog article [class*="category"] a { color: #0f172a !important; } /* ========================================== TRANS-FIRST WIDE PREMIUM PRODUCT GRID ========================================== */ /* 1. EXPAND GRID TO A PREMIUM WIDE CANVAS (1200px instead of 800px) */ .woocommerce-page #primary, .woocommerce-page main, .archive.post-type-archive-product #primary, .archive.post-type-archive-product main { max-width: 1200px !important; margin: 0 auto !important; padding: 20px 20px 60px 20px !important; font-family: 'Inter', sans-serif !important; } /* 2. Format the layout wrapper text block details */ .woocommerce-page .woocommerce-result-count, .woocommerce-page .woocommerce-ordering { font-family: 'Inter', sans-serif !important; color: #475569 !important; font-size: 16px !important; } /* 3. Force loop item layout details to clean alignment rules */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { text-align: left !important; margin-bottom: 40px !important; } /* 4. Strip out link blue properties from category metadata tags */ .woocommerce ul.products li.product .meta-category, .woocommerce ul.products li.product .ast-loop-product-category, .woocommerce ul.products li.product [class*="category"], .woocommerce ul.products li.product [class*="category"] a { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #0f172a !important; /* Elegant slate tone */ opacity: 0.5; /* Muted subtext appearance */ display: block !important; margin-top: 12px !important; margin-bottom: 8px !important; text-decoration: none !important; } /* 5. Product Title Headers (Bold Slate Typography Elements) */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product h2, .woocommerce-page ul.products li.product h3, .woocommerce-page ul.products li.product h2 a, .woocommerce-page ul.products li.product h3 a { font-family: 'Inter', sans-serif !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.35 !important; color: #0f172a !important; margin: 0 0 8px 0 !important; text-decoration: none !important; min-height: 48px; /* Prevents button misalignment across grid entries */ } /* 6. Product Price Tag Typography Settings */ .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price .amount, .woocommerce-page .price .amount { font-family: 'Inter', sans-serif !important; color: #0f172a !important; font-weight: 700 !important; font-size: 16px !important; margin-bottom: 16px !important; display: block !important; } /* ========================================== TRANS-FIRST VENDOR DIRECTORY WIDE GRID ========================================== */ /* 1. Open up the Dokan directory canvas container to a premium width */ .dokan-store-listing #primary, .dokan-store-listing main, .dokan-store-list-wrapper { max-width: 1100px !important; margin: 0 auto !important; padding: 20px 20px 60px 20px !important; font-family: 'Inter', sans-serif !important; } /* 2. Fix typography rules inside the Filter and Sorting bars */ .dokan-store-list-wrapper .dokan-store-list-filter-wrap, .dokan-store-list-wrapper .dokan-filter-wrap { font-family: 'Inter', sans-serif !important; color: #475569 !important; } /* 3. Keep input fields and texts looking sharp and clean */ .dokan-store-list-wrapper input[type="search"], .dokan-store-list-wrapper select { font-family: 'Inter', sans-serif !important; border-radius: 8px !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; } /* ========================================== TRANS-FIRST SPECIFIC FAQ GAP OVERRIDE ========================================== */ /* Only pulls up the block if it directly follows the FAQ page template structures */ .faq-container { margin-top: -30px !important; padding-top: 0 !important; } /* Restricts the aggressive line-divider crush strictly to the FAQ template element */ .faq-container h3.faq-section-title { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 16px !important; } /* ========================================== TRANS-FIRST UNMOVABLE HORIZONTAL BASAL GRID ========================================== */ /* 1. Reset all competing outer layouts to absolute full-width baselines */ .site-content, #content, .ast-container, .site-main, #main, .entry-content, .woocommerce-container, .dokan-store-listing, #primary { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* 2. Force every raw block on every page to share an identical width and center point */ div[style*="max-width"], div.tf-global-page, .faq-container { max-width: 800px !important; /* Forces your text content canvas to be uniform on every tab */ width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* 3. Strip variable page margins from individual theme entry containers */ article, .type-page, .post { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } h1, h2, h3, h4, h5, h6, p { text-wrap: auto !important; } /* Section Header Styles - Modern Bold Minimal SaaS */ .faq-section-title { color: #0f172a !important; font-size: clamp(14px, 2.5vw, 16px) !important; /* Made larger and more obvious */ letter-spacing: 0.06em !important; /* Clean corporate tracking gap */ font-weight: 800 !important; /* Locked to your premium heavy weight */ text-transform: uppercase !important; margin-top: clamp(30px, 6vw, 45px) !important; /* Added breathing room above header */ margin-bottom: 24px !important; /* Controlled tight gap to the first item */ text-align: left !important; padding: 0 !important; display: block !important; } /* ========================================== TRANS-FIRST UNIVERSAL SINGLE POST CONTENT ========================================== */ .single-post main#main, .single-post article { max-width: 800px !important; margin: 0 auto !important; padding: 60px 20px !important; box-sizing: border-box !important; font-family: 'Inter', sans-serif !important; color: #475569 !important; line-height: 1.75 !important; text-align: left !important; } /* 1. SINGLE POST HERO HEADER FORMALITIES */ .single-post .entry-header { margin-bottom: 50px !important; display: block !important; width: 100% !important; } /* Category Tracker above Title */ .single-post .cat-links, .single-post .entry-header::before { content: "Latest Updates" !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #0f172a !important; display: block !important; margin-bottom: 14px !important; } /* Post Title */ .single-post .entry-title { font-size: 44px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; color: #0f172a !important; margin: 0 0 16px 0 !important; } /* 2. REFORMAT AUTHOR METADATA TO POLICY DATE STYLE */ .single-post .entry-meta { display: block !important; font-size: 14px !important; color: #64748b !important; margin-bottom: 24px !important; font-weight: 600 !important; border-bottom: 1px solid #e2e8f0 !important; padding-bottom: 45px !important; margin-top: 0 !important; } .single-post .entry-meta a, .single-post .byline, .single-post .posted-on { color: #64748b !important; text-decoration: none !important; } /* 3. HEADINGS INSIDE POST BODY LAYOUT */ .single-post .entry-content h2 { font-size: 32px !important; font-weight: 800 !important; color: #0f172a !important; margin: 40px 0 24px 0 !important; letter-spacing: -0.01em !important; } .single-post .entry-content h3 { font-size: 22px !important; font-weight: 800 !important; color: #0f172a !important; margin: 30px 0 12px 0 !important; } /* 4. POST BODY CONTENT TYPOGRAPHY AND LISTS */ .single-post .entry-content p { font-size: 16px !important; line-height: 1.75 !important; color: #475569 !important; margin: 0 0 24px 0 !important; } .single-post .entry-content strong { color: #0f172a !important; } .single-post .entry-content ul { padding-left: 20px !important; margin-bottom: 24px !important; } .single-post .entry-content li { font-size: 16px !important; line-height: 1.75 !important; color: #475569 !important; margin-bottom: 8px !important; } /* ========================================== TRANS-FIRST BRANDED COMMENT FORM & BUTTONS ========================================== */ /* 1. SECTION HEADERS AND TEXT STYLING */ #respond #reply-title { font-size: 32px !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.01em !important; margin-bottom: 20px !important; } #respond .comment-notes, #respond .logged-in-as { font-family: 'Inter', sans-serif !important; font-size: 14px !important; color: #475569 !important; line-height: 1.6 !important; margin-bottom: 24px !important; } #respond .logged-in-as a { color: #2196F3 !important; text-decoration: none !important; font-weight: 600 !important; } /* 🌟 ONLY CHANGE: SWAPPED HOVER COLOR TARGET TO BLUE */ #respond .logged-in-as a:hover { color: #2196F3 !important; } /* 2. TEXTAREA INPUT BOX FRAME REFORMAT */ #respond textarea#comment { width: 100% !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 20px !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; color: #0f172a !important; background-color: #ffffff !important; box-shadow: none !important; transition: border-color 0.2s ease !important; } #respond textarea#comment:focus { border-color: #2196F3 !important; outline: none !important; } /* 3. SUBMIT BUTTON PILL SHAPE FRAMEWORK */ #respond input#submit { display: inline-block !important; background-color: #2196F3 !important; /* Matches your pilot blue */ color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; padding: 14px 32px !important; border: none !important; border-radius: 50px !important; /* Forces the pill-shape */ cursor: pointer !important; box-shadow: none !important; text-transform: none !important; transition: background-color 0.25s ease, transform 0.1s ease !important; } /* 4. HOVER STATE TRANSITION TO NAVY BLOCK */ #respond input#submit:hover { background-color: #0f172a !important; /* Matches your hover navy image */ color: #ffffff !important; } #respond input#submit:active { transform: scale(0.98) !important; } /* ========================================================================== GLOBAL BRAND SHIELD COMPACTION MATRIX (SCALES ACROSS ALL ZOOMS) ========================================================================== */ /* 🌟 THE GLOBAL SHRINK: Smoothly steps down the shield footprint on all desktop & mobile layouts */ .site-branding img, .custom-logo-link img, .ast-site-identity img, .site-logo-img img { max-height: 42px !important; /* 🌟 THE LEVER: Adjust this lower (e.g. 34px) to make the shield even smaller */ width: auto !important; height: auto !important; display: inline-block !important; vertical-align: middle !important; } /* ========================================================================== GLOBAL PRIMARY CONTAINER EDGE STABILIZER (SPECIFICITY LOCK) ========================================================================== */ /* 🌟 THE SPECIFICITY CRUSHER: Overrides Astra's #masthead inline mobile padding lock */ .ast-header-break-point #masthead .ast-mobile-header-wrap, .ast-header-break-point #masthead .ast-primary-header-bar, #masthead .site-header-inner, #masthead .ast-builder-grid-row { padding-left: 0px !important; /* 🌟 THE ADJUSTER: Tweak this number up or down to align with desktop */ padding-right: 24px !important; /* Protects the blue hamburger button edge from screen clipping */ } /* ========================================================================== THE DEFENSE: DESTRÓI O PILL STRETCH E FORÇA O BURGER REDONDO NATÍVO ========================================================================== */ /* 1. FORCE THE ICON CONTAINER TO FLATTEN DIRECTLY UNDER BALANCED SQUARE VALUES */ .ast-mobile-header-wrap .menu-toggle, .ast-mobile-header-wrap .ast-button-wrap, .ast-mobile-menu-toggle-icon, .mobile-menu-toggle-icon, span.mobile-menu-toggle-icon { height: 32px !important; max-height: 32px !important; /* 🌟 THE FLATTENER CEILING */ width: 32px !important; max-width: 32px !important; min-height: 36px !important; min-width: 48px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; align-self: center !important; } /* 2. OVERRIDES THE GHOST HEIGHT STRETCH FROM ASTRA'S PSEUDO BACKGROUND LAYER */ .ast-mobile-header-wrap .menu-toggle::before, .ast-mobile-header-wrap .menu-toggle::after, .mobile-menu-toggle-icon::before { height: 32px !important; width: 32px !important; line-height: 32px !important; } /* ========================================================================== THE FINAL SHADOW SHIELD: PERMANENTLY BLOCKS THE GHOST PINK OUTLINES ========================================================================== */ /* 🌟 FORCES EVERYTHING TO REMAIN OUTLINE-FREE ACROSS ALL CUSTOMIZER SIZES */ .ast-header-break-point #masthead .ast-mobile-header-wrap, .ast-header-break-point #masthead .ast-primary-header-bar, .menu-toggle, .menu-toggle::before, .menu-toggle::after, .ast-button-wrap, .ast-mobile-menu-trigger-outline { box-shadow: none !important; /* Vaporizes the pink halo background rings instantly */ outline: none !important; /* Removes standard focus browser tracking borders */ background-image: none !important; /* Ensures no gradient shadow overlays can clip back in */ } /* ========================================================================== UNIFIED FIXED CURRENCY DROPDOWN HOVER & SELECTION ENGINE (TABLET/MOBILE) ========================================================================== */ @media screen and (max-width: 921px) { .tf-currency-dropdown-wrapper { position: relative !important; display: inline-block !important; } ul.tf-currency-sub-menu, #currencySaasPanel { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; width: 195px !important; background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 6px !important; margin-top: 12px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; z-index: 99999 !important; text-align: left !important; display: none !important; } .tf-currency-dropdown-wrapper:hover ul.tf-currency-sub-menu, .tf-currency-dropdown-wrapper:focus-within ul.tf-currency-sub-menu { display: block !important; } ul.tf-currency-sub-menu li a::after, #currencySaasPanel li a::after, ul.tf-currency-sub-menu li::after, #currencySaasPanel li::after, .tf-currency-dropdown-wrapper a::after { content: none !important; display: none !important; background: transparent !important; height: 0 !important; border: none !important; } ul.tf-currency-sub-menu li, #currencySaasPanel li { padding: 0 !important; margin: 0 !important; display: block !important; list-style: none !important; border: none !important; } ul.tf-currency-sub-menu li a, #currencySaasPanel li a { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; white-space: nowrap !important; width: 100% !important; padding: 8px 10px !important; border-radius: 6px !important; color: #0f172a !important; font-size: 13px !important; font-weight: 600 !important; font-family: 'Inter', sans-serif !important; text-decoration: none !important; border: none !important; user-select: none !important; } ul.tf-currency-sub-menu li a:hover, #currencySaasPanel li a:hover { background-color: #f8fafc !important; color: #2290FF !important; border: none !important; } .tf-curr-symbol { display: inline-block !important; flex-shrink: 0 !important; min-width: 28px !important; margin-right: 4px !important; color: #64748b !important; font-weight: 500 !important; } } /* ========================================================================== FORCE RADIUS ON STATIC IMAGES Enforces clipping mask on parent layers to prevent image corners from bleeding out ========================================================================== */ .woocommerce ul.products li.product .astra-shop-thumbnail-wrap, .woocommerce ul.products li.product .astra-shop-thumbnail-wrap a, .woocommerce ul.products li.product .astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link { overflow: hidden !important; border-radius: 12px !important; /* Locks the curve mask in place permanently */ } /* CONSTRAIN ONLY THE TOP ARCHIVE HEADER BLOCK */ .archive.post-type-archive-product .ast-archive-description { max-width: 800px !important; margin-left: 0 !important; /* Keeps it left-aligned like your onboarding page */ margin-right: auto !important; width: 100% !important; box-sizing: border-box !important; } /* ENSURE TEXT INSIDE DOES NOT STRETCH */ .archive.post-type-archive-product .ast-archive-description p { max-width: 100% !important; } .archive.post-type-archive-product .ast-archive-description, .woocommerce-page .ast-archive-description { max-width: 800px !important; margin-left: 0 !important; margin-right: auto !important; width: 100% !important; } /* Target Astra's specific menu link classes */ .main-header-bar-navigation .menu-item .menu-link:hover { color: #2290FF !important; } /* Base state transition so it fades smoothly when leaving the link */ .main-header-bar-navigation .menu-item .menu-link { transition: color 0.2s ease-in-out !important; } /* Keeps text content blocks beautifully readable and centered inside that uniform frame */ .trans-first-custom-page h1, .trans-first-custom-page p { max-width: 800px; margin-left: 0; margin-right: auto; } /* ========================================================================== TRANS-FIRST PRODUCT CARD GRID HARMONIZER (FORCES UNIFORM ALIGNMENT) ========================================================================== */ .woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 64px !important; display: flex !important; align-items: flex-start !important; margin-top: 10px !important; /* Added clear space below the category label */ margin-bottom: 9px !important; /* Keeping your custom bottom margin tweak */ } /* PRISM CUSTOM INJECTED ELEMENT BOUNDARIES */ .prism-injected-desc { min-height: 75px !important; margin-bottom: 16px !important; overflow: hidden !important; } /* ========================================================================== TRANS-FIRST SHOP HEADER SORTING ALIGNMENT HARMONIZER ========================================================================== */ .archive.woocommerce .ast-woocommerce-container, .woocommerce-products-header + .ast-woocommerce-container { display: block !important; width: 100% !important; /* FORCE A BRAND NEW CLEAN LINE TO RUN ACCROSS THE TRUE CARD EDGES */ border-top: 1px solid #e2e8f0 !important; padding-top: 25px !important; margin-top: 15px !important; } /* WIPE OUT ASTRA'S DEFAULT TRAPPED DIVIDER LINE SO IT STOPS CLIPPING */ .woocommerce-products-header hr, .woocommerce-products-header::after, .ast-woocommerce-container::before { display: none !important; } /* Force both items onto a single vertical horizon line */ .archive.woocommerce .woocommerce-result-count { margin: 12px 0 0 0 !important; float: left !important; } .archive.woocommerce .woocommerce-ordering { margin: 0 !important; float: right !important; } /* Clearfix Engine: Forces parent box to stay open around floated elements */ .archive.woocommerce .ast-woocommerce-container::after, .woocommerce-products-header + .ast-woocommerce-container::after { content: "" !important; display: table !important; clear: both !important; } /* FORCE THE PRODUCT GRID ITSELF TO PUSH DOWN AND CREATE CUSHION */ main#main ul.products, main#main .products.columns-4, .ast-woocommerce-container + ul.products { margin-top: 40px !important; /* Forces the cards down away from the dropdown */ padding-top: 10px !important; clear: both !important; } /* Ensure individual product cards don't float upward */ main#main ul.products li.product { margin-top: 15px !important; } /* Add custom padding and border radii to the dropdown itself */ .woocommerce-ordering select { padding: 10px 35px 10px 15px !important; border-radius: 6px !important; border: 1px solid #e2e8f0 !important; background-color: #ffffff !important; } /* ========================================================================== TRANS-FIRST UPDATE PROTECTION SHIELDS (BOTTOM OVERRIDES) ========================================================================== */ /* 1. Global Inter Typography Force */ body, input, button, select, textarea, p, span, h1, h2, h3, h4, h5, h6, .woocommerce-page *, .dokan-dashboard-page * { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; } /* 2. Global Primary Action Button Theme */ body button, body .button, body input[type="submit"], body .wp-block-button__link, body .btn { background-color: #3b82f6 !important; color: #ffffff !important; font-weight: 600 !important; border-radius: 9999px !important; border: none !important; cursor: pointer !important; transition: background-color 0.2s ease-in-out !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important; } body button:hover, body .button:hover, body input[type="submit"]:hover, body .wp-block-button__link:hover, body .btn:hover { background-color: #090d16 !important; /* Premium Ultra-Dark Midnight Charcoal */ color: #ffffff !important; /* Clean White Text Locked In */ } /* 3. Global Container Layout Harmonizer */ .woocommerce-shop .site-main, .woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-account .site-main { max-width: 1200px !important; margin: 0 auto !important; padding: 20px !important; } /* ========================================================================== TABLET ONLY: PRODUCT CARD ALIGNMENT & DROPDOWN HARMONIZER (600px to 1024px) ========================================================================== */ @media (min-width: 600px) and (max-width: 1024px) { /* 1. Forces the product list into a rigid grid container row */ ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 24px !important; } /* 2. Turns each card into a vertical box that forces matching heights */ ul.products li.product { display: flex !important; flex-direction: column !important; height: 100% !important; margin: 0 !important; } /* 3. Restricts varying text snippets to a fixed footprint so they match */ ul.products li.product .ast-woo-shop-product-description, ul.products li.product p { height: 70px !important; /* Gives text a safe, uniform box height */ overflow: hidden !important; /* Clips off any long word leaks */ margin-bottom: 12px !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; /* Limits text to exactly 3 clean lines */ -webkit-box-orient: vertical !important; } /* 4. The Magnet Rule: Slams the button to the absolute bottom of the card */ ul.products li.product .button, ul.products li.product button, ul.products li.product a.add_to_cart_button { margin-top: auto !important; /* Forces all buttons to line up in a perfect horizontal line */ width: 100% !important; /* Expands button to fill the card neatly */ } /* 5. Breaks the side-by-side float layout between text and box */ .woocommerce-result-count, form.woocommerce-ordering { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; clear: both !important; } /* 5.5 CUSHION SHIELD: Pushes the result text down away from the search bar block */ .woocommerce-result-count { margin-top: 35px !important; } /* 6. Sets tight 10px bottom spacing right below the result text counter */ p.woocommerce-result-count { margin-bottom: 10px !important; padding-bottom: 0px !important; } /* 7. Forces the wrapper form block to expand fully across the screen track */ html body .woocommerce-ordering, .woocommerce-page .woocommerce-ordering, form.woocommerce-ordering { margin-bottom: 35px !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; display: block !important; float: none !important; } /* 8. Forces the inner select input box to fill up the whole width footprint */ html body .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select, .site-main .woocommerce-ordering select, select.orderby { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; min-height: 44px !important; padding: 10px 40px 10px 14px !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; background-color: #ffffff !important; box-sizing: border-box !important; } } /* ========================================================================== MOBILE ONLY: 1-COLUMN PRODUCT GRID RESCUE ENGINE (BELOW 599PX) ========================================================================== */ @media (max-width: 599px) { /* 1. Force the universal store container and rows to stack ONLY on mobile */ .woocommerce ul.products, ul.products, .ast-woocommerce-container, .site-content .ast-woocommerce-container ul.products { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; padding: 0 15px !important; gap: 0px !important; /* Space between different products */ } /* 2. Force the individual cards to behave like standard vertical boxes ONLY on mobile */ .woocommerce ul.products li.product, ul.products li.product, .site-content .ast-woocommerce-container ul.products li.product { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: auto !important; float: none !important; clear: both !important; margin: 0 0 30px 0 !important; padding: 0 !important; z-index: 9 !important; } /* 3. YELLOW GAP CORRECTION (MOBILE ONLY) */ .astra-shop-thumbnail-wrap, div.astra-shop-thumbnail-wrap, .woocommerce ul.products li.product .astra-shop-thumbnail-wrap { display: block !important; width: 100% !important; height: auto !important; max-height: max-content !important; margin-top: 0 !important; margin-bottom: -15px !important; /* Pulls text up under the photo */ padding-bottom: 0 !important; overflow: visible !important; } .astra-shop-summary-wrap, div.astra-shop-summary-wrap { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; position: relative !important; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; overflow: visible !important; } /* 4. BREAK ASTRA'S OVERSIZED HEIGHT OVERRIDES (MOBILE ONLY) */ ul.products li.product img, .astra-shop-thumbnail-wrap img, .woocommerce ul.products li.product .astra-shop-thumbnail-wrap a img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: cover !important; border-radius: 20px !important; margin-bottom: 0 !important; } /* 5. Typography spacing inside the summary box (MOBILE ONLY) */ .astra-shop-summary-wrap .ast-woo-product-category, .astra-shop-summary-wrap .ast-shop-product-categories { display: block !important; margin-top: 0 !important; margin-bottom: 12px !important; } .astra-shop-summary-wrap .ast-loop-product__link, .astra-shop-summary-wrap h2, .astra-shop-summary-wrap h2.woocommerce-loop-product__title { display: block !important; margin-bottom: 16px !important; } .astra-shop-summary-wrap .ast-woo-shop-product-description, .astra-shop-summary-wrap p { display: block !important; margin-bottom: 20px !important; } .astra-shop-summary-wrap .price, .astra-shop-summary-wrap span.price { display: block !important; margin-bottom: 24px !important; } /* 6. Button placement and styling (MOBILE ONLY) */ .astra-shop-summary-wrap a.button.product_type_simple, .astra-shop-summary-wrap a.button, .astra-shop-summary-wrap .button, ul.products li.product a.button, .astra-shop-summary-wrap .ast-onsale-card + a.button { position: relative !important; display: block !important; visibility: visible !important; opacity: 1 !important; bottom: auto !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; margin: 10px 0 0 0 !important; float: none !important; z-index: 99 !important; padding: 14px 0 !important; border-radius: 30px !important; } } /* ========================================================================== 01. TRANS-FIRST CORE NAVIGATION FRAMEWORK ========================================================================== */ .main-header-bar { background-color: #ffffff !important; border-bottom: 1px solid #0f172a !important; padding: 10px 20px !important; } /* ========================================================================== 02. NAV LINK TYPOGRAPHY & BRAND HOVER STATES ========================================================================== */ /* Strips out the legacy blue backgrounds, borders, and margins completely */ .main-header-bar .main-header-menu .menu-item a, .main-header-menu .menu-item .menu-link, .main-header-menu .menu-item.-ast-nav-menu-item a { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; color: #475569 !important; /* System Body Text Slate */ font-weight: 500 !important; font-size: 15px !important; letter-spacing: -0.01em; padding: 0 12px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Forces arrow dropdown icons to inherit the exact same slate color */ .main-header-menu .menu-item a .ast-header-navigation-arrow, .main-header-menu .menu-item a svg { color: #475569 !important; fill: #475569 !important; } /* Text & Dropdown Hover State: Snaps to Brand Blue */ .main-header-bar .main-header-menu .menu-item:hover > a, .main-header-bar .main-header-menu .menu-item a:hover { color: #42A5F5 !important; } .main-header-bar .main-header-menu .menu-item:hover > a svg { color: #42A5F5 !important; fill: #42A5F5 !important; } /* ========================================================================== 03. DESKTOP UTILITY UTILITIES (HTML 2 ELEMENT LAYER) ========================================================================== */ /* Enforces clean layout behaviors specifically for your new HTML 2 container */ .ast-header-html-2-holder, .ast-header-html-2, .tf-desktop-utilities { display: flex !important; align-items: center !important; gap: 20px !important; margin-left: auto !important; /* Dynamically pushes icons to the far right */ } /* Utility SVGs Core Style: Crisp Deep Slate */ .tf-util-link { display: inline-flex !important; position: relative !important; text-decoration: none !important; line-height: 1 !important; } .tf-util-link svg { color: #0f172a !important; stroke: #0f172a !important; transition: stroke 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Utility SVGs Hover State: Smooth Transition to Brand Blue */ .tf-util-link:hover svg { color: #42A5F5 !important; stroke: #42A5F5 !important; } /* Active Notification Signal Layer: Brand Pink Token */ .tf-notification-badge-wrapper { position: relative !important; display: inline-flex !important; } .tf-pink-dot { position: absolute !important; top: 1px !important; right: 2px !important; width: 7px !important; height: 7px !important; background-color: #F48FB1 !important; border-radius: 50% !important; border: 1px solid #ffffff !important; } /* ========================================================================== 04. DEFENSIVE ZOOM RESILIENCE SHIELD (UP TO 170% FIREFOX BREAKPOINT) ========================================================================== */ .ast-container { display: flex !important; justify-content: space-between !important; align-items: center !important; max-width: 100% !important; padding-left: 4% !important; padding-right: 4% !important; } .site-branding, .main-header-bar-navigation, .ast-header-html-2-holder { flex-shrink: 0 !important; white-space: nowrap !important; } /* ========================================================================== 06. CUSTOM MINIMALIST DROPDOWN ARROW SPECIALIST ========================================================================== */ /* Completely hides Astra's built-in heavy font/svg arrow selectors */ .main-header-menu .menu-item a .dropdown-menu-toggle, .main-header-menu .menu-item a .ast-header-navigation-arrow, .main-header-menu .ast-icon.icon-arrow { display: none !important; visibility: hidden !important; width: 0 !important; margin: 0 !important; } /* Adjusts line-height alignment so your text and custom arrow sit perfectly straight */ #ast-desktop-header .main-header-menu .menu-item > a { display: inline-flex !important; align-items: center !important; gap: 4px !important; } /* ========================================================================== 01. TRANS-FIRST CORE NAVIGATION FRAMEWORK ========================================================================== */ .main-header-bar { background-color: #ffffff !important; border-bottom: 1px solid #0f172a !important; padding: 10px 20px !important; } /* ========================================================================== 02. NAV LINK TYPOGRAPHY & BRAND HOVER STATES ========================================================================== */ .main-header-bar .main-header-menu .menu-item a, .main-header-menu .menu-item .menu-link, .main-header-menu .menu-item.-ast-nav-menu-item a { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; /* --- FORCING INTER SANS UI TYPOGRAPHY --- */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #0f172a !important; font-weight: 800 !important; font-size: 17px !important; letter-spacing: -0.03em !important; padding: 0 18px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Enforces font consistency across security filters */ #ast-desktop-header .main-header-menu .menu-item > a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #0f172a !important; font-weight: 800 !important; font-size: 17px !important; letter-spacing: -0.03em !important; } /* ========================================================================== 03. DESKTOP UTILITY UTILITIES (HTML 2 ELEMENT LAYER) ========================================================================== */ /* Enforces clean layout behaviors specifically for your new HTML 2 container */ .ast-header-html-2-holder, .ast-header-html-2, .tf-desktop-utilities { display: flex !important; align-items: center !important; gap: 20px !important; margin-left: auto !important; /* Dynamically pushes icons to the far right */ } /* Utility SVGs Core Style: Crisp Deep Slate */ .tf-util-link { display: inline-flex !important; position: relative !important; text-decoration: none !important; line-height: 1 !important; } .tf-util-link svg { color: #0f172a !important; stroke: #0f172a !important; transition: stroke 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Utility SVGs Hover State: Smooth Transition to Brand Blue */ .tf-util-link:hover svg { color: #42A5F5 !important; stroke: #42A5F5 !important; } /* Active Notification Signal Layer: Brand Pink Token */ .tf-notification-badge-wrapper { position: relative !important; display: inline-flex !important; } .tf-pink-dot { position: absolute !important; top: 1px !important; right: 2px !important; width: 7px !important; height: 7px !important; background-color: #F48FB1 !important; border-radius: 50% !important; border: 1px solid #ffffff !important; } /* ========================================================================== 04. DEFENSIVE ZOOM RESILIENCE SHIELD (UP TO 170% FIREFOX BREAKPOINT) ========================================================================== */ .ast-container { display: flex !important; justify-content: space-between !important; align-items: center !important; max-width: 100% !important; padding-left: 4% !important; padding-right: 4% !important; } .site-branding, .main-header-bar-navigation, .ast-header-html-2-holder { flex-shrink: 0 !important; white-space: nowrap !important; } /* ========================================================================== 05. PRIMARY MENU ISOLATION SHIELD (STOPS GLOBAL BUTTON INHERITANCE) ========================================================================== */ /* Forcefully strips the global blue buttons off the desktop header links */ .main-header-bar-navigation .main-header-menu .menu-item, .main-header-bar-navigation .main-header-menu .menu-item > a, .main-header-bar-navigation .main-header-menu .menu-item .menu-link, #ast-desktop-header .main-header-menu .menu-item > a { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 12px !important; margin: 0 !important; height: auto !important; line-height: normal !important; display: inline-flex !important; align-items: center !important; } #ast-desktop-header .main-header-menu .menu-item > a { color: #475569 !important; } /* ========================================================================== 06. CUSTOM MINIMALIST DROPDOWN ARROW SPECIALIST ========================================================================== */ /* Completely hides Astra's built-in heavy font/svg arrow selectors */ .main-header-menu .menu-item a .dropdown-menu-toggle, .main-header-menu .menu-item a .ast-header-navigation-arrow, .main-header-menu .ast-icon.icon-arrow { display: none !important; visibility: hidden !important; width: 0 !important; margin: 0 !important; } /* Adjusts line-height alignment so your text and custom arrow sit perfectly straight */ #ast-desktop-header .main-header-menu .menu-item > a { display: inline-flex !important; align-items: center !important; gap: 4px !important; } /* ========================================================================== 07. MOBILE TOGGLE DESTRUCTION OVERRIDE (FORCES DESKTOP SIMULATION) ========================================================================== */ /* Completely hides the responsive theme toggle buttons on desktop frames */ #ast-desktop-header .ast-menu-toggle, #ast-desktop-header button.ast-menu-toggle, .main-header-bar .ast-menu-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* Forces the sub-menus to drop down smoothly as elegant clean slates */ .main-header-bar .main-header-menu .sub-menu { background-color: #ffffff !important; border: 1px solid #0f172a !important; box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05) !important; } .main-header-bar .main-header-menu .sub-menu a { color: #475569 !important; padding: 8px 16px !important; } /* Gives your lowercase 'v' arrow a sleek, subtle, thin SaaS geometric feel */ #ast-desktop-header .main-header-menu .menu-item > a::after { font-size: 11px !important; font-weight: 400 !important; opacity: 0.7 !important; display: inline-block !important; transform: translateY(1px) !important; /* Lowers the v slightly to align with the text line */ } /* ========================================================================== 08. VERTICAL DROPDOWN FOLDER STACKER (STOPS HORIZONTAL BREAKS) ========================================================================== */ /* Forces Astra's sub-menu block wrapper into a clean, floating vertical column card */ .main-header-bar .main-header-menu .sub-menu, .main-header-bar .main-header-menu ul.sub-menu { display: flex !important; flex-direction: column !important; /* Overrides inline row display to stack items vertically */ position: absolute !important; width: 240px !important; /* Standard premium SaaS dropdown width rule */ min-width: 240px !important; padding: 12px 0 !important; margin-top: 10px !important; background-color: #ffffff !important; border: 1px solid #0f172a !important; /* Reused System Deep Slate Token */ border-radius: 6px !important; /* Smooth SaaS rounded card framing */ box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08) !important; z-index: 99999 !important; } /* Formats each nested list container into an independent row element */ .main-header-bar .main-header-menu .sub-menu .menu-item, .main-header-bar .main-header-menu .sub-menu li, .main-header-bar .main-header-menu ul.sub-menu li { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; clear: both !important; } /* Restores precise alignment metrics and row spacing for dropdown text anchors */ .main-header-bar .main-header-menu .sub-menu a, .main-header-bar .main-header-menu ul.sub-menu li a { display: flex !important; width: 100% !important; padding: 10px 20px !important; color: #475569 !important; /* Reused System Body Text Slate Token */ font-size: 12px !important; font-weight: 400 !important; text-align: left !important; box-sizing: border-box !important; transition: background-color 0.15s ease, color 0.15s ease !important; } /* Elegant Hover Highlight Rule: Subtle brand blue text shift on row background flash */ .main-header-bar .main-header-menu .sub-menu a:hover, .main-header-bar .main-header-menu ul.sub-menu li a:hover { background-color: #f8fafc !important; /* Clean light slate hover background layer */ color: #42A5F5 !important; /* Brand Blue Text Pop */ } /* ========================================================================== 09. SELF-CONTAINED GEOMETRIC SAAS CARET INJECTOR ========================================================================== */ /* 1. Hides Astra's built-in broken theme icon vectors completely */ .main-header-menu .menu-item a .dropdown-menu-toggle, .main-header-menu .menu-item a .ast-header-navigation-arrow, .main-header-menu .ast-icon.icon-arrow { display: none !important; visibility: hidden !important; width: 0 !important; margin: 0 !important; } /* 2. Sets up the clean horizontal alignment gap for links with children */ .main-header-bar .main-header-menu .menu-item-has-children > a { display: inline-flex !important; align-items: center !important; gap: 5px !important; /* Perfect visual distance between word and arrow */ } /* 3. Manually injects a sharp, custom typographic geometric caret */ .main-header-bar .main-header-menu .menu-item-has-children > a::after { content: "▾" !important; /* Premium down-arrow shape */ font-size: 13px !important; color: #0f172a !important; /* Matches your bold dark charcoal text perfectly */ line-height: 1 !important; display: inline-block !important; margin-top: 2px !important; /* Drops it down perfectly onto the font's baseline */ opacity: 0.7 !important; /* Slightly lighter so the main word stands out */ transition: color 0.2s ease, opacity 0.2s ease !important; } /* 4. Smooth brand blue color swap on item hover state */ .main-header-bar .main-header-menu .menu-item-has-children:hover > a::after { color: #42A5F5 !important; /* Snaps arrow to your brand blue */ opacity: 1 !important; } /* ========================================================================== 10. MASTER COLOR CORE OVERRIDE (FORCES DEEP LOGO CHARCOAL) ========================================================================== */ /* Forces every known Astra header text navigation element variant to your logo depth */ .main-header-bar .main-header-menu .menu-item a, .main-header-bar .main-header-menu .menu-item .menu-link, #ast-desktop-header .main-header-menu .menu-item > a, .ast-builder-menu-1 .main-header-menu .menu-item > a, .main-header-bar .main-header-menu .menu-item > a .menu-text { color: #0f172a !important; /* Forces the deep dark logo charcoal */ font-weight: 800 !important; /* Locks in the heavy bold SaaS weight */ } /* Re-locks the crisp geometric dropdown caret to match the new deep color value */ .main-header-bar .main-header-menu .menu-item-has-children > a::after { color: #0f172a !important; } /* Keeps the brand blue hover active and responsive across all elements */ .main-header-bar .main-header-menu .menu-item:hover > a, .main-header-bar .main-header-menu .menu-item a:hover, #ast-desktop-header .main-header-menu .menu-item:hover > a { color: #42A5F5 !important; } /* ========================================================================== 11. DESKTOP TEXT LINK VERTICAL ALIGNMENT NUDGE ========================================================================== */ /* Safely nudges your text links downwards without changing your layout heights */ .main-header-bar .main-header-menu > .menu-item > a, #ast-desktop-header .main-header-menu .menu-item > a { transform: translateY(3px) !important; /* Pushes links down exactly 2 pixels */ } /* Sets padding, text metrics, and bold weights specifically for folder list items */ .main-header-bar .main-header-menu .sub-menu a, .main-header-bar .main-header-menu ul.sub-menu li a { display: flex !important; width: 100% !important; padding: 12px 24px !important; /* Added a bit more inner padding for a premium SaaS feel */ color: #0f172a !important; /* Swapped to your deep dark charcoal to match top links */ font-size: 15px !important; /* Bumped up from 14px to look balanced and legible */ font-weight: 600 !important; /* Set to 600 semi-bold so it looks incredibly sharp */ text-align: left !important; box-sizing: border-box !important; transition: background-color 0.15s ease, color 0.15s ease !important; } /* ========================================================================== 17. ASTRA STRUCTURAL LINK GROUP CLOSURE OVERRIDE ========================================================================== */ /* Clears out the broad padding gaps inside Astra's alignment wrapper block */ .ast-main-header-bar-alignment, #ast-desktop-header .ast-main-header-bar-alignment { display: inline-flex !important; gap: 8px !important; /* Forcefully pulls Creators and Join closer together! */ width: auto !important; } /* Decreases padding directly on the root menu unordered list layout axis */ .main-header-bar .main-header-menu, #ast-hf-menu-1, ul#ast-hf-menu-1 { display: inline-flex !important; gap: 0px !important; /* Controls the exact gap distance between the text blocks */ padding: 0 !important; margin: 0 !important; } /* ========================================================================== 18. LOGO-TO-CREATORS VISUAL BREATHING GAP ========================================================================== */ /* Pushes the 'Creators' block smoothly to the right, away from the logo */ .main-header-bar .main-header-menu > .menu-item:first-child, #ast-hf-menu-1 > .menu-item:first-child { margin-left: 40px !important; /* Forces a clean, elegant horizontal separation gap */ } /* ========================================================================== 20. ULTRA-AGGRESSIVE NAVBAR BOX-SHADOW & LINEAR BLUR CLEANSER ========================================================================== */ /* Forcefully deletes any fuzzy pink glowing gradients or theme background shadows */ .main-header-bar, #masthead .main-header-bar, #ast-desktop-header .main-header-bar, .main-header-bar-wrap, #masthead, .site-header { box-shadow: none !important; box-shadow: 0 0 0 0 transparent !important; background-image: none !important; /* Kills any sneaky gradient background blurs */ } /* Strips out hidden background glow parameters from Astra's structural divider lines */ .main-header-bar::after, .main-header-bar::before, .main-header-bar-wrap::after, .main-header-bar-wrap::before { display: none !important; content: none !important; box-shadow: none !important; background: transparent !important; } /* ========================================================================== 21. SUB-MENU TYPOGRAPHY CORE RESET (OVERPADS SECTION 10 BOLDNESS) ========================================================================== */ /* Expressly forces the nested dropdown folder text to drop its boldness */ .main-header-bar .main-header-menu .sub-menu .menu-item a, .main-header-bar .main-header-menu ul.sub-menu li a, #ast-desktop-header .main-header-menu .sub-menu .menu-item a { font-weight: 500 !important; /* Swaps it to a clean UI medium weight */ font-size: 14px !important; /* Clean, premium readable font size */ color: #0f172a !important; /* Keeps your sharp deep logo charcoal */ letter-spacing: normal !important; /* Resets the tight layout spacing of the main top links */ } /* Ensures the text stays clean on hover, only shifting its brand color */ .main-header-bar .main-header-menu .sub-menu .menu-item:hover > a { color: #42A5F5 !important; /* Snaps text to your brand blue on hover */ font-weight: 500 !important; /* Keeps it perfectly steady without layout shifts */ } /* ========================================================================== 22. DROPDOWN STACKING PRIORITY FORCE (STOP BACKGROUND TEXT BLEED) ========================================================================== */ /* Overrides Astra to ensure the vertical dropdown box floats completely OVER the notice bar */ .main-header-bar .main-header-menu .sub-menu, .main-header-bar .main-header-menu ul.sub-menu, #ast-desktop-header .sub-menu { position: absolute !important; z-index: 999999 !important; /* Pushes the dropdown card container to the very top layer */ } /* Forces the pink/grey above-header container to stay in the background layer */ .ast-above-header-wrap, #ast-above-header, .site-header-above-section-center { position: relative !important; z-index: 1 !important; /* Locks the notice bar underneath your menu interactions */ } /* ========================================================================== 24. ABOVE-FOOTER COMPLIANCE BANNER SYSTEM ========================================================================== */ /* 1. Core Row Frame Configuration: Clean background & subtle separation border */ .tf-above-footer-banner, .site-footer .ast-footer-above-section, .ast-footer-above-container { background-color: #fafafa !important; /* Soft, subtle off-white canvas backdrop */ border-top: 1px solid #e2e8f0 !important; /* Extremely thin, clean structural rule */ border-bottom: 1px solid #e2e8f0 !important; padding: 16px 24px !important; /* Perfect inner breathing vertical clearance space */ width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; } /* 2. Text Links Layout: Clean, highly-readable System Slate Typography */ .tf-above-footer-disclaimer { color: #475569 !important; /* Matches your core system body text slate token exactly */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; /* Sits subtly smaller than main blocks to respect site hierarchy */ font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: -0.01em !important; text-align: center !important; margin: 0 !important; padding: 0 !important; max-width: 800px !important; /* Restricts string width path so lines remain easy to read on ultra-wide screens */ } /* ========================================================================== 25. DESKTOP TEXT MENU INLINE ENFORCER (PREVENTS MID-ZOOM WRAPPING) ========================================================================== */ /* Forces the navigation text list container to stay locked in a straight row layout axis */ .main-header-bar .main-header-menu, #ast-hf-menu-1, ul#ast-hf-menu-1 { display: inline-flex !important; flex-direction: row !important; /* Locks structural flow horizontally */ flex-wrap: nowrap !important; /* Forbids any vertical wrapping down lines */ } /* Formats list items so they preserve their structural metrics together */ .main-header-bar .main-header-menu > .menu-item { display: inline-flex !important; white-space: nowrap !important; /* Shields text strings from jumping blocks */ } /* ========================================================================== 26. TYPOGRAPHIC CARET WEIGHT MULTIPLIER (PIERCES THEME CONTAINERS) ========================================================================== */ /* 1. Re-activates a clean inline block configuration for the parent string */ .main-header-bar .main-header-menu .menu-item-has-children > a, #ast-desktop-header .main-header-menu .menu-item-has-children > a { display: inline-flex !important; align-items: center !important; gap: 5px !important; /* Visual gap distance from Creators string text to caret */ } /* 2. Forces a thick typographic caret back onto the screen using text borders */ .main-header-bar .main-header-menu .menu-item-has-children > a::after, #ast-desktop-header .main-header-menu .menu-item-has-children > a::after { content: "▾" !important; /* Restores the crisp geometric glyph arrow */ display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-size: 11px !important; line-height: 1 !important; margin-top: -2px !important; /* Micro-aligns arrow perfectly flat onto font baseline */ /* --- THE BOLDING ENGINE TRICK --- */ color: #0f172a !important; /* Deep Logo Charcoal Fill */ -webkit-text-stroke: 1.5px #0f172a !important; /* Injects a thick matching border mask around the symbol shapes */ text-shadow: 0.5px 0 0 #0f172a, -0.5px 0 0 #0f172a !important; /* Cross-browser horizontal weight density multiplier */ transition: color 0.2s ease, -webkit-text-stroke 0.2s ease !important; } /* 3. Ensures the bold border mask switches flawlessly to brand blue on link mouse hover */ .main-header-bar .main-header-menu .menu-item-has-children:hover > a::after { color: #42a5f5 !important; /* Snaps color fill to brand blue */ -webkit-text-stroke: 1.5px #42a5f5 !important; /* Snaps edge border path to match blue glow profile */ } /* ========================================================================== 27. PREMIUM HORIZONTAL BALANCING ADJUSTMENTS ========================================================================== */ /* Gives the central text link pillar an incredibly balanced positioning runway */ .main-header-bar .main-header-menu > .menu-item:first-child, #ast-hf-menu-1 > .menu-item:first-child { margin-left: 55px !important; /* Grounded relative to the logo text safely */ } /* ========================================================================== 28. GLOBAL VERTICAL DESIGN ALIGNMENT AXIS (LOGO & LINKS) ========================================================================== */ /* 1. Pulls the parent header container wider to let elements touch the margins */ .main-header-bar .ast-container, #ast-desktop-header .ast-container { padding-left: 20px !important; /* Forces the header edge to line up flat with page padding */ padding-right: 20px !important; } /* 2. Strips out inner margins from the logo box to slide it perfectly left */ .site-branding, .ast-header-site-branding, .site-header-section-left { margin-left: 0 !important; padding-left: 0 !important; } /* 3. Controls the exact visual gap to position 'Creators' over your text baseline */ .main-header-bar .main-header-menu > .menu-item:first-child, #ast-hf-menu-1 > .menu-item:first-child { margin-left: 72px !important; /* Nudge this pixel value up/down to line up precisely over your body heading text! */ } /* ========================================================================== 29. DESKTOP UTILITY DECK DIRECT VERTICAL OVERHAUL ========================================================================== */ /* Nudges the parent link containers to drop the vectors AND the notification badge together safely */ .tf-desktop-utilities a, .tf-desktop-utilities .tf-util-link, .ast-header-widget-area .widget .tf-desktop-utilities a { position: relative !important; top: 14px !important; /* Forcefully slides the entire anchor block down 3px */ } /* Fixes target tracking parameters specifically for the active page ID string query selector */ .tf-desktop-utilities a[href*="page_id="].tf-cart-trigger { display: inline-flex !important; align-items: center !important; text-decoration: none !important; } /* ========================================================================== 30. PREMIUM SAAS LIGHT DROPDOWN FOLDER CARD OVERHAUL ========================================================================== */ /* 1. Restores the main folder background to a pure white canvas card box */ .main-header-bar .main-header-menu .sub-menu, .main-header-bar .main-header-menu ul.sub-menu, #ast-desktop-header .sub-menu { background-color: #ffffff !important; border: 1px solid #0f172a !important; /* Sharp, clean deep logo charcoal outline border */ box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05) !important; /* Soft, subtle dark drop shadow */ } /* 2. Forces the dropdown links to match your sharp deep logo charcoal text weight */ .main-header-bar .main-header-menu .sub-menu .menu-item a, .main-header-bar .main-header-menu ul.sub-menu li a, #ast-desktop-header .main-header-menu .sub-menu .menu-item a { color: #0f172a !important; /* Sharp deep logo charcoal font color */ font-size: 14px !important; font-weight: 700 !important; /* Changed to 700 for a bold UI layout weight */ transition: background-color 0.15s ease, color 0.15s ease !important; } /* Elegant Hover Highlight Rule: Smooth left brand pink strip pop with zero grey blocks */ .main-header-bar .main-header-menu .sub-menu .menu-item a:hover, .main-header-bar .main-header-menu ul.sub-menu li a:hover, #ast-desktop-header .main-header-menu .sub-menu .menu-item a:hover { background-color: transparent !important; /* Keeps the background clean and white */ color: #42a5f5 !important; /* Keeps the text color popping to your active brand blue */ /* --- SWAPPED HEX TO YOUR ACCENT PINK TOKENS --- */ border-left: 3px solid #f48fb1 !important; /* Tactical pink vertical edge indicator */ padding-left: 17px !important; /* Keeps the text perfectly steady and locked */ } /* ========================================================================== 28. LIQUID-SMOOTH STICKY HEADER PLATFORM ENGINE (BORDER VARIATION) ========================================================================== */ /* Locks the entire desktop header block to the top of the screen while preserving your clean black border line */ .main-header-bar-wrap, #ast-desktop-header .main-header-bar { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 99999 !important; /* Floats safely on top of all page elements and graphics */ /* --- RESTORES YOUR SIGNATURE CRISP DEEP BORDER TOKEN --- */ border-bottom: 1px solid #0f172a !important; /* Sharp Deep Logo Charcoal Divider */ box-shadow: none !important; /* Forcefully deletes the blurry grey theme shadows completely */ } /* IMPORTANT FIX: Prevents your top homepage banner content from jumping up or hiding behind the newly fixed header */ body.wp-desktop-header-active, body { padding-top: 70px !important; /* Creates a perfect buffer zone matching the height of your navbar row */ } /* ========================================================================== 32. MOBILE STRUCTURAL PRIORITY SHIELD (GLITCH BLOB DESTROYER) ========================================================================== */ @media (max-width: 921px) { /* 1. Forcefully resets mobile links to look clean, sharp, and charcoal, wiping out the blue blob */ .ast-builder-menu-mobile .main-header-menu .menu-item > a, .ast-builder-menu-mobile .main-header-menu .menu-item .menu-link, .ast-mobile-popup-inner .main-header-menu .menu-item a, #ast-desktop-header .ast-builder-menu-mobile .main-header-menu .menu-item > a { color: #0f172a !important; /* Forces your clean logo charcoal */ background: transparent !important; background-color: transparent !important; font-weight: 700 !important; /* Punchy weight for phone displays */ font-size: 18px !important; /* High-visibility mobile readability scale */ transform: none !important; /* Disables the desktop 2px vertical alignment nudge on mobile screens */ box-shadow: none !important; text-shadow: none !important; } /* 2. Forces Astra's active toggle state colors to switch cleanly without bleeding artifacts */ .ast-builder-menu-mobile .main-header-menu .menu-item:hover > a, .ast-builder-menu-mobile .main-header-menu .menu-item a:active { color: #42a5f5 !important; /* Snaps text color to your master brand blue on finger tap interaction */ } } /* ========================================================================== 36. RESPONSIBLY INSULATED PILL SEARCH SYSTEM (PRISTINE BASELINE VERSION) ========================================================================== */ /* ─── DESKTOP ONLY INTERACTIVE RULES (922PX AND ABOVE) ─── */ @media (min-width: 922px) { /* 1. Anchors the search trigger container inside your horizontal utility deck track */ .tf-desktop-utilities .tf-search-trigger { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; text-decoration: none !important; width: 32px !important; height: 32px !important; } /* 2. Forces your magnifying glass vector to stay 100% fixed and steady */ .tf-desktop-utilities .tf-search-trigger svg { position: relative !important; z-index: 5 !important; pointer-events: none !important; } /* 3. SETS THE PERFECTLY HIDDEN SLIDELESS RESTING STATE FOR THE CAPSULE PILL */ .tf-desktop-utilities .tf-search-capsule-input { position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; /* Mathematically centers the capsule over the font line */ width: 32px !important; height: 32px !important; opacity: 0 !important; visibility: hidden !important; background-color: #ffffff !important; /* --- SHARP TRANS-FIRST BORDER SIGNATURE --- */ border: 1px solid #0f172a !important; /* Deep Logo Charcoal Outline */ border-radius: 9999px !important; /* FORCES PERFECT PILL-SHAPE EDGES */ /* Typography parameters */ color: #0f172a !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; padding: 0 !important; margin: 0 !important; z-index: 4 !important; outline: none !important; box-sizing: border-box !important; /* Liquid smooth horizontal slide physics */ transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.2s ease, padding 0.2s ease !important; } /* 4. ACTIVE HOVER ACTION: Fades in the outline and stretches out cleanly to the left */ .tf-desktop-utilities .tf-search-trigger:hover .tf-search-capsule-input, .tf-desktop-utilities .tf-search-capsule-input:focus { width: 210px !important; /* Safe expansion limit safeguards your runways */ opacity: 1 !important; visibility: visible !important; padding: 6px 14px 6px 36px !important; /* Creates left interior text buffer clearance */ } /* Formats the placeholder text */ .tf-desktop-utilities .tf-search-capsule-input::placeholder { color: #94a3b8 !important; /* Soft Slate Gray */ opacity: 1 !important; } } /* ─── MOBILE SAFE OVERRIDES (921PX AND BELOW) ─── */ @media (max-width: 921px) { .tf-desktop-utilities .tf-search-capsule-input { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; } .tf-desktop-utilities .tf-search-trigger { display: inline-flex !important; position: relative !important; padding: 0 !important; margin: 0 !important; } } /* ─── 5. STANDALONE STATIC NOTIFICATION DOT BASELINE ─── */ .tf-desktop-utilities .tf-pink-dot, span.tf-pink-dot { background-color: #f48fb1 !important; /* Back to your original beautiful brand pink accent color */ width: 6px !important; height: 6px !important; border-radius: 9999px !important; position: absolute !important; top: 2px !important; right: 2px !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* Inline the form so it integrates seamlessly with your flex tracker */ .tf-desktop-utilities form.search-form { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; height: 32px !important; vertical-align: middle !important; } /* Ensure the child anchor inside the form stretches perfectly */ .tf-desktop-utilities form.search-form .tf-search-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* ========================================================================== 37. NOTIFICATION BADGE: INTELLIGENT TRIPLE-PULSE ALERT BEACON ========================================================================== */ /* 1. Prepares the parent icon structural wrapper to hold the absolute layers */ .tf-desktop-utilities .tf-notification-badge-wrapper { position: relative !important; display: inline-flex !important; } /* 2. Formats the physical solid blue dot core explicitly over the top right corner */ .tf-desktop-utilities .tf-pink-dot, .tf-desktop-utilities .tf-notification-badge-wrapper .tf-pink-dot, span.tf-pink-dot { background-color: #42a5f5 !important; /* Vibrant high-visibility active brand blue core */ width: 8px !important; /* Boosted size for perfect visibility */ height: 8px !important; border-radius: 9999px !important; position: absolute !important; top: -2px !important; right: -2px !important; box-shadow: 0 0 0 2px #ffffff !important; /* Crisp white separation mask ring cuts cleanly through the black bell line */ z-index: 5 !important; visibility: visible !important; opacity: 1 !important; display: inline-block !important; } /* 3. GENERATES THE RADAR WAVE THAT LOOPS WITH AN INTENTIONAL COOL-DOWN PERIOD */ .tf-desktop-utilities .tf-pink-dot::after, span.tf-pink-dot::after { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 9999px !important; box-shadow: 0 0 0 2px #42a5f5 !important; /* Transparent expanding blue shadow halo ring */ /* 15-second total loop: fires immediately on page load, then rests in the background */ animation: tf-beacon-triple-pulse 15s cubic-bezier(0.25, 0, 0.4, 1) infinite !important; z-index: 4 !important; pointer-events: none !important; box-sizing: border-box !important; } /* 4. TRIPLE-DELAY TIMING LOGIC: Fires 3 clean bursts up to 23.3% (3.5s) then rests at 0% opacity for the remainder */ @keyframes tf-beacon-triple-pulse { /* ─── FIRST PULSE WAVE (0s to 1.2s) ─── */ 0% { transform: scale(1); opacity: 0.8; } 7% { transform: scale(2.2); opacity: 0; } /* ─── SECOND PULSE WAVE (1.2s to 2.4s) ─── */ 8% { transform: scale(1); /* Saps back to center axis invisibly */ opacity: 0; } 9% { transform: scale(1); opacity: 0.7; } 15% { transform: scale(2.5); opacity: 0; } /* ─── THIRD PULSE WAVE (2.4s to 3.5s) ─── */ 16% { transform: scale(1); /* Saps back to center axis invisibly */ opacity: 0; } 17% { transform: scale(1); opacity: 0.6; } 23.3% { transform: scale(2.8); /* Final largest outward swell action completes at 3.5 seconds */ opacity: 0; } /* ─── DEEP SLEEP COOL-DOWN WINDOW (Rest of the 15s loop) ─── */ 100% { transform: scale(2.8); opacity: 0; /* Keeps the overlay flat, dark, and perfectly silent for the next 11.5 seconds */ } } /* ========================================================================== 38. UTILITY DECK: INTERACTIVE CURRENCY SWITCHER DROPDOWN SYSTEM ========================================================================== */ /* 1. Established isolation anchor relative path for the trigger box */ .tf-currency-dropdown-wrapper { position: relative !important; display: inline-flex !important; align-items: center !important; } /* 2. Formats the floating vertical column list box menu card */ .tf-currency-sub-menu { display: flex !important; flex-direction: column !important; position: absolute !important; top: 100% !important; right: 50% !important; transform: translateX(50%) translateY(10px) !important; /* Horizontally centers dropdown directly beneath globe icon */ width: 200px !important; padding: 8px 0 !important; margin: 0 !important; list-style: none !important; background-color: #ffffff !important; border: 1px solid #0f172a !important; /* Signature Deep Charcoal Outline Border */ border-radius: 6px !important; box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05) !important; z-index: 999999 !important; /* --- THE CORNER CLIPPING SHIELD --- */ overflow: hidden !important; /* Forcefully clips the pink hover indicators inside the rounded 6px boundaries */ /* Smooth opacity fade transition engine */ opacity: 0 !important; visibility: hidden !important; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important; } /* 3. HOVER ACTION: Triggers the sleek dropdown card display smoothly */ .tf-currency-dropdown-wrapper:hover .tf-currency-sub-menu { opacity: 1 !important; visibility: visible !important; transform: translateX(50%) translateY(14px) !important; /* Slight vertical slide drop into position */ } /* 4. Formats independent structural link text items inside card */ .tf-currency-sub-menu li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .tf-currency-sub-menu li a { display: flex !important; align-items: center !important; width: 100% !important; padding: 10px 16px !important; color: #0f172a !important; /* Clear Deep Logo Charcoal Text */ font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; /* Forces bold weight while keeping everything else original */ text-decoration: none !important; box-sizing: border-box !important; border-left: 3px solid transparent !important; /* Hidden default side accent channel */ transition: color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease !important; } /* 5. Left Token Shift on Item Row Hover Interaction */ .tf-currency-sub-menu li a:hover { color: #42a5f5 !important; /* Snaps text color to active Brand Blue */ border-left: 3px solid #f48fb1 !important; /* High-contrast tactical Brand Pink edge strip indicator */ padding-left: 13px !important; /* Adjusts clearance padding perfectly to offset border-left width */ background-color: transparent !important; } /* 6. Formats the bold prefix currency shortcode tracking symbols */ .tf-curr-symbol { display: inline-block !important; width: 32px !important; font-weight: 700 !important; color: #475569 !important; /* System Body Text Slate */ transition: color 0.15s ease !important; } .tf-currency-sub-menu li a:hover .tf-curr-symbol { color: #42a5f5 !important; /* Glows currency symbols to blue on mouse hover axis */ } /* ========================================================================== TF FOOTER REBOOT: PREMIUM SAAS OFF-WHITE CONTRAST ENGINE ========================================================================== */ /* 1. Tightens vertical layout margins and row tracking distances perfectly */ .custom-saas-footer-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; /* Pulls the list rows together closely and cleanly */ } /* 2. Collapses the tall, messy text line heights */ .custom-saas-footer-col ul li { margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; /* Locks rows together tightly and intentionally */ } /* 3. Reverses contrast: Premium slightly off-white resting state baseline */ .custom-saas-footer-col ul li a { color: #e2e8f0 !important; /* Premium crisp off-white (Soft Slate Tint) */ font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; display: inline-block !important; /* 4. Liquid smooth fade transitions mimic luxury tech platform animations */ transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* 5. Lights up beautifully to high-visibility brand trans-pink on hover */ .custom-saas-footer-col ul li a:hover { color: #f48fb1 !important; /* Link visibly illuminates to your signature pink! */ } /* ========================================== GLOBAL BRAND SYSTEM OVERRIDES ========================================== */ /* 1. NUKE ALL GLOBAL GREY DIVIDERS & FOOTER LINES */ footer, .site-footer, [class*="footer"], hr, .section-divider { border: none !important; border-top: none !important; box-shadow: none !important; } /* Inject your exact .pill-btn-blue design properties into the checkout button */ .woocommerce div.product form.cart .button.single_add_to_cart_button, .ast-article-single .summary .form.variations_form.cart button.single_add_to_cart_button, .woocommerce div.product form.cart .button.single_add_to_cart_button.disabled, .woocommerce div.product form.cart .button.single_add_to_cart_button.wc-variation-selection-needed, .ast-article-single .summary .form.variations_form.cart button.single_add_to_cart_button.disabled { background-color: #42A5F5 !important; /* Your exact vibrant blue brand color */ background: #42A5F5 !important; color: #ffffff !important; /* Clean white text */ padding: 14px 28px !important; /* Your exact pill padding specifications */ border-radius: 50px !important; /* Your exact full circle pill radius */ font-size: 15px !important; /* Your exact layout font size */ font-weight: 600 !important; /* Your precise semi-bold font weight */ text-transform: none !important; /* Clears uppercase forcing */ letter-spacing: normal !important; line-height: 1 !important; display: inline-block !important; border: none !important; opacity: 1 !important; margin-right: 0 !important; margin-bottom: 0 !important; box-shadow: 0 4px 6px -1px rgba(66,165,245,0.2) !important; /* Your signature soft blue glow shadow */ transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Match your exact SaaS hover state to transition to dark slate gray */ .woocommerce div.product form.cart .button.single_add_to_cart_button:hover, .ast-article-single .summary .form.variations_form.cart button.single_add_to_cart_button:hover { background-color: #1e293b !important; /* Shifts beautifully to slate on hover */ background: #1e293b !important; color: #ffffff !important; } /* Ensure the layout details underneath flow naturally with the vertical space */ .woocommerce ul.products li.product .astra-shop-summary-wrap { margin-bottom: 10px !important; } /* Clean up the variations container table structure */ .ast-article-single .summary .variations_form.cart table.variations { width: 100% !important; max-width: 340px !important; border: none !important; background: transparent !important; margin-bottom: 15px !important; } /* Format the option group rows */ .ast-article-single .summary .variations_form.cart table.variations tr { display: flex !important; flex-direction: column !important; margin-bottom: 12px !important; } /* Style the field labels (Size & Colour) */ .ast-article-single .summary .variations_form.cart table.variations td.label label { font-weight: 600 !important; text-transform: uppercase !important; font-size: 0.8rem !important; letter-spacing: 0.04em !important; color: #222 !important; padding-bottom: 4px !important; display: inline-block !important; } /* Force dropdown elements into clean modern boxes */ .ast-article-single .summary .variations_form.cart table.variations select#size, .ast-article-single .summary .variations_form.cart table.variations select { width: 100% !important; height: 40px !important; border: 1px solid #ced4da !important; border-radius: 4px !important; padding: 0 10px !important; background-color: #ffffff !important; font-size: 0.85rem !important; color: #495057 !important; cursor: pointer !important; appearance: none !important; /* Cleans up native operating system styling triggers */ -webkit-appearance: none !important; } /* ========================================================================== PREMIUM SINGLE PRODUCT CART WORKSPACE OVERHAUL ========================================================================== */ /* Add a clean blue focus ring when clicked */ .ast-article-single .summary .variations_form.cart table.variations select:focus { border-color: #0085ba !important; outline: none !important; box-shadow: 0 0 0 2px rgba(0, 133, 186, 0.15) !important; } /* Highly specific selector path to force a checkout box layout block */ div#primary main#main .ast-article-single div.summary.entry-summary form.variations_form.cart { border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 24px !important; background-color: #ffffff !important; max-width: 380px !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important; margin-top: 20px !important; margin-bottom: 25px !important; display: block !important; } /* Ensure inner table contents don't push outside the boundaries */ div#primary main#main .ast-article-single div.summary.entry-summary form.variations_form.cart table.variations { width: 100% !important; margin-bottom: 10px !important; } /* Remove default margins/padding to left-align the box content with product text */ div#primary main#main .ast-article-single div.summary.entry-summary form.variations_form.cart { margin-left: 0 !important; padding-left: 20px !important; /* Balanced interior padding */ } /* Force the inner variations table to align flush left */ div#primary main#main .ast-article-single div.summary.entry-summary form.variations_form.cart table.variations { margin-left: 0 !important; padding-left: 0 !important; } /* Force the labels and dropdown inputs to start flush left */ div#primary main#main .ast-article-single div.summary.entry-summary form.variations_form.cart table.variations td.label, div#primary main#main .ast-article-single div.summary.entry-summary form.variations_form.cart table.variations td.value { padding-left: 0 !important; margin-left: 0 !important; } /* Securely hide your local dynamic colour dropdown elements */ .ast-article-single .summary .variations_form.cart table.variations select#colour, .ast-article-single .summary .variations_form.cart table.variations select#colour ~ .reset_variations { display: none !important; } /* Hide the duplicate table row structure for Colour but leave Size active */ .ast-article-single .summary .variations_form.cart table.variations tr:has(select#colour) { display: none !important; } /* Ensure the color circles scale up beautifully when hovered */ .tf-color-circle-span:hover { transform: scale(1.15) !important; outline-color: #333 !important; } /* Clean layout for the custom interactive color dots */ .tf-color-circle-span { width: 24px !important; height: 24px !important; border-radius: 50% !important; display: inline-block !important; cursor: pointer !important; transition: all 0.1s ease !important; outline: 1px solid #1a1a1a !important; border: 2px solid #ffffff !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.15) !important; } /* Elegant expansion animation when a user hovers over a dot */ .tf-color-circle-span:hover { transform: scale(1.15) !important; outline: 2px solid #1a1a1a !important; } /* STRIKTLY SCOPED SINGLE PRODUCT ADD TO CART BUTTON (Protects from Loop Styles) */ .single-product div.product form.cart .button.single_add_to_cart_button { background: #1a1a1a !important; /* Premium dark charcoal background */ background-color: #1a1a1a !important; color: #ffffff !important; /* Clean white text */ border: none !important; border-radius: 4px !important; /* Clean modern corner radius */ padding: 12px 24px !important; font-size: 0.9rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; transition: all 0.15s ease-in-out !important; box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important; display: inline-block !important; visibility: visible !important; /* Forces visibility specifically here */ opacity: 1 !important; } /* Hover state for single product page button */ .single-product div.product form.cart .button.single_add_to_cart_button:hover { background: #333333 !important; /* Slightly lighter charcoal shade on hover */ background-color: #333333 !important; box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important; transform: translateY(-1px) !important; } /* Style the quantity input box border next to it to fit the layout card */ .ast-article-single .summary .form.variations_form.cart .quantity input.qty { border: 1px solid #ced4da !important; border-radius: 4px !important; height: 42px !important; } /* ========================================================================== HIDE SHOP/ARCHIVE LOOP BUTTONS WITHOUT AFFECTING SINGLE PRODUCT PAGES ========================================================================== */ /* Target the AJAX add to cart, select options, and simple product buttons in loops */ .woocommerce.archive ul.products li.product .button, .woocommerce.archive ul.products li.product a.add_to_cart_button, .woocommerce .related.products ul.products li.product .button, .woocommerce .upsells.products ul.products li.product .button { display: none !important; } /* ========================================================================== FORCE DISABLE ALL SHOP GRID LOOP CARD ACTIONS ========================================================================== */ /* Hides the blue action button wrappers completely on all product loop listings */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button, .woocommerce-page ul.products li.product .button, .woocommerce-page ul.products li.product a.button, .ast-shop-summary-wrap .button, .ast-shop-summary-wrap a.button { display: none !important; } /* Brute force override for Astra theme's tokenized checkout button container */ .woocommerce div.product form.cart .button.single_add_to_cart_button, .ast-article-single .summary .form.variations_form.cart button.single_add_to_cart_button.button, button.single_add_to_cart_button.ajax_add_to_cart { background: #1a1a1a !important; /* Forces solid dark charcoal */ background-color: #1a1a1a !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; padding: 12px 24px !important; font-size: 0.9rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Force state override when hovered */ .woocommerce div.product form.cart .button.single_add_to_cart_button:hover, .ast-article-single .summary .form.variations_form.cart button.single_add_to_cart_button.button:hover { background: #333333 !important; /* Lighter charcoal feedback hover */ background-color: #333333 !important; color: #ffffff !important; } /* Force the right column summary to stack elements in a custom order */ .ast-article-single .summary.entry-summary { display: flex !important; flex-direction: column !important; } /* 1. Force the title to the absolute top of the stack */ .ast-article-single .summary.entry-summary h1.product_title { order: 1 !important; margin-top: 0 !important; margin-bottom: 8px !important; } /* 2. Force the breadcrumbs/category links above or right under the title if present */ .ast-article-single .summary.entry-summary .woocommerce-breadcrumb, .ast-article-single .summary.entry-summary .product_meta { order: 2 !important; } /* 3. Force the price entry to come next */ .ast-article-single .summary.entry-summary p.price { order: 3 !important; margin-bottom: 15px !important; } /* 4. Force the short text description box to sit below the price */ .ast-article-single .summary.entry-summary .woocommerce-product-details__short-description { order: 4 !important; margin-bottom: 20px !important; } /* 5. Force our variations and checkout block container box to sit at the very bottom */ .ast-article-single .summary.entry-summary form.variations_form.cart { order: 5 !important; } /* Target the precise single-product-category container span block */ .ast-article-single .summary.entry-summary span.single-product-category, .ast-article-single .summary.entry-summary span.single-product-category a { font-size: 0.72rem !important; /* Elegant, small luxury font size */ font-weight: 600 !important; /* Clean bold font profile */ text-transform: uppercase !important; /* Forces UPPERCASE lettering */ letter-spacing: 0.09em !important; /* Wide, elegant spacing between characters */ color: #718096 !important; /* High-end muted charcoal/gray shade */ text-decoration: none !important; /* Clear away any underlying anchor underlines */ margin-bottom: 5px !important; /* Snug fit directly above your main title text */ display: inline-block !important; } /* Ensure the text updates uniformly when a cursor hovers over it */ .ast-article-single .summary.entry-summary span.single-product-category a:hover { color: #1a1a1a !important; /* Subtle darken effect on interaction */ } /* ========================================================================== PRODUCTION MASTER: HIGH-ISOLATION MOBILE TEXT NAVIGATION FORMATTING ========================================================================== */ @media (max-width: 544px) { /* 1. TYPOGRAPHY & HARD-LEFT ALIGNMENT (ONLY TARGETS THE MAIN TEXT LINKS) */ .ast-mobile-popup-inner ul#ast-hf-mobile-menu.main-header-menu > li, .ast-mobile-popup-inner ul#ast-hf-mobile-menu.main-header-menu > li > a { /* Forces the main navigation items flush left */ display: block !important; text-align: left !important; float: none !important; width: 100% !important; box-sizing: border-box !important; /* Premium bold typography rules */ font-family: 'Inter', sans-serif !important; font-size: 18px !important; font-weight: 800 !important; color: #0F172A !important; letter-spacing: -0.01em !important; /* Elegant vertical finger tap targets */ padding-top: 14px !important; padding-bottom: 14px !important; /* 📐 CUSTOM EDGE INSET: Safe spacing away from the left border wall */ padding-left: 20px !important; padding-right: 0 !important; margin-left: 0 !important; text-indent: 0 !important; /* Smooth micro-transition animation for the hover right glide effect */ transition: transform 0.2s ease-in-out, color 0.2s ease-in-out !important; } /* 2. TEXT HOVER STATE (ONLY TARGETS THE MAIN TEXT LINKS) */ .ast-mobile-popup-inner ul#ast-hf-mobile-menu.main-header-menu > li > a:hover { color: #42A5F5 !important; /* Brand active blue pop link color */ background-color: transparent !important; /* ➡ī¸ TRUE RIGHT HOVER GLIDE: Physically shifts the row rightwards when touched */ transform: translateX(10px) !important; } } /* 🌟 END OF ISOLATION PROTECTION WALL */ /* 3. UTILITY ICON ROW ALIGNMENT: Spaces your 5 icons horizontally above your text list */ .ast-mobile-popup-inner .tf-desktop-utilities, .ast-mobile-popup-inner .custom-header-utility-row, #ast-mobile-popup .tf-desktop-utilities { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 16px !important; margin-top: 10px !important; margin-bottom: 20px !important; padding: 0 0 12px 0 !important; position: relative !important; left: 0 !important; transform: none !important; } /* 4. VECTOR SCALING CONTAINER TARGETS */ .ast-mobile-popup-inner .tf-desktop-utilities svg, .ast-mobile-popup-inner .custom-header-utility-row svg, #ast-mobile-popup .tf-desktop-utilities svg { width: 24px !important; height: 24px !important; display: block !important; } /* 5. THE ARROW VAPORIZER: Suppresses default arrow tokens from your flat lists */ .ast-header-break-point .ast-icon-arrow, .ast-header-break-point .ast-menu-toggle, .ast-mobile-popup-wrapper .ast-icon-arrow, .ast-mobile-popup-wrapper .ast-menu-toggle, .ast-mobile-popup-inner .ast-menu-toggle, .menu-item-has-children > .ast-menu-toggle { display: none !important; visibility: hidden !important; } /* 6. SEARCH INTERACTION GUARD */ .ast-mobile-popup-inner .tf-desktop-utilities .dgwt-wcas-search-wrapp, .ast-mobile-popup-inner [class*="dgwt-wcas-"] { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* ========================================================================== PRODUCTION FINALIZE: SEAMLESS DRAWER BACKGROUND WHITE BLEND ========================================================================== */ /* 1. Vaporizes the double-box grey panel shadows and forces solid white backdrops */ .ast-mobile-popup-drawer, .ast-mobile-popup-drawer.active, .ast-mobile-popup-wrapper, .ast-mobile-popup-inner, .ast-mobile-popup-content, .ast-builder-menu-mobile, #ast-mobile-popup, #ast-mobile-popup-wrapper { background: #ffffff !important; background-color: #ffffff !important; box-shadow: none !important; border: none !important; outline: none !important; width: 100% !important; /* Forces the box to stretch completely to the outer edge */ max-width: 100% !important; } /* 2. Evaporates Astra's hardcoded outer list row background container shapes */ .ast-mobile-popup-inner .main-header-menu, .ast-mobile-popup-inner ul#ast-hf-mobile-menu, #ast-hf-mobile-menu { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; width: 100% !important; max-width: 100% !important; } /* ========================================================================== THE UTILITY ICON JOYSTICK CONTROLLER ========================================================================== */ .ast-mobile-popup-inner .tf-desktop-utilities, .ast-mobile-popup-inner .custom-header-utility-row, #ast-mobile-popup .tf-desktop-utilities, div.tf-desktop-utilities { position: relative !important; /* 🕹ī¸ CONTROLLER 1: UP & DOWN */ /* Use a POSITIVE number (e.g., 20px) to slide the icons LOWER down the card. */ /* Use a NEGATIVE number (e.g., -15px) to pull the icons HIGHER up towards the close button. */ top: 10px !important; /* 🕹ī¸ CONTROLLER 2: LEFT & RIGHT */ /* Use a POSITIVE number (e.g., 45px) to forcefully slide the icons further to the RIGHT. */ /* Use a NEGATIVE number (e.g., -35px) to forcefully slide the icons further to the LEFT. */ left: 40px !important; } /* ========================================================================== PRODUCTION FINALIZE: ENFORCED GRID UTILITY MATRIX WITH MASTER JOYSTICK ========================================================================== */ /* 📱 1. EXTRA-NARROW PHONE VIEW CONTROLLER (0px to 544px) */ @media (max-width: 544px) { :root { /* 🕹ī¸ Your custom phone calibrations remain completely untouched */ --search-nudge-x: -20px; --core4-nudge-x: 20px; --icon-gap-spacing: 12px; } } /* 📑 2. TABLET VIEW CONTROLLER (545px to 921px) */ @media (min-width: 545px) and (max-width: 921px) { :root { /* 🕹ī¸ Your custom tablet calibrations remain completely untouched */ --search-nudge-x: -28px; --core4-nudge-x: -0px; --icon-gap-spacing: 22px; } } /* ⚙ī¸ 3. UNIFIED STRUCTURAL ENGINE FOR ALL SCREENS (921px AND BELOW) */ @media (max-width: 921px) { /* MASTER DROPDOWN CONTAINER CARD FRAME */ #ast-mobile-popup .ast-mobile-popup-inner, .ast-mobile-popup-inner, .ast-mobile-popup-content, div.ast-builder-menu-mobile { width: 320px !important; max-width: 85vw !important; background-color: #ffffff !important; background: #ffffff !important; position: absolute !important; top: 75px !important; left: 15px !important; right: auto !important; border: 1.5px solid #0F172A !important; border-radius: 12px !important; padding: 24px 20px !important; box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important; box-sizing: border-box !important; } /* UTILITY ROW RESET */ #ast-mobile-popup aside.header-widget-area, .ast-mobile-popup-inner aside.header-widget-area, aside.header-widget-area.widget-area.site-header-focus-item { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; padding: 0 0 14px 0 !important; margin-top: 5px !important; margin-bottom: 20px !important; position: relative !important; transform: none !important; border-bottom: 1px solid #e2e8f0 !important; } /* THE MASTER CONTAINER GRID */ .ast-mobile-popup-inner div.tf-desktop-utilities, div.tf-desktop-utilities { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; /* ✅ CHANGED FROM flex-start TO center */ width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; gap: var(--icon-gap-spacing) !important; } /* SEARCH POSITIONING ENGINE */ .tf-desktop-utilities .search-form, div.tf-desktop-utilities .search-form { order: 1 !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; transform: translateX(var(--search-nudge-x)) !important; } /* CORE 4 POSITIONING ENGINE */ .tf-desktop-utilities .tf-currency-dropdown-wrapper { order: 2 !important; } .tf-desktop-utilities .tf-notification-trigger { order: 3 !important; } .tf-desktop-utilities .tf-cart-trigger { order: 4 !important; } .tf-desktop-utilities .tf-account-trigger { order: 5 !important; } .tf-desktop-utilities .tf-currency-dropdown-wrapper, .tf-desktop-utilities .tf-notification-trigger, .tf-desktop-utilities .tf-cart-trigger, .tf-desktop-utilities .tf-account-trigger { transform: translateX(var(--core4-nudge-x)) !important; } /* UNIFORM ITEM BOUNDS */ .tf-desktop-utilities .search-form, .tf-desktop-utilities .tf-currency-dropdown-wrapper, .tf-desktop-utilities .tf-util-link, .ast-mobile-popup-inner div.tf-desktop-utilities a, aside.header-widget-area div.tf-desktop-utilities a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .tf-desktop-utilities .tf-search-capsule-input { display: none !important; visibility: hidden !important; width: 0 !important; } .tf-desktop-utilities svg, .tf-desktop-utilities a { color: #0F172A !important; } /* FIXED CURRENCY DROPDOWN PANEL OVERRIDES */ ul.tf-currency-sub-menu { position: absolute !important; top: 36px !important; left: auto !important; right: -60px !important; transform: none !important; width: 175px !important; background-color: #ffffff !important; background: #ffffff !important; border: 1.5px solid #0F172A !important; border-radius: 8px !important; padding: 6px !important; margin: 0 !important; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08) !important; z-index: 99999 !important; display: none !important; box-sizing: border-box !important; } .tf-currency-dropdown-wrapper:hover ul.tf-currency-sub-menu { display: block !important; } ul.tf-currency-sub-menu li { padding: 0 !important; margin: 0 !important; display: block !important; list-style: none !important; background: transparent !important; border: none !important; width: 100% !important; } /* HARD LOCK FLUSH LEFT LINK ALIGNMENT TRACKS */ .ast-mobile-popup-inner div.tf-desktop-utilities ul.tf-currency-sub-menu li a, aside.header-widget-area div.tf-desktop-utilities ul.tf-currency-sub-menu li a, ul.tf-currency-sub-menu li a { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; width: 100% !important; height: auto !important; padding: 8px 12px !important; color: #0F172A !important; font-size: 13px !important; font-weight: 600 !important; font-family: 'Inter', sans-serif !important; text-decoration: none !important; box-sizing: border-box !important; background: transparent !important; border: none !important; white-space: nowrap !important; } /* PURE TEXT HOVER STATE (MOBILE/TABLET) */ #ast-mobile-popup .tf-currency-sub-menu li a:hover, .ast-mobile-popup-inner div.tf-desktop-utilities ul.tf-currency-sub-menu li a:hover, aside.header-widget-area div.tf-desktop-utilities ul.tf-currency-sub-menu li a:hover, ul.tf-currency-sub-menu li a:hover { background-color: transparent !important; background: transparent !important; color: #42A5F5 !important; } /* 🌟 DEEP STRUCTURAL TARGETING: Forces ALL text and inner spans inside the hovered link to turn brand blue */ .tf-currency-sub-menu li a:hover *, #ast-mobile-popup .tf-currency-sub-menu li a:hover span, ul.tf-currency-sub-menu li a:hover .tf-curr-symbol { color: #42A5F5 !important; } ul.tf-currency-sub-menu li a::after, .tf-currency-dropdown-wrapper a::after { content: none !important; display: none !important; } .tf-curr-symbol { display: inline-block !important; min-width: 24px !important; margin-right: 4px !important; color: #64748b !important; /* Lighter grey styling by default */ font-weight: 500 !important; text-align: left !important; transition: color 0.1s ease !important; } /* VERTICAL NAVIGATION LIST RESTORE */ .ast-mobile-popup-inner .main-header-menu, .ast-mobile-popup-inner ul#ast-hf-mobile-menu, #ast-hf-mobile-menu { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } } /* ========================================================================== 4. GLOBAL DESKTOP SELECTION HOVER ENGAGEMENT OVERRIDES ========================================================================== */ .tf-currency-sub-menu li a:hover, .tf-currency-sub-menu li a:focus, #currencySaasPanel li a:hover { background-color: transparent !important; background: transparent !important; color: #42A5F5 !important; } /* 🌟 DEEP DESKTOP STRUCTURAL TARGETING */ .tf-currency-sub-menu li a:hover *, .tf-currency-sub-menu li a:focus span, #currencySaasPanel li a:hover .tf-curr-symbol, #ast-mobile-popup .tf-currency-sub-menu li a:hover * { color: #42A5F5 !important; } /* ========================================================================== THE SEARCH ICON JOYSTICK CONTROLLER (MOBILE & TABLET SPLIT) ========================================================================== */ /* 📱 1. PHONE BREAKPOINT CONTROLLER (0px to 544px) */ @media (max-width: 544px) { :root { /* 🕹ī¸ Adjust these variables for MOBILE PHONES only */ --search-slide-down: -20px; /* Positive = DOWN, Negative = UP */ --search-slide-right: 30px; /* Positive = RIGHT, Negative = LEFT */ } } /* 📑 2. TABLET BREAKPOINT CONTROLLER (545px to 921px) */ @media (min-width: 545px) and (max-width: 921px) { :root { /* 🕹ī¸ Adjust these variables for TABLETS only */ --search-slide-down: -10px; /* Positive = DOWN, Negative = UP */ --search-slide-right: 30px; /* Positive = RIGHT, Negative = LEFT */ } } /* ⚙ī¸ 3. UNIFIED STRUCTURAL ENGINE CONNECTORS (921px and below) */ @media (max-width: 921px) { /* Maps your active responsive variables straight to the search wrapper */ .tf-desktop-utilities .search-form, div.tf-desktop-utilities .search-form { position: relative !important; top: var(--search-slide-down) !important; left: var(--search-slide-right) !important; } } /* ========================================================================== DROPDOWN PANEL BOTTOM PADDING CUSHION (ALL DEVICES) ========================================================================== */ /* đŸ–Ĩī¸ 1. DESKTOP VIEW ADJUSTMENT (922px and up) */ @media (min-width: 922px) { ul.tf-currency-sub-menu { /* Adds space below USD on large desktop screens */ padding-bottom: 16px !important; } } /* 📱 2. MOBILE & TABLET VIEW ADJUSTMENT (921px and below) */ @media (max-width: 921px) { ul.tf-currency-sub-menu { /* Adds space below USD on phone and tablet views */ padding-bottom: 16px !important; } } /* ========================================================================== DESKTOP INLINE SPECIFICITY OVERRIDE ========================================================================== */ @media (min-width: 922px) { /* Hard-targets the base anchor tag to completely smash Astra's color priority */ .tf-desktop-utilities ul.tf-currency-sub-menu li a:hover { color: #42A5F5 !important; } } /* ========================================================================== TABLET & MOBILE CURRENCY SYMBOL CHARCOAL RESTORATION ========================================================================== */ @media (max-width: 921px) { /* Chains your parent utility class to out-specify Astra's inline rule */ .tf-desktop-utilities ul.tf-currency-sub-menu li a .tf-curr-symbol, ul.tf-currency-sub-menu li a .tf-curr-symbol { color: #0F172A !important; /* Locks your dark charcoal color over the light gray */ } } /* ========================================================================== VERTICAL JOYSTICK EXTENSION (UP & DOWN CONTROLLER) ========================================================================== */ /* 📱 PHONE VERTICAL CONTROLLER (0px to 544px) */ @media (max-width: 544px) { :root { /* 🕹ī¸ Positive numbers move DOWN. Negative numbers move UP. */ --search-nudge-y: 40px; --core4-nudge-y: 0px; } } /* 📑 TABLET VERTICAL CONTROLLER (545px to 921px) */ @media (min-width: 545px) and (max-width: 921px) { :root { /* 🕹ī¸ Positive numbers move DOWN. Negative numbers move UP. */ --search-nudge-y: 20px; --core4-nudge-y: 0px; } } /* ⚙ī¸ VERTICAL MARGIN ENGINE */ @media (max-width: 921px) { /* Safely nudges search vertically without disrupting horizontal position */ .tf-desktop-utilities .search-form, div.tf-desktop-utilities .search-form { margin-top: var(--search-nudge-y) !important; } /* Safely nudges core 4 vertically without disrupting horizontal position */ .tf-desktop-utilities .tf-currency-dropdown-wrapper, .tf-desktop-utilities .tf-notification-trigger, .tf-desktop-utilities .tf-cart-trigger, .tf-desktop-utilities .tf-account-trigger { margin-top: var(--core4-nudge-y) !important; } } /* ========================================================================== PRODUCTION FINALIZE: FULL HORIZONTAL WIDTH SPREAD FOR ICONS ========================================================================== */ @media (max-width: 1120px) { /* Force the inner utility block to expand completely across the internal card width */ .ast-mobile-popup-inner div.tf-desktop-utilities, div.tf-desktop-utilities, .custom-header-utility-row { display: flex !important; flex-direction: row !important; justify-content: space-between !important; /* 🌟 THE SPREAD SWITCH: Automatically distributes all 5 icons evenly */ align-items: center !important; width: 100% !important; /* Fills the container box completely */ max-width: 100% !important; /* 📐 SIDE BUFFER: Pushes the outer icons away from the sharp charcoal borders */ padding-left: 0px !important; padding-right: 10px !important; box-sizing: border-box !important; } /* Remove the conflicting fixed right-side margins used in earlier blocks */ .ast-mobile-popup-inner div.tf-desktop-utilities a, aside.header-widget-area div.tf-desktop-utilities a { margin-right: 0 !important; margin-left: 0 !important; } } /* 🌟 END OF GRID MATRIX OVERRIDES */ /* ========================================================================== PRODUCTION FINALIZE: STABLE OVERRIDE TO ERASE THE GREY HAIRLINE LINE ========================================================================== */ @media (max-width: 1120px) { /* Targets the icon block container and forcefully strips the border outline */ .ast-mobile-popup-inner .tf-desktop-utilities, .ast-mobile-popup-inner .custom-header-utility-row, #ast-mobile-popup .tf-desktop-utilities, aside.header-widget-area.widget-area.site-header-focus-item { border-bottom: none !important; /* 🌟 THE OVERRIDE SWITCH: Safely kills the line without breaking the code block */ } } /* ========================================================================== PRODUCTION FINALIZE: BRUTE-FORCE UPPER NAV TEXT CUSHION BUFFER ========================================================================== */ @media (max-width: 1120px) { /* Force the actual text link list to slide down and open up a beautiful breathing pocket */ .ast-mobile-popup-inner .main-header-menu, .ast-mobile-popup-inner ul#ast-hf-mobile-menu, #ast-hf-mobile-menu { /* 🌟 THE RESCUE INSET: Manually pushes the first text link down the page canvas */ /* Increase this to 65px or 75px if you want even MORE breathing room below the icons */ padding-top: 55px !important; } } /* ========================================================================== PRODUCTION MASTER FINALIZE: MOBILE-ONLY FLUID UTILITY ICON ROW ========================================================================== */ @media (max-width: 544px) { /* 🌟 MOBILE COHORT LOCK: Restricts code strictly to phone viewports */ /* Force the outer icon container track into a completely fluid block layout on phones */ #ast-mobile-popup aside.header-widget-area, .ast-mobile-popup-inner aside.header-widget-area, aside.header-widget-area.widget-area.site-header-focus-item { position: relative !important; /* Drops absolute coordinates so it scales natively */ top: 0 !important; left: 0 !important; right: auto !important; /* Layout boundaries and padding grids */ display: flex !important; flex-direction: row !important; justify-content: space-between !important; /* Spreads all 5 items evenly across the width track */ align-items: center !important; width: 100% !important; /* Spans perfectly to fit the container card bounds */ max-width: 100% !important; height: auto !important; margin: 0 0 25px 0 !important; /* Insets a 25px breathing pocket directly below the icons row */ padding: 10px 15px !important; /* Clean visual cushion track inside the box frame walls */ box-sizing: border-box !important; z-index: 9999 !important; } /* Force the inner utility elements to fill out the fluid responsive width matrix */ .ast-mobile-popup-inner div.tf-desktop-utilities, div.tf-desktop-utilities { display: flex !important; flex-direction: row !important; justify-content: space-between !important; width: 100% !important; } } /* 🌟 END OF MOBILE-ONLY SHIELD WALL */ /* ========================================================================== PRODUCTION FINALIZE: MOBILE ICONS ROW JOYSTICK CONTROLLER ========================================================================== */ @media (max-width: 544px) { /* Grab the outer mobile phone icon container tracking line */ #ast-mobile-popup aside.header-widget-area, .ast-mobile-popup-inner aside.header-widget-area, aside.header-widget-area.widget-area.site-header-focus-item { position: relative !important; /* 🕹ī¸ THE RESPONSIVE JOYSTICK CONTROLLER SYSTEM */ /* First value (0px) handles LEFT & RIGHT | Second value (0px) handles UP & DOWN */ /* Examples: transform: translate(10px, -15px) !important; -> Moves 10px RIGHT and 15px UP transform: translate(-10px, 20px) !important; -> Moves 10px LEFT and 20px DOWN */ transform: translate(-30px, 40px) !important; z-index: 9999 !important; } } /* ========================================================================== PRODUCTION FINALIZE: MOBILE HORIZONTAL ICON GAP CONTROLLER ========================================================================== */ @media (max-width: 544px) { /* 1. Pull the icons toward the middle to break the wide edge-to-edge stretch */ .ast-mobile-popup-inner div.tf-desktop-utilities, #ast-mobile-popup div.tf-desktop-utilities, div.tf-desktop-utilities { justify-content: center !important; /* Brings the group inward */ gap: 0 !important; /* Disables the rigid default gaps */ } /* 2. 🕹ī¸ THE GAP SLIDER: Adjusts the horizontal space between individual buttons */ .ast-mobile-popup-inner div.tf-desktop-utilities a, aside.header-widget-area div.tf-desktop-utilities a { /* Increase these numbers (e.g., 14px) to push the icons FURTHER APART */ /* Decrease these numbers (e.g., 6px) to bring the icons CLOSER TOGETHER */ margin-left: 5px !important; margin-right: 10px !important; margin-top: 0 !important; margin-bottom: 0 !important; display: inline-flex !important; } } /* ========================================================================== PRODUCTION FINALIZE: MOBILE HAMBURGER TRIGGER ALIGNMENT JOYSTICK ========================================================================== */ @media (max-width: 544px) { /* Target the true outer parent wrapper box highlighted in your inspector */ .ast-mobile-header-wrap .ast-button-wrap, #masthead .ast-button-wrap, div.ast-button-wrap { position: relative !important; /* 🕹ī¸ THE COMPLETE COMBINED BOX JOYSTICK */ /* First value (35px) handles LEFT & RIGHT | Second value (0px) handles UP & DOWN */ /* Increase the 35px to 45px or 50px if you want the whole blue circle pushed closer to the edge ➡ī¸ */ /* Decrease the 35px to 20px or 15px if you need to pull it back slightly to the left âŦ…ī¸ */ transform: translate(0px, 0px) !important; /* Clear any conflicting layout parameters from Astra's grid alignment engine */ margin-right: 0 !important; margin-left: 0 !important; } } /* ========================================================================== 1. GLOBAL LINK INTERACTION MOTORS (DESKTOP & FALLBACKS) ========================================================================== */ .tf-micro-footer-pillar .tf-footer-glow-link { color: #e2e8f0 !important; /* Soft premium off-white text */ font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; display: inline-block !important; padding: 0 !important; margin: 0 !important; transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } .tf-micro-footer-pillar .tf-footer-glow-link:hover { color: #f48fb1 !important; /* Elegant trans-pink illumination */ } /* ========================================================================== 2. TARGETED TABLET & MOBILE GLOBAL ENGINE (UP TO 921PX) ========================================================================== */ @media only screen and (max-width: 921px) { /* Safe container grid padding to protect touch display bezels */ .site-footer .widget-area, .site-footer .footer-widget-area, .site-footer [class*="inner-row"], .wp-block-group, .tf-micro-footer-pillar { padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } .tf-micro-footer-pillar h3 { font-size: 18px !important; font-weight: 800 !important; color: #ffffff !important; margin: 24px 0 16px 0 !important; font-family: 'Inter', sans-serif !important; } /* Collapse multi-column layout grid to clean vertical stack rows */ .site-footer .footer-builder-layout, .site-footer [class*="inner-row"], .site-footer [class*="sidebar"], .site-footer [class*="widget-area"], .site-footer .grid-layout, .site-footer [class*="col-"] { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; } .footer-brand-lockup { margin-left: 24px !important; padding-right: 24px !important; } .tf-micro-footer-pillar .tf-footer-glow-link { padding: 6px 0 !important; display: block !important; } } /* ========================================================================== 3. TARGETED TABLET INTERFACE ONLY (545PX TO 921PX) ========================================================================== */ @media only screen and (min-width: 545px) and (max-width: 921px) { .custom-tablet-nav-links { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; padding-left: 40px !important; margin-top: 35px !important; } .custom-tablet-nav-links a { font-size: 25px !important; font-weight: 800 !important; color: #1a202c !important; text-decoration: none !important; margin-bottom: 25px !important; transition: color 0.2s ease-in-out !important; } .custom-tablet-nav-links a:hover { color: #42A5F5 !important; } } @media only screen and (max-width: 544px) { .site-footer h3.wp-block-heading, .site-footer .widget-title, .site-footer section h3 { margin-top: 48px !important; } } /* ========================================================================== 3. TARGETED TABLET INTERFACE ONLY (545PX TO 921PX) ========================================================================== */ @media only screen and (min-width: 545px) and (max-width: 921px) { .custom-tablet-nav-links { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; padding-left: 40px !important; margin-top: 35px !important; } .custom-tablet-nav-links a { font-size: 25px !important; font-weight: 800 !important; color: #1a202c !important; text-decoration: none !important; margin-bottom: 25px !important; transition: color 0.2s ease-in-out !important; } .custom-tablet-nav-links a:hover { color: #42A5F5 !important; } } @media only screen and (max-width: 544px) { .site-footer h3.wp-block-heading, .site-footer .widget-title, .site-footer section h3 { margin-top: 48px !important; } } /* Pushes the fourth column container down just a hair on desktop views for a straight line alignment */ @media only screen and (min-width: 922px) { .site-footer-section-4, .site-footer-primary-section-4 { padding-top: 10px !important; } } /* ========================================================================== 4. NATIVE SOCIAL ROW BALANCER (UNIFORM HORIZONTAL EDGE) ========================================================================== */ @media only screen and (max-width: 921px) { /* Reset the parent icon list back to a clean horizontal left-flush track */ .site-footer ul.wp-block-social-links, .site-footer .wp-block-social-links { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; margin: 16px 0 0 0 !important; padding: 0 !important; } /* Force identical side-by-side gap width parameters between your items */ .site-footer ul.wp-block-social-links li.wp-social-link { margin-right: 5px !important; /* 🕹ī¸ CHANGE THIS: Increase/decrease to shift horizontal gaps */ margin-left: 0 !important; padding: 0 !important; } /* Pull ONLY the very first graphic icon left past the hidden padding wall */ .site-footer ul.wp-block-social-links li.wp-social-link:first-child { margin-left: 0px !important; /* 🕹ī¸ CHANGE THIS: Make more negative to slide everything further left */ } } /* ========================================================================== MOBILE NAV CATEGORY HEADLINE CUSHION RECOVERY ========================================================================== */ @media screen and (max-width: 1120px) { /* 1. Add air pocket space above the very first category list block */ .ast-mobile-popup-inner .main-header-menu > .menu-item:first-child, #ast-hf-mobile-menu > .menu-item:first-child { margin-top: 24px !important; /* 🕹ī¸ TWEAK THIS: Space between the top white bar and the first link */ } /* 2. Push separate menu section titles down so they don't choke the sections above them */ .ast-mobile-popup-inner .menu-item-has-children, #ast-hf-mobile-menu .menu-item-has-children, .ast-mobile-popup-inner .menu-item[class*="heading"] { margin-top: 32px !important; /* 🕹ī¸ TWEAK THIS: Air pocket gap directly above 'Marketplace' and main titles */ margin-bottom: 8px !important; /* Balanced distance gap right before its inner dropdown links start */ } } /* ========================================================================== MOBILE ONLY FOOTER SECTION HEADLINE BLOWOUT ========================================================================== */ @media screen and (max-width: 544px) { /* Target the container block layers themselves to force them to open up spacing */ .site-footer div[class*="widget_block"], .site-footer section[id*="block-"], .site-footer .footer-widget-area { margin-top: 20px !important; /* 🕹ī¸ TWEAK THIS: Controls the air gap ABOVE the section titles */ padding-top: 0 !important; } /* Force the raw text string headers to drop into line */ .site-footer div[class*="widget_block"] h3, .site-footer section[id*="block-"] h3, .site-footer h3.wp-block-heading { margin-top: 20px !important; margin-bottom: 12px !important; display: block !important; } } @media screen and (max-width: 921px) { .main-header-bar-navigation, .main-header-bar-navigation.toggle-on, .ast-builder-menu-mobile, .ast-mobile-popup-inner, .ast-mobile-popup-container { background-color: #ffffff !important; background: #ffffff !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; } } /* ========================================================================== DESKTOP NAVIGATION: EXPLICIT CONTROLS TO NUDGE CENTRAL LINKS LEFT/RIGHT ========================================================================== */ @media screen and (min-width: 922px) { /* 1. Global positioning control for the entire links cluster block */ .site-header-primary-section-left .main-header-bar-navigation { margin-left: -30px !important; /* 🕹ī¸ INCREASE to push links RIGHT (away from logo) */ margin-right: 20px !important; /* 🕹ī¸ INCREASE to push links LEFT (away from icons) */ } /* 2. Precision padding control inside the actual link elements */ #menu-item-3565 a.menu-link, .main-header-bar-navigation .menu-item a.menu-link { padding-left: 4px !important; /* 🕹ī¸ TWEAK THIS: Alters empty air space on left side of text */ padding-right: 14px !important; /* 🕹ī¸ TWEAK THIS: Alters empty air space on right side of text */ } } /* ========================================================================== PRODUCTION MASTER FINALIZE: BRING ICONS LAYER TO THE FRONT (MOBILE ONLY) ========================================================================== */ @media (max-width: 921px) { /* 1. Force the container to float properly on top of the backdrop */ #ast-mobile-popup aside.header-widget-area, .ast-mobile-popup-inner aside.header-widget-area, #ast-mobile-popup aside.header-widget-area.widget-area.site-header-focus-item, .ast-mobile-popup-content .widget { position: relative !important; z-index: 9999 !important; top: 40px !important; left: 0px !important; right: auto !important; transform: none !important; float: none !important; } /* 2. Unified Base Setup for your 5 utility icons */ div.tf-desktop-utilities { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-around !important; width: 100% !important; margin: 0 !important; position: relative !important; z-index: 99999 !important; border-radius: 8px !important; background-color: #ffffff !important; /* 📱 ADJUST MOBILE ONLY PADDING HERE */ padding: 40px 0 !important; } /* ========================================================================== ASTRA GLOBAL INLINE OVERRIDE ENGINE ========================================================================== */ @media screen and (max-width: 921px) { /* Targets the exact active layout class rule from your inspector */ div.tf-desktop-utilities { /* Force-shrinks the ballooned box padding from 43px down to clean limits */ padding-top: 15px !important; padding-bottom: 15px !important; /* 🕹ī¸ SLIDE THE ICONS ROW UP OR DOWN INSIDE THE CURVE FROM HERE */ margin-top: 25px !important; } } /* ========================================================================== TABLET SPECIFIC HEIGHT INTERCEPTOR (545PX - 921PX) ========================================================================== */ /* TABLET SPECIFIC HEIGHT INTERCEPTOR (545PX - 921PX) */ @media screen and (min-width: 545px) and (max-width: 921px) { div.tf-desktop-utilities { padding: 10px 0 !important; /* Forces the box to stay tight and compact */ /* 🕹ī¸ CHANGE THIS NUMBER TO MOVE ICONS UP OR DOWN */ margin-top: 90px !important; /* Try changing to -30px to pull up, or 40px to push down */ } } } /* 💡 FORCE-CLOSES ANY BROKEN OUTSIDE BRACKET LOCK UP ABOVE */ /* ========================================================================== LINK WIDTH UNIFICATION & TYPING CURSOR RECONCILIATION ========================================================================== */ @media screen and (max-width: 921px) { /* 1. Sets links to occupy the full row width so they align perfectly like the navbar */ ul.tf-currency-sub-menu li a, #currencySaasPanel li a { display: block !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; padding-left: 16px !important; /* Establishes a uniform western margin baseline */ } /* 2. Absolute lock to completely eliminate the blinking text insertion caret */ ul.tf-currency-sub-menu, ul.tf-currency-sub-menu *, #currencySaasPanel, #currencySaasPanel * { caret-color: transparent !important; /* Forces the text selection caret to go dark */ user-select: none !important; /* Restricts raw text highlighting across rows */ -webkit-user-select: none !important; } } /* ========================================================================== FORCE 0% BACKGROUND HOVER CHANGES ========================================================================== */ ul.tf-currency-sub-menu li a:hover, #currencySaasPanel li a:hover, ul.tf-currency-sub-menu li a:hover *, #currencySaasPanel li a:hover * { background-color: initial !important; /* Reverts background change entirely */ background: none !important; /* Blocks background injection */ color: #2563eb !important; /* Transitions text to brand blue */ } /* ========================================================================== PRODUCTION FINAL FIX: 2-COLUMN TABLET MATRIX BLUEPRINT ========================================================================== */ /* --- STEP 1: GLOBAL BASELINE RESET --- */ .site-footer div.ast-builder-footer-grid-columns.site-primary-footer-inner-wrap { display: flex !important; flex-flow: row wrap !important; /* Allows items to step down into clean rows */ align-items: flex-start !important; justify-content: space-between !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; gap: 40px 0 !important; /* Managed row space gaps */ } /* --- STEP 2: DESKTOP MODE (All 4 Side-by-Side) --- */ @media screen and (min-width: 922px) { .site-footer div.ast-builder-footer-grid-columns.site-primary-footer-inner-wrap > div { flex: 0 0 23% !important; max-width: 23% !important; width: 23% !important; } } /* --- STEP 3: THE TABLET STACK FIX (Logo Full Top / 2-Columns Below) --- */ @media screen and (max-width: 921px) and (min-width: 545px) { /* 1. Trans-First Logo takes the entire top row by itself */ .site-footer div.ast-builder-footer-grid-columns.site-primary-footer-inner-wrap > .site-footer-primary-section-1 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-bottom: -10px !important; } /* 2. Community & Legal (Left Column) */ .site-footer div.ast-builder-footer-grid-columns.site-primary-footer-inner-wrap > .site-footer-primary-section-2 { flex: 0 0 46% !important; max-width: 46% !important; width: 46% !important; } /* 3. For Creators (Right Column) */ .site-footer div.ast-builder-footer-grid-columns.site-primary-footer-inner-wrap > .site-footer-primary-section-3 { flex: 0 0 46% !important; max-width: 46% !important; width: 46% !important; } /* 4. Marketplace (Drops to Left Side under Community) */ .site-footer div.ast-builder-footer-grid-columns.site-primary-footer-inner-wrap > .site-footer-primary-section-4 { flex: 0 0 46% !important; max-width: 46% !important; width: 46% !important; margin-right: 54% !important; /* Forces the right side of this row to stay completely empty */ } } /* --- STEP 4: MOBILE MODE (Perfect Uniform Vertical Stack) --- */ @media screen and (max-width: 544px) { .site-footer div.ast-builder-footer-grid-columns.site-primary-footer-inner-wrap { flex-direction: column !important; gap: 36px !important; } .site-footer div.ast-builder-footer-grid-columns.site-primary-footer-inner-wrap > div { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } } /* Default State: Solid White */ .wp-social-link-snapchat svg { fill: #ffffff !important; stroke: #ffffff !important; stroke-width: 1px !important; transition: fill 0.2s ease, stroke 0.2s ease !important; /* Smooth color change */ } /* Hover State: Smooth Transition to Pink */ .wp-social-link-snapchat:hover svg { fill: #F48FB1 !important; /* Matches your signature pink */ stroke: #F48FB1 !important; /* Turns the border pink too */ } /* ========================================================================== PRODUCTION FINAL FIX: INDEPENDENT WIDGET ROW STACK MOTOR ========================================================================== */ /* 1. Target the main outer widget column frame wrapper directly */ aside[data-section="sidebar-widgets-footer-widget-4"] { display: flex !important; flex-direction: column !important; /* Forces the blocks to stack straight down */ align-items: flex-start !important; justify-content: flex-start !important; } /* 2. Target the block containers inside Widget 4 to drop onto new lines */ aside[data-section="sidebar-widgets-footer-widget-4"] .widget_block { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* 3. Freeze the Social Links list container strictly to the left edge */ aside[data-section="sidebar-widgets-footer-widget-4"] #block-28 .wp-block-social-links { display: flex !important; flex-wrap: nowrap !important; /* Stops icons from splintering vertically */ justify-content: flex-start !important; /* Aligns them flush left, removing the right shift */ margin-top: 16px !important; /* Clean spacing gap directly below "How to Buy" */ margin-left: 0 !important; /* Strips out the rightward drift layout push */ padding-left: 0 !important; gap: 16px !important; /* Firm distance spacing tracking between icons */ width: 100% !important; } /* ========================================================================== 4. FOOTER 14" LAPTOP TRANSITION STABILIZER (150% - 160% FIREFOX ZOOM) ========================================================================== */ @media screen and (min-width: 922px) and (max-width: 1024px) { /* Stabilizes the icon alignment right before the footer switches to tablet mode */ aside[data-section="sidebar-widgets-footer-widget-4"] #block-28.widget_block ul.wp-block-social-links { margin-left: -24px !important; /* 🕹ī¸ TWEAK HERE: If they still nudge right at 150%, change this to a negative number like -12px or -24px to pull them back inline */ } } /* ========================================================================== PRODUCTION ENGINE: RESPONSIVE DESCRIPTION GRID EXPANSION ========================================================================== */ /* Force the description text block to adapt fluidly to the new character count */ ul[class*="products"] p.prism-injected-desc, ul[class*="products"] .astra-shop-summary-wrap p, .astra-shop-summary-wrap .prism-injected-desc { display: block !important; overflow: visible !important; height: auto !important; max-height: none !important; white-space: normal !important; /* Forces longer descriptions onto new rows naturally */ /* Strips out hidden layout clipping filters */ -webkit-line-clamp: unset !important; line-clamp: unset !important; text-overflow: clip !important; margin-bottom: 24px !important; /* Safe air gap buffer down to your price text rows */ } /* ========================================================================== PRODUCTION MASTER CONFIGURATION: ABSOLUTE PRICE CONTROLS ========================================================================== */ /* 1. Establish a solid framing border box container for each card */ ul.products.columns-4 li.ast-blog-col div.astra-shop-summary-wrap, ul[class*="products"] li div.astra-shop-summary-wrap, .astra-shop-summary-wrap { display: flex !important; flex-direction: column !important; /* Stacks text, descriptions, and prices vertically */ /* 🕹ī¸ BACKGROUND CONTROL ADDED HERE */ background-color: transparent !important; } /* 🕹ī¸ FLUID GRID UPGRADE: Replaces rigid 380px height with a smart flex floor scale */ min-height: 320px !important; /* Standard height baseline for flat desktop layouts */ height: auto !important; /* Unlocks the container walls so boxes can grow safely on zoom */ padding-bottom: 16px !important; /* Clean spacing cushion at the absolute floor of the card */ box-sizing: border-box !important; } /* Update this single line inside your Rule 4 block: */ background-color: transparent !important; /* 🕹ī¸ UNMASK THE TEXT: Removes the solid white wall entirely */ /* 2. Clear out margins from the link container box to let text breathe */ ul.products.columns-4 li.ast-blog-col div.astra-shop-summary-wrap a.ast-loop-product__link, ul[class*="products"] li div.astra-shop-summary-wrap a { margin: 0 !important; display: block !important; } /* 3. Strip text limitations to let descriptions expand safely */ ul[class*="products"] p.prism-injected-desc, ul[class*="products"] .astra-shop-summary-wrap p { display: block !important; overflow: visible !important; height: auto !important; max-height: none !important; white-space: normal !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; text-overflow: clip !important; margin-bottom: 0 !important; } /* 4. MASTER ABSOLUTE POSITION ENGINE: FORCE PRICE CONTROL OVERRIDES */ ul.products.columns-4 li.ast-blog-col div.astra-shop-summary-wrap span.price, ul[class*="products"] div.astra-shop-summary-wrap span.price, .astra-shop-summary-wrap span.price { display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; width: 100% !important; bottom: -20px !important; text-align: center !important; /* 🕹ī¸ FIXED: Changed from #ffffff to transparent to completely dissolve the white background block */ background-color: transparent !important; padding-top: 15px !important; padding-bottom: 5px !important; } /* ========================================== PRODUCTION ENGINE: PRODUCT TITLE STYLING ========================================== */ /* Keeps titles uniform and vertically squares up the rows across all items */ ul.products.columns-4 li.ast-blog-col div.astra-shop-summary-wrap .woocommerce-loop-product__title, ul[class*="products"] li.product div.astra-shop-summary-wrap .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title { background-color: transparent !important; /* Clean layout with zero diagnostic backgrounds */ padding: 10px 16px !important; /* 🕹ī¸ FIXED: Clean 16px horizontal alignment padding layout */ border-radius: 6px !important; min-height: 5px !important; /* Higher specific value to force zoom override alignment */ display: flex !important; /* 🕹ī¸ HORIZONTAL ROW ALIGNMENT FIX: Anchors the first word of every title straight to the top ceiling */ align-items: flex-start !important; margin-top: 0px !important; margin-bottom: 12px !important; box-sizing: border-box !important; } /* ========================================== PRODUCTION ENGINE: DESCRIPTION BOX STYLING ========================================== */ /* Keeps the dynamic description rows perfectly level and aligned across all cards */ ul[class*="products"] p.prism-injected-desc, ul[class*="products"] .astra-shop-summary-wrap p, .astra-shop-summary-wrap .prism-injected-desc { background-color: transparent !important; padding: 12px 16px !important; border-radius: 6px !important; min-height: 260px !important; box-sizing: border-box !important; margin-top: -28px !important; /* Preserves your closer title spacing gap */ /* 🕹ī¸ DESCRIPTION WIDTH CONTROL LIMIT */ max-width: 450px !important; /* Locks the content container to a maximum thickness of 450px */ } /* ========================================== PRODUCTION ENGINE: CATEGORY ALIGNMENT LOCK ========================================== */ /* Forces all category tags to occupy an identical vertical footprint */ ul[class*="products"] li.product span.ast-woo-product-category, ul.products li.product span.ast-woo-product-category { min-height: 34px !important; /* Squares up the category layer so titles line up perfectly */ display: flex !important; align-items: center !important; /* Centers shorter, single-line text vertically inside the layer */ box-sizing: border-box !important; /* 🕹ī¸ FULL-WIDTH SPACING BALANCE LOCK */ width: 100% !important; /* Explicitly commands the box to stretch wall-to-wall */ padding-left: 16px !important; /* 🕹ī¸ FIXED: Clean 16px horizontal alignment padding layout */ padding-right: 16px !important; /* 🕹ī¸ FIXED: Clean 16px horizontal alignment padding layout */ } /* ========================================== PRODUCTION ENGINE: EXCLUSIVE MOBILE RESPONSIVE OVERRIDES ========================================== */ @media (max-width: 600px) { /* 1. Unlocks the text wrapper block from the rigid desktop height constraint */ ul[class*="products"] li div.astra-shop-summary-wrap, .astra-shop-summary-wrap { height: auto !important; padding-top: 14px !important; /* 🕹ī¸ MOBILE SPACE FORCING: Creates a clean gap right under image thumbnails */ padding-bottom: 70px !important; /* Preserves clear layout floor room for absolute prices */ } /* 2. Forces responsive padding structure on category text box rows */ ul[class*="products"] li.product span.ast-woo-product-category, ul.products li.product span.ast-woo-product-category { margin-top: 0 !important; margin-bottom: 12px !important; padding-left: 16px !important; /* 🕹ī¸ MOBILE SPACE FORCING: Maintains 16px layout on small viewports */ padding-right: 16px !important; } } /* ========================================== PRODUCTION ENGINE: SOFT CARD FRAME (OUTLINE) ========================================== */ /* Defines the crisp boundary shell around each item */ ul.products.columns-4 > li.ast-blog-col, ul[class*="products"] > li { border: 1px solid #e1e8ed !important; /* Soft, neutral light-gray frame outline */ border-radius: 12px !important; /* Smoothly rounds the outer corners of the card */ padding: 16px !important; /* Internal air gap buffer to keep contents off the border lines */ background-color: #ffffff !important; /* Locks individual card backdrops to clean solid white */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important; /* Almost invisible flat structural grounding shadow */ transition: all 0.3s ease !important; /* Smooth animation timing whenever a mouse moves over it */ } /* Elevates the card container slightly when a customer hovers over it */ ul.products.columns-4 > li.ast-blog-col:hover, ul[class*="products"] > li:hover { border-color: #ced6e0 !important; /* Darkens the border line slightly on hover */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06) !important; /* Gives a premium, soft floating lift effect */ transform: translateY(-4px) !important; /* Physically nudges the card up 4 pixels for visual feedback */ } /* 🕹ī¸ ASTRA BLEED OVERRIDE ENGINE: Neutralizes negative theme margins to un-hug the image */ ul[class*="products"] li.product .astra-shop-thumbnail-wrap, ul[class*="products"] li.product a.woocommerce-LoopProduct-link, ul.products li.product .astra-shop-thumbnail-wrap { margin: 0 !important; /* Completely wipes out Astra's wall-to-wall negative stretching */ padding: 0 !important; display: block !important; overflow: hidden !important; border-radius: 8px !important; /* Cleanly rounds the thumbnail corner edges inside your gray frame */ } /* ========================================================================== PRODUCTION ENGINE: MOBILE IMAGE BUFFER PADDING ========================================================================== */ @media (max-width: 599px) { /* 🕹ī¸ Targets the raw image asset to create a clean top, left, and right cushion frame */ .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img, .woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link img, ul.products.columns-4 li.ast-blog-col img { padding-top: 14px !important; /* Forces a clean air gap buffer below the top gray line */ padding-left: 14px !important; /* Pulls the image edge inward from the left gray border wall */ padding-right: 14px !important; /* Pulls the image edge inward from the right gray border wall */ box-sizing: border-box !important; width: 100% !important; /* Ensures the image scales smoothly inside the padding bounds */ } } /* ========================================== PRODUCTION ENGINE: OVERALL CARD LENGTH RESCUE ========================================== */ /* Shrunk-wraps the outer card frames tightly to remove the giant empty space below the price */ ul.products.columns-4 > li.ast-blog-col, ul[class*="products"] > li.product, ul.products li.product { height: auto !important; /* Overpowers the theme's forced vertical stretching */ min-height: auto !important; /* Clears out hidden vertical floor restrictions */ display: inline-block !important; /* Converts the layout engine to wrap tightly around contents */ vertical-align: top !important; /* Keeps the cards aligned cleanly along the top edge row */ } /* ======================================================== 🛒 THE TRANS-FIRST SHOP ALIGNMENT OVERHAUL ======================================================== */ /* Force layout wrapper into a dynamic flexbox layer */ .ast-woocommerce-container { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 20px !important; width: 100% !important; margin-bottom: 28px !important; } /* Fix result count clipping and sizing */ .woocommerce-result-count { margin: 0 0 15px 0 !important; /* Expanded bottom safety gap by 5px */ padding: 0 !important; white-space: nowrap !important; flex: 0 1 auto !important; line-height: 1.7 !important; /* Added extra breathing room for letters */ } /* Prevent the ordering dropdown form from expanding wildly */ form.woocommerce-ordering { margin: 0 !important; padding: 0 !important; flex: 0 1 auto !important; width: 240px !important; /* Sleek desktop width constraint */ } /* Force clean vertical stacking on tablet and mobile viewports */ @media (max-width: 768px) { .ast-woocommerce-container { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .woocommerce-result-count { width: auto !important; flex: 0 1 auto !important; margin-bottom: 6px !important; } form.woocommerce-ordering { width: 100% !important; flex: 1 1 100% !important; } } /* ========================================================================== WOOCOMMERCE TWENTYTWENTY INTERCEPT EXCLUSION Smashes the forced compression rule seen in the inspector panel. ========================================================================== */ /* Overwrites the narrow column logic to let the grid utilize the 1200px bounds */ .theme-twentytwenty .wc-block-grid.has-4-columns ul.wc-block-grid__products .wc-block-grid__product, .wc-block-grid.has-4-columns ul.wc-block-grid__products li.wc-block-grid__product { flex: 1 1 calc(25% - 15px) !important; max-width: calc(25% - 15px) !important; min-width: 220px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; } /* Forces the layout container to hold all 4 items on a single horizontal plane */ .theme-twentytwenty .wc-block-grid.has-4-columns ul.wc-block-grid__products, .wc-block-grid.has-4-columns ul.wc-block-grid__products { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; /* Prevents rows from collapsing down */ gap: 20px !important; width: 100% !important; } /* ========================================================================== BASKET PAGE: UTILITY CLEANUP & BASE CONFIGURATION Removes dynamic buttons, isolates dividers, and establishes card radiuses. ========================================================================== */ /* 1. Purge the action buttons completely from the empty basket view */ .page-id-8 .wc-block-grid__product-add-to-cart, .page-id-8 .wp-block-button.wc-block-grid__product-add-to-cart, .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart { display: none !important; } /* 2. Purge the legacy three-dot separator line entirely from the layout */ .page-id-8 hr.wp-block-separator.is-style-dots, .wp-block-woocommerce-empty-cart-block hr.wp-block-separator, .page-id-8 hr.wp-block-separator { display: none !important; } /* 3. Force your signature 8px corner radius onto these product container blocks */ .page-id-8 .wc-block-grid__products .wc-block-grid__product, .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { border-radius: 8px !important; overflow: hidden !important; /* Forces the clipping mask to protect the corners */ } /* ========================================================================== BASKET PAGE: UNIFIED CARD HEIGHT HARMONIZER Copies the min-height alignment physics from your main shop page loop. ========================================================================== */ /* 1. Target the basket title block to establish a strict minimum height */ .page-id-8 .wc-block-grid__product .wc-block-grid__product-title, .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { min-height: 64px !important; /* Matches your exact shop title min-height */ display: flex !important; align-items: flex-start !important; margin-top: 10px !important; /* Matches space below the category label */ margin-bottom: 9px !important; } /* 2. Target the basket description excerpts to lock their height box bounds */ .page-id-8 .wc-block-grid__product .wc-block-grid__product-excerpt, .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-excerpt, .page-id-8 .wc-block-grid__product p { min-height: 75px !important; /* Matches your exact prism-injected-desc min-height */ margin-bottom: 16px !important; overflow: hidden !important; /* Prevents trailing text from breaking the card footer */ } /* ========================================================================== BASKET PAGE: WRAPPER LINK STRIP & PRICE VERTICAL ANCHOR Strips the global blue anchor layout overrides and aligns the prices. ========================================================================== */ /* 1. Kill the global card link blue color and text underlines completely */ .page-id-8 .wc-block-product-new a, .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link, .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link * { color: #0f172a !important; text-decoration: none !important; } /* 2. Format the parent card to use flexbox layout so we can control heights */ .page-id-8 .wc-block-grid__products .wc-block-grid__product { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } /* 3. Re-enforce your clean left-alignment for titles and descriptions */ .page-id-8 .wc-block-grid__product-title, .page-id-8 .prism-injected-desc { text-align: left !important; width: 100% !important; } /* 4. Force the price block to anchor flush to the bottom of the card frame */ .page-id-8 .wc-block-grid__product-price, .page-id-8 .price, .page-id-8 .amount { margin-top: auto !important; /* Pushes the price straight down away from the description */ padding-top: 16px !important; /* Keeps a balanced cushion above the numbers */ display: block !important; text-align: left !important; /* Left-aligns the price to perfectly match your shop */ width: 100% !important; } /* Center all WooCommerce prices globally */ .woocommerce ul.products li.product .price, .woocommerce-page .price .amount { text-align: center !important; justify-content: center !important; } /* Specific fix for your layout grid blocks */ .grid-product-price, .page-id-8 .wc-block-grid__product-price { text-align: center !important; } /* ========================================================================== CUSTOMER DASHBOARD ARCHITECTURE (MY ACCOUNT ENDPOINT) Strips out legacy theme components and forces uniform flat card layouts. ========================================================================== */ /* 1. Format the native customer account sidebar navigation tabs */ .page-id-10 .woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; margin: 0 !important; border: 1px solid #e2e8f0 !important; /* Soft gray border baseline framework */ border-radius: 8px !important; /* Standard 8px site corner curls */ background: #ffffff !important; overflow: hidden !important; } /* Individual tab navigation links layout */ .page-id-10 .woocommerce-MyAccount-navigation i, .page-id-10 .woocommerce-MyAccount-navigation li { border-bottom: 1px solid #e2e8f0 !important; margin: 0 !important; } .page-id-10 .woocommerce-MyAccount-navigation li:last-child { border-bottom: none !important; /* Removes trailing border lines */ } .page-id-10 .woocommerce-MyAccount-navigation li a { display: block !important; padding: 12px 16px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #475569 !important; text-decoration: none !important; transition: background 0.15s ease-in-out !important; } /* Tab Hover State */ .page-id-10 .woocommerce-MyAccount-navigation li a:hover, .page-id-10 .woocommerce-MyAccount-navigation li.is-active a { background: #f8fafc !important; /* Crisp flat background activation fill */ color: #0f172a !important; } /* 2. Format the Main Content Greeting Welcome Card */ .page-id-10 .woocommerce-MyAccount-content { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 24px !important; box-sizing: border-box !important; box-shadow: none !important; /* Kills active shadows on static blocks */ } /* Forces the titles to match the exact horizontal padding of your description blocks */ .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title { padding: 0 16px !important; box-sizing: border-box !important; width: 100% !important; } /* Forces both the category tag and product title to align with the description */ .wc-block-grid__product-link .meta-category, .wc-block-grid__product-link .wc-block-grid__product-title { padding: 0 16px !important; box-sizing: border-box !important; display: block !important; width: 100% !important; } /* ========================================================================== STATIC PRODUCT GRID CARD & BUTTON HARMONY ========================================================================== */ /* 1. Reset description block formatting & alignment track */ ul.products li.product p.prism-injected-desc, .astra-shop-summary-wrap p.prism-injected-desc, p.prism-injected-desc { text-align: left !important; padding: 0 16px !important; margin-top: 8px !important; margin-bottom: 12px !important; display: block !important; width: 100% !important; box-sizing: border-box !important; background: transparent !important; background-color: transparent !important; color: #475569 !important; pointer-events: none !important; font-size: 13px !important; line-height: 1.5 !important; } /* Holds its color perfectly steady even when entire product grid card box is hovered */ ul.products li.product:hover p.prism-injected-desc, .astra-shop-summary-wrap:hover p.prism-injected-desc { color: #475569 !important; background: transparent !important; } /* 2. Standardize Title and Category links track alignment formatting */ .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title, .wc-block-grid__product-link .meta-category, .wc-block-grid__product-link .wc-block-grid__product-title, ul.products li.product .woocommerce-loop-product__title { padding: 0 16px !important; box-sizing: border-box !important; display: block !important; width: 100% !important; text-align: left !important; } /* 3. Re-align and balance native grid add to cart buttons spacing pocket */ ul.products li.product .button.product_type_simple, ul.products li.product a.button { margin: 12px 16px 16px 16px !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; box-sizing: border-box !important; } /* ========================================================================== TABLET TRACK LAYER STACKING FIX ========================================================================== */ div.tf-desktop-utilities { z-index: 9999 !important; /* Forces the icons to sit on the top visual layer */ } /* ========================================================================== MOBILE & TABLET CURRENCY SELECTION CLICK EVENT FIX ========================================================================== */ @media (max-width: 921px) { /* 1. COMPLETELY WIPE THE HOVER TRIGGER FOR PHONES & TABLETS */ .tf-currency-dropdown-wrapper:hover ul.tf-currency-sub-menu { display: none !important; } /* 2. THE STICKY CLICK ENGINE: Holds the menu open after a tap */ .tf-currency-trigger:focus + ul.tf-currency-sub-menu, .tf-currency-dropdown-wrapper:focus-within ul.tf-currency-sub-menu { display: block !important; } } /* ========================================================================== 4. Dokan Dashboard Page ========================================================================== */ /* --- VENDOR AVATAR MENU TYPOGRAPHY --- */ /* 1. RESTING STATE: Force your signature charcoal color across the text label string */ :is(.pui-root, .dokan-layout) .header-avatar, :is(.pui-root, .dokan-layout) .header-avatar span, div[class*="header-avatar"] span { color: #374151 !important; /* Premium soft dark charcoal text */ } /* Force the adjacent small indicator chevron vector paths to charcoal */ :is(.pui-root, .dokan-layout) .header-avatar svg, :is(.pui-root, .dokan-layout) .header-avatar svg path { stroke: #374151 !important; } /* 2. HOVER STATE: Snap text and icons cleanly to your signature Sky Blue color string */ :is(.pui-root, .dokan-layout) .header-avatar:hover, :is(.pui-root, .dokan-layout) .header-avatar:hover span { color: #42A5F5 !important; /* Signature Sky Blue on hover */ } :is(.pui-root, .dokan-layout) .header-avatar:hover svg path { stroke: #42A5F5 !important; /* Signature Sky Blue chevron line on hover */ } /* 3. HOVER BACKGROUND STATE: Completely flatten the container background layout (Zero Hover Depth) */ :is(.pui-root, .dokan-layout) .header-avatar:hover, div[class*="header-avatar"]:hover { background-color: transparent !important; /* Wipes out the nasty light grey box fill completely */ background: transparent !important; box-shadow: none !important; } /* --- SIDEBAR HEADER HOVER BACKGROUND REMOVAL --- */ /* Force the upper brand link block container to stay completely transparent on hover */ aside.dokan-frontend-sidebar a.flex.items-center.gap-3\.5:hover, aside.dokan-frontend-sidebar a[href*="trans-first.com"]:hover, .dokan-frontend-layout aside.dokan-frontend-sidebar a:first-child:hover { background-color: transparent !important; background: transparent !important; box-shadow: none !important; } /* 1. Recolor the Main Sidebar Container (Changes from Purple to Solid White) */ aside.dokan-frontend-sidebar.bg-primary-500 { background-color: #ffffff !important; border-right: 1px solid #e5e7eb !important; /* Soft gray separation line */ } /* 2. Fix Text & Icon Visibility Inside the Sidebar */ aside.dokan-frontend-sidebar.bg-primary-500, aside.dokan-frontend-sidebar.bg-primary-500 a, aside.dokan-frontend-sidebar.bg-primary-500 span, aside.dokan-frontend-sidebar.bg-primary-500 svg { color: #4b5563 !important; /* Changes text from white/purple-tint to soft dark gray */ fill: #4b5563 !important; /* Handles custom vector icons */ } /* 3. Hover and Active Menu Link States (Static Soft Gray Boxes, Zero Depth) */ aside.dokan-frontend-sidebar.bg-primary-500 a:hover, aside.dokan-frontend-sidebar.bg-primary-500 a.active, aside.dokan-frontend-sidebar.bg-primary-500 .active-menu-item-class-here { background-color: #f3f4f6 !important; /* Soft flat background fill */ color: #111827 !important; /* Darker, high-contrast text on hover */ border-radius: 6px !important; } /* 4. Target the Main Content Panel Wrapper (Ensuring Static Flat Alignment) */ main.flex-1.border.border-gray-200.bg-white { border-color: #e5e7eb !important; /* Re-locks your uniform soft gray line */ background-color: #ffffff !important; box-shadow: none !important; /* Zero depth on the primary workspace wrapper */ } /* 5. Force Global Typography Sync */ .dokan-vendor-dashboard-layout-root, .dokan-vendor-dashboard-layout-root * { font-family: inherit !important; /* Strips custom layout fonts, inherits Astra styling */ } /* Hide the default globe/wireframe SVG vector graphic completely */ aside.dokan-frontend-sidebar .site-icon svg, aside.dokan-frontend-sidebar span[class*="site-icon"] svg { display: none !important; } /* Inject your custom branding image directly into the vacant box */ aside.dokan-frontend-sidebar .site-icon, aside.dokan-frontend-sidebar span[class*="site-icon"] { background-image: url('https://trans-first.com/wp-content/uploads/2026/05/Trans-first.jpg') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background-color: transparent !important; /* Forces a flat white background layout boundary */ width: 36px !important; /* Locks structural alignment matching your sidebar spacing */ height: 37px !important; display: inline-block !important; } /* 1. Pull the premium Fraunces font into your stylesheet */ @import url('https://googleapis.com'); /* 2. Target the "Trans-First" title text string shown in your inspector */ aside.dokan-frontend-sidebar span.text-xl.font-bold, aside.dokan-frontend-sidebar span[class*="text-"] { font-family: 'Fraunces', serif !important; font-weight: 700 !important; /* Locks a clean, bold presence */ letter-spacing: -0.02em !important; /* Subtle minimal tracking adjustment */ } /* 3. Apply it to the main content headings across your vendor panel dashboard */ .dokan-vendor-dashboard-layout-root h1, .dokan-vendor-dashboard-layout-root h2, .dokan-vendor-dashboard-layout-root h3, .dokan-vendor-dashboard-layout-root main [class*="text-2xl"], .dokan-vendor-dashboard-layout-root main [class*="text-3xl"] { font-family: 'Fraunces', serif !important; letter-spacing: -0.01em !important; } /* 1. Pull the premium Fraunces font into your stylesheet */ @import url('https://googleapis.com'); /* 2. Target only the "Trans-First" title text string in the sidebar */ aside.dokan-frontend-sidebar span.text-xl.font-bold, aside.dokan-frontend-sidebar span[class*="text-w-8"] + span { font-family: 'Fraunces', serif !important; font-size: 20px !important; /* <--- CHANGE THIS NUMBER TO RESIZE THE TITLE */ font-weight: 700 !important; letter-spacing: -0.02em !important; color: #111827 !important; /* Crisp, high-contrast dark gray */ } /* --- SIDEBAR MENU TYPOGRAPHY & CHARCOAL COLOR --- */ /* Force Inter font family and dark charcoal color on all sidebar navigation links */ aside.dokan-frontend-sidebar nav ul li a, aside.dokan-frontend-sidebar nav ul li a span, aside.dokan-frontend-sidebar nav .list-none a, aside.dokan-frontend-sidebar nav [class*="text-sm"] { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: #4b5563 !important; /* Premium dark charcoal text */ } /* Static Flat Hover & Active States (High-contrast dark text, Zero Depth) */ aside.dokan-frontend-sidebar nav ul li a:hover, aside.dokan-frontend-sidebar nav ul li a:hover span, aside.dokan-frontend-sidebar nav ul li a[data-active="true"], aside.dokan-frontend-sidebar nav ul li a[data-active="true"] span { background-color: #f3f4f6 !important; /* Soft flat background box fill */ color: #111827 !important; /* High-contrast near-black active text */ border-radius: 6px !important; } /* --- SIDEBAR LOGO SPACING & TEXT GAP REDUCTION --- */ /* Target the exact escaped class name seen in your inspector tree layout */ aside.dokan-frontend-sidebar a.flex.items-center.gap-3\.5, .dokan-frontend-layout aside.dokan-frontend-sidebar a[class*="gap-3.5"] { gap: 3px !important; /* Reduces the gap spacing property to a tight 8px alignment */ } /* Eliminate any residual horizontal margin pushing on the adjacent branding text block */ aside.dokan-frontend-sidebar span.text-xl.font-bold.text-white, aside.dokan-frontend-sidebar span[data-state="closed"] { margin-left: 0 !important; padding-left: 0 !important; } /* --- STEP 1: FORCE CHARCOAL RESTING COLOR --- */ /* Force clean charcoal text at rest */ aside.dokan-frontend-sidebar nav ul li a.group, aside.dokan-frontend-sidebar nav ul li a.group span, aside.dokan-frontend-sidebar nav ul li a.group span.text-sm { color: #4b5563 !important; } /* Force clean charcoal icon lines at rest */ aside.dokan-frontend-sidebar nav ul li a.group svg, aside.dokan-frontend-sidebar nav ul li a.group svg path { stroke: #4b5563 !important; fill: none !important; } /* --- STEP 2: REMOVE HOVER BACKGROUND BOX --- */ /* Completely wipe out the grey background fill on hover and active states */ aside.dokan-frontend-sidebar nav ul li a.group:hover, aside.dokan-frontend-sidebar nav ul li a[class*="hover:bg-"]:hover, aside.dokan-frontend-sidebar nav ul li a[data-active="true"] { background-color: transparent !important; /* Forces background to remain clean white */ box-shadow: none !important; /* Ensures zero layout depth */ } /* --- STEP 2B: WIPE INTERNAL INNER HOVER BACKGROUNDS --- */ /* Force all sub-elements, spans, and wrappers inside the links to stay 100% transparent */ aside.dokan-frontend-sidebar nav ul li a.group:hover *, aside.dokan-frontend-sidebar nav ul li a.group *[class*="hover:bg-"]:hover, aside.dokan-frontend-sidebar nav ul li a.group span:hover { background-color: transparent !important; background: transparent !important; box-shadow: none !important; } /* --- STEP 3: TURN TEXT AND ICONS BLUE ON HOVER --- */ /* Turn text strings to your brand blue on hover and active selection states */ aside.dokan-frontend-sidebar nav ul li a.group:hover, aside.dokan-frontend-sidebar nav ul li a.group:hover span, aside.dokan-frontend-sidebar nav ul li a.group[data-active="true"], aside.dokan-frontend-sidebar nav ul li a.group[data-active="true"] span { color: #42A5F5 !important; transition: color 0.2s ease; /* Subtle, professional transition response */ } /* Turn vector icon outlines to your brand blue on hover and active selection states */ aside.dokan-frontend-sidebar nav ul li a.group:hover svg, aside.dokan-frontend-sidebar nav ul li a.group:hover svg path, aside.dokan-frontend-sidebar nav ul li a.group[data-active="true"] svg, aside.dokan-frontend-sidebar nav ul li a.group[data-active="true"] svg path { stroke: #42A5F5 !important; transition: stroke 0.2s ease; } /* --- STEP 4C: SOFTEN TEXT TO PREMIUM CHARCOAL --- */ /* Adjust resting text elements to a softer premium charcoal shade */ aside.dokan-frontend-sidebar nav ul li a.group span, aside.dokan-frontend-sidebar nav ul li a.group span.text-sm, aside.dokan-frontend-sidebar nav [class*="text-"] { color: #374151 !important; /* Balanced charcoal shade, lighter than black */ } /* Adjust vector icon lines to match the softer charcoal tone */ aside.dokan-frontend-sidebar nav ul li a.group svg, aside.dokan-frontend-sidebar nav ul li a.group svg path { stroke: #374151 !important; } /* Keep the interactive sky blue color override completely safe */ aside.dokan-frontend-sidebar nav ul li a.group:hover, aside.dokan-frontend-sidebar nav ul li a.group:hover span { color: #42A5F5 !important; } aside.dokan-frontend-sidebar nav ul li a.group:hover svg path { stroke: #42A5F5 !important; } /* --- MAIN HEADER TOGGLE BUTTON CUSTOMIZATION --- */ /* 1. RESTING STATE: Force matching dark charcoal on the toggle bars icon */ main header button[aria-label="Toggle sidebar menu"] svg, main header button[aria-label="Toggle sidebar menu"] svg path, main header button[class*="hover:bg-gray-100"] svg path { stroke: #374151 !important; /* Matches your softer charcoal brand color */ transition: stroke 0.2s ease !important; } /* Strip out default backgrounds and depth tracking elements at rest */ main header button[aria-label="Toggle sidebar menu"], main header button[class*="hover:bg-gray-100"] { background-color: transparent !important; background: transparent !important; box-shadow: none !important; } /* 2. HOVER STATE: Snap the vector paths directly to Sky Blue on interaction */ main header button[aria-label="Toggle sidebar menu"]:hover svg path, main header button[class*="hover:bg-gray-100"]:hover svg path { stroke: #42A5F5 !important; /* Snaps vector bars directly to Sky Blue */ } /* Wipe child background blocks to keep the layout entirely clean (Zero Depth) */ main header button[aria-label="Toggle sidebar menu"]:hover, main header button[class*="hover:bg-gray-100"]:hover { background-color: transparent !important; background: transparent !important; } /* --- TOGGLE BUTTON DEEP HOVER OVERRIDE --- */ /* Match Dokan's component layer specificity to turn the background mask completely clear */ :is(.pui-root, .dokan-layout) header button.p-2:hover, :is(.pui-root, .dokan-layout) button[aria-label="Toggle sidebar menu"]:hover, .dokan-vendor-dashboard-layout-root main header button.p-2:hover { background-color: transparent !important; background: transparent !important; } /* --- FIXED WHITE CLOSE BUTTON STATE --- */ /* Hide the plugin's default line image */ button.cky-btn-close img { display: none !important; } /* Force the button box wrapper to remain block-visible */ button.cky-btn-close { display: flex !important; position: relative !important; } /* Inject pure white crossing lines inside the boundaries unconditionally */ button.cky-btn-close::before, button.cky-btn-close::after { content: "" !important; position: absolute !important; width: 14px !important; /* Line length */ height: 2px !important; /* Line thickness */ background-color: #ffffff !important; /* Pure white text string */ top: 50% !important; left: 50% !important; } /* Cross the lines to lock the X layout */ button.cky-btn-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; } button.cky-btn-close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* --- COOKIE BANNER LOWER BUTTON COLOR CORRECTION --- */ /* Target the exact bottom action button classes inside the modal */ .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper .cky-btn-reject, .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper .cky-btn-preferences, .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper .cky-btn-accept, div.cky-preference-btn-wrapper button.cky-btn { background-color: #42A5F5 !important; /* Force your signature blue background */ border-color: #42A5F5 !important; /* Force your signature blue border lines */ color: #ffffff !important; /* Force clean white text strings */ box-shadow: none !important; /* Enforce zero layout depth */ } /* Force hover states into your signature charcoal across all three blocks */ .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper .cky-btn-reject:hover, .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper .cky-btn-preferences:hover, .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper .cky-btn-accept:hover, div.cky-preference-btn-wrapper button.cky-btn:hover { background-color: #374151 !important; /* Transitions to your brand slate charcoal */ border-color: #374151 !important; } /* --- PREFERENCE ACCORDION BUTTON COLOR RESET --- */ /* Target the specific darker blue functional boxes inside the preference body list */ .dokan-vendor-dashboard-layout-root .cky-accordion-btn, .dokan-vendor-dashboard-layout-root button[data-cky-tag="detail-category-title"], div[id*="ckyDetailCategory"] button { background-color: #42A5F5 !important; /* Forces your signature brand Sky Blue */ border-color: #42A5F5 !important; color: #ffffff !important; /* Crisp white text string */ } /* Force hover states into your signature brand slate charcoal */ .dokan-vendor-dashboard-layout-root .cky-accordion-btn:hover, .dokan-vendor-dashboard-layout-root button[data-cky-tag="detail-category-title"]:hover { background-color: #374151 !important; /* Transitions cleanly to charcoal */ border-color: #374151 !important; } /* --- BOTTOM FOOTER BUTTON COLOR FIX --- */ /* Target the exact individual accept and reject button tags inside the footer wrapper */ .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper button.cky-btn-accept, .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper button.cky-btn-reject, button.cky-btn-accept, button.cky-btn-reject { background-color: #42A5F5 !important; /* Forces your signature brand Sky Blue */ border-color: #42A5F5 !important; /* Uniform structural boundary lines */ color: #ffffff !important; /* Crisp white text string */ } /* Force hover states into your brand slate charcoal */ .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper button.cky-btn-accept:hover, .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper button.cky-btn-reject:hover, button.cky-btn-accept:hover, button.cky-btn-reject:hover { background-color: #374151 !important; /* Transitions cleanly to charcoal */ border-color: #374151 !important; } /* --- BOTTOM FOOTER BUTTON COLOR FIX --- */ /* Target the exact individual accept and reject button tags inside the footer wrapper */ .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper button.cky-btn-accept, .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper button.cky-btn-reject, button.cky-btn-accept, button.cky-btn-reject { background-color: #42A5F5 !important; /* Forces your signature brand Sky Blue */ border-color: #42A5F5 !important; /* Uniform structural boundary lines */ color: #ffffff !important; /* Crisp white text string */ } /* Force hover states into your brand slate charcoal */ .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper button.cky-btn-accept:hover, .dokan-vendor-dashboard-layout-root .cky-preference-btn-wrapper button.cky-btn-reject:hover, button.cky-btn-accept:hover, button.cky-btn-reject:hover { background-color: #374151 !important; /* Transitions cleanly to charcoal */ border-color: #374151 !important; } /* --- FLOATING REVISIT BUTTON SIGNATURE BLUE --- */ /* Force the floating cookie preferences bubble button into your brand signature blue */ div.cky-btn-revisit-wrapper button.cky-btn-revisit, button.cky-btn-revisit { background-color: #42A5F5 !important; /* Locks signature Sky Blue background */ border-color: #42A5F5 !important; /* Uniform structural line boundaries */ box-shadow: none !important; /* Enforces strict zero layout depth rules */ } /* Ensure any internal vectors or elements inside this bubble render cleanly */ div.cky-btn-revisit-wrapper button.cky-btn-revisit *, button.cky-btn-revisit * { color: #ffffff !important; /* Clean white graphic markers / lines */ } /* Force hover state transitions into your brand signature charcoal */ div.cky-btn-revisit-wrapper button.cky-btn-revisit:hover, button.cky-btn-revisit:hover { background-color: #374151 !important; /* Smooth transition to your brand charcoal */ border-color: #374151 !important; } /* --- PREFERENCE ACCORDION BUTTONS INTERACTION --- */ /* 1. RESTING STATE: Force your signature blue background onto all category sliders */ .cky-consent-container button.cky-accordion-btn, .dokan-vendor-dashboard-layout-root button[data-cky-tag="detail-category-title"] { background-color: #42A5F5 !important; /* Locks signature Sky Blue background */ border: 1px solid #42A5F5 !important; color: #ffffff !important; /* Crisp white text string */ padding: 10px 16px !important; /* Clean vertical block cushion padding */ border-radius: 6px !important; /* Clean rounded structural corners */ display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; } /* Ensure child text elements inside the category fields stay white at rest */ .cky-consent-container button.cky-accordion-btn *, .dokan-vendor-dashboard-layout-root button[data-cky-tag="detail-category-title"] * { color: #ffffff !important; } /* 2. HOVER STATE: Transition the background fields cleanly to your brand charcoal */ .cky-consent-container button.cky-accordion-btn:hover, .dokan-vendor-dashboard-layout-root button[data-cky-tag="detail-category-title"]:hover { background-color: #374151 !important; /* Transitions to your brand slate charcoal */ border-color: #374151 !important; } /* --- FLOATING PORTAL DROPDOWN RECONFIGURATION --- */ /* 1. RESTING STATE: Target the floating menu layer strings by their data and class triggers */ [class*="popover"] a, [class*="dropdown-menu"] a, [class*="absolute"] ul li a, div[role="menu"] button, div[role="menu"] a { color: #374151 !important; /* Forces your premium dark charcoal shade */ font-family: 'Inter', sans-serif !important; } /* Force matching dark charcoal on the adjacent vector graphics */ [class*="popover"] svg, [class*="dropdown-menu"] svg, div[role="menu"] svg path { stroke: #374151 !important; } /* 2. HOVER STATE: Snap links and vector graphics seamlessly to Sky Blue */ [class*="popover"] a:hover, [class*="dropdown-menu"] a:hover, div[role="menu"] a:hover, div[role="menu"] button:hover { color: #42A5F5 !important; /* Signature Sky Blue color shift */ } [class*="popover"] a:hover svg path, [class*="dropdown-menu"] a:hover svg path, div[role="menu"] a:hover svg path { stroke: #42A5F5 !important; } /* 3. HOVER BACKGROUND STATE: Completely flatten the row container backgrounds (Zero Hover Depth) */ [class*="popover"] a:hover, [class*="dropdown-menu"] li:hover, div[role="menu"] a:hover, div[role="menu"] [class*="hover:bg"] { background-color: transparent !important; /* Wipes out the light grey box fill completely */ background: transparent !important; box-shadow: none !important; } /* --- FIXED PORTAL RECONFIGURATION --- */ /* 1. RESTING STATE: Force near-black but keep it on the root item layers */ [id*="popover"] a, [id*="popover"] span, [class*="popover"] a, [class*="popover"] span, [data-radix-popper-content-wrapper] a, [data-radix-popper-content-wrapper] span, div[role="menuitem"] { --tw-text-opacity: 1 !important; color: #111827 !important; /* Rich near-black color string at rest */ font-family: 'Inter', sans-serif !important; } /* Force dark strokes onto the vector icons at rest */ [id*="popover"] svg path, [class*="popover"] svg path, [data-radix-popper-content-wrapper] svg path, div[role="menuitem"] svg path { --tw-stroke-opacity: 1 !important; stroke: #111827 !important; } /* 2. HOVER STATE: Target the rows directly to force everything to switch to Blue */ [id*="popover"] a:hover, [id*="popover"] a:hover span, [class*="popover"] a:hover, [class*="popover"] a:hover span, div[role="menuitem"]:hover, div[role="menuitem"]:hover * { color: #42A5F5 !important; /* Correctly snaps both text and spans to signature blue */ } div[id*="popover"] a:hover svg path, div[class*="popover"] a:hover svg path, div[role="menuitem"]:hover svg path { stroke: #42A5F5 !important; /* Correctly snaps icon outlines to signature blue */ } /* --- SIDEBAR MENU FONT SIZE CONFIGURATION --- */ /* Adjust the text size of all primary dashboard sidebar menu links */ aside.dokan-frontend-sidebar nav ul li a, aside.dokan-frontend-sidebar nav ul li a span, aside.dokan-frontend-sidebar nav [class*="text-sm"] { font-size: 18px !important; /* <--- CHANGE THIS NUMBER TO RESIZE (e.g., 14px, 16px, 17px) */ font-weight: 500 !important; /* Retains clean, crisp legibility weights */ } /* ========================================================================== 4. Cookie Customization 100% ========================================================================== */ /* --- ACCORDION CAPSULE RECONFIGURATION --- */ /* 1. RESTING STATE: Force signature blue on natural capsule shapes */ .cky-consent-container button.cky-accordion-btn, button.cky-accordion-btn { display: inline-block !important; /* Forces layout back to small capsule shapes */ width: auto !important; /* Strips full length boxes */ max-width: none !important; background-color: #42A5F5 !important; border: 1px solid #42A5F5 !important; color: #ffffff !important; } /* Ensure inner capsule text stays white at rest */ button.cky-accordion-btn, button.cky-accordion-btn * { color: #ffffff !important; } /* 2. HOVER STATE: Turn only the natural capsule layout to brand charcoal */ .cky-consent-container button.cky-accordion-btn:hover, button.cky-accordion-btn:hover { background-color: #374151 !important; border-color: #374151 !important; color: #ffffff !important; } /* Ensure inner capsule text stays white on hover */ button.cky-accordion-btn:hover * { color: #ffffff !important; } /* --- ACCORDION CAPSULE UNIFORM WIDTH --- */ /* Force all category buttons to maintain an identical capsule size */ .cky-consent-container button.cky-accordion-btn, button.cky-accordion-btn { width: 130px !important; /* Locks uniform capsule width */ height: 34px !important; /* Locks uniform capsule height */ display: inline-flex !important; /* Keeps layout shape compact */ align-items: center !important; justify-content: center !important; border-radius: 99px !important; /* Locks perfect oval capsule shape */ } /* --- COOKIE BANNER CUSTOMISE BUTTON COLOR UPDATE --- */ /* Target the precise lower customise capsule button tag in the notice footer wrapper */ .dokan-vendor-dashboard-layout-root .cky-notice-btn-wrapper button.cky-btn-customize, button.cky-btn-customize { background-color: #42A5F5 !important; /* Locks signature Sky Blue background */ border-color: #42A5F5 !important; /* Locks matching signature Sky Blue outline */ color: #ffffff !important; /* Forces clean white text layout strings */ } /* Match the exact slate charcoal behavior on hover */ .dokan-vendor-dashboard-layout-root .cky-notice-btn-wrapper button.cky-btn-customize:hover, button.cky-btn-customize:hover { background-color: #374151 !important; /* Transitions smoothly to brand charcoal */ border-color: #374151 !important; } /* ========================================================================== TF DIRECTORY ENGINE: VENDOR BUTTON VECTOR RECOVERY ========================================================================== */ /* Forces the pseudo-element inside the round button to use the core icon font family */ #dokan-seller-listing-wrap .store-footer a span.dashicons.dokan-btn-round::before { font-family: "dashicons" !important; content: "\f345" !important; /* Locks onto the exact arrow asset map coordinate */ font-weight: normal !important; font-style: normal !important; text-transform: none !important; speak: never !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ========================================================================== TF DIRECTORY TOOLBAR: COHESIVE BRAND ENGINE & PASSIVE/ACTIVE PHYSICS ========================================================================== */ /* 1. The Main Control Card Container Rest State */ #dokan-store-listing-filter-wrap { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; /* Soft slate gray resting border line */ border-radius: 12px !important; /* Matches your exact shop corner radius specifications */ padding: 24px !important; /* Injects massive interior breathing room */ margin-top: 32px !important; /* Distinct vertical gap from your top paragraph blocks */ margin-bottom: 24px !important; box-shadow: none !important; /* ABSOLUTE NEGATIVE CONSTRAINT: Zero shadow when resting */ box-sizing: border-box !important; /* Layout Framework Engines: Forces the components to expand gracefully as columns */ display: flex !important; flex-direction: column !important; gap: 20px !important; /* Smooth cubic transition physics engine */ transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important, box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important, border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* 2. Active Hover State: Triggers your signature luxury tech lift mechanics */ #dokan-store-listing-filter-wrap:hover { transform: translateY(-4px) !important; /* Elegant vertical lift */ border-color: #cbd5e1 !important; /* Subtle deepening of the resting border line */ box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.05) !important; /* Highly diffused soft shadow glow */ } /* 3. Disentangles the inner elements so they flow down as independent layers */ #dokan-store-listing-filter-wrap .left, #dokan-store-listing-filter-wrap .right { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 4. Aligns the right interface tools into a clean, spacious tool row */ #dokan-store-listing-filter-wrap .right { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } /* 5. Isolates the dropdown forms completely from clipping your layout toggle icons */ #dokan-store-listing-filter-wrap .right form.sort-by { display: inline-flex !important; align-items: center !important; margin: 0 !important; gap: 8px !important; } /* 6. Formats the native select element window to match a premium layout canvas */ #stores_orderby { height: 42px !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; padding: 0 12px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; color: #334155 !important; background-color: #ffffff !important; } /* 7. Aligns your layout grid icons beautifully next to the parameters */ #dokan-store-listing-filter-wrap .right .toggle-view { display: inline-flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; } /* 8. Cleans up and pads the slide-down Search tray block area container */ #dokan-store-listing-filter-form-wrap { background: transparent !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* 9. Disentangles the long search input box bar from your active buttons row */ #dokan-store-listing-filter-form-wrap .store-search { margin-top: 12px !important; margin-bottom: 16px !important; width: 100% !important; } #dokan-store-listing-filter-form-wrap .store-search input { height: 44px !important; width: 100% !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; padding: 0 16px !important; font-family: 'Inter', sans-serif !important; box-sizing: border-box !important; } /* ========================================================================== TF DIRECTORY SYSTEM: COMPLETE UNIFIED CONTROL ARCHITECTURE ========================================================================== */ /* 1. MAIN OUTER CONTROLLER CARD (Static, flat resting state) */ #dokan-store-listing-filter-wrap { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; /* Soft slate gray resting border line */ border-radius: 12px !important; /* Matches your perfect shop corner radius */ padding: 24px !important; /* Clean internal breathing space padding */ margin-top: 32px !important; /* Vertical gap from top elements */ margin-bottom: 24px !important; box-sizing: border-box !important; /* ABSOLUTE CONSTRAINTS: Flat architecture with zero shadow mechanics */ transform: none !important; box-shadow: none !important; transition: none !important; /* Layout Management Engine: Flow items down cleanly */ display: flex !important; flex-direction: column !important; gap: 16px !important; } /* 2. CORE CONTAINER RESET CODES */ #dokan-store-listing-filter-wrap .left, #dokan-store-listing-filter-wrap .right { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 3. INTERACTIVE CONTROL ROW INTERFACE */ #dokan-store-listing-filter-wrap .right { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } #dokan-store-listing-filter-wrap .right form.sort-by { display: inline-flex !important; align-items: center !important; margin: 0 !important; gap: 8px !important; } /* 4. DROPDOWN MENU SELECTOR ("Most Recent" Field Logic) */ #stores_orderby { height: 42px !important; border: 1px solid #e2e8f0 !important; /* Soft resting line outline */ border-radius: 8px !important; /* Clean radius box */ padding: 0 12px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; color: #334155 !important; background-color: #ffffff !important; box-sizing: border-box !important; box-shadow: none !important; /* Liquid smooth transitions for hover mechanics */ transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important, box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important, border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Dropdown Selector Active Hover Physics: Lifts and fires shadow depth */ #stores_orderby:hover { transform: translateY(-2px) !important; /* Discrete premium hover lift */ border-color: #cbd5e1 !important; /* Subtle deepening of the gray boundary line */ box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -4px rgba(15, 23, 42, 0.05) !important; /* Soft luxury shadow depth glow */ } /* 5. DIRECOTRY VIEW TOGGLE ICONS INNER WRAPPER */ #dokan-store-listing-filter-wrap .right .toggle-view { display: inline-flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; } /* 6. SLIDE-DOWN SEARCH FORM CONTAINER CARD */ form#dokan-store-listing-filter-form-wrap { background-color: #ffffff !important; /* Crisp clean white background structure */ border: 1px solid #e2e8f0 !important; /* Permanent, premium soft slate gray outline */ border-radius: 12px !important; /* Matches your signature shop corner curvature */ padding: 28px !important; /* Injects wide internal breathing space padding */ margin-top: 16px !important; /* Creates a clean vertical separation gap below the main toolbar */ margin-bottom: 32px !important; /* Structural separation boundary above vendor grid */ box-sizing: border-box !important; /* ABSOLUTE CONSTRAINT: Flat architecture config with zero shadows */ box-shadow: none !important; transform: none !important; transition: none !important; } #dokan-store-listing-filter-form-wrap .store-search, #dokan-store-listing-filter-form-wrap .apply-filter { float: none !important; width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* 7. SEARCH INPUT TEXT FIELD ("Search Vendors" Field Logic) */ #dokan-store-listing-filter-form-wrap .store-search { margin-bottom: 24px !important; } #dokan-store-listing-filter-form-wrap .store-search input { height: 44px !important; width: 100% !important; border: 1px solid #e2e8f0 !important; /* Soft resting line outline */ border-radius: 8px !important; /* Clean radius box */ padding: 0 16px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; background-color: #ffffff !important; box-sizing: border-box !important; box-shadow: none !important; /* Liquid smooth transitions for hover mechanics */ transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important, box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important, border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Search Input Box Active Hover Physics: Lifts and fires shadow depth */ #dokan-store-listing-filter-form-wrap .store-search input:hover { transform: translateY(-2px) !important; /* Discrete premium hover lift */ border-color: #cbd5e1 !important; /* Subtle deepening of the gray boundary line */ box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -4px rgba(15, 23, 42, 0.05) !important; /* Soft luxury shadow depth glow */ } /* 8. ACTION BUTTONS BUTTONS ROW STRUCTURE */ #dokan-store-listing-filter-form-wrap .apply-filter { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; /* Pushes pills cleanly to the right edge */ gap: 12px !important; /* Balanced horizontal spacing between buttons */ padding: 0 !important; } /* ========================================================================== TF DIRECTORY TOOLBAR: FIXED STATIC ROW GEOMETRY ENGINE ========================================================================== */ /* 1. ABSOLUTE RESET PER CONSTRAINT: Forces the outer card to stay dead flat on hover */ #dokan-store-listing-filter-wrap, #dokan-store-listing-filter-wrap:hover { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; /* Perfect top-to-bottom balance */ padding: 16px 24px !important; background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; /* Disables all physics properties entirely on the main parent card wrapper */ transform: none !important; box-shadow: none !important; transition: none !important; } /* 2. Locks the left text count to stay flat against the left margin bounds */ #dokan-store-listing-filter-wrap .left { width: auto !important; display: flex !important; align-items: center !important; margin: 0 !important; } /* 3. Pulls ALL utility actions neatly onto a single right-hand row container */ #dokan-store-listing-filter-wrap .right { width: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 20px !important; /* Premium horizontal spacing between items */ margin: 0 !important; } /* 4. Targets the blue filter item container to drag it out of the center canvas */ #dokan-store-listing-filter-wrap .dokan-filter-item, #dokan-store-listing-filter-wrap .right .item, #dokan-store-listing-filter-wrap .right form.sort-by, #dokan-store-listing-filter-wrap .right .toggle-view { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== TF DIRECTORY TOOLBAR: INTERNAL GREEN ROW REBOOT ========================================================================== */ /* 1. Unclamps the main pink wrapper to let the items stretch cleanly as a wide horizontal row */ #dokan-store-listing-filter-wrap { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; padding: 16px 24px !important; } /* 2. Forces the Green container box to handle all its inner tools on one single horizontal row line */ #dokan-store-listing-filter-wrap .right { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; /* Centers everything perfectly from top to bottom */ justify-content: flex-end !important; gap: 16px !important; /* Even spacing between every tool */ width: auto !important; flex-grow: 1 !important; } /* 3. Forces the Sort dropdown elements to sit flat inside their container cells */ #dokan-store-listing-filter-wrap .right form.sort-by, #dokan-store-listing-filter-wrap .right .dokan-filter-item { display: inline-flex !important; align-items: center !important; margin: 0 !important; } /* 4. Locks the Orange layout toggle box to stay flat and inline at the far edge */ #dokan-store-listing-filter-wrap .right .toggle-view { display: inline-flex !important; align-items: center !important; margin: 0 !important; } /* ========================================================================== TF DIRECTORY TOOLBAR: COMPACT PREMIUM TYPOGRAPHY ========================================================================== */ /* 1. Shrinks the left "Total store showing" count text down to standard size */ .dokan-store-list-wrapper .dokan-seller-list-item-count { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14px !important; /* Matches clean paragraph reading size */ font-weight: 500 !important; /* Softens the heavy layout text weight */ color: #475569 !important; /* Premium muted charcoal slate tint */ letter-spacing: -0.01em !important; text-transform: none !important; margin: 0 !important; } /* 2. Shrinks the yellow "Sort by:" label text down to match identically */ #dokan-store-listing-filter-wrap .right label { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 18px !important; /* Uniform compact typography tracking */ font-weight: 500 !important; color: #475569 !important; /* Blends away your harsh default black headings */ letter-spacing: -0.01em !important; text-transform: none !important; margin: 0 !important; } /* Targets the exact paragraph count class tag visible in your inspector */ #dokan-store-listing-filter-wrap .left p.item.store-count { font-family: 'Inter', sans-serif !important; font-size: 18px !important; /* Safely shrinks it to your standard reading size */ font-weight: 500 !important; color: #475569 !important; /* Matches your precise soft charcoal paragraph tint */ margin: 0 !important; padding: 0 !important; } /* ========================================================================== TF DIRECTORY ENGINE: VENDOR PROFILE ICON DEAD-CENTER OVERRIDE ========================================================================== */ /* Forces the inner image tag itself to stretch and fill the 36px circle container perfectly */ #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer .seller-avatar img { width: 36px !important; /* Matches your exact horizontal blue circle width */ max-width: 36px !important; height: 36px !important; /* Matches your exact vertical blue circle height */ max-height: 36px !important; object-fit: cover !important; /* Crops the profile/avatar perfectly into a center square with zero distortion */ border-radius: 50% !important;/* Keeps it a perfect, clean circle layout shape */ display: block !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== TF DIRECTORY ENGINE: AVATAR SUB-PIXEL POSITIONING NUDGE ========================================================================== */ /* Surgically offsets the inner image layer down and to the left */ #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer .seller-avatar img { transform: translate(-5px, 5px) !important; /* First number pushes LEFT (-), second number pushes DOWN (+) */ } /* ========================================================================== TF DIRECTORY: SLIDE-DOWN TRAY TOP ARROW DECORATION FIXED ========================================================================== */ /* 1. Recovers the hidden top center pointer arrow shape */ form#dokan-store-listing-filter-form-wrap::before { content: "" !important; position: absolute !important; top: -9px !important; /* Snaps it perfectly over your upper gray outline */ left: 48.5% !important; /* Dead centers it horizontally across the frame */ width: 16px !important; /* Builds a perfect square geometric canvas */ height: 16px !important; background-color: #ffffff !important; /* Matches your clean white box interior background */ /* 2. Rotates the square by 45 degrees to generate a clean up-facing chevron pointer arrow */ transform: rotate(45deg) !important; /* 3. Paints matching soft gray lines on the top and left edges exclusively */ border-top: 1px solid #e2e8f0 !important; border-left: 1px solid #e2e8f0 !important; border-right: none !important; border-bottom: none !important; /* 4. Keeps layout mechanics stable across screens */ display: block !important; box-shadow: none !important; z-index: 10 !important; /* Forces it to sit cleanly above your card line breaks */ } /* ========================================================================== TF BASKET PAGE: GUTENBERG BLOCKS HORIZONTAL CENTERING ENGINE ========================================================================== */ /* 1. Grabs the Gutenberg Block container row and dead-centers it */ .woocommerce-page .wc-block-grid ul.wc-block-grid__products, .wc-block-grid ul.wc-block-grid__products { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; /* Centers your modern grid blocks horizontally */ gap: 24px !important; /* Even breathing room space gap */ margin: 0 auto !important; padding: 0 !important; float: none !important; } /* 2. Controls individual product block margins so they don't drift left */ .woocommerce-page .wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product, .wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product { float: none !important; /* Kills old block floating alignment rules */ margin: 0 !important; /* Lets the flex engine handle the layout math */ box-sizing: border-box !important; } /* ========================================================================== TF CORES: ANTI-FLASH PRE-LOADING CLOAK ENGINE ========================================================================== */ /* 1. Catches the raw Gutenberg empty title elements instantly on load */ .wc-block-cart__empty-cart__title, h2.wp-block-heading.has-text-align-center.with-empty-cart-icon { border: 1px solid #e2e8f0 !important; /* Instantly forces the premium soft gray line */ border-radius: 12px !important; /* Instantly forces your signature 12px corners */ padding: 28px !important; /* Fixes padding right out of the gate */ background-color: #ffffff !important; /* Locks the clean white backdrop canvas */ box-shadow: none !important; /* ABSOLUTE NEGATIVE CONSTRAINT: Zero shadow depth */ /* 2. Forces a liquid-smooth color fade-in to mask database processing delays */ transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out !important; } /* ========================================================================== TF CHECKOUT: UNIFIED COHESIVE EMPTY STATE ARCHITECTURE ========================================================================== */ /* 1. Unifies the title string text style ("Your basket is currently empty!") */ .wc-block-checkout-empty strong.wc-block-checkout-empty__title, .wc-block-cart-empty strong.wc-block-cart-empty__title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #0f172a !important; /* Premium deep charcoal heading */ margin-bottom: 12px !important; display: block !important; } /* 2. Format unifies the main body paragraph description block text */ .wc-block-checkout-empty p.wc-block-checkout-empty__description, .wc-block-cart-empty p.wc-block-cart-empty__description { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 15px !important; line-height: 1.75 !important; color: #475569 !important; /* Your exact soft gray paragraph text color specification */ max-width: 550px !important; margin: 0 auto 28px auto !important; /* Perfect horizontal center line tracking alignment */ } /* 3. Expands the main primary action button frame size text structure */ .wc-block-checkout-empty .wp-block-button a.wp-block-button__link, .wc-block-cart-empty .wp-block-button a.wp-block-button__link { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; padding: 14px 36px !important; /* Expanded button size padding frame dimensions */ border-radius: 9999px !important; /* Perfectly smooth premium pill shape rounding physics */ background-color: #3b82f6 !important; /* Restores your exact clean core blue baseline */ color: #ffffff !important; border: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; /* Removes any resting default plugin shadows completely */ /* Liquid-smooth clean color transition physics */ transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important, box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* 4. ACTIVE HOVER PROTECTION: Switches cleanly to charcoal with ABSOLUTE ZERO SHADOWS */ .wc-block-checkout-empty .wp-block-button a.wp-block-button__link:hover, .wc-block-cart-empty .wp-block-button a.wp-block-button__link:hover { background-color: #0f172a !important; /* Flips seamlessly to your premium brand Charcoal slate */ color: #ffffff !important; /* ABSOLUTE NEGATIVE CONSTRAINTS: Kills all hover shifts and shadow anomalies dead */ box-shadow: none !important; transform: none !important; } /* ========================================================================== TF CHECKOUT: MINIMALIST GRAPHIC FOOTPRINT SCALING ========================================================================== */ /* Surgically shrinks the giant default WooCommerce checkout SVG icon asset */ svg.wc-block-checkout-empty__image, .wc-block-checkout-empty svg, .wc-block-cart-empty svg { width: 52px !important; /* Clean, balanced, compact layout dimension scale */ height: auto !important; margin: 0 auto 16px auto !important; /* Dead-centers it with a crisp vertical gap below */ display: block !important; opacity: 0.85 !important; /* Softens the raw pure black lines slightly to match your text path */ } /* ========================================================================== TF ACTIVE BASKET: TOTAL EXTINCTION OF CROSS-SELL SUBMIT BUTTONS ========================================================================== */ /* Vaporizes the blue Add to Basket buttons inside both the public frontend and backend editor frames */ .wc-block-product .wp-block-button, .wc-block-grid__product-add-to-cart, .block-editor-block-list__layout .wc-block-grid__product-add-to-cart, .wc-block-product .wc-block-grid__product-add-to-cart, div[data-block-name="woocommerce/product-button"] { display: none !important; } /******************************************************************************* * 💎 TRANS-FIRST BRAND DESIGN SYSTEM * MODULE: CLIENT PORTAL DASHBOARD WRAPPER * UTILITY: STRUCTURAL PARENT BYPASS & ZERO HOVER DEPTH ARCHITECTURE ******************************************************************************/ /* 1. Global Flex Container Override (Bypasses custom parent wrapper divs) */ .woocommerce-account nav.woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { /* Clear any floats completely */ float: none !important; clear: none !important; } /* Force the wrapper container holding both elements to flex side-by-side */ .woocommerce-account nav.woocommerce-MyAccount-navigation { display: block !important; } /* 2. Target the main outer container dynamically */ .woocommerce-account .woocommerce-MyAccount-navigation { width: 280px !important; min-width: 280px !important; max-width: 280px !important; display: inline-block !important; vertical-align: top !important; margin-right: 40px !important; } /* 3. Target the main right side panel dynamically */ .woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 325px) !important; /* Math calculates 100% minus sidebar width and gap */ display: inline-block !important; vertical-align: top !important; /* Soft Gray Frame Styling */ padding: 32px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 0px !important; /* Premium sharp corners */ box-shadow: none !important; box-sizing: border-box !important; } /* 4. Left Menu Navigation Tab Stack Layout */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; border-top: 1px solid #e2e8f0 !important; /* Single crisp top enclosure line */ box-shadow: none !important; } /* Remove default theme border depths on lists */ .woocommerce-account .woocommerce-MyAccount-navigation ul li { padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block !important; padding: 14px 20px !important; color: #4a5568 !important; text-decoration: none !important; font-size: 14px !important; font-weight: 500 !important; background-color: #ffffff !important; box-sizing: border-box !important; /* Thin single border system */ border-top: none !important; border-right: 1px solid #e2e8f0 !important; border-bottom: 1px solid #e2e8f0 !important; border-left: 1px solid #e2e8f0 !important; /* KILL DEFAULT SHADOW - Flat layout */ box-shadow: none !important; /* Smooth Transition Curve for Professional Lift Dynamics */ transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* 5. Clean Navigation Hover & Active States (Zero-Movement Flat Treatment) */ .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background-color: #ffffff !important; color: #42A5F5 !important; /* Sharp custom brand blue text change */ /* Clean, non-glitchy flat hover indicator */ border-left: 3px solid #42A5F5 !important; padding-left: 18px !important; /* Keeps the text perfectly aligned */ /* Strict zero-depth layout rules */ box-shadow: none !important; transform: none !important; border-radius: 0px !important; } /* Active Highlight Treatment (Matches hover perfectly for uniform state tracking) */ .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background-color: #ffffff !important; color: #42A5F5 !important; border-left: 3px solid #42A5F5 !important; padding-left: 18px !important; box-shadow: none !important; transform: none !important; border-radius: 0px !important; } /* 3. Target the main right side panel dynamically */ .woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 325px) !important; /* Math calculates 100% minus sidebar width and gap */ display: inline-block !important; vertical-align: top !important; /* Soft Gray Frame Styling */ padding: 32px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; /* Premium smooth rounded corners */ box-shadow: none !important; box-sizing: border-box !important; } /* 6. Typography & Link Interactive Color System */ .woocommerce-account .woocommerce-MyAccount-content a:not(.button):not([class*="btn"]), .woocommerce-account .woocommerce-MyAccount-content p a:not(.button):not([class*="btn"]) { color: #42A5F5 !important; /* Signature brand blue at rest */ text-decoration: none !important; border-bottom: none !important; /* Absolute flat, no line baseline */ transition: color 0.15s ease-in-out !important; } .woocommerce-account .woocommerce-MyAccount-content a:not(.button):not([class*="btn"]):hover, .woocommerce-account .woocommerce-MyAccount-content p a:not(.button):not([class*="btn"]):hover { color: #1E88E5 !important; /* Professional darker blue on hover */ text-decoration: none !important; border-bottom: none !important; /* Strictly no line on hover */ } /* 7. My Orders Grid & Empty State Info Box */ .woocommerce-account .woocommerce-info { background-color: #ffffff !important; /* Pure clean background */ border: 1px solid #e2e8f0 !important; /* Your uniform thin soft gray frame */ border-top: 1px solid #e2e8f0 !important; /* Overrides the clunky thick top stripe */ color: #4a5568 !important; /* Neutral dark text */ padding: 32px 24px !important; /* Added breathability top and bottom */ border-radius: 8px !important; /* Matches your right panel's curve */ box-shadow: none !important; /* Strict zero hover depth */ display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 20px !important; } /* Clean up the old clunky WooCommerce icon spacing entirely */ .woocommerce-account .woocommerce-info::before { display: none !important; /* Drops the native un-styled default icon */ } /* 8. Strict Native Hover Shadow Killer */ .woocommerce-account .woocommerce-info .button:hover, .woocommerce-account .woocommerce-info .wc-forward:hover { box-shadow: none !important; /* Forces Astra's hover shadow to absolute zero */ transform: none !important; /* Stops any unintended theme movement or lifting */ } /* Address Box Typography Formatting */ .woocommerce-account .woocommerce-Addresses h2, .woocommerce-account .woocommerce-Address h3, .woocommerce-account .woocommerce-Address .title h2, .woocommerce-account .woocommerce-Address-title h2 { font-size: 18px !important; /* Shrunk from 18px down to a crisp, minimal size */ font-weight: 600 !important; color: #1a202c !important; margin: 0 0 12px 0 !important; padding: 0 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; } /* Individual Address Cards - Full Width Stack System */ .woocommerce-account .u-column1.woocommerce-Address, .woocommerce-account .u-column2.woocommerce-Address { width: 100% !important; /* Forces 100% full width expansion */ float: none !important; /* Kills the side-by-side float crunch */ display: block !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; /* Uniform thin soft gray frame */ padding: 24px !important; border-radius: 8px !important; /* Smooth 8px curve */ box-shadow: none !important; /* Strict zero depth rule */ box-sizing: border-box !important; margin-bottom: 20px !important; /* Adds clean spacing between stacked boxes */ } /* 10. Payment Methods Button Hover Shadow Killer */ .woocommerce-account .woocommerce-MyAccount-content .button, .woocommerce-account .woocommerce-MyAccount-content a.button { box-shadow: none !important; transform: none !important; } /******************************************************************************* * 💎 TRANS-FIRST BRAND DESIGN SYSTEM * MODULE: SINGLE PRODUCT TEMPLATE LAYOUT * UTILITY: VIEWPORT HEADER SPACING SYSTEM ******************************************************************************/ /* 13. Inject Premium Breathing Room Above Product Grid */ .single-product #primary, .single-product .site-content, .single-product main#main { padding-top: 65px !important; /* Pushes content down cleanly away from header */ margin-top: 0 !important; } /******************************************************************************* * 💎 TRANS-FIRST BRAND DESIGN SYSTEM * MODULE: SINGLE PRODUCT TEMPLATE LAYOUT * UTILITY: INTER FONT BRAND PILL BUTTON INTERACTION ******************************************************************************/ /* 1. Apply Inter Font & Signature Brand Blue Pill Layout */ .woocommerce div.product form.cart button.single_add_to_cart_button.button, .woocommerce div.product form.cart .button.single_add_to_cart_button { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; /* Premium Inter font */ background-color: #42A5F5 !important; /* Signature brand blue */ color: #ffffff !important; /* Crisp white text */ padding: 12px 32px !important; /* Premium elongated pill padding */ border-radius: 50px !important; /* Perfect seamless rounded pill shape */ font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border: none !important; display: inline-block !important; /* Zero Depth Baseline Configuration */ box-shadow: none !important; transform: none !important; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important; } /* 2. Interactive States System (Dark Charcoal Transition) */ .woocommerce div.product form.cart button.single_add_to_cart_button.button:hover, .woocommerce div.product form.cart .button.single_add_to_cart_button:hover { background-color: #2D3748 !important; /* Sophisticated deep dark charcoal background */ color: #ffffff !important; /* Keeps text a crisp, high-contrast white */ /* Strict Flat Interaction Rule Execution */ box-shadow: none !important; transform: none !important; } /******************************************************************************* * 💎 TRANS-FIRST BRAND DESIGN SYSTEM * MODULE: SINGLE PRODUCT TEMPLATE LAYOUT * UTILITY: DYNAMIC CONTENT FLEX REORDERING SYSTEM ******************************************************************************/ /* 1. Turn the product summary panel into a structured flex column stack */ .single-product .entry-summary { display: flex !important; flex-direction: column !important; } /* 2. Assign precise structural ordering indexes */ .single-product .entry-summary .woocommerce-product-details__short-description, .single-product .entry-summary div[class*="short-description"] { order: 3 !important; /* Forces the description text above the actions */ margin-bottom: 28px !important; /* Clean breathing room below text */ } .single-product .entry-summary form.cart { order: 4 !important; /* Pushes the quantity box and Add to Basket button below the text */ margin-top: 0 !important; } /* Ensure the titles, breadcrumbs, and prices stay properly placed at the very top */ .single-product .entry-summary .woocommerce-breadcrumb { order: 1 !important; } .single-product .entry-summary .product_title { order: 1 !important; } .single-product .entry-summary .price { order: 2 !important; margin-bottom: 16px !important; } /* Clean Rounded Quantity Box Only */ .woocommerce div.product form.cart div.quantity input.qty { border: 1px solid #e2e8f0 !important; /* Soft gray line */ border-radius: 8px !important; /* Clean rounded corners */ height: 46px !important; /* Standard button alignment height */ box-shadow: none !important; /* Completely flat design */ } /* 14. Adjust Button Vertical Alignment Axis */ .woocommerce div.product form.cart button.single_add_to_cart_button.button, .woocommerce div.product form.cart .button.single_add_to_cart_button { margin-top: 5px !important; /* Shifts the pill button down exactly 5px to align with the box */ } /* 15. Single Product Page - Success Message Banner Modernization */ .single-product .woocommerce-message, .woocommerce-account .woocommerce-message, .woocommerce-page .woocommerce-message { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-top: 1px solid #e2e8f0 !important; color: #4a5568 !important; border-radius: 8px !important; box-shadow: none !important; font-size: 14px !important; /* Absolute Positioning Foundation Layout */ display: block !important; position: relative !important; width: 100% !important; /* EXPANDED LUXURY PADDING SYSTEM */ padding: 42px 200px 26px 32px !important; /* Increased all around for a spacious card vibe */ box-sizing: border-box !important; text-align: left !important; } /* 16. View Basket Button Alignment & Shadow Reset */ .woocommerce-message .button.wc-forward, .woocommerce-message a.button.wc-forward, .woocommerce-message .button { /* Absolute Position Override to force placement on right edge */ position: absolute !important; top: 50% !important; right: 20px !important; /* Places button exactly 20px inside the right frame boundary */ transform: translateY(-50%) !important; /* Perfect vertical centering alignment */ /* Layout Overrides */ float: none !important; margin: 0 !important; display: inline-block !important; white-space: nowrap !important; } /* Strict Hover Shadow Killer */ .woocommerce-message .button.wc-forward:hover, .woocommerce-message a.button:hover { box-shadow: none !important; transform: translateY(-50%) !important; /* Maintains the vertical center during hover tracking */ } /* ========================================================================== RESTORE DEFAULT WOOCOMMERCE QUANTITY SELECTORS ========================================================================== */ /* 1. Removes all custom background modifications, custom borders, and custom sizing shapes */ .wc-block-cart-item__quantity, .wc-block-components-quantity-selector, .wc-block-components-quantity-selector input[type="number"] { background: transparent !important; border: 1px solid #cbd5e1 !important; border-radius: 4px !important; padding: 0 !important; height: auto !important; width: auto !important; } /* 2. Unhides the native browser step increments (plus/minus spinners) */ .wc-block-components-quantity-selector input[type="number"]::-webkit-inner-spin-button, .wc-block-components-quantity-selector input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: inner-spin-button !important; opacity: 1 !important; display: inline-block !important; } /* 3. Disables any custom absolute positioning alignment tricks from your legacy code */ .wc-block-components-quantity-selector button, .wc-block-components-quantity-selector::before, .wc-block-components-quantity-selector::after { display: initial !important; content: none !important; position: static !important; } /* ========================================================================== STRIP CUSTOM BRAND ACTION PILL DESIGNS FROM CART QUANTITY INNER BUTTONS ========================================================================== */ /* 1. Resets the inner math trigger buttons back to WooCommerce clean defaults */ .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button { background-color: transparent !important; background: transparent !important; color: #0f172a !important; /* Standard crisp dark text icon symbol color */ border: none !important; border-radius: 0 !important; /* Strips the circle shape footprint */ width: 36px !important; /* Standard compact square tap target sizing */ height: 100% !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; /* Completely removes the ambient button glow shadow */ transform: none !important; min-height: initial !important; } /* 2. Soft gray background hover transition shift for the native default feel */ .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:hover { background-color: #f1f5f9 !important; color: #0f172a !important; } /* 3. Re-locks the number input box centered between the two standard triggers */ .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input { border-left: 1px solid #cbd5e1 !important; border-right: 1px solid #cbd5e1 !important; border-top: none !important; border-bottom: none !important; border-radius: 0 !important; text-align: center !important; } /* ========================================================================== FORCE FACTORY TRASH ICON RESET (REMOVES BUTTON LINKS OVERRIDES) ========================================================================== */ /* 1. Strips away all button structural styles from the delete element */ .wc-block-cart-items button.wc-block-cart-item__remove-link, button.wc-block-cart-item__remove-link { background-color: transparent !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 0 12px !important; width: 24px !important; height: 24px !important; min-height: initial !important; transform: none !important; } /* 2. Forces the inner vector image layout to use native dark grey scaling */ .wc-block-cart-items button.wc-block-cart-item__remove-link svg, .wc-block-cart-item__remove-link svg { fill: #64748b !important; color: #64748b !important; width: 18px !important; height: 18px !important; margin: 0 !important; } /* 3. Smooth neutral background hover shift */ .wc-block-cart-items button.wc-block-cart-item__remove-link:hover svg { fill: #ef4444 !important; /* Soft red alert tint on delete hover tracking */ color: #ef4444 !important; } /* ========================================================================== PREMIUM MINIMALIST CART SELECTOR BLOCK ========================================================================== */ /* 1. Refines the outer box container track with a smooth, soft gray outline */ .wc-block-components-quantity-selector { border: 1px solid #e2e8f0 !important; border-radius: 30px !important; /* Elegant pill layout shape instead of sharp boxes */ background: #ffffff !important; overflow: hidden !important; height: 36px !important; max-width: 110px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important; } /* 2. Formats the inner numerical digit frame & centers it perfectly */ .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: #0f172a !important; text-align: center !important; background: transparent !important; border: none !important; /* Removes internal dividers for a cleaner, floating look */ padding: 0 !important; width: 32px !important; } /* 3. Styles the plus and minus side click triggers */ .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button { background: transparent !important; color: #64748b !important; /* Subtle slate grey text icons instead of harsh dark tones */ font-size: 15px !important; font-weight: 500 !important; width: 32px !important; height: 100% !important; border: none !important; box-shadow: none !important; transition: all 0.15s ease-in-out !important; } /* 4. Elegant soft background hover flash for micro-interactions */ .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:hover { background-color: #f8fafc !important; color: #0f172a !important; } /* 5. Polish code for the neutral trashcan icon element path */ .wc-block-cart-items button.wc-block-cart-item__remove-link, button.wc-block-cart-item__remove-link { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-left: 14px !important; /* Clean layout buffer spacing from the selection selector */ cursor: pointer !important; } /* 6. Sets trashcan vector image to match the slate grey layout tracking */ .wc-block-cart-items button.wc-block-cart-item__remove-link svg { fill: #94a3b8 !important; /* Muted, balanced tone */ transition: fill 0.15s ease-in-out !important; } /* 7. Changes trash icon to a clean brand pink on hover */ .wc-block-cart-items button.wc-block-cart-item__remove-link:hover svg { fill: #f48fb1 !important; } /* ========================================================================== CART FOOTPRINT POLISH: ENHANCED INTERACTIONS & CRISP CONTRAST ========================================================================== */ /* 1. Increases contrast on the plus and minus math triggers */ .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button { color: #334155 !important; /* Darker slate gray for better visibility */ font-size: 16px !important; font-weight: 600 !important; } /* 2. Increases size and adds comfortable tap target padding to the trashcan icon */ .wc-block-cart-items button.wc-block-cart-item__remove-link, button.wc-block-cart-item__remove-link { margin-left: 18px !important; /* Extra spacing gap from the pill container */ padding: 8px !important; /* Comfortable click padding area */ display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* 3. Forces the inner trashcan vector image to render larger and clearer */ .wc-block-cart-items button.wc-block-cart-item__remove-link svg, .wc-block-cart-item__remove-link svg { width: 20px !important; /* Boosted size from 18px */ height: 20px !important; /* Boosted size from 18px */ fill: #64748b !important; /* Clean neutral resting gray */ transition: fill 0.15s ease-in-out, transform 0.15s ease-in-out !important; } /* 4. Keeps your signature brand pink hover effect active */ .wc-block-cart-items button.wc-block-cart-item__remove-link:hover svg { fill: #f48fb1 !important; transform: scale(1.08) !important; /* Micro-interaction scale pop */ } /* ========================================================================== TRASHCAN ICON SIZE ENFORCEMENT MATRIX ========================================================================== */ /* 1. Forces the parent button layout container to stay large and square */ .wc-block-cart-items button.wc-block-cart-item__remove-link, button.wc-block-cart-item__remove-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; /* Explicit large horizontal width target */ height: 38px !important; /* Explicit large vertical height target */ padding: 0 !important; /* Clear padding conflict causing the shrinkage */ margin-left: 12px !important; /* Fixed structural spacing track from the pill */ background: transparent !important; border: none !important; box-shadow: none !important; } /* 2. Absolute size rule to force the SVG vector graphic wide and clear */ .wc-block-cart-items button.wc-block-cart-item__remove-link svg, .wc-block-cart-item__remove-link svg { width: 22px !important; /* Boosted absolute vector width dimensions */ height: 22px !important; /* Boosted absolute vector height dimensions */ min-width: 22px !important; min-height: 22px !important; fill: #64748b !important; display: block !important; } /* ========================================================================== TRASHCAN HOVER STATE BRAND BLUE UPDATE ========================================================================== */ /* Forces the trash icon vector graphic to turn brand blue when hovered */ .wc-block-cart-items button.wc-block-cart-item__remove-link:hover svg, button.wc-block-cart-item__remove-link:hover svg { fill: #42A5F5 !important; color: #42A5F5 !important; transform: scale(1.08) !important; /* Keeps the micro-interaction scale pop */ } /* ========================================================================== PROCEED TO CHECKOUT BUTTON BRANDING REALIGNMENT ========================================================================== */ /* 1. Aligns the structural button chassis to your brand metrics */ .wc-block-cart__submit-button, a.wc-block-components-button.wc-block-cart__submit-button, button.wc-block-components-button.wp-element-button { background-color: #42A5F5 !important; background: #42A5F5 !important; border: none !important; border-radius: 9999px !important; /* Perfect rounded pill design shape */ padding: 16px 40px !important; /* Enhanced tap target breathing room */ box-shadow: 0 4px 12px rgba(66, 165, 245, 0.2) !important; /* Ambient blue glow */ transition: all 0.2s ease-in-out !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; /* Removes the forced edge-to-edge block layout */ min-width: 240px !important; /* Keeps it prominent next to totals */ } /* 2. Refines the inner typography layout track */ .wc-block-components-button__text, .wc-block-components-button_text, div.wc-block-components-button__text { color: #ffffff !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1 !important; } /* 3. Smooth slate hover transformation state */ .wc-block-cart__submit-button:hover, a.wc-block-components-button.wc-block-cart__submit-button:hover, button.wc-block-components-button.wp-element-button:hover { background-color: #0f172a !important; background: #0f172a !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important; } /* ========================================================================== DE-CHONK PROCEED TO CHECKOUT BUTTON (EXACT UPPER MATCH) ========================================================================== */ /* 1. Scales down the structural container sizing to be sleek */ .wc-block-cart__submit-button, a.wc-block-components-button.wc-block-cart__submit-button, button.wc-block-components-button.wp-element-button { padding: 14px 36px !important; /* Exact match to the padding profile above */ height: 44px !important; /* Absolute height limit to kill the bulkiness */ min-height: 44px !important; width: auto !important; min-width: 200px !important; /* Balanced width footprint */ border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 10px !important; } /* 2. Standardizes text elements font sizes and heights */ .wc-block-components-button__text, .wc-block-components-button_text, div.wc-block-components-button__text { font-size: 16px !important; line-height: 1 !important; font-weight: 600 !important; } /* ========================================================================== SLEEK PROCESSING STATE FOR BASKET TOTAL RECALCULATIONS ========================================================================== */ /* 1. Drops the button to your premium deep slate color while calculating */ .wc-block-cart__submit-container .wc-block-components-button[aria-disabled="true"], button.wc-block-components-button[aria-disabled="true"] { background-color: #1e293b !important; /* Elegant dark slate instead of a weird faded light blue */ background: #1e293b !important; opacity: 0.75 !important; /* Soft visual indicator that it is temporarily locked */ cursor: wait !important; /* Changes cursor to an hourglass spinner */ } /* 2. Softly fades the white text inside so it looks like a sleek loading state */ .wc-block-cart__submit-container .wc-block-components-button[aria-disabled="true"] .wc-block-components-button__text { color: rgba(255, 255, 255, 0.6) !important; } /* ========================================================================== DOG TOWN OVERRIDE: RE-BALANCING SQUISHED CHECKOUT SIDEBAR ========================================================================== */ @media (min-width: 769px) { /* 1. Forces the main checkout block wrapper into a clean distribution layout */ .wp-block-woocommerce-checkout, div.wp-block-woocommerce-checkout { display: flex !important; flex-direction: row !important; gap: 40px !important; align-items: flex-start !important; width: 100% !important; } /* 2. Locks the left forms (Contact, Billing) to a solid, highly readable 60% footprint */ .wp-block-woocommerce-checkout-main-block, div[class*="checkout-main-block"] { flex: 0 0 60% !important; max-width: 60% !important; width: 60% !important; } /* 3. Forces the right sidebar order summary block to open up to a crisp 35% footprint */ .wp-block-woocommerce-checkout-order-summary-block, .wc-block-components-sidebar, div[class*="checkout-order-summary-block"] { flex: 0 0 35% !important; max-width: 35% !important; width: 35% !important; min-width: 320px !important; /* Prevents card components from choking */ } /* 4. Fixes the product image wrapper from crumbling inside the card */ .wc-block-components-order-summary-item__image { min-width: 60px !important; width: 60px !important; height: 60px !important; } } /* ========================================================================== ORDER SUMMARY TEXT DE-CRUMBLER ========================================================================== */ /* 1. Expands the inner item tracking wrapper box so text has horizontal breathing room */ .wc-block-components-order-summary-item, div[class*="order-summary-item"] { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; width: 100% !important; max-width: 100% !important; } /* 2. Forces the long product title to read clearly instead of splitting word-by-word */ .wc-block-components-product-name, h3.wc-block-components-product-name, div[class*="product-name"] { font-size: 15px !important; /* Slightly more compact to preserve column space */ font-weight: 600 !important; line-height: 1.4 !important; white-space: normal !important; word-break: keep-all !important; /* Disallows splitting small words mid-character */ display: block !important; width: 100% !important; } /* 3. Smoothly centers the order summary box layout when it's in full-width stacked mode */ .wp-block-woocommerce-checkout-order-summary-block, .wc-block-components-sidebar { width: 100% !important; max-width: 550px !important; /* Restricts the box size so it stays clean and focused */ margin: 30px auto !important; /* Centers the card layout beautifully below your inputs */ } /* ========================================================================== FORCE INNER BASKET COMPONENTS TO SNAP FULLY LEFT ========================================================================== */ /* 1. Snaps the sticky flex container contents to the absolute left margin */ .wc-block-cart__submit-container, div.wc-block-cart__submit-container, div[class*="submit-container--sticky"] { display: flex !important; justify-content: flex-start !important; /* Force items to start on the left edge */ align-items: center !important; width: 100% !important; margin-left: 0 !important; margin-right: auto !important; } /* 2. Disables any automatic horizontal margin offsets on the button anchor link */ .wc-block-cart__submit-container a.wc-block-components-button, div[class*="submit-container"] a.wp-element-button { margin-left: 0 !important; /* Strips the auto centering pull */ margin-right: auto !important; display: inline-flex !important; } /* 3. Ensures the outer sidebar structure leans left naturally */ .wc-block-cart__sidebar, div.wc-block-cart__sidebar, .wp-block-woocommerce-cart-totals-block { margin-left: 0 !important; margin-right: auto !important; } /* ========================================================================== CART ITEM PRODUCT TITLE TYPOGRAPHY REFINEMENT ========================================================================== */ /* 1. Sets resting state to bold dark charcoal with Inter typography */ .wc-block-cart-items a.wc-block-components-product-name, a.wc-block-components-product-name, .wc-block-components-cart-item__name { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; color: #0f172a !important; /* Sharp, premium dark charcoal */ font-weight: 700 !important; /* Matches your primary text weight headings */ text-decoration: none !important; /* Removes default blue underlines */ font-size: 15px !important; line-height: 1.4 !important; transition: color 0.15s ease-in-out !important; } /* 2. Seamless hover switch to your signature brand blue */ .wc-block-cart-items a.wc-block-components-product-name:hover, a.wc-block-components-product-name:hover, .wc-block-components-cart-item__name:hover { color: #42A5F5 !important; /* Premium neon brand blue hover */ text-decoration: underline !important; /* Elegant subtle text link tracking indicator */ } /* ========================================================================== MINIMALIST CHECKOUT TEXT COMPRESSION MATRIX ========================================================================== */ /* 1. Scales down the main bold product title text significantly inside the box */ .wc-block-components-order-summary-item h3, .wc-block-components-order-summary-item .wc-block-components-product-name, h3.wc-block-components-product-name { font-size: 13px !important; /* Compressed size to fit the narrow space */ font-weight: 700 !important; /* Keeps it bold and clear */ line-height: 1.3 !important; /* Tighter spacing between lines */ letter-spacing: -0.01em !important; } /* 2. Slightly reduces the variation text metadata size underneath the title */ .wc-block-components-product-metadata, .wc-block-components-order-summary-item__details { font-size: 11px !important; /* Cleaner micro-label look */ line-height: 1.4 !important; } /* Perfect target lock: changes only the heart lines from 1.8px to 2px across all pages in 1 second */ div[style*="align-items: center"] div[style*="height: 1.8px"], div[style*="align-items:center"] div[style*="height:1.8px"] { height: 2px !important; } /* ========================================================================== MOBILE OVERLAY INTERACTION REPAIR (GALAXY S21 FLOATING SEARCH FIX) ========================================================================== */ @media (max-width: 921px) { /* 1. Keeps the resting desktop-utility wrapper hidden as per your design */ .tf-desktop-utilities .tf-search-capsule-input { display: none !important; } /* 2. Unlocks visibility for your original capsule design when active */ #tf-floating-search-overlay.is-visible .tf-search-capsule-input, #tf-floating-search-overlay.is-visible .tf-floating-search-inner input { display: block !important; visibility: visible !important; opacity: 1 !important; } } /* ========================================================================== MOBILE DROPDOWN POSITION & ICON ALIGNMENT FIX (GALAXY S21 REPAIR) ========================================================================== */ @media (max-width: 921px) { /* 1. Lowers the container to reveal the top rounded corner radiuses */ .ast-mobile-popup-drawer.active .ast-mobile-popup-inner { margin-top: 12px !important; } /* 2. Forces the icon row tracker to stay perfectly centered on wider mobile screens */ .ast-mobile-popup-inner .tf-desktop-utilities, .ast-mobile-popup-inner [class*="utility-track"] { display: flex !important; justify-content: center !important; align-items: center !important; gap: 16px !important; /* Keeps spacing uniform between the 5 utility icons */ width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ========================================================================== MOBILE DROPDOWN ICON TRACK WIDTH & CENTERING (GALAXY S21 BREAKOUT FIX) ========================================================================== */ @media screen and (max-width: 921px) { /* 1. Limits the tracking width and centers the row within Astra's mobile card */ div.tf-desktop-utilities { display: flex !important; justify-content: center !important; align-items: center !important; gap: 14px !important; /* Keeps clean uniform gaps between your 5 items */ width: 100% !important; max-width: 240px !important; /* Stops the layout from blowing out on wide phones */ margin-left: auto !important; /* Pairs with margin-right to force absolute centering */ margin-right: auto !important; } } /* ========================================================================== MOBILE DROPDOWN UNIFIED FRAME & RESTORED JOYSTICK CONTROL ENGINE ========================================================================== */ @media (max-width: 921px) { /* 1. Holds your secure mobile box width tight and stable on all phones */ #ast-mobile-popup .ast-mobile-popup-inner, .ast-mobile-popup-inner, .ast-mobile-popup-content, div.ast-builder-menu-mobile { width: 290px !important; max-width: 90vw !important; } /* 2. Restores your original left-aligned track grid layer */ .ast-mobile-popup-inner div.tf-desktop-utilities, div.tf-desktop-utilities { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; /* Back to baseline start track */ width: 100% !important; gap: var(--icon-gap-spacing) !important; } /* 3. RESTORED: Your separate Search icon joystick + Math-Based 15px Right Nudge */ .tf-desktop-utilities .search-form, div.tf-desktop-utilities .search-form { order: 1 !important; display: inline-flex !important; transform: translateX(calc(var(--search-nudge-x) + 10px)) !important; /* 🕹ī¸ Combines your base joystick and forces an isolated 15px right slide */ } /* 4. RESTORED: Your separate Core 4 icon sorting row */ .tf-desktop-utilities .tf-currency-dropdown-wrapper { order: 2 !important; } .tf-desktop-utilities .tf-notification-trigger { order: 3 !important; } .tf-desktop-utilities .tf-cart-trigger { order: 4 !important; } .tf-desktop-utilities .tf-account-trigger { order: 5 !important; } /* 5. RESTORED: Your Core 4 group joystick shift */ .tf-desktop-utilities .tf-currency-dropdown-wrapper, .tf-desktop-utilities .tf-notification-trigger, .tf-desktop-utilities .tf-cart-trigger, .tf-desktop-utilities .tf-account-trigger { transform: translateX(var(--core4-nudge-x)) !important; } } /* ========================================================================== PRODUCTION FINALIZE: ISOLATED TABLET SNAP & MOBILE FOOTER DROP CONTROLLER ========================================================================== */ /* 📑 1. TABLET SIZES ONLY: Snaps "For Creators" straight to the top baseline */ @media screen and (min-width: 545px) and (max-width: 921px) { .site-footer div.ast-builder-footer-grid-columns.site-primary-footer-inner-wrap > .site-footer-primary-section-3, .site-footer .site-footer-primary-section-3 { margin-top: 0 !important; padding-top: 0 !important; align-self: flex-start !important; } /* Keeps baseline tablet air gap for Marketplace */ .site-footer .site-footer-primary-section-4 { margin-top: 24px !important; padding-top: 0 !important; } } /* 📱 2. PHONE SIZES ONLY: Drops "Marketplace" lower down on mobile screens */ @media screen and (max-width: 544px) { .site-footer .site-footer-primary-section-4 { /* 🕹ī¸ TWEAK THIS NUMBER: Increase it to drop Marketplace lower on mobile */ margin-top: 36px !important; padding-top: 0 !important; } }