/*
Theme Name: Gadgenix Resale
Theme URI: https://gadgenixresale.com
Author: Gadgenix Resale
Author URI: https://gadgenixresale.com
Description: A premium WooCommerce electronics resale theme with modern black, gray, purple, and off-white branding.
Version: 2.5.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 9.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gadgenix-resale
Tags: woocommerce, e-commerce, electronics, resale, gadgets, black, gray, purple, responsive
*/
/* ============================================================
CSS VARIABLES
============================================================ */
:root {
--lx-orange: #7C6CF2; /* legacy accent alias: primary purple */
--lx-orange-dark: #5D4FD6; /* legacy accent alias: dark purple */
--lx-orange-light: #8D8CF7; /* legacy accent alias: soft purple */
--lx-orange-pale: #EEEAFE; /* legacy accent alias: purple pale */
--lx-black: #0A0A0F;
--lx-dark: #13131B;
--lx-grey-dark: #202232;
--lx-grey: #6B6F7A;
--lx-grey-light: #E7E7EE;
--lx-grey-border: #E7E7EE;
--lx-white: #FFFFFF;
--lx-success: #28A745;
--gx-primary-black: #0A0A0F;
--gx-charcoal: #13131B;
--gx-deep-gray: #202232;
--gx-medium-gray: #6B6F7A;
--gx-soft-gray: #E7E7EE;
--gx-footer-bg: #F8F7FB;
--gx-card-white: #FFFFFF;
--gx-primary-purple:#7C6CF2;
--gx-dark-purple: #5D4FD6;
--gx-soft-purple: #8D8CF7;
--gx-purple-pale: #EEEAFE;
--lx-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
--lx-radius: 8px;
--lx-radius-lg: 12px;
--lx-shadow: 0 2px 12px rgba(0,0,0,.10);
--lx-shadow-lg: 0 8px 32px rgba(0,0,0,.15);
--lx-container: 1280px;
--lx-container-pad: 20px;
--lx-transition: .22s ease;
}
/* ============================================================
RESET / BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; width:100%; max-width:none; overflow-x:clip; }
body {
font-family: var(--lx-font);
color: var(--lx-grey-dark);
background: var(--lx-white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
width:100%;
max-width:none !important;
margin:0 !important;
padding:0 !important;
overflow-x:clip;
}
a { color: var(--lx-orange); text-decoration: none; transition: color var(--lx-transition); }
a:hover { color: var(--lx-orange-dark); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--lx-font); }
input, select, textarea { font-family: var(--lx-font); }
/* ============================================================
UTILITY
============================================================ */
.lx-container { width:min(100% - (var(--lx-container-pad) * 2), var(--lx-container)); max-width:var(--lx-container); margin:0 auto; padding:0; }
.lx-sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.lx-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.lx-badge--orange { background:var(--lx-orange); color:#fff; }
.lx-badge--sale { background:#e74c3c; color:#fff; }
.lx-badge--new { background:var(--lx-success); color:#fff; }
.lx-section { padding: 60px 0; }
.lx-section--grey { background: var(--lx-grey-light); }
.lx-section-title { font-size:1.75rem; font-weight:700; color:var(--lx-dark); margin-bottom:8px; }
.lx-section-sub { color:var(--lx-grey); font-size:.95rem; margin-bottom:36px; }
.lx-divider { width:48px; height:4px; background:var(--lx-orange); border-radius:2px; margin:10px 0 32px; }
/* ============================================================
BUTTONS
============================================================ */
.lx-btn {
display:inline-flex; align-items:center; gap:6px;
padding:8px 18px; border-radius:var(--lx-radius);
font-size:.86rem; font-weight:600; letter-spacing:.01em;
border:1px solid transparent; transition:all var(--lx-transition); cursor:pointer;
text-decoration:none;
}
.lx-btn--primary { background:var(--lx-orange); color:#fff; border-color:var(--lx-orange); }
.lx-btn--primary:hover { background:var(--lx-orange-dark); border-color:var(--lx-orange-dark); color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px rgba(124,58,237,.35); }
.lx-btn--outline { background:transparent; color:var(--lx-orange); border-color:var(--lx-orange); }
.lx-btn--outline:hover { background:var(--lx-orange); color:#fff; }
.lx-btn--dark { background:var(--lx-dark); color:#fff; border-color:var(--lx-dark); }
.lx-btn--dark:hover { background:#000; border-color:#000; color:#fff; }
.lx-btn--sm { padding:5px 12px; font-size:.78rem; }
.lx-btn--lg { padding:10px 24px; font-size:.94rem; }
.lx-btn--block { width:100%; justify-content:center; }
/* ============================================================
TOPBAR
============================================================ */
.lx-topbar {
background: linear-gradient(90deg, #0F1525 0%, #1A1A2E 50%, #0F1525 100%);
color: rgba(255,255,255,.9);
font-size: .8rem;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.lx-topbar__inner {
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.lx-topbar__left {
display:flex; align-items:center; gap:10px;
font-weight:500; letter-spacing:.01em;
}
.lx-topbar__pulse {
width:8px; height:8px; border-radius:50%;
background:var(--lx-orange);
box-shadow:0 0 0 0 rgba(124,58,237,.60);
animation: lx-pulse 2s infinite;
flex-shrink:0;
}
@keyframes lx-pulse {
0% { box-shadow: 0 0 0 0 rgba(124,58,237,.55); }
70% { box-shadow: 0 0 0 10px rgba(124,58,237,0); }
100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}
.lx-topbar__right { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.lx-topbar__right a {
color: rgba(255,255,255,.85);
font-size: .8rem;
display:inline-flex; align-items:center; gap:6px;
position:relative; transition:color var(--lx-transition);
}
.lx-topbar__right a + a::before {
content:''; position:absolute; left:-12px; top:50%;
width:1px; height:14px; background:rgba(255,255,255,.18); transform:translateY(-50%);
}
.lx-topbar__right a:hover { color: var(--lx-orange); }
.lx-topbar__right svg { opacity:.75; }
/* ============================================================
HEADER
============================================================ */
.lx-header {
background: var(--lx-white);
border-bottom: 1px solid var(--lx-grey-border);
position: sticky; top:0; z-index:1000;
box-shadow: 0 1px 0 rgba(0,0,0,.04);
transition: box-shadow .25s ease;
}
.lx-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.10); }
.lx-header__inner {
display:flex; align-items:center; gap:24px;
padding-top:14px; padding-bottom:14px;
}
/* Brand */
.lx-brand {
display:flex; align-items:center; gap:11px;
text-decoration:none; flex-shrink:0;
transition: transform var(--lx-transition);
}
.lx-brand:hover { transform: translateY(-1px); }
.lx-brand__icon {
width:44px; height:44px;
background: linear-gradient(135deg, var(--lx-orange) 0%, #8D8CF7 100%);
border-radius: 11px;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 4px 14px rgba(124,58,237,.30), inset 0 1px 0 rgba(255,255,255,.25);
color:#fff;
flex-shrink:0;
}
.lx-brand__icon svg { color:#fff; }
.lx-brand__text-wrap { line-height:1.1; }
.lx-brand__name { font-size:1.32rem; font-weight:800; color:var(--lx-dark); letter-spacing:-.025em; }
.lx-brand__name span { color:var(--lx-orange); }
.lx-brand__tagline {
font-size:.66rem; color:var(--lx-grey); font-weight:600;
text-transform:uppercase; letter-spacing:.1em; margin-top:2px;
}
/* Custom logo support */
.lx-brand .custom-logo { max-height:var(--lx-logo-desktop-height, 46px); width:auto; }
/* Search */
.lx-search { flex:1; max-width:580px; }
.lx-search__form {
display:flex; align-items:center;
background: var(--lx-grey-light);
border:2px solid transparent;
border-radius: 999px;
overflow:hidden;
transition: all var(--lx-transition);
padding-left: 16px;
}
.lx-search__form:hover { background: #ebebeb; }
.lx-search__form:focus-within {
background: #fff;
border-color: var(--lx-orange);
box-shadow: 0 0 0 4px rgba(124,58,237,.14);
}
.lx-search__icon { color: var(--lx-grey); display:inline-flex; flex-shrink:0; }
.lx-search__form:focus-within .lx-search__icon { color: var(--lx-orange); }
.lx-search__input {
flex:1; padding: 11px 14px; border:none; outline:none;
font-size:.92rem; color:var(--lx-dark); background:transparent; min-width:0;
}
.lx-search__input::placeholder { color: var(--lx-grey); }
.lx-search__btn {
background: linear-gradient(135deg, var(--lx-orange) 0%, var(--lx-orange-dark) 100%);
color:#fff; border:none; padding: 0 24px;
font-size:.88rem; font-weight:700; letter-spacing:.02em;
height:42px;
display:flex; align-items:center; gap:6px; cursor:pointer;
border-radius: 999px;
margin: 2px;
transition: all var(--lx-transition);
}
.lx-search__btn:hover { box-shadow: 0 4px 14px rgba(124,58,237,.42); }
.lx-search__btn:active { transform: scale(.97); }
/* Header Actions */
.lx-header-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; }
.lx-header-action {
display:flex; align-items:center; gap:10px;
text-decoration:none; color:var(--lx-grey-dark);
padding: 8px 12px;
border-radius: var(--lx-radius);
transition: all var(--lx-transition);
position:relative;
font-weight:500;
}
.lx-header-action:hover { color:var(--lx-orange); background:var(--lx-orange-pale); }
.lx-header-action__icon {
position:relative;
display:inline-flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.lx-header-action__icon svg { width:24px; height:24px; }
.lx-header-action__txt {
display:flex; flex-direction:column; line-height:1.15;
text-align:left;
}
.lx-header-action__txt small { font-size:.7rem; color:var(--lx-grey); font-weight:500; }
.lx-header-action__txt strong { font-size:.86rem; color:var(--lx-dark); font-weight:700; }
.lx-header-action:hover .lx-header-action__txt strong { color:var(--lx-orange); }
.lx-cart-badge {
position:absolute; top:-8px; right:-9px;
background: var(--lx-orange);
color:#fff;
font-size:.66rem; font-weight:800;
min-width:20px; height:20px; padding:0 5px;
border-radius: 999px;
display:flex; align-items:center; justify-content:center;
border: 2px solid #fff;
box-shadow: 0 2px 8px rgba(124,58,237,.45);
line-height: 1;
letter-spacing: 0;
pointer-events: none;
}
.lx-cart-badge.is-bumped { animation: lx-cart-bump .4s ease; }
@keyframes lx-cart-bump {
0% { transform: scale(1); }
35% { transform: scale(1.35); }
100% { transform: scale(1); }
}
/* Mobile menu toggles (group of 2: hamburger + categories) */
.lx-menu-toggle {
display:none;
background: var(--lx-grey-light);
border:none; cursor:pointer;
width:40px; height:40px;
border-radius: var(--lx-radius);
align-items:center; justify-content:center;
flex-direction:column; gap:5px;
padding:0; flex-shrink:0;
color: var(--lx-dark);
transition: background var(--lx-transition), color var(--lx-transition);
}
.lx-menu-toggle:hover,
.lx-menu-toggle.is-active { background: var(--lx-orange-pale); color: var(--lx-orange); }
.lx-menu-toggle.is-active { background: var(--lx-orange); color: #fff; }
.lx-menu-toggle__bar {
width:20px; height:2px; background: currentColor; border-radius:2px;
transition: transform .25s ease, opacity .2s ease;
}
.lx-menu-toggle--cats svg { width:20px; height:20px; }
/* ============================================================
DESKTOP NAVIGATION / DROPDOWNS
============================================================ */
.lx-nav-bar {
background: linear-gradient(180deg, #1A1A2E 0%, #0F1525 100%);
position: relative;
z-index: 900;
border-bottom: 3px solid var(--lx-orange);
}
.lx-nav-bar__inner {
display:flex; align-items:stretch; flex-wrap:nowrap;
overflow-x: visible;
scrollbar-width:none; -ms-overflow-style:none;
}
.lx-nav-bar__inner::-webkit-scrollbar { display:none; }
/* All Depts button */
.lx-all-depts { position: relative; flex: 0 0 auto; z-index: 50; }
.lx-all-depts-btn {
display:flex; align-items:center; gap:8px;
background: linear-gradient(135deg, var(--lx-orange) 0%, var(--lx-orange-dark) 100%);
color:#fff; padding: 13px 18px;
font-size:.86rem; font-weight:700; letter-spacing:.02em;
border:none; cursor:pointer;
white-space:nowrap;
transition: filter var(--lx-transition);
height:100%;
}
.lx-all-depts-btn:hover,
.lx-all-depts.is-open .lx-all-depts-btn { filter: brightness(1.08); }
.lx-all-depts-btn__chevron { transition: transform var(--lx-transition); opacity:.85; }
.lx-all-depts.is-open .lx-all-depts-btn__chevron,
.lx-all-depts:hover .lx-all-depts-btn__chevron { transform: rotate(180deg); }
.lx-all-depts-menu {
position: absolute;
top: 100%; left: 0;
width: min(720px, calc(100vw - 40px));
background: var(--lx-white);
color: var(--lx-grey-dark);
border-top: 3px solid var(--lx-orange);
border-radius: 0 0 var(--lx-radius-lg) var(--lx-radius-lg);
box-shadow: 0 18px 50px rgba(0,0,0,.22);
opacity: 0; visibility: hidden;
transform: translateY(10px);
pointer-events: none;
transition: opacity var(--lx-transition), visibility var(--lx-transition), transform var(--lx-transition);
z-index: 1600;
overflow: hidden;
}
.lx-all-depts:hover .lx-all-depts-menu,
.lx-all-depts:focus-within .lx-all-depts-menu,
.lx-all-depts.is-open .lx-all-depts-menu {
opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.lx-all-depts-menu__head {
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding: 14px 18px;
background: var(--lx-orange-pale);
border-bottom: 1px solid var(--lx-grey-border);
font-size: .82rem; font-weight: 800;
color: var(--lx-dark);
text-transform: uppercase; letter-spacing: .06em;
}
.lx-all-depts-menu__head a {
color: var(--lx-orange); font-size: .78rem;
white-space:nowrap; text-transform:none; letter-spacing:0;
}
.lx-all-depts-menu__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px; padding: 12px;
}
.lx-all-depts-menu__item {
display:flex; align-items:center; gap:10px;
min-height:46px; padding:10px 12px;
border-radius: var(--lx-radius);
color: var(--lx-grey-dark); font-size:.88rem; font-weight:600;
text-decoration:none;
transition: all var(--lx-transition);
}
.lx-all-depts-menu__item:hover,
.lx-all-depts-menu__item:focus {
background: var(--lx-orange-pale);
color: var(--lx-orange);
transform: translateX(3px);
outline: none;
}
.lx-all-depts-menu__icon {
width:30px; height:30px;
display:inline-flex; align-items:center; justify-content:center;
flex-shrink:0;
border-radius: 8px;
background: #f5f5f7;
font-size:1rem;
}
.lx-all-depts-menu__label {
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Nav items */
.lx-nav-item {
position: relative;
flex: 0 0 auto;
}
.lx-nav-item.has-dropdown:hover,
.lx-nav-item.has-dropdown:focus-within,
.lx-nav-item.has-dropdown.is-open { z-index: 80; }
.lx-nav-link {
display:flex; align-items:center; gap:5px;
padding: 13px 13px;
color: rgba(255,255,255,.92);
font-size:.86rem; font-weight:600;
text-decoration:none; white-space:nowrap;
transition: all var(--lx-transition);
border-bottom: 3px solid transparent;
position:relative;
}
.lx-nav-link:hover,
.lx-nav-item--active > .lx-nav-link,
.lx-nav-item.is-open > .lx-nav-link {
color: var(--lx-orange);
background: rgba(255,255,255,.04);
}
.lx-nav-link__chevron {
opacity:.7;
transition: transform var(--lx-transition);
flex-shrink:0;
}
.lx-nav-item.has-dropdown:hover .lx-nav-link__chevron,
.lx-nav-item.has-dropdown:focus-within .lx-nav-link__chevron,
.lx-nav-item.has-dropdown.is-open .lx-nav-link__chevron {
transform: rotate(180deg);
}
.lx-nav-item--featured > .lx-nav-link {
color: #fff;
background: rgba(124,58,237,.18);
}
.lx-nav-item--featured > .lx-nav-link:hover { color:#fff; background: rgba(124,58,237,.28); }
.lx-footer__payment-img{height:38px;width:auto;max-width:240px;display:block;object-fit:contain;}
.lx-nav-item--page { margin-left: 4px; }
.lx-nav-item--page > .lx-nav-link { opacity: .85; }
.lx-nav-item--page:first-of-type { margin-left: 12px; border-left: 1px solid rgba(255,255,255,.15); padding-left: 12px; }
/* Dropdown */
.lx-dropdown {
position: absolute;
top: 100%; left: 0;
min-width: 240px;
width: max-content;
max-width: min(320px, calc(100vw - 28px));
padding: 8px 0;
background: var(--lx-white);
color: var(--lx-grey-dark);
border-top: 3px solid var(--lx-orange);
border-radius: 0 0 var(--lx-radius-lg) var(--lx-radius-lg);
box-shadow: 0 18px 50px rgba(0,0,0,.22);
opacity: 0; visibility: hidden;
transform: translateY(10px);
pointer-events: none;
transition: opacity var(--lx-transition), visibility var(--lx-transition), transform var(--lx-transition);
z-index: 9999;
}
.lx-nav-item.has-dropdown:hover > .lx-dropdown,
.lx-nav-item.has-dropdown:focus-within > .lx-dropdown,
.lx-nav-item.has-dropdown.is-open > .lx-dropdown {
opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.lx-nav-item:nth-last-child(-n+5) > .lx-dropdown,
.lx-nav-item--featured > .lx-dropdown { left: auto; right: 0; }
.lx-dropdown__item a {
display:flex; align-items:center; gap:10px;
padding: 10px 18px;
color: var(--lx-grey-dark);
font-size:.88rem; font-weight:500;
text-decoration:none;
transition: all var(--lx-transition);
border-left: 3px solid transparent;
}
.lx-dropdown__item a::before {
content:'›'; color: var(--lx-orange); font-weight:700; margin-right:2px;
}
.lx-dropdown__item a:hover {
color: var(--lx-orange);
background: var(--lx-orange-pale);
border-left-color: var(--lx-orange);
}
.lx-dropdown__item--viewall a {
font-weight:700; color: var(--lx-dark);
background:#fafafa; border-bottom:1px solid var(--lx-grey-border);
}
.lx-dropdown__item--viewall a::before { content:'→'; }
/* Mid-range tightening */
@media (max-width: 1200px) {
.lx-nav-link { padding:13px 9px; font-size:.8rem; }
.lx-all-depts-btn { padding:13px 13px; font-size:.8rem; }
.lx-search { max-width: 420px; }
}
@media (max-width: 1024px) {
.lx-nav-link { padding: 13px 7px; font-size:.76rem; }
.lx-all-depts-btn { padding: 13px 10px; font-size:.78rem; }
.lx-brand__tagline { display:none; }
.lx-header-action__txt small { display:none; }
.lx-header-action__txt strong { font-size:.8rem; }
}
/* ============================================================
MOBILE DRAWER
============================================================ */
.lx-mobile-drawer {
position: fixed; inset:0;
z-index: 5000;
visibility: hidden;
pointer-events: none;
}
.lx-mobile-drawer.is-open { visibility: visible; pointer-events: auto; }
.lx-mobile-drawer__backdrop {
position:absolute; inset:0;
background: rgba(15,21,37,.55);
opacity:0;
transition: opacity .3s ease;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.lx-mobile-drawer.is-open .lx-mobile-drawer__backdrop { opacity:1; }
.lx-mobile-drawer__panel {
position:absolute; top:0; left:0; bottom:0;
width: min(360px, 88vw);
background: #fff;
display:flex; flex-direction:column;
transform: translateX(-100%);
transition: transform .32s cubic-bezier(.4,0,.2,1);
box-shadow: 8px 0 40px rgba(0,0,0,.2);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.lx-mobile-drawer.is-open .lx-mobile-drawer__panel { transform: translateX(0); }
.lx-mobile-drawer__head {
display:flex; align-items:center; justify-content:space-between;
padding: 16px 18px;
background: linear-gradient(135deg, #0F1525 0%, #1A1A2E 100%);
color:#fff;
border-bottom: 3px solid var(--lx-orange);
position: sticky; top:0; z-index:5;
}
.lx-mobile-drawer__brand {
display:flex; align-items:center; gap:10px;
text-decoration:none;
}
.lx-mobile-drawer__brand .lx-brand__icon {
width:36px; height:36px;
background: linear-gradient(135deg, var(--lx-orange) 0%, #8D8CF7 100%);
border-radius:9px;
display:flex; align-items:center; justify-content:center;
box-shadow:0 3px 10px rgba(124,58,237,.42);
}
.lx-mobile-drawer__brand .lx-brand__name {
color:#fff; font-size:1.1rem; font-weight:800; letter-spacing:-.02em;
}
.lx-mobile-drawer__brand .lx-brand__name span { color: var(--lx-orange); }
.lx-mobile-drawer__close {
background: rgba(255,255,255,.08);
border:none; color:#fff;
width:38px; height:38px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition: background var(--lx-transition);
}
.lx-mobile-drawer__close:hover { background: rgba(124,58,237,.42); }
.lx-mobile-drawer__search {
display:flex; align-items:center; gap:8px;
padding: 14px 16px;
background: var(--lx-grey-light);
border-bottom: 1px solid var(--lx-grey-border);
}
.lx-mobile-drawer__search > svg { color: var(--lx-grey); flex-shrink:0; margin-left:4px; }
.lx-mobile-drawer__search input {
flex:1; padding: 10px 12px;
border:1px solid var(--lx-grey-border);
border-radius: 999px;
background:#fff; outline:none;
font-size:.9rem;
min-width:0;
}
.lx-mobile-drawer__search input:focus {
border-color: var(--lx-orange);
box-shadow: 0 0 0 3px rgba(124,58,237,.14);
}
.lx-mobile-drawer__search button {
background: var(--lx-orange); color:#fff;
border:none; padding: 10px 16px;
font-weight:700; font-size:.85rem;
border-radius: 999px; cursor:pointer;
transition: background var(--lx-transition);
}
.lx-mobile-drawer__search button:hover { background: var(--lx-orange-dark); }
.lx-mobile-drawer__quicklinks {
display:grid; grid-template-columns:1fr 1fr; gap:10px;
padding: 14px 16px;
border-bottom: 1px solid var(--lx-grey-border);
}
.lx-mobile-drawer__quicklinks a {
display:flex; align-items:center; justify-content:center; gap:8px;
padding: 12px 10px;
background: var(--lx-grey-light);
border-radius: var(--lx-radius);
color: var(--lx-dark);
font-size:.85rem; font-weight:700;
text-decoration:none;
transition: all var(--lx-transition);
position:relative;
}
.lx-mobile-drawer__quicklinks a:hover {
background: var(--lx-orange-pale); color: var(--lx-orange);
}
.lx-mobile-drawer__badge {
background: var(--lx-orange); color:#fff;
font-size:.65rem; font-weight:800;
min-width:18px; height:18px; padding:0 5px;
border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
margin-left: 2px;
}
.lx-mobile-drawer__heading {
padding: 16px 18px 8px;
font-size: .72rem; font-weight: 800;
color: var(--lx-grey);
text-transform: uppercase; letter-spacing: .1em;
}
.lx-mobile-nav { padding: 0 8px 12px; flex:1; }
.lx-mobile-nav__item { border-bottom: 1px solid #f2f2f4; }
.lx-mobile-nav__item:last-child { border-bottom: none; }
.lx-mobile-nav__row { display:flex; align-items:stretch; }
.lx-mobile-nav__link {
flex:1;
padding: 14px 12px;
color: var(--lx-dark);
font-size: .94rem; font-weight: 600;
text-decoration: none;
display:flex; align-items:center;
border-radius: var(--lx-radius);
transition: background var(--lx-transition), color var(--lx-transition);
}
.lx-mobile-nav__link:hover { color: var(--lx-orange); background: var(--lx-orange-pale); }
.lx-mobile-nav__toggle {
background: transparent; border:none;
width:44px; flex-shrink:0;
color: var(--lx-grey);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
border-radius: var(--lx-radius);
transition: all var(--lx-transition);
}
.lx-mobile-nav__toggle:hover { background: var(--lx-orange-pale); color: var(--lx-orange); }
.lx-mobile-nav__toggle svg { transition: transform .25s ease; }
.lx-mobile-nav__item.is-open .lx-mobile-nav__toggle svg { transform: rotate(180deg); }
.lx-mobile-nav__item.is-open .lx-mobile-nav__toggle { color: var(--lx-orange); }
.lx-mobile-nav__sub {
display: none;
padding: 4px 0 10px 12px;
margin: 0 0 6px 8px;
border-left: 2px solid var(--lx-orange-pale);
}
.lx-mobile-nav__item.is-open .lx-mobile-nav__sub { display: block; }
.lx-mobile-nav__sub li a {
display:block;
padding: 9px 12px;
color: var(--lx-grey-dark);
font-size: .87rem;
text-decoration: none;
border-radius: 6px;
transition: all var(--lx-transition);
}
.lx-mobile-nav__sub li a:hover {
color: var(--lx-orange);
background: var(--lx-orange-pale);
padding-left: 16px;
}
.lx-mobile-drawer__foot {
padding: 14px 18px 22px;
border-top: 1px solid var(--lx-grey-border);
background: var(--lx-grey-light);
display:flex; flex-direction:column; gap:6px;
font-size:.78rem;
color: var(--lx-grey);
}
.lx-mobile-drawer__foot a {
display:inline-flex; align-items:center; gap:8px;
color: var(--lx-dark); font-weight:700; font-size:.9rem;
text-decoration:none;
}
.lx-mobile-drawer__foot a:hover { color: var(--lx-orange); }
.lx-mobile-drawer__foot a svg { color: var(--lx-orange); }
/* Body scroll lock when drawer is open */
body.lx-no-scroll { overflow: hidden; }
/* ============================================================
HERO / BANNER
============================================================ */
.lx-hero {
background: linear-gradient(135deg, var(--lx-dark) 0%, #0f2027 50%, #1a1a2e 100%);
color:#fff; padding:70px 0; position:relative; overflow:hidden;
}
.lx-hero::before {
content:''; position:absolute; inset:0;
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237C3AED' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events:none;
}
.lx-hero__inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; }
.lx-hero__eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.lx-hero__eyebrow-line { width:36px; height:3px; background:var(--lx-orange); border-radius:2px; }
.lx-hero__eyebrow-text { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--lx-orange); }
.lx-hero__title { font-size:2.8rem; font-weight:800; line-height:1.15; margin-bottom:18px; }
.lx-hero__title span { color:var(--lx-orange); }
.lx-hero__desc { color:rgba(255,255,255,.75); font-size:1.05rem; margin-bottom:32px; max-width:460px; }
.lx-hero__actions { display:flex; gap:14px; flex-wrap:wrap; }
.lx-hero__trust { display:flex; gap:24px; margin-top:40px; flex-wrap:wrap; }
.lx-hero__trust-item { display:flex; align-items:center; gap:8px; font-size:.82rem; color:rgba(255,255,255,.7); }
.lx-hero__trust-item svg { color:var(--lx-orange); }
.lx-hero__visual { position:relative; display:flex; justify-content:center; align-items:center; }
.lx-hero__card {
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
border-radius:var(--lx-radius-lg); padding:28px; width:100%; max-width:380px;
backdrop-filter:blur(8px);
}
.lx-hero__card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; font-size:.8rem; color:rgba(255,255,255,.5); }
.lx-hero__category-pills { display:flex; flex-wrap:wrap; gap:8px; }
.lx-hero__pill {
background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.35);
color:rgba(255,255,255,.85); padding:7px 14px; border-radius:20px;
font-size:.8rem; font-weight:600; transition:all var(--lx-transition); text-decoration:none;
display:flex; align-items:center; gap:5px;
}
.lx-hero__pill:hover { background:var(--lx-orange); border-color:var(--lx-orange); color:#fff; }
.lx-hero__pill svg { width:13px; height:13px; }
/* ============================================================
PROMO STRIP
============================================================ */
.lx-promo-strip {
background: linear-gradient(90deg, var(--lx-orange) 0%, var(--lx-orange-light) 100%);
color:#fff; padding:14px 0;
}
.lx-promo-strip__inner { display:flex; justify-content:center; gap:40px; flex-wrap:wrap; align-items:center; }
.lx-promo-strip__item { display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; }
.lx-promo-strip__item svg { width:18px; height:18px; opacity:.9; }
/* ============================================================
CATEGORY GRID
============================================================ */
.lx-cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:16px; }
.lx-cat-card {
background:var(--lx-white); border:2px solid var(--lx-grey-border);
border-radius:var(--lx-radius-lg); padding:24px 16px; text-align:center;
text-decoration:none; transition:all var(--lx-transition); position:relative; overflow:hidden;
}
.lx-cat-card::before { content:''; position:absolute; inset:0; background:var(--lx-orange); opacity:0; transition:opacity var(--lx-transition); }
.lx-cat-card:hover { border-color:var(--lx-orange); transform:translateY(-3px); box-shadow:var(--lx-shadow-lg); }
.lx-cat-card:hover::before { opacity:.03; }
.lx-cat-card__icon {
width:52px; height:52px; background:var(--lx-orange-pale); border-radius:var(--lx-radius);
display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
transition:all var(--lx-transition);
}
.lx-cat-card__icon svg { width:26px; height:26px; color:var(--lx-orange); }
.lx-cat-card:hover .lx-cat-card__icon { background:var(--lx-orange); }
.lx-cat-card:hover .lx-cat-card__icon svg { color:#fff; }
.lx-cat-card__name { font-size:.88rem; font-weight:700; color:var(--lx-dark); }
.lx-cat-card__count { font-size:.75rem; color:var(--lx-grey); margin-top:3px; }
/* ============================================================
PRODUCT CARDS
============================================================ */
.lx-products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; }
.lx-product-card {
background:var(--lx-white); border:1px solid var(--lx-grey-border);
border-radius:var(--lx-radius-lg); overflow:hidden; transition:all var(--lx-transition);
display:flex; flex-direction:column;
}
.lx-product-card:hover { box-shadow:var(--lx-shadow-lg); transform:translateY(-3px); border-color:var(--lx-orange); }
.lx-product-card__thumb { position:relative; background:#fff; aspect-ratio:1; overflow:hidden; }
.lx-product-card__thumb img { width:100%; height:100%; object-fit:contain; padding:8px; transition:transform var(--lx-transition); }
.lx-product-card:hover .lx-product-card__thumb img { transform:scale(1.04); }
.lx-product-card__badges { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:4px; }
.lx-product-card__wish {
position:absolute; top:10px; right:10px; width:32px; height:32px;
background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
box-shadow:var(--lx-shadow); border:none; transition:all var(--lx-transition);
opacity:0;
}
.lx-product-card:hover .lx-product-card__wish { opacity:1; }
.lx-product-card__wish:hover { background:var(--lx-orange); color:#fff; }
.lx-product-card__body { padding:16px; flex:1; display:flex; flex-direction:column; gap:8px; }
.lx-product-card__cat { font-size:.72rem; font-weight:700; text-transform:uppercase; color:var(--lx-orange); letter-spacing:.06em; }
.lx-product-card__name { font-size:.92rem; font-weight:700; color:var(--lx-dark); line-height:1.35; }
.lx-product-card__rating { display:flex; align-items:center; gap:4px; }
.lx-product-card__stars { color:#f59e0b; font-size:.8rem; letter-spacing:1px; }
.lx-product-card__rating-count { font-size:.73rem; color:var(--lx-grey); }
.lx-product-card__price { margin-top:auto; }
.lx-product-card__price .price { display:flex; align-items:baseline; gap:8px; }
.lx-product-card__price .amount { font-size:1.15rem; font-weight:800; color:var(--lx-dark); }
.lx-product-card__price del .amount { font-size:.85rem; font-weight:400; color:var(--lx-grey); text-decoration:line-through; }
.lx-product-card__price ins { text-decoration:none; }
.lx-product-card__price ins .amount { color:var(--lx-orange); }
.lx-product-card__footer { padding:0 16px 16px; }
.lx-product-card__footer .lx-btn { width:100%; justify-content:center; }
/* ============================================================
WHY US / FEATURES
============================================================ */
.lx-features-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:24px; }
.lx-feature-card {
text-align:center; padding:32px 20px;
border-radius:var(--lx-radius-lg); background:var(--lx-white);
border:2px solid var(--lx-grey-border); transition:all var(--lx-transition);
}
.lx-feature-card:hover { border-color:var(--lx-orange); box-shadow:var(--lx-shadow-lg); }
.lx-feature-card__icon {
width:60px; height:60px; background:var(--lx-orange-pale);
border-radius:50%; display:flex; align-items:center; justify-content:center;
margin:0 auto 16px; transition:all var(--lx-transition);
}
.lx-feature-card__icon svg { width:28px; height:28px; color:var(--lx-orange); }
.lx-feature-card:hover .lx-feature-card__icon { background:var(--lx-orange); }
.lx-feature-card:hover .lx-feature-card__icon svg { color:#fff; }
.lx-feature-card__title { font-size:1rem; font-weight:700; color:var(--lx-dark); margin-bottom:8px; }
.lx-feature-card__desc { font-size:.85rem; color:var(--lx-grey); line-height:1.55; }
/* ============================================================
BANNER PROMO
============================================================ */
.lx-promo-banner {
background: linear-gradient(135deg, var(--lx-dark) 0%, #16213e 100%);
color:#fff; border-radius:var(--lx-radius-lg); padding:48px; position:relative; overflow:hidden;
}
.lx-promo-banner::after {
content:''; position:absolute; right:-40px; top:-40px;
width:240px; height:240px; border-radius:50%;
background:var(--lx-orange); opacity:.07;
}
.lx-promo-banner__inner { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; position:relative; }
.lx-promo-banner__eyebrow { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--lx-orange); margin-bottom:10px; }
.lx-promo-banner__title { font-size:1.9rem; font-weight:800; margin-bottom:10px; }
.lx-promo-banner__desc { color:rgba(255,255,255,.7); font-size:.93rem; }
/* ============================================================
TRUST BADGES
============================================================ */
.lx-trust-bar {
border:2px solid var(--lx-grey-border); border-radius:var(--lx-radius-lg);
display:grid; grid-template-columns:repeat(4, 1fr);
}
.lx-trust-item {
padding:24px 20px; display:flex; align-items:center; gap:14px;
border-right:1px solid var(--lx-grey-border);
}
.lx-trust-item:last-child { border-right:none; }
.lx-trust-item__icon { width:44px; height:44px; flex-shrink:0; background:var(--lx-orange-pale); border-radius:var(--lx-radius); display:flex; align-items:center; justify-content:center; }
.lx-trust-item__icon svg { width:22px; height:22px; color:var(--lx-orange); }
.lx-trust-item__title { font-size:.9rem; font-weight:700; color:var(--lx-dark); }
.lx-trust-item__desc { font-size:.78rem; color:var(--lx-grey); margin-top:2px; }
/* ============================================================
TRUST CENTER (homepage)
============================================================ */
.lx-trust-center {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: stretch;
}
.lx-trust-center__lede {
color: var(--lx-grey);
font-size: .95rem;
line-height: 1.65;
margin: 14px 0 22px;
max-width: 540px;
}
.lx-trust-center__policies {
display: flex; flex-wrap: wrap; gap: 8px 6px;
}
.lx-trust-center__policies a {
display: inline-flex; align-items: center;
padding: 8px 14px;
border: 1px solid var(--lx-grey-border);
background: #fff;
border-radius: 999px;
color: var(--lx-grey-dark);
font-size: .82rem;
font-weight: 600;
text-decoration: none;
transition: all var(--lx-transition);
}
.lx-trust-center__policies a:hover {
border-color: var(--lx-orange);
background: var(--lx-orange-pale);
color: var(--lx-orange);
}
.lx-trust-center__card {
background: #fff;
border: 1px solid var(--lx-grey-border);
border-top: 4px solid var(--lx-orange);
border-radius: var(--lx-radius-lg);
padding: 26px 28px;
box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.lx-trust-center__company {
font-size: 1.05rem;
font-weight: 700;
color: var(--lx-dark);
letter-spacing: .02em;
}
.lx-trust-center__ein {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--lx-orange);
background: var(--lx-orange-pale);
padding: 4px 10px;
border-radius: 999px;
margin-top: 6px;
margin-bottom: 16px;
}
.lx-trust-center__row {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 0;
border-top: 1px solid #f2f2f4;
}
.lx-trust-center__row:nth-child(3) { border-top: none; }
.lx-trust-center__icon {
width: 32px; height: 32px;
flex-shrink: 0;
background: var(--lx-orange-pale);
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--lx-orange);
}
.lx-trust-center__label {
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--lx-grey);
text-transform: uppercase;
}
.lx-trust-center__value {
font-size: .9rem;
color: var(--lx-dark);
font-weight: 500;
margin-top: 2px;
line-height: 1.45;
}
.lx-trust-center__value a { color: var(--lx-dark); font-weight: 600; }
.lx-trust-center__value a:hover { color: var(--lx-orange); }
/* ============================================================
PAYMENT METHODS STRIP
============================================================ */
.lx-payments-strip {
margin-top: 28px;
padding: 18px 22px;
background: #fff;
border: 1px solid var(--lx-grey-border);
border-radius: var(--lx-radius-lg);
display: flex; align-items: center; gap: 18px;
flex-wrap: wrap;
}
.lx-payments-strip__label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--lx-grey);
flex-shrink: 0;
}
.lx-payments-strip__list {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.lx-pay-pill {
display: inline-flex; align-items: center;
padding: 6px 12px;
background: var(--lx-grey-light);
border-radius: 6px;
font-size: .72rem;
font-weight: 700;
color: var(--lx-dark);
letter-spacing: .04em;
}
@media (max-width: 768px) {
.lx-trust-center { grid-template-columns: 1fr; gap: 24px; }
.lx-trust-center__card { padding: 20px 18px; }
.lx-payments-strip { padding: 14px 16px; gap: 10px; }
.lx-payments-strip__label { width: 100%; }
}
/* ============================================================
DRAWER TABS + PANEL BODIES
============================================================ */
.lx-mobile-drawer__tabs {
display: flex;
padding: 0 12px;
background: #fff;
border-bottom: 1px solid var(--lx-grey-border);
position: sticky; top: 0; z-index: 4;
gap: 4px;
}
.lx-mobile-drawer__tab {
flex: 1;
background: transparent;
border: none;
padding: 13px 8px;
font-family: inherit;
font-size: .82rem;
font-weight: 700;
color: var(--lx-grey);
cursor: pointer;
border-bottom: 3px solid transparent;
display: flex; align-items: center; justify-content: center; gap: 7px;
transition: color var(--lx-transition), border-color var(--lx-transition);
letter-spacing: .02em;
}
.lx-mobile-drawer__tab:hover { color: var(--lx-orange); }
.lx-mobile-drawer__tab.is-active {
color: var(--lx-orange);
border-bottom-color: var(--lx-orange);
}
.lx-mobile-drawer__panel-body { display: none; }
.lx-mobile-drawer__panel-body.is-active { display: block; }
/* Simple nav (Home/Shop/About/Contact list inside drawer) */
.lx-mobile-nav--simple { padding: 8px; }
.lx-mobile-nav--simple .lx-mobile-nav__link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 12px;
font-size: .94rem;
font-weight: 600;
color: var(--lx-dark);
}
.lx-mobile-nav--simple .lx-mobile-nav__link svg {
width: 18px; height: 18px;
color: var(--lx-orange);
flex-shrink: 0;
}
/* ============================================================
SEARCH LIVE SUGGESTION DROPDOWN
============================================================ */
.lx-search { position: relative; }
.lx-search-suggest {
position: absolute;
top: calc(100% + 6px); left: 0; right: 0;
background: #fff;
border: 1px solid var(--lx-grey-border);
border-top: 3px solid var(--lx-orange);
border-radius: 0 0 var(--lx-radius-lg) var(--lx-radius-lg);
box-shadow: 0 18px 50px rgba(0,0,0,.18);
max-height: 460px;
overflow-y: auto;
z-index: 1100;
padding: 6px 0;
}
.lx-search-suggest[hidden] { display: none !important; }
.lx-search-suggest__item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
text-decoration: none;
color: var(--lx-dark);
font-size: .9rem;
border-left: 3px solid transparent;
transition: background var(--lx-transition), border-color var(--lx-transition), color var(--lx-transition);
}
.lx-search-suggest__item:hover,
.lx-search-suggest__item.is-active {
background: var(--lx-orange-pale);
border-left-color: var(--lx-orange);
color: var(--lx-dark);
}
.lx-search-suggest__thumb {
width: 44px; height: 44px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: var(--lx-grey-light);
display: flex; align-items: center; justify-content: center;
}
.lx-search-suggest__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lx-search-suggest__body { flex: 1; min-width: 0; }
.lx-search-suggest__name {
font-size: .88rem;
font-weight: 600;
color: var(--lx-dark);
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lx-search-suggest__price {
font-size: .8rem;
font-weight: 700;
color: var(--lx-orange);
margin-top: 2px;
display: block;
}
.lx-search-suggest__price del {
color: var(--lx-grey);
font-weight: 500;
margin-right: 4px;
}
.lx-search-suggest__msg {
padding: 18px 20px;
font-size: .85rem;
color: var(--lx-grey);
text-align: center;
}
.lx-search-suggest__viewall {
display: block;
padding: 11px 16px;
background: #fafafa;
border-top: 1px solid var(--lx-grey-border);
text-align: center;
font-size: .82rem;
font-weight: 700;
color: var(--lx-orange);
text-decoration: none;
transition: background var(--lx-transition);
}
.lx-search-suggest__viewall:hover { background: var(--lx-orange-pale); }
/* Mobile drawer search variant */
.lx-mobile-drawer__search { position: relative; flex-wrap: wrap; }
.lx-search-suggest--mobile {
position: static;
width: 100%;
margin-top: 8px;
border-radius: var(--lx-radius);
max-height: 340px;
border-top-width: 3px;
box-shadow: none;
}
/* ============================================================
FOOTER
============================================================ */
.lx-footer {
background: linear-gradient(180deg, #0F1525 0%, #1A1A2E 100%);
color: rgba(255,255,255,.78);
padding: 56px 0 0;
}
.lx-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
gap: 36px;
margin-bottom: 40px;
}
.lx-footer__brand .lx-brand__icon {
position: relative !important;
background: linear-gradient(135deg, var(--lx-orange) 0%, #8D8CF7 100%);
box-shadow: 0 4px 14px rgba(124,58,237,.30);
}
.lx-footer__brand .lx-brand__name { color:#fff; font-weight:800; }
.lx-footer__brand .lx-brand__tagline { color: rgba(255,255,255,.45); }
.lx-footer__about {
color: rgba(255,255,255,.55);
font-size: .85rem; line-height: 1.65;
margin: 14px 0 18px;
max-width: 320px;
}
/* Company info block */
.lx-footer__company {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--lx-radius);
padding: 14px 16px;
margin-bottom: 18px;
font-size: .82rem;
}
.lx-footer__company-name {
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
color: #fff;
margin-bottom: 4px;
text-transform: uppercase;
}
.lx-footer__company-meta {
display: flex;
align-items: flex-start;
gap: 8px;
color: rgba(255,255,255,.6);
font-size: .78rem;
line-height: 1.55;
margin-top: 4px;
}
.lx-footer__company-meta svg { color: var(--lx-orange); flex-shrink:0; margin-top:3px; }
.lx-footer__company-meta a { color: rgba(255,255,255,.7); }
.lx-footer__company-meta a:hover { color: var(--lx-orange); }
.lx-footer__social { display:flex; gap:8px; margin-top:6px; }
.lx-footer__social a {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.7);
transition: all var(--lx-transition);
font-size: .82rem; font-weight: 600;
text-decoration: none;
}
.lx-footer__social a:hover { background: var(--lx-orange); color:#fff; transform:translateY(-2px); }
/* Column titles (accordion-ready buttons) */
.lx-footer__col-title {
display: flex; align-items: center; justify-content: space-between;
width: 100%;
background: transparent; border: none;
padding: 0 0 10px;
margin: 0 0 14px;
font-size: .82rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #fff;
border-bottom: 1px solid rgba(124,58,237,.28);
cursor: default;
text-align: left;
font-family: inherit;
}
.lx-footer__col-icon { display: none; }
.lx-footer__links { padding:0; margin:0; list-style:none; }
.lx-footer__links li { margin-bottom: 8px; }
.lx-footer__links a {
color: rgba(255,255,255,.6);
font-size: .85rem; font-weight: 400;
transition: color var(--lx-transition), padding-left var(--lx-transition);
display: inline-flex; align-items: center; gap: 6px;
text-decoration: none;
}
.lx-footer__links a::before { content:'›'; color: var(--lx-orange); font-weight: 600; }
.lx-footer__links a:hover { color: var(--lx-orange); padding-left: 3px; }
.lx-footer__newsletter-copy {
font-size: .83rem; color: rgba(255,255,255,.55);
line-height: 1.6; margin-bottom: 12px;
}
.lx-footer__newsletter-form {
display: flex; margin-top: 4px;
border-radius: var(--lx-radius);
overflow: hidden;
background: rgba(255,255,255,.06);
}
.lx-footer__newsletter-input {
flex: 1; min-width:0;
padding: 11px 14px; border: none;
background: transparent;
color: #fff;
font-size: .85rem; outline: none;
}
.lx-footer__newsletter-input::placeholder { color: rgba(255,255,255,.4); }
.lx-footer__newsletter-btn {
background: var(--lx-orange); color:#fff;
border: none; padding: 11px 16px;
font-size: .82rem; font-weight: 700;
cursor: pointer;
transition: background var(--lx-transition);
}
.lx-footer__newsletter-btn:hover { background: var(--lx-orange-dark); }
.lx-footer__newsletter-fine {
font-size: .72rem; color: rgba(255,255,255,.35);
margin-top: 8px;
}
.lx-footer__bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding: 20px 0;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
}
.lx-footer__bottom-text { font-size: .78rem; color: rgba(255,255,255,.45); }
.lx-footer__bottom-links { display: flex; gap: 20px; }
.lx-footer__bottom-links a {
font-size: .78rem; color: rgba(255,255,255,.5);
transition: color var(--lx-transition);
text-decoration: none;
}
.lx-footer__bottom-links a:hover { color: var(--lx-orange); }
.lx-footer__payment { display: flex; gap: 6px; align-items: center; flex-wrap:wrap; }
.lx-footer__payment-icon {
background: rgba(255,255,255,.08);
border-radius: 4px;
padding: 4px 8px;
font-size: .68rem; font-weight: 700;
color: rgba(255,255,255,.65);
letter-spacing: .04em;
}
/* ============================================================
WOOCOMMERCE OVERRIDES
============================================================ */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
background: var(--lx-orange) !important;
color: #fff !important;
border-radius: var(--lx-radius) !important;
font-weight: 700 !important;
font-family: var(--lx-font) !important;
border: none !important;
padding: 11px 22px !important;
transition: background var(--lx-transition) !important;
font-size: .9rem !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--lx-orange-dark) !important; }
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--lx-orange) !important; }
.woocommerce span.onsale { background: #e74c3c !important; }
.woocommerce .price { color: var(--lx-dark) !important; }
.woocommerce ins .amount,
.woocommerce .woocommerce-Price-amount { color: var(--lx-orange) !important; }
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--lx-orange) !important; color: #fff !important; border-color: var(--lx-orange) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--lx-orange); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--lx-white) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--lx-grey-border); }
.woocommerce .star-rating span { color: #f59e0b; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: var(--lx-orange); }
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--lx-orange); border-color: var(--lx-orange); }
.woocommerce .widget_price_filter .price_slider_amount .button { background: var(--lx-orange) !important; }
/* Product page */
.woocommerce div.product .product_title { font-size:1.8rem; font-weight:700; color:var(--lx-dark); }
.woocommerce div.product p.price { font-size:1.5rem; font-weight:700; }
.woocommerce div.product form.cart .quantity input { border:2px solid var(--lx-grey-border); border-radius:var(--lx-radius); padding:8px 12px; }
.woocommerce div.product form.cart .single_add_to_cart_button { font-size:1rem !important; padding:13px 32px !important; }
/* Shop layout */
.woocommerce ul.products li.product { transition:all var(--lx-transition); }
.woocommerce ul.products li.product:hover { transform:translateY(-3px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size:.9rem; font-weight:400; }
/* Cart/Checkout */
.woocommerce table.shop_table { border-radius:var(--lx-radius-lg); overflow:hidden; }
.woocommerce .checkout #payment { background:var(--lx-grey-light); border-radius:var(--lx-radius-lg); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select { border:2px solid var(--lx-grey-border); border-radius:var(--lx-radius); padding:10px 14px; transition:border-color var(--lx-transition); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus { border-color:var(--lx-orange); outline:none; }
/* ============================================================
PAGE TEMPLATES
============================================================ */
.lx-page-hero {
background: linear-gradient(135deg, var(--lx-dark) 0%, #16213e 100%);
color:#fff; padding:60px 0 50px; text-align:center;
}
.lx-page-hero__title { font-size:2.2rem; font-weight:800; margin-bottom:10px; }
.lx-page-hero__breadcrumb { font-size:.85rem; color:rgba(255,255,255,.55); }
.lx-page-hero__breadcrumb a { color:var(--lx-orange); }
.lx-page-content { padding:60px 0; }
.lx-page-content__inner { max-width:860px; margin:0 auto; }
.lx-page-content h2 { font-size:1.4rem; font-weight:700; color:var(--lx-dark); margin:32px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--lx-orange-pale); }
.lx-page-content h3 { font-size:1.1rem; font-weight:700; color:var(--lx-dark); margin:24px 0 10px; }
.lx-page-content p { margin-bottom:14px; line-height:1.75; color:var(--lx-grey-dark); }
.lx-page-content ul { margin:12px 0 18px 20px; }
.lx-page-content ul li { margin-bottom:7px; color:var(--lx-grey-dark); line-height:1.6; list-style:disc; }
.lx-page-content .lx-info-box { background:var(--lx-orange-pale); border-left:4px solid var(--lx-orange); padding:18px 20px; border-radius:0 var(--lx-radius) var(--lx-radius) 0; margin:24px 0; }
.lx-page-content .lx-info-box p { margin:0; font-weight:600; color:var(--lx-dark); }
/* Contact form */
.lx-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.lx-contact-info-item { display:flex; gap:14px; margin-bottom:24px; }
.lx-contact-info-item__icon { width:44px; height:44px; background:var(--lx-orange-pale); border-radius:var(--lx-radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lx-contact-info-item__icon svg { color:var(--lx-orange); }
.lx-form-group { margin-bottom:18px; }
.lx-form-label { display:block; font-size:.85rem; font-weight:700; color:var(--lx-dark); margin-bottom:6px; }
.lx-form-input, .lx-form-textarea, .lx-form-select {
width:100%; padding:11px 14px; border:2px solid var(--lx-grey-border);
border-radius:var(--lx-radius); font-family:var(--lx-font); font-size:.9rem;
transition:border-color var(--lx-transition); outline:none; color:var(--lx-dark);
}
.lx-form-input:focus, .lx-form-textarea:focus, .lx-form-select:focus { border-color:var(--lx-orange); }
.lx-form-textarea { resize:vertical; min-height:130px; }
/* ============================================================
BREADCRUMBS
============================================================ */
.lx-breadcrumb { padding:14px 0; border-bottom:1px solid var(--lx-grey-border); }
.lx-breadcrumb__list { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.82rem; color:var(--lx-grey); }
.lx-breadcrumb__list a { color:var(--lx-grey); }
.lx-breadcrumb__list a:hover { color:var(--lx-orange); }
.lx-breadcrumb__list li:not(:last-child)::after { content:'›'; margin-left:6px; color:var(--lx-grey-border); }
.lx-breadcrumb__list li:last-child { color:var(--lx-dark); font-weight:600; }
/* ============================================================
SIDEBAR
============================================================ */
.lx-shop-layout { display:grid; grid-template-columns:260px 1fr; gap:32px; }
.lx-sidebar { position:relative; }
.lx-widget { margin-bottom:24px; background:var(--lx-white); border:2px solid var(--lx-grey-border); border-radius:var(--lx-radius-lg); overflow:hidden; }
.lx-widget__title { background:var(--lx-orange-pale); padding:14px 18px; font-size:.88rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--lx-dark); border-bottom:2px solid var(--lx-orange); }
.lx-widget__body { padding:16px; }
/* ============================================================
NOTICES
============================================================ */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius:var(--lx-radius) !important; }
.woocommerce-message { border-top-color:var(--lx-orange) !important; }
.woocommerce-info { border-top-color:var(--lx-orange) !important; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.lx-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
.lx-trust-bar { grid-template-columns: repeat(2, 1fr); }
.lx-trust-item:nth-child(2) { border-right:none; }
.lx-shop-layout { grid-template-columns:220px 1fr; }
.lx-hero__inner { grid-template-columns:1fr; }
.lx-hero__visual { display:none; }
.lx-hero { padding:50px 0; }
.lx-hero__title { font-size:2.2rem; }
}
@media (max-width: 768px) {
/* Topbar stays visible on mobile but compact */
.lx-topbar { display:block !important; padding: 6px 0; font-size: .72rem; }
.lx-topbar__inner { gap: 6px; }
.lx-topbar__left { font-size: .72rem; }
.lx-topbar__right { gap: 12px; }
.lx-topbar__right a { font-size: .72rem; gap: 4px; }
.lx-topbar__right a + a::before { left: -7px; height: 11px; }
.lx-topbar__right svg { width: 11px; height: 11px; }
.lx-header__inner { padding-top:11px; padding-bottom:11px; gap:8px; }
.lx-search { display:none; }
.lx-nav-bar { display:none !important; }
.lx-menu-toggle { display:flex; }
.lx-brand__tagline { display:none; }
.lx-brand__name { font-size:1.05rem; }
.lx-brand__icon { width:38px; height:38px; }
.lx-header-action__txt { display:none; }
.lx-header-action { padding:8px; }
.lx-header-action--account { display:none; }
.lx-header-actions { gap:2px; margin-left:auto; }
/* All-depts mega menu: 2 cols on tablet, full labels visible */
.lx-all-depts-menu { width: calc(100vw - 28px); }
.lx-all-depts-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-all-depts-menu__label { font-size: .82rem; }
/* Footer: stack to single column with accordion */
.lx-footer { padding-top: 36px; }
.lx-footer__grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 20px; }
.lx-footer__brand { padding-bottom: 8px; }
.lx-footer__col {
border-bottom: 1px solid rgba(255,255,255,.08);
}
.lx-footer__col-title {
cursor: pointer;
margin: 0;
padding: 16px 4px;
border-bottom: none;
position: relative;
}
.lx-footer__col-title:hover { color: var(--lx-orange); }
.lx-footer__col-icon {
display: block;
position: relative;
width: 16px; height: 16px;
flex-shrink: 0;
}
.lx-footer__col-icon::before,
.lx-footer__col-icon::after {
content: '';
position: absolute;
background: var(--lx-orange);
border-radius: 1px;
transition: transform .25s ease;
}
.lx-footer__col-icon::before { /* horizontal */
top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%);
}
.lx-footer__col-icon::after { /* vertical */
left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
}
.lx-footer__col-title[aria-expanded="true"] .lx-footer__col-icon::after {
transform: translateX(-50%) rotate(90deg);
}
.lx-footer__col .lx-footer__links,
.lx-footer__col .lx-footer__col-body {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease, padding .3s ease;
padding: 0 4px;
}
.lx-footer__col-title[aria-expanded="true"] + .lx-footer__links,
.lx-footer__col-title[aria-expanded="true"] + .lx-footer__col-body {
max-height: 800px;
padding: 4px 4px 18px;
}
.lx-footer__bottom { flex-direction: column; text-align: center; padding: 18px 0; }
.lx-footer__bottom-links { justify-content: center; }
.lx-footer__payment { justify-content: center; }
.lx-trust-bar { grid-template-columns:1fr; border-radius:var(--lx-radius-lg); }
.lx-trust-item { border-right:none; border-bottom:1px solid var(--lx-grey-border); }
.lx-trust-item:last-child { border-bottom:none; }
.lx-shop-layout { grid-template-columns:1fr; }
.lx-cat-grid { grid-template-columns:repeat(3, 1fr); }
.lx-contact-grid { grid-template-columns:1fr; }
.lx-promo-banner__inner { grid-template-columns:1fr; }
.lx-hero__title { font-size:1.8rem; }
.lx-section { padding:40px 0; }
}
@media (max-width: 480px) {
.lx-cat-grid { grid-template-columns:repeat(2, 1fr); }
.lx-promo-strip__inner { flex-direction:column; gap:10px; }
.lx-products-grid { grid-template-columns:repeat(2, 1fr); }
.lx-all-depts-menu__grid { grid-template-columns: 1fr; }
}
/* ============================================================
GADGENIX HARD LAYOUT FIX v2.0.3
Forces the theme out of WordPress/block/page width constraints.
============================================================ */
html,
html body {
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
overflow-x:clip !important;
}
html body #page,
html body .site,
html body .site-content,
html body .site-main,
html body .content-area,
html body .wp-site-blocks,
html body .entry-content,
html body .wp-block-post-content,
html body .is-layout-constrained,
html body .is-layout-flow,
html body .wp-block-group,
html body #main-content,
html body .lx-site-main {
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
overflow:visible !important;
}
html body .lx-container,
html body .is-layout-constrained > .lx-container,
html body .wp-site-blocks > .lx-container {
width:min(100% - 40px, var(--lx-container)) !important;
max-width:var(--lx-container) !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:0 !important;
padding-right:0 !important;
}
html body .lx-fullbleed,
html body .alignfull.lx-fullbleed,
html body .lx-topbar,
html body .lx-header,
html body .lx-nav-bar,
html body .lx-hero,
html body .lx-promo-strip,
html body .lx-section,
html body .lx-page-hero,
html body .lx-page-content,
html body .lx-breadcrumb,
html body .lx-footer,
html body .is-layout-constrained > .lx-topbar,
html body .is-layout-constrained > .lx-header,
html body .is-layout-constrained > .lx-nav-bar,
html body .is-layout-constrained > .lx-hero,
html body .is-layout-constrained > .lx-promo-strip,
html body .is-layout-constrained > .lx-section,
html body .is-layout-constrained > .lx-page-hero,
html body .is-layout-constrained > .lx-page-content,
html body .is-layout-constrained > .lx-breadcrumb,
html body .is-layout-constrained > .lx-footer,
html body .wp-site-blocks > .lx-topbar,
html body .wp-site-blocks > .lx-header,
html body .wp-site-blocks > .lx-nav-bar,
html body .wp-site-blocks > .lx-hero,
html body .wp-site-blocks > .lx-promo-strip,
html body .wp-site-blocks > .lx-section,
html body .wp-site-blocks > .lx-page-hero,
html body .wp-site-blocks > .lx-page-content,
html body .wp-site-blocks > .lx-breadcrumb,
html body .wp-site-blocks > .lx-footer,
html body .entry-content > .lx-topbar,
html body .entry-content > .lx-header,
html body .entry-content > .lx-nav-bar,
html body .entry-content > .lx-hero,
html body .entry-content > .lx-promo-strip,
html body .entry-content > .lx-section,
html body .entry-content > .lx-page-hero,
html body .entry-content > .lx-page-content,
html body .entry-content > .lx-breadcrumb,
html body .entry-content > .lx-footer {
display:block;
width:100vw !important;
min-width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
padding-left:0 !important;
padding-right:0 !important;
clear:both !important;
}
html body .lx-header {
left:0 !important;
right:0 !important;
}
body.admin-bar .lx-header { top:32px; }
@media (max-width: 782px) { body.admin-bar .lx-header { top:46px; } }
@media (max-width: 480px) {
:root { --lx-container-pad:14px; }
html body .lx-container { width:min(100% - 28px, var(--lx-container)) !important; }
}
/* ============================================================
PRODUCT GRID HARD FIX v2.1.5
Equal product cards + mobile 2-column layout for Home, Shop,
Category, Related Products and WooCommerce blocks.
============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 22px !important;
align-items: stretch !important;
clear: both !important;
margin: 0 0 34px !important;
padding: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
content: none !important;
display: none !important;
}
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
float: none !important;
clear: none !important;
margin: 0 !important;
padding: 12px 12px 14px !important;
background: var(--lx-white) !important;
border: 1px solid var(--lx-grey-border) !important;
border-radius: var(--lx-radius-lg) !important;
box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100% !important;
overflow: hidden !important;
transition: transform var(--lx-transition), box-shadow var(--lx-transition), border-color var(--lx-transition) !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
transform: translateY(-3px) !important;
border-color: var(--lx-orange) !important;
box-shadow: var(--lx-shadow-lg) !important;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link {
color: inherit !important;
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
min-height: 0 !important;
width: 100% !important;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
object-fit: contain !important;
background: #fff !important;
border-radius: 10px !important;
margin: 0 0 12px !important;
padding: 8px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
color: var(--lx-dark) !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 42px !important;
margin: 0 0 8px !important;
padding: 0 !important;
font-size: .94rem !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating {
margin: 0 0 8px !important;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
margin: auto 0 12px !important;
min-height: 28px !important;
display: flex !important;
align-items: center !important;
gap: 7px !important;
flex-wrap: wrap !important;
font-size: 1rem !important;
line-height: 1.25 !important;
font-weight: 500 !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
opacity: .6 !important;
font-size: .84rem !important;
}
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
text-decoration: none !important;
}
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product .lx-cart-btn,
.woocommerce-page ul.products li.product .lx-cart-btn {
margin-top: auto !important;
width: 100% !important;
min-height: 42px !important;
padding: 10px 12px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
white-space: nowrap !important;
line-height: 1.1 !important;
text-align: center !important;
box-shadow: 0 8px 18px rgba(124,58,237,.18) !important;
}
.lx-cart-btn__icon,
.woocommerce div.product form.cart .single_add_to_cart_button::before {
width: 18px !important;
height: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
}
.lx-cart-btn__icon svg {
width: 18px !important;
height: 18px !important;
display: block !important;
fill: currentColor !important;
}
.lx-cart-btn__text {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.lx-cart-btn__plus,
.woocommerce div.product form.cart .single_add_to_cart_button::after {
width: 19px !important;
height: 19px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.22) !important;
color: #fff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1rem !important;
font-weight: 900 !important;
line-height: 1 !important;
flex: 0 0 auto !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
border-radius: 10px !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button::before {
content: "🛒" !important;
font-size: 1rem !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button::after {
content: "+" !important;
}
.lx-products-grid,
html body .lx-products-grid {
align-items: stretch !important;
}
.lx-product-card,
html body .lx-product-card {
height: 100% !important;
min-height: 100% !important;
}
.lx-product-card__name {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 40px !important;
}
.lx-product-card__footer {
margin-top: auto !important;
}
.wc-block-grid__products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 22px !important;
align-items: stretch !important;
}
.wc-block-grid__product {
width: auto !important;
max-width: none !important;
border: 1px solid var(--lx-grey-border) !important;
border-radius: var(--lx-radius-lg) !important;
padding: 12px !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.wc-block-grid__product-title {
min-height: 42px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
@media (max-width: 1024px) {
.woocommerce ul.products,
.woocommerce-page ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
.wc-block-grid__products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 18px !important;
}
}
@media (max-width: 768px) {
.woocommerce ul.products,
.woocommerce-page ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
.lx-products-grid,
html body .lx-products-grid,
.wc-block-grid__products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
padding: 9px 9px 11px !important;
border-radius: 12px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
min-height: 38px !important;
font-size: .82rem !important;
line-height: 1.32 !important;
margin-bottom: 7px !important;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
min-height: 26px !important;
font-size: .88rem !important;
margin-bottom: 10px !important;
gap: 5px !important;
}
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product .lx-cart-btn,
.woocommerce-page ul.products li.product .lx-cart-btn {
min-height: 38px !important;
padding: 9px 7px !important;
gap: 5px !important;
font-size: .75rem !important;
}
.lx-cart-btn__icon,
.lx-cart-btn__icon svg {
width: 15px !important;
height: 15px !important;
}
.lx-cart-btn__plus {
width: 16px !important;
height: 16px !important;
font-size: .88rem !important;
}
}
@media (max-width: 360px) {
.woocommerce ul.products,
.woocommerce-page ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
.lx-products-grid,
html body .lx-products-grid,
.wc-block-grid__products {
gap: 10px !important;
}
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product .lx-cart-btn,
.woocommerce-page ul.products li.product .lx-cart-btn {
font-size: .68rem !important;
}
.lx-cart-btn__icon { display: none !important; }
}
/* ============================================================
TYPOGRAPHY + COMPACT PRODUCT POLISH v2.1.5
Lighter headings, smaller professional product boxes, cleaner
section spacing across Home, Shop and Category pages.
============================================================ */
:root {
--lx-container: 1200px;
--lx-container-pad: 28px;
}
html body {
font-size: 15.5px;
font-weight: 400;
}
html body .lx-container {
width: min(100% - 56px, 1200px) !important;
max-width: 1200px !important;
}
/* Keep headings professional instead of extra bold/heavy. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .lx-section-title,
html body .lx-page-hero__title,
html body .lx-hero__title,
html body .lx-promo-banner__title,
html body .woocommerce-products-header__title,
html body .woocommerce div.product .product_title,
html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
html body .wc-block-grid__product-title {
font-weight: 500 !important;
letter-spacing: -.015em !important;
}
html body .lx-section-title {
font-size: 1.42rem !important;
line-height: 1.28 !important;
margin-bottom: 6px !important;
}
html body .lx-page-hero__title,
html body .woocommerce-products-header__title {
font-size: 1.75rem !important;
line-height: 1.25 !important;
}
html body .lx-hero__title {
font-size: 2.25rem !important;
line-height: 1.18 !important;
max-width: 620px;
}
html body .lx-hero__desc {
font-size: .96rem !important;
line-height: 1.65 !important;
}
html body .lx-promo-banner__title {
font-size: 1.5rem !important;
}
html body .lx-page-content h2 {
font-size: 1.22rem !important;
font-weight: 500 !important;
}
html body .lx-page-content h3,
html body .lx-widget__title {
font-size: .98rem !important;
font-weight: 500 !important;
}
html body p,
html body li,
html body .lx-section-sub,
html body .lx-feature-card__desc,
html body .lx-trust-item__desc {
font-weight: 400 !important;
}
/* More balanced section breathing room. */
html body .lx-section {
padding-top: 46px !important;
padding-bottom: 46px !important;
}
html body .lx-section--grey {
background: #f7f7f7 !important;
}
html body .lx-divider {
width: 42px !important;
height: 3px !important;
margin-top: 8px !important;
margin-bottom: 24px !important;
}
html body .lx-cat-grid,
html body .lx-features-grid,
html body .lx-trust-bar {
gap: 18px !important;
}
html body .lx-cat-card,
html body .lx-feature-card,
html body .lx-trust-item {
border-width: 1px !important;
box-shadow: 0 2px 10px rgba(0,0,0,.035) !important;
}
/* Compact product boxes everywhere. */
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
gap: 18px !important;
margin-bottom: 28px !important;
}
html body .woocommerce ul.products li.product,
html body .woocommerce-page ul.products li.product,
html body .wc-block-grid__product {
padding: 10px 10px 12px !important;
border-radius: 12px !important;
box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
html body .woocommerce ul.products li.product a img,
html body .woocommerce-page ul.products li.product a img,
html body .wc-block-grid__product-image img {
border-radius: 9px !important;
margin-bottom: 10px !important;
}
html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
html body .woocommerce-page ul.products li.product .woocommerce-loop-product__title,
html body .wc-block-grid__product-title {
min-height: 37px !important;
font-size: .84rem !important;
line-height: 1.32 !important;
margin-bottom: 6px !important;
}
html body .woocommerce ul.products li.product .price,
html body .woocommerce-page ul.products li.product .price,
html body .wc-block-grid__product-price {
min-height: 24px !important;
font-size: .9rem !important;
line-height: 1.25 !important;
font-weight: 500 !important;
margin-bottom: 10px !important;
}
html body .woocommerce ul.products li.product .price .amount,
html body .woocommerce-page ul.products li.product .price .amount,
html body .wc-block-grid__product-price .amount {
font-size: .95rem !important;
font-weight: 500 !important;
}
html body .woocommerce ul.products li.product .price del .amount,
html body .woocommerce-page ul.products li.product .price del .amount {
font-size: .78rem !important;
font-weight: 400 !important;
}
html body .woocommerce ul.products li.product .button,
html body .woocommerce-page ul.products li.product .button,
html body .woocommerce ul.products li.product .lx-cart-btn,
html body .woocommerce-page ul.products li.product .lx-cart-btn,
html body .wc-block-grid__product-add-to-cart .wp-block-button__link {
min-height: 38px !important;
padding: 9px 10px !important;
border-radius: 9px !important;
font-size: .78rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
box-shadow: 0 6px 14px rgba(124,58,237,.14) !important;
}
html body .lx-cart-btn__icon,
html body .lx-cart-btn__icon svg {
width: 15px !important;
height: 15px !important;
}
html body .lx-cart-btn__plus,
html body .woocommerce div.product form.cart .single_add_to_cart_button::after {
width: 16px !important;
height: 16px !important;
font-size: .86rem !important;
font-weight: 500 !important;
}
/* Home product sections: smaller, centered cards with clean left/right spacing. */
html body .lx-home-product-section .lx-container {
max-width: 1120px !important;
}
html body .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce ul.products,
html body.front-page .woocommerce ul.products {
grid-template-columns: repeat(4, minmax(0, 210px)) !important;
justify-content: center !important;
gap: 18px !important;
}
html body .lx-home-product-section .woocommerce ul.products li.product,
html body.home .woocommerce ul.products li.product,
html body.front-page .woocommerce ul.products li.product {
max-width: 210px !important;
min-height: 100% !important;
}
html body .lx-home-product-section .woocommerce ul.products li.product a img,
html body.home .woocommerce ul.products li.product a img,
html body.front-page .woocommerce ul.products li.product a img {
aspect-ratio: 1 / .92 !important;
}
/* Shop/sidebar spacing polish. */
html body .lx-shop-layout {
gap: 26px !important;
align-items: flex-start !important;
}
html body .lx-sidebar,
html body .lx-widget {
border-radius: 12px !important;
}
@media (max-width: 1024px) {
html body .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce ul.products,
html body.front-page .woocommerce ul.products {
grid-template-columns: repeat(3, minmax(0, 210px)) !important;
}
html body .lx-hero__title { font-size: 2rem !important; }
}
@media (max-width: 768px) {
html body {
font-size: 15px;
}
html body .lx-container {
width: min(100% - 28px, 1200px) !important;
}
html body .lx-section {
padding-top: 34px !important;
padding-bottom: 34px !important;
}
html body .lx-section-title {
font-size: 1.18rem !important;
}
html body .lx-page-hero__title,
html body .woocommerce-products-header__title {
font-size: 1.35rem !important;
}
html body .lx-hero__title {
font-size: 1.55rem !important;
line-height: 1.22 !important;
}
html body .lx-hero__desc {
font-size: .9rem !important;
}
html body .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce ul.products,
html body.front-page .woocommerce ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
justify-content: stretch !important;
}
html body .lx-home-product-section .woocommerce ul.products li.product,
html body.home .woocommerce ul.products li.product,
html body.front-page .woocommerce ul.products li.product,
html body .woocommerce ul.products li.product,
html body .woocommerce-page ul.products li.product {
max-width: none !important;
padding: 8px 8px 10px !important;
}
html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
html body .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
min-height: 35px !important;
font-size: .76rem !important;
line-height: 1.3 !important;
}
html body .woocommerce ul.products li.product .price,
html body .woocommerce-page ul.products li.product .price {
min-height: 22px !important;
font-size: .8rem !important;
margin-bottom: 8px !important;
}
html body .woocommerce ul.products li.product .button,
html body .woocommerce-page ul.products li.product .button,
html body .woocommerce ul.products li.product .lx-cart-btn,
html body .woocommerce-page ul.products li.product .lx-cart-btn {
min-height: 35px !important;
padding: 8px 6px !important;
font-size: .68rem !important;
gap: 4px !important;
}
html body .lx-cart-btn__icon,
html body .lx-cart-btn__icon svg {
width: 13px !important;
height: 13px !important;
}
html body .lx-cart-btn__plus {
width: 14px !important;
height: 14px !important;
font-size: .76rem !important;
}
}
@media (max-width: 380px) {
html body .lx-container {
width: min(100% - 20px, 1200px) !important;
}
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
gap: 9px !important;
}
html body .woocommerce ul.products li.product .button,
html body .woocommerce-page ul.products li.product .button,
html body .woocommerce ul.products li.product .lx-cart-btn,
html body .woocommerce-page ul.products li.product .lx-cart-btn {
font-size: .62rem !important;
}
}
/* ============================================================
FINAL RESPONSIVE PRODUCT SPACING PATCH v2.1.6
Wider usable area, smaller-but-not-tiny product boxes, no extra
side gaps, consistent Home product sections, 2 columns on mobile.
============================================================ */
:root {
--lx-container: 1240px;
--lx-container-pad: 20px;
}
html body .lx-container {
width: min(100% - 40px, 1240px) !important;
max-width: 1240px !important;
}
/* Keep headings clean and never heavier than 500. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .lx-section-title,
html body .lx-page-hero__title,
html body .lx-hero__title,
html body .lx-feature-card__title,
html body .lx-trust-item__title,
html body .lx-trust-center__company,
html body .lx-widget__title,
html body .woocommerce-products-header__title,
html body .woocommerce div.product .product_title,
html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
html body .wc-block-grid__product-title {
font-weight: 500 !important;
}
html body .lx-section-title { font-size: 1.45rem !important; }
html body .lx-page-hero__title,
html body .woocommerce-products-header__title { font-size: 1.68rem !important; }
html body .lx-hero__title { font-size: clamp(1.72rem, 3vw, 2.32rem) !important; }
html body .lx-page-content h2 { font-size: 1.18rem !important; }
html body .lx-page-content h3 { font-size: .98rem !important; }
/* Reduce over-large white space between sections and headers. */
html body .lx-section {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
html body .lx-divider {
margin-bottom: 18px !important;
}
html body .lx-home-product-section .lx-divider {
margin-bottom: 10px !important;
}
/* Desktop Home products: fill the container instead of leaving big side gaps. */
html body .lx-home-product-section .lx-container {
width: min(100% - 40px, 1240px) !important;
max-width: 1240px !important;
}
html body .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce ul.products,
html body.front-page .woocommerce ul.products {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
justify-content: stretch !important;
justify-items: stretch !important;
gap: 16px !important;
margin-top: 14px !important;
margin-bottom: 24px !important;
}
html body .lx-home-product-section .woocommerce ul.products li.product,
html body.home .woocommerce ul.products li.product,
html body.front-page .woocommerce ul.products li.product {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
padding: 10px 10px 12px !important;
}
html body .lx-home-product-section .woocommerce ul.products li.product a img,
html body.home .woocommerce ul.products li.product a img,
html body.front-page .woocommerce ul.products li.product a img {
aspect-ratio: 1 / .9 !important;
object-fit: contain !important;
background: #fff !important;
padding: 6px !important;
}
/* Shop/category/related products: clean equal cards, less side waste. */
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
gap: 16px !important;
}
html body .woocommerce ul.products li.product,
html body .woocommerce-page ul.products li.product,
html body .wc-block-grid__product {
min-width: 0 !important;
border-radius: 12px !important;
}
html body .woocommerce ul.products li.product .button,
html body .woocommerce-page ul.products li.product .button,
html body .woocommerce ul.products li.product .lx-cart-btn,
html body .woocommerce-page ul.products li.product .lx-cart-btn,
html body .wc-block-grid__product-add-to-cart .wp-block-button__link {
overflow: hidden !important;
}
html body .lx-cart-btn__text {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
@media (max-width: 1199px) {
html body .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce ul.products,
html body.front-page .woocommerce ul.products {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (max-width: 1024px) {
html body .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce ul.products,
html body.front-page .woocommerce ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
}
}
@media (max-width: 768px) {
html body .lx-container,
html body .lx-home-product-section .lx-container {
width: min(100% - 22px, 1240px) !important;
max-width: 1240px !important;
}
html body .lx-section {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
html body .lx-section-title { font-size: 1.16rem !important; }
html body .lx-page-hero__title,
html body .woocommerce-products-header__title { font-size: 1.32rem !important; }
html body .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce ul.products,
html body.front-page .woocommerce ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
justify-content: stretch !important;
justify-items: stretch !important;
}
html body .woocommerce ul.products li.product,
html body .woocommerce-page ul.products li.product,
html body .wc-block-grid__product {
width: auto !important;
max-width: none !important;
padding: 8px 8px 10px !important;
}
html body .woocommerce ul.products li.product .button,
html body .woocommerce-page ul.products li.product .button,
html body .woocommerce ul.products li.product .lx-cart-btn,
html body .woocommerce-page ul.products li.product .lx-cart-btn {
min-height: 34px !important;
padding: 7px 5px !important;
font-size: .66rem !important;
gap: 4px !important;
}
html body .lx-cart-btn__icon,
html body .lx-cart-btn__icon svg {
width: 12px !important;
height: 12px !important;
}
html body .lx-cart-btn__plus {
width: 14px !important;
height: 14px !important;
font-size: .72rem !important;
}
}
@media (max-width: 380px) {
html body .lx-container,
html body .lx-home-product-section .lx-container {
width: min(100% - 16px, 1240px) !important;
}
html body .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce ul.products,
html body.front-page .woocommerce ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
gap: 8px !important;
}
html body .woocommerce ul.products li.product .button,
html body .woocommerce-page ul.products li.product .button,
html body .woocommerce ul.products li.product .lx-cart-btn,
html body .woocommerce-page ul.products li.product .lx-cart-btn {
font-size: .6rem !important;
padding-left: 4px !important;
padding-right: 4px !important;
}
}
/* ============================================================
FINAL IN-THEME HOME PRODUCT GAP FIX v2.1.7
Reason: previous home products were capped at 210px and centered,
which created big left/right white space. This makes every home
product section use the full container while staying responsive.
============================================================ */
:root {
--lx-container: 1280px;
--lx-container-pad: 16px;
}
html body .lx-container,
html body .lx-home-product-section .lx-container {
width: min(100% - 32px, 1280px) !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
html body .lx-home-product-section .woocommerce ul.products,
html body.home .lx-home-product-section .woocommerce ul.products,
html body.front-page .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce.columns-4 ul.products.products,
html body.front-page .woocommerce.columns-4 ul.products.products {
display: grid !important;
width: 100% !important;
max-width: none !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 18px !important;
justify-content: stretch !important;
justify-items: stretch !important;
align-items: stretch !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 14px !important;
}
html body .lx-home-product-section .woocommerce ul.products li.product,
html body.home .lx-home-product-section .woocommerce ul.products li.product,
html body.front-page .lx-home-product-section .woocommerce ul.products li.product,
html body.home .woocommerce.columns-4 ul.products.products li.product,
html body.front-page .woocommerce.columns-4 ul.products.products li.product {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
padding: 10px 10px 12px !important;
margin: 0 !important;
}
html body .lx-home-product-section .woocommerce ul.products li.product a img,
html body.home .lx-home-product-section .woocommerce ul.products li.product a img,
html body.front-page .lx-home-product-section .woocommerce ul.products li.product a img {
aspect-ratio: 1 / .86 !important;
object-fit: contain !important;
background: #fff !important;
padding: 6px !important;
}
html body .lx-home-product-section .lx-section-head,
html body .lx-home-product-section .lx-section-header,
html body .lx-home-product-section .lx-divider {
width: 100% !important;
max-width: none !important;
}
@media (max-width: 1024px) {
html body .lx-home-product-section .woocommerce ul.products,
html body.home .lx-home-product-section .woocommerce ul.products,
html body.front-page .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce.columns-4 ul.products.products,
html body.front-page .woocommerce.columns-4 ul.products.products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
}
}
@media (max-width: 768px) {
html body .lx-container,
html body .lx-home-product-section .lx-container {
width: min(100% - 22px, 1280px) !important;
max-width: 1280px !important;
}
html body .lx-home-product-section .woocommerce ul.products,
html body.home .lx-home-product-section .woocommerce ul.products,
html body.front-page .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce.columns-4 ul.products.products,
html body.front-page .woocommerce.columns-4 ul.products.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
justify-content: stretch !important;
justify-items: stretch !important;
}
}
@media (max-width: 380px) {
html body .lx-container,
html body .lx-home-product-section .lx-container {
width: min(100% - 16px, 1280px) !important;
}
html body .lx-home-product-section .woocommerce ul.products,
html body.home .lx-home-product-section .woocommerce ul.products,
html body.front-page .lx-home-product-section .woocommerce ul.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
gap: 8px !important;
}
}
/* ============================================================
HOME HERO BACKGROUND IMAGE UPDATE v2.1.10
Adds the requested first-section image as the homepage hero
background and reduces the banner height responsively.
============================================================ */
html body.home .lx-hero--image-bg,
html body.front-page .lx-hero--image-bg,
html body .lx-site-main > .lx-hero--image-bg:first-child {
background-image:
linear-gradient(90deg, rgba(8, 12, 22, .76) 0%, rgba(8, 12, 22, .58) 38%, rgba(8, 12, 22, .20) 72%, rgba(8, 12, 22, .08) 100%),
url("https://tour.buildmyportfolio.org/wp-content/uploads/2026/05/ChatGPT-Image-May-7-2026-11_21_11-PM.webp") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
min-height: clamp(340px, 31vw, 445px) !important;
padding-top: 42px !important;
padding-bottom: 42px !important;
display: flex !important;
align-items: center !important;
}
html body.home .lx-hero--image-bg::before,
html body.front-page .lx-hero--image-bg::before,
html body .lx-site-main > .lx-hero--image-bg:first-child::before {
background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.12)) !important;
}
html body.home .lx-hero--image-bg .lx-hero__inner,
html body.front-page .lx-hero--image-bg .lx-hero__inner,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__inner {
grid-template-columns: minmax(0, .96fr) minmax(280px, .58fr) !important;
gap: 28px !important;
width: 100% !important;
}
html body.home .lx-hero--image-bg .lx-hero__title,
html body.front-page .lx-hero--image-bg .lx-hero__title,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__title {
font-size: clamp(1.85rem, 3vw, 2.42rem) !important;
line-height: 1.12 !important;
margin-bottom: 12px !important;
max-width: 560px !important;
}
html body.home .lx-hero--image-bg .lx-hero__desc,
html body.front-page .lx-hero--image-bg .lx-hero__desc,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__desc {
font-size: .94rem !important;
line-height: 1.58 !important;
max-width: 540px !important;
margin-bottom: 18px !important;
color: rgba(255,255,255,.86) !important;
}
html body.home .lx-hero--image-bg .lx-hero__eyebrow,
html body.front-page .lx-hero--image-bg .lx-hero__eyebrow,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__eyebrow {
margin-bottom: 10px !important;
}
html body.home .lx-hero--image-bg .lx-hero__trust,
html body.front-page .lx-hero--image-bg .lx-hero__trust,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__trust {
margin-top: 20px !important;
gap: 14px !important;
}
html body.home .lx-hero--image-bg .lx-hero__trust-item,
html body.front-page .lx-hero--image-bg .lx-hero__trust-item,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__trust-item {
color: rgba(255,255,255,.82) !important;
background: rgba(0,0,0,.18) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 999px !important;
padding: 7px 10px !important;
}
html body.home .lx-hero--image-bg .lx-hero__card,
html body.front-page .lx-hero--image-bg .lx-hero__card,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__card {
max-width: 318px !important;
padding: 18px !important;
background: rgba(8, 12, 22, .42) !important;
border-color: rgba(255,255,255,.18) !important;
}
html body.home .lx-hero--image-bg .lx-hero__card-header,
html body.front-page .lx-hero--image-bg .lx-hero__card-header,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__card-header {
margin-bottom: 12px !important;
}
html body.home .lx-hero--image-bg .lx-hero__pill,
html body.front-page .lx-hero--image-bg .lx-hero__pill,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__pill {
padding: 6px 10px !important;
font-size: .74rem !important;
background: rgba(124,58,237,.22) !important;
}
@media (max-width: 1024px) {
html body.home .lx-hero--image-bg,
html body.front-page .lx-hero--image-bg,
html body .lx-site-main > .lx-hero--image-bg:first-child {
min-height: 330px !important;
padding-top: 38px !important;
padding-bottom: 38px !important;
background-position: center center !important;
}
html body.home .lx-hero--image-bg .lx-hero__inner,
html body.front-page .lx-hero--image-bg .lx-hero__inner,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__inner {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 768px) {
html body.home .lx-hero--image-bg,
html body.front-page .lx-hero--image-bg,
html body .lx-site-main > .lx-hero--image-bg:first-child {
min-height: 305px !important;
padding-top: 30px !important;
padding-bottom: 30px !important;
background-image:
linear-gradient(90deg, rgba(8, 12, 22, .84) 0%, rgba(8, 12, 22, .68) 58%, rgba(8, 12, 22, .32) 100%),
url("https://tour.buildmyportfolio.org/wp-content/uploads/2026/05/ChatGPT-Image-May-7-2026-11_21_11-PM.webp") !important;
background-position: center center !important;
}
html body.home .lx-hero--image-bg .lx-hero__title,
html body.front-page .lx-hero--image-bg .lx-hero__title,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__title {
font-size: 1.58rem !important;
max-width: 92% !important;
}
html body.home .lx-hero--image-bg .lx-hero__desc,
html body.front-page .lx-hero--image-bg .lx-hero__desc,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__desc {
font-size: .84rem !important;
line-height: 1.48 !important;
max-width: 96% !important;
margin-bottom: 14px !important;
}
html body.home .lx-hero--image-bg .lx-hero__actions,
html body.front-page .lx-hero--image-bg .lx-hero__actions,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__actions {
gap: 8px !important;
}
html body.home .lx-hero--image-bg .lx-btn--lg,
html body.front-page .lx-hero--image-bg .lx-btn--lg,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-btn--lg {
min-height: 38px !important;
padding: 9px 13px !important;
font-size: .78rem !important;
}
html body.home .lx-hero--image-bg .lx-hero__trust,
html body.front-page .lx-hero--image-bg .lx-hero__trust,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__trust {
display: none !important;
}
}
@media (max-width: 480px) {
html body.home .lx-hero--image-bg,
html body.front-page .lx-hero--image-bg,
html body .lx-site-main > .lx-hero--image-bg:first-child {
min-height: 285px !important;
padding-top: 24px !important;
padding-bottom: 24px !important;
background-position: center center !important;
}
html body.home .lx-hero--image-bg .lx-hero__eyebrow,
html body.front-page .lx-hero--image-bg .lx-hero__eyebrow,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__eyebrow {
display: none !important;
}
html body.home .lx-hero--image-bg .lx-hero__title,
html body.front-page .lx-hero--image-bg .lx-hero__title,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__title {
font-size: 1.42rem !important;
margin-bottom: 8px !important;
}
html body.home .lx-hero--image-bg .lx-hero__desc,
html body.front-page .lx-hero--image-bg .lx-hero__desc,
html body .lx-site-main > .lx-hero--image-bg:first-child .lx-hero__desc {
font-size: .78rem !important;
max-width: 100% !important;
}
}
/* ============================================================
HOME NON-HERO SECTION SPACING + PRODUCT IMAGE FIT v2.1.12
Adds a little more left/right breathing room after the first
homepage section and shows product photos without cropping.
============================================================ */
:root {
--lx-container: 1240px;
--lx-container-pad: 28px;
}
/* Keep the first hero/billboard untouched; only polish sections below it. */
html body.home .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.front-page .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.home .lx-home-product-section .lx-container,
html body.front-page .lx-home-product-section .lx-container {
width: min(100% - 72px, 1240px) !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
}
html body.home .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg),
html body.front-page .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Product image frame: equal, clean, and no cut-off/cropped product photos. */
html body .woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
html body .woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link,
html body .woocommerce ul.products li.product a.woocommerce-loop-product__link,
html body .woocommerce-page ul.products li.product a.woocommerce-loop-product__link {
display: flex !important;
flex-direction: column !important;
}
html body .woocommerce ul.products li.product a img,
html body .woocommerce-page ul.products li.product a img,
html body .wc-block-grid__product-image img,
html body .lx-product-card__thumb img {
width: 100% !important;
height: clamp(190px, 16.5vw, 235px) !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center center !important;
background: #f7f7f7 !important;
padding: 10px !important;
border-radius: 10px !important;
margin-bottom: 10px !important;
}
html body.home .lx-home-product-section .woocommerce ul.products li.product a img,
html body.front-page .lx-home-product-section .woocommerce ul.products li.product a img,
html body.home .woocommerce.columns-4 ul.products.products li.product a img,
html body.front-page .woocommerce.columns-4 ul.products.products li.product a img {
height: clamp(205px, 17vw, 245px) !important;
object-fit: contain !important;
background: #f7f7f7 !important;
padding: 10px !important;
}
/* Slightly tidier cards with consistent visual rhythm. */
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
gap: 20px !important;
}
html body.home .lx-home-product-section .woocommerce ul.products,
html body.front-page .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce.columns-4 ul.products.products,
html body.front-page .woocommerce.columns-4 ul.products.products {
gap: 20px !important;
}
html body .woocommerce ul.products li.product,
html body .woocommerce-page ul.products li.product,
html body .wc-block-grid__product {
overflow: hidden !important;
border: 1px solid #e4e4e4 !important;
background: #fff !important;
}
html body .woocommerce ul.products li.product:hover a img,
html body .woocommerce-page ul.products li.product:hover a img,
html body .lx-product-card:hover .lx-product-card__thumb img {
transform: none !important;
}
@media (max-width: 1024px) {
html body.home .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.front-page .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.home .lx-home-product-section .lx-container,
html body.front-page .lx-home-product-section .lx-container {
width: min(100% - 48px, 1240px) !important;
}
html body .woocommerce ul.products li.product a img,
html body .woocommerce-page ul.products li.product a img,
html body .wc-block-grid__product-image img,
html body .lx-product-card__thumb img {
height: clamp(175px, 24vw, 220px) !important;
}
}
@media (max-width: 768px) {
html body.home .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.front-page .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.home .lx-home-product-section .lx-container,
html body.front-page .lx-home-product-section .lx-container {
width: min(100% - 28px, 1240px) !important;
}
html body.home .lx-home-product-section .woocommerce ul.products,
html body.front-page .lx-home-product-section .woocommerce ul.products,
html body.home .woocommerce.columns-4 ul.products.products,
html body.front-page .woocommerce.columns-4 ul.products.products,
html body .woocommerce ul.products,
html body .woocommerce-page ul.products,
html body .wc-block-grid__products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
html body .woocommerce ul.products li.product a img,
html body .woocommerce-page ul.products li.product a img,
html body .wc-block-grid__product-image img,
html body .lx-product-card__thumb img,
html body.home .lx-home-product-section .woocommerce ul.products li.product a img,
html body.front-page .lx-home-product-section .woocommerce ul.products li.product a img {
height: clamp(132px, 43vw, 180px) !important;
padding: 7px !important;
border-radius: 8px !important;
}
}
@media (max-width: 380px) {
html body.home .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.front-page .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.home .lx-home-product-section .lx-container,
html body.front-page .lx-home-product-section .lx-container {
width: min(100% - 20px, 1240px) !important;
}
html body .woocommerce ul.products li.product a img,
html body .woocommerce-page ul.products li.product a img,
html body .wc-block-grid__product-image img,
html body .lx-product-card__thumb img {
height: clamp(118px, 42vw, 155px) !important;
padding: 6px !important;
}
}
/* ============================================================
REFRESH-STABLE SPACING + PRODUCT IMAGE POLISH v2.1.12
Matches the runtime JS container widths so spacing does not
appear briefly and then disappear after page refresh/load.
============================================================ */
html body.home .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.front-page .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container {
width: min(100% - 72px, 1240px) !important;
max-width: 1240px !important;
}
html body .woocommerce ul.products li.product a img,
html body .woocommerce-page ul.products li.product a img,
html body .woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
html body .woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail {
display: block !important;
width: 100% !important;
height: clamp(205px, 17vw, 245px) !important;
max-height: 245px !important;
object-fit: contain !important;
object-position: center center !important;
background: #f7f7f7 !important;
padding: 10px !important;
border-radius: 10px !important;
}
html body .lx-product-card__thumb {
aspect-ratio: auto !important;
height: clamp(205px, 17vw, 245px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f7f7f7 !important;
}
html body .lx-product-card__thumb img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
padding: 10px !important;
background: transparent !important;
}
@media (max-width: 1024px) {
html body.home .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.front-page .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container {
width: min(100% - 48px, 1240px) !important;
}
}
@media (max-width: 768px) {
html body.home .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.front-page .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container {
width: min(100% - 28px, 1240px) !important;
}
html body .woocommerce ul.products li.product a img,
html body .woocommerce-page ul.products li.product a img,
html body .woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
html body .woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail,
html body .lx-product-card__thumb {
height: clamp(132px, 43vw, 180px) !important;
max-height: 180px !important;
}
}
@media (max-width: 380px) {
html body.home .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container,
html body.front-page .lx-site-main > .lx-section:not(.lx-hero):not(.lx-hero--image-bg) .lx-container {
width: min(100% - 20px, 1240px) !important;
}
}
/* ============================================================
WHY SHOP SECTION REFINEMENT — 6 PER ROW DESKTOP
============================================================ */
html body .lx-features-grid {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 18px !important;
align-items: stretch !important;
}
html body .lx-feature-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: center !important;
min-height: 100% !important;
padding: 28px 16px 24px !important;
border-radius: 24px !important;
border: 1px solid #ece6df !important;
background: linear-gradient(180deg, #ffffff 0%, #F8F7FB 100%) !important;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05) !important;
}
html body .lx-feature-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(124,58,237, 0.32) !important;
box-shadow: 0 16px 32px rgba(17, 24, 39, 0.09) !important;
}
html body .lx-feature-card__icon {
width: 52px !important;
height: 52px !important;
margin: 0 auto 14px !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #EEEAFE 0%, #EDE9FE 100%) !important;
box-shadow: inset 0 0 0 1px rgba(124,58,237, 0.08), 0 8px 18px rgba(124,58,237, 0.08) !important;
}
html body .lx-feature-card__icon svg {
width: 30px !important;
height: 30px !important;
}
html body .lx-feature-card__title {
font-size: 1.02rem !important;
line-height: 1.35 !important;
margin-bottom: 10px !important;
}
html body .lx-feature-card__desc {
font-size: 0.84rem !important;
line-height: 1.65 !important;
color: #5f6673 !important;
max-width: 100% !important;
}
@media (max-width: 1279px) {
html body .lx-features-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 991px) {
html body .lx-features-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 575px) {
html body .lx-features-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
html body .lx-feature-card {
padding: 24px 16px 22px !important;
border-radius: 22px !important;
}
html body .lx-feature-card__icon {
width: 72px !important;
height: 72px !important;
}
}
/* ============================================================
NEW HOME CONTENT SECTIONS
============================================================ */
html body .lx-section-head--center {
max-width: 860px;
margin: 0 auto 28px;
text-align: center;
}
html body .lx-why-choose-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
html body .lx-why-choose-card,
html body .lx-process-card,
html body .lx-home-support {
background: #fff;
border: 1px solid #ece6df;
border-radius: 24px;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
}
html body .lx-why-choose-card {
overflow: hidden;
}
html body .lx-media-placeholder {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(239,199,168,.4);
background: linear-gradient(180deg, #F8F7FB 0%, #fffdf9 100%);
color: #b86b2a;
text-transform: uppercase;
letter-spacing: .08em;
font-size: .82rem;
font-weight: 700;
}
html body .lx-media-placeholder--tall {
min-height: 220px;
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
}
html body .lx-media-placeholder--wide {
min-height: 100%;
height: 100%;
border-radius: 24px;
}
html body .lx-why-choose-card__body {
padding: 22px 22px 24px;
}
html body .lx-why-choose-card__body h3,
html body .lx-process-card h3,
html body .lx-home-support__content h2 {
margin: 0 0 10px;
}
html body .lx-why-choose-card__body p,
html body .lx-process-card p,
html body .lx-home-support__list li {
color: #5f6673;
line-height: 1.7;
}
html body .lx-process-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
html body .lx-process-card {
padding: 26px 20px 22px;
}
html body .lx-process-card__number {
width: 54px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
margin-bottom: 16px;
background: linear-gradient(180deg, #EEEAFE 0%, #EDE9FE 100%);
color: var(--lx-orange);
font-size: 1rem;
font-weight: 800;
box-shadow: inset 0 0 0 1px rgba(124,58,237, 0.08), 0 8px 18px rgba(124,58,237, 0.08);
}
html body .lx-home-support {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
gap: 26px;
padding: 22px;
}
html body .lx-home-support__media {
min-height: 100%;
}
html body .lx-home-support__content {
align-self: center;
}
html body .lx-home-support__list {
margin: 18px 0 0;
padding: 0 0 0 18px;
}
html body .lx-home-support__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 22px;
}
@media (max-width: 1199px) {
html body .lx-why-choose-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html body .lx-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
html body .lx-home-support {
grid-template-columns: 1fr;
}
html body .lx-media-placeholder--wide {
min-height: 260px;
}
}
@media (max-width: 767px) {
html body .lx-why-choose-grid,
html body .lx-process-grid {
grid-template-columns: 1fr;
}
html body .lx-why-choose-card__body,
html body .lx-process-card {
padding-left: 18px;
padding-right: 18px;
}
}
/* ============================================================
HOME ABOUT / FAQ REFINEMENTS
============================================================ */
html body .lx-about-home {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
gap: 28px;
align-items: center;
}
html body .lx-about-home__content p {
color: #5f6673;
line-height: 1.75;
}
html body .lx-about-home__list {
margin: 18px 0 0;
padding: 0 0 0 18px;
}
html body .lx-about-home__list li {
color: #5f6673;
line-height: 1.7;
margin-bottom: 8px;
}
html body .lx-about-home__media,
html body .lx-home-support__media {
min-height: 100%;
}
html body .lx-about-home__media .lx-media-placeholder--wide,
html body .lx-home-support__media .lx-media-placeholder--wide {
min-height: 420px;
}
html body .lx-faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
html body .lx-faq-card {
background: #fff;
border: 1px solid #ece6df;
border-radius: 22px;
padding: 22px 20px;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
}
html body .lx-faq-card h3 {
margin: 0 0 10px;
font-size: 1rem;
line-height: 1.45;
}
html body .lx-faq-card p {
margin: 0;
color: #5f6673;
line-height: 1.7;
}
/* Why Shop With section mobile layout */
@media (max-width: 767px) {
html body .lx-features-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
html body .lx-feature-card {
padding: 20px 12px 18px !important;
border-radius: 18px !important;
}
html body .lx-feature-card__icon {
width: 62px !important;
height: 62px !important;
margin-bottom: 14px !important;
}
html body .lx-feature-card__title {
font-size: 0.92rem !important;
margin-bottom: 7px !important;
}
html body .lx-feature-card__desc {
font-size: 0.76rem !important;
line-height: 1.5 !important;
}
}
@media (max-width: 991px) {
html body .lx-about-home,
html body .lx-home-support {
grid-template-columns: 1fr;
}
html body .lx-about-home__media .lx-media-placeholder--wide,
html body .lx-home-support__media .lx-media-placeholder--wide {
min-height: 280px;
}
}
@media (max-width: 767px) {
html body .lx-faq-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
FINAL HOME IMAGE + FAQ ACCORDION REFINEMENTS
============================================================ */
html body .lx-image-card {
border-radius: 26px;
overflow: hidden;
border: 1px solid #ece6df;
background: #fff;
box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
min-height: 420px;
}
html body .lx-image-card img {
display: block;
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
}
html body .lx-faq-accordion {
max-width: 980px;
margin: 0 auto;
display: grid;
gap: 14px;
}
html body .lx-faq-item {
border: 1px solid #ece6df;
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
overflow: hidden;
}
html body .lx-faq-item__summary {
list-style: none;
cursor: pointer;
position: relative;
padding: 20px 58px 20px 22px;
font-size: 1rem;
line-height: 1.45;
font-weight: 700;
color: var(--lx-dark);
}
html body .lx-faq-item__summary::-webkit-details-marker { display: none; }
html body .lx-faq-item__summary::after {
content: '+';
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #EEEAFE;
color: var(--lx-orange);
font-size: 1.2rem;
font-weight: 700;
}
html body .lx-faq-item[open] .lx-faq-item__summary::after {
content: '−';
}
html body .lx-faq-item__content {
padding: 0 22px 20px;
}
html body .lx-faq-item__content p {
margin: 0;
color: #5f6673;
line-height: 1.75;
}
@media (max-width: 991px) {
html body .lx-image-card,
html body .lx-image-card img {
min-height: 320px;
}
}
@media (max-width: 767px) {
html body .lx-image-card,
html body .lx-image-card img {
min-height: 240px;
}
html body .lx-faq-item__summary {
padding: 18px 52px 18px 18px;
font-size: .95rem;
}
html body .lx-faq-item__content {
padding: 0 18px 18px;
}
}
/* ============================================================
PROCESS SECTION POLISH
============================================================ */
html body .lx-section--process {
background: linear-gradient(180deg, #F8F7FB 0%, #F8F7FB 100%) !important;
}
html body .lx-section--process .lx-section-head {
margin-bottom: 34px;
}
html body .lx-section--process .lx-process-grid {
gap: 22px !important;
align-items: stretch;
}
html body .lx-section--process .lx-process-card {
position: relative;
padding: 28px 22px 24px !important;
border-radius: 24px !important;
border: 1px solid #ecdccf !important;
background: rgba(255,255,255,0.88) !important;
box-shadow: 0 14px 30px rgba(17, 24, 39, 0.05) !important;
overflow: visible;
}
html body .lx-section--process .lx-process-card::after {
content: '➜';
position: absolute;
right: -18px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #fff;
color: var(--lx-orange);
box-shadow: 0 10px 24px rgba(124,58,237, 0.16);
border: 1px solid rgba(124,58,237, 0.14);
font-size: 1rem;
z-index: 2;
}
html body .lx-section--process .lx-process-card:last-child::after,
html body .lx-section--process .lx-process-grid > .lx-process-card:nth-child(2)::after {
/* default hidden overwritten below for large screens only */
}
html body .lx-section--process .lx-process-card__number {
width: 58px !important;
height: 58px !important;
margin-bottom: 18px !important;
}
html body .lx-section--process .lx-process-card h3 {
position: relative;
padding-bottom: 12px;
margin-bottom: 14px;
font-size: 1.04rem !important;
}
html body .lx-section--process .lx-process-card h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 52px;
height: 3px;
border-radius: 999px;
background: var(--lx-orange);
}
html body .lx-section--process .lx-process-card p {
margin: 0;
color: #5f6673;
line-height: 1.75;
}
@media (min-width: 1200px) {
html body .lx-section--process .lx-process-card:last-child::after {
display: none;
}
}
@media (max-width: 1199px) {
html body .lx-section--process .lx-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html body .lx-section--process .lx-process-card:nth-child(2)::after,
html body .lx-section--process .lx-process-card:nth-child(4)::after {
display: none;
}
}
@media (max-width: 767px) {
html body .lx-section--process .lx-process-grid {
grid-template-columns: 1fr !important;
}
html body .lx-section--process .lx-process-card {
padding: 24px 18px 20px !important;
}
html body .lx-section--process .lx-process-card::after {
display: none;
}
}
/* ============================================================
BUTTON ENHANCEMENTS + SPECIAL PAGE STYLES
============================================================ */
html body .lx-btn--arrow {
position: relative;
padding-right: 16px;
}
html body .lx-btn--arrow::after {
content: '→';
font-size: .88em;
line-height: 1;
margin-left: 2px;
transition: transform .22s ease;
}
html body .lx-btn--arrow:hover::after {
transform: translateX(2px);
}
html body .lx-special-page {
display: grid;
gap: 28px;
}
html body .lx-special-page__intro,
html body .lx-special-page__section {
background: #fff;
border: 1px solid #ece6df;
border-radius: 28px;
padding: 30px;
box-shadow: 0 12px 28px rgba(17,24,39,.045);
}
html body .lx-special-page__intro--about {
background: linear-gradient(180deg, #F8F7FB 0%, #ffffff 100%);
}
html body .lx-page-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: #EEEAFE;
color: var(--lx-orange);
font-size: .78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 14px;
}
html body .lx-page-kicker::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--lx-orange);
}
html body .lx-special-page__grid,
html body .lx-contact-layout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr);
gap: 26px;
}
html body .lx-special-page__content h2,
html body .lx-section-head h2,
html body .lx-faq-group h3,
html body .lx-content-card h3 {
margin-top: 0;
}
html body .lx-special-page__content p,
html body .lx-section-head p,
html body .lx-content-card p,
html body .lx-info-list li,
html body .lx-check-list li {
color: #5f6673;
line-height: 1.78;
}
html body .lx-special-page__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 22px;
}
html body .lx-special-page__panel,
html body .lx-contact-side {
display: grid;
gap: 18px;
}
html body .lx-stat-grid,
html body .lx-card-grid {
display: grid;
gap: 18px;
}
html body .lx-card-grid--three,
html body .lx-stat-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
html body .lx-card-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html body .lx-content-card {
background: #fff;
border: 1px solid #ece6df;
border-radius: 24px;
padding: 24px;
box-shadow: 0 10px 24px rgba(17,24,39,.04);
}
html body .lx-content-card--compact {
padding: 20px;
}
html body .lx-content-card--accent {
background: linear-gradient(180deg, #F8F7FB 0%, #ffffff 100%);
}
html body .lx-content-card--form {
padding: 26px;
}
html body .lx-stat-card {
background: #fff;
border: 1px solid #ece6df;
border-radius: 22px;
padding: 18px;
min-height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 10px 24px rgba(17,24,39,.04);
}
html body .lx-stat-card__value {
font-size: 1.2rem;
font-weight: 800;
color: var(--lx-dark);
}
html body .lx-stat-card__label {
color: #6b7280;
line-height: 1.55;
}
html body .lx-info-list,
html body .lx-check-list {
margin: 14px 0 0;
padding: 0;
list-style: none;
}
html body .lx-info-list li,
html body .lx-check-list li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
}
html body .lx-check-list li::before,
html body .lx-info-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: var(--lx-orange);
font-weight: 700;
}
html body .lx-contact-highlights .lx-content-card small {
color: #6b7280;
}
html body .lx-content-card--form .lx-contact-grid {
grid-template-columns: 1.1fr .9fr;
gap: 28px;
}
html body .lx-content-card--form .lx-contact-grid h2 {
font-size: 1.3rem;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #f0e6dc;
}
html body .lx-content-card--form .lx-form-input,
html body .lx-content-card--form .lx-form-textarea,
html body .lx-content-card--form .lx-form-select {
border-width: 1px;
background: #fff;
}
html body .lx-faq-page__quicklinks {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
}
html body .lx-faq-page__quicklinks a {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
background: #F8F7FB;
border: 1px solid #ecdccf;
color: var(--lx-dark);
font-weight: 600;
}
html body .lx-faq-group {
background: #fff;
border: 1px solid #ece6df;
border-radius: 26px;
padding: 24px;
box-shadow: 0 12px 28px rgba(17,24,39,.04);
}
html body .lx-faq-group h3 {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #f0e6dc;
}
html body .lx-faq-cta {
text-align: center;
}
html body .lx-faq-cta .lx-special-page__actions {
justify-content: center;
}
html body .page-id .lx-page-content__inner, html body .lx-page-content__inner {
max-width: 1180px;
}
@media (max-width: 1024px) {
html body .lx-special-page__grid,
html body .lx-contact-layout,
html body .lx-content-card--form .lx-contact-grid,
html body .lx-card-grid--two,
html body .lx-card-grid--three,
html body .lx-stat-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
html body .lx-special-page__intro,
html body .lx-special-page__section,
html body .lx-content-card,
html body .lx-content-card--form {
padding: 20px 18px;
border-radius: 22px;
}
html body .lx-special-page__grid,
html body .lx-contact-layout,
html body .lx-content-card--form .lx-contact-grid,
html body .lx-card-grid--two,
html body .lx-card-grid--three,
html body .lx-stat-grid {
grid-template-columns: 1fr;
}
html body .lx-special-page__actions {
flex-direction: column;
}
html body .lx-special-page__actions .lx-btn {
width: 100%;
justify-content: center;
}
}
/* ============================================================
CUSTOMIZER LOGO SIZE CONTROLS
============================================================ */
html body .lx-brand .custom-logo-link {
display: flex;
align-items: center;
line-height: 1;
}
html body .lx-brand .custom-logo {
max-height: var(--lx-logo-desktop-height, 46px) !important;
width: auto !important;
object-fit: contain;
display: block;
}
html body .lx-brand:not(:has(.custom-logo)) .lx-brand__icon {
width: var(--lx-logo-desktop-height, 46px) !important;
height: var(--lx-logo-desktop-height, 46px) !important;
}
@media (max-width: 768px) {
html body .lx-brand .custom-logo {
max-height: var(--lx-logo-mobile-height, 38px) !important;
}
html body .lx-brand:not(:has(.custom-logo)) .lx-brand__icon {
width: var(--lx-logo-mobile-height, 38px) !important;
height: var(--lx-logo-mobile-height, 38px) !important;
}
}
/* ============================================================
LOGO SIZE CUSTOMIZER — FIXED 0+ PIXEL SCALING
These overrides force both uploaded image logos and the default
text/icon logo to follow the Customizer values exactly.
============================================================ */
html body .lx-header .lx-brand,
html body .lx-site-header .lx-brand {
align-items: center !important;
min-width: 0 !important;
}
html body .lx-header .lx-brand .custom-logo-link,
html body .lx-site-header .lx-brand .custom-logo-link {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
height: var(--lx-logo-desktop-height, 46px) !important;
line-height: 1 !important;
}
html body .lx-header .lx-brand .custom-logo,
html body .lx-site-header .lx-brand .custom-logo {
height: var(--lx-logo-desktop-height, 46px) !important;
max-height: none !important;
width: auto !important;
max-width: none !important;
object-fit: contain !important;
display: block !important;
}
html body .lx-header .lx-brand__icon,
html body .lx-site-header .lx-brand__icon {
width: var(--lx-logo-desktop-height, 46px) !important;
height: var(--lx-logo-desktop-height, 46px) !important;
min-width: var(--lx-logo-desktop-height, 46px) !important;
flex-basis: var(--lx-logo-desktop-height, 46px) !important;
}
html body .lx-header .lx-brand__icon svg,
html body .lx-site-header .lx-brand__icon svg {
width: calc(var(--lx-logo-desktop-height, 46px) * .52) !important;
height: calc(var(--lx-logo-desktop-height, 46px) * .52) !important;
}
html body .lx-header .lx-brand__name,
html body .lx-site-header .lx-brand__name {
font-size: calc(var(--lx-logo-desktop-height, 46px) * .46) !important;
line-height: 1 !important;
}
html body .lx-header .lx-brand__tagline,
html body .lx-site-header .lx-brand__tagline {
font-size: calc(var(--lx-logo-desktop-height, 46px) * .22) !important;
line-height: 1.2 !important;
}
@media (max-width: 768px) {
html body .lx-header .lx-brand .custom-logo-link,
html body .lx-site-header .lx-brand .custom-logo-link {
height: var(--lx-logo-mobile-height, 38px) !important;
}
html body .lx-header .lx-brand .custom-logo,
html body .lx-site-header .lx-brand .custom-logo {
height: var(--lx-logo-mobile-height, 38px) !important;
max-height: none !important;
width: auto !important;
max-width: none !important;
}
html body .lx-header .lx-brand__icon,
html body .lx-site-header .lx-brand__icon {
width: var(--lx-logo-mobile-height, 38px) !important;
height: var(--lx-logo-mobile-height, 38px) !important;
min-width: var(--lx-logo-mobile-height, 38px) !important;
flex-basis: var(--lx-logo-mobile-height, 38px) !important;
}
html body .lx-header .lx-brand__icon svg,
html body .lx-site-header .lx-brand__icon svg {
width: calc(var(--lx-logo-mobile-height, 38px) * .52) !important;
height: calc(var(--lx-logo-mobile-height, 38px) * .52) !important;
}
html body .lx-header .lx-brand__name,
html body .lx-site-header .lx-brand__name {
font-size: calc(var(--lx-logo-mobile-height, 38px) * .46) !important;
line-height: 1 !important;
}
html body .lx-header .lx-brand__tagline,
html body .lx-site-header .lx-brand__tagline {
font-size: calc(var(--lx-logo-mobile-height, 38px) * .22) !important;
line-height: 1.2 !important;
}
}
/* ============================================================
LOGO SIZE FIX — NO NESTED ANCHOR + EXACT CUSTOM LOGO SCALING
The header now renders uploaded logos inside the main .lx-brand link.
These selectors force the Customizer value to control the image height.
============================================================ */
html body .lx-header .lx-brand--custom-logo,
html body .lx-site-header .lx-brand--custom-logo {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex: 0 0 auto !important;
height: var(--lx-logo-desktop-height, 46px) !important;
min-height: var(--lx-logo-desktop-height, 46px) !important;
line-height: 1 !important;
overflow: visible !important;
}
html body .lx-header .lx-brand--custom-logo > img.custom-logo,
html body .lx-site-header .lx-brand--custom-logo > img.custom-logo,
html body .lx-header a.lx-brand--custom-logo img.custom-logo,
html body .lx-site-header a.lx-brand--custom-logo img.custom-logo {
height: var(--lx-logo-desktop-height, 46px) !important;
min-height: var(--lx-logo-desktop-height, 46px) !important;
max-height: var(--lx-logo-desktop-height, 46px) !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
object-fit: contain !important;
display: block !important;
}
@media (max-width: 768px) {
html body .lx-header .lx-brand--custom-logo,
html body .lx-site-header .lx-brand--custom-logo {
height: var(--lx-logo-mobile-height, 38px) !important;
min-height: var(--lx-logo-mobile-height, 38px) !important;
}
html body .lx-header .lx-brand--custom-logo > img.custom-logo,
html body .lx-site-header .lx-brand--custom-logo > img.custom-logo,
html body .lx-header a.lx-brand--custom-logo img.custom-logo,
html body .lx-site-header a.lx-brand--custom-logo img.custom-logo {
height: var(--lx-logo-mobile-height, 38px) !important;
min-height: var(--lx-logo-mobile-height, 38px) !important;
max-height: var(--lx-logo-mobile-height, 38px) !important;
width: auto !important;
max-width: none !important;
}
}
/* ============================================================
ABOUT PAGE — REFINED PROFESSIONAL DESIGN (v2.1.26)
Clean, elegant, dependable. No heavy bold weights.
============================================================ */
html body .lx-ab {
display: flex;
flex-direction: column;
gap: 60px;
font-family: var(--lx-font);
}
html body .lx-ab * {
box-sizing: border-box;
}
/* SHARED — eyebrows, headings */
html body .lx-ab-eyebrow {
display: inline-block;
font-size: .75rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--lx-orange);
margin-bottom: 14px;
position: relative;
padding-left: 26px;
}
html body .lx-ab-eyebrow::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 18px;
height: 1px;
background: var(--lx-orange);
}
html body .lx-ab-h2 {
font-size: clamp(1.55rem, 2.4vw, 2.05rem);
font-weight: 600;
line-height: 1.25;
color: #14161e;
margin: 0 0 14px;
letter-spacing: -.015em;
}
html body .lx-ab p {
color: #5b6270;
line-height: 1.75;
font-size: 1rem;
margin: 0 0 14px;
}
html body .lx-ab h3 {
font-size: 1.08rem;
font-weight: 600;
color: #14161e;
margin: 0 0 8px;
letter-spacing: -.01em;
}
/* HERO */
html body .lx-ab-hero {
position: relative;
background: linear-gradient(180deg, #fffaf3 0%, #fff 100%);
border: 1px solid #f0e6d8;
border-radius: 24px;
padding: 44px 40px;
overflow: hidden;
}
html body .lx-ab-hero::before {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(124,58,237,.14), rgba(124,58,237,0));
pointer-events: none;
}
html body .lx-ab-hero__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: 44px;
align-items: center;
}
html body .lx-ab-hero__title {
font-size: clamp(1.8rem, 3.2vw, 2.5rem);
font-weight: 600;
line-height: 1.18;
color: #14161e;
margin: 0 0 18px;
letter-spacing: -.02em;
}
html body .lx-ab-hero__lede {
font-size: 1.05rem;
line-height: 1.75;
color: #4a5160;
margin: 0 0 26px;
max-width: 560px;
}
html body .lx-ab-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 28px;
padding: 22px 0;
border-top: 1px solid #ece4d4;
border-bottom: 1px solid #ece4d4;
margin-bottom: 26px;
}
html body .lx-ab-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
html body .lx-ab-meta-item__num {
font-size: 1.45rem;
font-weight: 600;
color: var(--lx-orange);
letter-spacing: -.02em;
line-height: 1.1;
}
html body .lx-ab-meta-item__lbl {
font-size: .85rem;
color: #6c7280;
font-weight: 500;
}
html body .lx-ab-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* HERO IMAGE */
html body .lx-ab-hero__media {
position: relative;
}
html body .lx-ab-hero__frame {
position: relative;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 24px 50px rgba(20,22,30,.12);
border: 1px solid #f0e6d8;
aspect-ratio: 4 / 3;
background: #fff;
}
html body .lx-ab-hero__frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
html body .lx-ab-hero__badge {
position: absolute;
bottom: -22px;
left: -18px;
background: #fff;
border: 1px solid #f0e6d8;
border-radius: 16px;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 12px 30px rgba(20,22,30,.10);
max-width: 240px;
}
html body .lx-ab-hero__badge svg {
width: 30px;
height: 30px;
color: var(--lx-orange);
flex-shrink: 0;
}
html body .lx-ab-hero__badge strong {
display: block;
font-size: .92rem;
font-weight: 600;
color: #14161e;
line-height: 1.2;
}
html body .lx-ab-hero__badge span {
display: block;
font-size: .78rem;
color: #6c7280;
margin-top: 2px;
}
/* STORY */
html body .lx-ab-story {
padding: 0 20px;
}
html body .lx-ab-story__inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
html body .lx-ab-story__inner .lx-ab-eyebrow {
padding-left: 0;
}
html body .lx-ab-story__inner .lx-ab-eyebrow::before {
display: none;
}
/* SECTION HEAD shared */
html body .lx-ab-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 36px;
}
html body .lx-ab-section-head .lx-ab-eyebrow {
padding-left: 0;
}
html body .lx-ab-section-head .lx-ab-eyebrow::before {
display: none;
}
html body .lx-ab-section-head__p {
font-size: 1rem;
color: #5b6270;
}
/* MISSION VISION VALUES */
html body .lx-ab-mvv__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
html body .lx-ab-mvv__card {
background: #fff;
border: 1px solid #ebe5dc;
border-radius: 18px;
padding: 28px 24px;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
html body .lx-ab-mvv__card:hover {
border-color: #f4d4ad;
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(20,22,30,.06);
}
html body .lx-ab-mvv__icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: #fff3e6;
color: var(--lx-orange);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
html body .lx-ab-mvv__icon svg {
width: 24px;
height: 24px;
}
html body .lx-ab-mvv__card p {
margin: 0;
font-size: .96rem;
line-height: 1.7;
}
/* WHY CHOOSE US */
html body .lx-ab-why__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border: 1px solid #ebe5dc;
border-radius: 20px;
overflow: hidden;
background: #fff;
}
html body .lx-ab-why__item {
padding: 28px 26px;
border-right: 1px solid #ebe5dc;
border-bottom: 1px solid #ebe5dc;
transition: background-color .2s ease;
}
html body .lx-ab-why__item:hover {
background: #fffaf3;
}
html body .lx-ab-why__item:nth-child(3n) {
border-right: none;
}
html body .lx-ab-why__item:nth-last-child(-n+3) {
border-bottom: none;
}
html body .lx-ab-why__icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: #fff3e6;
color: var(--lx-orange);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
html body .lx-ab-why__icon svg {
width: 22px;
height: 22px;
}
html body .lx-ab-why__item p {
margin: 0;
font-size: .94rem;
line-height: 1.7;
}
/* PROCESS */
html body .lx-ab-process__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
counter-reset: lx-step;
}
html body .lx-ab-process__list li {
position: relative;
background: #fff;
border: 1px solid #ebe5dc;
border-radius: 16px;
padding: 26px 22px 22px;
transition: border-color .25s ease, transform .25s ease;
}
html body .lx-ab-process__list li:hover {
border-color: #f4d4ad;
transform: translateY(-2px);
}
html body .lx-ab-process__num {
display: inline-block;
font-size: .82rem;
font-weight: 600;
letter-spacing: .12em;
color: var(--lx-orange);
margin-bottom: 10px;
padding: 4px 10px;
background: #fff3e6;
border-radius: 999px;
}
html body .lx-ab-process__list li p {
margin: 0;
font-size: .92rem;
line-height: 1.65;
}
/* BUSINESS INFO */
html body .lx-ab-info {
background: #fff;
border: 1px solid #ebe5dc;
border-radius: 22px;
padding: 40px 36px;
}
html body .lx-ab-info__grid {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 40px;
align-items: start;
}
html body .lx-ab-info__intro p {
margin: 0;
}
html body .lx-ab-info__details {
display: flex;
flex-direction: column;
}
html body .lx-ab-info__row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 20px;
padding: 14px 0;
border-bottom: 1px solid #f1ebe1;
}
html body .lx-ab-info__row:last-child {
border-bottom: none;
}
html body .lx-ab-info__lbl {
font-size: .82rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #8b8f9b;
}
html body .lx-ab-info__val {
color: #14161e;
font-size: .98rem;
line-height: 1.55;
}
html body .lx-ab-info__val a {
color: var(--lx-orange);
}
html body .lx-ab-info__val a:hover {
text-decoration: underline;
}
/* CTA */
html body .lx-ab-cta {
position: relative;
background: linear-gradient(135deg, #1a1c26 0%, #2a1d2f 55%, #3d2515 100%);
border-radius: 24px;
padding: 56px 40px;
overflow: hidden;
text-align: center;
}
html body .lx-ab-cta::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(124,58,237,.30), rgba(124,58,237,0));
pointer-events: none;
}
html body .lx-ab-cta::after {
content: '';
position: absolute;
bottom: -120px;
left: -120px;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(255,140,51,.16), rgba(255,140,51,0));
pointer-events: none;
}
html body .lx-ab-cta__inner {
position: relative;
max-width: 640px;
margin: 0 auto;
}
html body .lx-ab-cta h2 {
color: #fff;
font-size: clamp(1.6rem, 2.8vw, 2.1rem);
font-weight: 600;
margin: 0 0 12px;
letter-spacing: -.015em;
line-height: 1.25;
}
html body .lx-ab-cta p {
color: rgba(255,255,255,.75);
font-size: 1rem;
margin: 0 0 26px;
}
html body .lx-ab-cta__btns {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
html body .lx-ab-cta .lx-btn--ghost {
background: rgba(255,255,255,.08);
color: #fff;
border: 1px solid rgba(255,255,255,.22);
}
html body .lx-ab-cta .lx-btn--ghost:hover {
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.4);
color: #fff;
}
/* RESPONSIVE — TABLET */
@media (max-width: 1024px) {
html body .lx-ab {
gap: 48px;
}
html body .lx-ab-hero {
padding: 36px 28px;
}
html body .lx-ab-hero__grid {
grid-template-columns: 1fr;
gap: 32px;
}
html body .lx-ab-hero__lede {
max-width: none;
}
html body .lx-ab-hero__media {
max-width: 520px;
margin: 0 auto;
width: 100%;
}
html body .lx-ab-mvv__grid {
grid-template-columns: repeat(2, 1fr);
}
html body .lx-ab-why__grid {
grid-template-columns: repeat(2, 1fr);
}
html body .lx-ab-why__item {
border-right: 1px solid #ebe5dc;
}
html body .lx-ab-why__item:nth-child(2n) {
border-right: none;
}
html body .lx-ab-why__item:nth-child(3n) {
border-right: 1px solid #ebe5dc;
}
html body .lx-ab-why__item:nth-last-child(-n+3) {
border-bottom: 1px solid #ebe5dc;
}
html body .lx-ab-why__item:nth-last-child(-n+2) {
border-bottom: none;
}
html body .lx-ab-process__list {
grid-template-columns: repeat(2, 1fr);
}
html body .lx-ab-info__grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* RESPONSIVE — MOBILE */
@media (max-width: 640px) {
html body .lx-ab {
gap: 40px;
}
html body .lx-ab-hero {
padding: 28px 20px;
border-radius: 20px;
}
html body .lx-ab-hero__title {
font-size: 1.55rem;
}
html body .lx-ab-hero__lede {
font-size: 1rem;
}
html body .lx-ab-hero__meta {
gap: 18px;
padding: 18px 0;
}
html body .lx-ab-meta-item__num {
font-size: 1.25rem;
}
html body .lx-ab-hero__cta {
flex-direction: column;
}
html body .lx-ab-hero__cta .lx-btn {
width: 100%;
justify-content: center;
}
html body .lx-ab-hero__badge {
left: 12px;
bottom: -18px;
padding: 12px 14px;
max-width: 220px;
}
html body .lx-ab-mvv__grid {
grid-template-columns: 1fr;
}
html body .lx-ab-mvv__card {
padding: 24px 22px;
}
html body .lx-ab-why__grid {
grid-template-columns: 1fr;
border-radius: 16px;
}
html body .lx-ab-why__item {
border-right: none !important;
border-bottom: 1px solid #ebe5dc !important;
padding: 24px 22px;
}
html body .lx-ab-why__item:last-child {
border-bottom: none !important;
}
html body .lx-ab-process__list {
grid-template-columns: 1fr;
}
html body .lx-ab-info {
padding: 28px 22px;
border-radius: 18px;
}
html body .lx-ab-info__row {
grid-template-columns: 1fr;
gap: 4px;
padding: 12px 0;
}
html body .lx-ab-cta {
padding: 42px 24px;
border-radius: 20px;
}
html body .lx-ab-cta__btns {
flex-direction: column;
}
html body .lx-ab-cta__btns .lx-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 380px) {
html body .lx-ab-hero__meta {
flex-direction: column;
gap: 14px;
align-items: flex-start;
}
}
/* ── ABOUT PAGE: CATALOG & FOUNDATION SECTIONS ──────── */
html body .lx-ab-catalog { padding: 0 4px; }
html body .lx-ab-catalog__list { list-style: none; margin: 24px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
html body .lx-ab-catalog__list li { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid #ebe5dc; border-radius: 12px; padding: 14px 18px; font-size: .97rem; color: #3d3d3d; line-height: 1.6; }
html body .lx-ab-catalog__list li::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--lx-orange); margin-top: 7px; }
html body .lx-ab-catalog__note { font-size: .9rem; color: #8b8f9b; margin: 8px 0 0; line-height: 1.6; }
html body .lx-ab-foundation { padding: 0 4px; }
html body .lx-ab-foundation__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
html body .lx-ab-foundation__item { background: #fff; border: 1px solid #ebe5dc; border-radius: 16px; padding: 28px 24px; }
html body .lx-ab-foundation__item h3 { font-size: 1rem; font-weight: 600; color: #14161e; margin: 0 0 10px; }
html body .lx-ab-foundation__item p { font-size: .95rem; color: #5b6270; line-height: 1.7; margin: 0; }
html body .lx-ab-story__body { max-width: 760px; margin: 0 auto 16px; text-align: center; font-size: 1rem; color: #5b6270; line-height: 1.75; }
@media (max-width: 1024px) {
html body .lx-ab-foundation__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
html body .lx-ab-catalog__list li { padding: 12px 14px; border-radius: 10px; }
html body .lx-ab-foundation__grid { grid-template-columns: 1fr; }
html body .lx-ab-foundation__item { padding: 22px 18px; }
}
/* ============================================================
SHOP BY CATEGORY — CENTERED & PROFESSIONAL (v2.1.27)
============================================================ */
html body .lx-section-head--center {
text-align: center;
margin-bottom: 36px;
}
html body .lx-section-head--center .lx-section-title {
font-size: clamp(1.45rem, 2.4vw, 1.85rem);
font-weight: 600;
letter-spacing: -.015em;
color: #14161e;
margin: 0 0 12px;
text-align: center;
}
html body .lx-section-head--center .lx-divider {
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--lx-orange);
margin: 0 auto;
}
/* Pro grid: 5 desktop / 3 tablet / 2 mobile */
html body .lx-cat-grid--pro {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
html body .lx-cat-grid--pro .lx-cat-card {
background: #fff;
border: 1px solid #ebe5dc;
border-radius: 18px;
padding: 28px 16px 22px;
text-align: center;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
position: relative;
overflow: hidden;
}
html body .lx-cat-grid--pro .lx-cat-card::before {
display: none;
}
html body .lx-cat-grid--pro .lx-cat-card:hover {
border-color: #f4d4ad;
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(20,22,30,.08);
}
html body .lx-cat-grid--pro .lx-cat-card__icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #fff3e6 0%, #ffe0c4 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
transition: background .25s ease, transform .25s ease;
}
html body .lx-cat-grid--pro .lx-cat-card__icon svg {
width: 30px;
height: 30px;
color: var(--lx-orange);
transition: color .25s ease;
}
html body .lx-cat-grid--pro .lx-cat-card:hover .lx-cat-card__icon {
background: linear-gradient(135deg, var(--lx-orange) 0%, var(--lx-orange-light, #8D8CF7) 100%);
transform: scale(1.05);
}
html body .lx-cat-grid--pro .lx-cat-card:hover .lx-cat-card__icon svg {
color: #fff;
}
html body .lx-cat-grid--pro .lx-cat-card__name {
font-size: .95rem;
font-weight: 600;
color: #14161e;
letter-spacing: -.005em;
}
/* Image-based category icons (product photos in round frames) */
html body .lx-cat-grid--pro .lx-cat-card__icon--image {
background: #fff;
overflow: hidden;
padding: 0;
border: 1px solid #f0e8dc;
}
html body .lx-cat-grid--pro .lx-cat-card__icon--image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
transition: transform .35s ease;
}
html body .lx-cat-grid--pro .lx-cat-card:hover .lx-cat-card__icon--image {
background: #fff;
border-color: var(--lx-orange, #7C6CF2);
transform: scale(1.04);
}
html body .lx-cat-grid--pro .lx-cat-card:hover .lx-cat-card__icon--image img {
transform: scale(1.06);
}
@media (max-width: 1024px) {
html body .lx-cat-grid--pro {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}
@media (max-width: 640px) {
html body .lx-cat-grid--pro {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
html body .lx-cat-grid--pro .lx-cat-card {
padding: 22px 12px 18px;
border-radius: 16px;
gap: 12px;
}
html body .lx-cat-grid--pro .lx-cat-card__icon {
width: 60px;
height: 60px;
}
html body .lx-cat-grid--pro .lx-cat-card__icon svg {
width: 26px;
height: 26px;
}
html body .lx-cat-grid--pro .lx-cat-card__name {
font-size: .9rem;
}
}
/* ============================================================
TRUST BAR — COMPACT MOBILE (one-line, 4 in a row) v2.1.29
============================================================ */
@media (max-width: 767px) {
html body .lx-trust-bar {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 6px !important;
border-radius: 14px !important;
padding: 10px 6px !important;
}
html body .lx-trust-item {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 6px !important;
padding: 8px 4px !important;
border-right: none !important;
border-bottom: none !important;
min-width: 0;
}
html body .lx-trust-item__icon {
width: 32px !important;
height: 32px !important;
border-radius: 10px !important;
}
html body .lx-trust-item__icon svg {
width: 16px !important;
height: 16px !important;
}
html body .lx-trust-item__title {
font-size: .68rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: -.01em !important;
}
html body .lx-trust-item__desc {
display: none !important;
}
}
@media (max-width: 380px) {
html body .lx-trust-bar {
gap: 4px !important;
padding: 8px 4px !important;
}
html body .lx-trust-item__title {
font-size: .62rem !important;
}
html body .lx-trust-item__icon {
width: 28px !important;
height: 28px !important;
}
html body .lx-trust-item__icon svg {
width: 14px !important;
height: 14px !important;
}
}
/* ============================================================
TOPBAR — FORCE VISIBLE ON ALL SCREENS (v2.1.30)
============================================================ */
html body .lx-topbar,
html body div.lx-topbar,
html body .lx-topbar.alignfull {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 38px !important;
padding: 8px 0 !important;
background: linear-gradient(90deg, #0F1525 0%, #1A1A2E 50%, #0F1525 100%) !important;
color: rgba(255,255,255,.9) !important;
font-size: .8rem !important;
position: relative !important;
z-index: 999 !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
html body .lx-topbar__inner {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
html body .lx-topbar__left,
html body .lx-topbar__right {
display: flex !important;
align-items: center !important;
visibility: visible !important;
}
@media (max-width: 768px) {
html body .lx-topbar {
padding: 6px 0 !important;
font-size: .72rem !important;
min-height: 32px !important;
}
html body .lx-topbar__right {
gap: 12px !important;
}
html body .lx-topbar__right a {
font-size: .72rem !important;
}
}
/* ============================================================
FOOTER — CUSTOM LOGO SUPPORT (v2.1.30)
============================================================ */
html body .lx-brand--footer-custom {
display: inline-flex !important;
align-items: center !important;
text-decoration: none !important;
background: #fff !important;
padding: 10px 16px !important;
border-radius: 12px !important;
margin-bottom: 16px !important;
max-width: 240px !important;
}
html body .lx-footer__logo-img {
display: block !important;
width: auto !important;
max-width: 200px !important;
height: auto !important;
max-height: 56px !important;
object-fit: contain !important;
}
@media (max-width: 768px) {
html body .lx-brand--footer-custom {
padding: 8px 14px !important;
max-width: 220px !important;
}
html body .lx-footer__logo-img {
max-height: 48px !important;
}
}
/* ============================================================
SINGLE PRODUCT — VARIATION SELECTORS v2.1.34
Bulletproof spacing — labels never touch the dropdowns.
Wide label column (170px) + generous padding on both sides.
============================================================ */
/* Card wrapper — high specificity, multiple selector paths */
html body .woocommerce div.product form.cart table.variations,
html body .woocommerce-page div.product form.cart table.variations,
html body form.variations_form table.variations,
html body .single-product div.product form.cart table.variations {
display: block !important;
width: 100% !important;
margin: 18px 0 14px !important;
padding: 0 !important;
background: #ffffff !important;
border: 1px solid #ece4d8 !important;
border-radius: 14px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(20,22,30,.04) !important;
table-layout: auto !important;
}
html body form.variations_form table.variations colgroup,
html body form.variations_form table.variations thead,
html body .woocommerce div.product form.cart table.variations colgroup,
html body .woocommerce div.product form.cart table.variations thead {
display: none !important;
}
html body form.variations_form table.variations tbody,
html body .woocommerce div.product form.cart table.variations tbody {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Each row — flex layout (label | value side by side) */
html body form.variations_form table.variations tr,
html body .woocommerce div.product form.cart table.variations tr,
html body .woocommerce-page div.product form.cart table.variations tr {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #f3ede2 !important;
background: transparent !important;
box-sizing: border-box !important;
}
html body form.variations_form table.variations tr:last-child,
html body .woocommerce div.product form.cart table.variations tr:last-child {
border-bottom: 0 !important;
}
html body form.variations_form table.variations td,
html body form.variations_form table.variations th,
html body .woocommerce div.product form.cart table.variations td,
html body .woocommerce div.product form.cart table.variations th {
border: 0 !important;
background: transparent !important;
vertical-align: middle !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* LABEL cell — fixed 170px, cream wash, generous right padding (22px) */
html body form.variations_form table.variations td.label,
html body form.variations_form table.variations th.label,
html body .woocommerce div.product form.cart table.variations td.label,
html body .woocommerce div.product form.cart table.variations th.label,
html body .woocommerce div.product form.cart .variations td.label,
html body .woocommerce div.product form.cart .variations th.label,
html body .woocommerce-page div.product form.cart .variations td.label,
html body .woocommerce-page div.product form.cart .variations th.label {
display: flex !important;
align-items: center !important;
flex: 0 0 170px !important;
width: 170px !important;
min-width: 170px !important;
max-width: 170px !important;
padding: 14px 22px 14px 20px !important;
background: #fbf7f0 !important;
border-right: 1px solid #f3ede2 !important;
box-sizing: border-box !important;
}
html body form.variations_form table.variations .label label,
html body .woocommerce div.product form.cart table.variations .label label,
html body .woocommerce div.product form.cart .variations .label label {
margin: 0 !important;
padding: 0 !important;
font-size: .72rem !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #6b6357 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
/* VALUE cell — flexible, 18px left padding so dropdown isn't glued to border */
html body form.variations_form table.variations td.value,
html body .woocommerce div.product form.cart table.variations td.value,
html body .woocommerce div.product form.cart .variations td.value,
html body .woocommerce-page div.product form.cart .variations td.value {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 10px 16px 10px 18px !important;
position: relative !important;
box-sizing: border-box !important;
}
/* The select itself — modern pill with custom purple chevron */
html body form.variations_form table.variations select,
html body .woocommerce div.product form.cart table.variations select,
html body .woocommerce div.product form.cart .variations select,
html body .woocommerce-page div.product form.cart .variations select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-height: 44px !important;
height: 44px !important;
padding: 0 42px 0 14px !important;
margin: 0 !important;
font-size: .92rem !important;
font-weight: 600 !important;
font-family: var(--lx-font, 'Segoe UI', system-ui, sans-serif) !important;
line-height: 1.2 !important;
color: #14161e !important;
background-color: #ffffff !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 14px 14px !important;
border: 1.5px solid #e6dccc !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
box-shadow: 0 1px 2px rgba(20,22,30,.03) !important;
outline: 0 !important;
box-sizing: border-box !important;
}
html body .woocommerce div.product form.cart .variations select:hover,
html body form.variations_form table.variations select:hover {
border-color: #ffb37a !important;
background-color: #fffaf3 !important;
}
html body .woocommerce div.product form.cart .variations select:focus,
html body .woocommerce div.product form.cart .variations select:focus-visible,
html body form.variations_form table.variations select:focus,
html body form.variations_form table.variations select:focus-visible {
border-color: #7C6CF2 !important;
box-shadow: 0 0 0 3px rgba(124,58,237,.18) !important;
background-color: #ffffff !important;
}
html body .woocommerce div.product form.cart .variations select:disabled,
html body form.variations_form table.variations select:disabled {
opacity: .55 !important;
cursor: not-allowed !important;
background-color: #f7f3ec !important;
}
/* Reset / Clear link — pill button */
html body .woocommerce div.product form.cart .reset_variations,
html body form.variations_form .reset_variations {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: .78rem !important;
font-weight: 600 !important;
color: #7C6CF2 !important;
text-decoration: none !important;
padding: 6px 10px !important;
margin: 8px 0 0 14px !important;
border-radius: 6px !important;
transition: background-color .18s ease, color .18s ease !important;
}
html body .woocommerce div.product form.cart .reset_variations::before,
html body form.variations_form .reset_variations::before {
content: '' !important;
display: inline-block !important;
width: 12px !important;
height: 12px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
html body .woocommerce div.product form.cart .reset_variations:hover,
html body form.variations_form .reset_variations:hover {
background-color: #EEEAFE !important;
color: #5D4FD6 !important;
text-decoration: none !important;
}
/* Single variation block — price + stock */
html body .woocommerce div.product form.cart .single_variation_wrap {
margin-top: 18px !important;
}
html body .woocommerce div.product form.cart .woocommerce-variation-price {
margin: 8px 0 4px !important;
padding: 12px 0 8px !important;
border-top: 1px solid rgba(236,228,216,.6) !important;
}
html body .woocommerce div.product form.cart .woocommerce-variation-price .price,
html body .woocommerce div.product form.cart .single_variation .price {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #7C6CF2 !important;
}
html body .woocommerce div.product form.cart .woocommerce-variation-availability {
font-size: .85rem !important;
font-weight: 600 !important;
color: #28A745 !important;
margin-bottom: 12px !important;
}
/* Tablet — slightly narrower label column */
@media (max-width: 900px) and (min-width: 641px) {
html body .woocommerce div.product form.cart table.variations td.label,
html body .woocommerce div.product form.cart table.variations th.label,
html body form.variations_form table.variations td.label,
html body form.variations_form table.variations th.label {
flex: 0 0 150px !important;
width: 150px !important;
min-width: 150px !important;
max-width: 150px !important;
}
}
/* Mobile — stack label above select */
@media (max-width: 640px) {
html body .woocommerce div.product form.cart table.variations tr,
html body form.variations_form table.variations tr {
flex-direction: column !important;
align-items: stretch !important;
}
html body .woocommerce div.product form.cart table.variations td.label,
html body .woocommerce div.product form.cart table.variations th.label,
html body form.variations_form table.variations td.label,
html body form.variations_form table.variations th.label {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
border-right: 0 !important;
border-bottom: 1px solid #f3ede2 !important;
padding: 10px 16px !important;
}
html body .woocommerce div.product form.cart table.variations td.value,
html body form.variations_form table.variations td.value {
padding: 12px 14px !important;
}
html body .woocommerce div.product form.cart .variations select,
html body form.variations_form table.variations select {
min-height: 46px !important;
height: 46px !important;
font-size: .95rem !important;
}
html body .woocommerce div.product form.cart .reset_variations,
html body form.variations_form .reset_variations {
margin-left: 0 !important;
}
}
/* ============================================================
GLOBAL FONT-WEIGHT OVERRIDE — TITLES & PRICES v2.1.35
Force regular weight (400) on all product titles and prices
across the entire site. Final overrides at end of stylesheet
guarantee they win over earlier rules.
============================================================ */
/* Product titles — every variant and context */
html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
html body .woocommerce-page ul.products li.product .woocommerce-loop-product__title,
html body .wc-block-grid__product-title,
html body .woocommerce ul.products li.product h2,
html body .woocommerce ul.products li.product h3,
html body .woocommerce-page ul.products li.product h2,
html body .woocommerce-page ul.products li.product h3,
html body .woocommerce div.product .product_title,
html body .woocommerce-page div.product .product_title,
html body .single-product .product_title,
html body .lx-product-card__name,
html body .lx-product-card__title,
html body .lx-search-suggest__title,
html body .related.products .woocommerce-loop-product__title,
html body .upsells.products .woocommerce-loop-product__title,
html body .cross-sells .woocommerce-loop-product__title {
font-weight: 400 !important;
}
/* Product prices — every variant and context */
html body .woocommerce ul.products li.product .price,
html body .woocommerce-page ul.products li.product .price,
html body .wc-block-grid__product-price,
html body .woocommerce div.product p.price,
html body .woocommerce div.product span.price,
html body .woocommerce-page div.product p.price,
html body .woocommerce-page div.product span.price,
html body .single-product .product .price,
html body .woocommerce ul.products li.product .price .amount,
html body .woocommerce-page ul.products li.product .price .amount,
html body .wc-block-grid__product-price .amount,
html body .woocommerce div.product p.price .amount,
html body .woocommerce div.product span.price .amount,
html body .woocommerce .price .amount,
html body .woocommerce-page .price .amount,
html body .woocommerce ul.products li.product .price ins,
html body .woocommerce-page ul.products li.product .price ins,
html body .woocommerce ul.products li.product .price ins .amount,
html body .woocommerce-page ul.products li.product .price ins .amount,
html body .lx-product-card__price,
html body .lx-product-card__price .price,
html body .lx-product-card__price .amount,
html body .lx-product-card__price ins .amount,
html body .lx-search-suggest__price,
html body .lx-search-suggest__price .amount,
html body .woocommerce-variation-price,
html body .woocommerce-variation-price .price,
html body .woocommerce-variation-price .amount,
html body .single_variation .price,
html body .single_variation .amount,
html body .related.products .price,
html body .upsells.products .price,
html body .cart_item .product-price,
html body .cart_item .product-subtotal,
html body .cart-subtotal .amount,
html body .order-total .amount {
font-weight: 400 !important;
}
/* Strikethrough sale prices stay subtle */
html body .woocommerce ul.products li.product .price del,
html body .woocommerce-page ul.products li.product .price del,
html body .woocommerce ul.products li.product .price del .amount,
html body .woocommerce-page ul.products li.product .price del .amount,
html body .woocommerce div.product p.price del,
html body .woocommerce div.product p.price del .amount,
html body .lx-product-card__price del,
html body .lx-product-card__price del .amount {
font-weight: 400 !important;
}
/* ═══════════════════════════════════════════════════════
BLOG LISTING — index.php
═══════════════════════════════════════════════════════ */
.lx-blog-hero{background:linear-gradient(135deg,var(--lx-dark) 0%,#1a2a3a 100%);padding:52px 0 44px;text-align:center;}
.lx-blog-hero__eyebrow{display:inline-block;background:rgba(124,58,237,.15);color:var(--lx-orange);border:1px solid rgba(124,58,237,.28);border-radius:20px;font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 14px;margin-bottom:14px;}
.lx-blog-hero__title{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin:0 0 10px;}
.lx-blog-hero__sub{color:rgba(255,255,255,.7);font-size:1rem;max-width:540px;margin:0 auto;}
.lx-blog-wrap{padding:48px 0 64px;}
.lx-blog-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;}
/* Grid */
.lx-blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.lx-blog-card{background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;}
.lx-blog-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.1);transform:translateY(-3px);}
.lx-blog-card__thumb-link{display:block;overflow:hidden;aspect-ratio:16/9;background:#f5f5f5;}
.lx-blog-card__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.lx-blog-card:hover .lx-blog-card__thumb{transform:scale(1.04);}
.lx-blog-card__thumb--placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#ccc;}
.lx-blog-card__body{padding:20px;display:flex;flex-direction:column;flex:1;}
.lx-blog-card__meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.lx-blog-card__cat{background:rgba(124,58,237,.1);color:var(--lx-orange);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:20px;text-decoration:none;}
.lx-blog-card__cat:hover{background:var(--lx-orange);color:#fff;}
.lx-blog-card__date{color:#888;font-size:.78rem;}
.lx-blog-card__title{font-size:1rem;font-weight:800;line-height:1.4;margin:0 0 8px;color:#111;}
.lx-blog-card__title a{color:inherit;text-decoration:none;}
.lx-blog-card__title a:hover{color:var(--lx-orange);}
.lx-blog-card__excerpt{color:#555;font-size:.85rem;line-height:1.6;margin:0 0 16px;flex:1;}
.lx-blog-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:8px;flex-wrap:wrap;}
.lx-blog-card__author{display:flex;align-items:center;gap:7px;font-size:.8rem;color:#555;}
.lx-blog-card__avatar{border-radius:50%;width:24px!important;height:24px!important;object-fit:cover;}
.lx-blog-card__read{font-size:.8rem;font-weight:700;color:var(--lx-orange);text-decoration:none;white-space:nowrap;}
.lx-blog-card__read:hover{text-decoration:underline;}
/* Pagination */
.lx-blog-pagination{margin-top:40px;}
.lx-blog-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.lx-blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:8px;border:1px solid #e0e0e0;font-size:.88rem;font-weight:600;color:#333;text-decoration:none;transition:.15s;}
.lx-blog-pagination .page-numbers:hover,.lx-blog-pagination .page-numbers.current{background:var(--lx-orange);border-color:var(--lx-orange);color:#fff;}
/* Empty state */
.lx-blog-empty{text-align:center;padding:60px 20px;color:#aaa;}
.lx-blog-empty svg{display:block;margin:0 auto 16px;opacity:.3;}
.lx-blog-empty p{font-size:1.05rem;margin:0 0 20px;}
/* Sidebar */
.lx-blog-sidebar{display:flex;flex-direction:column;gap:24px;position:sticky;top:24px;}
.lx-blog-widget{background:#fff;border:1px solid #eee;border-radius:14px;padding:22px;}
.lx-blog-widget__title{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#111;margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid var(--lx-orange);}
.lx-blog-search{display:flex;border:1px solid #ddd;border-radius:8px;overflow:hidden;}
.lx-blog-search__input{flex:1;padding:9px 12px;border:none;outline:none;font-size:.88rem;}
.lx-blog-search__btn{background:var(--lx-orange);color:#fff;border:none;padding:0 13px;cursor:pointer;display:flex;align-items:center;transition:.15s;}
.lx-blog-search__btn:hover{background:#5D4FD6;}
.lx-blog-recent{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;}
.lx-blog-recent__item{display:flex;gap:12px;align-items:flex-start;}
.lx-blog-recent__thumb{width:56px!important;height:56px!important;object-fit:cover;border-radius:8px;display:block;flex-shrink:0;}
.lx-blog-recent__info{display:flex;flex-direction:column;gap:4px;}
.lx-blog-recent__link{font-size:.83rem;font-weight:700;color:#111;text-decoration:none;line-height:1.4;}
.lx-blog-recent__link:hover{color:var(--lx-orange);}
.lx-blog-recent__date{font-size:.74rem;color:#888;}
.lx-blog-cats{list-style:none;padding:0;margin:0;}
.lx-blog-cats li{padding:6px 0;border-bottom:1px solid #f0f0f0;}
.lx-blog-cats li:last-child{border-bottom:none;}
.lx-blog-cats a{font-size:.85rem;color:#333;text-decoration:none;display:flex;justify-content:space-between;}
.lx-blog-cats a:hover{color:var(--lx-orange);}
.lx-blog-widget--cta{text-align:center;background:linear-gradient(135deg,#fff7f0,#fff);}
.lx-blog-widget__cta-icon{font-size:2rem;display:block;margin-bottom:10px;}
.lx-blog-widget--cta p{font-size:.85rem;color:#444;margin:0 0 14px;line-height:1.6;}
/* ═══════════════════════════════════════════════════════
SINGLE POST — single.php
═══════════════════════════════════════════════════════ */
.lx-single-hero{position:relative;max-height:480px;overflow:hidden;background:#111;}
.lx-single-hero__img{width:100%;height:480px;object-fit:cover;display:block;opacity:.9;}
.lx-single-hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.55) 100%);}
.lx-single-wrap{padding:40px 0 64px;}
.lx-single-layout{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start;}
.lx-single-article{min-width:0;overflow:hidden;}
/* Header */
.lx-single-header{margin-bottom:28px;}
.lx-single-header__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;}
.lx-single-cat{background:rgba(124,58,237,.1);color:var(--lx-orange);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 12px;border-radius:20px;text-decoration:none;}
.lx-single-cat:hover{background:var(--lx-orange);color:#fff;}
.lx-single-sep{color:#ccc;}
.lx-single-date,.lx-single-readtime{font-size:.82rem;color:#777;}
.lx-single-readtime{display:flex;align-items:center;gap:4px;}
.lx-single-title{font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:900;line-height:1.25;color:#111;margin:0 0 18px;}
.lx-single-byline{display:flex;align-items:center;gap:12px;}
.lx-single-byline__avatar{border-radius:50%;width:40px!important;height:40px!important;object-fit:cover;}
.lx-single-byline__info{display:flex;flex-direction:column;gap:2px;}
.lx-single-byline__name{font-size:.88rem;font-weight:700;color:#111;}
.lx-single-byline__updated{font-size:.76rem;color:#888;}
/* TOC */
.lx-toc{background:#f8f9fb;border:1px solid #e8eaed;border-left:4px solid var(--lx-orange);border-radius:10px;padding:18px 20px;margin:28px 0;}
.lx-toc__toggle{display:flex;align-items:center;gap:8px;background:none;border:none;padding:0;font-size:.88rem;font-weight:800;color:#111;cursor:pointer;width:100%;text-align:left;}
.lx-toc__chevron{margin-left:auto;transition:transform .2s;}
.lx-toc__toggle[aria-expanded="false"] .lx-toc__chevron{transform:rotate(-90deg);}
.lx-toc__list{list-style:decimal;padding:0 0 0 20px;margin:12px 0 0;display:flex;flex-direction:column;gap:4px;}
.lx-toc__item--h3{padding-left:16px;list-style-type:disc;}
.lx-toc__link{font-size:.85rem;color:#333;text-decoration:none;line-height:1.5;}
.lx-toc__link:hover{color:var(--lx-orange);}
.lx-toc__link--active{color:var(--lx-orange);font-weight:700;}
/* Post content */
.lx-single-content{font-size:1rem;line-height:1.8;color:#222;overflow-wrap:break-word;word-break:break-word;min-width:0;overflow:hidden;}
.lx-single-content h2{font-size:1.55rem;font-weight:800;margin:2em 0 .7em;color:#111;padding-top:.2em;}
.lx-single-content h3{font-size:1.2rem;font-weight:700;margin:1.6em 0 .6em;color:#111;}
.lx-single-content p{margin:0 0 1.3em;}
.lx-single-content a{color:var(--lx-orange);text-decoration:underline;}
.lx-single-content ul,.lx-single-content ol{padding-left:1.6em;margin:0 0 1.3em;}
.lx-single-content li{margin-bottom:.4em;}
.lx-single-content img{max-width:100%;height:auto;border-radius:10px;margin:1.5em 0;}
.lx-single-content blockquote{border-left:4px solid var(--lx-orange);padding:12px 20px;margin:1.5em 0;background:#fff7f0;border-radius:0 8px 8px 0;font-style:italic;color:#555;}
.lx-single-content pre{background:#1e1e2e;color:#cdd6f4;padding:20px;border-radius:10px;overflow-x:auto;font-size:.88rem;line-height:1.6;margin:1.5em 0;}
.lx-single-content code{background:#f0f0f5;padding:2px 6px;border-radius:4px;font-size:.88em;}
.lx-single-content pre code{background:none;padding:0;}
.lx-single-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.9rem;}
.lx-single-content table th{background:var(--lx-dark);color:#fff;padding:10px 14px;text-align:left;}
.lx-single-content table td{padding:9px 14px;border-bottom:1px solid #eee;}
.lx-single-content table tr:nth-child(even) td{background:#fafafa;}
/* Tags */
.lx-single-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:32px 0;}
.lx-single-tags__label{font-size:.8rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;}
.lx-single-tag{font-size:.8rem;padding:4px 12px;border:1px solid #ddd;border-radius:20px;color:#444;text-decoration:none;transition:.15s;}
.lx-single-tag:hover{border-color:var(--lx-orange);color:var(--lx-orange);}
/* Author box */
.lx-single-author-box{display:flex;gap:18px;align-items:flex-start;background:#f8f9fb;border:1px solid #eee;border-radius:14px;padding:22px;margin:36px 0;}
.lx-single-author-box__avatar{border-radius:50%;width:72px!important;height:72px!important;object-fit:cover;flex-shrink:0;}
.lx-single-author-box__info{display:flex;flex-direction:column;gap:4px;}
.lx-single-author-box__label{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#888;}
.lx-single-author-box__name{font-size:1rem;font-weight:800;color:#111;}
.lx-single-author-box__bio{font-size:.85rem;color:#555;margin:4px 0 0;line-height:1.6;}
/* Post nav */
.lx-single-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:36px 0;}
.lx-single-nav__item{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px 18px;text-decoration:none;transition:.15s;display:flex;flex-direction:column;gap:6px;}
.lx-single-nav__item:hover{border-color:var(--lx-orange);box-shadow:0 4px 16px rgba(124,58,237,.1);}
.lx-single-nav__item--next{text-align:right;}
.lx-single-nav__dir{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--lx-orange);}
.lx-single-nav__title{font-size:.88rem;font-weight:700;color:#111;line-height:1.4;}
/* Sticky sidebar TOC */
.lx-single-sidebar-toc{position:sticky;top:24px;}
.lx-toc__list--sidebar{list-style:none;padding:0;margin:0;}
.lx-toc__list--sidebar .lx-toc__item{padding:4px 0;border-bottom:1px solid #f0f0f0;}
.lx-toc__list--sidebar .lx-toc__item--h3{padding-left:12px;}
.lx-toc__list--sidebar .lx-toc__item:last-child{border-bottom:none;}
/* Single sidebar same widget styles */
.lx-single-sidebar{display:flex;flex-direction:column;gap:24px;}
/* ── Responsive ── */
@media (max-width: 1024px) {
.lx-blog-layout,.lx-single-layout{grid-template-columns:1fr;}
.lx-blog-sidebar,.lx-single-sidebar{position:static;}
.lx-single-sidebar-toc{display:none;}
}
@media (max-width: 640px) {
.lx-single-hero__img{height:240px;}
.lx-blog-grid{grid-template-columns:1fr;}
.lx-single-nav{grid-template-columns:1fr;}
.lx-single-author-box{flex-direction:column;}
.lx-single-author-box__avatar{width:56px!important;height:56px!important;}
.lx-toc{margin:20px 0;}
.lx-single-wrap{padding:24px 0 48px;}
}
/* ============================================================
FOOTER PAYMENT BADGE FIX — v2.1.36
Keeps the Stripe/payment image small on WooCommerce product pages.
============================================================ */
html body .lx-footer .lx-footer__bottom .lx-footer__payment {
flex: 0 0 auto !important;
min-width: 0 !important;
max-width: 140px !important;
line-height: 0 !important;
overflow: hidden !important;
}
html body .lx-footer .lx-footer__bottom .lx-footer__payment img,
html body .lx-footer__payment-img,
html body.single-product .lx-footer .lx-footer__payment img,
html body.woocommerce-page .lx-footer .lx-footer__payment img {
display: block !important;
width: auto !important;
max-width: 128px !important;
height: 38px !important;
max-height: 38px !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
@media (max-width: 768px) {
html body .lx-footer .lx-footer__bottom .lx-footer__payment {
max-width: 122px !important;
}
html body .lx-footer .lx-footer__bottom .lx-footer__payment img,
html body .lx-footer__payment-img {
max-width: 118px !important;
height: 36px !important;
max-height: 36px !important;
}
}
/* ============================================================
GADGENIX RESALE REBRAND — PREMIUM TECH HEADER + OFF-WHITE FOOTER
Uses legacy lx class names to preserve WooCommerce/cart/search/mobile JS.
============================================================ */
:root {
--lx-orange: #7C6CF2;
--lx-orange-dark: #5D4FD6;
--lx-orange-light: #8D8CF7;
--lx-orange-pale: #EEEAFE;
--lx-black: #0A0A0F;
--lx-dark: #13131B;
--lx-grey-dark: #202232;
--lx-grey: #6B6F7A;
--lx-grey-light: #E7E7EE;
--lx-grey-border: #E7E7EE;
--gx-primary-black: #0A0A0F;
--gx-charcoal: #13131B;
--gx-deep-gray: #202232;
--gx-medium-gray: #6B6F7A;
--gx-soft-gray: #E7E7EE;
--gx-footer-bg: #F8F7FB;
--gx-card-white: #FFFFFF;
--gx-primary-purple: #7C6CF2;
--gx-dark-purple: #5D4FD6;
--gx-soft-purple: #8D8CF7;
--gx-purple-pale: #EEEAFE;
}
.lx-topbar {
background: linear-gradient(90deg, #0A0A0F 0%, #13131B 52%, #0A0A0F 100%) !important;
color: rgba(248,247,251,.82) !important;
border-bottom: 1px solid rgba(167,139,250,.16) !important;
padding: 8px 0 !important;
}
.lx-topbar__inner { min-height: 26px; }
.lx-topbar__left { font-weight: 700; letter-spacing: .035em; text-transform: uppercase; font-size: .72rem; }
.lx-topbar__pulse {
background: #8D8CF7 !important;
box-shadow: 0 0 0 0 rgba(167,139,250,.5) !important;
}
.lx-topbar__right a { color: rgba(248,247,251,.78) !important; font-weight: 600; }
.lx-topbar__right a:hover, .lx-topbar__right a:focus { color: #8D8CF7 !important; }
.lx-topbar__right a + a::before { background: rgba(167,139,250,.28) !important; }
.lx-topbar__right svg { color: #8D8CF7 !important; opacity: .9 !important; }
.lx-header {
background:
radial-gradient(circle at 18% 0%, rgba(124,58,237,.28) 0, rgba(124,58,237,0) 30%),
linear-gradient(180deg, #13131B 0%, #0A0A0F 100%) !important;
border-bottom: 1px solid rgba(167,139,250,.18) !important;
box-shadow: 0 18px 48px rgba(11,11,16,.34) !important;
position: sticky !important;
top: 0 !important;
}
.lx-header::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(255,255,255,.035), transparent 22%, transparent 76%, rgba(124,58,237,.10)),
radial-gradient(circle at 86% 44%, rgba(167,139,250,.16), transparent 26%);
}
.lx-header__inner {
position: relative;
gap: 22px !important;
padding-top: 17px !important;
padding-bottom: 17px !important;
}
.lx-header.is-scrolled { box-shadow: 0 20px 60px rgba(11,11,16,.42) !important; }
.lx-brand { min-width: max-content; }
.lx-brand__icon,
.lx-footer__brand .lx-brand__icon,
.lx-mobile-drawer__brand .lx-brand__icon {
background: linear-gradient(135deg, #7C6CF2 0%, #5D4FD6 58%, #8D8CF7 100%) !important;
border: 1px solid rgba(255,255,255,.20) !important;
box-shadow: 0 10px 24px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.28) !important;
border-radius: 14px !important;
}
.lx-header .lx-brand__name,
.lx-mobile-drawer__brand .lx-brand__name {
color: #FFFFFF !important;
font-size: 1.34rem !important;
letter-spacing: -.035em !important;
}
.lx-brand__name span,
.lx-mobile-drawer__brand .lx-brand__name span { color: #8D8CF7 !important; }
.lx-header .lx-brand__tagline {
color: rgba(248,247,251,.62) !important;
letter-spacing: .16em !important;
}
.lx-brand .custom-logo { filter: drop-shadow(0 10px 22px rgba(0,0,0,.28)); }
.lx-search {
max-width: 640px !important;
}
.lx-search__form {
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(231,231,236,.90) !important;
border-radius: 16px !important;
min-height: 50px;
padding-left: 18px !important;
box-shadow: 0 16px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.lx-search__form:hover { background: #FFFFFF !important; border-color: rgba(167,139,250,.55) !important; }
.lx-search__form:focus-within {
background: #FFFFFF !important;
border-color: #7C6CF2 !important;
box-shadow: 0 0 0 4px rgba(124,58,237,.22), 0 18px 42px rgba(0,0,0,.25) !important;
}
.lx-search__input { color: #13131B !important; font-weight: 600; }
.lx-search__input::placeholder { color: #6B6F7A !important; font-weight: 500; }
.lx-search__icon, .lx-search__form:focus-within .lx-search__icon { color: #7C6CF2 !important; }
.lx-search__btn {
background: linear-gradient(135deg, #7C6CF2 0%, #5D4FD6 100%) !important;
height: 42px !important;
border-radius: 12px !important;
margin: 3px !important;
padding: 0 24px !important;
box-shadow: 0 10px 22px rgba(124,58,237,.35) !important;
}
.lx-search__btn:hover, .lx-search__btn:focus { filter: brightness(1.06); box-shadow: 0 12px 28px rgba(124,58,237,.46) !important; }
.lx-header-actions { margin-left: auto !important; }
.lx-header-action--account { display: none !important; }
.lx-header-action--cart {
color: #FFFFFF !important;
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(167,139,250,.24) !important;
border-radius: 16px !important;
padding: 11px 14px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.lx-header-action--cart:hover,
.lx-header-action--cart:focus {
color: #FFFFFF !important;
background: rgba(124,58,237,.22) !important;
border-color: rgba(167,139,250,.55) !important;
transform: translateY(-1px);
}
.lx-header-action--cart .lx-header-action__icon svg { color: #F8F7FB !important; }
.lx-header-action--cart .lx-header-action__txt small { color: rgba(248,247,251,.58) !important; }
.lx-header-action--cart .lx-header-action__txt strong { color: #FFFFFF !important; }
.lx-cart-badge,
.lx-mobile-drawer__badge {
background: linear-gradient(135deg, #8D8CF7 0%, #7C6CF2 100%) !important;
color: #FFFFFF !important;
border-color: #0A0A0F !important;
box-shadow: 0 8px 18px rgba(124,58,237,.48) !important;
}
.lx-nav-bar {
background: linear-gradient(180deg, #13131B 0%, #0A0A0F 100%) !important;
border-top: 1px solid rgba(255,255,255,.04) !important;
border-bottom: 1px solid rgba(167,139,250,.22) !important;
box-shadow: 0 10px 24px rgba(11,11,16,.28) !important;
}
.lx-nav-link {
color: rgba(248,247,251,.82) !important;
border-bottom: none !important;
border-radius: 999px !important;
margin: 7px 2px !important;
padding: 9px 13px !important;
font-weight: 700 !important;
}
.lx-nav-link::after {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: 5px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #7C6CF2, #8D8CF7);
transform: scaleX(0);
transform-origin: left;
transition: transform .2s ease;
}
.lx-nav-link:hover,
.lx-nav-item--active > .lx-nav-link,
.lx-nav-item.is-open > .lx-nav-link {
color: #FFFFFF !important;
background: rgba(124,58,237,.18) !important;
}
.lx-nav-link:hover::after,
.lx-nav-item--active > .lx-nav-link::after,
.lx-nav-item.is-open > .lx-nav-link::after { transform: scaleX(1); }
.lx-all-depts-btn {
background: linear-gradient(135deg, #7C6CF2 0%, #5D4FD6 100%) !important;
border-radius: 14px !important;
margin: 7px 10px 7px 0 !important;
min-height: 40px;
box-shadow: 0 10px 24px rgba(124,58,237,.32) !important;
}
.lx-all-depts-menu,
.lx-dropdown,
.lx-search-suggest {
background: #FFFFFF !important;
border: 1px solid rgba(231,231,236,.95) !important;
border-top: 3px solid #7C6CF2 !important;
box-shadow: 0 22px 60px rgba(11,11,16,.26) !important;
border-radius: 0 0 16px 16px !important;
}
.lx-all-depts-menu__head { background: #EEEAFE !important; color: #13131B !important; }
.lx-all-depts-menu__head a,
.lx-dropdown__item--viewall a { color: #7C6CF2 !important; }
.lx-all-depts-menu__item:hover,
.lx-all-depts-menu__item:focus,
.lx-dropdown__item a:hover,
.lx-dropdown__item a:focus {
background: #EEEAFE !important;
color: #5D4FD6 !important;
}
.lx-menu-toggle {
background: rgba(255,255,255,.08) !important;
color: #FFFFFF !important;
border: 1px solid rgba(167,139,250,.24) !important;
border-radius: 12px !important;
}
.lx-menu-toggle:hover,
.lx-menu-toggle.is-active { background: rgba(124,58,237,.34) !important; color: #FFFFFF !important; }
.lx-mobile-drawer__backdrop { background: rgba(11,11,16,.68) !important; backdrop-filter: blur(5px) !important; }
.lx-mobile-drawer__panel { background: #F8F7FB !important; }
.lx-mobile-drawer__head {
background: radial-gradient(circle at 18% 0%, rgba(124,58,237,.35), transparent 36%), linear-gradient(135deg, #13131B 0%, #0A0A0F 100%) !important;
border-bottom-color: #7C6CF2 !important;
}
.lx-mobile-drawer__search { background: #FFFFFF !important; }
.lx-mobile-drawer__search input:focus { border-color: #7C6CF2 !important; box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important; }
.lx-mobile-drawer__search button { background: linear-gradient(135deg, #7C6CF2, #5D4FD6) !important; }
.lx-mobile-drawer__quicklinks { grid-template-columns: 1fr !important; background: #F8F7FB !important; }
.lx-mobile-drawer__quicklinks a {
background: #FFFFFF !important;
color: #13131B !important;
border: 1px solid #E7E7EE !important;
box-shadow: 0 10px 24px rgba(11,11,16,.06) !important;
}
.lx-mobile-drawer__quicklinks a:hover { background: #EEEAFE !important; color: #5D4FD6 !important; }
.lx-mobile-drawer__tab:hover,
.lx-mobile-drawer__tab.is-active,
.lx-mobile-nav__link:hover,
.lx-mobile-nav__toggle:hover,
.lx-mobile-nav__item.is-open .lx-mobile-nav__toggle,
.lx-mobile-nav__sub li a:hover,
.lx-mobile-drawer__foot a:hover { color: #7C6CF2 !important; }
.lx-mobile-nav__link:hover,
.lx-mobile-nav__sub li a:hover,
.lx-mobile-nav__toggle:hover { background: #EEEAFE !important; }
.lx-mobile-drawer__foot { background: #FFFFFF !important; border-top-color: #E7E7EE !important; }
.lx-mobile-drawer__foot a svg { color: #7C6CF2 !important; }
.lx-promo-strip {
background: linear-gradient(90deg, #7C6CF2 0%, #5D4FD6 100%) !important;
color: #FFFFFF !important;
}
.lx-footer {
background:
radial-gradient(circle at 10% 0%, rgba(124,58,237,.10), transparent 31%),
linear-gradient(180deg, #F8F7FB 0%, #FFFFFF 100%) !important;
color: #202232 !important;
padding: 64px 0 0 !important;
border-top: 1px solid #E7E7EE !important;
}
.lx-footer__grid {
grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, .82fr)) minmax(260px, 1.05fr) !important;
gap: 34px !important;
align-items: start !important;
}
.lx-footer__brand .lx-brand__name { color: #0A0A0F !important; }
.lx-footer__brand .lx-brand__name span { color: #7C6CF2 !important; }
.lx-footer__brand .lx-brand__tagline { color: #6B6F7A !important; }
.lx-footer__about {
color: #6B6F7A !important;
font-size: .92rem !important;
line-height: 1.75 !important;
max-width: 360px !important;
margin: 18px 0 16px !important;
}
.lx-footer__trust-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
}
.lx-footer__trust-badges span,
.lx-footer__payment span {
display: inline-flex;
align-items: center;
border: 1px solid rgba(124,58,237,.18);
background: #FFFFFF;
color: #5D4FD6;
border-radius: 999px;
padding: 7px 11px;
font-size: .74rem;
font-weight: 800;
letter-spacing: .02em;
box-shadow: 0 8px 22px rgba(11,11,16,.05);
}
.lx-footer__company {
background: #FFFFFF !important;
border: 1px solid #E7E7EE !important;
border-radius: 16px !important;
padding: 16px !important;
box-shadow: 0 16px 36px rgba(11,11,16,.06) !important;
}
.lx-footer__company-name { color: #13131B !important; }
.lx-footer__company-meta { color: #6B6F7A !important; }
.lx-footer__company-meta svg { color: #7C6CF2 !important; }
.lx-footer__company-meta a { color: #202232 !important; }
.lx-footer__company-meta a:hover { color: #7C6CF2 !important; }
.lx-footer__col-title {
color: #13131B !important;
border-bottom: 1px solid #E7E7EE !important;
padding-bottom: 12px !important;
margin-bottom: 16px !important;
cursor: default;
}
.lx-footer__col-title::after {
content: '';
display: block;
width: 34px;
height: 3px;
background: linear-gradient(90deg, #7C6CF2, #8D8CF7);
border-radius: 999px;
position: absolute;
left: 0;
bottom: -2px;
}
.lx-footer__links a {
color: #6B6F7A !important;
font-weight: 600 !important;
}
.lx-footer__links a::before { color: #7C6CF2 !important; }
.lx-footer__links a:hover,
.lx-footer__bottom-links a:hover { color: #7C6CF2 !important; }
.lx-footer__col--newsletter {
background: #FFFFFF;
border: 1px solid #E7E7EE;
border-radius: 20px;
padding: 20px;
box-shadow: 0 18px 46px rgba(11,11,16,.08);
}
.lx-footer__col--newsletter .lx-footer__col-title {
margin-bottom: 12px !important;
}
.lx-footer__newsletter-copy { color: #6B6F7A !important; font-size: .9rem !important; }
.lx-footer__newsletter-form {
background: #F8F7FB !important;
border: 1px solid #E7E7EE !important;
border-radius: 14px !important;
padding: 4px !important;
gap: 4px !important;
}
.lx-footer__newsletter-input { color: #13131B !important; background: transparent !important; }
.lx-footer__newsletter-input::placeholder { color: #6B6F7A !important; }
.lx-footer__newsletter-input:focus { outline: none !important; }
.lx-footer__newsletter-btn {
background: linear-gradient(135deg, #7C6CF2 0%, #5D4FD6 100%) !important;
border-radius: 10px !important;
box-shadow: 0 10px 22px rgba(124,58,237,.28) !important;
}
.lx-footer__newsletter-btn:hover { filter: brightness(1.07); }
.lx-footer__newsletter-fine { color: #6B6F7A !important; }
.lx-footer__bottom {
border-top: 1px solid #E7E7EE !important;
padding: 22px 0 !important;
}
.lx-footer__bottom-text,
.lx-footer__bottom-links a { color: #6B6F7A !important; }
.lx-footer__payment {
display: flex !important;
flex: 1 1 auto !important;
justify-content: flex-end !important;
align-items: center !important;
min-width: 220px !important;
max-width: none !important;
line-height: 1.35 !important;
overflow: visible !important;
}
@media (max-width: 1100px) {
.lx-header__inner { gap: 14px !important; }
.lx-search { max-width: 520px !important; }
.lx-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.lx-footer__brand, .lx-footer__col--newsletter { grid-column: span 2; }
}
@media (max-width: 768px) {
.lx-topbar__inner { justify-content: center !important; text-align: center; }
.lx-topbar__right { display: none !important; }
.lx-header__inner { padding-top: 12px !important; padding-bottom: 12px !important; gap: 9px !important; }
.lx-header .lx-brand__name { font-size: 1.06rem !important; }
.lx-header .lx-brand__icon { width: 38px !important; height: 38px !important; }
.lx-header-action--cart { padding: 9px !important; border-radius: 13px !important; }
.lx-footer { padding-top: 42px !important; }
.lx-footer__grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.lx-footer__brand, .lx-footer__col--newsletter { grid-column: auto; }
.lx-footer__brand { padding-bottom: 18px !important; }
.lx-footer__col { border-bottom: 1px solid #E7E7EE !important; }
.lx-footer__col--newsletter {
margin-top: 18px;
border-bottom: 1px solid #E7E7EE !important;
}
.lx-footer__col-title {
cursor: pointer !important;
color: #13131B !important;
padding: 16px 4px !important;
margin: 0 !important;
border-bottom: 0 !important;
}
.lx-footer__col-title::after { display: none; }
.lx-footer__col-title:hover { color: #7C6CF2 !important; }
.lx-footer__col-icon::before,
.lx-footer__col-icon::after { background: #7C6CF2 !important; }
.lx-footer__col-title[aria-expanded="true"] + .lx-footer__links,
.lx-footer__col-title[aria-expanded="true"] + .lx-footer__col-body {
padding: 4px 4px 18px !important;
}
.lx-footer__bottom { text-align: center !important; }
.lx-footer__bottom-links { flex-wrap: wrap !important; gap: 12px !important; }
.lx-footer__payment { justify-content: center !important; min-width: 0 !important; width: 100% !important; }
}
@media (max-width: 480px) {
.lx-footer__newsletter-form { flex-direction: column; }
.lx-footer__newsletter-btn { width: 100%; justify-content: center; min-height: 42px; }
.lx-footer__trust-badges { gap: 6px; }
.lx-footer__trust-badges span { font-size: .7rem; }
}
/* ============================================================
GADGENIX RESALE LUXURY TECH REFRESH — SOFT LAVENDER + CONTROLLED GOLD
Preserves legacy lx class names for WooCommerce cart/search/mobile JS.
============================================================ */
:root {
--lx-orange: #7C6CF2; /* legacy accent alias: premium purple */
--lx-orange-dark: #5D4FD6;
--lx-orange-light: #8D8CF7;
--lx-orange-pale: #EEEAFE;
--gx-deep-black: #0A0A0F;
--gx-charcoal: #13131B;
--gx-graphite: #1D1D28;
--gx-navy-charcoal: #202232;
--gx-lavender: #8D8CF7;
--gx-purple: #7C6CF2;
--gx-purple-deep: #5D4FD6;
--gx-lavender-pale: #EEEAFE;
--gx-gold: #E7C35A;
--gx-gold-soft: #D9B44A;
--gx-gold-pale: #FFF6D8;
--gx-offwhite: #F8F7FB;
--gx-ivory: #FCFBF7;
--gx-border: #E7E7EE;
--gx-body: #6B6F7A;
--gx-lux-shadow: 0 24px 70px rgba(10,10,15,.28);
--gx-soft-shadow: 0 18px 50px rgba(19,19,27,.08);
}
a { color: var(--gx-purple); }
a:hover { color: var(--gx-purple-deep); }
.lx-topbar {
background:
linear-gradient(90deg, rgba(141,140,247,.10), transparent 18%, transparent 78%, rgba(231,195,90,.10)),
#0A0A0F !important;
color: rgba(252,251,247,.80) !important;
border-bottom: 1px solid rgba(141,140,247,.18) !important;
box-shadow: inset 0 -1px 0 rgba(231,195,90,.08) !important;
}
.lx-topbar__left {
color: rgba(252,251,247,.82) !important;
gap: 12px !important;
}
.lx-topbar__pulse {
background: var(--gx-gold) !important;
box-shadow: 0 0 0 0 rgba(231,195,90,.46) !important;
}
.lx-topbar__right a { color: rgba(252,251,247,.78) !important; }
.lx-topbar__right a:hover,
.lx-topbar__right a:focus { color: var(--gx-lavender) !important; }
.lx-topbar__right a + a::before {
background: linear-gradient(180deg, rgba(141,140,247,.12), rgba(231,195,90,.55), rgba(141,140,247,.12)) !important;
}
.lx-topbar__right svg { color: var(--gx-gold) !important; opacity: .9 !important; }
.lx-header {
background:
radial-gradient(circle at 11% -18%, rgba(141,140,247,.32), transparent 34%),
radial-gradient(circle at 90% 20%, rgba(231,195,90,.11), transparent 28%),
linear-gradient(180deg, #171724 0%, #0A0A0F 100%) !important;
border-bottom: 1px solid rgba(141,140,247,.20) !important;
box-shadow: 0 22px 58px rgba(10,10,15,.34) !important;
}
.lx-header::before {
background:
linear-gradient(90deg, rgba(255,255,255,.035), transparent 32%, transparent 72%, rgba(141,140,247,.08)),
linear-gradient(180deg, rgba(255,255,255,.035), transparent) !important;
}
.lx-header__inner {
min-height: 84px;
gap: clamp(14px, 2vw, 28px) !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.lx-brand { gap: 12px !important; }
.lx-header .lx-brand__icon,
.lx-mobile-drawer__brand .lx-brand__icon {
position: relative !important;
background:
radial-gradient(circle at 26% 20%, rgba(255,255,255,.36), transparent 26%),
linear-gradient(135deg, var(--gx-lavender) 0%, var(--gx-purple) 48%, var(--gx-purple-deep) 100%) !important;
border: 1px solid rgba(255,255,255,.22) !important;
box-shadow: 0 14px 32px rgba(124,108,242,.34), inset 0 1px 0 rgba(255,255,255,.34) !important;
border-radius: 16px !important;
}
.lx-header .lx-brand__icon::after,
.lx-mobile-drawer__brand .lx-brand__icon::after {
content:'';
width: 7px;
height: 7px;
border-radius: 99px;
position: absolute;
right: -2px;
top: -2px;
background: var(--gx-gold);
box-shadow: 0 0 18px rgba(231,195,90,.72);
}
.lx-header .lx-brand__name,
.lx-mobile-drawer__brand .lx-brand__name {
color: #FFFFFF !important;
font-size: clamp(1.12rem, 1.45vw, 1.42rem) !important;
font-weight: 850 !important;
letter-spacing: -.045em !important;
line-height: 1 !important;
}
.lx-header .lx-brand__name span,
.lx-mobile-drawer__brand .lx-brand__name span {
color: var(--gx-lavender) !important;
margin-left: .22em;
font-weight: 760 !important;
}
.lx-header .lx-brand__tagline {
color: rgba(252,251,247,.56) !important;
font-size: .62rem !important;
letter-spacing: .20em !important;
margin-top: 5px !important;
text-transform: uppercase !important;
}
.lx-search { max-width: 680px !important; }
.lx-search__form {
position: relative !important;
min-height: 54px !important;
background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF7 100%) !important;
border: 1px solid rgba(141,140,247,.42) !important;
border-radius: 18px !important;
padding-left: 18px !important;
box-shadow: 0 20px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.96) !important;
overflow: hidden;
}
.lx-search__form::before {
content:'';
position:absolute;
left:0;
top:10px;
bottom:10px;
width:3px;
border-radius:999px;
background: linear-gradient(180deg, var(--gx-lavender), var(--gx-gold));
opacity:.88;
}
.lx-search__form:hover { border-color: rgba(141,140,247,.70) !important; }
.lx-search__form:focus-within {
border-color: var(--gx-lavender) !important;
box-shadow: 0 0 0 4px rgba(141,140,247,.20), 0 22px 54px rgba(0,0,0,.26) !important;
}
.lx-search__icon,
.lx-search__form:focus-within .lx-search__icon { color: var(--gx-purple) !important; }
.lx-search__input { color: var(--gx-charcoal) !important; font-weight: 650 !important; }
.lx-search__input::placeholder { color: #747783 !important; font-weight: 520 !important; }
.lx-search__btn {
height: 44px !important;
border-radius: 14px !important;
background: linear-gradient(135deg, var(--gx-lavender) 0%, var(--gx-purple) 48%, var(--gx-purple-deep) 100%) !important;
box-shadow: 0 12px 26px rgba(124,108,242,.36), inset 0 1px 0 rgba(255,255,255,.20) !important;
font-weight: 800 !important;
}
.lx-search__btn:hover,
.lx-search__btn:focus {
transform: translateY(-1px);
box-shadow: 0 14px 32px rgba(124,108,242,.44), 0 0 0 1px rgba(231,195,90,.24) !important;
}
.lx-header-actions { margin-left: auto !important; }
.lx-header-action--account { display: none !important; }
.lx-header-action--cart {
min-height: 54px !important;
color: #FFFFFF !important;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055)) !important;
border: 1px solid rgba(141,140,247,.28) !important;
border-radius: 18px !important;
padding: 11px 15px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 30px rgba(0,0,0,.18) !important;
}
.lx-header-action--cart:hover,
.lx-header-action--cart:focus {
background: linear-gradient(180deg, rgba(124,108,242,.24), rgba(141,140,247,.12)) !important;
border-color: rgba(141,140,247,.62) !important;
color: #FFFFFF !important;
}
.lx-header-action--cart .lx-header-action__txt small { display: none !important; }
.lx-header-action--cart .lx-header-action__txt strong { color:#FFFFFF !important; font-size:.9rem !important; letter-spacing:.01em; }
.lx-header-action--cart .lx-header-action__icon svg { color:#FFFFFF !important; }
.lx-cart-badge,
.lx-mobile-drawer__badge {
background: linear-gradient(135deg, var(--gx-purple), var(--gx-lavender)) !important;
color: #FFFFFF !important;
border: 2px solid #0A0A0F !important;
box-shadow: 0 0 0 2px rgba(231,195,90,.24), 0 9px 20px rgba(124,108,242,.46) !important;
}
.lx-nav-bar {
background:
linear-gradient(90deg, rgba(141,140,247,.07), transparent 22%, transparent 78%, rgba(231,195,90,.08)),
#101018 !important;
border-top: 1px solid rgba(255,255,255,.055) !important;
border-bottom: 1px solid rgba(141,140,247,.20) !important;
box-shadow: 0 12px 30px rgba(10,10,15,.24) !important;
}
.lx-nav-bar__inner { min-height: 56px !important; }
.lx-nav-link {
color: rgba(252,251,247,.82) !important;
border-radius: 999px !important;
margin: 8px 2px !important;
padding: 10px 14px !important;
font-weight: 760 !important;
letter-spacing: .005em;
}
.lx-nav-link::after {
bottom: 4px !important;
height: 2px !important;
background: linear-gradient(90deg, var(--gx-gold), var(--gx-lavender)) !important;
}
.lx-nav-link:hover,
.lx-nav-item--active > .lx-nav-link,
.lx-nav-item.is-open > .lx-nav-link {
color: #FFFFFF !important;
background: rgba(141,140,247,.16) !important;
}
.lx-all-depts-btn {
background: linear-gradient(135deg, var(--gx-purple-deep) 0%, var(--gx-purple) 58%, var(--gx-lavender) 100%) !important;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 16px !important;
min-height: 42px !important;
box-shadow: 0 13px 28px rgba(93,79,214,.34), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.lx-all-depts-btn svg:first-child { color: var(--gx-gold) !important; }
.lx-dropdown,
.lx-all-depts-menu,
.lx-search-suggest {
background: rgba(255,255,255,.98) !important;
border: 1px solid rgba(231,231,238,.95) !important;
border-top: 3px solid var(--gx-lavender) !important;
border-radius: 0 0 18px 18px !important;
box-shadow: 0 26px 70px rgba(10,10,15,.24) !important;
}
.lx-all-depts-menu__head {
background: linear-gradient(90deg, var(--gx-lavender-pale), rgba(255,246,216,.62)) !important;
color: var(--gx-charcoal) !important;
}
.lx-all-depts-menu__head a,
.lx-dropdown__item--viewall a { color: var(--gx-purple-deep) !important; }
.lx-all-depts-menu__icon {
background: var(--gx-lavender-pale) !important;
box-shadow: inset 0 0 0 1px rgba(141,140,247,.16) !important;
}
.lx-all-depts-menu__item:hover,
.lx-all-depts-menu__item:focus,
.lx-dropdown__item a:hover,
.lx-dropdown__item a:focus {
background: linear-gradient(90deg, var(--gx-lavender-pale), rgba(255,246,216,.40)) !important;
color: var(--gx-purple-deep) !important;
}
.lx-menu-toggle {
background: rgba(255,255,255,.08) !important;
color: #FFFFFF !important;
border: 1px solid rgba(141,140,247,.30) !important;
border-radius: 14px !important;
}
.lx-menu-toggle--cats svg { color: var(--gx-gold) !important; }
.lx-menu-toggle:hover,
.lx-menu-toggle.is-active { background: rgba(124,108,242,.30) !important; }
.lx-mobile-drawer__backdrop { background: rgba(10,10,15,.72) !important; backdrop-filter: blur(7px) !important; }
.lx-mobile-drawer__panel { background: var(--gx-offwhite) !important; }
.lx-mobile-drawer__head {
background:
radial-gradient(circle at 20% -18%, rgba(141,140,247,.42), transparent 36%),
radial-gradient(circle at 88% 12%, rgba(231,195,90,.16), transparent 30%),
linear-gradient(135deg, var(--gx-charcoal), var(--gx-deep-black)) !important;
border-bottom-color: rgba(141,140,247,.40) !important;
}
.lx-mobile-drawer__search {
background: #FFFFFF !important;
border: 1px solid var(--gx-border) !important;
box-shadow: var(--gx-soft-shadow) !important;
}
.lx-mobile-drawer__search button { background: #800080 !important; color: #ffffff !important; }
.lx-mobile-drawer__search input:focus { border-color: var(--gx-lavender) !important; box-shadow: 0 0 0 3px rgba(141,140,247,.16) !important; }
.lx-mobile-drawer__quicklinks a {
border-color: rgba(141,140,247,.18) !important;
box-shadow: 0 14px 34px rgba(19,19,27,.07) !important;
}
.lx-mobile-drawer__quicklinks a svg { color: var(--gx-purple) !important; }
.lx-mobile-drawer__quicklinks a:hover,
.lx-mobile-nav__link:hover,
.lx-mobile-nav__toggle:hover,
.lx-mobile-nav__sub li a:hover { background: var(--gx-lavender-pale) !important; color: var(--gx-purple-deep) !important; }
.lx-mobile-drawer__tab.is-active { color: var(--gx-purple-deep) !important; box-shadow: inset 0 -2px 0 var(--gx-gold); }
.lx-mobile-drawer__foot a svg { color: var(--gx-gold) !important; }
.lx-promo-strip {
background:
linear-gradient(90deg, var(--gx-purple-deep), var(--gx-purple) 58%, var(--gx-lavender)) !important;
color: #FFFFFF !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.lx-promo-strip__item svg { color: var(--gx-gold) !important; }
.lx-footer {
background:
radial-gradient(circle at 9% 0%, rgba(141,140,247,.12), transparent 28%),
radial-gradient(circle at 86% 10%, rgba(231,195,90,.13), transparent 25%),
linear-gradient(180deg, var(--gx-offwhite) 0%, var(--gx-ivory) 100%) !important;
color: var(--gx-navy-charcoal) !important;
border-top: 1px solid var(--gx-border) !important;
padding-top: 70px !important;
}
.lx-footer__grid {
grid-template-columns: minmax(280px, 1.46fr) repeat(3, minmax(150px, .84fr)) minmax(280px, 1.08fr) !important;
gap: clamp(24px, 3vw, 42px) !important;
align-items: start !important;
}
.lx-footer__brand .lx-brand__icon {
position: relative !important;
background: linear-gradient(135deg, var(--gx-lavender), var(--gx-purple-deep)) !important;
border-radius: 16px !important;
box-shadow: 0 14px 32px rgba(124,108,242,.25), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.lx-footer__brand .lx-brand__name { color: var(--gx-deep-black) !important; letter-spacing:-.04em !important; }
.lx-footer__brand .lx-brand__name span { color: var(--gx-purple) !important; margin-left:.22em; }
.lx-footer__brand .lx-brand__tagline { color: var(--gx-body) !important; letter-spacing:.16em !important; }
.lx-footer__about {
color: var(--gx-body) !important;
max-width: 410px !important;
line-height: 1.76 !important;
font-size: .94rem !important;
}
.lx-footer__trust-badges span,
.lx-footer__payment span {
background: #FFFFFF !important;
border: 1px solid rgba(141,140,247,.20) !important;
color: var(--gx-purple-deep) !important;
box-shadow: 0 10px 26px rgba(19,19,27,.055) !important;
}
.lx-footer__trust-badges span:nth-child(2n),
.lx-footer__payment span {
border-color: rgba(231,195,90,.34) !important;
color: #7D6320 !important;
background: linear-gradient(180deg, #FFFFFF, rgba(255,246,216,.55)) !important;
}
.lx-footer__company,
.lx-footer__col--newsletter {
background: rgba(255,255,255,.88) !important;
border: 1px solid rgba(231,231,238,.96) !important;
border-radius: 22px !important;
box-shadow: var(--gx-soft-shadow) !important;
}
.lx-footer__company { padding: 18px !important; }
.lx-footer__company-name,
.lx-footer__col-title { color: var(--gx-charcoal) !important; }
.lx-footer__company-meta { color: var(--gx-body) !important; }
.lx-footer__company-meta svg { color: var(--gx-purple) !important; }
.lx-footer__company-meta:nth-child(2) svg { color: var(--gx-gold-soft) !important; }
.lx-footer__company-meta a { color: var(--gx-navy-charcoal) !important; }
.lx-footer__company-meta a:hover { color: var(--gx-purple) !important; }
.lx-footer__col-title {
font-size: .78rem !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
border-bottom-color: var(--gx-border) !important;
}
.lx-footer__col-title::after { background: linear-gradient(90deg, var(--gx-gold), var(--gx-lavender)) !important; }
.lx-footer__links a { color: var(--gx-body) !important; font-weight: 650 !important; }
.lx-footer__links a::before { color: var(--gx-gold-soft) !important; }
.lx-footer__links a:hover,
.lx-footer__bottom-links a:hover { color: var(--gx-purple-deep) !important; }
.lx-footer__col--newsletter {
padding: 22px !important;
position: relative;
overflow: hidden;
}
.lx-footer__col--newsletter::before {
content:'';
position:absolute;
inset:0 0 auto 0;
height:4px;
background: linear-gradient(90deg, var(--gx-gold), var(--gx-lavender), var(--gx-purple));
}
.lx-footer__newsletter-copy { color: var(--gx-body) !important; }
.lx-footer__newsletter-form {
background: #FFFFFF !important;
border: 1px solid rgba(141,140,247,.23) !important;
border-radius: 16px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.lx-footer__newsletter-input { color: var(--gx-charcoal) !important; }
.lx-footer__newsletter-input::placeholder { color: #7C808C !important; }
.lx-footer__newsletter-form:focus-within { border-color: var(--gx-lavender) !important; box-shadow: 0 0 0 3px rgba(141,140,247,.14) !important; }
.lx-footer__newsletter-btn {
background: linear-gradient(135deg, var(--gx-purple), var(--gx-purple-deep)) !important;
color: #FFFFFF !important;
border-radius: 12px !important;
box-shadow: 0 12px 26px rgba(124,108,242,.28) !important;
}
.lx-footer__newsletter-btn:hover { box-shadow: 0 14px 30px rgba(124,108,242,.36), 0 0 0 1px rgba(231,195,90,.24) !important; }
.lx-footer__newsletter-fine { color: var(--gx-body) !important; }
.lx-footer__bottom {
border-top: 1px solid var(--gx-border) !important;
padding: 24px 0 !important;
}
.lx-footer__bottom-text,
.lx-footer__bottom-links a { color: var(--gx-body) !important; }
.lx-footer__bottom-links a::after {
content:'';
display:inline-block;
width:4px;
height:4px;
margin-left:14px;
vertical-align:middle;
border-radius:999px;
background: rgba(231,195,90,.70);
}
.lx-footer__bottom-links a:last-child::after { display:none; }
@media (max-width: 1100px) {
.lx-header__inner { min-height: 76px; }
.lx-search { max-width: 540px !important; }
.lx-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.lx-footer__brand, .lx-footer__col--newsletter { grid-column: span 2; }
}
@media (max-width: 768px) {
.lx-topbar { padding: 7px 0 !important; }
.lx-topbar__left { justify-content:center; font-size:.68rem !important; }
.lx-header__inner { min-height: 66px; padding-top: 11px !important; padding-bottom: 11px !important; }
.lx-header .lx-brand__tagline { display:none !important; }
.lx-header-action--cart { min-height: 44px !important; padding: 9px !important; }
.lx-header-action--cart .lx-header-action__txt { display:none !important; }
.lx-footer { padding-top: 46px !important; }
.lx-footer__grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.lx-footer__brand, .lx-footer__col--newsletter { grid-column: auto !important; }
.lx-footer__col-title { cursor:pointer !important; padding: 16px 4px !important; margin:0 !important; }
.lx-footer__col-title::after { display:none !important; }
.lx-footer__col-icon::before,
.lx-footer__col-icon::after { background: var(--gx-purple) !important; }
.lx-footer__col-title:hover { color: var(--gx-purple-deep) !important; }
.lx-footer__col--newsletter { margin-top: 18px !important; }
.lx-footer__bottom-links a::after { margin-left: 10px; }
}
@media (max-width: 480px) {
.lx-header .lx-brand__name { font-size: 1.02rem !important; }
.lx-header .lx-brand__icon { width: 38px !important; height: 38px !important; border-radius: 13px !important; }
.lx-footer__newsletter-form { flex-direction: column !important; }
.lx-footer__newsletter-btn { width: 100% !important; justify-content: center !important; min-height: 43px !important; }
.lx-footer__bottom-links a::after { display:none; }
}
/* ============================================================
GADGENIX RESALE HEADER POLISH — WHITE MARKETPLACE MID BAR + #FFC439 ACCENTS
Requested refinement: white main header row, yellow search/category/badge.
============================================================ */
:root {
--gx-action-yellow: #ffc439;
--gx-action-yellow-deep: #e7ad21;
--gx-action-yellow-soft: #fff4cc;
}
.lx-header {
background:
radial-gradient(circle at 12% -55%, rgba(141,140,247,.16), transparent 34%),
radial-gradient(circle at 88% -42%, rgba(255,196,57,.20), transparent 30%),
linear-gradient(180deg, #FFFFFF 0%, #FBFAFF 100%) !important;
border-bottom: 1px solid rgba(231,231,238,.96) !important;
box-shadow: 0 14px 38px rgba(19,19,27,.08), inset 0 -1px 0 rgba(141,140,247,.10) !important;
}
.lx-header::before {
background:
linear-gradient(90deg, rgba(141,140,247,.10), transparent 32%, transparent 68%, rgba(255,196,57,.14)) !important;
opacity: 1 !important;
pointer-events: none !important;
}
.lx-header__inner {
min-height: 82px !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
}
.lx-header .lx-brand__name {
color: #0A0A0F !important;
text-shadow: none !important;
}
.lx-header .lx-brand__name span {
color: #7C6CF2 !important;
}
.lx-header .lx-brand__tagline {
color: #6B6F7A !important;
}
.lx-header .lx-brand__icon {
background:
radial-gradient(circle at 26% 20%, rgba(255,255,255,.40), transparent 28%),
linear-gradient(135deg, #8D8CF7 0%, #7C6CF2 52%, #5D4FD6 100%) !important;
box-shadow: 0 13px 30px rgba(124,108,242,.24), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.lx-header .lx-brand__icon::after {
background: var(--gx-action-yellow) !important;
box-shadow: 0 0 16px rgba(255,196,57,.58) !important;
}
.lx-search__form {
background: #FFFFFF !important;
border: 1px solid rgba(141,140,247,.28) !important;
box-shadow: 0 16px 42px rgba(19,19,27,.10), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.lx-search__form::before {
background: linear-gradient(180deg, #8D8CF7, var(--gx-action-yellow)) !important;
}
.lx-search__form:hover {
border-color: rgba(124,108,242,.44) !important;
box-shadow: 0 18px 48px rgba(19,19,27,.12), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.lx-search__form:focus-within {
border-color: rgba(255,196,57,.82) !important;
box-shadow: 0 0 0 4px rgba(255,196,57,.20), 0 18px 48px rgba(19,19,27,.14) !important;
}
.lx-search__btn,
.lx-mobile-drawer__search button {
background: #800080 !important;
color: #ffffff !important;
border: 1px solid rgba(100,0,100,.18) !important;
box-shadow: 0 12px 26px rgba(128,0,128,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.lx-search__btn:hover,
.lx-search__btn:focus,
.lx-mobile-drawer__search button:hover,
.lx-mobile-drawer__search button:focus {
background: #6a006a !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 15px 30px rgba(128,0,128,.38), 0 0 0 3px rgba(128,0,128,.18) !important;
}
.lx-header-action--cart {
color: #101018 !important;
background: linear-gradient(180deg, #FFFFFF, #F8F7FB) !important;
border: 1px solid rgba(141,140,247,.26) !important;
box-shadow: 0 14px 34px rgba(19,19,27,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.lx-header-action--cart:hover,
.lx-header-action--cart:focus {
background: linear-gradient(180deg, #FFFFFF, #FFF8E0) !important;
border-color: rgba(255,196,57,.74) !important;
color: #101018 !important;
}
.lx-header-action--cart .lx-header-action__icon svg,
.lx-header-action--cart .lx-header-action__txt strong {
color: #101018 !important;
}
.lx-cart-badge,
.lx-mobile-drawer__badge {
background: #ffc439 !important;
color: #101018 !important;
border-color: #FFFFFF !important;
box-shadow: 0 0 0 2px rgba(124,108,242,.18), 0 8px 18px rgba(255,196,57,.42) !important;
}
.lx-all-depts-btn {
background: #ffc439 !important;
color: #101018 !important;
border: 1px solid rgba(255,255,255,.20) !important;
box-shadow: 0 12px 26px rgba(255,196,57,.28), inset 0 1px 0 rgba(255,255,255,.42) !important;
}
.lx-all-depts-btn:hover,
.lx-all-depts.is-open .lx-all-depts-btn,
.lx-all-depts:focus-within .lx-all-depts-btn {
background: #ffc439 !important;
color: #101018 !important;
filter: none !important;
box-shadow: 0 15px 30px rgba(255,196,57,.36), 0 0 0 3px rgba(255,196,57,.14), inset 0 1px 0 rgba(255,255,255,.46) !important;
}
.lx-all-depts-btn svg,
.lx-all-depts-btn svg:first-child,
.lx-all-depts-btn__chevron {
color: #101018 !important;
stroke: currentColor !important;
}
.lx-nav-link:hover,
.lx-nav-item--active > .lx-nav-link,
.lx-nav-item.is-open > .lx-nav-link {
background: rgba(255,196,57,.12) !important;
color: #FFFFFF !important;
}
.lx-menu-toggle {
background: #FFFFFF !important;
color: #101018 !important;
border-color: rgba(141,140,247,.24) !important;
box-shadow: 0 10px 24px rgba(19,19,27,.08) !important;
}
.lx-menu-toggle:hover,
.lx-menu-toggle.is-active {
background: #ffc439 !important;
color: #101018 !important;
border-color: rgba(255,196,57,.82) !important;
}
.lx-menu-toggle--cats {
background: #ffc439 !important;
color: #101018 !important;
}
.lx-menu-toggle--cats svg { color: #101018 !important; }
@media (max-width: 768px) {
.lx-header__inner { min-height: 66px !important; }
.lx-header-action--cart { background:#FFFFFF !important; }
.lx-cart-badge { border-color:#FFFFFF !important; }
}
/* ============================================================
GADGENIX RESALE PERFECT HEADER + FOOTER REFINEMENT — v2.1.40
Requests: pure white mid header, topbar contact only, #FFC439 search/category/cart count,
redesigned premium off-white footer. Keeps lx classes/functions intact.
============================================================ */
:root {
--gx-action-yellow: #ffc439;
--gx-action-yellow-dark: #e4aa1e;
--gx-action-yellow-soft: #fff4ce;
--gx-purple-main: #7C6CF2;
--gx-purple-soft: #8D8CF7;
--gx-purple-deep: #5D4FD6;
--gx-ink: #0A0A0F;
--gx-charcoal: #13131B;
--gx-graphite: #202232;
--gx-muted: #6B6F7A;
--gx-line: #E7E7EE;
--gx-footer-warm: #FCFBF7;
--gx-footer-soft: #F8F7FB;
}
/* Contact-only top bar */
.lx-topbar {
background: #0A0A0F !important;
color: rgba(252,251,247,.88) !important;
padding: 7px 0 !important;
border-bottom: 1px solid rgba(255,196,57,.20) !important;
box-shadow: none !important;
}
.lx-topbar__inner {
min-height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
}
.lx-topbar__left,
.lx-topbar__right {
display: flex !important;
align-items: center !important;
gap: 18px !important;
flex-wrap: wrap !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: .78rem !important;
font-weight: 650 !important;
}
.lx-topbar__right { justify-content: flex-end !important; }
.lx-topbar__item,
.lx-topbar__right a,
.lx-topbar__left a {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
color: rgba(252,251,247,.84) !important;
font-size: .78rem !important;
font-weight: 650 !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.lx-topbar__item svg,
.lx-topbar__right svg,
.lx-topbar__left svg {
color: var(--gx-action-yellow) !important;
opacity: 1 !important;
width: 14px !important;
height: 14px !important;
flex: 0 0 auto !important;
}
.lx-topbar__right a + a::before {
left: -10px !important;
height: 14px !important;
background: rgba(255,196,57,.34) !important;
}
.lx-topbar__item:hover,
.lx-topbar__item:focus,
.lx-topbar__right a:hover,
.lx-topbar__left a:hover {
color: #FFFFFF !important;
}
.lx-topbar__pulse { display: none !important; }
/* Pure white main header row — no gradient layer */
.lx-header {
background: #FFFFFF !important;
border-bottom: 1px solid rgba(231,231,238,.96) !important;
box-shadow: 0 12px 34px rgba(19,19,27,.075) !important;
position: sticky !important;
top: 0 !important;
}
.lx-header::before { display: none !important; content: none !important; }
body.admin-bar .lx-header { top: 32px !important; }
.lx-header__inner {
min-height: 86px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
gap: clamp(16px, 2.2vw, 30px) !important;
}
.lx-header.is-scrolled { box-shadow: 0 16px 42px rgba(19,19,27,.11) !important; }
.lx-header .lx-brand__name {
color: var(--gx-ink) !important;
font-weight: 850 !important;
letter-spacing: -.045em !important;
text-shadow: none !important;
}
.lx-header .lx-brand__name span { color: var(--gx-purple-main) !important; }
.lx-header .lx-brand__tagline {
color: var(--gx-muted) !important;
letter-spacing: .18em !important;
font-weight: 750 !important;
}
.lx-header .lx-brand__icon {
background: #FFFFFF !important;
color: var(--gx-purple-main) !important;
border: 1px solid rgba(124,108,242,.22) !important;
box-shadow: 0 12px 28px rgba(124,108,242,.16), inset 0 -4px 0 rgba(255,196,57,.18) !important;
}
.lx-header .lx-brand__icon svg { color: var(--gx-purple-main) !important; }
.lx-header .lx-brand__icon::after {
background: var(--gx-action-yellow) !important;
box-shadow: 0 0 12px rgba(255,196,57,.58) !important;
}
.lx-brand .custom-logo { filter: none !important; }
/* Professional search */
.lx-search { max-width: 680px !important; }
.lx-search__form {
background: #FFFFFF !important;
border: 1px solid rgba(124,108,242,.20) !important;
border-left: 3px solid var(--gx-action-yellow) !important;
border-radius: 16px !important;
min-height: 54px !important;
padding-left: 17px !important;
box-shadow: 0 14px 36px rgba(19,19,27,.075), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.lx-search__form::before { display: none !important; }
.lx-search__form:hover {
border-color: rgba(124,108,242,.34) !important;
border-left-color: var(--gx-action-yellow) !important;
box-shadow: 0 16px 42px rgba(19,19,27,.095) !important;
}
.lx-search__form:focus-within {
border-color: rgba(124,108,242,.48) !important;
border-left-color: var(--gx-action-yellow) !important;
box-shadow: 0 0 0 4px rgba(255,196,57,.18), 0 18px 46px rgba(19,19,27,.11) !important;
}
.lx-search__icon,
.lx-search__form:focus-within .lx-search__icon { color: var(--gx-purple-main) !important; }
.lx-search__input { color: var(--gx-charcoal) !important; font-weight: 650 !important; }
.lx-search__input::placeholder { color: #747783 !important; font-weight: 520 !important; }
.lx-search__btn,
.lx-mobile-drawer__search button {
background: var(--gx-action-yellow) !important;
color: #101018 !important;
border: 1px solid rgba(10,10,15,.07) !important;
border-radius: 13px !important;
font-weight: 850 !important;
box-shadow: 0 12px 24px rgba(255,196,57,.30), inset 0 1px 0 rgba(255,255,255,.52) !important;
}
.lx-search__btn:hover,
.lx-search__btn:focus,
.lx-mobile-drawer__search button:hover,
.lx-mobile-drawer__search button:focus {
background: var(--gx-action-yellow) !important;
color: #101018 !important;
transform: translateY(-1px) !important;
box-shadow: 0 16px 30px rgba(255,196,57,.38), 0 0 0 3px rgba(255,196,57,.17) !important;
}
/* Cart only: clean white pill with yellow counter */
.lx-header-actions { margin-left: auto !important; }
.lx-header-action--account { display: none !important; }
.lx-header-action--cart {
min-height: 54px !important;
color: #101018 !important;
background: #FFFFFF !important;
border: 1px solid rgba(124,108,242,.20) !important;
border-radius: 17px !important;
padding: 11px 15px !important;
box-shadow: 0 14px 32px rgba(19,19,27,.085), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.lx-header-action--cart:hover,
.lx-header-action--cart:focus {
background: #FFF9E6 !important;
border-color: rgba(255,196,57,.74) !important;
color: #101018 !important;
transform: translateY(-1px) !important;
}
.lx-header-action--cart .lx-header-action__icon svg,
.lx-header-action--cart .lx-header-action__txt strong { color: #101018 !important; }
.lx-cart-badge,
.lx-mobile-drawer__badge {
background: var(--gx-action-yellow) !important;
color: #101018 !important;
border: 2px solid #FFFFFF !important;
box-shadow: 0 0 0 2px rgba(124,108,242,.15), 0 8px 18px rgba(255,196,57,.42) !important;
}
/* Dark nav stays premium; category button is requested yellow */
.lx-nav-bar {
background: #11111A !important;
border-top: 1px solid rgba(255,255,255,.05) !important;
border-bottom: 1px solid rgba(124,108,242,.16) !important;
box-shadow: 0 10px 26px rgba(10,10,15,.18) !important;
}
.lx-nav-bar__inner { min-height: 58px !important; }
.lx-all-depts-btn {
background: var(--gx-action-yellow) !important;
color: #101018 !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 15px !important;
min-height: 43px !important;
font-weight: 850 !important;
box-shadow: 0 12px 24px rgba(255,196,57,.25), inset 0 1px 0 rgba(255,255,255,.44) !important;
}
.lx-all-depts-btn:hover,
.lx-all-depts.is-open .lx-all-depts-btn,
.lx-all-depts:focus-within .lx-all-depts-btn {
background: var(--gx-action-yellow) !important;
color: #101018 !important;
box-shadow: 0 15px 30px rgba(255,196,57,.33), 0 0 0 3px rgba(255,196,57,.14) !important;
}
.lx-all-depts-btn svg,
.lx-all-depts-btn svg:first-child,
.lx-all-depts-btn__chevron { color: #101018 !important; stroke: currentColor !important; }
.lx-nav-link {
color: rgba(252,251,247,.84) !important;
font-weight: 760 !important;
border-radius: 999px !important;
margin: 8px 2px !important;
padding: 10px 14px !important;
}
.lx-nav-link::after { background: linear-gradient(90deg, var(--gx-action-yellow), var(--gx-purple-soft)) !important; }
.lx-nav-link:hover,
.lx-nav-item--active > .lx-nav-link,
.lx-nav-item.is-open > .lx-nav-link {
background: rgba(255,196,57,.12) !important;
color: #FFFFFF !important;
}
.lx-menu-toggle {
background: #FFFFFF !important;
color: #101018 !important;
border-color: rgba(124,108,242,.22) !important;
box-shadow: 0 10px 22px rgba(19,19,27,.08) !important;
}
.lx-menu-toggle:hover,
.lx-menu-toggle.is-active,
.lx-menu-toggle--cats {
background: var(--gx-action-yellow) !important;
color: #101018 !important;
border-color: rgba(255,196,57,.80) !important;
}
.lx-menu-toggle__bar { background: currentColor !important; }
.lx-menu-toggle--cats svg { color: #101018 !important; }
/* Footer refreshed: premium off-white with card layout and cleaner hierarchy */
.lx-promo-strip {
background: #FFFFFF !important;
color: var(--gx-charcoal) !important;
border-top: 1px solid var(--gx-line) !important;
border-bottom: 1px solid var(--gx-line) !important;
box-shadow: 0 -8px 30px rgba(19,19,27,.035) inset !important;
padding: 13px 0 !important;
}
.lx-promo-strip__inner { gap: clamp(14px, 4vw, 46px) !important; }
.lx-promo-strip__item {
color: var(--gx-graphite) !important;
font-weight: 800 !important;
font-size: .84rem !important;
letter-spacing: .01em !important;
}
.lx-promo-strip__item svg { color: var(--gx-action-yellow) !important; }
.lx-footer {
background: var(--gx-footer-soft) !important;
color: var(--gx-graphite) !important;
border-top: 0 !important;
padding: 54px 0 0 !important;
position: relative !important;
overflow: hidden !important;
}
.lx-footer::before,
.lx-footer::after {
content: '' !important;
position: absolute !important;
pointer-events: none !important;
border-radius: 999px !important;
}
.lx-footer::before {
width: 360px !important;
height: 360px !important;
left: -160px !important;
top: -190px !important;
background: rgba(124,108,242,.10) !important;
}
.lx-footer::after {
width: 320px !important;
height: 320px !important;
right: -150px !important;
bottom: 40px !important;
background: rgba(255,196,57,.14) !important;
}
.lx-footer > .lx-container {
position: relative !important;
z-index: 1 !important;
}
.lx-footer__grid {
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(231,231,238,.95) !important;
border-radius: 28px !important;
box-shadow: 0 28px 70px rgba(19,19,27,.08) !important;
padding: clamp(24px, 3vw, 38px) !important;
grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(145px, .72fr)) minmax(260px, 1.08fr) !important;
gap: clamp(22px, 3vw, 38px) !important;
align-items: start !important;
position: relative !important;
overflow: hidden !important;
}
.lx-footer__grid::before {
content: '' !important;
position: absolute !important;
inset: 0 0 auto 0 !important;
height: 5px !important;
background: linear-gradient(90deg, var(--gx-action-yellow), var(--gx-purple-soft), var(--gx-purple-main)) !important;
}
.lx-footer__brand {
background: linear-gradient(180deg, #FFFFFF, #FCFBF7) !important;
border: 1px solid rgba(231,231,238,.92) !important;
border-radius: 22px !important;
padding: 22px !important;
box-shadow: 0 16px 38px rgba(19,19,27,.055) !important;
}
.lx-footer__brand .lx-brand__icon {
background: #FFFFFF !important;
color: var(--gx-purple-main) !important;
border: 1px solid rgba(124,108,242,.22) !important;
box-shadow: 0 12px 26px rgba(124,108,242,.14), inset 0 -4px 0 rgba(255,196,57,.16) !important;
}
.lx-footer__brand .lx-brand__icon svg { color: var(--gx-purple-main) !important; }
.lx-footer__brand .lx-brand__name { color: var(--gx-ink) !important; font-size: 1.25rem !important; }
.lx-footer__brand .lx-brand__name span { color: var(--gx-purple-main) !important; }
.lx-footer__brand .lx-brand__tagline { color: var(--gx-muted) !important; }
.lx-footer__about {
color: var(--gx-muted) !important;
margin: 18px 0 17px !important;
font-size: .93rem !important;
line-height: 1.75 !important;
}
.lx-footer__trust-badges { gap: 8px !important; margin-bottom: 18px !important; }
.lx-footer__trust-badges span,
.lx-footer__payment span {
background: #FFFFFF !important;
color: var(--gx-purple-deep) !important;
border: 1px solid rgba(124,108,242,.18) !important;
box-shadow: 0 8px 20px rgba(19,19,27,.05) !important;
border-radius: 999px !important;
padding: 7px 11px !important;
}
.lx-footer__trust-badges span:nth-child(2n),
.lx-footer__payment span {
color: #6E5510 !important;
border-color: rgba(255,196,57,.36) !important;
background: #FFF8DF !important;
}
.lx-footer__company {
background: #FFFFFF !important;
border: 1px solid rgba(231,231,238,.95) !important;
border-radius: 18px !important;
padding: 16px !important;
box-shadow: none !important;
}
.lx-footer__company-name {
color: var(--gx-ink) !important;
font-size: .82rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
margin-bottom: 10px !important;
}
.lx-footer__company-meta {
color: var(--gx-muted) !important;
font-size: .82rem !important;
line-height: 1.55 !important;
gap: 8px !important;
}
.lx-footer__company-meta svg { color: var(--gx-action-yellow) !important; }
.lx-footer__company-meta a { color: var(--gx-graphite) !important; }
.lx-footer__company-meta a:hover { color: var(--gx-purple-main) !important; }
.lx-footer__col:not(.lx-footer__col--newsletter) {
padding-top: 8px !important;
}
.lx-footer__col-title {
color: var(--gx-ink) !important;
border-bottom: 1px solid rgba(231,231,238,.95) !important;
padding: 0 0 13px !important;
margin: 0 0 16px !important;
font-size: .76rem !important;
line-height: 1.35 !important;
font-weight: 900 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
background: transparent !important;
}
.lx-footer__col-title::after {
width: 32px !important;
height: 3px !important;
background: linear-gradient(90deg, var(--gx-action-yellow), var(--gx-purple-soft)) !important;
}
.lx-footer__links li { margin-bottom: 9px !important; }
.lx-footer__links a {
color: var(--gx-muted) !important;
font-size: .91rem !important;
font-weight: 700 !important;
letter-spacing: -.005em !important;
}
.lx-footer__links a::before {
content: '' !important;
width: 6px !important;
height: 6px !important;
display: inline-block !important;
margin-right: 9px !important;
border-radius: 999px !important;
background: rgba(255,196,57,.85) !important;
vertical-align: middle !important;
}
.lx-footer__links a:hover {
color: var(--gx-purple-deep) !important;
padding-left: 4px !important;
}
.lx-footer__col--newsletter {
background: linear-gradient(180deg, #14141E, #0A0A0F) !important;
border: 1px solid rgba(124,108,242,.20) !important;
border-radius: 24px !important;
padding: 24px !important;
box-shadow: 0 24px 54px rgba(10,10,15,.18) !important;
overflow: hidden !important;
}
.lx-footer__col--newsletter::before {
height: 5px !important;
background: linear-gradient(90deg, var(--gx-action-yellow), var(--gx-purple-soft), var(--gx-purple-main)) !important;
}
.lx-footer__col--newsletter .lx-footer__col-title {
color: #FFFFFF !important;
border-bottom-color: rgba(255,255,255,.10) !important;
padding-bottom: 14px !important;
margin-bottom: 15px !important;
}
.lx-footer__col--newsletter .lx-footer__col-title::after { background: var(--gx-action-yellow) !important; }
.lx-footer__newsletter-copy {
color: rgba(252,251,247,.72) !important;
font-size: .92rem !important;
line-height: 1.7 !important;
}
.lx-footer__newsletter-form {
background: #FFFFFF !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 15px !important;
padding: 5px !important;
box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
}
.lx-footer__newsletter-input { color: var(--gx-charcoal) !important; font-weight: 650 !important; }
.lx-footer__newsletter-input::placeholder { color: #7C808C !important; }
.lx-footer__newsletter-form:focus-within {
border-color: var(--gx-action-yellow) !important;
box-shadow: 0 0 0 3px rgba(255,196,57,.18), 0 16px 36px rgba(0,0,0,.20) !important;
}
.lx-footer__newsletter-btn {
background: var(--gx-action-yellow) !important;
color: #101018 !important;
border-radius: 11px !important;
font-weight: 900 !important;
box-shadow: 0 12px 24px rgba(255,196,57,.26) !important;
}
.lx-footer__newsletter-btn:hover {
background: var(--gx-action-yellow) !important;
color: #101018 !important;
transform: translateY(-1px) !important;
box-shadow: 0 15px 30px rgba(255,196,57,.34) !important;
}
.lx-footer__newsletter-fine { color: rgba(252,251,247,.58) !important; }
.lx-footer__bottom {
margin-top: 24px !important;
border-top: 1px solid rgba(231,231,238,.95) !important;
padding: 22px 0 24px !important;
gap: 18px !important;
}
.lx-footer__bottom-text,
.lx-footer__bottom-links a { color: var(--gx-muted) !important; font-weight: 650 !important; }
.lx-footer__bottom-links { gap: 15px !important; flex-wrap: wrap !important; }
.lx-footer__bottom-links a:hover { color: var(--gx-purple-main) !important; }
.lx-footer__bottom-links a::after {
width: 4px !important;
height: 4px !important;
margin-left: 13px !important;
background: rgba(255,196,57,.78) !important;
}
.lx-footer__payment { justify-content: flex-end !important; min-width: 230px !important; }
@media (max-width: 1100px) {
.lx-header__inner { min-height: 78px !important; }
.lx-search { max-width: 520px !important; }
.lx-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.lx-footer__brand,
.lx-footer__col--newsletter { grid-column: span 2 !important; }
}
@media (max-width: 782px) {
body.admin-bar .lx-header { top: 46px !important; }
}
@media (max-width: 768px) {
.lx-topbar__inner {
justify-content: center !important;
gap: 8px !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
padding-bottom: 1px !important;
}
.lx-topbar__left,
.lx-topbar__right {
display: flex !important;
flex-wrap: nowrap !important;
gap: 12px !important;
width: auto !important;
}
.lx-topbar__item,
.lx-topbar__right a,
.lx-topbar__left a { font-size: .70rem !important; }
.lx-topbar__item--location span { max-width: 200px !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.lx-header__inner { min-height: 66px !important; padding-top: 11px !important; padding-bottom: 11px !important; }
.lx-header .lx-brand__tagline { display:none !important; }
.lx-header-action--cart { min-height: 44px !important; padding: 9px !important; }
.lx-header-action--cart .lx-header-action__txt { display:none !important; }
.lx-footer { padding-top: 38px !important; }
.lx-footer__grid {
grid-template-columns: 1fr !important;
gap: 0 !important;
padding: 22px !important;
border-radius: 22px !important;
}
.lx-footer__brand,
.lx-footer__col--newsletter { grid-column: auto !important; }
.lx-footer__brand { margin-bottom: 16px !important; }
.lx-footer__col:not(.lx-footer__col--newsletter) { border-bottom: 1px solid rgba(231,231,238,.95) !important; padding-top: 0 !important; }
.lx-footer__col-title {
cursor: pointer !important;
padding: 16px 4px !important;
margin: 0 !important;
border-bottom: 0 !important;
}
.lx-footer__col-title::after { display: none !important; }
.lx-footer__col-icon::before,
.lx-footer__col-icon::after { background: var(--gx-action-yellow) !important; }
.lx-footer__col-title:hover { color: var(--gx-purple-main) !important; }
.lx-footer__col-title[aria-expanded="true"] + .lx-footer__links,
.lx-footer__col-title[aria-expanded="true"] + .lx-footer__col-body { padding: 4px 4px 18px !important; }
.lx-footer__col--newsletter { margin-top: 18px !important; }
.lx-footer__bottom { flex-direction: column !important; text-align: center !important; }
.lx-footer__payment { justify-content: center !important; min-width: 0 !important; width: 100% !important; }
.lx-footer__bottom-links { justify-content: center !important; }
}
@media (max-width: 480px) {
.lx-topbar__item--location span { max-width: 135px !important; }
.lx-footer__newsletter-form { flex-direction: column !important; }
.lx-footer__newsletter-btn { width: 100% !important; justify-content: center !important; min-height: 42px !important; }
.lx-footer__bottom-links a::after { display: none !important; }
}
/* ============================================================
GADGENIX RESALE NAVIGATION REFINEMENT — v2.1.41
Requested: light #F9F9F9 menu/navigation bar background.
============================================================ */
.lx-nav-bar {
background: #F9F9F9 !important;
border-top: 1px solid rgba(231,231,238,.95) !important;
border-bottom: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 10px 28px rgba(19,19,27,.055) !important;
}
.lx-nav-bar__inner {
min-height: 58px !important;
}
.lx-nav-link {
color: #202232 !important;
background: transparent !important;
font-weight: 780 !important;
}
.lx-nav-link:hover,
.lx-nav-item--active > .lx-nav-link,
.lx-nav-item.is-open > .lx-nav-link {
color: #0A0A0F !important;
background: #FFFFFF !important;
box-shadow: 0 8px 22px rgba(19,19,27,.06), inset 0 -2px 0 rgba(255,196,57,.88) !important;
}
.lx-nav-link::after {
background: linear-gradient(90deg, var(--gx-action-yellow), var(--gx-purple-soft)) !important;
}
.lx-nav-link__chevron {
color: currentColor !important;
}
.lx-nav-item--page:first-of-type {
border-left-color: rgba(32,34,50,.12) !important;
}
.lx-all-depts-btn {
background: #800080 !important;
color: #ffffff !important;
border: 1px solid rgba(100,0,100,.18) !important;
box-shadow: 0 10px 24px rgba(128,0,128,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.lx-all-depts-btn:hover,
.lx-all-depts.is-open .lx-all-depts-btn,
.lx-all-depts:focus-within .lx-all-depts-btn {
background: #6a006a !important;
color: #ffffff !important;
box-shadow: 0 14px 30px rgba(128,0,128,.36), 0 0 0 3px rgba(128,0,128,.14) !important;
}
.lx-all-depts-btn svg,
.lx-all-depts-btn svg:first-child,
.lx-all-depts-btn__chevron {
color: #ffffff !important;
stroke: currentColor !important;
}
@media (max-width: 768px) {
.lx-nav-bar { display: none !important; }
}
/* ============================================================
GADGENIX RESALE COMPLETE HOMEPAGE REDESIGN — v2.2.0
Premium technology resale homepage using #800080 and #FFC439.
============================================================ */
:root {
--brand-purple: #800080;
--brand-yellow: #FFC439;
--brand-black: #08080D;
--brand-charcoal: #111119;
--brand-graphite: #1A1A24;
--brand-gray: #6B6F7A;
--brand-border: #E7E7EE;
--brand-offwhite: #F8F7FB;
--brand-white: #FFFFFF;
--brand-purple-dark: #5B005B;
--brand-purple-soft: #A36AA3;
--brand-purple-pale: #F4E7F4;
--brand-yellow-soft: #FFF6D8;
--brand-shadow: 0 22px 60px rgba(8, 8, 13, .10);
--brand-shadow-soft: 0 14px 36px rgba(8, 8, 13, .075);
--lx-orange: #800080;
--lx-orange-dark: #5B005B;
--lx-orange-light: #A36AA3;
--lx-orange-pale: #F4E7F4;
--gx-primary-purple: #800080;
--gx-purple-main: #800080;
--gx-purple-deep: #5B005B;
--gx-purple-soft: #A36AA3;
--gx-action-yellow: #FFC439;
--gx-action-yellow-dark: #E2A90D;
--gx-action-yellow-soft: #FFF6D8;
}
.gx-home {
overflow: hidden;
background: var(--brand-white);
color: var(--brand-graphite);
}
.gx-home a { text-decoration: none; }
.gx-home .lx-container { position: relative; z-index: 1; }
.gx-section {
padding: clamp(48px, 5vw, 80px) 0;
position: relative;
}
.gx-section--soft { background: var(--brand-offwhite); }
.gx-section-head {
margin-bottom: clamp(28px, 4vw, 48px);
}
.gx-section-head--center {
text-align: center;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.gx-section-head--split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.gx-section-head h2,
.gx-stats h2,
.gx-newsletter h2,
.gx-final-cta h2 {
margin: 8px 0 12px;
color: var(--brand-black);
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1.02;
letter-spacing: -0.045em;
font-weight: 900;
}
.gx-section-head p,
.gx-newsletter p,
.gx-final-cta p {
margin: 0;
color: var(--brand-gray);
font-size: clamp(.98rem, 1.3vw, 1.12rem);
line-height: 1.75;
}
.gx-kicker,
.gx-eyebrow,
.gx-badge {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0;
color: var(--brand-purple);
font-size: .75rem;
line-height: 1;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
}
.gx-kicker::before,
.gx-eyebrow span,
.gx-badge::before {
content: '';
width: 34px;
height: 3px;
border-radius: 99px;
background: linear-gradient(90deg, var(--brand-yellow), var(--brand-purple));
}
.gx-btn,
.gx-link-pill,
.gx-category-card b,
.gx-collection-card a,
.gx-product-placeholder-card a {
transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.gx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 9px 18px;
border-radius: 10px;
font-weight: 600;
font-size: .86rem;
border: 1px solid transparent;
white-space: nowrap;
}
.gx-btn::after,
.gx-link-pill::after,
.gx-category-card b i,
.gx-collection-card a i {
content: '→';
font-style: normal;
font-size: .9em;
color: var(--brand-yellow);
}
.gx-btn.lx-btn--arrow::after {
content: none;
}
.gx-btn--primary {
color: #fff !important;
background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-dark));
box-shadow: 0 6px 18px rgba(128,0,128,.22), inset 0 1px 0 rgba(255,255,255,.14);
}
.gx-btn--primary:hover,
.gx-btn--primary:focus {
transform: translateY(-2px);
color: #fff !important;
box-shadow: 0 22px 46px rgba(128,0,128,.34), 0 0 0 4px rgba(255,196,57,.12);
}
.gx-btn--ghost {
color: #fff !important;
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.065);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.gx-btn--ghost:hover,
.gx-btn--ghost:focus {
transform: translateY(-2px);
color: #fff !important;
border-color: rgba(255,196,57,.52);
background: rgba(255,196,57,.10);
}
.gx-link-pill {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--brand-purple) !important;
background: var(--brand-white);
border: 1px solid rgba(128,0,128,.16);
border-radius: 999px;
padding: 12px 18px;
font-weight: 900;
box-shadow: var(--brand-shadow-soft);
}
.gx-link-pill:hover { transform: translateY(-2px); border-color: rgba(255,196,57,.48); color: var(--brand-purple-dark) !important; }
.gx-link-pill--yellow { color: #2B2100 !important; background: var(--brand-yellow-soft); border-color: rgba(255,196,57,.46); }
/* Hero */
.gx-hero {
position: relative;
padding: clamp(74px, 9vw, 132px) 0 clamp(70px, 8vw, 118px);
background:
radial-gradient(circle at 20% 22%, rgba(128,0,128,.34), transparent 34%),
radial-gradient(circle at 82% 20%, rgba(255,196,57,.16), transparent 24%),
linear-gradient(135deg, #08080D 0%, #111119 48%, #1A1A24 100%);
color: #fff;
overflow: hidden;
}
.gx-hero::before,
.gx-hero::after {
content: '';
position: absolute;
pointer-events: none;
}
.gx-hero::before {
inset: 0;
background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 90%);
}
.gx-hero::after {
width: 540px;
height: 540px;
right: -240px;
bottom: -260px;
border-radius: 999px;
background: rgba(128,0,128,.38);
filter: blur(45px);
}
.gx-hero__wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
align-items: center;
gap: clamp(36px, 6vw, 78px);
}
.gx-hero__copy { max-width: 720px; }
.gx-eyebrow { color: #F8F7FB; margin-bottom: 18px; }
.gx-hero h1 {
margin: 0;
color: #fff;
font-size: clamp(2.55rem, 6vw, 5.8rem);
line-height: .95;
letter-spacing: -0.07em;
font-weight: 950;
max-width: 850px;
}
.gx-hero__text {
max-width: 690px;
margin: 22px 0 0;
color: rgba(248,247,251,.78);
font-size: clamp(1.02rem, 1.45vw, 1.2rem);
line-height: 1.82;
}
.gx-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.gx-hero__actions--center { justify-content: center; }
.gx-hero__trust {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.gx-hero__trust span {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 9px 13px;
color: rgba(255,255,255,.88);
background: rgba(255,255,255,.075);
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
font-size: .83rem;
font-weight: 800;
}
.gx-hero__trust i { color: var(--brand-yellow); font-style: normal; }
.gx-hero__visual { min-width: 0; }
.gx-device-stage {
min-height: 560px;
position: relative;
border: 1px solid rgba(255,255,255,.12);
border-radius: 36px;
background:
radial-gradient(circle at 50% 16%, rgba(255,196,57,.20), transparent 24%),
radial-gradient(circle at 72% 74%, rgba(128,0,128,.28), transparent 34%),
linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
box-shadow: 0 34px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
overflow: hidden;
backdrop-filter: blur(16px);
}
.gx-device-stage::before {
content: '';
position: absolute;
inset: 28px;
border-radius: 30px;
border: 1px solid rgba(255,255,255,.10);
}
.gx-device {
position: absolute;
display: block;
border: 1px solid rgba(255,255,255,.18);
background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.035));
box-shadow: 0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.15);
}
.gx-device--laptop { left: 24%; top: 26%; width: 56%; height: 32%; border-radius: 18px; }
.gx-device--laptop::after { content:''; position:absolute; left:-10%; right:-10%; bottom:-32px; height:28px; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.055)); }
.gx-device--phone { left: 10%; top: 23%; width: 22%; height: 48%; border-radius: 28px; }
.gx-device--watch { right: 11%; bottom: 19%; width: 20%; height: 20%; border-radius: 32px; }
.gx-device--buds { left: 18%; bottom: 14%; width: 22%; height: 14%; border-radius: 28px; }
.gx-device-stage__label {
position: absolute;
left: 32px;
right: 32px;
bottom: 32px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
color: #fff;
background: rgba(8,8,13,.58);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
padding: 16px 18px;
}
.gx-device-stage__label strong { font-weight: 900; }
.gx-device-stage__label span { color: rgba(255,255,255,.64); font-size: .88rem; }
.gx-floating-chip {
position: absolute;
z-index: 2;
padding: 10px 13px;
border-radius: 999px;
font-size: .78rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: 0 18px 34px rgba(0,0,0,.22);
}
.gx-floating-chip--top { top: 34px; right: 32px; color: #2B2100; background: var(--brand-yellow); }
.gx-floating-chip--bottom { bottom: 116px; left: 34px; color: #fff; background: var(--brand-purple); }
/* Trust strip */
.gx-trust-strip { background: var(--brand-offwhite); padding: 24px 0; }
.gx-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gx-trust-card {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 22px;
border-radius: 22px;
background: var(--brand-white);
border: 1px solid var(--brand-border);
box-shadow: 0 10px 28px rgba(8,8,13,.045);
}
.gx-icon {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
color: #fff;
background: var(--brand-purple);
box-shadow: inset 0 -3px 0 rgba(255,196,57,.30);
font-weight: 900;
}
.gx-trust-card h2 { margin: 0 0 5px; color: var(--brand-black); font-size: 1rem; font-weight: 900; }
.gx-trust-card p { margin: 0; color: var(--brand-gray); font-size: .9rem; line-height: 1.58; }
/* Category cards */
.gx-categories { background: #fff; }
.gx-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gx-category-card {
display: grid;
grid-template-rows: 210px 1fr;
min-height: 100%;
background: #fff;
border: 1px solid var(--brand-border);
border-radius: 28px;
overflow: hidden;
box-shadow: var(--brand-shadow-soft);
}
.gx-category-card:hover { transform: translateY(-6px); border-color: rgba(128,0,128,.32); box-shadow: 0 26px 62px rgba(128,0,128,.13); }
.gx-category-card__image {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background:
radial-gradient(circle at 65% 36%, rgba(128,0,128,.18), transparent 35%),
linear-gradient(145deg, #F8F7FB, #FFFFFF);
color: var(--brand-purple);
}
.gx-category-card__image::after {
content: '';
position: absolute;
left: 24px;
right: 24px;
bottom: 0;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--brand-yellow), var(--brand-purple));
}
.gx-category-card__image span { font-size: 2.9rem; filter: drop-shadow(0 10px 16px rgba(128,0,128,.14)); }
.gx-category-card__image em { color: var(--brand-gray); font-style: normal; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gx-category-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.gx-category-card strong { color: var(--brand-black); font-size: 1.22rem; font-weight: 950; }
.gx-category-card small { color: var(--brand-gray); font-size: .94rem; line-height: 1.65; }
.gx-category-card b { margin-top: auto; color: var(--brand-purple); font-size: .9rem; font-weight: 950; }
.gx-category-card:hover b { color: var(--brand-purple-dark); }
/* Product areas */
.gx-products-section { background: #fff; }
.gx-products-section.gx-section--soft { background: var(--brand-offwhite); }
.gx-woo-wrap ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
margin: 0 !important;
}
.gx-home .woocommerce ul.products li.product,
.gx-home ul.products li.product {
float: none !important;
width: auto !important;
margin: 0 !important;
background: #fff !important;
border: 1px solid var(--brand-border) !important;
border-radius: 26px !important;
padding: 14px 14px 18px !important;
box-shadow: var(--brand-shadow-soft) !important;
overflow: hidden !important;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.gx-home .woocommerce ul.products li.product:hover,
.gx-home ul.products li.product:hover {
transform: translateY(-6px) !important;
border-color: rgba(128,0,128,.30) !important;
box-shadow: 0 26px 62px rgba(8,8,13,.13) !important;
}
.gx-home ul.products li.product a img {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
background: linear-gradient(145deg, #F8F7FB, #fff) !important;
border-radius: 20px !important;
padding: 12px !important;
margin: 0 0 16px !important;
}
.gx-home ul.products li.product .woocommerce-loop-product__title,
.gx-home ul.products li.product h2 {
color: var(--brand-black) !important;
font-size: 1rem !important;
line-height: 1.35 !important;
font-weight: 900 !important;
padding: 0 !important;
margin: 0 0 10px !important;
}
.gx-home ul.products li.product .price {
color: var(--brand-purple) !important;
font-size: 1.08rem !important;
font-weight: 950 !important;
margin: 0 0 12px !important;
}
.gx-home ul.products li.product .star-rating,
.gx-home .star-rating::before,
.gx-home .star-rating span::before { color: var(--brand-yellow) !important; }
.gx-home ul.products li.product .button,
.gx-product-placeholder-card a {
width: 100%;
justify-content: center;
border-radius: 15px !important;
background: var(--brand-purple) !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 14px 30px rgba(128,0,128,.20) !important;
font-weight: 900 !important;
}
.gx-home ul.products li.product .button:hover,
.gx-product-placeholder-card a:hover {
background: var(--brand-purple-dark) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 18px 38px rgba(128,0,128,.26) !important;
}
.gx-product-placeholder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.gx-product-placeholder-card {
position: relative;
display: flex;
flex-direction: column;
padding: 14px 14px 18px;
border-radius: 26px;
background: #fff;
border: 1px solid var(--brand-border);
box-shadow: var(--brand-shadow-soft);
}
.gx-product-badge {
position: absolute;
top: 24px;
left: 24px;
z-index: 2;
color: #fff;
background: var(--brand-purple);
border-radius: 999px;
padding: 7px 10px;
font-size: .72rem;
font-weight: 950;
}
.gx-product-badge--deal { color: #221900; background: var(--brand-yellow); }
.gx-product-placeholder-card__image {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
border-radius: 20px;
color: var(--brand-gray);
font-size: .78rem;
font-weight: 850;
letter-spacing: .10em;
text-transform: uppercase;
background: linear-gradient(145deg, #F8F7FB, #FFFFFF);
}
.gx-product-placeholder-card h3 { margin: 0 0 8px; color: var(--brand-black); font-size: 1rem; line-height: 1.35; font-weight: 950; }
.gx-product-placeholder-card p { margin: 0 0 12px; color: var(--brand-gray); font-size: .88rem; line-height: 1.6; }
.gx-product-placeholder-card strong { margin: auto 0 12px; color: var(--brand-purple); font-size: 1.1rem; font-weight: 950; }
.gx-product-placeholder-card a { min-height: 43px; display: inline-flex; align-items: center; padding: 10px 14px; }
/* Promo */
.gx-promo { padding: clamp(68px, 7vw, 104px) 0; background: var(--brand-white); }
.gx-promo__card {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr);
gap: clamp(26px, 5vw, 60px);
align-items: center;
position: relative;
overflow: hidden;
border-radius: 34px;
padding: clamp(30px, 5vw, 66px);
background:
radial-gradient(circle at 76% 28%, rgba(128,0,128,.28), transparent 30%),
linear-gradient(135deg, var(--brand-charcoal), var(--brand-graphite));
box-shadow: 0 28px 80px rgba(8,8,13,.25);
}
.gx-promo__card::before { content:''; position:absolute; top:0; left: clamp(30px, 5vw, 66px); width: 140px; height:4px; border-radius:999px; background: var(--brand-yellow); }
.gx-promo__copy { position: relative; z-index: 1; color: #fff; }
.gx-promo__copy h2 { margin: 12px 0 14px; color: #fff; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.05em; font-weight: 950; }
.gx-promo__copy p { max-width: 620px; color: rgba(248,247,251,.74); line-height: 1.78; margin: 0 0 26px; }
.gx-badge { color: #fff; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 9px 13px; }
.gx-badge::before { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-yellow); }
.gx-promo__visual {
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.72);
border-radius: 28px;
border: 1px solid rgba(255,255,255,.12);
background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
font-size: .82rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
/* Why + process */
.gx-why { background: var(--brand-offwhite); }
.gx-card-grid { display: grid; gap: 22px; }
.gx-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gx-info-card,
.gx-step-card,
.gx-review-card {
background: #fff;
border: 1px solid var(--brand-border);
border-radius: 20px;
padding: 20px;
box-shadow: var(--brand-shadow-soft);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gx-info-card:hover,
.gx-step-card:hover,
.gx-review-card:hover { transform: translateY(-5px); border-color: rgba(128,0,128,.24); box-shadow: 0 24px 60px rgba(8,8,13,.12); }
.gx-info-card__icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
color: #fff;
background: var(--brand-purple);
border-radius: 12px;
box-shadow: inset 0 -3px 0 rgba(255,196,57,.24);
font-weight: 900;
}
.gx-info-card h3,
.gx-step-card h3 { margin: 0 0 10px; color: var(--brand-black); font-size: 1.12rem; line-height: 1.32; font-weight: 950; }
.gx-info-card p,
.gx-step-card p { margin: 0; color: var(--brand-gray); font-size: .94rem; line-height: 1.7; }
.gx-process { background: #fff; }
.gx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; }
.gx-steps::before { content:''; position:absolute; left: 8%; right: 8%; top: 49px; height: 2px; background: linear-gradient(90deg, transparent, rgba(128,0,128,.22), rgba(255,196,57,.42), transparent); }
.gx-step-card { position: relative; z-index: 1; }
.gx-step-card > span {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #fff;
background: var(--brand-purple);
border: 4px solid #fff;
border-radius: 999px;
box-shadow: 0 12px 24px rgba(128,0,128,.22), 0 0 0 4px rgba(255,196,57,.16);
font-weight: 950;
}
/* Collections */
.gx-collections { background: var(--brand-offwhite); }
.gx-collection-grid { display: grid; grid-template-columns: 1.1fr .95fr .95fr; gap: 24px; }
.gx-collection-card {
position: relative;
min-height: 430px;
overflow: hidden;
border-radius: 30px;
background: var(--brand-charcoal);
box-shadow: 0 24px 62px rgba(8,8,13,.18);
}
.gx-collection-card:first-child { min-height: 480px; }
.gx-collection-card__image {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.54);
font-size: .8rem;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
background:
radial-gradient(circle at 66% 24%, rgba(255,196,57,.18), transparent 25%),
radial-gradient(circle at 35% 70%, rgba(128,0,128,.34), transparent 34%),
linear-gradient(145deg, #08080D, #1A1A24);
}
.gx-collection-card__content {
position: absolute;
inset: auto 22px 22px;
padding: 24px;
border-radius: 24px;
color: #fff;
background: rgba(8,8,13,.66);
border: 1px solid rgba(255,255,255,.11);
backdrop-filter: blur(14px);
}
.gx-collection-card__content span { display:inline-flex; color: var(--brand-yellow); font-size: .72rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.gx-collection-card h3 { margin: 10px 0 10px; color: #fff; font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 950; }
.gx-collection-card p { margin: 0 0 18px; color: rgba(255,255,255,.73); line-height: 1.65; }
.gx-collection-card a { display: inline-flex; gap: 8px; align-items: center; color: #fff !important; background: var(--brand-purple); border-radius: 14px; padding: 11px 14px; font-weight: 950; }
.gx-collection-card a:hover { background: var(--brand-purple-dark); transform: translateY(-2px); }
/* Stats */
.gx-stats {
padding: clamp(60px, 7vw, 96px) 0;
color: #fff;
background:
radial-gradient(circle at 24% 30%, rgba(128,0,128,.26), transparent 32%),
linear-gradient(135deg, #08080D, #111119 54%, #1A1A24);
}
.gx-stats .gx-kicker { color: rgba(255,255,255,.84); }
.gx-stats h2 { color: #fff; max-width: 660px; }
.gx-stats__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(26px, 5vw, 70px); align-items: center; }
.gx-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gx-stat-card { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 20px; color: #fff; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.11); }
.gx-stat-card strong { color: var(--brand-yellow); font-size: 1.1rem; }
.gx-stat-card span { font-weight: 900; line-height: 1.35; }
/* Reviews */
.gx-testimonials { background: var(--brand-offwhite); }
.gx-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gx-stars { color: var(--brand-yellow); letter-spacing: .08em; margin-bottom: 16px; }
.gx-review-card p { margin: 0 0 22px; color: var(--brand-graphite); font-size: 1rem; line-height: 1.75; }
.gx-review-card__buyer { display: flex; align-items: center; gap: 12px; color: var(--brand-black); font-size: .92rem; }
.gx-review-card__buyer span { width: 38px; height: 38px; border-radius: 999px; background: linear-gradient(135deg, var(--brand-purple), var(--brand-yellow)); }
/* Newsletter + final CTA + footer transition */
.gx-newsletter { padding: clamp(70px, 7vw, 108px) 0; background: #fff; }
.gx-newsletter__card {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(320px, .75fr);
gap: clamp(24px, 5vw, 62px);
align-items: center;
padding: clamp(28px, 5vw, 58px);
border-radius: 34px;
background:
radial-gradient(circle at 86% 20%, rgba(255,196,57,.18), transparent 22%),
linear-gradient(135deg, var(--brand-offwhite), #FFFFFF);
border: 1px solid var(--brand-border);
box-shadow: var(--brand-shadow);
}
.gx-newsletter__form {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
padding: 8px;
border-radius: 20px;
background: #fff;
border: 1px solid var(--brand-border);
box-shadow: 0 14px 34px rgba(8,8,13,.06);
}
.gx-newsletter__form input {
min-height: 52px;
border: 0;
outline: 0;
padding: 0 14px;
color: var(--brand-black);
background: transparent;
font-weight: 700;
}
.gx-newsletter__form button {
min-height: 52px;
padding: 0 20px;
border: 0;
border-radius: 15px;
color: #fff;
background: var(--brand-purple);
box-shadow: 0 12px 28px rgba(128,0,128,.22);
font-weight: 950;
}
.gx-newsletter__form button:hover { background: var(--brand-purple-dark); }
.gx-newsletter__form small { grid-column: 1 / -1; color: var(--brand-gray); padding: 0 12px 6px; font-size: .78rem; }
.gx-final-cta {
padding: clamp(74px, 8vw, 122px) 0;
color: #fff;
text-align: center;
background:
radial-gradient(circle at 50% 30%, rgba(128,0,128,.30), transparent 36%),
linear-gradient(135deg, #08080D, #111119);
}
.gx-final-cta__inner { max-width: 820px; }
.gx-final-cta h2 { color: #fff; }
.gx-final-cta p { color: rgba(255,255,255,.72); }
.gx-accent-line { display: block; width: 74px; height: 4px; border-radius: 999px; margin: 0 auto 18px; background: linear-gradient(90deg, var(--brand-yellow), var(--brand-purple)); }
.gx-footer-transition { padding: 32px 0; text-align: center; background: var(--brand-offwhite); border-top: 1px solid var(--brand-border); }
.gx-footer-transition p { margin: 0 0 6px; color: var(--brand-black); font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 950; letter-spacing: -.02em; }
.gx-footer-transition span { color: var(--brand-purple); font-size: .8rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
/* Responsive */
@media (max-width: 1180px) {
.gx-hero__wrap,
.gx-stats__inner { grid-template-columns: 1fr; }
.gx-device-stage { min-height: 460px; max-width: 720px; }
.gx-trust-grid,
.gx-card-grid--four,
.gx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gx-steps::before { display: none; }
.gx-woo-wrap ul.products,
.gx-product-placeholder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 960px) {
.gx-category-grid,
.gx-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gx-promo__card,
.gx-newsletter__card { grid-template-columns: 1fr; }
.gx-collection-grid { grid-template-columns: 1fr; }
.gx-collection-card,
.gx-collection-card:first-child { min-height: 390px; }
.gx-section-head--split { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
.gx-section { padding: 56px 0; }
.gx-hero { padding: 62px 0 64px; }
.gx-hero__wrap { gap: 32px; }
.gx-hero h1 { font-size: clamp(2.35rem, 13vw, 3.4rem); }
.gx-hero__actions,
.gx-hero__actions--center { flex-direction: column; align-items: stretch; }
.gx-btn { width: 100%; }
.gx-device-stage { min-height: 390px; border-radius: 26px; }
.gx-device-stage__label { left: 18px; right: 18px; bottom: 18px; flex-direction: column; align-items: flex-start; }
.gx-floating-chip--bottom { bottom: 106px; }
.gx-trust-grid,
.gx-category-grid,
.gx-card-grid--four,
.gx-steps,
.gx-review-grid,
.gx-stats-grid,
.gx-woo-wrap ul.products,
.gx-product-placeholder-grid { grid-template-columns: 1fr !important; }
.gx-trust-card,
.gx-info-card,
.gx-step-card,
.gx-review-card { border-radius: 22px; padding: 22px; }
.gx-category-card { grid-template-rows: 180px 1fr; border-radius: 24px; }
.gx-promo__card,
.gx-newsletter__card { border-radius: 26px; padding: 26px; }
.gx-newsletter__form { grid-template-columns: 1fr; }
.gx-newsletter__form button { width: 100%; }
.gx-section-head h2,
.gx-stats h2,
.gx-newsletter h2,
.gx-final-cta h2 { font-size: clamp(1.85rem, 10vw, 2.55rem); }
}
@media (max-width: 420px) {
.gx-hero__trust span { width: 100%; justify-content: flex-start; }
.gx-device-stage { min-height: 340px; }
.gx-floating-chip { display: none; }
.gx-promo__visual { min-height: 210px; }
}
/* Gadgenix 2026 homepage slider + image-led content sections */
.gx-hero-slider {
position: relative;
padding: clamp(28px, 4vw, 54px) 0 clamp(38px, 5vw, 70px);
background:
radial-gradient(circle at 8% 16%, rgba(128,0,128,.08), transparent 26%),
radial-gradient(circle at 86% 18%, rgba(255,196,57,.16), transparent 22%),
#F9F9F9;
overflow: hidden;
}
.gx-hero-slider__shell {
position: relative;
overflow: hidden;
border: 1px solid rgba(128,0,128,.10);
border-radius: clamp(24px, 3vw, 38px);
background: #fff;
box-shadow: 0 30px 90px rgba(8,8,13,.10);
}
.gx-hero-slider__track { position: relative; min-height: var(--gx-slider-height, 620px); }
.gx-hero-slide {
--gx-slide-bg-image: none;
position: absolute;
inset: 0;
display: grid;
grid-template-columns: minmax(0, .94fr) minmax(340px, .88fr);
gap: clamp(24px, 5vw, 70px);
align-items: center;
min-height: var(--gx-slider-height, 620px);
padding: clamp(34px, 5.5vw, 76px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(.985);
transition: opacity .55s ease, visibility .55s ease, transform .55s ease;
isolation: isolate;
background:
linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 44%, rgba(255,255,255,.42) 100%),
var(--gx-slide-bg-image),
linear-gradient(135deg, #FFFFFF, #F8F7FB 56%, #FFF6D8);
background-size: cover;
background-position: center;
}
.gx-hero-slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
position: relative;
}
.gx-hero-slide--placeholder {
background:
radial-gradient(circle at 74% 34%, rgba(255,196,57,.18), transparent 28%),
radial-gradient(circle at 84% 68%, rgba(128,0,128,.16), transparent 30%),
linear-gradient(135deg, #FFFFFF 0%, #F8F7FB 56%, #FFF6D8 100%);
}
.gx-hero-slide__overlay {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(90deg, rgba(128,0,128,.05), transparent 42%),
linear-gradient(rgba(8,8,13,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(8,8,13,.025) 1px, transparent 1px);
background-size: auto, 42px 42px, 42px 42px;
mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 72%, transparent 100%);
}
.gx-hero-slide__content {
position: relative;
z-index: 2;
max-width: 720px;
}
.gx-slider-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
color: var(--brand-purple);
font-size: var(--gx-slider-eyebrow-size, 13px);
line-height: 1;
font-weight: 950;
letter-spacing: .16em;
text-transform: uppercase;
}
.gx-slider-eyebrow span {
width: 42px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--brand-yellow), var(--brand-purple));
}
.gx-hero-slide h1 {
margin: 0;
max-width: 760px;
color: var(--brand-black);
font-family: var(--gx-heading-font, inherit);
font-size: clamp(2.35rem, 5.4vw, var(--gx-slider-title-size, 72px));
line-height: .98;
letter-spacing: -.065em;
font-weight: 950;
}
.gx-hero-slide__text {
margin: 22px 0 0;
max-width: 650px;
color: var(--brand-gray);
font-size: var(--gx-slider-text-size, 18px);
line-height: 1.82;
font-weight: 600;
}
.gx-hero-slide__actions,
.gx-hero-slide__actions--center {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 30px;
}
.gx-hero-slide__actions--center { justify-content: center; }
.gx-btn--light {
color: var(--brand-black) !important;
background: rgba(255,255,255,.72);
border-color: rgba(128,0,128,.18);
box-shadow: 0 12px 30px rgba(8,8,13,.08), inset 0 1px 0 rgba(255,255,255,.72);
}
.gx-btn--light:hover,
.gx-btn--light:focus {
transform: translateY(-2px);
color: var(--brand-black) !important;
border-color: rgba(255,196,57,.62);
box-shadow: 0 18px 42px rgba(8,8,13,.12), 0 0 0 4px rgba(255,196,57,.12);
}
.gx-slider-trust {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.gx-slider-trust span {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 8px 13px;
border: 1px solid rgba(128,0,128,.12);
border-radius: 999px;
color: var(--brand-black);
background: rgba(255,255,255,.74);
box-shadow: 0 10px 26px rgba(8,8,13,.055);
font-size: .82rem;
font-weight: 900;
}
.gx-slider-trust span::before {
content: '✓';
color: var(--brand-purple);
font-weight: 950;
}
.gx-hero-slide__visual { position: relative; z-index: 2; min-width: 0; }
.gx-hero-slide__image {
min-height: clamp(320px, 38vw, 500px);
border-radius: clamp(22px, 3vw, 34px);
border: 1px solid rgba(128,0,128,.13);
background:
radial-gradient(circle at 26% 28%, rgba(255,196,57,.18), transparent 32%),
radial-gradient(circle at 70% 70%, rgba(128,0,128,.18), transparent 34%),
rgba(255,255,255,.68);
box-shadow: 0 24px 70px rgba(8,8,13,.12), inset 0 1px 0 rgba(255,255,255,.75);
backdrop-filter: blur(12px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px;
text-align: center;
overflow: hidden;
}
.gx-hero-slide__image::before,
.gx-hero-slide__image::after {
content: '';
position: absolute;
border-radius: 28px;
border: 1px solid rgba(128,0,128,.13);
background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.24));
box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.gx-hero-slide__image::before {
width: 56%;
height: 38%;
right: 14%;
top: 22%;
}
.gx-hero-slide__image::after {
width: 24%;
height: 52%;
left: 14%;
top: 22%;
}
.gx-hero-slide__image strong,
.gx-hero-slide__image span {
position: relative;
z-index: 2;
display: block;
}
.gx-hero-slide__image strong {
color: var(--brand-black);
font-size: .86rem;
font-weight: 950;
letter-spacing: .14em;
text-transform: uppercase;
}
.gx-hero-slide__image span {
margin-top: 8px;
color: var(--brand-gray);
font-size: .88rem;
font-weight: 700;
}
.gx-hero-slider__nav {
position: absolute;
z-index: 5;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px;
border: 1px solid rgba(128,0,128,.10);
border-radius: 999px;
background: rgba(255,255,255,.78);
box-shadow: 0 14px 34px rgba(8,8,13,.10);
backdrop-filter: blur(12px);
}
.gx-hero-slider__arrow,
.gx-hero-slider__dots button {
appearance: none;
border: 0;
cursor: pointer;
transition: transform .2s ease, background .2s ease, color .2s ease, width .2s ease;
}
.gx-hero-slider__arrow {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--brand-black);
background: #fff;
font-size: 1.35rem;
line-height: 1;
box-shadow: 0 8px 18px rgba(8,8,13,.08);
}
.gx-hero-slider__arrow:hover { background: var(--brand-yellow); transform: translateY(-1px); }
.gx-hero-slider__dots { display: inline-flex; align-items: center; gap: 7px; padding: 0 4px; }
.gx-hero-slider__dots button {
width: 9px;
height: 9px;
border-radius: 999px;
background: rgba(128,0,128,.23);
padding: 0;
}
.gx-hero-slider__dots button.is-active { width: 28px; background: var(--brand-purple); box-shadow: 0 0 0 4px rgba(255,196,57,.16); }
.gx-about { background: #fff; }
.gx-about__grid,
.gx-why-modern__grid {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(320px, .88fr);
align-items: center;
gap: clamp(28px, 4vw, 56px);
}
.gx-about__copy p {
max-width: 720px;
margin: 0 0 22px;
color: var(--brand-gray);
font-size: clamp(1rem, 1.25vw, 1.12rem);
line-height: 1.82;
}
.gx-about__points {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 24px;
}
.gx-about__points span {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 8px 13px;
border-radius: 999px;
color: var(--brand-black);
background: var(--brand-yellow-soft);
border: 1px solid rgba(255,196,57,.36);
font-size: .84rem;
font-weight: 900;
}
.gx-about__points span:nth-child(2n) {
color: var(--brand-purple);
background: var(--brand-purple-pale);
border-color: rgba(128,0,128,.12);
}
.gx-about__media,
.gx-why-modern__media {
min-height: 520px;
position: relative;
border-radius: 34px;
overflow: hidden;
background:
radial-gradient(circle at 26% 24%, rgba(255,196,57,.20), transparent 28%),
radial-gradient(circle at 70% 70%, rgba(128,0,128,.18), transparent 34%),
linear-gradient(135deg, #FFFFFF, #F8F7FB);
background-size: cover;
background-position: center;
border: 1px solid rgba(128,0,128,.12);
box-shadow: 0 26px 70px rgba(8,8,13,.11);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 28px;
}
.gx-about__media::after,
.gx-why-modern__media::after {
content: none;
}
.gx-image-placeholder strong,
.gx-image-placeholder span {
position: relative;
z-index: 2;
display: block;
}
.gx-image-placeholder strong {
color: var(--brand-black);
font-weight: 950;
letter-spacing: .14em;
text-transform: uppercase;
}
.gx-image-placeholder span {
margin-top: 8px;
color: var(--brand-gray);
font-weight: 700;
}
.gx-why-modern { background: var(--brand-offwhite); }
.gx-why-modern__grid { grid-template-columns: minmax(340px, .78fr) minmax(0, 1fr); }
.gx-why-modern__content .gx-section-head { margin-left: 0; margin-right: 0; text-align: left; }
.gx-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gx-why-modern .gx-info-card { padding: 22px; }
.gx-why-modern .gx-info-card__icon { width: 38px; height: 38px; margin-bottom: 12px; }
.gx-woo-wrap .lx-info-box {
max-width: 720px;
margin-left: auto !important;
margin-right: auto !important;
border: 1px solid rgba(128,0,128,.12);
border-radius: 24px;
background: #fff;
box-shadow: 0 18px 46px rgba(8,8,13,.08);
}
@media (max-width: 1100px) {
.gx-hero-slide,
.gx-about__grid,
.gx-why-modern__grid { grid-template-columns: 1fr; }
.gx-hero-slide__content { max-width: 820px; }
.gx-hero-slide__visual { order: -1; }
.gx-hero-slide__image { min-height: 300px; }
.gx-about__media,
.gx-why-modern__media { min-height: 420px; }
}
@media (max-width: 760px) {
.gx-hero-slider { padding-top: 18px; }
.gx-hero-slider__shell { border-radius: 24px; }
.gx-hero-slider__track,
.gx-hero-slide { min-height: auto; }
.gx-hero-slide { padding: 28px 22px 86px; }
.gx-hero-slide h1 { font-size: clamp(2.15rem, 10.5vw, 3.35rem); letter-spacing: -.055em; }
.gx-hero-slide__text { font-size: 1rem; line-height: 1.72; }
.gx-hero-slide__actions,
.gx-hero-slide__actions--center { flex-direction: column; align-items: stretch; }
.gx-slider-trust span { width: 100%; justify-content: center; }
.gx-hero-slide__image { min-height: 250px; border-radius: 22px; }
.gx-hero-slider__nav { bottom: 18px; }
.gx-about__media,
.gx-why-modern__media { min-height: 320px; border-radius: 26px; }
.gx-card-grid--two { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
.gx-hero-slide { padding-left: 18px; padding-right: 18px; }
.gx-slider-eyebrow { letter-spacing: .11em; font-size: .72rem; }
.gx-slider-eyebrow span { width: 28px; }
.gx-hero-slider__arrow { width: 30px; height: 30px; }
}
/* ============================================================
GADGENIX FINAL POLISH — REAL ICONS, PURPLE DOTS, CLEANER HOME SPACING
Adds SVG icon treatment and increases side breathing-room on homepage
sections except the slider. Color controls remain active via Customizer.
============================================================ */
.lx-topbar__item svg,
.lx-topbar__right svg,
.lx-topbar__left svg,
.lx-footer__company-meta svg,
.lx-promo-strip__item svg,
.lx-all-depts-menu__icon svg,
.gx-icon svg,
.gx-info-card__icon svg,
.gx-category-card__svg svg,
.gx-stat-card strong svg {
display: block !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.lx-topbar__item svg,
.lx-topbar__right svg,
.lx-topbar__left svg {
width: 15px !important;
height: 15px !important;
color: var(--gx-action-yellow) !important;
filter: drop-shadow(0 0 8px rgba(255,196,57,.20));
}
.lx-footer__company-meta {
align-items: flex-start !important;
gap: 10px !important;
}
.lx-footer__company-meta svg {
width: 16px !important;
height: 16px !important;
padding: 2px !important;
color: var(--gx-purple-main) !important;
background: rgba(128,0,128,.08) !important;
border-radius: 7px !important;
flex: 0 0 auto !important;
margin-top: 2px !important;
}
.lx-footer__company-meta a:hover svg { color: var(--gx-purple-deep) !important; }
.lx-promo-strip__item svg {
color: var(--gx-purple-main) !important;
}
.lx-all-depts-menu__icon {
width: 34px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--gx-purple-main) !important;
background: rgba(128,0,128,.075) !important;
border: 1px solid rgba(128,0,128,.12) !important;
border-radius: 12px !important;
font-size: 0 !important;
}
.lx-all-depts-menu__icon svg {
width: 18px !important;
height: 18px !important;
}
.gx-icon,
.gx-info-card__icon,
.gx-stat-card strong {
font-size: 0 !important;
}
.gx-icon svg,
.gx-info-card__icon svg,
.gx-stat-card strong svg {
width: 20px !important;
height: 20px !important;
}
.gx-category-card__svg {
width: 68px !important;
height: 68px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 22px !important;
color: var(--brand-purple) !important;
background: rgba(128,0,128,.075) !important;
border: 1px solid rgba(128,0,128,.13) !important;
box-shadow: 0 8px 20px rgba(128,0,128,.08), inset 0 -3px 0 rgba(255,196,57,.16) !important;
filter: none !important;
}
.gx-category-card__svg svg {
width: 28px !important;
height: 28px !important;
}
/* Purple dots/mini separators instead of yellow bullets. */
.lx-footer__links a::before,
.lx-footer__bottom-links a::after {
background: var(--gx-purple-main) !important;
color: var(--gx-purple-main) !important;
box-shadow: 0 0 0 3px rgba(128,0,128,.08) !important;
}
.lx-footer__col-title::after {
background: linear-gradient(90deg, var(--gx-purple-main), var(--gx-purple-soft)) !important;
}
.lx-nav-link::after {
background: linear-gradient(90deg, var(--gx-purple-main), var(--gx-purple-soft)) !important;
}
.gx-hero-slider__dots button.is-active {
box-shadow: 0 0 0 4px rgba(128,0,128,.13) !important;
}
/* Homepage spacing: slider stays wide; other sections gain left/right breathing room. */
html body.home .gx-home > section:not(.gx-hero-slider) > .lx-container,
html body.front-page .gx-home > section:not(.gx-hero-slider) > .lx-container,
html body .gx-home > section:not(.gx-hero-slider) > .lx-container {
width: min(100% - 200px, 1040px) !important;
max-width: 1040px !important;
}
html body.home .gx-products-section > .lx-container,
html body.front-page .gx-products-section > .lx-container,
html body .gx-products-section > .lx-container {
width: min(100% - 200px, 1060px) !important;
max-width: 1060px !important;
}
.gx-trust-strip {
padding: clamp(36px, 4.6vw, 58px) 0 !important;
}
.gx-trust-card,
.gx-category-card,
.gx-info-card,
.gx-step-card,
.gx-newsletter__card,
.gx-home ul.products li.product {
border-color: rgba(128,0,128,.10) !important;
box-shadow: 0 18px 48px rgba(8,8,13,.065) !important;
}
.gx-trust-card:hover,
.gx-category-card:hover,
.gx-info-card:hover,
.gx-step-card:hover,
.gx-home ul.products li.product:hover {
border-color: rgba(128,0,128,.22) !important;
box-shadow: 0 24px 58px rgba(8,8,13,.10) !important;
}
.gx-section-head--center {
max-width: 700px !important;
}
.gx-section-head h2,
.gx-stats h2,
.gx-newsletter h2,
.gx-final-cta h2 {
letter-spacing: -.052em !important;
}
.gx-about__grid,
.gx-why-modern__grid {
gap: clamp(28px, 4vw, 56px) !important;
}
.gx-about__media,
.gx-why-modern__media,
.gx-promo__card,
.gx-newsletter__card {
box-shadow: 0 26px 72px rgba(8,8,13,.09) !important;
}
/* Keep search and All Categories buttons controlled from Customizer. */
.lx-search__btn,
.lx-mobile-drawer__search button {
background: var(--gx-action-yellow) !important;
}
.lx-all-depts-btn,
.lx-all-depts-btn:hover,
.lx-all-depts.is-open .lx-all-depts-btn,
.lx-all-depts:focus-within .lx-all-depts-btn {
background: #800080 !important;
}
@media (max-width: 1100px) {
html body.home .gx-home > section:not(.gx-hero-slider) > .lx-container,
html body.front-page .gx-home > section:not(.gx-hero-slider) > .lx-container,
html body .gx-home > section:not(.gx-hero-slider) > .lx-container,
html body.home .gx-products-section > .lx-container,
html body.front-page .gx-products-section > .lx-container,
html body .gx-products-section > .lx-container {
width: min(100% - 120px, 880px) !important;
max-width: 880px !important;
}
}
@media (max-width: 760px) {
html body.home .gx-home > section:not(.gx-hero-slider) > .lx-container,
html body.front-page .gx-home > section:not(.gx-hero-slider) > .lx-container,
html body .gx-home > section:not(.gx-hero-slider) > .lx-container,
html body.home .gx-products-section > .lx-container,
html body.front-page .gx-products-section > .lx-container,
html body .gx-products-section > .lx-container {
width: min(100% - 28px, 100%) !important;
max-width: 100% !important;
}
.gx-category-card__svg {
width: 70px !important;
height: 70px !important;
border-radius: 22px !important;
}
.gx-category-card__svg svg {
width: 32px !important;
height: 32px !important;
}
}
/* ============================================================
GADGENIX ICON FIX — NO DOTS, REAL CONTACT ICONS
This final override removes the circular-dot treatment from the
footer contact rows and forces location/phone/hours/email SVGs
to render as clear line icons.
============================================================ */
.lx-footer__company-meta {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
}
.lx-footer__company-meta .lx-contact-icon {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 2px !important;
color: var(--gx-purple-main, #800080) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.lx-footer__company-meta .lx-contact-icon svg,
.lx-footer__company-meta > svg,
.lx-topbar__item svg,
.lx-topbar__right svg,
.lx-topbar__left svg {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2.25 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
color: var(--gx-purple-main, #800080) !important;
opacity: 1 !important;
overflow: visible !important;
filter: none !important;
}
.lx-footer__company-meta .lx-contact-icon svg *,
.lx-footer__company-meta > svg *,
.lx-topbar__item svg *,
.lx-topbar__right svg *,
.lx-topbar__left svg * {
fill: none !important;
stroke: currentColor !important;
stroke-width: 2.25 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
vector-effect: non-scaling-stroke !important;
}
.lx-topbar__item svg,
.lx-topbar__right svg,
.lx-topbar__left svg {
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
color: var(--gx-action-yellow, #FFC439) !important;
}
.lx-footer__company-meta--address .lx-contact-icon { color: var(--gx-purple-main, #800080) !important; }
.lx-footer__company-meta--phone .lx-contact-icon { color: var(--gx-purple-main, #800080) !important; }
.lx-footer__company-meta--hours .lx-contact-icon { color: var(--gx-purple-main, #800080) !important; }
.lx-footer__company-meta--email .lx-contact-icon { color: var(--gx-purple-main, #800080) !important; }
.lx-footer__company-meta a {
display: inline-flex !important;
align-items: center !important;
}
/* ============================================================
GADGENIX CUSTOMER POLICY / GMC-READY PAGES
Clean, trustworthy customer-facing pages with clear policies.
============================================================ */
:root {
--gx-policy-purple: var(--gx-purple-main, #800080);
--gx-policy-yellow: var(--gx-action-yellow, #FFC439);
--gx-policy-black: #08080D;
--gx-policy-charcoal: #111119;
--gx-policy-graphite: #1A1A24;
--gx-policy-gray: #6B6F7A;
--gx-policy-border: #E7E7EE;
--gx-policy-offwhite: #F8F7FB;
--gx-policy-white: #FFFFFF;
}
html body .gx-gmc-page {
background:
radial-gradient(circle at top left, rgba(128,0,128,.07), transparent 34%),
linear-gradient(180deg, #fff 0%, var(--gx-policy-offwhite) 58%, #fff 100%);
color: var(--gx-policy-graphite);
}
html body .gx-gmc-hero {
position: relative;
overflow: hidden;
padding: clamp(54px, 7vw, 96px) 0 clamp(34px, 5vw, 68px);
background:
linear-gradient(135deg, #ffffff 0%, #fbf8ff 54%, #fff8df 100%);
border-bottom: 1px solid rgba(128,0,128,.10);
}
html body .gx-gmc-hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(128,0,128,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(128,0,128,.035) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
html body .gx-gmc-hero .lx-container,
html body .gx-gmc-content .lx-container {
position: relative;
z-index: 1;
}
html body .gx-gmc-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, .58fr);
gap: clamp(24px, 5vw, 72px);
align-items: center;
}
html body .gx-gmc-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
color: var(--gx-policy-purple);
font-size: clamp(11px, 1vw, 13px);
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
}
html body .gx-gmc-kicker span {
width: 34px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--gx-policy-yellow), var(--gx-policy-purple));
}
html body .gx-gmc-hero__copy h1 {
max-width: 860px;
margin: 0 0 18px;
color: var(--gx-policy-black);
font-size: clamp(2.35rem, 5.5vw, 5.4rem);
line-height: .95;
letter-spacing: -.06em;
font-weight: 900;
}
html body .gx-gmc-hero__copy p {
max-width: 790px;
color: var(--gx-policy-gray);
font-size: clamp(1rem, 1.7vw, 1.2rem);
line-height: 1.8;
margin: 0;
}
html body .gx-gmc-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
html body .gx-gmc-hero__meta span {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 8px 13px;
border: 1px solid rgba(128,0,128,.12);
border-radius: 999px;
background: rgba(255,255,255,.78);
color: var(--gx-policy-graphite);
font-size: .82rem;
font-weight: 800;
box-shadow: 0 10px 26px rgba(17,17,25,.06);
}
html body .gx-gmc-hero__panel {
position: relative;
min-height: 330px;
padding: clamp(26px, 4vw, 38px);
border: 1px solid rgba(128,0,128,.14);
border-radius: 34px;
background:
linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
radial-gradient(circle at top right, rgba(255,196,57,.22), transparent 38%),
radial-gradient(circle at bottom left, rgba(128,0,128,.18), transparent 42%);
box-shadow: 0 24px 70px rgba(17,17,25,.12);
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
html body .gx-gmc-hero__panel::before,
html body .gx-gmc-hero__panel::after {
content: '';
position: absolute;
border: 1px solid rgba(128,0,128,.12);
border-radius: 28px;
pointer-events: none;
}
html body .gx-gmc-hero__panel::before {
width: 56%;
height: 44%;
top: 34px;
right: 34px;
background: rgba(255,255,255,.45);
}
html body .gx-gmc-hero__panel::after {
width: 42%;
height: 30%;
left: 34px;
top: 92px;
background: rgba(128,0,128,.05);
}
html body .gx-gmc-hero__icon {
position: relative;
z-index: 1;
width: 68px;
height: 68px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 22px;
color: var(--gx-policy-purple);
background: #fff;
border: 1px solid rgba(128,0,128,.16);
box-shadow: 0 18px 36px rgba(128,0,128,.12);
margin-bottom: 20px;
}
html body .gx-gmc-hero__icon svg,
html body .gx-gmc-highlight__icon svg,
html body .gx-gmc-contact-card__icon svg,
html body .gx-gmc-card__head > span svg {
width: 26px;
height: 26px;
}
html body .gx-gmc-hero__panel strong {
position: relative;
z-index: 1;
display: block;
margin-bottom: 10px;
color: var(--gx-policy-black);
font-size: 1.05rem;
font-weight: 900;
letter-spacing: -.01em;
}
html body .gx-gmc-hero__panel p,
html body .gx-gmc-hero__panel a {
position: relative;
z-index: 1;
margin: 3px 0;
color: var(--gx-policy-gray);
font-size: .94rem;
line-height: 1.65;
font-weight: 700;
}
html body .gx-gmc-hero__panel a:hover { color: var(--gx-policy-purple); }
html body .gx-gmc-content {
padding: clamp(42px, 6vw, 84px) 0 clamp(58px, 7vw, 104px);
}
html body .gx-gmc-highlights {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-bottom: 30px;
}
html body .gx-gmc-highlight,
html body .gx-gmc-contact-card,
html body .gx-gmc-card,
html body .gx-gmc-faq,
html body .gx-gmc-cta {
border: 1px solid rgba(128,0,128,.10);
background: rgba(255,255,255,.92);
box-shadow: 0 18px 46px rgba(17,17,25,.07);
}
html body .gx-gmc-highlight {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 22px;
border-radius: 24px;
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
html body .gx-gmc-highlight:hover {
transform: translateY(-4px);
border-color: rgba(128,0,128,.26);
box-shadow: 0 22px 56px rgba(128,0,128,.11);
}
html body .gx-gmc-highlight__icon,
html body .gx-gmc-contact-card__icon,
html body .gx-gmc-card__head > span {
flex: 0 0 auto;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
color: var(--gx-policy-purple);
background: #fbf0ff;
border: 1px solid rgba(128,0,128,.12);
}
html body .gx-gmc-highlight h2 {
margin: 1px 0 6px;
color: var(--gx-policy-black);
font-size: 1rem;
line-height: 1.25;
font-weight: 900;
letter-spacing: -.02em;
}
html body .gx-gmc-highlight p {
margin: 0;
color: var(--gx-policy-gray);
font-size: .91rem;
line-height: 1.65;
}
html body .gx-gmc-contact-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 0 0 28px;
}
html body .gx-gmc-contact-card {
display: flex;
flex-direction: column;
gap: 7px;
padding: 24px;
border-radius: 26px;
}
html body .gx-gmc-contact-card strong {
color: var(--gx-policy-black);
font-size: 1rem;
font-weight: 900;
}
html body .gx-gmc-contact-card span:not(.gx-gmc-contact-card__icon),
html body .gx-gmc-contact-card a {
color: var(--gx-policy-gray);
font-size: .94rem;
line-height: 1.6;
font-weight: 700;
}
html body .gx-gmc-contact-card a:hover { color: var(--gx-policy-purple); }
html body .gx-gmc-sections {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
html body .gx-gmc-card,
html body .gx-gmc-faq,
html body .gx-gmc-cta {
border-radius: 28px;
}
html body .gx-gmc-card {
padding: clamp(24px, 3vw, 34px);
}
html body .gx-gmc-card--form,
html body .gx-gmc-card--tracking,
html body .gx-gmc-card:nth-child(1) {
grid-column: 1 / -1;
}
html body .gx-gmc-card__head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
}
html body .gx-gmc-card__head h2,
html body .gx-gmc-card__head div h2 {
margin: 0;
color: var(--gx-policy-black);
font-size: clamp(1.28rem, 2vw, 1.72rem);
line-height: 1.12;
font-weight: 900;
letter-spacing: -.035em;
}
html body .gx-gmc-card__head div p {
margin: 6px 0 0;
color: var(--gx-policy-gray);
font-size: .96rem;
}
html body .gx-gmc-card p {
margin: 0 0 14px;
color: var(--gx-policy-gray);
font-size: .98rem;
line-height: 1.85;
}
html body .gx-gmc-card p:last-child { margin-bottom: 0; }
html body .gx-gmc-list {
display: grid;
gap: 11px;
margin: 16px 0 0;
padding: 0;
list-style: none;
}
html body .gx-gmc-list li {
display: grid;
grid-template-columns: 14px 1fr;
gap: 11px;
align-items: start;
color: var(--gx-policy-graphite);
font-size: .97rem;
line-height: 1.68;
font-weight: 650;
}
html body .gx-gmc-list li span {
width: 9px;
height: 9px;
margin-top: .55em;
border-radius: 999px;
background: var(--gx-policy-purple);
box-shadow: 0 0 0 5px rgba(128,0,128,.08);
}
html body .gx-gmc-faqs {
display: grid;
gap: 14px;
margin-bottom: 28px;
}
html body .gx-gmc-faq {
overflow: hidden;
}
html body .gx-gmc-faq summary {
list-style: none;
cursor: pointer;
position: relative;
padding: 22px 60px 22px 26px;
color: var(--gx-policy-black);
font-size: 1rem;
font-weight: 900;
}
html body .gx-gmc-faq summary::-webkit-details-marker { display: none; }
html body .gx-gmc-faq summary::after {
content: '+';
position: absolute;
top: 50%;
right: 22px;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--gx-policy-purple);
color: #fff;
font-size: 20px;
line-height: 1;
}
html body .gx-gmc-faq[open] summary::after { content: '–'; background: var(--gx-policy-yellow); color: #111119; }
html body .gx-gmc-faq div {
padding: 0 26px 24px;
}
html body .gx-gmc-faq p {
margin: 0;
color: var(--gx-policy-gray);
font-size: .98rem;
line-height: 1.8;
}
html body .gx-gmc-card--form form,
html body .gx-gmc-card--tracking form,
html body .gx-gmc-page .woocommerce-form-track-order {
display: grid;
gap: 16px;
}
html body .gx-gmc-card--form input,
html body .gx-gmc-card--form textarea,
html body .gx-gmc-card--tracking input,
html body .gx-gmc-page .woocommerce-form-track-order input {
width: 100%;
border: 1px solid rgba(128,0,128,.16);
border-radius: 16px;
background: #fff;
color: var(--gx-policy-black);
padding: 14px 16px;
outline: none;
box-shadow: 0 8px 20px rgba(17,17,25,.04);
}
html body .gx-gmc-card--form input:focus,
html body .gx-gmc-card--form textarea:focus,
html body .gx-gmc-card--tracking input:focus,
html body .gx-gmc-page .woocommerce-form-track-order input:focus {
border-color: var(--gx-policy-purple);
box-shadow: 0 0 0 4px rgba(128,0,128,.10);
}
html body .gx-gmc-card--form button,
html body .gx-gmc-card--tracking button,
html body .gx-gmc-page .woocommerce-form-track-order button {
width: fit-content;
border: 0;
border-radius: 16px;
padding: 13px 22px;
background: var(--gx-policy-purple);
color: #fff;
font-weight: 900;
transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
html body .gx-gmc-card--form button:hover,
html body .gx-gmc-card--tracking button:hover,
html body .gx-gmc-page .woocommerce-form-track-order button:hover {
transform: translateY(-2px);
background: #650065;
box-shadow: 0 14px 30px rgba(128,0,128,.24);
}
html body .gx-gmc-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
margin-top: 30px;
padding: clamp(28px, 4vw, 42px);
background:
radial-gradient(circle at 92% 20%, rgba(255,196,57,.20), transparent 28%),
linear-gradient(135deg, #0b0b12 0%, #171624 100%);
color: #fff;
border-color: rgba(255,255,255,.10);
box-shadow: 0 28px 80px rgba(8,8,13,.22);
}
html body .gx-gmc-cta .gx-gmc-kicker { color: #fff; margin-bottom: 12px; }
html body .gx-gmc-cta h2 {
margin: 0 0 10px;
color: #fff;
font-size: clamp(1.45rem, 3vw, 2.4rem);
line-height: 1.06;
letter-spacing: -.045em;
}
html body .gx-gmc-cta p {
max-width: 760px;
margin: 0;
color: rgba(255,255,255,.72);
font-size: .98rem;
line-height: 1.75;
}
html body .gx-gmc-cta__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
html body .gx-gmc-cta .lx-btn--primary {
background: var(--gx-policy-yellow) !important;
border-color: var(--gx-policy-yellow) !important;
color: #111119 !important;
box-shadow: 0 12px 28px rgba(255,196,57,.18);
}
html body .gx-gmc-cta .lx-btn--outline {
color: #fff !important;
border-color: rgba(255,255,255,.28) !important;
background: rgba(255,255,255,.05) !important;
}
html body .gx-gmc-cta .lx-btn--outline:hover {
border-color: var(--gx-policy-yellow) !important;
color: var(--gx-policy-yellow) !important;
}
@media (max-width: 1100px) {
html body .gx-gmc-hero__grid,
html body .gx-gmc-cta {
grid-template-columns: 1fr;
}
html body .gx-gmc-hero__panel { min-height: 260px; }
html body .gx-gmc-cta__actions { justify-content: flex-start; }
html body .gx-gmc-highlights,
html body .gx-gmc-contact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
html body .gx-gmc-hero { padding: 40px 0 32px; }
html body .gx-gmc-hero__copy h1 { font-size: clamp(2.15rem, 12vw, 3.2rem); }
html body .gx-gmc-hero__panel { border-radius: 24px; min-height: 230px; }
html body .gx-gmc-highlights,
html body .gx-gmc-contact-grid,
html body .gx-gmc-sections {
grid-template-columns: 1fr;
}
html body .gx-gmc-card,
html body .gx-gmc-highlight,
html body .gx-gmc-contact-card,
html body .gx-gmc-cta { border-radius: 22px; }
html body .gx-gmc-card__head { align-items: flex-start; }
html body .gx-gmc-cta__actions .lx-btn { width: 100%; justify-content: center; }
}
/* ============================================================
GADGENIX FOOTER BRAND COLUMN CLEANUP — v2.4.1
Request: remove extra logo/content boxes inside footer; keep only main footer card
and newsletter card while preserving all brand/business content.
============================================================ */
html body .lx-footer__brand {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 6px 4px 0 !important;
}
html body .lx-footer__brand .lx-brand {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
html body .lx-footer__about {
margin-top: 20px !important;
}
html body .lx-footer__company {
background: transparent !important;
border: 0 !important;
border-top: 1px solid rgba(231,231,238,.95) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 18px 0 0 !important;
margin-top: 18px !important;
}
html body .lx-footer__company-name {
margin-bottom: 12px !important;
}
html body .lx-footer__company-meta {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body .lx-footer__company-meta + .lx-footer__company-meta {
margin-top: 10px !important;
}
html body .lx-footer__company-meta .lx-contact-icon {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body .lx-footer__company-meta .lx-contact-icon svg {
width: 17px !important;
height: 17px !important;
}
@media (max-width: 768px) {
html body .lx-footer__brand {
padding: 4px 0 18px !important;
margin-bottom: 0 !important;
}
html body .lx-footer__company {
padding-top: 16px !important;
margin-top: 16px !important;
}
}
/* ============================================================
HOMEPAGE LIGHT SECTION REFINEMENT — v2.1.49
Request: replace black homepage boxes with light premium surfaces.
============================================================ */
.gx-promo__card {
background:
radial-gradient(circle at 84% 18%, rgba(255,196,57,.18), transparent 22%),
radial-gradient(circle at 24% 74%, rgba(128,0,128,.10), transparent 26%),
linear-gradient(135deg, #FFFFFF 0%, #FCFBF7 50%, #F8F7FB 100%) !important;
border: 1px solid var(--brand-border) !important;
box-shadow: 0 24px 62px rgba(8,8,13,.10) !important;
}
.gx-promo__copy,
.gx-promo__copy h2 {
color: var(--brand-black) !important;
}
.gx-promo__copy p {
color: var(--brand-gray) !important;
}
.gx-badge {
color: var(--brand-purple) !important;
background: rgba(128,0,128,.06) !important;
border: 1px solid rgba(128,0,128,.14) !important;
}
.gx-badge::before { background: var(--brand-yellow) !important; }
.gx-promo__visual {
color: var(--brand-gray) !important;
border: 1px solid rgba(231,216,244,.6) !important;
background:
radial-gradient(circle at 72% 28%, rgba(255,196,57,.16), transparent 24%),
radial-gradient(circle at 32% 72%, rgba(128,0,128,.12), transparent 30%),
linear-gradient(145deg, #FFFFFF, #F8F7FB) !important;
}
.gx-collection-card {
background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF7 100%) !important;
border: 1px solid var(--brand-border) !important;
box-shadow: 0 24px 62px rgba(8,8,13,.10) !important;
}
.gx-collection-card__image {
color: var(--brand-purple) !important;
background:
radial-gradient(circle at 66% 24%, rgba(255,196,57,.18), transparent 25%),
radial-gradient(circle at 35% 70%, rgba(128,0,128,.16), transparent 34%),
linear-gradient(145deg, #F8F7FB, #FFFFFF) !important;
}
.gx-collection-card__content {
color: var(--brand-graphite) !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 16px 34px rgba(8,8,13,.08) !important;
backdrop-filter: blur(10px) !important;
}
.gx-collection-card__content span { color: var(--brand-purple) !important; }
.gx-collection-card h3 { color: var(--brand-black) !important; }
.gx-collection-card p { color: var(--brand-gray) !important; }
.gx-collection-card a {
color: #fff !important;
background: var(--brand-purple) !important;
}
.gx-collection-card a:hover { background: var(--brand-purple-dark) !important; }
.gx-stats {
color: var(--brand-graphite) !important;
background:
radial-gradient(circle at 18% 22%, rgba(128,0,128,.08), transparent 28%),
radial-gradient(circle at 84% 16%, rgba(255,196,57,.15), transparent 22%),
linear-gradient(180deg, #F8F7FB 0%, #FFFFFF 100%) !important;
border-top: 1px solid rgba(231,231,238,.9) !important;
border-bottom: 1px solid rgba(231,231,238,.9) !important;
}
.gx-stats .gx-kicker { color: var(--brand-purple) !important; }
.gx-stats h2 { color: var(--brand-black) !important; }
.gx-stat-card {
color: var(--brand-graphite) !important;
background: #FFFFFF !important;
border: 1px solid var(--brand-border) !important;
box-shadow: 0 14px 34px rgba(8,8,13,.07) !important;
}
.gx-stat-card strong,
.gx-stat-card strong svg {
color: var(--brand-purple) !important;
}
.gx-stat-card span { color: var(--brand-black) !important; }
.gx-final-cta {
color: var(--brand-graphite) !important;
background:
radial-gradient(circle at 50% 0%, rgba(255,196,57,.14), transparent 28%),
linear-gradient(180deg, #FFFFFF 0%, #F8F7FB 100%) !important;
}
.gx-final-cta__inner {
background:
radial-gradient(circle at 82% 18%, rgba(255,196,57,.14), transparent 24%),
radial-gradient(circle at 18% 78%, rgba(128,0,128,.08), transparent 24%),
linear-gradient(135deg, #FFFFFF 0%, #FCFBF7 100%) !important;
border: 1px solid var(--brand-border) !important;
border-radius: 34px !important;
box-shadow: 0 24px 62px rgba(8,8,13,.09) !important;
padding: clamp(30px, 5vw, 64px) !important;
}
.gx-final-cta h2 { color: var(--brand-black) !important; }
.gx-final-cta p { color: var(--brand-gray) !important; }
.gx-final-cta .gx-btn--ghost {
color: var(--brand-purple) !important;
border-color: rgba(128,0,128,.18) !important;
background: #FFFFFF !important;
box-shadow: 0 12px 26px rgba(8,8,13,.06) !important;
}
.gx-final-cta .gx-btn--ghost:hover,
.gx-final-cta .gx-btn--ghost:focus {
color: var(--brand-purple-dark) !important;
border-color: rgba(255,196,57,.45) !important;
background: var(--brand-yellow-soft) !important;
}
/* ============================================================
GADGENIX FINAL HOMEPAGE FIX — categories + light slider polish
Removes dark homepage boxes, removes slider empty box, uses real category images.
============================================================ */
/* Slider: remove right placeholder box and make slide more professional/light */
.gx-hero-slide {
display: flex !important;
align-items: center !important;
min-height: clamp(430px, 52vw, 650px) !important;
padding: clamp(42px, 6vw, 86px) clamp(24px, 5vw, 76px) !important;
background:
linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 40%, rgba(255,255,255,.48) 70%, rgba(255,255,255,.18) 100%),
var(--gx-slide-bg-image, linear-gradient(135deg, #FFFFFF 0%, #F8F7FB 100%)) !important;
background-size: cover !important;
background-position: center center !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 24px 70px rgba(8,8,13,.08) !important;
}
.gx-hero-slide__overlay {
display: none !important;
}
.gx-hero-slide__visual,
.gx-hero-slide__image {
display: none !important;
}
.gx-hero-slide__content {
width: min(680px, 100%) !important;
max-width: 680px !important;
position: relative !important;
z-index: 2 !important;
padding: clamp(20px, 3vw, 34px) !important;
border-radius: 28px !important;
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(255,255,255,.70) !important;
box-shadow: 0 18px 54px rgba(8,8,13,.075) !important;
backdrop-filter: blur(10px) !important;
}
.gx-hero-slide h1,
.gx-hero-slide__content h1 {
color: var(--brand-black) !important;
text-shadow: none !important;
}
.gx-slider-eyebrow,
.gx-hero-slide__text {
color: var(--brand-gray) !important;
}
.gx-slider-eyebrow {
color: var(--brand-purple) !important;
}
.gx-slider-eyebrow span {
background: var(--brand-yellow) !important;
}
.gx-hero-slide__actions .gx-btn--light {
background: #FFFFFF !important;
color: var(--brand-purple) !important;
border-color: rgba(128,0,128,.18) !important;
box-shadow: 0 12px 26px rgba(8,8,13,.06) !important;
}
.gx-slider-trust span {
color: var(--brand-black) !important;
background: #FFFFFF !important;
border-color: rgba(128,0,128,.12) !important;
box-shadow: 0 10px 24px rgba(8,8,13,.05) !important;
}
.gx-slider-trust span::before {
color: var(--brand-purple) !important;
}
/* No black boxes on homepage */
.gx-home .gx-promo__card,
.gx-home .gx-collection-card,
.gx-home .gx-stats,
.gx-home .gx-final-cta,
.gx-home .gx-final-cta__inner {
background-color: #FFFFFF !important;
}
.gx-home .gx-promo__card {
background:
radial-gradient(circle at 84% 18%, rgba(255,196,57,.16), transparent 24%),
radial-gradient(circle at 20% 74%, rgba(128,0,128,.09), transparent 28%),
linear-gradient(135deg, #FFFFFF, #F8F7FB) !important;
color: var(--brand-black) !important;
border: 1px solid var(--brand-border) !important;
box-shadow: 0 24px 62px rgba(8,8,13,.09) !important;
}
.gx-home .gx-promo__copy,
.gx-home .gx-promo__copy h2,
.gx-home .gx-stats h2,
.gx-home .gx-final-cta h2,
.gx-home .gx-collection-card h3 {
color: var(--brand-black) !important;
}
.gx-home .gx-promo__copy p,
.gx-home .gx-stats,
.gx-home .gx-final-cta p,
.gx-home .gx-collection-card p {
color: var(--brand-gray) !important;
}
.gx-home .gx-promo__visual,
.gx-home .gx-collection-card__image {
background:
radial-gradient(circle at 68% 25%, rgba(255,196,57,.14), transparent 24%),
radial-gradient(circle at 30% 70%, rgba(128,0,128,.12), transparent 30%),
linear-gradient(145deg, #FFFFFF, #F8F7FB) !important;
color: var(--brand-purple) !important;
border-color: rgba(128,0,128,.14) !important;
}
.gx-home .gx-collection-card__content {
background: rgba(255,255,255,.92) !important;
color: var(--brand-black) !important;
border: 1px solid var(--brand-border) !important;
box-shadow: 0 16px 34px rgba(8,8,13,.08) !important;
}
.gx-home .gx-stats {
background:
radial-gradient(circle at 16% 18%, rgba(128,0,128,.08), transparent 28%),
radial-gradient(circle at 86% 12%, rgba(255,196,57,.14), transparent 22%),
linear-gradient(180deg, #F8F7FB, #FFFFFF) !important;
border-top: 1px solid var(--brand-border) !important;
border-bottom: 1px solid var(--brand-border) !important;
}
.gx-home .gx-stat-card {
background: #FFFFFF !important;
color: var(--brand-black) !important;
border: 1px solid var(--brand-border) !important;
box-shadow: 0 14px 34px rgba(8,8,13,.07) !important;
}
.gx-home .gx-final-cta {
background: linear-gradient(180deg, #FFFFFF, #F8F7FB) !important;
}
.gx-home .gx-final-cta__inner {
background:
radial-gradient(circle at 82% 18%, rgba(255,196,57,.14), transparent 24%),
radial-gradient(circle at 18% 78%, rgba(128,0,128,.08), transparent 24%),
linear-gradient(135deg, #FFFFFF, #FCFBF7) !important;
border: 1px solid var(--brand-border) !important;
border-radius: 34px !important;
box-shadow: 0 24px 62px rgba(8,8,13,.09) !important;
}
/* Real WooCommerce categories: remove Gaming/Accessories placeholders and use uploaded category images */
.gx-category-grid {
gap: clamp(16px, 2vw, 26px) !important;
}
.gx-category-card {
border-radius: 30px !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 18px 45px rgba(8,8,13,.07) !important;
background: #FFFFFF !important;
overflow: hidden !important;
}
.gx-category-card:hover {
transform: translateY(-6px) !important;
border-color: rgba(128,0,128,.30) !important;
box-shadow: 0 26px 66px rgba(128,0,128,.12) !important;
}
.gx-category-card__image {
min-height: 235px !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.gx-category-card__image.has-image {
background-color: #F8F7FB !important;
}
.gx-category-card__image.has-image::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, transparent 52%, rgba(8,8,13,.08)) !important;
pointer-events: none !important;
}
.gx-category-card__image.has-image .gx-category-card__svg,
.gx-category-card__image.has-image em {
display: none !important;
}
.gx-category-card__body {
padding: clamp(18px, 2.2vw, 28px) !important;
}
.gx-category-card strong {
font-size: clamp(1rem, 1.4vw, 1.28rem) !important;
}
.gx-category-card small {
font-size: clamp(.82rem, 1vw, .94rem) !important;
}
/* Empty product message instead of fake product cards */
.gx-empty-products {
grid-column: 1 / -1;
padding: clamp(26px, 4vw, 46px);
border-radius: 26px;
background: #FFFFFF;
border: 1px solid rgba(128,0,128,.12);
box-shadow: 0 14px 34px rgba(8,8,13,.06);
text-align: center;
}
.gx-empty-products strong {
display: block;
color: var(--brand-black);
font-size: clamp(1.2rem, 2vw, 1.8rem);
margin-bottom: 8px;
}
.gx-empty-products p {
color: var(--brand-gray);
margin: 0 auto;
max-width: 620px;
}
/* Mobile: category cards 2 per row */
@media (max-width: 680px) {
.gx-category-grid,
.gx-category-grid.gx-category-grid--dynamic {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.gx-category-card {
border-radius: 18px !important;
grid-template-rows: 125px 1fr !important;
}
.gx-category-card__image {
min-height: 125px !important;
}
.gx-category-card__body {
padding: 13px !important;
gap: 7px !important;
}
.gx-category-card strong {
font-size: .92rem !important;
line-height: 1.2 !important;
}
.gx-category-card small {
font-size: .74rem !important;
line-height: 1.45 !important;
}
.gx-category-card b {
font-size: .76rem !important;
}
.gx-hero-slide {
min-height: 470px !important;
padding: 22px !important;
background-position: center center !important;
}
.gx-hero-slide__content {
padding: 20px !important;
border-radius: 22px !important;
}
}
@media (max-width: 390px) {
.gx-category-card {
grid-template-rows: 112px 1fr !important;
}
.gx-category-card__image {
min-height: 112px !important;
}
.gx-category-card small {
display: none !important;
}
}
/* ============================================================
EXACT HOMEPAGE CATEGORIES FIX — v2.1.60
Only Smartphones, Laptops, Tablets, Smartwatches.
Uses WooCommerce category thumbnails from backend.
============================================================ */
.gx-categories .gx-category-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(16px, 1.8vw, 24px) !important;
}
.gx-categories .gx-category-card {
min-width: 0 !important;
grid-template-rows: 220px 1fr !important;
border-radius: 28px !important;
background: #FFFFFF !important;
border: 1px solid rgba(231,231,238,.96) !important;
box-shadow: 0 18px 44px rgba(8,8,13,.075) !important;
overflow: hidden !important;
}
.gx-categories .gx-category-card:hover {
transform: translateY(-6px) !important;
border-color: rgba(128,0,128,.30) !important;
box-shadow: 0 28px 66px rgba(128,0,128,.13) !important;
}
.gx-categories .gx-category-card__image {
min-height: 220px !important;
height: 220px !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: #F8F7FB !important;
position: relative !important;
}
.gx-categories .gx-category-card__image.has-image {
background-image: var(--gx-cat-img) !important;
}
.gx-categories .gx-category-card__image.has-image::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.72) 100%),
radial-gradient(circle at 75% 22%, rgba(255,196,57,.12), transparent 28%) !important;
pointer-events: none !important;
}
.gx-categories .gx-category-card__image.has-image .gx-category-card__svg,
.gx-categories .gx-category-card__image.has-image em {
display: none !important;
}
.gx-categories .gx-category-card__image::after {
background: linear-gradient(90deg, var(--brand-yellow), var(--brand-purple)) !important;
height: 3px !important;
}
.gx-categories .gx-category-card__body {
padding: 21px 22px 23px !important;
gap: 10px !important;
}
.gx-categories .gx-category-card strong {
font-size: 1.12rem !important;
line-height: 1.24 !important;
letter-spacing: -.02em !important;
}
.gx-categories .gx-category-card small {
font-size: .86rem !important;
line-height: 1.58 !important;
}
.gx-categories .gx-category-card b {
margin-top: auto !important;
font-size: .84rem !important;
}
/* Slider cleanup: no blank visual box */
.gx-hero-slide__visual,
.gx-hero-slide__image {
display: none !important;
}
.gx-hero-slide {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
background-size: cover !important;
background-position: center center !important;
}
.gx-hero-slide__content {
width: min(650px, 100%) !important;
max-width: 650px !important;
}
/* Keep homepage light; no black boxes */
.gx-home .gx-promo__card,
.gx-home .gx-collection-card,
.gx-home .gx-stats,
.gx-home .gx-final-cta__inner,
.gx-home .gx-footer-transition {
background-color: #FFFFFF !important;
}
@media (max-width: 1180px) {
.gx-categories .gx-category-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.gx-categories .gx-category-card {
grid-template-rows: 190px 1fr !important;
}
.gx-categories .gx-category-card__image {
min-height: 190px !important;
height: 190px !important;
}
}
@media (max-width: 760px) {
.gx-categories .gx-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.gx-categories .gx-category-card {
grid-template-rows: 128px 1fr !important;
border-radius: 18px !important;
}
.gx-categories .gx-category-card__image {
min-height: 128px !important;
height: 128px !important;
}
.gx-categories .gx-category-card__body {
padding: 13px !important;
gap: 7px !important;
}
.gx-categories .gx-category-card strong {
font-size: .92rem !important;
line-height: 1.18 !important;
}
.gx-categories .gx-category-card small {
font-size: .73rem !important;
line-height: 1.42 !important;
}
.gx-categories .gx-category-card b {
font-size: .75rem !important;
}
}
@media (max-width: 380px) {
.gx-categories .gx-category-card {
grid-template-rows: 112px 1fr !important;
}
.gx-categories .gx-category-card__image {
min-height: 112px !important;
height: 112px !important;
}
.gx-categories .gx-category-card small {
display: none !important;
}
}
/* ============================================================
GADGENIX PROFESSIONAL IMAGE + CATEGORY + ABOUT UPDATES v2.1.70
============================================================ */
.gx-category-card__image {
overflow: hidden !important;
position: relative !important;
}
.gx-category-card__thumb {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
object-position: center !important;
}
.gx-category-card__image.has-image::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.38) 100%) !important;
pointer-events: none !important;
}
.gx-promo__visual--image {
min-height: 330px !important;
border-radius: 28px !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
overflow: hidden !important;
position: relative !important;
border: 1px solid rgba(231,231,238,.92) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 16px 42px rgba(8,8,13,.08) !important;
}
.gx-promo__visual--image::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.22) 100%) !important;
}
.gx-stats__inner {
display: grid !important;
gap: clamp(22px, 3vw, 34px) !important;
}
.gx-stats__heading {
max-width: 760px !important;
}
.gx-stats__heading p {
margin: 10px 0 0 !important;
color: var(--brand-gray) !important;
font-size: clamp(.98rem, 1.1vw, 1.05rem) !important;
line-height: 1.75 !important;
}
.gx-stats__layout {
display: grid !important;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr) !important;
gap: clamp(20px, 2.4vw, 28px) !important;
align-items: stretch !important;
}
.gx-stats-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
.gx-stat-card--rich {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 20px 18px !important;
border-radius: 22px !important;
}
.gx-stat-card--rich strong {
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 14px !important;
background: rgba(128,0,128,.07) !important;
}
.gx-stat-card--rich strong svg { width: 20px !important; height: 20px !important; }
.gx-stat-card--rich span {
display: block !important;
margin-bottom: 6px !important;
font-weight: 700 !important;
color: var(--brand-black) !important;
}
.gx-stat-card--rich small {
display: block !important;
color: var(--brand-gray) !important;
font-size: .875rem !important;
line-height: 1.6 !important;
}
.gx-stats-showcase {
position: relative !important;
min-height: 100% !important;
border-radius: 30px !important;
overflow: hidden !important;
background-size: cover !important;
background-position: center center !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 18px 48px rgba(8,8,13,.10) !important;
}
.gx-stats-showcase::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.72) 100%) !important;
}
.gx-stats-showcase__badge {
position: absolute !important;
left: 20px !important;
right: 20px !important;
bottom: 20px !important;
z-index: 2 !important;
padding: 18px 18px 16px !important;
border-radius: 20px !important;
background: rgba(255,255,255,.82) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255,255,255,.85) !important;
box-shadow: 0 14px 34px rgba(8,8,13,.08) !important;
}
.gx-stats-showcase__badge strong {
display: block !important;
color: var(--brand-black) !important;
font-size: 1.02rem !important;
margin-bottom: 6px !important;
}
.gx-stats-showcase__badge span {
display: block !important;
color: var(--brand-gray) !important;
font-size: .9rem !important;
line-height: 1.55 !important;
}
.gx-gmc-about-showcase {
margin: clamp(22px, 3vw, 34px) 0 10px !important;
}
.gx-gmc-about-showcase__grid {
display: grid !important;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr) !important;
gap: 18px !important;
}
.gx-gmc-about-showcase__lead,
.gx-gmc-about-showcase__thumb {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border-radius: 28px !important;
overflow: hidden !important;
position: relative !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 18px 48px rgba(8,8,13,.08) !important;
}
.gx-gmc-about-showcase__lead {
min-height: 440px !important;
display: flex !important;
align-items: flex-end !important;
}
.gx-gmc-about-showcase__lead::before,
.gx-gmc-about-showcase__thumb::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(7,7,12,.08) 32%, rgba(255,255,255,.85) 100%) !important;
}
.gx-gmc-about-showcase__content {
position: relative !important;
z-index: 2 !important;
width: calc(100% - 40px) !important;
margin: 0 20px 20px !important;
padding: 22px !important;
border-radius: 24px !important;
background: rgba(255,255,255,.84) !important;
border: 1px solid rgba(255,255,255,.88) !important;
backdrop-filter: blur(10px) !important;
}
.gx-gmc-about-showcase__content span {
display: inline-block !important;
margin-bottom: 10px !important;
font-size: .82rem !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--brand-purple) !important;
}
.gx-gmc-about-showcase__content strong {
display: block !important;
color: var(--brand-black) !important;
font-size: clamp(1.2rem, 1.7vw, 1.65rem) !important;
line-height: 1.3 !important;
margin-bottom: 10px !important;
}
.gx-gmc-about-showcase__content p {
margin: 0 !important;
color: var(--brand-gray) !important;
line-height: 1.72 !important;
}
.gx-gmc-about-showcase__stack {
display: grid !important;
grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
gap: 18px !important;
}
.gx-gmc-about-showcase__thumb { min-height: 135px !important; }
@media (max-width: 980px) {
.gx-stats__layout,
.gx-gmc-about-showcase__grid {
grid-template-columns: 1fr !important;
}
.gx-stats-showcase { min-height: 320px !important; }
.gx-gmc-about-showcase__lead { min-height: 320px !important; }
.gx-gmc-about-showcase__stack { grid-template-columns: repeat(3, minmax(0,1fr)) !important; grid-template-rows: none !important; }
.gx-gmc-about-showcase__thumb { min-height: 170px !important; }
}
@media (max-width: 760px) {
.gx-stats-grid { grid-template-columns: 1fr !important; }
.gx-gmc-about-showcase__stack { grid-template-columns: 1fr !important; }
.gx-gmc-about-showcase__thumb { min-height: 210px !important; }
.gx-promo__visual--image { min-height: 240px !important; }
}
/* === Gadgenix final refinement v2.1.80 === */
.gx-hero-slide__content {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
padding: clamp(8px, 1vw, 12px) 0 !important;
border-radius: 0 !important;
}
.gx-hero-slide {
background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.32) 70%, rgba(255,255,255,.08) 100%), var(--gx-slide-bg-image, linear-gradient(135deg,#fff,#f8f7fb)) !important;
}
.gx-about__copy h2 {
max-width: 700px !important;
}
.gx-about__copy p {
max-width: 720px !important;
}
.gx-about__points {
grid-template-columns: repeat(2, minmax(0, max-content)) !important;
gap: 12px 14px !important;
}
.gx-promo__card {
grid-template-columns: minmax(0, 1fr) minmax(320px, 430px) !important;
gap: clamp(22px, 3vw, 36px) !important;
align-items: center !important;
background: linear-gradient(135deg, #ffffff 0%, #fcfbf7 55%, #f8f7fb 100%) !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 26px 70px rgba(8,8,13,.08) !important;
}
.gx-promo__copy h2 { color: var(--brand-black) !important; }
.gx-promo__copy p { color: var(--brand-gray) !important; max-width: 620px !important; }
.gx-promo__visual--image {
min-height: 360px !important;
background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.03)), url('https://gadgenix-resale.com/wp-content/uploads/2026/06/ChatGPT-Image-Jun-6-2026-01_35_56-AM.webp') !important;
background-size: cover !important;
background-position: center center !important;
border-radius: 30px !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 18px 44px rgba(8,8,13,.08) !important;
}
.gx-promo__visual--image::after {
background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.24) 100%) !important;
}
.gx-stats--premium {
background: linear-gradient(180deg, #ffffff 0%, #f8f7fb 100%) !important;
color: var(--brand-black) !important;
}
.gx-stats--premium .gx-stats__inner {
grid-template-columns: 1fr !important;
gap: clamp(20px, 3vw, 30px) !important;
}
.gx-stats--premium .gx-stats__layout {
grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr) !important;
align-items: stretch !important;
}
.gx-stats--premium .gx-stats-showcase { min-height: 100% !important; }
.gx-stats-grid--premium {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
.gx-stat-card--premium {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 22px 20px !important;
background: #fff !important;
border: 1px solid rgba(231,231,238,.95) !important;
border-radius: 24px !important;
box-shadow: 0 14px 34px rgba(8,8,13,.06) !important;
}
.gx-stat-card--premium strong {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
flex: 0 0 48px !important;
border-radius: 16px !important;
background: rgba(124,58,237,.08) !important;
}
.gx-stat-card--premium strong svg { width: 22px !important; height: 22px !important; color: var(--brand-purple) !important; }
.gx-stat-card--premium span { display:block !important; font-weight:800 !important; color: var(--brand-black) !important; margin-bottom:6px !important; }
.gx-stat-card--premium small { display:block !important; color: var(--brand-gray) !important; line-height:1.6 !important; font-size:.88rem !important; }
.gx-stats--premium .gx-stats-showcase__badge strong { color: var(--brand-black) !important; }
.gx-stats--premium .gx-stats-showcase__badge span { color: var(--brand-gray) !important; }
.gx-collections--refined { background: #fff !important; }
.gx-section-head--collections { align-items: end !important; }
.gx-buyer-collections {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 22px !important;
}
.gx-buyer-collection-card {
display: grid !important;
grid-template-columns: minmax(220px, 36%) 1fr !important;
align-items: stretch !important;
min-height: 260px !important;
background: linear-gradient(135deg, #ffffff 0%, #fcfbf7 100%) !important;
border: 1px solid rgba(231,231,238,.96) !important;
border-radius: 28px !important;
overflow: hidden !important;
box-shadow: 0 18px 46px rgba(8,8,13,.07) !important;
}
.gx-buyer-collection-card__media {
min-height: 100% !important;
background: radial-gradient(circle at 70% 25%, rgba(255,196,57,.18), transparent 26%), radial-gradient(circle at 25% 76%, rgba(124,58,237,.12), transparent 28%), linear-gradient(145deg,#f8f7fb,#fff) !important;
background-size: cover !important;
background-position: center center !important;
position: relative !important;
}
.gx-buyer-collection-card.has-image .gx-buyer-collection-card__media::after {
content:'' !important; position:absolute !important; inset:0 !important; background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.22) 100%) !important;
}
.gx-buyer-collection-card__media span {
position:absolute !important; inset:auto 18px 18px 18px !important; display:inline-flex !important; padding:8px 12px !important; background:#fff !important; border-radius:999px !important; font-size:.75rem !important; font-weight:800 !important; color:var(--brand-purple) !important;
}
.gx-buyer-collection-card__body { padding: 26px 24px !important; display:flex !important; flex-direction:column !important; }
.gx-buyer-collection-card__body > span { display:inline-flex !important; margin-bottom:12px !important; color:var(--brand-purple) !important; font-size:.75rem !important; letter-spacing:.12em !important; text-transform:uppercase !important; font-weight:800 !important; }
.gx-buyer-collection-card__body h3 { margin:0 0 10px !important; color:var(--brand-black) !important; font-size:clamp(1.25rem,2vw,1.75rem) !important; line-height:1.15 !important; }
.gx-buyer-collection-card__body p { margin:0 0 18px !important; color:var(--brand-gray) !important; line-height:1.7 !important; }
.gx-buyer-collection-card__body a { margin-top:auto !important; display:inline-flex !important; align-items:center !important; gap:8px !important; color:#fff !important; background:var(--brand-purple) !important; padding:12px 16px !important; border-radius:14px !important; font-weight:800 !important; }
.gx-buyer-collection-card__body a:hover { background: var(--brand-purple-dark) !important; transform: translateY(-2px) !important; }
.gx-newsletter { display:none !important; }
@media (max-width: 980px) {
.gx-stats--premium .gx-stats__layout, .gx-buyer-collections { grid-template-columns: 1fr !important; }
.gx-buyer-collection-card { grid-template-columns: 1fr !important; min-height:auto !important; }
.gx-buyer-collection-card__media { min-height: 220px !important; }
.gx-promo__card { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
.gx-about__points { grid-template-columns: 1fr !important; }
.gx-stats-grid--premium { grid-template-columns: 1fr !important; }
.gx-promo__visual--image { min-height: 240px !important; }
}
/* ============================================================
FINAL USER REQUEST FIX v2.1.90
- Removed Buyer-focused discovery / collections section.
- Forced requested image in Smarter Tech Deals Start Here section.
============================================================ */
.gx-collections,
.gx-collections--refined,
.gx-buyer-collections {
display: none !important;
}
.gx-promo__visual--image {
background-image: url('https://gadgenix-resale.com/wp-content/uploads/2026/06/ChatGPT-Image-Jun-6-2026-01_35_56-AM.webp') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
min-height: 370px !important;
border-radius: 30px !important;
background-color: #F8F7FB !important;
}
.gx-promo__card {
grid-template-columns: minmax(0, 1fr) minmax(330px, 460px) !important;
align-items: center !important;
}
@media (max-width: 980px) {
.gx-promo__card {
grid-template-columns: 1fr !important;
}
.gx-promo__visual--image {
min-height: 280px !important;
}
}
/* ============================================================
DIRECT PROMO IMAGE FIX v2.1.91
============================================================ */
.gx-promo__visual--image {
overflow: hidden !important;
position: relative !important;
min-height: 370px !important;
background: #F8F7FB !important;
border-radius: 30px !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 18px 44px rgba(8,8,13,.08) !important;
display: block !important;
}
.gx-promo__img {
width: 100% !important;
height: 100% !important;
min-height: 370px !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
}
.gx-promo__visual--image::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.18) 100%) !important;
pointer-events: none !important;
}
@media (max-width: 980px) {
.gx-promo__img,
.gx-promo__visual--image {
min-height: 280px !important;
}
}
/* ============================================================
FIXED MIDDLE BANNER SECTION v2.1.92
============================================================ */
.gx-fixed-banner {
padding: clamp(20px, 3vw, 36px) 0 !important;
background: transparent !important;
}
.gx-fixed-banner__image {
width: 100% !important;
min-height: 320px !important;
border-radius: 32px !important;
overflow: hidden !important;
background-image: url('https://gadgenix-resale.com/wp-content/uploads/2026/06/ChatGPT-Image-Jun-6-2026-01_56_21-AM.webp') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 24px 60px rgba(8,8,13,.10) !important;
position: relative !important;
}
.gx-fixed-banner__image::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.12) 100%) !important;
}
@media (max-width: 1199px) {
.gx-fixed-banner__image {
background-attachment: scroll !important;
min-height: 280px !important;
}
}
@media (max-width: 767px) {
.gx-fixed-banner {
padding: 16px 0 24px !important;
}
.gx-fixed-banner__image {
min-height: 220px !important;
border-radius: 24px !important;
}
}
/* ============================================================
GADGENIX ABOUT PAGE REDESIGN v2.2.0
============================================================ */
.gx-about-page {
background:
radial-gradient(circle at 8% 4%, rgba(124,58,237,.06), transparent 28%),
radial-gradient(circle at 88% 10%, rgba(255,196,57,.12), transparent 24%),
linear-gradient(180deg, #FFFFFF 0%, #F8F7FB 54%, #FFFFFF 100%);
color: var(--brand-black);
}
.gx-about-page .lx-container {
max-width: 1280px;
}
.gx-about-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--brand-purple);
font-size: .78rem;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
}
.gx-about-eyebrow i {
width: 42px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--brand-yellow), var(--brand-purple));
}
.gx-about-hero {
padding: clamp(56px, 7vw, 105px) 0 clamp(38px, 5vw, 76px);
}
.gx-about-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
gap: clamp(30px, 5vw, 70px);
align-items: center;
}
.gx-about-hero__copy h1 {
margin: 18px 0 18px;
color: var(--brand-black);
font-size: clamp(2.45rem, 5.4vw, 5.7rem);
line-height: .96;
letter-spacing: -.065em;
font-weight: 950;
max-width: 850px;
}
.gx-about-hero__copy p {
color: var(--brand-gray);
font-size: clamp(1rem, 1.2vw, 1.15rem);
line-height: 1.8;
max-width: 760px;
margin: 0;
}
.gx-about-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.gx-about-hero__actions--center {
justify-content: center;
}
.gx-about-hero__trust {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.gx-about-hero__trust span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(231,231,238,.96);
color: var(--brand-black);
font-size: .86rem;
font-weight: 800;
box-shadow: 0 10px 28px rgba(8,8,13,.05);
}
.gx-about-hero__trust span::before {
content: '✓';
color: var(--brand-purple);
font-weight: 950;
}
.gx-about-hero__media {
min-height: clamp(380px, 42vw, 590px);
border-radius: 38px;
background-size: cover;
background-position: center;
border: 1px solid rgba(231,231,238,.96);
box-shadow: 0 30px 80px rgba(8,8,13,.12);
position: relative;
overflow: hidden;
}
.gx-about-hero__media::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.16)),
radial-gradient(circle at 12% 12%, rgba(255,196,57,.18), transparent 26%);
}
.gx-about-intro,
.gx-about-story,
.gx-about-values,
.gx-about-quality,
.gx-about-showcase,
.gx-about-process,
.gx-about-cta {
padding: clamp(56px, 7vw, 100px) 0;
}
.gx-about-intro__grid {
display: grid;
grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
gap: clamp(26px, 5vw, 68px);
align-items: start;
}
.gx-about-intro h2,
.gx-about-split__content h2,
.gx-about-section-head h2,
.gx-about-feature__copy h2,
.gx-about-cta h2 {
margin: 14px 0 0;
color: var(--brand-black);
font-size: clamp(2rem, 4vw, 4.25rem);
line-height: 1.02;
letter-spacing: -.055em;
font-weight: 950;
}
.gx-about-intro p,
.gx-about-split__content p,
.gx-about-section-head p,
.gx-about-feature__copy p,
.gx-about-showcase__panel p,
.gx-about-process__grid p,
.gx-about-cta p {
color: var(--brand-gray);
line-height: 1.82;
font-size: 1rem;
}
.gx-about-intro p:first-child,
.gx-about-split__content p:first-of-type {
margin-top: 0;
}
.gx-about-split,
.gx-about-feature {
display: grid;
grid-template-columns: minmax(380px, .95fr) minmax(0, 1.05fr);
gap: clamp(30px, 5vw, 70px);
align-items: center;
}
.gx-about-split__image,
.gx-about-feature__image,
.gx-about-showcase__large,
.gx-about-showcase__small {
background-size: cover;
background-position: center;
border-radius: 34px;
min-height: 520px;
border: 1px solid rgba(231,231,238,.96);
box-shadow: 0 24px 70px rgba(8,8,13,.10);
position: relative;
overflow: hidden;
}
.gx-about-split__image::after,
.gx-about-feature__image::after,
.gx-about-showcase__large::after,
.gx-about-showcase__small::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.14));
}
.gx-about-checklist {
display: grid;
gap: 12px;
padding: 0;
margin: 24px 0 0;
list-style: none;
}
.gx-about-checklist li {
display: flex;
gap: 11px;
align-items: flex-start;
color: var(--brand-black);
font-weight: 750;
}
.gx-about-checklist li::before {
content: '✓';
color: #fff;
background: var(--brand-purple);
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
font-size: .75rem;
font-weight: 950;
}
.gx-about-values {
background:
radial-gradient(circle at 15% 12%, rgba(124,58,237,.06), transparent 28%),
linear-gradient(180deg, #F8F7FB, #FFFFFF);
}
.gx-about-section-head {
max-width: 880px;
margin-bottom: clamp(26px, 4vw, 44px);
}
.gx-about-section-head--center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.gx-about-section-head--center .gx-about-eyebrow {
justify-content: center;
}
.gx-about-value-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.gx-about-value-card {
background: #fff;
border: 1px solid rgba(231,231,238,.96);
border-radius: 30px;
padding: clamp(24px, 3vw, 36px);
box-shadow: 0 18px 48px rgba(8,8,13,.07);
}
.gx-about-value-card strong {
display: inline-flex;
margin-bottom: 28px;
color: var(--brand-purple);
background: rgba(124,58,237,.08);
border: 1px solid rgba(124,58,237,.14);
border-radius: 999px;
padding: 8px 12px;
font-size: .8rem;
letter-spacing: .08em;
}
.gx-about-value-card h3,
.gx-about-showcase__panel h3,
.gx-about-process__grid h3 {
margin: 0 0 12px;
color: var(--brand-black);
font-size: clamp(1.2rem, 1.8vw, 1.65rem);
line-height: 1.18;
letter-spacing: -.035em;
font-weight: 900;
}
.gx-about-value-card p {
color: var(--brand-gray);
line-height: 1.75;
margin: 0;
}
.gx-about-quality {
background: #fff;
}
.gx-about-feature {
grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr);
}
.gx-about-feature-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 24px;
}
.gx-about-feature-list span {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid rgba(231,231,238,.96);
border-radius: 16px;
padding: 13px 14px;
color: var(--brand-black);
font-weight: 800;
box-shadow: 0 10px 26px rgba(8,8,13,.05);
}
.gx-about-feature-list span::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--brand-purple);
box-shadow: 0 0 0 5px rgba(124,58,237,.08);
}
.gx-about-showcase {
background: linear-gradient(180deg, #FFFFFF, #F8F7FB);
}
.gx-about-showcase__grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
grid-template-rows: auto auto;
gap: 22px;
}
.gx-about-showcase__large {
grid-row: 1 / span 2;
min-height: 650px;
}
.gx-about-showcase__small {
min-height: 290px;
}
.gx-about-showcase__panel {
background:
radial-gradient(circle at 88% 10%, rgba(255,196,57,.16), transparent 22%),
linear-gradient(135deg, #FFFFFF, #FCFBF7);
border: 1px solid rgba(231,231,238,.96);
border-radius: 34px;
padding: clamp(26px, 4vw, 44px);
box-shadow: 0 18px 48px rgba(8,8,13,.07);
}
.gx-about-process {
background: #fff;
}
.gx-about-process__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.gx-about-process__grid article {
background: #fff;
border: 1px solid rgba(231,231,238,.96);
border-radius: 26px;
padding: 26px 22px;
box-shadow: 0 14px 36px rgba(8,8,13,.06);
}
.gx-about-process__grid span {
display: inline-flex;
color: var(--brand-purple);
font-size: .8rem;
font-weight: 950;
letter-spacing: .08em;
margin-bottom: 24px;
}
.gx-about-process__grid p {
margin: 0;
font-size: .94rem;
}
.gx-about-cta {
background:
radial-gradient(circle at 20% 0%, rgba(124,58,237,.08), transparent 25%),
radial-gradient(circle at 80% 0%, rgba(255,196,57,.18), transparent 22%),
linear-gradient(180deg, #F8F7FB 0%, #FFFFFF 100%);
text-align: center;
}
.gx-about-cta__inner {
max-width: 930px;
}
.gx-about-cta .gx-about-eyebrow {
justify-content: center;
}
.gx-about-cta p {
max-width: 720px;
margin: 18px auto 0;
}
@media (max-width: 1100px) {
.gx-about-hero__grid,
.gx-about-split,
.gx-about-feature,
.gx-about-intro__grid,
.gx-about-showcase__grid {
grid-template-columns: 1fr;
}
.gx-about-hero__media,
.gx-about-split__image,
.gx-about-feature__image,
.gx-about-showcase__large {
min-height: 420px;
}
.gx-about-value-grid,
.gx-about-process__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gx-about-showcase__large {
grid-row: auto;
}
}
@media (max-width: 720px) {
.gx-about-hero,
.gx-about-intro,
.gx-about-story,
.gx-about-values,
.gx-about-quality,
.gx-about-showcase,
.gx-about-process,
.gx-about-cta {
padding: 44px 0;
}
.gx-about-hero__media,
.gx-about-split__image,
.gx-about-feature__image,
.gx-about-showcase__large,
.gx-about-showcase__small {
min-height: 280px;
border-radius: 24px;
}
.gx-about-value-grid,
.gx-about-process__grid,
.gx-about-feature-list {
grid-template-columns: 1fr;
}
.gx-about-hero__actions {
flex-direction: column;
}
.gx-about-hero__actions .gx-btn {
width: 100%;
justify-content: center;
}
}
/* ============================================================
FIRST SLIDE EXACT IMAGE STYLE v2.2.1
============================================================ */
.gx-hero-slide--fullimage {
padding: 0 !important;
min-height: var(--gx-slider-height, 620px) !important;
background: transparent !important;
border-radius: 32px !important;
overflow: hidden !important;
}
.gx-hero-slide--fullimage .gx-hero-slide__fullimage {
width: 100% !important;
height: 100% !important;
min-height: var(--gx-slider-height, 620px) !important;
display: block !important;
}
.gx-hero-slide--fullimage .gx-hero-slide__fullimage img {
width: 100% !important;
height: 100% !important;
min-height: var(--gx-slider-height, 620px) !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
}
.gx-hero-slide--fullimage .gx-hero-slide__overlay,
.gx-hero-slide--fullimage .gx-hero-slide__content {
display: none !important;
}
@media (max-width: 991px) {
.gx-hero-slide--fullimage,
.gx-hero-slide--fullimage .gx-hero-slide__fullimage,
.gx-hero-slide--fullimage .gx-hero-slide__fullimage img {
min-height: 420px !important;
}
}
@media (max-width: 767px) {
.gx-hero-slide--fullimage,
.gx-hero-slide--fullimage .gx-hero-slide__fullimage,
.gx-hero-slide--fullimage .gx-hero-slide__fullimage img {
min-height: 280px !important;
}
}
/* ============================================================
FIRST SLIDE FULL IMAGE NO-CROP FIX v2.2.2
Shows the supplied first-slide image exactly/as-is.
============================================================ */
.gx-hero-slider {
padding-top: clamp(20px, 3vw, 34px) !important;
}
.gx-hero-slider__shell {
max-width: min(100%, 1500px) !important;
border-radius: 28px !important;
overflow: visible !important;
}
.gx-hero-slider__track {
min-height: auto !important;
}
.gx-hero-slide--fullimage {
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
background: transparent !important;
border-radius: 28px !important;
overflow: hidden !important;
display: block !important;
}
.gx-hero-slide--fullimage .gx-hero-slide__fullimage {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
display: block !important;
background: #fff !important;
}
.gx-hero-slide--fullimage .gx-hero-slide__fullimage img {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: block !important;
object-fit: contain !important;
object-position: center center !important;
border-radius: 28px !important;
}
.gx-hero-slide--fullimage .gx-hero-slide__overlay,
.gx-hero-slide--fullimage .gx-hero-slide__content {
display: none !important;
}
.gx-hero-slide--fullimage + .gx-hero-slide:not(.is-active) {
display: none;
}
@media (max-width: 767px) {
.gx-hero-slider__shell,
.gx-hero-slide--fullimage,
.gx-hero-slide--fullimage .gx-hero-slide__fullimage img {
border-radius: 18px !important;
}
}
/* ============================================================
FLAGSHIP FIRST SLIDE REBUILD v2.3.0
Proper structured hero instead of pasted full image.
============================================================ */
.gx-hero-slider__shell {
max-width: min(100%, calc(var(--lx-container, 1320px) + 40px)) !important;
}
.gx-hero-slide--flagship {
--gx-hero-surface: linear-gradient(135deg, rgba(255,255,255,.98), rgba(249,246,255,.96) 58%, rgba(255,250,238,.96) 100%);
min-height: auto !important;
background: var(--gx-hero-surface) !important;
border: 1px solid rgba(154, 123, 226, 0.14) !important;
border-radius: 34px !important;
box-shadow: 0 24px 60px rgba(31, 26, 56, .08) !important;
overflow: hidden !important;
}
.gx-hero-slide--flagship::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 74% 24%, rgba(255, 205, 74, .22), transparent 21%),
radial-gradient(circle at 61% 76%, rgba(164, 110, 255, .18), transparent 18%),
linear-gradient(90deg, rgba(160, 102, 255, .04), transparent 24%);
pointer-events: none;
}
.gx-flagship-hero {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(420px, .98fr) 155px;
grid-template-areas:
"copy visual aside"
"benefits benefits benefits";
gap: 18px 26px;
padding: clamp(30px, 3vw, 46px);
align-items: center;
}
.gx-flagship-hero__copy { grid-area: copy; padding: 10px 0 6px; }
.gx-flagship-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
padding: 12px 18px;
border-radius: 999px;
border: 1px solid rgba(154, 123, 226, 0.24);
background: rgba(255,255,255,.76);
color: var(--gx-purple-main, #800080);
font-family: var(--gx-button-font, inherit);
font-size: clamp(11px, 1vw, 13px);
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
box-shadow: 0 10px 30px rgba(120, 76, 255, .08);
}
.gx-flagship-hero__eyebrow-icon,
.gx-flagship-hero__eyebrow-icon svg {
width: 18px;
height: 18px;
color: var(--gx-purple-main, #800080);
}
.gx-flagship-hero__title {
margin: 0;
color: var(--gx-ink, #08080D) !important;
font-family: var(--gx-heading-font, inherit);
font-size: clamp(2.55rem, 5.15vw, var(--gx-slider-title-size, 66px));
line-height: .95;
letter-spacing: -.06em;
max-width: 10ch;
}
.gx-flagship-hero__title span {
display: block;
background: linear-gradient(90deg, var(--gx-purple-main, #800080) 0%, #D265A5 52%, var(--gx-action-yellow, #FFC439) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
.gx-flagship-hero__title::after {
content: "";
display: block;
width: 74px;
height: 5px;
border-radius: 999px;
margin-top: 18px;
background: linear-gradient(90deg, var(--gx-action-yellow, #FFC439), #EDB238 100%);
}
.gx-flagship-hero__text {
max-width: 33rem;
margin: 22px 0 0;
color: var(--gx-muted, #6B6F7A) !important;
font-size: clamp(15px, 1.25vw, var(--gx-slider-text-size, 18px));
line-height: 1.65;
}
.gx-flagship-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.gx-flagship-hero__actions .gx-btn {
min-height: 38px;
padding: 9px 20px;
border-radius: 10px !important;
font-size: clamp(13px, .9vw, 15px);
font-weight: 600;
box-shadow: 0 6px 16px rgba(98, 22, 128, .12);
}
.gx-flagship-hero__actions .gx-btn--light {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(255,255,255,.85) !important;
color: var(--gx-purple-main, #800080) !important;
border: 1.5px solid rgba(154, 123, 226, .28) !important;
box-shadow: none;
}
.gx-flagship-hero__link-icon,
.gx-flagship-hero__link-icon svg { width: 18px; height: 18px; color: currentColor; }
.gx-flagship-hero__visual-column {
grid-area: visual;
position: relative;
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
}
.gx-flagship-hero__halo {
position: absolute;
inset: 0;
border-radius: 34px;
background:
radial-gradient(circle at 50% 0%, rgba(255, 213, 97, .17), transparent 34%),
repeating-radial-gradient(circle at 55% 31%, rgba(255,255,255,0) 0 42px, rgba(255,255,255,.48) 42px 44px);
opacity: .95;
}
.gx-flagship-hero__visual-stage {
position: relative;
width: 100%;
min-height: 390px;
border-radius: 34px;
overflow: hidden;
background:
radial-gradient(circle at 50% 102%, rgba(198,129,255,.28), transparent 22%),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 44%);
}
.gx-flagship-hero__visual-stage::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
bottom: 12px;
height: 126px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(230, 188, 255, .8), rgba(255,255,255,.7) 52%, rgba(255,255,255,.35) 72%, transparent 73%);
filter: blur(0.2px);
}
.gx-flagship-hero__visual {
position: absolute;
right: -13%;
top: 50%;
width: 158%;
max-width: none;
transform: translateY(-50%);
display: block;
z-index: 2;
filter: saturate(1.03) contrast(1.01);
}
.gx-flagship-hero__sidebar {
grid-area: aside;
display: grid;
gap: 16px;
align-self: center;
}
.gx-flagship-hero__aside-card {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 16px;
border-radius: 18px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(231,231,238,.95);
box-shadow: 0 12px 26px rgba(20, 16, 39, .06);
}
.gx-flagship-hero__aside-icon,
.gx-flagship-hero__aside-icon svg {
width: 21px; height: 21px;
color: var(--gx-action-yellow, #FFC439);
flex: 0 0 21px;
}
.gx-flagship-hero__aside-card strong {
display: block;
color: var(--gx-ink, #08080D);
font-size: 15px;
line-height: 1.2;
}
.gx-flagship-hero__aside-card small {
display: block;
margin-top: 3px;
color: var(--gx-muted, #6B6F7A);
font-size: 13px;
line-height: 1.3;
}
.gx-flagship-hero__benefits {
grid-area: benefits;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
background: rgba(255,255,255,.86);
border: 1px solid rgba(231,231,238,.95);
border-radius: 26px;
overflow: hidden;
}
.gx-flagship-hero__benefit {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 22px;
}
.gx-flagship-hero__benefit + .gx-flagship-hero__benefit {
border-left: 1px solid rgba(231,231,238,.9);
}
.gx-flagship-hero__benefit .gx-icon {
width: 38px;
height: 38px;
min-width: 38px;
background: rgba(128, 0, 128, .08) !important;
color: var(--gx-purple-main, #800080) !important;
}
.gx-flagship-hero__benefit .gx-icon svg { width: 20px; height: 20px; }
.gx-flagship-hero__benefit strong {
display: block;
color: var(--gx-ink, #08080D);
font-size: 18px;
line-height: 1.22;
}
.gx-flagship-hero__benefit small {
display: block;
margin-top: 4px;
color: var(--gx-muted, #6B6F7A);
font-size: 14px;
line-height: 1.35;
}
.gx-hero-slide--flagship .gx-hero-slide__overlay,
.gx-hero-slide--flagship .gx-hero-slide__fullimage,
.gx-hero-slide--flagship .gx-hero-slide__content {
display: none !important;
}
@media (max-width: 1280px) {
.gx-flagship-hero {
grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr) 145px;
gap: 16px 20px;
}
.gx-flagship-hero__visual { width: 166%; right: -19%; }
.gx-flagship-hero__benefit { padding: 18px 18px; }
}
@media (max-width: 1100px) {
.gx-flagship-hero {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"copy copy"
"visual aside"
"benefits benefits";
}
.gx-flagship-hero__copy { max-width: 100%; }
.gx-flagship-hero__title { max-width: 13ch; }
.gx-flagship-hero__visual-column { min-height: 360px; }
.gx-flagship-hero__visual-stage { min-height: 340px; }
.gx-flagship-hero__visual { width: 145%; right: -13%; }
.gx-flagship-hero__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gx-flagship-hero__benefit:nth-child(3) { border-left: 0; }
.gx-flagship-hero__benefit:nth-child(n+3) { border-top: 1px solid rgba(231,231,238,.9); }
}
@media (max-width: 767px) {
.gx-hero-slide--flagship { border-radius: 22px !important; }
.gx-flagship-hero {
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"visual"
"aside"
"benefits";
padding: 22px 18px 18px;
gap: 18px;
}
.gx-flagship-hero__eyebrow { padding: 10px 13px; font-size: 10px; }
.gx-flagship-hero__title { max-width: 100%; font-size: clamp(2.2rem, 12vw, calc(var(--gx-slider-title-size, 66px) - 14px)); }
.gx-flagship-hero__text { font-size: clamp(14px, 4.3vw, var(--gx-slider-text-size, 18px)); }
.gx-flagship-hero__actions .gx-btn { width: 100%; justify-content: center; min-height: 56px; }
.gx-flagship-hero__visual-column { min-height: 260px; }
.gx-flagship-hero__visual-stage { min-height: 250px; border-radius: 24px; }
.gx-flagship-hero__visual { width: 162%; right: -25%; }
.gx-flagship-hero__sidebar { grid-template-columns: 1fr; }
.gx-flagship-hero__benefits { grid-template-columns: 1fr; border-radius: 18px; }
.gx-flagship-hero__benefit + .gx-flagship-hero__benefit,
.gx-flagship-hero__benefit:nth-child(n+3) { border-left: 0; border-top: 1px solid rgba(231,231,238,.9); }
}
/* Global control reinforcement across pages */
.entry-content p,
.page-content p,
.wp-block-post-content p,
.woocommerce-tabs p,
.gx-about-page p,
.lx-policy-page p {
font-size: var(--gx-section-text-size, 16px) !important;
line-height: 1.75;
}
.entry-content h2,
.page-content h2,
.wp-block-post-content h2,
.gx-about-page h2,
.lx-policy-page h2 {
font-size: clamp(1.8rem, 4vw, var(--gx-section-title-size, 40px)) !important;
}
.entry-content h3,
.page-content h3,
.wp-block-post-content h3,
.gx-about-page h3,
.lx-policy-page h3 {
font-size: var(--gx-card-title-size, 20px) !important;
}
.lx-footer__about,
.lx-footer__company-meta,
.lx-footer__newsletter-copy,
.lx-footer__newsletter-fine,
.lx-footer__bottom-text,
.lx-footer__links a,
.lx-footer__bottom-links a {
font-size: var(--gx-card-text-size, 15px) !important;
}
/* ============================================================
PREMIUM ABOUT + PROCESS MATCHUP v2.4.0
============================================================ */
.gx-about--premium,
.gx-process--premium {
background: linear-gradient(180deg, #fcfbff 0%, #f8f7fb 100%) !important;
}
.gx-about__grid--premium {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr) !important;
gap: clamp(32px, 4vw, 60px) !important;
align-items: start !important;
}
.gx-about__copy--premium h2 {
max-width: 28ch !important;
margin: 10px 0 20px !important;
color: var(--brand-black) !important;
font-size: clamp(1.5rem, 2.8vw, 2.4rem) !important;
line-height: 1.14 !important;
letter-spacing: -.03em !important;
}
.gx-about__copy--premium h2 strong,
.gx-about__copy--premium h2 .highlight,
.gx-about__copy--premium h2 em {
color: var(--brand-purple) !important;
font-style: normal !important;
}
.gx-about__copy--premium h2 { }
.gx-about__copy--premium p {
max-width: 720px !important;
margin: 0 0 18px !important;
color: var(--brand-gray) !important;
font-size: clamp(16px, 1.2vw, 19px) !important;
line-height: 1.78 !important;
}
.gx-about__copy--premium .gx-kicker,
.gx-process__head .gx-kicker {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
color: var(--brand-purple) !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
.gx-about__copy--premium .gx-kicker::before,
.gx-about__copy--premium .gx-kicker::after,
.gx-process__head .gx-kicker::before,
.gx-process__head .gx-kicker::after {
content: '' !important;
width: 38px !important;
height: 3px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, var(--brand-yellow), var(--brand-purple)) !important;
}
.gx-about__copy--premium .gx-kicker::after,
.gx-process__head .gx-kicker::after {
background: linear-gradient(90deg, var(--brand-purple), var(--brand-yellow)) !important;
}
.gx-about-feature-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 22px !important;
margin-top: 30px !important;
}
.gx-about-feature-card {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 16px 18px 15px !important;
border-radius: 18px !important;
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(231,231,238,.92) !important;
box-shadow: 0 8px 24px rgba(20, 16, 38, .05) !important;
}
.gx-about-feature-card--gold .gx-about-feature-card__icon {
background: linear-gradient(180deg, rgba(255,196,57,.22), rgba(255,196,57,.12)) !important;
color: #d79500 !important;
}
.gx-about-feature-card__icon {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(180deg, rgba(128,0,128,.14), rgba(128,0,128,.07)) !important;
color: var(--brand-purple) !important;
box-shadow: inset 0 -4px 12px rgba(255,255,255,.22) !important;
}
.gx-about-feature-card__icon svg { width: 20px !important; height: 20px !important; }
.gx-about-feature-card h3 {
margin: 0 0 8px !important;
color: var(--brand-black) !important;
font-size: clamp(18px, 1.4vw, 29px) !important;
line-height: 1.28 !important;
}
.gx-about-feature-card p {
margin: 0 !important;
color: var(--brand-gray) !important;
font-size: 15px !important;
line-height: 1.65 !important;
}
.gx-about__cta {
margin-top: 34px !important;
min-height: 62px !important;
padding: 16px 28px !important;
border-radius: 18px !important;
display: inline-flex !important;
align-items: center !important;
gap: 14px !important;
}
.gx-about__cta span {
width: 36px !important;
height: 36px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255,255,255,.18) !important;
font-size: 18px !important;
}
.gx-about__media--premium {
min-height: 480px !important;
height: 100% !important;
align-self: stretch !important;
border-radius: 28px !important;
overflow: hidden !important;
border: 1px solid rgba(231,231,238,.95) !important;
box-shadow: 0 20px 60px rgba(10, 8, 24, .07) !important;
background: #f8f7fb !important;
}
.gx-about__img {
width: 100% !important;
height: 100% !important;
min-height: 480px !important;
display: block !important;
object-fit: cover !important;
object-position: center top !important;
}
.gx-process--premium .gx-section-head--center { margin-bottom: 32px !important; }
.gx-process__head h2 {
margin-top: 12px !important;
color: var(--brand-black) !important;
font-size: clamp(2.2rem, 4.4vw, 4.7rem) !important;
line-height: 1.08 !important;
letter-spacing: -.055em !important;
}
.gx-process__head p {
color: var(--brand-gray) !important;
font-size: clamp(16px, 1.2vw, 20px) !important;
max-width: 660px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.gx-steps--premium {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 54px !important;
align-items: stretch !important;
}
.gx-steps--premium::before { display: none !important; }
.gx-step-card--premium {
position: relative !important;
padding: 68px 22px 24px !important;
border-radius: 24px !important;
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(227,216,244,.9) !important;
box-shadow: 0 10px 28px rgba(17, 14, 36, .05) !important;
text-align: center !important;
min-height: 320px !important;
}
.gx-step-card--premium::after {
content: '' !important;
position: absolute !important;
top: 108px !important;
right: -46px !important;
width: 92px !important;
height: 2px !important;
background: linear-gradient(90deg, var(--brand-yellow), var(--brand-purple)) !important;
}
.gx-step-card--premium::before {
content: '' !important;
position: absolute !important;
top: 97px !important;
right: -40px !important;
width: 22px !important;
height: 22px !important;
border-radius: 999px !important;
background: #fff !important;
border: 3px solid var(--brand-yellow) !important;
box-shadow: 0 0 0 3px rgba(128,0,128,.08) !important;
z-index: 2 !important;
}
.gx-step-card--premium:last-child::after,
.gx-step-card--premium:last-child::before { display: none !important; }
.gx-step-card--premium.is-featured { border-color: rgba(185, 126, 255, .62) !important; }
.gx-step-card__number {
position: absolute !important;
top: -18px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 56px !important;
height: 56px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
font-size: 17px !important;
font-weight: 700 !important;
background: linear-gradient(180deg, #8e17cf 0%, #6518b8 100%) !important;
border: 6px solid rgba(255,255,255,.92) !important;
box-shadow: 0 6px 16px rgba(105, 28, 164, .16), 0 0 0 1px rgba(231,231,238,.9) !important;
}
.gx-step-card__icon {
width: 80px !important;
height: 80px !important;
margin: 0 auto 18px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(180deg, rgba(128,0,128,.08), rgba(128,0,128,.03)) !important;
border: 1px solid rgba(231,231,238,.9) !important;
}
.gx-step-card__icon svg { width: 34px !important; height: 34px !important; color: var(--brand-purple) !important; }
.gx-step-card--premium h3 {
margin: 0 !important;
color: var(--brand-black) !important;
font-size: clamp(15px, 1.1vw, 19px) !important;
line-height: 1.28 !important;
}
.gx-step-card__accent {
display: block !important;
width: 50px !important;
height: 4px !important;
border-radius: 999px !important;
margin: 16px auto 18px !important;
background: linear-gradient(90deg, var(--brand-yellow), #e1a300) !important;
}
.gx-step-card--premium p {
color: var(--brand-gray) !important;
font-size: 16px !important;
line-height: 1.8 !important;
margin: 0 auto !important;
max-width: 24ch !important;
}
@media (max-width: 1200px) {
.gx-steps--premium { gap: 28px !important; }
.gx-step-card--premium::after { right: -28px !important; width: 56px !important; }
.gx-step-card--premium::before { right: -18px !important; }
}
@media (max-width: 980px) {
.gx-about__grid--premium { grid-template-columns: 1fr !important; }
.gx-about__media--premium { min-height: 380px !important; order: -1 !important; }
.gx-about-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.gx-steps--premium { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 34px !important; }
.gx-step-card--premium::after,
.gx-step-card--premium::before { display: none !important; }
}
@media (max-width: 760px) {
.gx-about__copy--premium h2,
.gx-process__head h2 { font-size: clamp(2rem, 10vw, 3rem) !important; }
.gx-about-feature-grid,
.gx-steps--premium { grid-template-columns: 1fr !important; }
.gx-about__media--premium { min-height: 320px !important; border-radius: 22px !important; }
.gx-step-card--premium { min-height: auto !important; padding: 78px 20px 24px !important; }
.gx-step-card__icon { width: 70px !important; height: 70px !important; }
.gx-step-card__icon svg { width: 28px !important; height: 28px !important; }
}
/* ============================================================
PROCESS CARD ICON VISIBILITY FIX v2.4.1
Forces real SVG icons visible inside journey cards.
============================================================ */
.gx-process--premium .gx-step-card--premium .gx-step-card__icon {
width: 80px !important;
height: 80px !important;
min-width: 80px !important;
min-height: 80px !important;
margin: 0 auto 18px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background:
radial-gradient(circle at 50% 35%, rgba(255,255,255,.92), rgba(246,235,255,.72) 58%, rgba(245,232,255,.95) 100%) !important;
border: 1px solid rgba(128,0,128,.12) !important;
box-shadow:
inset 0 -6px 14px rgba(255,196,57,.10),
0 8px 18px rgba(128,0,128,.07) !important;
color: var(--brand-purple) !important;
opacity: 1 !important;
visibility: visible !important;
}
.gx-process--premium .gx-step-card--premium .gx-step-card__icon svg {
width: 34px !important;
height: 34px !important;
display: block !important;
color: var(--brand-purple) !important;
stroke: var(--brand-purple) !important;
fill: none !important;
opacity: 1 !important;
visibility: visible !important;
stroke-width: 2 !important;
}
.gx-process--premium .gx-step-card--premium:nth-child(4) .gx-step-card__icon svg,
.gx-process--premium .gx-step-card--premium:nth-child(4) .gx-step-card__icon {
color: var(--brand-purple) !important;
stroke: var(--brand-purple) !important;
}
.gx-process--premium .gx-step-card--premium .gx-step-card__number {
z-index: 5 !important;
}
.gx-process--premium .gx-step-card--premium h3,
.gx-process--premium .gx-step-card--premium p {
position: relative !important;
z-index: 3 !important;
}
/* Kill old rule that was making icons look like empty purple circles */
.gx-process--premium .gx-step-card--premium > span:not(.gx-step-card__number):not(.gx-step-card__icon) {
background: transparent !important;
}
/* Mobile icon size */
@media (max-width: 760px) {
.gx-process--premium .gx-step-card--premium .gx-step-card__icon {
width: 70px !important;
height: 70px !important;
min-width: 70px !important;
min-height: 70px !important;
}
.gx-process--premium .gx-step-card--premium .gx-step-card__icon svg {
width: 28px !important;
height: 28px !important;
}
}
/* About page headings */
.gx-about-page h1,
.gx-about-page .gx-about-hero__copy h1 {
font-size: clamp(2rem, 4.6vw, var(--gx-section-title-size, 40px)) !important;
line-height: 1.08 !important;
}
.gx-about-page h2,
.gx-about-page .gx-about-intro h2,
.gx-about-page .gx-about-split__content h2,
.gx-about-page .gx-about-section-head h2,
.gx-about-page .gx-about-feature__copy h2,
.gx-about-page .gx-about-cta h2 {
font-size: clamp(1.65rem, 3.4vw, var(--gx-section-title-size, 40px)) !important;
line-height: 1.12 !important;
}
/* Card headings */
.gx-about-feature-card h3,
.gx-step-card--premium h3,
.gx-info-card h3,
.gx-category-card strong,
.gx-stat-card--premium span,
.gx-about-page h3,
.gx-about-value-card h3,
.gx-about-showcase__panel h3,
.gx-about-process__grid h3 {
font-size: clamp(1rem, 1.25vw, var(--gx-card-title-size, 20px)) !important;
line-height: 1.28 !important;
}
/* Body / section text */
.gx-about__copy--premium p,
.gx-process__head p,
.gx-step-card--premium p,
.gx-section-head p,
.gx-promo__copy p,
.gx-about-page p,
.gx-about-feature-card p,
.gx-info-card p,
.gx-category-card small,
.gx-stat-card--premium small {
font-size: clamp(.88rem, 1vw, var(--gx-section-text-size, 16px)) !important;
line-height: 1.72 !important;
}
/* Hero first slider still follows hero controls */
.gx-flagship-hero__title,
.gx-hero h1,
.gx-hero-slide h1 {
font-size: clamp(2.15rem, 4.8vw, var(--gx-hero-title-size, 66px)) !important;
}
.gx-flagship-hero__text,
.gx-hero p,
.gx-hero__copy p,
.gx-hero-slide__text {
font-size: clamp(.92rem, 1.1vw, var(--gx-hero-text-size, 18px)) !important;
}
/* Mobile: still controlled but not oversized */
@media (max-width: 760px) {
.gx-about__copy--premium h2,
.gx-process__head h2,
.gx-section-head h2,
.gx-about-page h1,
.gx-about-page h2 {
font-size: clamp(1.7rem, 8vw, var(--gx-section-title-size, 40px)) !important;
}
}
/* All theme/page/WooCommerce headings */
html body h1,
html body .entry-title,
html body .page-title,
html body .wp-block-post-title,
html body .woocommerce-products-header__title,
html body .product_title,
html body .gx-flagship-hero__title,
html body .gx-hero h1,
html body .gx-hero-slide h1,
html body .gx-about-page h1,
html body .gx-about-hero__copy h1 {
font-size: min(var(--gx-h1-max), var(--gx-hero-title-size, 26px)) !important;
line-height: 1.22 !important;
font-weight: var(--gx-heading-weight) !important;
letter-spacing: -0.02em !important;
}
html body h2,
html body .wp-block-heading,
html body .gx-section-head h2,
html body .gx-stats h2,
html body .gx-final-cta h2,
html body .gx-newsletter h2,
html body .gx-promo__copy h2,
html body .gx-about__copy--premium h2,
html body .gx-process__head h2,
html body .gx-about-page h2,
html body .gx-about-section-head h2,
html body .gx-about-intro h2,
html body .gx-about-split__content h2,
html body .gx-about-feature__copy h2,
html body .gx-about-cta h2,
html body .woocommerce div.product .woocommerce-tabs h2 {
font-size: min(var(--gx-h2-max), var(--gx-section-title-size, 24px)) !important;
line-height: 1.28 !important;
font-weight: var(--gx-heading-weight) !important;
letter-spacing: -0.015em !important;
}
html body h3,
html body .gx-info-card h3,
html body .gx-step-card h3,
html body .gx-step-card--premium h3,
html body .gx-about-feature-card h3,
html body .gx-about-value-card h3,
html body .gx-about-showcase__panel h3,
html body .gx-about-process__grid h3,
html body .gx-category-card strong,
html body .gx-stat-card--premium span,
html body .woocommerce-loop-product__title {
font-size: min(var(--gx-h3-max), var(--gx-card-title-size, 20px)) !important;
line-height: 1.32 !important;
font-weight: var(--gx-heading-weight) !important;
letter-spacing: -0.01em !important;
}
html body h4,
html body .widget-title,
html body .lx-footer__col-title,
html body .lx-footer__company-name {
font-size: var(--gx-h4-max) !important;
line-height: 1.35 !important;
font-weight: var(--gx-heading-weight) !important;
}
html body h5 {
font-size: var(--gx-h5-max) !important;
line-height: 1.35 !important;
font-weight: var(--gx-heading-weight) !important;
}
html body h6 {
font-size: var(--gx-h6-max) !important;
line-height: 1.35 !important;
font-weight: var(--gx-heading-weight) !important;
}
/* Stop any old ultra-bold theme rules */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .gx-kicker,
html body .gx-about-eyebrow,
html body .gx-btn,
html body button,
html body .button,
html body .lx-nav-link,
html body .lx-footer__links a,
html body .gx-link-pill,
html body strong,
html body b {
font-weight: min(600, var(--gx-heading-weight)) !important;
}
/* Buttons can stay readable but not over-bold */
html body .gx-btn,
html body button,
html body .button,
html body input[type="submit"],
html body .lx-search__btn,
html body .lx-all-depts-btn {
font-weight: 600 !important;
}
/* Slider title gradient span must also remain limited */
html body .gx-flagship-hero__title span {
font-weight: 600 !important;
}
/* Mobile remains compact */
@media (max-width: 760px) {
html body h1,
html body .entry-title,
html body .page-title,
html body .gx-flagship-hero__title,
html body .gx-about-page h1 {
font-size: 24px !important;
}
html body h2,
html body .gx-section-head h2,
html body .gx-about__copy--premium h2,
html body .gx-process__head h2,
html body .gx-about-page h2 {
font-size: 22px !important;
}
html body h3,
html body .gx-step-card--premium h3,
html body .gx-about-feature-card h3 {
font-size: 18px !important;
}
}
/* ============================================================
GADGENIX FINAL CLEAN BASE v2.5.0
Main typography lock is printed late from functions.php.
============================================================ */
/* ============================================================
FINAL WEIGHT LOCK v2.5.1
H1 500, all other headings 400.
============================================================ */
html body h1,
html body .entry-title,
html body .page-title,
html body .wp-block-post-title,
html body .woocommerce-products-header__title,
html body .product_title,
html body .gx-flagship-hero__title,
html body .gx-hero h1,
html body .gx-hero-slide h1,
html body .gx-about-page h1,
html body .gx-about-hero__copy h1 {
font-size: 26px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
}
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .wp-block-heading,
html body .gx-section-head h2,
html body .gx-stats h2,
html body .gx-final-cta h2,
html body .gx-newsletter h2,
html body .gx-promo__copy h2,
html body .gx-about__copy h2,
html body .gx-about__copy--premium h2,
html body .gx-process__head h2,
html body .gx-about-page h2,
html body .gx-about-section-head h2,
html body .gx-info-card h3,
html body .gx-step-card h3,
html body .gx-step-card--premium h3,
html body .gx-about-feature-card h3,
html body .woocommerce-loop-product__title {
font-weight: 400 !important;
}
html body h2,
html body .wp-block-heading,
html body .gx-section-head h2,
html body .gx-about__copy h2,
html body .gx-about__copy--premium h2,
html body .gx-process__head h2,
html body .gx-about-page h2 {
font-size: 24px !important;
}
html body h3,
html body .gx-info-card h3,
html body .gx-step-card h3,
html body .gx-step-card--premium h3,
html body .gx-about-feature-card h3,
html body .woocommerce-loop-product__title {
font-size: 20px !important;
}
html body h4 { font-size: 18px !important; }
html body h5 { font-size: 16px !important; }
html body h6 { font-size: 15px !important; }
/* ============================================================
CLEAN CONTACT PAGE v2.5.2
Only short text, business details, and contact form.
============================================================ */
.gx-contact-clean-page {
background: #fff !important;
}
.gx-contact-clean-hero {
padding: clamp(42px, 6vw, 78px) 0 30px !important;
background:
radial-gradient(circle at 78% 0%, rgba(255,196,57,.12), transparent 26%),
radial-gradient(circle at 12% 24%, rgba(128,0,128,.08), transparent 28%),
linear-gradient(180deg, #fff 0%, #f8f7fb 100%) !important;
text-align: center !important;
}
.gx-contact-clean-kicker {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
color: #800080 !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
margin-bottom: 12px !important;
}
.gx-contact-clean-hero h1 {
margin: 0 !important;
color: #08080D !important;
font-size: 26px !important;
line-height: 1.25 !important;
font-weight: 500 !important;
}
.gx-contact-clean-hero p {
max-width: 560px !important;
margin: 12px auto 0 !important;
color: #6B6F7A !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
.gx-contact-clean-section {
padding: clamp(34px, 5vw, 70px) 0 !important;
background: #fff !important;
}
.gx-contact-clean-grid {
display: grid !important;
grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr) !important;
gap: 24px !important;
align-items: start !important;
}
.gx-contact-clean-card {
background: #fff !important;
border: 1px solid rgba(231,231,238,.95) !important;
border-radius: 24px !important;
box-shadow: 0 18px 45px rgba(8,8,13,.06) !important;
padding: clamp(22px, 3vw, 34px) !important;
}
.gx-contact-clean-card h2 {
margin: 0 0 18px !important;
color: #08080D !important;
font-size: 24px !important;
line-height: 1.3 !important;
font-weight: 400 !important;
}
.gx-contact-clean-form > p {
margin: -6px 0 22px !important;
color: #6B6F7A !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
.gx-contact-clean-list {
margin: 0 !important;
display: grid !important;
gap: 14px !important;
}
.gx-contact-clean-list div {
padding: 0 0 14px !important;
border-bottom: 1px solid rgba(231,231,238,.86) !important;
}
.gx-contact-clean-list div:last-child {
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
.gx-contact-clean-list dt {
margin: 0 0 4px !important;
color: #800080 !important;
font-size: 13px !important;
line-height: 1.35 !important;
font-weight: 500 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
}
.gx-contact-clean-list dd {
margin: 0 !important;
color: #202232 !important;
font-size: 15px !important;
line-height: 1.65 !important;
font-weight: 400 !important;
}
.gx-contact-clean-list a {
color: #202232 !important;
text-decoration: none !important;
}
.gx-contact-clean-list a:hover {
color: #800080 !important;
}
.gx-contact-clean-form form {
display: grid !important;
gap: 16px !important;
margin: 0 !important;
}
.gx-contact-clean-form p,
.gx-contact-clean-native-form p {
margin: 0 !important;
}
.gx-contact-clean-form label {
display: block !important;
margin-bottom: 7px !important;
color: #202232 !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.gx-contact-clean-form input,
.gx-contact-clean-form textarea,
.gx-contact-clean-form select {
width: 100% !important;
min-height: 48px !important;
border-radius: 14px !important;
border: 1px solid #E7E7EE !important;
background: #fff !important;
color: #202232 !important;
padding: 12px 14px !important;
font-size: 15px !important;
outline: none !important;
}
.gx-contact-clean-form textarea {
min-height: 140px !important;
resize: vertical !important;
}
.gx-contact-clean-form input:focus,
.gx-contact-clean-form textarea:focus,
.gx-contact-clean-form select:focus {
border-color: #800080 !important;
box-shadow: 0 0 0 3px rgba(128,0,128,.08) !important;
}
.gx-contact-clean-form button,
.gx-contact-clean-form input[type="submit"],
.gx-contact-clean-form .wpcf7-submit,
.gx-contact-clean-form .wpforms-submit {
min-height: 50px !important;
width: auto !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
border: 0 !important;
border-radius: 14px !important;
background: #800080 !important;
color: #fff !important;
padding: 13px 24px !important;
font-size: 15px !important;
font-weight: 500 !important;
cursor: pointer !important;
}
.gx-contact-clean-form button:hover,
.gx-contact-clean-form input[type="submit"]:hover,
.gx-contact-clean-form .wpcf7-submit:hover,
.gx-contact-clean-form .wpforms-submit:hover {
background: #5B005B !important;
}
/* Hide extra plugin notes/duplicate noisy labels if present */
.gx-contact-clean-form .wpcf7-response-output {
margin: 12px 0 0 !important;
border-radius: 12px !important;
font-size: 14px !important;
}
@media (max-width: 900px) {
.gx-contact-clean-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 600px) {
.gx-contact-clean-card {
border-radius: 18px !important;
padding: 20px !important;
}
}
/* ============================================================
CONTACT PAGE ICONS + PROFESSIONAL FORM v2.5.3
============================================================ */
.gx-contact-clean-grid {
display: grid !important;
grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr) !important;
gap: 28px !important;
align-items: start !important;
}
.gx-contact-clean-card {
background: #fff !important;
border: 1px solid rgba(231,231,238,.95) !important;
border-radius: 24px !important;
box-shadow: 0 18px 45px rgba(8,8,13,.06) !important;
padding: clamp(24px, 3vw, 34px) !important;
}
.gx-contact-clean-card h2 {
margin: 0 0 20px !important;
color: #08080D !important;
font-size: 24px !important;
line-height: 1.3 !important;
font-weight: 400 !important;
}
.gx-contact-detail-list {
display: grid !important;
gap: 16px !important;
}
.gx-contact-detail-item {
display: grid !important;
grid-template-columns: 58px 1fr !important;
gap: 14px !important;
align-items: start !important;
padding: 14px 0 !important;
border-bottom: 1px solid rgba(231,231,238,.86) !important;
}
.gx-contact-detail-item:first-child {
padding-top: 0 !important;
}
.gx-contact-detail-item:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.gx-contact-detail-icon {
width: 52px !important;
height: 52px !important;
border-radius: 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(180deg, rgba(243,232,255,.95), rgba(255,255,255,.98)) !important;
border: 1px solid rgba(128,0,128,.14) !important;
color: #800080 !important;
box-shadow: 0 10px 24px rgba(128,0,128,.08) !important;
}
.gx-contact-detail-icon svg {
width: 24px !important;
height: 24px !important;
display: block !important;
}
.gx-contact-detail-copy {
display: grid !important;
gap: 4px !important;
}
.gx-contact-detail-label {
color: #800080 !important;
font-size: 12px !important;
line-height: 1.35 !important;
font-weight: 500 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.gx-contact-detail-copy strong,
.gx-contact-detail-copy a {
color: #202232 !important;
font-size: 15px !important;
line-height: 1.7 !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.gx-contact-detail-copy a:hover {
color: #800080 !important;
}
.gx-contact-clean-form > p {
margin: -6px 0 22px !important;
color: #6B6F7A !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
.gx-contact-clean-form form,
.gx-contact-clean-native-form,
.gx-contact-clean-form .wpcf7-form,
.gx-contact-clean-form .wpforms-form {
display: grid !important;
gap: 16px !important;
margin: 0 !important;
}
.gx-contact-clean-form label {
display: block !important;
margin-bottom: 7px !important;
color: #202232 !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.gx-contact-clean-form input,
.gx-contact-clean-form textarea,
.gx-contact-clean-form select {
width: 100% !important;
min-height: 52px !important;
border-radius: 16px !important;
border: 1px solid #E5E7EF !important;
background: #fff !important;
color: #202232 !important;
padding: 13px 16px !important;
font-size: 15px !important;
outline: none !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.gx-contact-clean-form textarea {
min-height: 160px !important;
resize: vertical !important;
}
.gx-contact-clean-form input:focus,
.gx-contact-clean-form textarea:focus,
.gx-contact-clean-form select:focus {
border-color: #800080 !important;
box-shadow: 0 0 0 4px rgba(128,0,128,.08) !important;
}
.gx-contact-clean-form .wpcf7-spinner {
margin: 8px 0 0 !important;
}
.gx-contact-clean-form button,
.gx-contact-clean-form input[type="submit"],
.gx-contact-clean-form .wpcf7-submit,
.gx-contact-clean-form .wpforms-submit {
min-height: 52px !important;
width: auto !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
border: 0 !important;
border-radius: 16px !important;
background: linear-gradient(135deg, #800080, #5B005B) !important;
color: #fff !important;
padding: 13px 24px !important;
font-size: 15px !important;
font-weight: 500 !important;
cursor: pointer !important;
box-shadow: 0 12px 26px rgba(128,0,128,.18) !important;
}
.gx-contact-clean-form button:hover,
.gx-contact-clean-form input[type="submit"]:hover,
.gx-contact-clean-form .wpcf7-submit:hover,
.gx-contact-clean-form .wpforms-submit:hover {
transform: translateY(-1px) !important;
box-shadow: 0 16px 30px rgba(128,0,128,.22) !important;
}
.gx-contact-clean-form .wpcf7-response-output {
margin: 12px 0 0 !important;
border-radius: 12px !important;
font-size: 14px !important;
}
@media (max-width: 900px) {
.gx-contact-clean-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 600px) {
.gx-contact-detail-item {
grid-template-columns: 48px 1fr !important;
gap: 12px !important;
}
.gx-contact-detail-icon {
width: 46px !important;
height: 46px !important;
border-radius: 14px !important;
}
.gx-contact-clean-card {
border-radius: 18px !important;
padding: 20px !important;
}
}
/* ── Global Button Size Override — compact, single arrow ─────────────────── */
html body .gx-btn,
html body .lx-btn {
min-height: 36px !important;
padding: 8px 18px !important;
font-size: .86rem !important;
border-radius: 10px !important;
gap: 6px !important;
}
html body .lx-btn--lg {
min-height: 40px !important;
padding: 10px 22px !important;
font-size: .92rem !important;
}
html body .lx-btn--sm {
min-height: 30px !important;
padding: 5px 13px !important;
font-size: .80rem !important;
}
html body .gx-flagship-hero__actions .gx-btn,
html body .gx-hero-slide__actions .gx-btn {
min-height: 38px !important;
padding: 9px 20px !important;
font-size: .88rem !important;
}
/* Single arrow — suppress duplicate */
html body .gx-btn.lx-btn--arrow::after {
content: none !important;
}
html body .lx-btn--arrow::after {
content: '\2192' !important;
font-size: .85em !important;
margin-left: 3px !important;
}
/* ── GMC Simple Policy Pages — clean paragraph format ────────────────────── */
.gx-gmc-simple-page {
padding: clamp(48px, 6vw, 80px) 0;
background: #fff;
}
.gx-gmc-simple-page .lx-container {
max-width: 700px !important;
width: min(calc(100% - 48px), 700px) !important;
}
.gx-gmc-simple-page__inner {
display: flex;
flex-direction: column;
gap: 40px;
}
.gx-gmc-simple-page__header {
border-bottom: 1px solid #eee;
padding-bottom: 28px;
}
.gx-gmc-simple-page__kicker {
font-size: .78rem !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .1em;
color: #800080 !important;
margin: 0 0 10px !important;
}
.gx-gmc-simple-page__header h1 {
font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
font-weight: 700 !important;
color: #111 !important;
margin: 0 0 10px !important;
line-height: 1.2 !important;
}
.gx-gmc-simple-page__subtitle {
font-size: 1rem !important;
color: #555 !important;
margin: 0 0 14px !important;
line-height: 1.6 !important;
}
.gx-gmc-simple-page__meta {
font-size: .82rem !important;
color: #888 !important;
margin: 0 !important;
}
.gx-gmc-simple-page__body {
display: flex;
flex-direction: column;
gap: 36px;
}
.gx-gmc-simple-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.gx-gmc-simple-section h2 {
font-size: 1.1rem !important;
font-weight: 700 !important;
color: #111 !important;
margin: 0 !important;
padding-bottom: 6px;
border-bottom: 2px solid #800080;
display: inline-block;
}
.gx-gmc-simple-section h3 {
font-size: .97rem !important;
font-weight: 700 !important;
color: #222 !important;
margin: 12px 0 4px !important;
}
.gx-gmc-simple-section p {
font-size: .95rem !important;
color: #444 !important;
line-height: 1.75 !important;
margin: 0 !important;
}
.gx-gmc-simple-list {
margin: 6px 0 0 0 !important;
padding-left: 18px !important;
display: flex;
flex-direction: column;
gap: 6px;
}
.gx-gmc-simple-list li {
font-size: .95rem !important;
color: #444 !important;
line-height: 1.65 !important;
list-style: disc !important;
}
.gx-gmc-simple-faq {
padding: 0;
}
.gx-gmc-simple-section--contact {
padding: 20px 24px;
background: #f9f7fb;
border-radius: 10px;
border-left: 3px solid #800080;
}
.gx-gmc-simple-section--contact h2 {
border-bottom: none;
display: block;
padding-bottom: 0;
}
/* ── Policy pages via page.php (lx-entry-content) ───────────────────────── */
.gx-policy-content .lx-entry-content {
padding: clamp(36px, 5vw, 60px) 0;
}
.gx-policy-content .lx-entry-content h1,
.gx-policy-content .lx-entry-content h2 {
font-size: 1.08rem !important;
font-weight: 700 !important;
color: #111 !important;
margin: 28px 0 6px !important;
line-height: 1.3 !important;
}
.gx-policy-content .lx-entry-content h1:first-child,
.gx-policy-content .lx-entry-content h2:first-child {
margin-top: 0 !important;
}
.gx-policy-content .lx-entry-content p {
font-size: .95rem !important;
color: #444 !important;
line-height: 1.75 !important;
margin: 0 0 14px !important;
}
.gx-policy-content .lx-entry-content ul,
.gx-policy-content .lx-entry-content ol {
padding-left: 20px !important;
margin: 8px 0 16px !important;
}
.gx-policy-content .lx-entry-content li {
font-size: .95rem !important;
color: #444 !important;
line-height: 1.7 !important;
margin-bottom: 5px !important;
}
.gx-policy-content .lx-entry-content strong {
color: #222 !important;
font-weight: 700 !important;
}
.gx-policy-content .lx-entry-content a {
color: #800080 !important;
}
.lx-info-box {
background: #f9f7fb !important;
border-left: 3px solid #800080 !important;
border-radius: 8px !important;
padding: 14px 18px !important;
margin-bottom: 20px !important;
}
.lx-info-box p {
margin: 0 !important;
font-size: .92rem !important;
color: #555 !important;
}
/* ============================================================
FINAL NARROW PAGE WIDTH FIX v2.5.4
Keeps policy/customer pages readable even after global full-width fixes.
============================================================ */
html body .gx-gmc-simple-page > .lx-container,
html body .gx-gmc-page .gx-gmc-simple-page > .lx-container,
html body .lx-page-content > .gx-page-narrow-container,
html body .gx-page-narrow-container {
width: min(calc(100% - 48px), 700px) !important;
max-width: 700px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html body .gx-page-narrow-container .lx-page-content__inner,
html body .gx-page-narrow-container .lx-entry-content,
html body .gx-policy-content,
html body .gx-policy-content .lx-entry-content,
html body .gx-gmc-simple-page__inner,
html body .gx-gmc-simple-page__body {
width: 100% !important;
max-width: 700px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 640px) {
html body .gx-gmc-simple-page > .lx-container,
html body .gx-gmc-page .gx-gmc-simple-page > .lx-container,
html body .lx-page-content > .gx-page-narrow-container,
html body .gx-page-narrow-container {
width: min(calc(100% - 28px), 700px) !important;
max-width: 700px !important;
}
}