/* ===================================================================== balOON.LK — original storefront design (dark default) + light theme Toggle via . Fonts: Manrope (body), Saira (display), Eras Bold ITC (logo) ===================================================================== */ @font-face{ font-family:'Eras Bold ITC'; src:url('../fonts/eras-bold-itc.woff2') format('woff2'), url('../fonts/eras-bold-itc.ttf') format('truetype'); font-weight:700;font-style:normal;font-display:swap; } :root{ /* brand accents (same in both themes) */ --pink:#ff2d9b; --pink-2:#c4187a; --pink-soft:#ff5bb0; --purple:#7c3aed; --purple-2:#a78bfa; --gold:#f59e0b; --card:#fff; --card-ink:#1c1530; --radius:14px; --wrap:1280px; --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --display:'Saira',var(--font); /* DARK theme surfaces (default) */ --page-bg:#07060f; --page-glow:radial-gradient(60% 40% at 80% 0%,rgba(124,58,237,.12),transparent 60%); --topbar-bg:#050409; --header-bg:#0a0813; --footer-bg:#080611; --sidebar-bg:#0d0a1c; --strip-bg:linear-gradient(90deg,#120a26,#0e0820); --strip-border:rgba(255,255,255,.06); --ink:#fff; --logo-ink:#fff; --muted:#9b95b5; --muted-2:#c6c0da; --line:rgba(255,255,255,.06); --chip-bg:rgba(255,255,255,.07); } [data-theme="light"]{ --page-bg:#eef0f7; --page-glow:radial-gradient(60% 40% at 85% 0%,rgba(255,45,155,.10),transparent 60%); --topbar-bg:#ffffff; --header-bg:#ffffff; --footer-bg:#ffffff; --sidebar-bg:#ffffff; --strip-bg:#ffffff; --strip-border:rgba(20,10,40,.10); --ink:#1b1430; --logo-ink:#1b1430; --muted:#6b6580; --muted-2:#39324f; --line:rgba(20,10,40,.09); --chip-bg:rgba(20,10,40,.05); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body.baloon-theme{ margin:0; background:var(--page-glow),var(--page-bg); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .3s ease,color .3s ease; } body.baloon-theme a{color:inherit;text-decoration:none;} body.baloon-theme img{max-width:100%;height:auto;display:block;} body.baloon-theme h1,body.baloon-theme h2,body.baloon-theme h3,body.baloon-theme h4{font-family:var(--display);margin:0;} .bl-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;width:100%;} .scrollrow{scrollbar-width:none;-ms-overflow-style:none;} .scrollrow::-webkit-scrollbar{display:none;} /* ---------- TOP BAR ---------- */ .bl-topbar{background:var(--topbar-bg);border-bottom:1px solid var(--line);} .bl-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 20px;} .bl-topbar__promo{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted-2);} .bl-topbar__promo b{color:var(--pink);font-weight:700;} .bl-topbar__bolt{color:var(--pink);font-size:14px;} .bl-topbar__right{display:flex;align-items:center;gap:16px;} .bl-social{display:flex;align-items:center;gap:11px;} .bl-social a{width:24px;height:24px;border-radius:50%;background:var(--chip-bg);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.2s;} .bl-social a:hover{background:var(--pink);color:#fff;} .bl-topbar__sep{width:1px;height:14px;background:var(--line);} .bl-topbar__links{display:flex;align-items:center;gap:16px;list-style:none;margin:0;padding:0;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted-2);} .bl-topbar__links a:hover{color:var(--pink);} /* theme toggle */ .bl-theme-toggle{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:20px;background:var(--chip-bg);border:1px solid var(--line);color:var(--ink);cursor:pointer;font-family:var(--font);} .bl-theme-toggle:hover{border-color:var(--pink);} .bl-theme-toggle .ico-sun{display:none;} .bl-theme-toggle .ico-moon{display:inline-flex;} [data-theme="light"] .bl-theme-toggle .ico-sun{display:inline-flex;} [data-theme="light"] .bl-theme-toggle .ico-moon{display:none;} /* ---------- MAIN HEADER ---------- */ .bl-header{background:var(--header-bg);border-bottom:1px solid var(--line);} .bl-header__inner{display:flex;align-items:center;gap:26px;padding:16px 20px;} .bl-burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:4px;margin-right:2px;} .bl-logo{flex-shrink:0;display:flex;align-items:center;} /* image logo with light/dark swap by theme mode */ .bl-logo__img{display:inline-flex;align-items:center;line-height:0;height:54px;} .bl-logo__img img{width:auto;object-fit:contain;display:none;} /* dark-mode logo (white letters, fills frame edge-to-edge) — smaller so it visually matches the light pill logo */ .bl-logo .bl-logo__dark{display:inline-block!important;height:28px!important;max-height:28px!important;width:auto!important;} /* light-mode logo (navy pill, has padding around the text) */ .bl-logo .bl-logo__light{display:none!important;height:48px!important;max-height:48px!important;width:auto!important;} [data-theme="light"] .bl-logo__dark{display:none!important;} [data-theme="light"] .bl-logo__light{display:inline-block!important;} @media (max-width:768px){ .bl-logo__img{height:44px;} .bl-logo .bl-logo__dark{height:22px!important;max-height:22px!important;} .bl-logo .bl-logo__light{height:40px!important;max-height:40px!important;} } .bl-logo__text{font-family:'Eras Bold ITC',var(--display);font-weight:700;font-style:normal;font-size:30px;line-height:1;letter-spacing:.005em;color:var(--logo-ink);display:inline-block;} .bl-logo__text--lg{font-size:25px;} .bl-logo__text .hl{color:var(--pink);text-shadow:0 0 14px rgba(255,45,155,.55);} .bl-logo__tag{font-size:8px;font-weight:700;letter-spacing:.32em;color:#8b84a6;margin-top:2px;} .bl-logo .the-custom-logo,.bl-logo>img{max-height:54px;width:auto;} .bl-search{flex:1;max-width:640px;} .bl-search__form{display:flex;align-items:stretch;background:#fff;border-radius:8px;overflow:hidden;height:44px;border:1px solid var(--line);} .bl-search__input{flex:1;border:none;outline:none;padding:0 16px;font-size:13.5px;font-family:var(--font);color:#222;background:#fff;} .bl-search__cat{display:flex;align-items:center;border-left:1px solid #e7e7ee;background:#fff;} .bl-search__cat select{border:none;outline:none;background:#fff;color:#555;font-size:12px;font-weight:600;font-family:var(--font);padding:0 12px;height:100%;cursor:pointer;max-width:170px;-webkit-appearance:menulist;appearance:menulist;} /* native dropdown options are OS-rendered; keep them readable in both modes */ .bl-search__cat select option{background:#fff;color:#333;} .bl-search__btn{width:52px;border:none;background:linear-gradient(135deg,var(--pink),var(--pink-2));display:flex;align-items:center;justify-content:center;cursor:pointer;} .bl-actions{display:flex;align-items:center;gap:20px;margin-left:auto;} .bl-account{display:flex;align-items:center;gap:9px;color:var(--ink);} .bl-account__txt{line-height:1.15;display:flex;flex-direction:column;} .bl-account__txt small{font-size:9px;color:var(--muted);font-weight:600;} .bl-account__txt b{font-size:12px;font-weight:700;color:var(--ink);} .bl-icon-btn{position:relative;color:var(--ink);display:inline-flex;} .bl-badge{position:absolute;top:-7px;right:-9px;background:var(--pink);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px;} .bl-cart-total{font-size:13px;font-weight:800;color:var(--ink);margin-left:-9px;} .bl-cart-total .amount{color:var(--ink);} /* ---------- CATEGORY NAV (dark accent bar in both themes) ---------- */ .bl-nav{background:linear-gradient(90deg,#11091f,#0c0817);border-top:1px solid rgba(255,45,155,.18);border-bottom:1px solid rgba(255,255,255,.05);} .bl-nav__inner{display:flex!important;align-items:center!important;gap:8px;height:48px!important;min-height:48px;padding:0 20px!important;margin:0 auto!important;} /* browse button must fill the full nav height and align with the menu line. Forced because WooCommerce archive pages load button resets that strip the pink fill and shift the row up. */ .bl-nav .bl-nav__browse, button.bl-nav__browse{background:linear-gradient(135deg,var(--pink),#b3146f)!important;background-image:linear-gradient(135deg,var(--pink),#b3146f)!important;align-self:stretch!important;height:48px!important;min-height:48px!important;margin:0!important;display:inline-flex!important;align-items:center!important;justify-content:center;gap:10px;padding:0 20px!important;font-size:12.5px!important;font-weight:800!important;letter-spacing:.03em;color:#fff!important;border:none!important;border-radius:0!important;box-shadow:none!important;cursor:pointer;font-family:var(--font)!important;line-height:1!important;text-transform:none!important;} .bl-nav .bl-nav__browse:hover{filter:brightness(1.05);} .bl-nav__menu{margin-left:14px;display:flex;align-items:center;} .bl-menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;font-size:12.5px;font-weight:700;letter-spacing:.03em;} .bl-menu li{position:relative;display:flex;align-items:center;} .bl-menu a{color:#d4cfe4;transition:.2s;text-transform:uppercase;line-height:1;display:inline-flex;align-items:center;} /* highlight the REAL active page (not always HOME) */ .bl-menu .current-menu-item>a, .bl-menu .current_page_item>a, .bl-menu .current-menu-ancestor>a, .bl-menu .current-menu-parent>a, .bl-menu .current-product_cat-ancestor>a, .bl-menu a:hover{color:var(--pink)!important;} /* HOME link is a custom link with .menu-item-home on EVERY page — only light it up on the actual front page, otherwise keep it neutral */ .bl-menu .menu-item-home>a{color:#d4cfe4;} .home.page .bl-menu .menu-item-home>a, .home.blog .bl-menu .menu-item-home>a, body.home .bl-menu .menu-item-home>a{color:var(--pink)!important;} [data-theme="light"] .bl-menu .menu-item-home>a{color:#e6e2f2;} [data-theme="light"] .home .bl-menu .menu-item-home>a{color:var(--pink)!important;} /* nav stays dark in BOTH themes — keep its own readable colors in light mode */ [data-theme="light"] .bl-nav{background:linear-gradient(90deg,#15102a,#0f0b22);} [data-theme="light"] .bl-menu a{color:#e6e2f2;} [data-theme="light"] .bl-nav__offer{color:#d8d2ea;} /* kill the browser text-selection highlight that looked like blue boxes */ .bl-nav ::selection,.bl-menu ::selection,.bl-nav__offer ::selection{background:rgba(255,45,155,.35);color:#fff;} .bl-menu .sub-menu{position:absolute;top:100%;left:0;min-width:200px;background:#0d0a1c;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 0;display:none;z-index:60;box-shadow:0 16px 40px rgba(0,0,0,.5);} .bl-menu li:hover>.sub-menu{display:block;} .bl-menu .sub-menu a{display:block;padding:8px 16px;font-size:12px;color:#c6c0da;text-transform:none;} .bl-menu .sub-menu a:hover{background:rgba(255,45,155,.09);color:#fff;} .bl-nav__offer{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.05em;color:#cabfe0;} .bl-nav.is-stuck{position:fixed;top:0;left:0;right:0;z-index:90;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:blDrop .3s ease;} @keyframes blDrop{from{transform:translateY(-100%);}to{transform:translateY(0);}} /* ---------- BODY GRID ---------- */ .bl-main-grid{display:flex;gap:18px;align-items:flex-start;padding-top:18px;} .bl-side{width:256px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;} .bl-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;} /* sidebar category card */ .bl-catbox{background:var(--sidebar-bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;} .bl-catbox__head{background:linear-gradient(135deg,var(--pink),#b3146f);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:800;letter-spacing:.03em;color:#fff;} .bl-catbox__head span{display:flex;align-items:center;gap:9px;} .bl-cat{display:flex;align-items:center;gap:11px;padding:9.5px 16px;border-bottom:1px solid var(--line);cursor:pointer;font-size:12px;font-weight:600;color:var(--muted-2);transition:.18s;} .bl-cat:hover{background:rgba(255,45,155,.09);color:var(--pink);} .bl-cat__ico{width:18px;height:18px;border-radius:5px;background:rgba(255,45,155,.13);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .bl-cat__name{flex:1;} /* sidebar promo */ .bl-promo{background:linear-gradient(135deg,#1c0f3a,#120a26);border:1px solid rgba(255,45,155,.25);border-radius:12px;padding:15px 16px;display:flex;align-items:center;gap:13px;} .bl-promo--alt{border-color:rgba(124,58,237,.3);} .bl-promo__t{font-family:var(--display);font-weight:800;font-size:16px;color:#fff;line-height:1.05;} .bl-promo__s{font-size:11px;color:#a89fc4;margin-top:3px;} .bl-promo__big{font-family:var(--display);font-weight:800;font-size:18px;color:var(--pink);margin-top:1px;} .bl-promo .hl{color:var(--pink);} /* ---------- HERO ---------- */ .bl-hero{position:relative;border-radius:16px;overflow:hidden;min-height:300px;background:radial-gradient(120% 100% at 78% 30%,#3a1170 0%,#1a0838 40%,#0a0518 100%);border:1px solid rgba(255,45,155,.2);isolation:isolate;} .bl-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,3,14,.95) 0%,rgba(7,5,20,.72) 38%,rgba(7,5,20,.18) 70%,rgba(7,5,20,.05) 100%);pointer-events:none;} .bl-hero__image{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.96;filter:saturate(1.35) brightness(1.18);} .bl-hero__glow{position:absolute;inset:0;z-index:2;background:radial-gradient(50% 60% at 80% 18%,rgba(255,45,155,.32),transparent 70%),radial-gradient(45% 55% at 60% 90%,rgba(124,58,237,.36),transparent 70%);pointer-events:none;mix-blend-mode:screen;} .bl-hero__inner{position:relative;z-index:3;padding:34px 38px;min-height:300px;display:flex;flex-direction:column;justify-content:center;max-width:62%;} .bl-hero__brand{font-family:var(--display);font-weight:800;font-size:15px;color:#fff;margin-bottom:8px;} .bl-hero__brand .hl{color:var(--pink);} .bl-hero__title{font-family:var(--display);font-weight:800;font-size:42px;line-height:.98;letter-spacing:-.01em;color:#fff;} .bl-hero__title .hl{color:var(--pink);} .bl-hero__sub{font-size:11.5px;line-height:1.7;color:#cabfe0;margin-top:16px;font-weight:500;} .bl-hero__art{position:absolute;right:30px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:14px;} .bl-hero__art-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,45,155,.4),transparent 65%);display:flex;align-items:center;justify-content:center;color:#fff;} .bl-hero__art-card{width:150px;height:185px;border-radius:18px;background:linear-gradient(160deg,#2a1458,#0e0622);border:1px solid rgba(168,85,247,.5);box-shadow:0 0 50px rgba(168,85,247,.45);display:flex;align-items:center;justify-content:center;} .bl-hero__cta{position:absolute;right:26px;bottom:18px;z-index:3;background:linear-gradient(135deg,var(--pink),var(--pink-2));padding:11px 22px;border-radius:30px;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;color:#fff;cursor:pointer;box-shadow:0 6px 20px rgba(255,45,155,.4);transition:.2s;} .bl-hero__cta:hover{transform:translateY(-2px);} .bl-hero__cta span{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;} .bl-hero__dots{position:absolute;left:38px;bottom:18px;z-index:3;display:flex;gap:6px;} .bl-hero__dots i{width:5px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);} .bl-hero__dots i.on{width:18px;background:var(--pink);} /* ---------- FEATURE STRIP ---------- */ .bl-features{background:var(--strip-bg);border:1px solid var(--strip-border);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .bl-feature{flex:1;min-width:160px;display:flex;align-items:center;gap:11px;} .bl-feature__ico{width:34px;height:34px;border-radius:9px;background:rgba(255,45,155,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .bl-feature__t{font-size:11.5px;font-weight:800;color:var(--ink);letter-spacing:.02em;} .bl-feature__s{font-size:10px;color:var(--muted);margin-top:1px;} .bl-btn-pink{background:linear-gradient(135deg,var(--pink),var(--pink-2));padding:11px 24px;border-radius:30px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#fff;cursor:pointer;border:none;font-family:var(--font);box-shadow:0 5px 16px rgba(255,45,155,.35);transition:.2s;} .bl-btn-pink:hover{transform:translateY(-2px);} /* ---------- PROMO CARDS ---------- */ .bl-promogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} .bl-promocard{position:relative;border-radius:14px;overflow:hidden;min-height:128px;background:linear-gradient(135deg,#241152,#120a2c);border:1px solid rgba(124,58,237,.35);padding:16px 18px;cursor:pointer;transition:.2s;isolation:isolate;} .bl-promocard::after{content:"";position:absolute;inset:0;z-index:0;background-image:var(--promo-img,none);background-size:cover;background-position:center;opacity:.9;filter:saturate(1.45) brightness(1.22);transition:transform .35s ease,opacity .35s ease;} .bl-promocard::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,5,34,.98) 0%,rgba(13,6,38,.82) 42%,rgba(13,6,38,.28) 74%,rgba(13,6,38,.06) 100%);pointer-events:none;} .bl-promocard:hover{border-color:var(--pink);transform:translateY(-3px);} .bl-promocard:hover::after{transform:scale(1.04);opacity:1;} .bl-promocard__glow{position:absolute;right:-10px;bottom:-10px;z-index:1;width:120px;height:120px;background:radial-gradient(circle,rgba(168,85,247,.4),transparent 65%);} .bl-promocard__top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;} .bl-promocard__t{font-family:var(--display);font-weight:800;font-size:16px;line-height:1.05;color:#fff;max-width:62%;} .bl-promocard__top>svg{opacity:.35;} .bl-promocard__s{position:relative;z-index:2;font-size:10.5px;color:#d9d3ee;margin-top:6px;line-height:1.4;max-width:58%;} .bl-promocard__btn{position:relative;z-index:2;margin-top:9px;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--pink),var(--pink-2));padding:5px 13px;border-radius:20px;font-size:10px;font-weight:800;color:#fff;} /* ---------- WHITE PANELS (carousels) ---------- */ .bl-panel{background:#fff;border-radius:16px;padding:18px 18px 22px;} .bl-panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;position:relative;} .bl-panel__spacer{flex:1;} .bl-panel__title{font-family:var(--display);font-weight:700;font-size:19px;color:#15101f;position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;} .bl-panel__viewall{font-size:12px;font-weight:700;color:var(--pink);cursor:pointer;} .bl-carousel{position:relative;} .bl-row{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;padding:2px;} .bl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;} .bl-arrow--prev{left:-10px;background:#fff;border:1px solid #eceaf2;box-shadow:0 4px 14px rgba(20,10,40,.12);color:#15101f;} .bl-arrow--next{right:-10px;background:linear-gradient(135deg,var(--pink),var(--pink-2));box-shadow:0 4px 14px rgba(255,45,155,.35);color:#fff;} /* ---------- PRODUCT CARD (white) ---------- */ .bl-card{min-width:206px;width:206px;flex-shrink:0;background:#fff;border:1px solid #ececf2;border-radius:13px;padding:13px;position:relative;transition:.2s;display:flex;flex-direction:column;} .bl-card:hover{box-shadow:0 10px 26px rgba(124,58,237,.16);border-color:#e2d8f5;transform:translateY(-3px);} .bl-card__badge{position:absolute;top:11px;left:11px;background:linear-gradient(135deg,#6d28d9,#4c1d95);color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:6px;z-index:2;} .bl-card__wish{position:absolute;top:11px;right:11px;width:28px;height:28px;border-radius:50%;background:#f4f1fb;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;color:#9a8fc0;transition:.2s;} .bl-card__wish:hover,.bl-card__wish.is-active{color:#ff2d9b;background:#ffe3f1;} .bl-card__media{height:128px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin:8px 0 12px;background:radial-gradient(circle at 50% 45%,rgba(124,58,237,.1),transparent 70%);overflow:hidden;} .bl-card__media img{max-height:128px;width:auto;object-fit:contain;} .bl-card__brand{font-size:10.5px;color:#9a93ad;font-weight:600;} .bl-card__title{font-size:13px;font-weight:700;color:var(--card-ink);margin-top:2px;line-height:1.25;min-height:33px;} .bl-card__title a{color:var(--card-ink);} .bl-card__title a:hover{color:var(--pink);} .bl-card__price{display:flex;align-items:baseline;gap:7px;margin-top:5px;flex-wrap:wrap;} .bl-card__price del,.bl-card__price .bl-old{font-size:11px;color:#aeb0bd;text-decoration:line-through;} .bl-card__price ins,.bl-card__price .bl-now,.bl-card__price .amount{font-size:14px;font-weight:800;color:#e11d48;text-decoration:none;} .bl-card__price del .amount{color:#aeb0bd;font-weight:400;} .bl-card__rating{margin-top:6px;} .bl-stars{color:var(--gold);font-size:12px;letter-spacing:1px;} .bl-card__reviews{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:10.5px;color:#9a93ad;} .bl-card__add{margin-top:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff;border-radius:9px;padding:8px 10px;font-size:11.5px;font-weight:800;cursor:pointer;transition:.2s;border:none;font-family:var(--font);} .bl-card__add:hover{filter:brightness(1.06);color:#fff;} .bl-card__add.added{opacity:.85;} .bl-card__add.loading{opacity:.6;pointer-events:none;} /* ---------- BRANDS STRIP ---------- */ .bl-brands{background:var(--strip-bg);border:1px solid var(--strip-border);border-radius:14px;padding:16px 14px;display:flex;align-items:center;gap:8px;} .bl-brands__row{flex:1;display:flex;align-items:center;justify-content:space-around;gap:8px;flex-wrap:wrap;} .bl-brand{font-family:var(--display);font-weight:800;font-size:18px;color:var(--muted-2);opacity:.85;letter-spacing:.02em;cursor:pointer;transition:.2s;} .bl-brand:hover{opacity:1;color:var(--pink-soft);} .bl-brands__nav{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;border:none;} .bl-brands__nav--prev{background:var(--chip-bg);border:1px solid var(--line);color:var(--muted-2);} .bl-brands__nav--next{background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff;} /* ---------- BOTTOM FEATURES ---------- */ .bl-botfeat{background:var(--strip-bg);border:1px solid var(--strip-border);border-radius:14px;padding:20px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .bl-botfeat .bl-feature{justify-content:center;} .bl-botfeat .bl-feature__ico{width:42px;height:42px;border-radius:11px;} /* ---------- NEWSLETTER ---------- */ .bl-newsletter{background:linear-gradient(100deg,#1a0d38,#120a28);border:1px solid rgba(255,45,155,.2);border-radius:14px;padding:24px 30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:16px;} .bl-newsletter__ico{width:58px;height:58px;border-radius:13px;background:radial-gradient(circle,rgba(255,45,155,.4),transparent 70%);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .bl-newsletter__txt{flex:1;min-width:230px;} .bl-newsletter__title{font-family:var(--display);font-weight:800;font-size:21px;color:#fff;} .bl-newsletter__sub{font-size:12.5px;color:#a89fc4;margin-top:3px;} .bl-newsletter__form{display:flex;align-items:center;background:#fff;border-radius:9px;overflow:hidden;height:48px;min-width:320px;flex:1;max-width:460px;} .bl-newsletter__form input{flex:1;border:none;outline:none;padding:0 18px;font-size:13px;font-family:var(--font);color:#222;} .bl-newsletter__form button{background:linear-gradient(135deg,var(--pink),var(--pink-2));height:100%;border:none;color:#fff;display:flex;align-items:center;padding:0 26px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:var(--font);} /* ---------- FOOTER ---------- */ .bl-footer{margin-top:26px;background:var(--footer-bg);border-top:1px solid var(--line);} .bl-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:30px;padding:34px 20px 26px;} .bl-footer__about{font-size:12px;color:var(--muted);line-height:1.7;margin:16px 0 0;max-width:230px;} .bl-footer__social{display:flex;gap:9px;margin-top:18px;} .bl-footer__social a{width:30px;height:30px;border-radius:7px;background:var(--chip-bg);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.2s;} .bl-footer__social a:hover{background:var(--pink);color:#fff;} .footer-col-title,.bl-footer__col .widget-title{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink);margin:0 0 15px;font-family:var(--font);text-transform:uppercase;} .bl-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .bl-footer__links a,.bl-footer__col .widget a{font-size:12px;color:var(--muted);transition:.2s;} .bl-footer__links a:hover,.bl-footer__col .widget a:hover{color:var(--pink-soft);} .bl-footer__col .widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .bl-footer__contact{display:flex;flex-direction:column;gap:13px;} .bl-footer__contact>div{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted-2);} .bl-footer__contact--addr{align-items:flex-start!important;} .bl-footer__contact--addr svg{flex-shrink:0;margin-top:1px;} .bl-footer__bar{border-top:1px solid var(--line);} .bl-footer__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 20px;} .bl-footer__copy{font-size:11.5px;color:var(--muted);} .bl-pays{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .bl-pay{height:26px;padding:0 9px;background:#fff;border:1px solid var(--line);border-radius:5px;display:flex;align-items:center;font-family:var(--display);font-weight:800;font-size:10px;color:#1a1a2e;} /* ---------- FLOATING BUTTONS ---------- */ .bl-float{position:fixed;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;z-index:50;transition:.25s;} .bl-float--wa{left:20px;bottom:20px;background:#25d366;box-shadow:0 6px 20px rgba(37,211,102,.45);} .bl-float--top{right:20px;bottom:20px;width:42px;height:42px;background:linear-gradient(135deg,var(--pink),var(--pink-2));box-shadow:0 6px 20px rgba(255,45,155,.45);opacity:0;visibility:hidden;transform:translateY(12px);} .bl-float--top.is-visible{opacity:1;visibility:visible;transform:translateY(0);} .bl-float:hover{transform:scale(1.08);} .bl-float--top.is-visible:hover{transform:translateY(0) scale(1.08);} /* ---------- SCROLL-REVEAL ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;} .reveal.is-in{opacity:1;transform:none;} .reveal[data-anim="left"]{transform:translateX(-30px);} .reveal[data-anim="right"]{transform:translateX(30px);} .reveal[data-anim="zoom"]{transform:scale(.94);} .reveal[data-anim="left"].is-in,.reveal[data-anim="right"].is-in,.reveal[data-anim="zoom"].is-in{transform:none;} @media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;}html{scroll-behavior:auto;}} /* ---------- MOBILE DRAWER ---------- */ .bl-overlay{position:fixed;inset:0;background:rgba(3,5,15,.62);z-index:120;opacity:0;visibility:hidden;transition:.25s;} .bl-overlay.is-open{opacity:1;visibility:visible;} .bl-drawer{position:fixed;top:0;left:0;height:100%;width:300px;max-width:84vw;background:var(--header-bg);border-right:1px solid var(--line);z-index:130;transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);overflow-y:auto;padding-bottom:40px;} .bl-drawer.is-open{transform:translateX(0);box-shadow:24px 0 60px rgba(0,0,0,.4);} .bl-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--header-bg);z-index:2;} .bl-drawer__head .bl-logo__text{font-size:22px;} .bl-drawer__close{background:none;border:none;color:var(--ink);cursor:pointer;} .bl-drawer__account{display:flex;align-items:center;gap:10px;padding:14px 18px;color:var(--ink);font-weight:700;font-size:13px;border-bottom:1px solid var(--line);} .bl-drawer__account:hover{color:var(--pink);} .bl-drawer__menu{list-style:none;margin:0;padding:6px 0;} .bl-drawer__menu li{border-bottom:1px solid var(--line);} .bl-drawer__menu a{display:block;padding:12px 18px;color:var(--muted-2);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em;} .bl-drawer__menu a:hover{color:var(--pink);background:rgba(255,45,155,.06);} .bl-drawer__menu .sub-menu{list-style:none;margin:0;padding:0;background:rgba(0,0,0,.06);} .bl-drawer__menu .sub-menu a{padding-left:34px;text-transform:none;font-weight:600;color:var(--muted);font-size:12.5px;} .bl-drawer__cats-title{padding:16px 18px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--pink);text-transform:uppercase;} .bl-drawer__cats{list-style:none;margin:0;padding:0 0 10px;} .bl-drawer__cats a{display:block;padding:9px 18px;color:var(--muted-2);font-size:12.5px;} .bl-drawer__cats a:hover{color:var(--pink);} body.bl-noscroll{overflow:hidden;} /* ===================================================================== INNER PAGES (banner, blog, single, woocommerce) ===================================================================== */ .bl-pagehero{position:relative;overflow:hidden;border-bottom:1px solid var(--line); background-image:linear-gradient(90deg,rgba(5,3,16,.96) 0%,rgba(9,8,34,.82) 48%,rgba(9,8,34,.28) 100%),url('../images/generated/page-banner.png'); background-size:cover; background-position:center; padding:30px 0 26px;margin-bottom:8px;} .bl-pagehero__title{font-family:var(--display);font-weight:800;font-size:30px;color:#fff;letter-spacing:.01em;} .bl-pagehero__sub{color:#cbb9e0;margin-top:6px;font-size:13.5px;} .bl-crumbs{font-size:12px;color:#b8aed0;margin-bottom:10px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;} .bl-crumbs a{color:var(--pink-soft);} .bl-crumbs a:hover{color:#fff;} .bl-crumbs .sep{color:#9a93ad;} .bl-blog{display:flex;gap:24px;align-items:flex-start;padding:26px 20px;} .bl-blog__main{flex:1;min-width:0;} .bl-blog__side{width:300px;flex-shrink:0;} .bl-postgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .bl-post{background:var(--sidebar-bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.2s;} .bl-post:hover{border-color:rgba(255,45,155,.4);transform:translateY(-3px);} .bl-post__thumb img{width:100%;height:180px;object-fit:cover;} .bl-post__body{padding:16px 18px 20px;} .bl-post__meta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;} .bl-post__title{font-size:18px;font-weight:700;margin:8px 0 10px;line-height:1.3;} .bl-post__title a{color:var(--ink);} .bl-post__title a:hover{color:var(--pink);} .bl-post__excerpt{font-size:13px;color:var(--muted-2);line-height:1.6;} .bl-post__more{display:inline-block;margin-top:14px;font-size:12px;font-weight:800;color:var(--pink);letter-spacing:.03em;} .bl-single{max-width:820px;margin:0 auto;padding:34px 20px;} .bl-single__title{font-family:var(--display);font-weight:800;font-size:34px;line-height:1.1;color:var(--ink);} .bl-single__meta{font-size:12px;color:var(--muted);margin:12px 0 22px;text-transform:uppercase;letter-spacing:.04em;} .bl-single__thumb{border-radius:14px;overflow:hidden;margin-bottom:24px;} .bl-content-area{color:var(--muted-2);font-size:15.5px;line-height:1.85;} .bl-content-area a{color:var(--pink-soft);text-decoration:underline;} .bl-content-area h2,.bl-content-area h3{color:var(--ink);margin:28px 0 12px;} .bl-content-area img{border-radius:12px;margin:18px 0;} .bl-content-area blockquote{border-left:3px solid var(--pink);padding:6px 18px;margin:20px 0;color:var(--ink);background:rgba(255,45,155,.06);border-radius:0 10px 10px 0;} .pagination,.bl-postgrid+.navigation{margin:28px 0 0;} .pagination .nav-links,.navigation .nav-links{display:flex;gap:8px;flex-wrap:wrap;} .pagination a,.pagination span,.navigation .nav-links a,.navigation .nav-links span{padding:8px 14px;border-radius:8px;background:var(--sidebar-bg);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted-2);} .pagination .current,.navigation .nav-links .current{background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff;border-color:transparent;} .bl-sidebar .widget{background:var(--sidebar-bg);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px;} .bl-sidebar .widget-title{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink);margin:0 0 14px;} .bl-sidebar .widget ul{list-style:none;margin:0;padding:0;} .bl-sidebar .widget li{padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;} .bl-sidebar .widget a{color:var(--muted-2);} .bl-sidebar .widget a:hover{color:var(--pink);} /* WooCommerce — white cards */ .bl-shop-layout{display:flex;gap:24px;align-items:flex-start;padding:26px 20px;} .bl-shop-layout .bl-shop-main{flex:1;min-width:0;} .bl-shop-layout .bl-shop-side{width:280px;flex-shrink:0;} ul.products,.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0;list-style:none;} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;background:#fff;border:1px solid #ececf2;border-radius:13px;padding:13px;position:relative;text-align:left;transition:.2s;color:var(--card-ink);} .woocommerce ul.products li.product:hover{box-shadow:0 10px 26px rgba(124,58,237,.16);border-color:#e2d8f5;transform:translateY(-3px);} .woocommerce ul.products li.product a img{margin:0 auto 10px;background:radial-gradient(circle at 50% 45%,rgba(124,58,237,.08),transparent 70%);border-radius:10px;} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13px;font-weight:700;color:var(--card-ink);padding:4px 0;} .woocommerce ul.products li.product .price{color:#e11d48;font-weight:800;font-size:14px;} .woocommerce ul.products li.product .price del{color:#aeb0bd;font-weight:400;font-size:11px;} .woocommerce ul.products li.product .price ins{text-decoration:none;} .woocommerce ul.products li.product .star-rating{font-size:.9em;margin:6px 0;color:var(--gold);} .woocommerce span.onsale{background:linear-gradient(135deg,#6d28d9,#4c1d95);color:#fff;border-radius:6px;min-height:auto;min-width:auto;padding:3px 8px;font-size:11px;font-weight:800;top:10px;left:10px;margin:0;line-height:1.2;} .woocommerce a.button,.woocommerce button.button,.woocommerce .button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{ background:linear-gradient(135deg,var(--pink),var(--pink-2))!important;color:#fff!important;border-radius:9px!important;font-weight:800!important;font-family:var(--font)!important;border:none!important;padding:.7em 1.2em!important;transition:.2s!important;text-transform:none; } .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover{filter:brightness(1.07);} .woocommerce .button.added::after{display:none;} .single-product .bl-shop-layout{display:block;} .woocommerce div.product{color:var(--muted-2);padding:26px 0;} .woocommerce div.product .product_title{font-family:var(--display);font-weight:800;color:var(--ink);font-size:30px;} .woocommerce div.product p.price,.woocommerce div.product span.price{color:#e11d48;font-weight:800;font-size:26px;} .woocommerce div.product p.price del{color:var(--muted);font-weight:400;font-size:18px;} .woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted-2);} .woocommerce .woocommerce-tabs ul.tabs li{background:var(--sidebar-bg);border-color:var(--line);} .woocommerce .woocommerce-tabs ul.tabs li a{color:var(--muted-2);} .woocommerce div.product .woocommerce-tabs .panel{color:var(--muted-2);} .woocommerce #reviews #comments ol.commentlist li .comment-text{background:var(--sidebar-bg);border-color:var(--line);border-radius:12px;} .woocommerce .quantity .qty{background:#fff;border-radius:8px;border:1px solid #e4e0ee;color:#222;padding:8px;} .woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--pink)!important;background:var(--sidebar-bg)!important;color:var(--ink)!important;border-radius:10px;} .woocommerce-message::before,.woocommerce-info::before{color:var(--pink)!important;} .woocommerce table.shop_table{background:var(--sidebar-bg);border-color:var(--line);border-radius:12px;color:var(--muted-2);} .woocommerce table.shop_table th{color:var(--ink);} .woocommerce-cart .cart-collaterals .cart_totals,.woocommerce form .form-row label{color:var(--muted-2);} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container--default .select2-selection--single{background:#fff;color:#222;border-radius:8px;border:1px solid #e4e0ee;} /* contact page */ .bl-contact{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;padding:30px 20px;align-items:start;} .bl-contact__info{display:flex;flex-direction:column;gap:14px;} .bl-cinfo{display:flex;gap:14px;align-items:flex-start;background:var(--sidebar-bg);border:1px solid var(--line);border-radius:14px;padding:16px 18px;} .bl-cinfo__ico{width:40px;height:40px;border-radius:10px;background:rgba(255,45,155,.1);color:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .bl-cinfo b{display:block;color:var(--ink);font-size:13px;margin-bottom:3px;} .bl-cinfo a,.bl-cinfo span{color:var(--muted-2);font-size:13px;} .bl-cinfo a:hover{color:var(--pink);} .bl-contact__wa{justify-content:center;margin-top:4px;} .bl-contact__form{background:var(--sidebar-bg);border:1px solid var(--line);border-radius:16px;padding:24px;} .bl-contact__h{color:var(--ink);font-size:20px;margin-bottom:16px;font-family:var(--display);font-weight:800;} .bl-form{display:flex;flex-direction:column;gap:12px;} .bl-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .bl-form input,.bl-form textarea{background:#fff;border:1px solid #e4e0ee;border-radius:10px;padding:12px 14px;color:#222;font-family:var(--font);font-size:13.5px;outline:none;width:100%;} .bl-form input:focus,.bl-form textarea:focus{border-color:var(--pink);} .bl-form button{align-self:flex-start;} .bl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .bl-notice{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-size:13px;} .bl-notice--ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#4ade80;} .bl-notice--err{background:rgba(255,45,155,.12);border:1px solid rgba(255,45,155,.4);color:#ff9ec4;} /* 404 + search form */ .bl-404{text-align:center;padding:80px 20px;} .bl-404__code{font-family:var(--display);font-weight:800;font-size:90px;color:var(--pink);line-height:1;} .bl-404__msg{font-size:18px;color:var(--muted-2);margin:10px 0 24px;} .bl-searchform{display:flex;align-items:stretch;background:#fff;border-radius:8px;overflow:hidden;height:44px;max-width:420px;} .bl-searchform input{flex:1;border:none;outline:none;padding:0 16px;font-size:13.5px;font-family:var(--font);color:#222;} .bl-searchform button{width:50px;border:none;background:linear-gradient(135deg,var(--pink),var(--pink-2));display:flex;align-items:center;justify-content:center;cursor:pointer;} .widget .bl-searchform{max-width:none;} .bl-tags{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;} .bl-tags a{font-size:12px;padding:5px 12px;border-radius:20px;background:var(--sidebar-bg);border:1px solid var(--line);color:var(--muted-2);} .bl-tags a:hover{border-color:var(--pink);color:var(--pink);} .post-navigation{max-width:820px;margin:30px auto 0;padding:0 20px;} .post-navigation .nav-links{display:flex;justify-content:space-between;gap:16px;} .post-navigation a{color:var(--muted-2);font-size:13px;font-weight:700;} .post-navigation a:hover{color:var(--pink);} .bl-row--grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .bl-row--grid .bl-card{width:auto;min-width:0;} /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:1080px){ .bl-side{width:220px;} .bl-hero__inner{max-width:70%;} ul.products,.woocommerce ul.products,.bl-row--grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:980px){ .bl-burger{display:inline-flex;align-items:center;} .bl-header__inner{flex-wrap:wrap;} .bl-search{order:3;flex-basis:100%;max-width:none;} .bl-menu{gap:18px;font-size:11.5px;} .bl-side{display:none;} .bl-promogrid{grid-template-columns:repeat(2,1fr);} .bl-hero__art{display:none;} .bl-hero__inner{max-width:100%;} .bl-hero__title{font-size:34px;} .bl-footer__cols{grid-template-columns:repeat(2,1fr);} .bl-postgrid{grid-template-columns:1fr;} .bl-blog{flex-direction:column;} .bl-blog__side{width:100%;} .bl-shop-layout{flex-direction:column;} .bl-shop-layout .bl-shop-side{width:100%;} .bl-contact{grid-template-columns:1fr;} } @media (max-width:720px){ .bl-topbar__links,.bl-nav__menu,.bl-nav__offer{display:none;} .bl-actions{gap:14px;} .bl-account__txt,.bl-cart-total{display:none;} .bl-menu{display:none;} .bl-promogrid{grid-template-columns:1fr;} .bl-features,.bl-botfeat{justify-content:flex-start;} .bl-feature{min-width:130px;} .bl-newsletter{flex-direction:column;align-items:flex-start;} .bl-newsletter__form{min-width:0;width:100%;max-width:none;} ul.products,.woocommerce ul.products,.bl-row--grid{grid-template-columns:repeat(2,1fr);} .bl-footer__cols{grid-template-columns:1fr;gap:24px;} .bl-hero__title{font-size:27px;} .bl-panel__title{position:static;transform:none;} .bl-search__cat{display:none;} .bl-form__row{grid-template-columns:1fr;} } @media (max-width:420px){ ul.products,.woocommerce ul.products,.bl-row--grid{grid-template-columns:1fr;} } /* ===================================================================== MOBILE APP MODE (bottom tab bar, chips, sticky header) — <=768px only ===================================================================== */ .bl-chips{display:none;} .bl-bottomnav{display:none;} @media (max-width:768px){ /* keep the top of the app fixed like a native shell */ .bl-header{position:sticky;top:0;z-index:80;box-shadow:0 4px 18px rgba(0,0,0,.18);} .bl-header__inner{padding:12px 16px;gap:14px;} .bl-search{order:3;flex-basis:100%;max-width:none;margin-top:4px;} .bl-search__form{height:42px;border-radius:24px;} .bl-logo__text{font-size:23px;} /* category chips strip */ .bl-chips{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;background:var(--header-bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:79;} .bl-chip{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--muted-2);background:var(--chip-bg);border:1px solid var(--line);padding:7px 14px;border-radius:20px;white-space:nowrap;} .bl-chip:active,.bl-chip:hover{border-color:var(--pink);color:var(--pink);} /* the dark accent nav bar isn't needed in app mode */ .bl-nav{display:none;} /* room for the bottom bar + iOS safe area */ body.baloon-theme{padding-bottom:calc(62px + env(safe-area-inset-bottom));} /* bottom tab bar */ .bl-bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--header-bg);border-top:1px solid var(--line);padding:6px 2px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 26px rgba(0,0,0,.28);} .bl-bottomnav__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:700;letter-spacing:.01em;color:var(--muted);background:none;border:none;cursor:pointer;padding:5px 0;font-family:var(--font);text-transform:capitalize;transition:color .15s;} .bl-bottomnav__item.is-active,.bl-bottomnav__item:active{color:var(--pink);} .bl-bottomnav__item svg{display:block;} .bl-bottomnav__cartwrap{position:relative;display:inline-flex;} .bl-bottomnav__badge{position:absolute;top:-6px;left:14px;background:var(--pink);color:#fff;font-size:8px;font-weight:800;min-width:15px;height:15px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-style:normal;box-shadow:0 0 0 2px var(--header-bg);} /* elevate the centre Cart tab like an app FAB */ .bl-bottomnav__item--cart .bl-bottomnav__cartwrap{width:48px;height:48px;margin-top:-22px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(255,45,155,.5);} .bl-bottomnav__item--cart{color:var(--ink);} .bl-bottomnav__item--cart .bl-bottomnav__badge{top:-2px;left:30px;box-shadow:0 0 0 2px #fff;} /* lift floating buttons above the bar */ .bl-float--wa{bottom:calc(78px + env(safe-area-inset-bottom));} .bl-float--top{bottom:calc(78px + env(safe-area-inset-bottom));} } /* ===================================================================== HEADER EXTRAS (wishlist/compare, mic, popular label, tagline variants) ===================================================================== */ .bl-search__mic{display:none;} .bl-logo__tag .tag-m{display:none;} .bl-chips__label{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--pink);align-self:center;} .bl-wish-count,.bl-compare-count{background:var(--purple);} @media (max-width:980px){ .bl-hide-mobile{display:none;} } @media (max-width:768px){ .bl-search__mic{display:inline-flex;align-items:center;background:none;border:none;color:var(--muted);padding:0 8px;cursor:pointer;} .bl-logo__tag .tag-d{display:none;} .bl-logo__tag .tag-m{display:inline;} } /* ===================================================================== MOBILE "APP" HOMEPAGE (navy) — shown only <=768px ===================================================================== */ .bl-home-mobile{display:none;} @media (max-width:768px){ .bl-home-desktop{display:none;} .bl-home-mobile{display:block;padding-top:14px;} /* gradient page background: dark at top -> blue shade at bottom */ html[data-theme="dark"] body.baloon-theme{background:linear-gradient(180deg,#06060f 0%,#0a1226 52%,#0d1c40 100%);background-attachment:fixed;} } /* hero */ .bl-mhero{position:relative;overflow:hidden;border-radius:18px; background:radial-gradient(60% 90% at 82% 35%,rgba(59,130,246,.35),transparent 60%),radial-gradient(50% 80% at 92% 75%,rgba(255,45,155,.3),transparent 60%),linear-gradient(120deg,#1a1140,#0d0b2a 55%,#0a0820); border:1px solid rgba(168,85,247,.3);padding:26px 22px;isolation:isolate;} .bl-mhero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,6,26,.92) 0%,rgba(8,6,26,.62) 58%,rgba(8,6,26,.16) 100%);pointer-events:none;} .bl-mhero__image{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:62% center;opacity:.72;filter:saturate(1.45) brightness(1.12);} .bl-mhero__stars{position:absolute;inset:0;z-index:2;background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 75% 20%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 50% 70%,rgba(45,212,255,.6),transparent);opacity:.7;pointer-events:none;} .bl-mhero__in{position:relative;z-index:3;} .bl-mhero__kicker{font-family:var(--display);font-weight:800;color:var(--pink);font-size:14px;letter-spacing:.04em;} .bl-mhero__sale{display:flex;align-items:baseline;gap:8px;margin:2px 0 4px;font-family:var(--display);font-weight:800;line-height:.95;} .bl-mhero__sale .up{font-size:18px;color:#fff;} .bl-mhero__sale .big{font-size:56px;background:linear-gradient(135deg,#ff2d9b,#ffb020);-webkit-background-clip:text;background-clip:text;color:transparent;} .bl-mhero__sale .off{font-size:20px;color:#fff;} .bl-mhero__lead{font-family:var(--display);font-weight:800;font-size:22px;color:#fff;} .bl-mhero__list{font-size:12px;line-height:1.85;color:#cdd3ee;margin-top:8px;} .bl-mhero__cta{margin-top:15px;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--pink),var(--pink-2));padding:11px 22px;border-radius:30px;font-size:12.5px;font-weight:800;color:#fff;box-shadow:0 8px 22px rgba(255,45,155,.45);} .bl-mhero__cta span{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;} .bl-mhero__dots{position:relative;z-index:3;display:flex;gap:6px;margin-top:14px;} .bl-mhero__dots i{width:6px;height:6px;border-radius:4px;background:rgba(255,255,255,.3);} .bl-mhero__dots i.on{width:20px;background:var(--pink);} /* section shell */ .bl-msec{margin-top:24px;} .bl-msec__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px;} .bl-msec__title{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:16px;color:#fff;text-transform:uppercase;letter-spacing:.02em;} .bl-msec__title .ico{color:#2dd4ff;display:flex;} .bl-msec__all{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#2dd4ff;white-space:nowrap;} /* category icon grid (big icons) */ .bl-mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .bl-mtile{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,#10183c,#0b1024);border:1px solid rgba(120,140,220,.16);border-radius:15px;min-height:112px;padding:15px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;} .bl-mtile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,14,36,.18),rgba(10,14,36,.92));} .bl-mtile__art{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.62;filter:saturate(1.55) brightness(1.12);transition:transform .3s ease,opacity .3s ease;} .bl-mtile:hover .bl-mtile__art{transform:scale(1.06);opacity:.78;} .bl-mtile__ico{width:50px;height:50px;border-radius:16px;background:rgba(5,8,24,.58);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#2dd4ff;backdrop-filter:blur(5px);} .bl-mtile__ico svg{width:32px;height:32px;} .bl-mtile__ico.c1{color:var(--pink);} .bl-mtile__ico.c2{color:#a855f7;} .bl-mtile__ico.c3{color:#22e3c0;} .bl-mtile__label{position:relative;font-size:10px;font-weight:800;color:#fff;line-height:1.15;text-shadow:0 1px 8px rgba(0,0,0,.8);} /* ---- MOBILE neon category grid (dark tile + glowing neon icon + label) ---- */ .bl-catsec--mobile{display:none;} .bl-neongrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .bl-neontile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center; min-height:104px;padding:14px 6px;border-radius:16px; background:linear-gradient(165deg,rgba(30,22,60,.55),rgba(10,12,30,.85)); border:1px solid rgba(130,110,230,.28);position:relative;overflow:hidden;transition:.2s;} .bl-neontile::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px; background:linear-gradient(140deg,rgba(168,85,247,.55),rgba(34,227,192,.18),rgba(255,45,155,.4)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;} .bl-neontile:active,.bl-neontile:hover{transform:translateY(-2px);border-color:rgba(168,85,247,.6);box-shadow:0 8px 26px rgba(120,60,220,.3);} .bl-neontile__ico{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center; background:rgba(8,8,26,.5);border:1px solid rgba(255,255,255,.07);} .bl-neontile__ico svg{width:30px;height:30px;filter:drop-shadow(0 0 6px currentColor);} .bl-neontile__ico.c1{color:#c084fc;} .bl-neontile__ico.c2{color:#38bdf8;} .bl-neontile__ico.c3{color:#2dd4bf;} .bl-neontile__label{font-size:10.5px;font-weight:700;color:#e8e4f5;line-height:1.2;} /* countdown */ .bl-countdown{display:flex;align-items:center;gap:4px;} .bl-cd{background:linear-gradient(135deg,var(--pink),var(--pink-2));border-radius:6px;min-width:34px;padding:4px 3px;text-align:center;line-height:1;} .bl-cd b{font-family:var(--display);font-weight:800;font-size:15px;color:#fff;display:block;} .bl-cd small{font-size:7px;letter-spacing:.05em;color:rgba(255,255,255,.85);font-weight:700;} .bl-cd-sep{color:var(--pink);font-weight:800;} /* dark cards rows */ .bl-drow{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;padding:2px;scrollbar-width:none;} .bl-drow::-webkit-scrollbar{display:none;} .bl-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .bl-dcard{min-width:200px;width:200px;flex-shrink:0;background:linear-gradient(165deg,#10173a,#0b1126);border:1px solid rgba(120,140,220,.16);border-radius:16px;padding:13px;position:relative;display:flex;flex-direction:column;} .bl-dgrid .bl-dcard{min-width:0;width:auto;} .bl-dcard__badge{position:absolute;top:11px;left:11px;background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:7px;z-index:2;} .bl-dcard__wish{position:absolute;top:9px;right:9px;z-index:2;} .bl-dcard__wish .bl-card__wish{background:rgba(120,140,220,.16);color:#aeb6da;} .bl-dcard__wish .yith-wcwl-add-to-wishlist{margin:0;font-size:0;} .bl-dcard__wish .yith-wcwl-add-to-wishlist a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(120,140,220,.16);color:#ff5ea6;} .bl-dcard__media{height:120px;display:flex;align-items:center;justify-content:center;margin:6px 0 10px;background:radial-gradient(circle at 50% 40%,rgba(59,130,246,.12),transparent 70%);border-radius:11px;overflow:hidden;} .bl-dcard__media img{max-height:120px;width:auto;object-fit:contain;} .bl-dgrid .bl-dcard__media{width:100%;} .bl-dcard__brand{font-size:10px;color:#8b94bd;font-weight:600;text-transform:uppercase;letter-spacing:.04em;} .bl-dcard__title{font-size:12.5px;font-weight:700;color:#fff;margin-top:3px;line-height:1.25;min-height:32px;} .bl-dcard__title a{color:#fff;} .bl-dcard__specs{font-size:10.5px;color:#8b94bd;margin-top:2px;} .bl-dcard__price{display:flex;align-items:baseline;gap:7px;margin-top:6px;flex-wrap:wrap;} .bl-dcard__price del,.bl-dcard__price del .amount{font-size:11px;color:#6b7397;text-decoration:line-through;} .bl-dcard__price .bl-now,.bl-dcard__price .bl-now .amount{font-size:15px;font-weight:800;color:#fff;} .bl-dcard__inst{font-size:10px;color:#ff5ea6;font-weight:700;margin-top:4px;border-top:1px dashed rgba(255,45,155,.3);padding-top:5px;display:inline-block;} .bl-dcard__rating{margin-top:6px;display:flex;align-items:center;gap:6px;} .bl-dcard__rc{font-size:10.5px;color:#8b94bd;} .bl-dcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;} .bl-dcard__add{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff;border-radius:10px;width:38px;height:38px;border:none;cursor:pointer;flex-shrink:0;box-shadow:0 5px 14px rgba(255,45,155,.4);} .bl-dmini{min-width:150px;width:150px;flex-shrink:0;background:linear-gradient(165deg,#10173a,#0b1126);border:1px solid rgba(120,140,220,.16);border-radius:14px;padding:11px;position:relative;text-align:center;} .bl-dmini__badge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#ff7a2d,#ff2d9b);color:#fff;font-size:8.5px;font-weight:800;padding:3px 7px;border-radius:6px;z-index:2;} .bl-dmini__media{height:96px;display:flex;align-items:center;justify-content:center;margin:4px 0 8px;background:radial-gradient(circle at 50% 40%,rgba(59,130,246,.12),transparent 70%);border-radius:10px;overflow:hidden;} .bl-dmini__media img{max-height:96px;width:auto;object-fit:contain;} .bl-dmini__title{font-size:11.5px;font-weight:700;color:#fff;line-height:1.2;min-height:28px;} .bl-dmini__title a{color:#fff;} .bl-dmini__price{font-size:13px;font-weight:800;color:#2dd4ff;margin-top:4px;} /* brand tiles */ .bl-bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .bl-btile{background:linear-gradient(160deg,#10183c,#0b1024);border:1px solid rgba(120,140,220,.16);border-radius:12px;height:60px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:15px;color:#dfe3f7;} /* video + banner */ .bl-video,.bl-video.reveal{opacity:1!important;transform:none!important;display:block!important;} .bl-video__frame{position:relative;width:100%;aspect-ratio:16/9;min-height:240px;border-radius:16px;overflow:hidden;background:#0b1126;border:1px solid rgba(120,140,220,.16);display:block;} .bl-video__frame iframe,.bl-video__frame video{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;object-fit:cover;display:block;background:#0b1126;} .bl-banner img{width:100%;border-radius:16px;display:block;border:1px solid rgba(168,85,247,.28);box-shadow:0 12px 34px rgba(7,5,24,.35);} .bl-banner__ph{border-radius:16px;padding:24px 20px;text-align:center;border:1px solid rgba(168,85,247,.35); background:radial-gradient(60% 110% at 82% 25%,rgba(168,85,247,.45),transparent 60%),linear-gradient(120deg,#1a1140,#0d0b2a);} .bl-banner__big{font-family:var(--display);font-weight:800;font-size:42px;letter-spacing:.05em;background:linear-gradient(135deg,#ff5ea6,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;} .bl-banner__t{font-family:var(--display);font-weight:800;font-size:18px;color:#fff;margin-top:2px;} .bl-banner__s{font-size:11.5px;color:#cdd3ee;margin-top:6px;} /* ===================================================================== REAL BANNER IMAGES (desktop hero, mobile hero, KOKO) + photo promo cards ===================================================================== */ /* desktop hero = full clickable banner image (text is baked into the art) */ .bl-hero--banner{display:block;min-height:0;aspect-ratio:1600/665;overflow:hidden;padding:0;} .bl-hero--banner .bl-hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;filter:none;} /* mobile hero = full clickable Summer-Sale banner image */ .bl-mhero--banner{display:block;position:relative;padding:0;min-height:0;aspect-ratio:1120/920;overflow:hidden;background:none;border:1px solid rgba(168,85,247,.3);border-radius:18px;} .bl-mhero--banner .bl-mhero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;filter:none;} /* promo cards: real product photo on the right, dark gradient keeps left text readable */ .bl-promocard::after{ z-index:1; background-image:linear-gradient(90deg,#1d1147 0%,rgba(29,17,71,.52) 46%,rgba(29,17,71,0) 78%),var(--promo-img,none); background-size:100% 100%,auto 138%; background-position:center,right center; background-repeat:no-repeat,no-repeat; opacity:1;filter:saturate(1.15) brightness(1.04); } .bl-promocard:hover::after{transform:none;background-size:100% 100%,auto 146%;} .bl-promocard__top,.bl-promocard__s,.bl-promocard__btn,.bl-promocard__glow{position:relative;z-index:2;} /* KOKO banner reused on desktop home */ .bl-home-desktop .bl-banner{margin-top:16px;} .bl-home-desktop .bl-banner img{max-height:240px;object-fit:cover;} /* ===================================================================== FIXES: hero always-visible, uniform card height, KOKO on cards ===================================================================== */ /* hero banners must always be fully visible (don't depend on scroll-reveal) */ .bl-hero--banner,.bl-hero--banner.reveal,.bl-mhero--banner,.bl-mhero--banner.reveal{opacity:1!important;transform:none!important;} .bl-hero--banner .bl-hero__image,.bl-mhero--banner .bl-mhero__image{opacity:1!important;filter:none!important;} /* kill the dark left gradient overlay — the banner already has its own text baked in */ .bl-hero--banner::after,.bl-hero--banner::before,.bl-mhero--banner::after,.bl-mhero--banner::before{display:none!important;content:none!important;} .bl-mhero--banner .bl-mhero__stars{display:none!important;} /* uniform product cards: equal height via flex/grid stretch, title clamped, button at bottom */ .bl-row{align-items:stretch;} .bl-row--grid,ul.products,.woocommerce ul.products{align-items:stretch;} .bl-card__title{min-height:34px;height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .bl-card__add{margin-top:auto;} /* KOKO "Buy Now Pay Later" line on product cards */ .bl-card__koko{margin-top:4px;font-size:10.5px;color:#7c3aed;font-weight:600;display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.2;} .bl-card__koko .bl-now{font-size:10.5px;color:#7c3aed;} .bl-koko-badge{background:linear-gradient(135deg,#ff2d9b,#a855f7);color:#fff;font-weight:800;font-size:9px;letter-spacing:.04em;padding:2px 6px;border-radius:5px;} /* real brand logos shown in white chips on the dark brand strip */ .bl-brand--logo{background:#fff;border-radius:10px;padding:8px 18px;min-width:104px;height:56px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s ease,box-shadow .2s ease;} .bl-brand--logo:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28);} .bl-brand--logo img{max-height:36px;max-width:128px;width:auto;height:auto;object-fit:contain;} @media (max-width:768px){.bl-brand--logo{min-width:88px;height:48px;padding:7px 14px;}.bl-brand--logo img{max-height:30px;max-width:100px;}} /* footer payment-methods logo strip — compact white pill */ /* ===================================================================== Neon pink buttons + force WhatsApp (Creame plugin) green ===================================================================== */ .bl-btn-pink, .woocommerce a.button,.woocommerce button.button,.woocommerce .button, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button, .woocommerce #respond input#submit, .bl-card__add,.bl-btn-pink2,.woocommerce-cart .button,.woocommerce-checkout #place_order{ box-shadow:0 0 0 1px rgba(255,90,180,.35),0 6px 18px rgba(255,45,155,.45),0 0 22px rgba(255,45,155,.55)!important; transition:box-shadow .25s ease,transform .2s ease,filter .2s ease; } .bl-btn-pink:hover, .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover, .bl-card__add:hover,.woocommerce-checkout #place_order:hover{ box-shadow:0 0 0 1px rgba(255,120,200,.6),0 8px 24px rgba(255,45,155,.6),0 0 34px rgba(255,45,155,.85)!important; filter:brightness(1.08);transform:translateY(-2px); } /* single-product main add-to-cart: extra neon */ .single-product .single_add_to_cart_button.button{ background:linear-gradient(135deg,#ff2d9b,#a21570)!important; box-shadow:0 0 0 1px rgba(255,90,180,.5),0 8px 26px rgba(255,45,155,.55),0 0 38px rgba(255,45,155,.85)!important; } /* WhatsApp floating button (Creame "Join.chat") must be GREEN, not pink */ .joinchat__button,.joinchat .joinchat__button,#joinchat .joinchat__button, .joinchat__button__open,.joinchat__button__sendtext{background:#25d366!important;} .joinchat__button:hover{background:#1fb855!important;} .joinchat__button__image,.joinchat__button svg,.joinchat__button img{color:#fff!important;fill:#fff!important;} .joinchat__tooltip{background:#25d366!important;} .bl-pays{display:flex!important;align-items:center;justify-content:flex-end;flex-wrap:nowrap!important;} .bl-footer__bar .bl-pays__pill{display:inline-flex!important;align-items:center;width:auto!important;max-width:max-content;background:#fff;border-radius:12px;padding:6px 12px;box-shadow:0 4px 14px rgba(0,0,0,.22);flex:0 0 auto;} body.baloon-theme .bl-footer__bar .bl-pays__img{height:22px!important;width:auto!important;max-width:none!important;object-fit:contain;display:block;} @media (max-width:768px){ .bl-footer__bar-inner{flex-direction:column;gap:12px;} .bl-pays{justify-content:center;} .bl-footer__bar .bl-pays__pill{padding:5px 10px;} body.baloon-theme .bl-footer__bar .bl-pays__img{height:18px!important;} } /* ===================================================================== FIXES v2: smaller bordered brand chips, single WhatsApp, mobile scroll ===================================================================== */ /* use our own floating WhatsApp (inline SVG, always renders) and hide the Creame/joinchat plugin button whose CSS-background icon gets stripped by PageSpeed */ .bl-float--wa{display:flex!important;} .bl-float--wa svg{width:26px;height:26px;display:block;} .joinchat,.joinchat__button{display:none!important;} /* smaller, bordered brand-logo chips */ .bl-brand--logo{min-width:82px;height:46px;padding:6px 12px;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:9px;} .bl-brand--logo img{max-height:26px;max-width:90px;} @media (max-width:768px){.bl-brand--logo{min-width:70px;height:40px;padding:5px 9px;}.bl-brand--logo img{max-height:22px;max-width:72px;}} /* mobile: kill horizontal page drift + category grid becomes a 2-row horizontal scroller */ @media (max-width:768px){ html,body.baloon-theme{overflow-x:clip;max-width:100%;} .bl-home-mobile,.bl-wrap{overflow-x:clip;} /* category groups: a clean 3-across grid (so a group of 6 = 2 tidy rows), no horizontal scroll */ .bl-mgrid{display:grid;grid-template-columns:repeat(3,1fr)!important;grid-auto-flow:row!important;gap:10px;overflow:visible!important;} .bl-mgrid .bl-mtile{min-height:96px;width:auto;min-width:0;scroll-snap-align:none;} .bl-mgrid .bl-mtile__ico{width:42px;height:42px;} .bl-mgrid .bl-mtile__ico svg{width:26px;height:26px;} .bl-mgrid .bl-mtile__label{font-size:10.5px;line-height:1.15;} } /* desktop: groups of 6 render as one row of 6 */ .bl-mgrid--group{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;} @media (max-width:768px){.bl-mgrid--group{grid-template-columns:repeat(3,1fr);}} /* category section: banner tiles on desktop, neon icon grid on mobile */ @media (max-width:768px){ .bl-catsec--desktop{display:none!important;} .bl-catsec--mobile{display:block!important;} .bl-neongrid{grid-template-columns:repeat(4,1fr);gap:10px;} } @media (max-width:430px){ .bl-neongrid{grid-template-columns:repeat(3,1fr);} .bl-neontile{min-height:96px;} .bl-neontile__ico{width:46px;height:46px;} .bl-neontile__ico svg{width:26px;height:26px;} } /* ===== landscape banner tiles — 3 columns x 2 rows = 6 per group ===== */ .bl-mgrid--group{display:grid!important;grid-template-columns:repeat(3,1fr)!important;grid-auto-flow:row!important;gap:12px;overflow:visible!important;} /* section 2: 8 tiles in 4 columns x 2 rows */ .bl-catgroup--4 .bl-mgrid--group{grid-template-columns:repeat(4,1fr)!important;} @media (max-width:980px){.bl-catgroup--4 .bl-mgrid--group{grid-template-columns:repeat(2,1fr)!important;}} .bl-mtile--banner{position:relative;display:block;aspect-ratio:900/374;width:100%;min-height:0;height:auto;padding:0;border-radius:12px;overflow:hidden;border:1px solid rgba(168,85,247,.22);background:#0b1024;transition:transform .2s ease,box-shadow .2s ease;} /* show the WHOLE banner (name + product) — never crop the text side */ .bl-mtile--banner .bl-mtile__art{position:absolute;inset:0;z-index:0;background-size:100% 100%;background-position:center;background-repeat:no-repeat;opacity:1;filter:none;} .bl-mtile--banner::after,.bl-mtile--banner::before{display:none;} .bl-mtile--banner:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(124,58,237,.3);} @media (max-width:768px){ .bl-mgrid--group{grid-template-columns:repeat(2,1fr)!important;gap:10px;} } /* desktop category groups */ .bl-catgroup{margin:18px 0;} .bl-catgroup .bl-mtile{min-height:0;border-radius:14px;} /* Group 1 stays INSIDE the content column (next to the sidebar) — 3 across */ .bl-catgroup:not(.bl-catgroup--4) .bl-mgrid--group{grid-template-columns:repeat(3,1fr)!important;gap:12px;} /* KOKO banner + 8 categories + New Arrivals break out to FULL width (the sidebar promo cards end above this, so no overlap now) */ .bl-fullbleed{width:calc(100% + 256px + 18px);margin-left:calc(-256px - 18px);display:flex;flex-direction:column;gap:16px;} .bl-catgroup--4 .bl-mgrid--group{grid-template-columns:repeat(4,1fr)!important;gap:12px;} @media (max-width:1100px){ .bl-fullbleed{width:100%;margin-left:0;} } @media (max-width:980px){ .bl-catgroup:not(.bl-catgroup--4) .bl-mgrid--group{grid-template-columns:repeat(3,1fr)!important;} .bl-catgroup--4 .bl-mgrid--group{grid-template-columns:repeat(2,1fr)!important;} } /* ===================================================================== FIXES v3: brand scroller works + bigger logos, uniform SHOP cards ===================================================================== */ /* brand strip must SCROLL (was wrapping) + bigger logos */ .bl-brands__row{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;} .bl-brands__row::-webkit-scrollbar{height:0;} .bl-brand--logo{min-width:104px;height:58px;padding:8px 16px;} .bl-brand--logo img{max-height:38px;max-width:120px;} @media (max-width:768px){.bl-brand--logo{min-width:86px;height:50px;padding:7px 12px;}.bl-brand--logo img{max-height:32px;max-width:98px;}} /* SHOP archive product cards: equal height + button pinned to bottom */ .woocommerce ul.products li.product{display:flex;flex-direction:column;height:100%;} .woocommerce ul.products li.product>a:first-of-type{display:block;} /* size ONLY the product thumbnail — not KOKO/brand logos */ .woocommerce ul.products li.product img.wp-post-image, .woocommerce ul.products li.product a.woocommerce-LoopProduct-link>img{height:160px!important;width:auto;max-width:100%;object-fit:contain;} /* keep the KOKO installment logos at their intended small size */ .woocommerce ul.products li.product img.koko-logo{height:14px!important;width:auto!important;display:inline-block!important;vertical-align:middle;} .woocommerce ul.products li.product img.koko-info{height:12px!important;width:12px!important;display:inline-block!important;} .koko-logo{max-height:16px;width:auto;} .woocommerce ul.products li.product .woocommerce-loop-product__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px;} .woocommerce ul.products li.product .button,.woocommerce ul.products li.product .add_to_cart_button{margin-top:auto;} /* keep the shop grid from clipping its first row */ .bl-shop-main{min-width:0;padding-top:4px;} .bl-shop-main ul.products{margin-top:0;} /* FIX: WooCommerce clearfix ::before/::after become phantom grid cells -> empty first slot */ .woocommerce ul.products::before,.woocommerce ul.products::after,.bl-row--grid::before,.bl-row--grid::after{display:none!important;content:none!important;} .woocommerce ul.products li.product.first{clear:none!important;margin-left:0!important;} /* center the Add to cart / button text on shop cards */ .woocommerce ul.products li.product .button,.woocommerce ul.products li.product .add_to_cart_button{display:flex!important;align-items:center;justify-content:center;text-align:center;width:100%;} .bl-card__add{justify-content:center;text-align:center;} /* WooCommerce pagination (1 2 3 … next) themed */ .woocommerce nav.woocommerce-pagination{margin:26px 0 8px;text-align:center;} .woocommerce nav.woocommerce-pagination ul{display:inline-flex;flex-wrap:wrap;gap:7px;border:none!important;margin:0;padding:0;} .woocommerce nav.woocommerce-pagination ul li{border:none!important;margin:0;overflow:visible;} .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{ display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px; background:var(--chip-bg);border:1px solid var(--line)!important;border-radius:10px;color:var(--ink); font-weight:700;font-size:13.5px;line-height:1;transition:.18s;} .woocommerce nav.woocommerce-pagination ul li a:hover{background:rgba(255,45,155,.14);color:var(--pink);border-color:rgba(255,45,155,.4)!important;} .woocommerce nav.woocommerce-pagination ul li span.current{background:linear-gradient(135deg,var(--pink),var(--pink-2));color:#fff;border-color:transparent!important;} /* product-categories widget: scrollable so the long list isn't endless */ .bl-shop-side .product-categories,.bl-shop-side .widget_product_categories>ul,.bl-sidebar .product-categories{max-height:360px;overflow-y:auto;padding-right:6px;} .bl-shop-side .product-categories::-webkit-scrollbar,.bl-sidebar .product-categories::-webkit-scrollbar{width:6px;} .bl-shop-side .product-categories::-webkit-scrollbar-thumb{background:rgba(255,45,155,.4);border-radius:6px;} /* ===================================================================== ABOUT page + WooCommerce CART / MY ACCOUNT themed to match ===================================================================== */ .bl-about{padding:8px 0 34px;} .bl-about__intro{max-width:880px;margin:0 auto 24px;text-align:center;} .bl-about__h{font-family:var(--display);font-weight:800;font-size:30px;color:var(--ink);margin:4px 0 12px;} .bl-about__lead{color:var(--muted-2);font-size:15px;line-height:1.75;} .bl-about__body{color:var(--muted);font-size:14px;line-height:1.7;margin-top:14px;text-align:left;} .bl-about__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0;} .bl-about__stat{background:var(--chip-bg);border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;} .bl-about__num{display:block;font-family:var(--display);font-weight:800;font-size:28px;background:linear-gradient(135deg,#ff5ea6,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;} .bl-about__statl{color:var(--muted-2);font-size:12.5px;} .bl-about__feats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} .bl-about__feat{display:flex;gap:14px;align-items:flex-start;background:var(--chip-bg);border:1px solid var(--line);border-radius:14px;padding:18px;} .bl-about__fico{width:46px;height:46px;border-radius:12px;background:rgba(255,45,155,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .bl-about__ft{font-weight:800;color:var(--ink);font-size:15px;} .bl-about__fs{color:var(--muted-2);font-size:13px;margin-top:3px;} @media (max-width:768px){.bl-about__stats{grid-template-columns:repeat(2,1fr);}.bl-about__feats{grid-template-columns:1fr;}.bl-about__h{font-size:24px;}} /* WooCommerce cart + account: themed panels, pink buttons, readable text */ .woocommerce,.woocommerce-page{color:var(--ink);} .woocommerce .bl-wrap,.woocommerce-cart .bl-wrap,.woocommerce-account .bl-wrap{padding-top:18px;padding-bottom:30px;} .woocommerce table.shop_table{background:var(--chip-bg);border:1px solid var(--line);border-radius:14px;border-collapse:separate;overflow:hidden;} .woocommerce table.shop_table th{color:var(--ink);} .woocommerce table.shop_table td,.woocommerce table.shop_table tr{border-top-color:var(--line);color:var(--muted-2);} .woocommerce-cart table.cart img{width:70px!important;height:70px!important;object-fit:contain;border-radius:8px;background:#fff;padding:4px;display:block;} .woocommerce-cart table.cart td.product-thumbnail{width:90px;} /* ============ SLIDE CART DRAWER ============ */ html.bl-cart-locked,html.bl-cart-locked body{overflow:hidden;} .bl-cartdrawer{position:fixed;inset:0;z-index:1200;visibility:hidden;pointer-events:none;} .bl-cartdrawer.is-open{visibility:visible;pointer-events:auto;} .bl-cartdrawer__overlay{position:absolute;inset:0;background:rgba(4,3,16,.6);opacity:0;transition:opacity .3s ease;backdrop-filter:blur(2px);} .bl-cartdrawer.is-open .bl-cartdrawer__overlay{opacity:1;} .bl-cartdrawer__panel{position:absolute;top:0;right:0;height:100%;width:380px;max-width:90vw; background:var(--header-bg,#0c0a1e);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.45); display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.7,.2,1);} .bl-cartdrawer.is-open .bl-cartdrawer__panel{transform:translateX(0);} .bl-cartdrawer__handle{display:none;} .bl-cartdrawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);} .bl-cartdrawer__title{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);} .bl-cartdrawer__title svg{color:var(--pink);} .bl-cartdrawer__close{background:none;border:none;color:var(--muted-2);font-size:30px;line-height:1;cursor:pointer;width:34px;height:34px;border-radius:9px;} .bl-cartdrawer__close:hover{background:rgba(255,45,155,.14);color:var(--pink);} .bl-cartdrawer__body{flex:1;overflow-y:auto;padding:14px 16px;color:var(--muted-2);display:flex;flex-direction:column;} .bl-cartdrawer__body .widget_shopping_cart_content{display:flex;flex-direction:column;flex:1;} /* the cart items list */ .bl-cartdrawer__body ul.woocommerce-mini-cart{list-style:none!important;margin:0!important;padding:0!important;} /* each item = card: [thumb] [info] [remove] */ .bl-cartdrawer__body li.mini_cart_item{ display:grid!important;grid-template-columns:62px 1fr 28px;align-items:center;column-gap:12px; padding:12px!important;margin:0 0 10px!important; background:var(--chip-bg);border:1px solid var(--line);border-radius:14px;list-style:none!important;position:relative;} .bl-mc__thumb{display:flex;align-items:center;justify-content:center;} .bl-mc__thumb img{width:62px!important;height:62px!important;object-fit:contain;background:#fff;border-radius:10px;padding:4px;margin:0!important;float:none!important;display:block;} .bl-mc__info{min-width:0;display:flex;flex-direction:column;gap:5px;} .bl-mc__name{color:var(--ink)!important;font-weight:600;font-size:13px;line-height:1.35;text-decoration:none; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .bl-mc__price{color:var(--pink)!important;font-weight:800;font-size:13.5px;} .bl-mc__price .amount{color:var(--pink)!important;} /* compact variation meta (Color / Model etc.) inside the cart card */ .bl-cartdrawer__body .mini_cart_item dl.variation{display:flex;flex-wrap:wrap;gap:2px 6px;margin:1px 0 2px!important;padding:0;font-size:11.5px;line-height:1.3;} .bl-cartdrawer__body .mini_cart_item dl.variation dt{margin:0!important;padding:0!important;color:var(--muted);font-weight:600;clear:none!important;float:none!important;} .bl-cartdrawer__body .mini_cart_item dl.variation dt::after{content:":";} .bl-cartdrawer__body .mini_cart_item dl.variation dd{margin:0 8px 0 0!important;padding:0!important;color:var(--ink);font-weight:600;clear:none!important;float:none!important;} .bl-cartdrawer__body .mini_cart_item dl.variation dd p{margin:0!important;display:inline;} /* qty stepper */ .bl-mc__qty{display:inline-flex;align-items:center;gap:0;width:max-content;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--header-bg,#0c0a1e);} .bl-mc__qbtn{width:28px;height:28px;border:none;background:transparent;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;} .bl-mc__qbtn:hover{background:var(--pink);color:#fff;} .bl-mc__qval{min-width:30px;text-align:center;font-weight:700;font-size:13px;color:var(--ink);} /* clean circular REMOVE button (top-right of the card) */ .bl-cartdrawer__body a.remove, .bl-cartdrawer__body a.remove_from_cart_button{display:inline-flex!important;align-items:center;justify-content:center; width:26px!important;height:26px!important;border-radius:50%!important;background:rgba(255,45,155,.12)!important;color:var(--pink)!important; font-size:16px!important;line-height:1!important;font-weight:700;text-decoration:none!important;transition:.18s;align-self:flex-start;} .bl-cartdrawer__body a.remove:hover{background:var(--pink)!important;color:#fff!important;} /* busy state while updating qty */ .bl-cartdrawer__body.bl-mc--busy{opacity:.55;pointer-events:none;} /* totals + buttons pinned at the bottom */ .bl-cartdrawer__body .woocommerce-mini-cart__total{display:flex;justify-content:space-between;align-items:center;padding:14px 2px;font-weight:800;color:var(--ink);font-size:15px;border-top:1px solid var(--line);margin:8px 0 0;} .bl-cartdrawer__body .woocommerce-mini-cart__total .amount, .bl-cartdrawer__body .woocommerce-mini-cart__total strong{color:var(--pink)!important;} .bl-cartdrawer__body .woocommerce-mini-cart__buttons{display:flex;gap:10px;flex-wrap:nowrap;margin:0;padding-top:4px;} .bl-cartdrawer__body .woocommerce-mini-cart__buttons a{flex:1;text-align:center!important;justify-content:center;display:flex;align-items:center;border-radius:12px!important;font-weight:800!important;padding:12px 10px!important;font-size:13px!important;} .bl-cartdrawer__body .woocommerce-mini-cart__buttons a.button:not(.checkout){background:var(--chip-bg)!important;color:var(--ink)!important;border:1px solid var(--line)!important;} .bl-cartdrawer__body .woocommerce-mini-cart__buttons a.checkout{background:linear-gradient(135deg,var(--pink),var(--pink-2))!important;color:#fff!important;border:none!important;} .bl-cartdrawer__body p.woocommerce-mini-cart__empty-message{text-align:center;padding:40px 0;color:var(--muted);font-size:14px;} /* --------------------------------------------------------------------- Harden cart-item layout so WooCommerce archive/single styles can't squash it into vertical single-char columns on shop/brand pages. --------------------------------------------------------------------- */ .bl-cartdrawer__body li.mini_cart_item{grid-template-columns:62px minmax(0,1fr) 28px!important;width:auto!important;float:none!important;} .bl-cartdrawer__body .bl-mc__info{grid-column:2!important;min-width:0!important;width:auto!important;white-space:normal!important;word-break:normal!important;} .bl-cartdrawer__body .bl-mc__name{white-space:normal!important;word-break:break-word;} .bl-cartdrawer__body .bl-mc__thumb{grid-column:1!important;width:62px!important;} .bl-cartdrawer__body a.remove{grid-column:3!important;} /* --------------------------------------------------------------------- Hide variation swatch widgets from SHOP/ARCHIVE loop cards (three swatch plugins were all injecting overlapping chips). Swatches stay on the single product page; loop cards show clean image+name+price+button. --------------------------------------------------------------------- */ .woocommerce ul.products li.product .cfvsw_variations_form, .woocommerce ul.products li.product .cfvsw-shop-variations, .woocommerce ul.products li.product .cfvsw-swatches-container, .woocommerce ul.products li.product .tawcvs-swatches, .woocommerce ul.products li.product .wvs-archive-variations, .woocommerce ul.products li.product .variations_form, .woocommerce ul.products li.product table.variations, .woocommerce ul.products li.product .woo-variation-swatches-archive{display:none!important;} /* mobile: slide UP as a bottom sheet (app-style) */ @media (max-width:768px){ .bl-cartdrawer__panel{top:auto;bottom:0;right:0;left:0;width:100%;max-width:100%;height:auto;max-height:86vh; border-left:none;border-top:1px solid var(--line);border-radius:22px 22px 0 0; transform:translateY(100%);box-shadow:0 -12px 40px rgba(0,0,0,.5);} .bl-cartdrawer.is-open .bl-cartdrawer__panel{transform:translateY(0);} .bl-cartdrawer__handle{display:block;width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.22);margin:10px auto 2px;} } .woocommerce .cart_totals h2,.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3,.woocommerce .woocommerce-Address h3,.woocommerce-account h1,.woocommerce-cart h1{color:var(--ink);} .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce .button.alt{background:linear-gradient(135deg,var(--pink),var(--pink-2))!important;color:#fff!important;border:none!important;border-radius:9px!important;font-weight:800!important;padding:11px 20px!important;} .woocommerce a.button:hover,.woocommerce button.button:hover{filter:brightness(1.07);} .woocommerce .cart-collaterals .cart_totals,.woocommerce .woocommerce-info,.woocommerce .woocommerce-message{background:var(--chip-bg);border:1px solid var(--line);border-radius:14px;color:var(--muted-2);} .woocommerce .woocommerce-message,.woocommerce .woocommerce-info{padding:14px 18px;} .woocommerce .woocommerce-info::before,.woocommerce-message::before{color:var(--pink);} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce .quantity input,.woocommerce input[type=text],.woocommerce input[type=email],.woocommerce input[type=password],.woocommerce select{background:var(--chip-bg);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:10px;} .woocommerce .product-remove a.remove{color:var(--pink)!important;} /* My Account dashboard */ .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 18px;padding:0;background:var(--chip-bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;} .woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line);} .woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:13px 18px;color:var(--muted-2);font-weight:600;} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:rgba(255,45,155,.12);color:var(--pink);} .woocommerce-account .woocommerce-MyAccount-content{background:var(--chip-bg);border:1px solid var(--line);border-radius:14px;padding:22px;color:var(--muted-2);} .woocommerce-account .woocommerce-MyAccount-content a{color:var(--pink);} /* ===================================================================== CART PAGE — Temu-style: compact item rows (image+name+price grouped) on the left, "Order Summary" totals box on the right. Matches site theme. ===================================================================== */ .woocommerce-cart .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start;} .woocommerce-cart .woocommerce-notices-wrapper{grid-column:1 / -1;} .woocommerce-cart form.woocommerce-cart-form{grid-column:1;min-width:0;margin:0;} .woocommerce-cart .cart-collaterals{grid-column:2;width:100%!important;position:sticky;top:90px;float:none!important;} /* turn the responsive table into a clean card list (no wide empty columns) */ .woocommerce-cart table.cart.shop_table{display:block;border:0;background:transparent;border-radius:0;overflow:visible;} .woocommerce-cart table.cart thead{display:none;} .woocommerce-cart table.cart tbody{display:flex;flex-direction:column;gap:12px;} .woocommerce-cart table.cart tr.cart_item{ display:grid; grid-template-columns:80px minmax(0,1fr) 130px; grid-template-areas: "img name qty" "img price subtotal"; align-items:center;column-gap:18px;row-gap:6px; background:var(--chip-bg);border:1px solid var(--line);border-radius:16px;padding:16px 44px 16px 18px;position:relative;} .woocommerce-cart table.cart tr.cart_item td{display:block;border:0!important;padding:0!important;margin:0!important;} /* thumbnail spans both rows */ .woocommerce-cart table.cart td.product-thumbnail{grid-area:img;align-self:center;} .woocommerce-cart table.cart td.product-thumbnail img{width:72px!important;height:72px!important;object-fit:contain;border-radius:12px;background:#fff;padding:5px;display:block;} /* name + variation (top of middle column) */ .woocommerce-cart table.cart td.product-name{grid-area:name;min-width:0;align-self:end;} .woocommerce-cart table.cart td.product-name a{color:var(--ink);font-weight:600;font-size:14.5px;line-height:1.35;text-decoration:none;display:block;} .woocommerce-cart table.cart td.product-name .variation{font-size:12px;color:var(--muted);margin-top:5px;display:flex;flex-wrap:wrap;gap:2px 8px;} .woocommerce-cart table.cart td.product-name .variation dt,.woocommerce-cart table.cart td.product-name .variation dd{margin:0!important;padding:0!important;float:none!important;display:inline;} .woocommerce-cart table.cart td.product-name .variation dt::after{content:":";} .woocommerce-cart table.cart td.product-name .variation dd{margin-right:8px!important;} .woocommerce-cart table.cart td.product-name .variation dd p{display:inline;margin:0!important;} /* unit price (bottom of middle column) */ .woocommerce-cart table.cart td.product-price{grid-area:price;align-self:start;color:var(--pink);font-weight:700;font-size:13px;} .woocommerce-cart table.cart td.product-price::before{content:"Unit: ";color:var(--muted);font-weight:600;} /* qty stepper (top of right column) */ .woocommerce-cart table.cart td.product-quantity{grid-area:qty;justify-self:end;align-self:end;} .woocommerce-cart table.cart td.product-quantity .quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--header-bg,#0c0a1e);} .woocommerce-cart table.cart td.product-quantity .quantity input.qty{width:56px;border:0!important;background:transparent!important;color:var(--ink)!important;text-align:center;font-weight:700;padding:9px 4px!important;} /* subtotal (bottom of right column) */ .woocommerce-cart table.cart td.product-subtotal{grid-area:subtotal;justify-self:end;align-self:start;color:var(--pink)!important;font-weight:800;font-size:15px;white-space:nowrap;} .woocommerce-cart table.cart td.product-subtotal .amount{color:var(--pink)!important;} /* remove button — round, top-right corner of the card */ .woocommerce-cart table.cart td.product-remove{position:absolute;top:12px;right:14px;} .woocommerce-cart table.cart td.product-remove a.remove{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,45,155,.12);color:var(--pink)!important;font-size:16px;line-height:1;text-decoration:none;} .woocommerce-cart table.cart td.product-remove a.remove:hover{background:var(--pink)!important;color:#fff!important;} /* coupon + update row */ .woocommerce-cart .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:16px 2px 0;} .woocommerce-cart .actions .coupon{display:flex;gap:8px;} .woocommerce-cart .actions .coupon .input-text{max-width:200px;} /* ORDER SUMMARY box (cart totals) — Temu-style */ .woocommerce-cart .cart-collaterals .cart_totals{width:100%!important;float:none!important;padding:22px;background:var(--chip-bg);border:1px solid var(--line);border-radius:16px;} .woocommerce-cart .cart_totals h2{font-size:19px;margin:0 0 16px;color:var(--ink);} .woocommerce-cart .cart_totals table{width:100%;border:0;background:transparent;} .woocommerce-cart .cart_totals table tr th,.woocommerce-cart .cart_totals table tr td{padding:12px 2px;border-top:1px solid var(--line);color:var(--muted-2);font-size:14px;} .woocommerce-cart .cart_totals table tr:first-child th,.woocommerce-cart .cart_totals table tr:first-child td{border-top:0;} .woocommerce-cart .cart_totals .order-total th{font-size:16px;color:var(--ink);} .woocommerce-cart .cart_totals .order-total td .amount,.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount{color:var(--pink)!important;font-size:20px;font-weight:800;} .woocommerce-cart .wc-proceed-to-checkout{padding:16px 0 0;} .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{width:100%;text-align:center;display:block;font-size:15px!important;padding:15px!important;border-radius:12px!important;} .woocommerce ul#shipping_method{list-style:none;margin:6px 0 0;padding:0;} .woocommerce ul#shipping_method li{margin:6px 0;color:var(--muted-2);display:flex;align-items:flex-start;gap:8px;} /* CART responsive: stack the summary under items on tablet/mobile */ @media (max-width:991px){ .woocommerce-cart .woocommerce{grid-template-columns:1fr;} .woocommerce-cart form.woocommerce-cart-form,.woocommerce-cart .cart-collaterals{grid-column:1;} .woocommerce-cart .cart-collaterals{position:static;} } @media (max-width:560px){ .woocommerce-cart table.cart tr.cart_item{ grid-template-columns:64px minmax(0,1fr); grid-template-areas: "img name" "img price" "qty subtotal"; column-gap:14px;row-gap:8px;padding:14px 40px 14px 14px;} .woocommerce-cart table.cart td.product-thumbnail{align-self:start;} .woocommerce-cart table.cart td.product-thumbnail img{width:58px!important;height:58px!important;} .woocommerce-cart table.cart td.product-name{align-self:start;} .woocommerce-cart table.cart td.product-quantity{justify-self:start;align-self:center;} .woocommerce-cart table.cart td.product-subtotal{justify-self:end;align-self:center;} } /* ===================================================================== CHECKOUT PAGE — billing left, sticky order + payment cards right ===================================================================== */ .woocommerce-checkout #customer_details.col2-set{display:block;width:100%;float:none;} .woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{width:100%!important;float:none!important;background:var(--chip-bg);border:1px solid var(--line);border-radius:16px;padding:24px;margin:0 0 18px;} .woocommerce-checkout #order_review_heading{color:var(--ink);font-size:20px;padding:0;margin:0 0 14px;border:0;} .woocommerce-checkout #order_review{background:var(--chip-bg);border:1px solid var(--line);border-radius:16px;padding:22px;} .woocommerce form .form-row label{color:var(--muted-2);font-weight:600;font-size:13px;margin-bottom:6px;display:block;} .woocommerce form .form-row{margin:0 0 16px;} .woocommerce form .form-row .required{color:var(--pink);} .woocommerce-checkout .woocommerce-billing-fields h3,.woocommerce-checkout .woocommerce-shipping-fields h3,.woocommerce-checkout .woocommerce-additional-fields h3{color:var(--ink);font-size:18px;margin:0 0 16px;} /* order review table */ .woocommerce-checkout #order_review table.shop_table{background:transparent;border:0;} .woocommerce-checkout #order_review table.shop_table th,.woocommerce-checkout #order_review table.shop_table td{padding:11px 4px;border-top:1px solid var(--line);color:var(--muted-2);} .woocommerce-checkout #order_review .order-total .amount,.woocommerce-checkout #order_review .order-total th{color:var(--pink)!important;} .woocommerce-checkout #order_review .cart_item .product-name{color:var(--ink);} /* checkout review item: thumb + name + variation + qty/remove controls */ .bl-co-item{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start;} .bl-co-item__thumb img{width:48px!important;height:48px!important;object-fit:contain;border-radius:8px;background:#fff;padding:3px;margin:0!important;display:block;} .bl-co-item__info{min-width:0;} .bl-co-item__name{color:var(--ink)!important;font-weight:600;font-size:13px;line-height:1.35;display:block;} .woocommerce-checkout #order_review .bl-co-item__info .variation{font-size:11.5px;color:var(--muted);margin:3px 0;} .woocommerce-checkout #order_review .bl-co-item__info .variation dt,.woocommerce-checkout #order_review .bl-co-item__info .variation dd{margin:0 6px 0 0!important;padding:0!important;display:inline;float:none!important;} .woocommerce-checkout #order_review .bl-co-item__info .variation dt::after{content:":";} .woocommerce-checkout #order_review .bl-co-item__info .variation dd p{display:inline;margin:0!important;} .bl-co-qty{display:inline-flex;align-items:center;gap:0;margin-top:7px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--header-bg,#0c0a1e);} .bl-co-qbtn{width:26px;height:26px;border:0;background:transparent;color:var(--ink);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;} .bl-co-qbtn:hover{background:var(--pink);color:#fff;} .bl-co-qval{min-width:30px;text-align:center;font-weight:700;font-size:13px;color:var(--ink);} .bl-co-remove{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:6px;border-radius:50%;background:rgba(255,45,155,.12);color:var(--pink)!important;font-size:15px;line-height:1;text-decoration:none;border-left:1px solid var(--line);} .bl-co-remove:hover{background:var(--pink)!important;color:#fff!important;} .woocommerce-checkout-review-order-table.bl-mc--busy{opacity:.55;pointer-events:none;} /* payment methods as selectable CARDS */ .woocommerce-checkout #payment{background:transparent!important;border-radius:0;} .woocommerce-checkout #payment ul.payment_methods{background:transparent!important;border:0!important;padding:0!important;margin:0 0 18px!important;list-style:none;display:flex;flex-direction:column;gap:10px;} .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method{background:var(--header-bg,#0c0a1e);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;transition:.18s;list-style:none;} .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover{border-color:rgba(255,45,155,.5);} .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked){border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,45,155,.18);background:rgba(255,45,155,.05);} .woocommerce-checkout #payment ul.payment_methods li label{display:inline-flex;align-items:center;gap:10px;color:var(--ink)!important;font-weight:700;font-size:14px;cursor:pointer;margin:0;} .woocommerce-checkout #payment ul.payment_methods li label img{max-height:24px;width:auto;margin:0 0 0 4px;vertical-align:middle;} .woocommerce-checkout #payment ul.payment_methods li input[type=radio]{accent-color:var(--pink);width:18px;height:18px;margin:0;} .woocommerce-checkout #payment .payment_box{background:rgba(255,255,255,.03)!important;border:1px solid var(--line);border-radius:10px;margin:12px 0 0!important;padding:12px 14px!important;color:var(--muted-2);font-size:13px;} .woocommerce-checkout #payment .payment_box::before{display:none!important;} .woocommerce-checkout #payment div.place-order{padding-top:8px;} .woocommerce-checkout #payment div.place-order .button#place_order{width:100%;font-size:16px!important;padding:15px!important;border-radius:12px!important;} .woocommerce-checkout #payment .woocommerce-privacy-policy-text{color:var(--muted);font-size:12px;margin-top:10px;} .woocommerce-checkout .checkout_coupon{background:var(--chip-bg);border:1px solid var(--line)!important;border-radius:12px;} .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{background:var(--chip-bg);} .woocommerce-checkout #ship-to-different-address{font-size:15px;} /* two-column on wide screens, sticky order pinned to the TOP */ @media (min-width:992px){ .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto 1fr;gap:10px 28px;align-items:start;} .woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1 / span 2;} .woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 14px;align-self:start;} .woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2;align-self:start;position:sticky;top:90px;} } /* scrollable item list when many products */ .woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody{display:block;max-height:300px;overflow-y:auto;} .woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead, .woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot{display:table;width:100%;table-layout:fixed;} .woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody tr{display:table;width:100%;table-layout:fixed;} .woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody::-webkit-scrollbar{width:6px;} .woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tbody::-webkit-scrollbar-thumb{background:rgba(255,45,155,.4);border-radius:6px;} @media (max-width:991px){ .woocommerce-cart .woocommerce{flex-direction:column;} .woocommerce-cart form.woocommerce-cart-form,.woocommerce-cart .cart-collaterals{flex:1 1 100%;width:100%;} } /* ===================================================================== SINGLE PRODUCT — Temu-style v3 (big main image + vertical thumbnail rail on the left, summary on the right, full-width description below) ===================================================================== */ /* top: large gallery (≈55%) left, summary right */ .single-product div.product{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-column-gap:40px;align-items:start;} .single-product div.product .woocommerce-product-gallery{float:none;width:auto!important;margin:0;grid-column:1;} .single-product div.product .summary.entry-summary{float:none;width:auto!important;margin:0;grid-column:2;} .single-product div.product .woocommerce-tabs, .single-product div.product .related, .single-product div.product .up-sells{grid-column:1 / -1;width:100%;clear:both;} /* GALLERY: flex row = vertical thumb rail | big main image (Temu style) */ .single-product .woocommerce-product-gallery{position:relative;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:14px;background:transparent;border:0;} .single-product .woocommerce-product-gallery__wrapper{flex:1 1 auto;min-width:0;margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;} .single-product .woocommerce-product-gallery__image{border-radius:18px;} .single-product .woocommerce-product-gallery__image a{display:block;} .single-product .woocommerce-product-gallery__image img{display:block;width:100%;height:auto;border-radius:18px;} /* zoom magnifier icon sits inside the big image */ .single-product .woocommerce-product-gallery__trigger{top:14px;right:14px;} /* vertical thumbnail rail on the LEFT */ .single-product .flex-control-thumbs{display:flex!important;flex-direction:column;flex:0 0 76px;gap:10px;margin:0!important;padding:0;list-style:none;float:none;width:76px!important;max-height:560px;overflow-y:auto;} .single-product .flex-control-thumbs li{width:auto!important;margin:0!important;float:none!important;list-style:none;} .single-product .flex-control-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--line);opacity:.65;cursor:pointer;transition:.2s;background:#fff;} .single-product .flex-control-thumbs img:hover,.single-product .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,90,180,.35);} /* highlighted Payment Method / Price box */ .single-product .summary table{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 6px;background:var(--sidebar-bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;} .single-product .summary table th{background:linear-gradient(135deg,rgba(255,45,155,.16),rgba(168,85,247,.16));color:var(--ink);font-weight:700;text-align:left;padding:11px 16px;font-size:13px;letter-spacing:.02em;} .single-product .summary table td{padding:10px 16px;border-top:1px solid var(--line);color:var(--muted-2);font-size:14px;} .single-product .summary table td:last-child{text-align:right;color:var(--ink);font-weight:600;white-space:nowrap;} .single-product .summary table tr:nth-child(even) td{background:rgba(255,255,255,.02);} /* hide the long spec block (Product Name/Brand/Model/Target Audience/Key Features) from the summary so Add-to-Cart rises up; it still shows in the full-width Description tab below */ .single-product .summary .woocommerce-product-details__short-description{display:none!important;} /* "Check availability before ordering" WhatsApp button — NEON GREEN (must beat .woocommerce button.button.alt pink !important on line ~418) */ .single-product .woocommerce button.wa-order-button.button.alt, .woocommerce .single-product button.wa-order-button, .single-product .wa-order-class button.wa-order-button, .single-product button.wa-order-button, .single-product .wa-order-button{ background:#25d366!important;background-image:linear-gradient(135deg,#2be36e,#16a34a)!important; color:#fff!important;border:none!important;border-radius:12px!important;font-weight:800!important; box-shadow:0 0 0 1px rgba(37,211,102,.5),0 8px 22px rgba(37,211,102,.45),0 0 26px rgba(37,211,102,.55)!important; } .single-product button.wa-order-button:hover{filter:brightness(1.06)!important;} /* remove the Categories/Tags meta + brand text clutter under the button */ .single-product .summary .product_meta, .single-product .summary .pwb-single-product-brands, .single-product .summary .posted_in, .single-product .summary .tagged_as{display:none!important;} /* full-width description tabs below — modern pill tabs matching the theme */ .single-product .woocommerce-tabs{margin-top:34px;background:var(--sidebar-bg);border:1px solid var(--line);border-radius:18px;padding:18px 26px 26px;} /* tab nav: clean pills, no default borders/triangles */ .single-product .woocommerce-tabs ul.tabs{margin:0 0 20px!important;padding:0!important;display:flex;flex-wrap:wrap;gap:10px;border:0!important;list-style:none;background:transparent;} .single-product .woocommerce-tabs ul.tabs::before, .single-product .woocommerce-tabs ul.tabs::after, .single-product .woocommerce-tabs ul.tabs li::before, .single-product .woocommerce-tabs ul.tabs li::after{display:none!important;border:0!important;content:none!important;} .single-product .woocommerce-tabs ul.tabs li{background:transparent!important;border:1px solid var(--line)!important;border-radius:999px!important;margin:0!important;padding:0!important;} .single-product .woocommerce-tabs ul.tabs li a{display:block;color:var(--muted-2)!important;font-weight:700;font-size:13.5px;padding:9px 20px!important;border-radius:999px;text-decoration:none;} .single-product .woocommerce-tabs ul.tabs li.active, .single-product .woocommerce-tabs ul.tabs li:hover{background:linear-gradient(135deg,var(--pink),var(--pink-2))!important;border-color:transparent!important;box-shadow:0 6px 18px rgba(255,45,155,.4)!important;} .single-product .woocommerce-tabs ul.tabs li.active a, .single-product .woocommerce-tabs ul.tabs li:hover a{color:#fff!important;} /* panels */ .single-product .woocommerce-tabs .panel{color:var(--muted-2);font-size:15px;line-height:1.7;max-width:none;margin:0!important;} .single-product .woocommerce-tabs .panel h2{color:var(--ink);font-family:var(--display);font-size:22px;margin:0 0 12px;} .single-product .woocommerce-tabs .panel h3, .single-product .woocommerce-tabs .panel strong{color:var(--ink);} .single-product .woocommerce-tabs .panel ul li{margin:.3em 0;} /* tablet/mobile: stack columns, keep image LARGE, thumbs go horizontal below */ @media (max-width:900px){ .single-product div.product{display:block;} .single-product div.product .woocommerce-product-gallery, .single-product div.product .summary.entry-summary{width:100%!important;margin:0 0 20px!important;} /* image full width and big; thumbnail rail becomes a horizontal strip under it */ .single-product .woocommerce-product-gallery{flex-direction:column;gap:12px;} .single-product .woocommerce-product-gallery__wrapper{width:100%;} .single-product .flex-control-thumbs{flex-direction:row;flex-wrap:wrap;width:100%!important;flex:0 0 auto;max-height:none;} .single-product .flex-control-thumbs img{width:60px;height:60px;} .single-product .summary table td,.single-product .summary table th{padding:9px 12px;font-size:13px;} .single-product .woocommerce-tabs{padding:6px 14px 16px;} .single-product .woocommerce-product-details__short-description{font-size:13.5px;} }