/* Gpointx smart storefront — final overrides */
:root {
    --gp-ink: #071525;
    --gp-navy: #0b1f36;
    --gp-navy-2: #102b49;
    --gp-cyan: #35e5ed;
    --gp-blue: #2878ff;
    --gp-line: #dce7f2;
    --gp-surface: #f5f8fc;
    --gp-width: 1320px;
}

body {
    background:
        radial-gradient(circle at 8% 4%, rgba(53, 229, 237, .09), transparent 26rem),
        linear-gradient(180deg, #eaf3fc 0, #f4f8fd 440px, #edf4fb 100%);
    color: var(--gp-ink);
}

main { background: transparent; }

.header {
    position: sticky;
    top: 0;
    z-index: 1001;
    width: 100%;
    padding: 10px 18px 5px !important;
    background: rgba(246, 249, 253, .92) !important;
    backdrop-filter: blur(16px);
    box-shadow: none !important;
}

.header-container {
    width: min(var(--gp-width), calc(100% - 2px)) !important;
    min-height: 66px !important;
    margin: 0 auto !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: max-content minmax(250px, 1fr) max-content max-content;
    align-items: center;
    gap: 14px !important;
    border: 1px solid rgba(71, 184, 255, .14);
    border-radius: 22px;
    background: linear-gradient(115deg, #061321, #0d2239 62%, #071a2e);
    box-shadow: 0 12px 30px rgba(5, 25, 48, .2), inset 0 1px rgba(255,255,255,.06);
}

.gpointx-brand { display: inline-flex !important; align-items: center; gap: 9px; color: #fff !important; text-decoration: none; }
.gpointx-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--gp-cyan);
    border-radius: 52% 52% 52% 12%;
    transform: rotate(-45deg);
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(145deg, rgba(53,229,237,.2), rgba(40,120,255,.45));
    box-shadow: 0 0 18px rgba(53,229,237,.35);
}
.gpointx-mark { line-height: 1; }
.gpointx-mark > span { display: block; transform: rotate(45deg); }
.gpointx-mark::after { content: ''; position: absolute; width: 6px; height: 6px; right: -5px; top: -4px; border-radius: 50%; background: var(--gp-cyan); box-shadow: 0 0 9px var(--gp-cyan); }
.gpointx-wordmark { color: #fff !important; font-size: 24px; font-weight: 800; letter-spacing: -.7px; background: linear-gradient(90deg,#fff 15%,var(--gp-cyan),#53a2ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.header-primary-search { width: 100%; max-width: 520px; justify-self: stretch; position: relative; z-index: 2; }
.header-primary-search .search-leading-icon { position: absolute; left: 17px; z-index: 2; color: #7890aa; font-size: 13px; }
.header-primary-search input { width: 100% !important; height: 44px !important; padding: 0 54px 0 41px !important; border: 1px solid #d7e1f2 !important; border-radius: 14px !important; background: #f8faff !important; color: #172033 !important; caret-color: #2563eb !important; -webkit-text-fill-color: #172033 !important; opacity: 1 !important; outline: none; }
.header-primary-search input::placeholder { color: #8090aa !important; -webkit-text-fill-color: #8090aa !important; opacity: 1 !important; }
.header-primary-search input:focus { border-color: rgba(53,229,237,.75) !important; box-shadow: 0 0 0 3px rgba(53,229,237,.1); }
.header-primary-search button { position: absolute; right: 4px; width: 38px !important; height: 36px !important; border-radius: 10px !important; color: #fff; background: linear-gradient(135deg,var(--gp-cyan),var(--gp-blue)) !important; }

.gpointx-quick-links { display: flex !important; align-items: center; gap: 5px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; white-space: nowrap; }
.gpointx-quick-links a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px !important; border-radius: 11px; color: #edf6ff !important; background: transparent !important; font-size: 13px !important; font-weight: 700 !important; opacity: 1 !important; }
.gpointx-quick-links a::after { display: none !important; }
.gpointx-quick-links a:hover { color: #fff !important; background: rgba(53,229,237,.1); }
.gpointx-quick-links a:first-child { color: #ffd761 !important; border: 1px solid rgba(255,193,48,.25); background: rgba(255,193,48,.08); }

.header-right { min-width: 0; margin: 0 !important; }
.header-icons { display: flex; align-items: center; gap: 7px !important; color: #fff; white-space: nowrap; }
.header-icons > a { display: grid; place-items: center; width: 38px; height: 38px; color: #eaf4ff; border-radius: 11px; transition: .2s ease; }
.header-icons > a:hover { color: var(--gp-cyan); background: rgba(53,229,237,.1); }
.cart span { background: linear-gradient(135deg,var(--gp-cyan),var(--gp-blue)) !important; color: #fff !important; }
.login-btn { min-width: 86px; height: 40px; padding: 0 15px !important; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0 !important; border-radius: 12px !important; color: #fff !important; background: linear-gradient(135deg,#18cfe2,var(--gp-blue)) !important; box-shadow: 0 7px 18px rgba(40,120,255,.25); }
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(40,120,255,.35); }
.customer-account { position: relative !important; z-index: 20 !important; pointer-events: auto !important; }
.customer-account .customer-name { position: relative !important; z-index: 21 !important; pointer-events: auto !important; cursor: pointer !important; text-decoration: none !important; }
.customer-account .customer-name > * { pointer-events: none !important; }
.mobile-menu-toggle { color: #fff !important; }

.header-category-nav { top: 81px !important; z-index: 1000 !important; padding: 0 18px 8px !important; background: rgba(246,249,253,.97) !important; backdrop-filter: none !important; box-shadow: none !important; overflow: visible !important; }
.header-category-container { width: min(var(--gp-width), calc(100% - 2px)) !important; min-height: 54px; padding: 5px 9px !important; border: 1px solid rgba(71,184,255,.13) !important; border-radius: 18px !important; background: linear-gradient(105deg,#0b2138,#102e4b 60%,#0a2037) !important; box-shadow: 0 10px 24px rgba(5,25,48,.16) !important; }
.header-category-track { justify-content: space-around !important; }
.header-category-item { flex: 1 0 auto !important; min-width: 135px !important; }
.header-category-link { min-height: 42px !important; padding: 6px 15px !important; display: flex !important; justify-content: center; gap: 9px !important; border-radius: 11px !important; color: #f4f9ff !important; background: transparent !important; opacity: 1 !important; overflow: visible !important; }
.header-category-main-icon { display: inline-block !important; color: #9cc5e9 !important; font-size: 15px !important; }
.header-category-link > span:not(.header-category-fallback) { color: #f4f9ff !important; font-size: 13px !important; font-weight: 700 !important; opacity: 1 !important; }
.header-category-image { width: 38px; height: 38px; flex: 0 0 38px; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; object-fit: cover; object-position: center; background: #fff; box-shadow: 0 4px 13px rgba(0,0,0,.24); }
.header-category-fallback { position: relative; width: 38px; height: 38px; flex: 0 0 38px; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.18); overflow: hidden !important; }
.header-category-fallback .header-category-main-icon { position: static !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 17px !important; line-height: 20px !important; text-align: center !important; transform: none !important; }
.header-category-fallback .header-category-main-icon::before { display: block; width: 16px; line-height: 16px; text-align: center; }
.header-category-fallback--accessories .header-category-main-icon { color: #f14fa4 !important; }
.header-category-fallback--gadget .header-category-main-icon { color: #3f7cff !important; }
.header-category-fallback--mobile .header-category-main-icon { color: #10c98f !important; }
.header-category-fallback--sounds .header-category-main-icon { color: #ff9d17 !important; }
.header-category-fallback--tablet .header-category-main-icon { color: #ff7539 !important; }
.header-category-fallback--smart-watch .header-category-main-icon { color: #8b4cf3 !important; }
.header-category-item:hover > .header-category-link { color: #fff !important; background: linear-gradient(135deg,rgba(53,229,237,.18),rgba(40,120,255,.2)) !important; }
.header-category-item:hover > .header-category-link > span:not(.header-category-fallback) { color: #fff !important; }
.header-category-item:hover .header-category-main-icon { color: var(--gp-cyan) !important; }
.header-category-arrow { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; color: #b7d4ed !important; border-color: rgba(151,194,228,.22) !important; background: rgba(255,255,255,.05) !important; }
.header-category-submenu { border-top: 2px solid var(--gp-cyan) !important; border-radius: 12px !important; box-shadow: 0 16px 34px rgba(5,25,48,.2) !important; }

.home-banner-section { max-width: var(--gp-width); margin: 0 auto; padding: 22px 0 12px !important; }
.home-banner-grid { grid-template-columns: minmax(0,2fr) minmax(280px,1fr) !important; }
.home-banner-left { order: 2; }
.home-banner-large { order: 1; }
.home-banner-card { border-radius: 16px !important; border-color: var(--gp-line) !important; box-shadow: 0 12px 30px rgba(15,42,70,.09) !important; }
.home-banner-services { max-width: var(--gp-width) !important; width: 100% !important; }
.home-banner-services .service-item { border: 1px solid var(--gp-line); border-radius: 14px; background: #fff; box-shadow: 0 7px 18px rgba(15,42,70,.05); }
.categories, .products { max-width: var(--gp-width); margin-left: auto; margin-right: auto; }
.category-card, .product-card { background: rgba(255,255,255,.94) !important; border-color: #cfdfef !important; box-shadow: 0 8px 20px rgba(15,42,70,.07) !important; }
.category-card:hover, .product-card:hover { transform: translateY(-4px); border-color: rgba(40,120,255,.35) !important; box-shadow: 0 14px 28px rgba(31,92,165,.12) !important; }

@media (max-width: 1180px) {
    .header-container { grid-template-columns: max-content minmax(220px,1fr) max-content; }
    .gpointx-quick-links { display: none !important; }
}

@media (max-width: 800px) {
    .header { padding: 6px 8px 3px !important; }
    .header-container { width: 100% !important; min-height: 58px !important; grid-template-columns: max-content minmax(0,1fr) max-content !important; gap: 7px !important; padding: 6px 8px !important; border-radius: 15px; }
    .gpointx-wordmark { display: none; }
    .gpointx-mark { width: 34px; height: 34px; font-size: 18px; }
    .header-primary-search { display: flex !important; order: initial !important; }
    .header-primary-search input { height: 38px !important; padding-left: 34px !important; font-size: 11px !important; }
    .header-primary-search .search-leading-icon { left: 12px; }
    .header-primary-search button { width: 34px !important; height: 30px !important; }
    .header-right { order: initial !important; }
    .header-icons { gap: 1px !important; }
    .header-icons > a { width: 32px; height: 34px; }
    .wishlist-link { display: none !important; }
    .login-btn { min-width: 36px; width: 36px; height: 34px; padding: 0 !important; }
    .login-btn span { display: none !important; }
    .mobile-menu-toggle { display: none !important; }
    .header-category-nav { top: 67px !important; padding: 0 8px 5px !important; }
    .header-category-container { width: 100% !important; min-height: 48px; border-radius: 14px !important; }
    .header-category-item { min-width: 118px !important; }
    .header-category-link { padding: 7px 9px !important; }
    .home-banner-section, .home-banner-services { width: calc(100% - 16px) !important; }
}

@media (max-width: 480px) {
    .header-icons > .cart { width: 30px; }
    .customer-account .customer-name span { display: none; }
    .home-banner-grid { grid-template-columns: 1fr !important; }
    .home-banner-left { order: 2; }
}

/* Category logo perfectly centered inside circle */
.header-category-fallback {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.header-category-fallback .header-category-main-icon {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}

.header-category-fallback .header-category-main-icon::before {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}