/* ══════════════════════ POWERUP SHOP THEME v5 ══════════════════════ */
:root{
--pu-bg:#08060d; --pu-panel:#0d0a15; --pu-card:#14101f;
--pu-card-border:#262032;
--pu-accent:#a855f7; --pu-accent-2:#6d28d9; --pu-pink:#ec4899; --pu-gold:#fbbf24;
--pu-accent-glow:rgba(168,85,247,0.35);
--pu-text:#f5f3fa; --pu-muted:#948aa8; --pu-success:#34d399;
--pu-sb-w:240px; --pu-sb-w-compact:84px; --pu-topbar-h:68px;
--pu-font-display:'Orbitron',sans-serif;
--pu-font-body:'Inter',sans-serif;
--pu-font-mono:'JetBrains Mono',monospace;
}
/* ---- HIDE FLATSOME CHROME + WIDGET SIDEBAR + WC PAGE-TITLE BAR ---- */
body.pu-shop #wrapper > header, body.pu-shop #header, body.pu-shop .header-wrapper,
body.pu-shop .stuck-header, body.pu-shop .header-clone, body.pu-shop #masthead,
body.pu-shop .top-bar, body.pu-shop #site-header, body.pu-shop header.site-header,
body.pu-shop #footer, body.pu-shop .absolute-footer, body.pu-shop #wrapper > footer,
body.pu-shop footer#colophon, body.pu-shop footer[role="contentinfo"], body.pu-shop .site-footer,
body.pu-shop #shop-sidebar, body.pu-shop .sidebar-shop, body.pu-shop .shop-sidebar,
/* Flatsome's page-title bar — this is the white/underlined bar in image 5 */
body.pu-shop .page-title-container, body.pu-shop .page-header,
body.pu-shop .page-title-inner .title-bg, body.pu-shop .page-title-bg,
body.pu-shop .page-title-inner > .breadcrumbs, body.pu-shop .title-wrapper > .breadcrumbs{
display:none !important; height:0 !important; min-height:0 !important;
padding:0 !important; margin:0 !important; visibility:hidden !important; background:transparent !important;
}
/* Keep breadcrumbs elsewhere but neutralise the page-title h1 underline / wrapper */
body.pu-shop .page-title-inner,
body.pu-shop .title-wrapper{
background:transparent !important; border:none !important;
box-shadow:none !important; padding:0 !important; margin:0 !important;
}
/* WC's default "My account" h1 wrapper often has an underline pseudo — kill it */
body.pu-shop.woocommerce-account .entry-header,
body.pu-shop.woocommerce-cart .entry-header,
body.pu-shop.woocommerce-checkout .entry-header{
background:transparent !important; border:none !important; padding:16px 32px 0 !important;
}
body.pu-shop.woocommerce-account .entry-header::after,
body.pu-shop.woocommerce-account .entry-header::before,
body.pu-shop.woocommerce-account .entry-header h1::after{ display:none !important; content:none !important; }
/* ---- GLOBAL LAYOUT ---- */
html, body.pu-shop{ background:var(--pu-bg) !important; }
body.pu-shop{
color:var(--pu-text) !important; font-family:var(--pu-font-body) !important;
padding:0 0 0 var(--pu-sb-w) !important; margin:0 !important;
transition:padding-left .25s ease;
}
html.pu-sc body.pu-shop{ padding-left:var(--pu-sb-w-compact) !important; }
body.pu-shop #wrapper, body.pu-shop main, body.pu-shop #main, body.pu-shop .site-content,
body.pu-shop .page-wrapper, body.pu-shop .row-container, body.pu-shop .section,
body.pu-shop .section-content, body.pu-shop .shop-container{
background:var(--pu-bg) !important; color:var(--pu-text) !important;
width:100% !important; max-width:100% !important;
}
body.pu-shop ::selection{ background:var(--pu-accent); color:#fff; }
body.pu-shop ::-webkit-scrollbar{ width:8px; height:8px; }
body.pu-shop ::-webkit-scrollbar-thumb{ background:#2a2338; border-radius:8px; }
body.pu-shop .container, body.pu-shop .row.large-columns-1, body.pu-shop .row.large-columns-2,
body.pu-shop .row.large-columns-3, body.pu-shop .row.large-columns-4{ max-width:100% !important; }
/* ═══════════════════════════════════════════════════════════════════
FULL-WIDTH SHOP CONTENT
Flatsome wraps shop archive in .container (max-width from theme
options, typically 1080–1280px) + .row.row-large + inner col +
product grid row. Every layer has its own max-width, margin:0 auto,
and padding. Kill them all so content stretches sidebar-edge to
viewport-edge with a single consistent gutter.
═══════════════════════════════════════════════════════════════════ */
body.pu-shop #content, body.pu-shop #main-content, body.pu-shop main#main,
body.pu-shop .page-wrapper, body.pu-shop .shop-container,
body.pu-shop .row-container, body.pu-shop .section-inner,
body.pu-shop .container, body.pu-shop .container-width,
body.pu-shop .archive-page-header, body.pu-shop .post-content,
body.pu-shop .entry-content, body.pu-shop .woocommerce-notices-wrapper{
max-width:100% !important; width:100% !important;
margin-left:0 !important; margin-right:0 !important;
padding-left:0 !important; padding-right:0 !important;
}
/* The outer product-grid rows/cols */
body.pu-shop .row.row-large, body.pu-shop .row.row-small, body.pu-shop .row.row,
body.pu-shop [class*="large-columns-"]{
max-width:100% !important; width:100% !important;
margin-left:0 !important; margin-right:0 !important;
}
/* Give the actual shop content a single 32px side gutter matching the topbar */
body.pu-shop.woocommerce main#main,
body.pu-shop.archive main#main,
body.pu-shop.post-type-archive-product main#main,
body.pu-shop.tax-product_cat main#main,
body.pu-shop.tax-product_tag main#main{
padding:24px 32px !important; box-sizing:border-box !important;
}
/* ---- SIDEBAR (uses shared prefix pu-sb-*) ---- */
body.pu-shop .pu-nav-sidebar{
position:fixed; left:0; top:0; bottom:0; width:var(--pu-sb-w);
background:linear-gradient(180deg,#0f0b18,#0a0712);
border-right:1px solid var(--pu-card-border);
z-index:100; display:flex; flex-direction:column;
transition:width .25s ease, transform .25s ease;
font-family:var(--pu-font-body); overflow:hidden;
}
body.admin-bar.pu-shop .pu-nav-sidebar{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar.pu-shop .pu-nav-sidebar{ top:46px; } }
html.pu-sc body.pu-shop .pu-nav-sidebar{ width:var(--pu-sb-w-compact); }
body.pu-shop .pu-sb-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; }
body.pu-shop .pu-sb-brand{ display:flex; align-items:center; gap:12px; padding:24px 22px 20px; overflow:hidden; white-space:nowrap; flex-shrink:0; }
body.pu-shop .pu-sb-mark{
width:40px; height:40px; flex-shrink:0;
background:linear-gradient(135deg, var(--pu-accent-2), var(--pu-gold));
clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
display:flex; align-items:center; justify-content:center;
font-family:var(--pu-font-display); font-weight:800; color:#08060d;
font-size:1rem; box-shadow:0 4px 14px rgba(168,85,247,.35);
}
body.pu-shop .pu-sb-word{ line-height:1.15; transition:opacity .15s ease; }
html.pu-sc body.pu-shop .pu-sb-word{ opacity:0; width:0; }
body.pu-shop .pu-sb-word .l1{ font-family:var(--pu-font-display); font-weight:800; font-size:.95rem; letter-spacing:.02em; color:var(--pu-text); }
body.pu-shop .pu-sb-word .l2{ font-family:var(--pu-font-mono); font-size:.6rem; color:var(--pu-muted); letter-spacing:.15em; }
body.pu-shop .pu-sb-nav{ display:flex; flex-direction:column; gap:3px; padding:6px 14px; flex-shrink:0; }
body.pu-shop .pu-sb-item{
display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:10px;
color:var(--pu-muted); font-size:.87rem; font-weight:600;
white-space:nowrap; overflow:hidden; position:relative;
transition:all .18s ease; text-decoration:none !important;
}
body.pu-shop .pu-sb-item svg{ width:19px; height:19px; flex-shrink:0; }
body.pu-shop .pu-sb-item span:not(.pu-sb-tip){ transition:opacity .15s ease; white-space:nowrap; }
html.pu-sc body.pu-shop .pu-sb-item span:not(.pu-sb-tip){ opacity:0; width:0; height:0; overflow:hidden; }
html.pu-sc body.pu-shop .pu-sb-item{ justify-content:center; padding:11px; gap:0; }
body.pu-shop .pu-sb-item:hover{ color:#fff; background:rgba(168,85,247,.08); }
body.pu-shop .pu-sb-item.active{ color:#fff; background:linear-gradient(90deg,rgba(168,85,247,.18),rgba(168,85,247,.03)); }
body.pu-shop .pu-sb-item.active::before{
content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px;
background:linear-gradient(180deg,var(--pu-accent),var(--pu-gold));
}
body.pu-shop .pu-sb-tip{
position:absolute; left:70px; top:50%; transform:translateY(-50%);
background:var(--pu-card); border:1px solid var(--pu-card-border);
border-radius:6px; padding:6px 10px;
font-size:.75rem; font-weight:600; white-space:nowrap; color:#fff;
opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:210;
}
body.pu-shop .pu-sb-item .pu-sb-tip{ display:none; }
html.pu-sc body.pu-shop .pu-sb-item .pu-sb-tip{ display:block; }
html.pu-sc body.pu-shop .pu-sb-item:hover .pu-sb-tip{ opacity:1; }
body.pu-shop .pu-sb-divider{ height:1px; background:var(--pu-card-border); margin:10px 20px; flex-shrink:0; }
body.pu-shop .pu-sb-promo{
margin:6px 14px 14px; padding:16px; border-radius:14px; flex-shrink:0;
background:linear-gradient(160deg,rgba(168,85,247,.16),rgba(236,72,153,.06));
border:1px solid rgba(168,85,247,.25); overflow:hidden; white-space:nowrap;
}
html.pu-sc body.pu-shop .pu-sb-promo{ padding:12px 0; display:flex; justify-content:center; background:transparent; border:none; }
body.pu-shop .pu-sb-promo-icon{
width:30px; height:30px; border-radius:9px; background:rgba(168,85,247,.18);
display:flex; align-items:center; justify-content:center; margin-bottom:10px; flex-shrink:0;
}
html.pu-sc body.pu-shop .pu-sb-promo-icon{ margin-bottom:0; }
body.pu-shop .pu-sb-promo-icon svg{ width:16px; height:16px; color:var(--pu-accent); }
html.pu-sc body.pu-shop .pu-sb-promo-text{ display:none; }
body.pu-shop .pu-sb-promo-title{ font-size:.82rem; font-weight:700; margin-bottom:2px; color:var(--pu-text); white-space:normal; }
body.pu-shop .pu-sb-promo-sub{ font-size:.72rem; color:var(--pu-muted); margin-bottom:12px; line-height:1.4; white-space:normal; }
body.pu-shop .pu-sb-promo-btn{
display:flex; align-items:center; justify-content:center; gap:8px;
width:100%; padding:10px 12px; border-radius:9px;
font-size:.78rem; font-weight:700; text-align:center;
color:#fff !important; text-decoration:none !important; transition:filter .18s ease;
}
body.pu-shop .pu-sb-promo-btn:hover{ filter:brightness(1.1); }
body.pu-shop .pu-sb-promo-btn-ico{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
body.pu-shop .pu-sb-promo-btn-ico svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
body.pu-shop .pu-sb-promo-btn--discord{
background:linear-gradient(135deg,#c084fc 0%,var(--pu-accent) 40%,var(--pu-accent-2) 100%) !important;
border:1px solid rgba(255,255,255,.16) !important;
box-shadow:0 0 0 1px rgba(168,85,247,.20), 0 6px 18px -6px rgba(168,85,247,.55) !important;
}
body.pu-shop .pu-sb-promo-btn--telegram{
background:linear-gradient(135deg,#38bdf8 0%,#229ED9 45%,#0e7bb8 100%) !important;
border:1px solid rgba(255,255,255,.16) !important;
box-shadow:0 0 0 1px rgba(34,158,217,.20), 0 6px 18px -6px rgba(34,158,217,.5) !important;
margin-top:8px !important;
}
body.pu-shop .pu-sb-foot{ display:flex; flex-direction:column; gap:2px; padding:10px 14px 20px; flex-shrink:0; margin-top:auto; }
/* ---- TOPBAR ---- */
.pu-shop-topbar{
display:flex; align-items:center; justify-content:space-between;
padding:0 32px; gap:16px;
background:linear-gradient(180deg,#0f0b18,#0a0712);
border-bottom:1px solid var(--pu-card-border);
position:sticky; top:0; z-index:80;
font-family:var(--pu-font-body);
height:var(--pu-topbar-h); min-height:var(--pu-topbar-h); box-sizing:border-box;
}
body.admin-bar .pu-shop-topbar{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .pu-shop-topbar{ top:46px; } }
.pu-shop-topbar-left, .pu-shop-topbar-right{
display:flex; align-items:center; gap:14px;
height:100%;
}
/* Every direct topbar child locked to 40px, centered by flex + explicit self-align.
This kills every remaining 1-2px drift caused by inline-baseline metrics,
font-line-box padding, or SVG display:inline defaults. */
.pu-shop-topbar-left > *, .pu-shop-topbar-right > *{
align-self:center !important; margin:0 !important;
}
.pu-shop-topbar .pu-lang-flags{
display:flex; align-items:center; gap:6px; margin-right:4px !important;
height:auto !important; flex-shrink:0;
}
.pu-shop-topbar .pu-lang-flags a,
.pu-shop-topbar .pu-lang-flags .glink{
display:flex !important; align-items:center !important; justify-content:center !important;
width:auto !important; height:auto !important; min-width:0 !important;
padding:0 !important; margin:0 !important;
background:none !important; border:none !important; box-shadow:none !important;
opacity:.85; line-height:0;
}
.pu-shop-topbar .pu-lang-flags a:hover{ opacity:1; filter:none !important; transform:none !important; }
.pu-shop-topbar .pu-lang-flags img,
.pu-shop-topbar .pu-lang-flags svg{
width:22px !important; height:22px !important; border-radius:3px; display:block;
}
.pu-shop-back{
display:flex !important; align-items:center !important; gap:8px;
height:40px !important; min-height:40px !important; max-height:40px !important;
padding:0 14px !important; border-radius:9px;
background:rgba(168,85,247,.10); border:1px solid var(--pu-card-border);
color:var(--pu-text) !important; text-decoration:none !important; font-weight:600; font-size:.85rem;
transition:all .18s ease; box-shadow:none !important;
box-sizing:border-box !important; flex-shrink:0 !important; line-height:1 !important;
vertical-align:middle;
}
.pu-shop-back:hover{ border-color:var(--pu-accent); color:#fff !important; box-shadow:0 0 12px var(--pu-accent-glow) !important; }
.pu-shop-back svg{ width:14px; height:14px; }
.pu-mobile-menu-btn{
display:none; width:40px; height:40px; border-radius:9px; padding:0 !important;
border:1px solid var(--pu-card-border) !important;
align-items:center; justify-content:center; color:var(--pu-text) !important;
background:transparent !important; cursor:pointer; box-shadow:none !important;
box-sizing:border-box; flex-shrink:0;
}
.pu-mobile-menu-btn svg{ width:18px; height:18px; }
.pu-sidebar-toggle{
display:flex !important; width:40px !important; height:40px !important;
min-width:40px !important; min-height:40px !important; max-height:40px !important;
border-radius:9px; padding:0 !important;
border:1px solid var(--pu-card-border) !important;
align-items:center !important; justify-content:center !important;
color:var(--pu-muted) !important;
background:transparent !important; cursor:pointer;
box-shadow:none !important; transition:all .18s ease;
box-sizing:border-box !important; flex-shrink:0 !important;
line-height:1 !important; vertical-align:middle;
}
.pu-sidebar-toggle:hover{
color:#fff !important; border-color:var(--pu-accent) !important;
box-shadow:0 0 10px var(--pu-accent-glow) !important;
}
.pu-sidebar-toggle svg{ width:16px; height:16px; transition:transform .25s ease; display:block; }
html.pu-sc .pu-sidebar-toggle svg{ transform:rotate(180deg); }
@media (max-width:900px){ .pu-sidebar-toggle{ display:none !important; } }
.pu-shop-icon{
position:relative; width:40px !important; height:40px !important;
min-width:40px !important; min-height:40px !important; max-height:40px !important;
border-radius:9px;
border:1px solid var(--pu-card-border) !important;
display:flex !important; align-items:center !important; justify-content:center !important;
color:var(--pu-muted) !important; background:transparent !important; text-decoration:none !important;
transition:all .18s ease; box-shadow:none !important; padding:0 !important; cursor:pointer;
box-sizing:border-box !important; flex-shrink:0 !important;
line-height:1 !important; vertical-align:middle;
}
.pu-shop-icon:hover{ color:#fff !important; border-color:var(--pu-accent) !important; box-shadow:0 0 10px var(--pu-accent-glow) !important; }
.pu-shop-icon svg{ width:17px; height:17px; display:block; }
.pu-shop-cart-badge{
position:absolute; top:-5px; right:-5px;
background:var(--pu-pink); color:#fff;
font-size:.6rem; font-weight:800;
min-width:16px; height:16px; padding:0 4px; border-radius:8px;
display:flex; align-items:center; justify-content:center;
box-shadow:0 0 8px rgba(236,72,153,.6);
}
.pu-shop-user{
display:flex !important; align-items:center !important; gap:10px;
height:40px !important; min-height:40px !important; max-height:40px !important;
padding-left:12px;
border-left:1px solid var(--pu-card-border);
text-decoration:none !important; color:var(--pu-text) !important;
box-sizing:border-box !important; flex-shrink:0 !important;
line-height:1; vertical-align:middle;
}
.pu-shop-avatar{
width:36px; height:36px; border-radius:50%;
background:linear-gradient(135deg,var(--pu-accent),var(--pu-gold));
border:2px solid var(--pu-card-border); display:block; flex-shrink:0;
}
.pu-shop-user-text{ display:flex; flex-direction:column; line-height:1.2; }
.pu-shop-user-hi{ font-size:.65rem; color:var(--pu-muted); }
.pu-shop-user-name{ font-size:.82rem; font-weight:700; }
.pu-mobile-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:90; opacity:0; pointer-events:none; transition:opacity .25s ease; }
body.pu-sb-mobile-open .pu-mobile-backdrop{ opacity:1; pointer-events:auto; }
/* ---- SEARCH MODAL (new) ---- */
.pu-shop-search-overlay{
position:fixed; inset:0; background:rgba(4,3,10,.72); backdrop-filter:blur(6px);
z-index:2147483000; display:none; align-items:flex-start; justify-content:center;
padding-top:12vh; font-family:var(--pu-font-body); color:#fff;
}
.pu-shop-search-overlay.show{ display:flex; }
.pu-shop-search-modal{
width:min(640px,92%); background:var(--pu-panel);
border:1px solid var(--pu-card-border); border-radius:16px;
overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.pu-shop-search-head{
display:flex; align-items:center; gap:12px;
padding:16px 18px; border-bottom:1px solid var(--pu-card-border);
}
.pu-shop-search-head > svg{ width:18px; height:18px; color:var(--pu-muted); flex-shrink:0; }
.pu-shop-search-input{
flex:1; background:transparent !important; color:#fff !important;
font-size:1rem !important; outline:none !important; border:none !important;
padding:0 !important; box-shadow:none !important;
font-family:var(--pu-font-body) !important;
}
.pu-shop-search-input::placeholder{ color:var(--pu-muted) !important; }
.pu-shop-search-hint{
font-family:var(--pu-font-mono); font-size:.64rem; color:var(--pu-muted);
border:1px solid var(--pu-card-border); border-radius:5px; padding:3px 6px; flex-shrink:0;
}
.pu-shop-search-results{ max-height:60vh; overflow-y:auto; }
.pu-shop-search-item{
display:flex; align-items:center; gap:12px; padding:12px 18px;
border-bottom:1px solid rgba(38,32,50,.5); text-decoration:none !important; color:#fff !important;
}
.pu-shop-search-item:last-child{ border-bottom:none; }
.pu-shop-search-item:hover, .pu-shop-search-item.focused{ background:rgba(168,85,247,.08); }
.pu-shop-search-thumb{
width:44px; height:44px; border-radius:8px; background:#20182e;
flex-shrink:0; background-size:cover; background-position:center;
}
.pu-shop-search-meta{ flex:1; min-width:0; }
.pu-shop-search-title{ font-size:.86rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pu-shop-search-price{ font-family:var(--pu-font-mono); font-size:.72rem; color:var(--pu-gold); margin-top:2px; }
.pu-shop-search-empty{ padding:22px; text-align:center; color:var(--pu-muted); font-size:.85rem; }
/* ---- BREADCRUMB / TITLES ---- */
body.pu-shop .page-title, body.pu-shop .shop-page-title, body.pu-shop .archive-page-title,
body.pu-shop .entry-header h1, body.pu-shop h1.entry-title{
color:var(--pu-text) !important; font-family:var(--pu-font-display) !important; font-weight:800 !important;
background:transparent !important; border:none !important;
}
body.pu-shop .woocommerce-breadcrumb, body.pu-shop .breadcrumbs{
color:var(--pu-muted) !important; font-family:var(--pu-font-mono) !important;
font-size:.7rem !important; letter-spacing:.08em !important;
text-transform:uppercase !important; margin-bottom:16px !important;
}
body.pu-shop .woocommerce-breadcrumb a, body.pu-shop .breadcrumbs a{ color:var(--pu-accent) !important; }
body.pu-shop .woocommerce-breadcrumb a:hover{ color:var(--pu-pink) !important; }
body.pu-shop .woocommerce-result-count{ color:var(--pu-muted) !important; font-family:var(--pu-font-mono) !important; font-size:.78rem !important; }
body.pu-shop .woocommerce-ordering select, body.pu-shop select.orderby{
background:var(--pu-card) !important; color:var(--pu-text) !important;
border:1px solid var(--pu-card-border) !important; border-radius:8px !important;
padding:9px 14px !important; font-family:var(--pu-font-body) !important;
}
/* ═══════════════════════════════════════════════════════════════════
CATEGORY TILES on shop archive — landscape overlay
═══════════════════════════════════════════════════════════════════ */
body.pu-shop .col.product-category, body.pu-shop ul.products li.product-category{
background:transparent !important; border:none !important;
}
body.pu-shop .product-category > a, body.pu-shop li.product-category > a,
body.pu-shop .product-category .col-inner > a{
display:block !important; height:100% !important;
text-decoration:none !important; color:inherit !important; padding:0 !important;
}
body.pu-shop .product-category .col-inner{
position:relative !important; height:180px !important;
border-radius:16px !important; overflow:hidden !important;
border:1px solid var(--pu-card-border) !important;
background:linear-gradient(200deg,#241a35,#0a0810) !important;
transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
padding:0 !important; box-shadow:none !important;
}
body.pu-shop .product-category .box{
height:100% !important; position:relative !important;
background:transparent !important; box-shadow:none !important;
padding:0 !important; margin:0 !important;
}
body.pu-shop .product-category .box-image{
position:absolute !important; inset:0 !important;
height:100% !important; padding:0 !important; padding-top:0 !important;
margin:0 !important; background:transparent !important; z-index:0 !important;
border-radius:0 !important; overflow:hidden !important;
}
body.pu-shop .product-category .box-image img,
body.pu-shop .product-category .box-image .image-cover,
body.pu-shop .product-category .image-fade_in_back img{
width:100% !important; height:100% !important; object-fit:cover !important;
padding:0 !important; padding-top:0 !important; margin:0 !important;
display:block !important; border-radius:0 !important;
transition:transform .4s ease !important;
}
body.pu-shop .product-category:hover .box-image img,
body.pu-shop .product-category:hover .box-image .image-cover{ transform:scale(1.06) !important; }
body.pu-shop .product-category:hover .col-inner{
border-color:var(--pu-accent) !important;
box-shadow:0 8px 26px rgba(168,85,247,.25) !important;
transform:translateY(-3px);
}
body.pu-shop .product-category .col-inner::before{
content:"" !important; position:absolute !important; inset:0 !important;
background:linear-gradient(180deg, rgba(8,6,13,0) 30%, rgba(8,6,13,.92) 100%) !important;
z-index:1 !important; pointer-events:none !important;
}
body.pu-shop .product-category .box-text,
body.pu-shop .product-category .box-text.text-center{
position:absolute !important; left:20px !important; right:20px !important; bottom:16px !important;
top:auto !important; padding:0 !important; margin:0 !important;
background:transparent !important; text-align:left !important;
z-index:3 !important; display:block !important; visibility:visible !important; opacity:1 !important;
min-height:0 !important;
}
body.pu-shop .product-category .box-text-inner,
body.pu-shop .product-category .title-wrapper{
padding:0 !important; margin:0 !important; background:transparent !important;
text-align:left !important; position:static !important;
display:block !important; visibility:visible !important; opacity:1 !important;
}
body.pu-shop .product-category .box-text h1,
body.pu-shop .product-category .box-text h2,
body.pu-shop .product-category .box-text h3,
body.pu-shop .product-category .box-text h4,
body.pu-shop .product-category .box-text h5,
body.pu-shop .product-category .box-text h6,
body.pu-shop .product-category .box-text .name,
body.pu-shop .product-category .box-text .woocommerce-loop-category__title,
body.pu-shop .product-category .box-text-inner h5{
color:#fff !important;
font-family:var(--pu-font-display) !important;
font-weight:800 !important;
font-size:1.15rem !important;
line-height:1.15 !important;
letter-spacing:.02em !important;
text-transform:uppercase !important;
text-shadow:0 2px 12px rgba(0,0,0,.75) !important;
text-align:left !important;
margin:0 !important; padding:0 !important;
display:block !important; visibility:visible !important; opacity:1 !important;
}
body.pu-shop .product-category .count, body.pu-shop .product-category mark.count,
body.pu-shop .product-category .is-smaller, body.pu-shop .product-category .box-text p{
display:block !important; background:transparent !important;
color:var(--pu-muted) !important;
font-family:var(--pu-font-mono) !important;
font-size:.65rem !important; font-weight:600 !important;
letter-spacing:.12em !important; text-transform:uppercase !important;
text-shadow:0 1px 6px rgba(0,0,0,.6) !important;
padding:4px 0 0 !important; margin:0 !important;
line-height:1.2 !important; text-align:left !important;
}
body.pu-shop .product-category .box-image .image-tools{ display:none !important; }
/* ═══════════════════════════════════════════════════════════════════
PRODUCT LOOP — shop archive default
═══════════════════════════════════════════════════════════════════ */
body.pu-shop .col.product-small, body.pu-shop ul.products li.product{ background:transparent !important; }
body.pu-shop .col.product-small .col-inner{
background:var(--pu-card) !important;
border:1px solid var(--pu-card-border) !important;
border-radius:16px !important; overflow:hidden !important;
transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
body.pu-shop .col.product-small .box,
body.pu-shop .col.product-small .product-small.box,
body.pu-shop .product-small.box{
background:transparent !important;
border:none !important;
box-shadow:none !important;
transform:none !important;
}
body.pu-shop .col.product-small:hover .col-inner{
border-color:var(--pu-accent) !important;
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(168,85,247,.22) !important;
}
body.pu-shop .col.product-small:hover .box,
body.pu-shop .col.product-small:hover .product-small.box,
body.pu-shop .product-small.box:hover{
transform:none !important;
box-shadow:none !important;
border:none !important;
}
body.pu-shop .box-image{ background:linear-gradient(200deg,#241a35,#0a0810) !important; overflow:hidden !important; }
body.pu-shop .box-image img{ transition:none !important; }
body.pu-shop .box:hover .box-image img{ transform:none !important; }
body.pu-shop .box-text{ padding:14px 16px 18px !important; background:transparent !important; }
body.pu-shop .product-cat, body.pu-shop .product-small .category{
color:var(--pu-gold) !important; font-family:var(--pu-font-mono) !important;
font-size:.62rem !important; font-weight:600 !important; letter-spacing:.1em !important; opacity:1 !important;
}
body.pu-shop .product-cat a, body.pu-shop .product-small .category a{ color:var(--pu-gold) !important; }
body.pu-shop .woocommerce-loop-product__title, body.pu-shop .product-title, body.pu-shop .name.product-title{
color:var(--pu-text) !important; font-family:var(--pu-font-display) !important;
font-weight:700 !important; font-size:.92rem !important; margin:6px 0 !important;
}
body.pu-shop .product-title a{ color:var(--pu-text) !important; }
body.pu-shop .product-title a:hover{ color:var(--pu-accent) !important; }
/* Category-archive product cards — same "Featured Products" card style:
flat thumb on top (with NEW badge), plain body below with name,
then a price / stock-status row. (targeted by body.tax-product_cat) */
body.pu-shop.tax-product_cat .col.product-small,
body.pu-shop.tax-product_cat ul.products li.product-type-simple,
body.pu-shop.tax-product_cat ul.products li.product-type-variable{ background:transparent !important; }
body.pu-shop.tax-product_cat .col.product-small .col-inner,
body.pu-shop.tax-product_cat ul.products li.product .product-small{
border-radius:16px !important; overflow:hidden !important;
border:1px solid var(--pu-card-border) !important;
background:var(--pu-card) !important;
box-shadow:none !important; padding:0 !important;
transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
body.pu-shop.tax-product_cat .col.product-small:hover .col-inner{
border-color:var(--pu-accent) !important;
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(168,85,247,.22) !important;
}
body.pu-shop.tax-product_cat .col.product-small .box{
position:relative !important;
background:transparent !important; box-shadow:none !important;
padding:0 !important; margin:0 !important;
}
/* thumb: fixed height, flat top image (not a full-bleed overlay) */
body.pu-shop.tax-product_cat .col.product-small .box-image{
position:relative !important; height:150px !important;
padding:0 !important; background:linear-gradient(200deg,#241a35,#0a0810) !important;
overflow:hidden !important; z-index:0 !important;
}
/* Native ![]()
/wrapper styling removed — media inside .box-image is
hidden and replaced by the .pu-thumb-cover background layer (see the
thumb-rendering block further down). .box-image is now a 150px spacer
whose gradient doubles as the no-image fallback. */
body.pu-shop.tax-product_cat .col.product-small .col-inner::before{ content:none !important; }
/* NEW badge — absolute-positioned to the top-left of the card, so it
lands on the thumb regardless of exactly where the theme places the
loop-item-title hooks in the markup. */
body.pu-shop.tax-product_cat .col.product-small .pu-cat-badge{
position:absolute !important; top:12px !important; left:12px !important;
background:var(--pu-gold) !important; color:#1a1420 !important;
font-size:.62rem !important; font-weight:800 !important;
padding:4px 9px !important; border-radius:5px !important; letter-spacing:.03em !important;
z-index:2 !important; text-transform:none !important; line-height:1.4 !important;
}
/* body below the thumb: plain background, left-aligned text */
body.pu-shop.tax-product_cat .col.product-small .box-text,
body.pu-shop.tax-product_cat .col.product-small .box-text.text-center{
position:static !important; left:auto !important; right:auto !important; bottom:auto !important; top:auto !important;
padding:14px 16px 16px !important; margin:0 !important;
background:transparent !important; text-align:left !important;
z-index:auto !important; display:block !important;
}
body.pu-shop.tax-product_cat .col.product-small .box-text .title-wrapper{
background:transparent !important; padding:0 !important; margin:0 !important;
text-align:left !important; display:block !important;
}
body.pu-shop.tax-product_cat .col.product-small .box-text .price-wrapper{
background:transparent !important; padding:0 !important; margin:0 !important;
text-align:left !important; display:block !important;
}
/* .pu-cat-meta wraps the price + injected stock-status as one row */
body.pu-shop.tax-product_cat .col.product-small .box-text .pu-cat-meta{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:10px !important;
}
body.pu-shop.tax-product_cat .col.product-small .box-text .category,
body.pu-shop.tax-product_cat .col.product-small .box-text .product-cat,
body.pu-shop.tax-product_cat .col.product-small .box-text .star-rating,
body.pu-shop.tax-product_cat .col.product-small .box-text .star-rating-wrapper,
body.pu-shop.tax-product_cat .col.product-small .box-text .woocommerce-product-rating,
body.pu-shop.tax-product_cat .col.product-small .box-text .review-count,
body.pu-shop.tax-product_cat .col.product-small .box-text .woocommerce-review-link,
body.pu-shop.tax-product_cat .col.product-small .box-text .star-rating + span,
body.pu-shop.tax-product_cat .col.product-small .box-text .star-rating + a,
body.pu-shop.tax-product_cat .col.product-small .box-text .is-xsmall,
body.pu-shop.tax-product_cat .col.product-small .box-text .is-small{ display:none !important; }
body.pu-shop.tax-product_cat .col.product-small .box-text .pu-loop-rating{
display:flex !important; align-items:center !important; gap:6px !important;
margin:0 0 8px !important; line-height:1 !important;
}
body.pu-shop.tax-product_cat .col.product-small .box-text .pu-loop-stars{
display:inline-flex !important; align-items:center !important; gap:2px !important;
}
body.pu-shop.tax-product_cat .col.product-small .box-text .pu-loop-stars svg{ display:block !important; }
body.pu-shop.tax-product_cat .col.product-small .box-text .pu-loop-count{
color:var(--pu-muted) !important; font-size:.72rem !important; font-weight:600 !important;
}
body.pu-shop.tax-product_cat .col.product-small .box-text .product-title,
body.pu-shop.tax-product_cat .col.product-small .box-text .name{
color:var(--pu-text) !important;
font-family:var(--pu-font-display) !important;
font-weight:700 !important;
font-size:.9rem !important;
line-height:1.3 !important;
text-transform:none !important;
text-align:left !important;
text-shadow:none !important;
margin:0 0 6px 0 !important; padding:0 !important;
}
body.pu-shop.tax-product_cat .col.product-small .box-text .product-title a,
body.pu-shop.tax-product_cat .col.product-small .box-text .name a{ color:var(--pu-text) !important; }
body.pu-shop.tax-product_cat .col.product-small .box-text .price,
body.pu-shop.tax-product_cat .col.product-small .box-text .price-wrapper .price,
body.pu-shop.tax-product_cat .col.product-small .box-text .amount{
color:var(--pu-gold) !important;
font-family:var(--pu-font-mono) !important;
font-size:.86rem !important; font-weight:700 !important;
text-shadow:none !important;
}
/* stock-status line injected next to the price */
body.pu-shop.tax-product_cat .col.product-small .pu-cat-status{
font-family:var(--pu-font-mono) !important; font-size:.66rem !important;
font-weight:600 !important; color:var(--pu-success) !important;
white-space:nowrap !important; flex-shrink:0 !important;
}
body.pu-shop.tax-product_cat .col.product-small .image-tools,
body.pu-shop.tax-product_cat .col.product-small .quick-view,
body.pu-shop.tax-product_cat .col.product-small .overlay,
body.pu-shop.tax-product_cat .col.product-small .image-overlay,
body.pu-shop.tax-product_cat .col.product-small .overlay-shade,
body.pu-shop.tax-product_cat .col.product-small .hover-overlay,
body.pu-shop.tax-product_cat .col.product-small .shade{ display:none !important; opacity:0 !important; background:none !important; }
body.pu-shop.tax-product_cat .col.product-small .box-image::before,
body.pu-shop.tax-product_cat .col.product-small .box-image::after,
body.pu-shop.tax-product_cat .col.product-small .box::before,
body.pu-shop.tax-product_cat .col.product-small .box::after,
body.pu-shop.tax-product_cat .col.product-small .col-inner::after{ content:none !important; display:none !important; }
/* ── Equal-height cards ──────────────────────────────────────────────
Cards must not grow with title length. Stretch every column to the
row height, lay the card out as a flex column (fixed 150px thumb +
flexible body), clamp the title to exactly 2 lines (ellipsis) with
the 2-line height reserved so 1-line titles occupy the same space,
and pin the price/stock row to the card bottom. These rules sit
AFTER the block/display rules above so they win at equal specificity. */
body.pu-shop.tax-product_cat ul.products,
body.pu-shop.tax-product_cat .products.row{ align-items:stretch !important; }
body.pu-shop.tax-product_cat .col.product-small{ display:flex !important; }
body.pu-shop.tax-product_cat .col.product-small .col-inner{
width:100% !important; height:100% !important;
display:flex !important; flex-direction:column !important;
}
body.pu-shop.tax-product_cat .col.product-small .box{
display:flex !important; flex-direction:column !important;
flex:1 1 auto !important; min-height:0 !important;
}
body.pu-shop.tax-product_cat .col.product-small .box-image{
flex:0 0 150px !important; /* fixed thumb, never squeezed */
}
body.pu-shop.tax-product_cat .col.product-small .box-text,
body.pu-shop.tax-product_cat .col.product-small .box-text.text-center{
display:flex !important; flex-direction:column !important;
flex:1 1 auto !important; min-height:0 !important;
}
body.pu-shop.tax-product_cat .col.product-small .box-text .product-title,
body.pu-shop.tax-product_cat .col.product-small .box-text .name{
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
min-height:2.6em !important; /* 2 lines @ line-height 1.3 */
}
body.pu-shop.tax-product_cat .col.product-small .box-text .pu-cat-meta{
margin-top:auto !important; /* pin price/stock to card bottom */
}
/* ── Thumb rendering: background-cover layer (dashboard pipeline) ────
Styling Flatsome's native img wrapper chain proved unreliable across
builds (wrapper classes / positioning differ), so the native media is
hidden entirely and the product image is painted by .pu-thumb-cover —
an absolutely-positioned background-cover layer injected by the loop
hook in section 4b, anchored to .box (position:relative). This is the
exact mechanism the dashboard and Featured cards use. The .box-image
element remains as a 150px spacer with its gradient as the loading /
no-image fallback. */
body.pu-shop.tax-product_cat .col.product-small .box-image img,
body.pu-shop.tax-product_cat .col.product-small .box-image picture,
body.pu-shop.tax-product_cat .col.product-small .box-image noscript{
display:none !important;
}
body.pu-shop.tax-product_cat .col.product-small .pu-thumb-cover{
position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
height:150px !important;
background-size:cover !important; background-position:center !important;
background-repeat:no-repeat !important;
z-index:1 !important; pointer-events:none !important;
transform:none !important; filter:none !important;
}
body.pu-shop.tax-product_cat .col.product-small:hover .pu-thumb-cover{
transform:none !important; filter:none !important; opacity:1 !important;
}
/* Stretch over .box (position:relative above). Empty sibling link —
not inside the title, so line-clamp overflow cannot clip it. */
body.pu-shop.tax-product_cat .col.product-small .pu-loop-card-hit{
position:absolute !important; inset:0 !important;
z-index:5 !important; display:block !important;
padding:0 !important; margin:0 !important; border:0 !important;
background:transparent !important; background-image:none !important;
box-shadow:none !important; border-radius:0 !important;
font-size:0 !important; line-height:0 !important;
text-indent:0 !important; text-decoration:none !important;
overflow:hidden !important; cursor:pointer !important;
transform:none !important; filter:none !important;
width:auto !important; height:auto !important;
min-width:0 !important; min-height:0 !important;
}
body.pu-shop.tax-product_cat .col.product-small .add-to-cart-button,
body.pu-shop.tax-product_cat .col.product-small a.add_to_cart_button,
body.pu-shop.tax-product_cat .col.product-small a.product_type_simple,
body.pu-shop.tax-product_cat .col.product-small a.product_type_variable{
position:relative !important; z-index:6 !important;
}
/* Safety net: never let WC's screen-reader price-range span become
visible anywhere in the shop, regardless of theme CSS load order. */
body.pu-shop .price .screen-reader-text,
body.pu-shop .pu-featured-price .screen-reader-text{ display:none !important; }
/* ---- PRICES / RATINGS / SALE / PLACEHOLDER ---- */
body.pu-shop .price, body.pu-shop .woocommerce-Price-amount, body.pu-shop .amount,
body.pu-shop ins .amount, body.pu-shop .woocommerce-Price-amount bdi{
color:var(--pu-gold) !important; font-weight:700 !important;
}
body.pu-shop del, body.pu-shop del .amount{ color:var(--pu-muted) !important; opacity:.7; }
body.pu-shop .price ins{ text-decoration:none !important; }
body.pu-shop .star-rating span::before, body.pu-shop .star-rating::before,
body.pu-shop .star-rating{ color:var(--pu-gold) !important; }
body.pu-shop .onsale{
background:var(--pu-gold) !important; color:#1a1420 !important; border-radius:5px !important;
font-family:var(--pu-font-body) !important; font-weight:800 !important; font-size:.65rem !important;
padding:4px 9px !important; letter-spacing:.05em !important; text-transform:uppercase !important;
line-height:1.2 !important; border:none !important;
}
body.pu-shop img.wp-post-image, body.pu-shop img.woocommerce-placeholder,
body.pu-shop .woocommerce-product-gallery__image img{
background:linear-gradient(200deg,#241a35,#0a0810) !important;
}
/* ═══════════════════════════════════════════════════════════════════
GLOBAL BUTTONS (v4 — flat neon, matches dashboard .btn-primary)
Diagonal gradient kept entirely inside the accent purple range
(no pink bottom edge), crisp 1px light border, and a *symmetric*
ring + negative-spread glow so nothing smears sideways on the
near-black bg. No inset bevels / text-shadow — flat like the rest
of the UI. Keep this recipe in sync with powerup-dashboard.php.
═══════════════════════════════════════════════════════════════════ */
body.pu-shop button, body.pu-shop .button, body.pu-shop input[type="submit"],
body.pu-shop .woocommerce a.button, body.pu-shop .woocommerce button.button,
body.pu-shop .woocommerce input.button, body.pu-shop .wc-block-components-button,
body.pu-shop .single_add_to_cart_button{
background:linear-gradient(135deg,#c084fc 0%,var(--pu-accent) 40%,var(--pu-accent-2) 100%) !important;
color:#fff !important; border:1px solid rgba(255,255,255,.16) !important;
border-radius:10px !important; padding:12px 22px !important;
font-family:var(--pu-font-body) !important; font-weight:700 !important;
font-size:.84rem !important; letter-spacing:.02em !important;
box-shadow:
0 0 0 1px rgba(168,85,247,.20),
0 6px 20px -6px rgba(168,85,247,.55) !important;
text-transform:none !important;
text-shadow:none !important;
transition:filter .18s ease, transform .1s ease, box-shadow .18s ease !important;
}
body.pu-shop button:hover, body.pu-shop .button:hover,
body.pu-shop input[type="submit"]:hover, body.pu-shop .woocommerce a.button:hover{
filter:brightness(1.1) !important;
box-shadow:
0 0 0 1px rgba(168,85,247,.35),
0 10px 26px -6px rgba(168,85,247,.65) !important;
transform:translateY(-1px) !important;
}
body.pu-shop button:active, body.pu-shop .button:active{
transform:translateY(0) !important;
box-shadow:
0 0 0 1px rgba(168,85,247,.25),
0 3px 10px -4px rgba(168,85,247,.5) !important;
filter:brightness(.95) !important;
}
body.pu-shop .products .button.product_type_simple, body.pu-shop .products .add_to_cart_button{
padding:9px 16px !important; font-size:.78rem !important;
}
/* ─────────────────────────────────────────────────────────────────
CHROME BUTTONS — full reset.
The global `body.pu-shop button` rule above has specificity (0,1,2)
and beats `.pu-sidebar-toggle` / `.pu-shop-icon` (0,1,0). With the
site-wide `box-sizing:border-box` reset, its `padding:12px 22px`
eats the 38×38 button to negative content width → the SVG icon
has zero room to render. Its `border:1px solid rgba(0,0,0,.28)`
is the "dim outer line" everyone sees. Its `color:#fff` is moot
because there's no content area left to render the stroke in.
Reset EVERY property the global rule sets — cascade is per-prop,
not per-rule, so anything not restated leaks through.
───────────────────────────────────────────────────────────────── */
body.pu-shop .pu-nav-sidebar button, body.pu-shop .pu-mobile-menu-btn,
body.pu-shop .pu-shop-icon, body.pu-shop .pu-shop-back,
body.pu-shop .pu-sidebar-toggle{
background:transparent !important; background-image:none !important;
box-shadow:none !important;
padding:0 !important;
border:1px solid var(--pu-card-border) !important;
border-radius:9px !important;
color:var(--pu-muted) !important;
text-shadow:none !important;
font-family:var(--pu-font-body) !important;
font-weight:600 !important;
font-size:.85rem !important;
letter-spacing:0 !important;
text-transform:none !important;
filter:none !important; transform:none !important;
}
/* .pu-shop-back is a pill with text — needs its own padding back.
Height forced to 40px and vertical padding zeroed so it matches
the icon buttons pixel-for-pixel in the flex row. */
body.pu-shop .pu-shop-back{
height:40px !important;
padding:0 14px !important;
color:var(--pu-text) !important;
background:rgba(168,85,247,.10) !important;
line-height:1 !important;
}
/* Hover overrides — must beat both the base .pu-*:hover rules and
the global `body.pu-shop button:hover` gradient hover */
body.pu-shop .pu-shop-icon:hover, body.pu-shop .pu-sidebar-toggle:hover,
body.pu-shop .pu-mobile-menu-btn:hover, body.pu-shop .pu-nav-sidebar button:hover{
color:#fff !important; border-color:var(--pu-accent) !important;
box-shadow:0 0 10px var(--pu-accent-glow) !important;
background:transparent !important; background-image:none !important;
filter:none !important; transform:none !important;
}
body.pu-shop .pu-shop-back:hover{
color:#fff !important; border-color:var(--pu-accent) !important;
box-shadow:0 0 12px var(--pu-accent-glow) !important;
background:rgba(168,85,247,.16) !important; background-image:none !important;
filter:none !important; transform:none !important;
}
/* Active state — kill the global button `translateY(0)` + inset press */
body.pu-shop .pu-shop-icon:active, body.pu-shop .pu-sidebar-toggle:active,
body.pu-shop .pu-mobile-menu-btn:active, body.pu-shop .pu-shop-back:active,
body.pu-shop .pu-nav-sidebar button:active{
box-shadow:none !important; filter:none !important; transform:none !important;
}
/* Lightbox next/prev — global `button` rule paints Magnific/PhotoSwipe
arrows as padded purple pills. Reset and draw clean chevrons. */
body.pu-shop .mfp-wrap button,
body.pu-shop .mfp-container button,
body.pu-shop .mfp-arrow,
body.pu-shop .mfp-close,
body.pu-shop .pswp button,
body.pu-shop .pswp__button{
background:rgba(12,10,18,.92) !important;
background-image:none !important;
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
transform:none !important;
font-weight:400 !important;
letter-spacing:0 !important;
text-transform:none !important;
}
body.pu-shop .mfp-wrap button:hover,
body.pu-shop .mfp-arrow:hover,
body.pu-shop .mfp-close:hover,
body.pu-shop .pswp button:hover,
body.pu-shop .pswp__button:hover{
filter:none !important;
transform:none !important;
background:rgba(168,85,247,.22) !important;
background-image:none !important;
border-color:var(--pu-accent) !important;
}
body.pu-shop .mfp-arrow,
body.pu-shop .pswp__button--arrow--left,
body.pu-shop .pswp__button--arrow--right,
body.pu-shop .pswp__button--arrow--prev,
body.pu-shop .pswp__button--arrow--next{
width:48px !important; height:48px !important; min-width:48px !important;
padding:0 !important; margin-top:-24px !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:12px !important;
opacity:1 !important; overflow:visible !important;
text-indent:0 !important; color:#fff !important;
}
body.pu-shop .mfp-arrow:before,
body.pu-shop .mfp-arrow:after,
body.pu-shop .pswp__button--arrow--left:before,
body.pu-shop .pswp__button--arrow--right:before,
body.pu-shop .pswp__button--arrow--left:after,
body.pu-shop .pswp__button--arrow--right:after{
display:none !important;
border:none !important;
margin:0 !important;
background:none !important;
box-shadow:none !important;
}
body.pu-shop .mfp-arrow-left:after,
body.pu-shop .mfp-arrow-right:after,
body.pu-shop .pswp__button--arrow--left:after,
body.pu-shop .pswp__button--arrow--right:after,
body.pu-shop .pswp__button--arrow--prev:after,
body.pu-shop .pswp__button--arrow--next:after{
display:block !important; content:'' !important;
position:absolute !important; top:50% !important; left:50% !important;
width:10px !important; height:10px !important;
margin:0 !important; padding:0 !important;
background:none !important; box-shadow:none !important;
border-top:2px solid #fff !important;
border-right:2px solid #fff !important;
}
body.pu-shop .mfp-arrow-left:after,
body.pu-shop .pswp__button--arrow--left:after,
body.pu-shop .pswp__button--arrow--prev:after{
transform:translate(-30%,-50%) rotate(-135deg) !important;
}
body.pu-shop .mfp-arrow-right:after,
body.pu-shop .pswp__button--arrow--right:after,
body.pu-shop .pswp__button--arrow--next:after{
transform:translate(-70%,-50%) rotate(45deg) !important;
}
body.pu-shop .mfp-close{
width:40px !important; height:40px !important; padding:0 !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:10px !important; color:#fff !important;
font-size:22px !important; line-height:38px !important;
right:16px !important; top:16px !important;
}
/* ---- FORM INPUTS ---- */
body.pu-shop input[type="text"], body.pu-shop input[type="email"], body.pu-shop input[type="password"],
body.pu-shop input[type="tel"], body.pu-shop input[type="url"], body.pu-shop input[type="number"],
body.pu-shop input[type="search"], body.pu-shop textarea, body.pu-shop select{
background:var(--pu-card) !important; color:var(--pu-text) !important;
border:1px solid var(--pu-card-border) !important; border-radius:9px !important;
padding:11px 14px !important; font-family:var(--pu-font-body) !important; font-size:.86rem !important;
box-shadow:none !important;
}
body.pu-shop input:focus, body.pu-shop textarea:focus, body.pu-shop select:focus{
border-color:var(--pu-accent) !important; outline:none !important;
box-shadow:0 0 0 3px var(--pu-accent-glow) !important;
}
body.pu-shop input::placeholder, body.pu-shop textarea::placeholder{ color:#615873 !important; }
body.pu-shop label{ color:var(--pu-text) !important; font-weight:600 !important; font-size:.84rem !important; }
/* ═══════════════════════════════════════════════════════════════════
SINGLE PRODUCT PAGE
═══════════════════════════════════════════════════════════════════ */
body.pu-shop.single-product .product{ padding-top:20px !important; }
body.pu-shop.single-product .product > .row{ display:flex !important; gap:32px !important; }
body.pu-shop .product .summary .product_title,
body.pu-shop .product h1.entry-title,
body.pu-shop .product h1.product_title{
color:var(--pu-text) !important;
font-family:var(--pu-font-body) !important;
font-weight:800 !important;
font-size:1.9rem !important;
margin-bottom:14px !important;
}
body.pu-shop .product .summary{ padding-left:12px !important; }
body.pu-shop .product .summary .price{
font-size:1.8rem !important;
margin:8px 0 18px !important;
font-family:var(--pu-font-body) !important;
}
body.pu-shop .product .woocommerce-product-rating,
body.pu-shop .product .summary .woocommerce-product-rating{ margin-bottom:10px !important; }
body.pu-shop .product .summary .stock{
font-family:var(--pu-font-mono) !important; font-size:.7rem !important;
letter-spacing:.08em !important;
text-transform:uppercase !important; margin-bottom:12px !important;
}
body.pu-shop .product .summary .stock.in-stock{
color:var(--pu-success) !important;
}
body.pu-shop .product .summary .stock.out-of-stock{
color:#f87171 !important;
}
body.pu-shop .product .woocommerce-variation-availability .stock{
text-transform:none !important;
letter-spacing:.03em !important;
font-size:.78rem !important;
margin:8px 0 0 !important;
}
body.pu-shop .product .woocommerce-product-details__short-description{
color:var(--pu-muted) !important; font-size:.9rem !important;
line-height:1.6 !important; margin:14px 0 20px !important;
}
body.pu-shop .single-product .product .images,
body.pu-shop .single-product .product .woocommerce-product-gallery{
background:var(--pu-panel) !important;
border:1px solid var(--pu-card-border) !important;
border-radius:16px !important; padding:18px !important;
box-shadow:none !important;
}
body.pu-shop .woocommerce-product-gallery__image{ background:var(--pu-card) !important; border-radius:12px !important; overflow:hidden !important; }
body.pu-shop .flickity-page-dots .dot{ background:var(--pu-muted) !important; }
body.pu-shop .flickity-page-dots .dot.is-selected{ background:var(--pu-accent) !important; }
body.pu-shop .woocommerce-product-gallery a.slider-nav-circle,
body.pu-shop .product .images .flickity-prev-next-button,
body.pu-shop .product .images a.slider-nav{
background:rgba(20,16,31,.85) !important;
border:1px solid var(--pu-card-border) !important;
box-shadow:none !important; border-radius:10px !important;
color:var(--pu-text) !important;
}
body.pu-shop .product .images .flickity-prev-next-button:hover{
background:rgba(168,85,247,.15) !important; border-color:var(--pu-accent) !important;
}
body.pu-shop .product .images .flickity-prev-next-button svg,
body.pu-shop .product .images .icon-angle-left, body.pu-shop .product .images .icon-angle-right{
color:var(--pu-text) !important; fill:var(--pu-text) !important;
}
body.pu-shop .zoom-button, body.pu-shop .image-tools.top{
background:rgba(20,16,31,.85) !important;
border:1px solid var(--pu-card-border) !important;
border-radius:10px !important; color:var(--pu-text) !important;
}
body.pu-shop .product .quantity, body.pu-shop .quantity,
body.pu-shop .woocommerce-cart-form .quantity,
body.pu-shop .cart_item .quantity,
body.pu-shop .quantity.buttons_added{
display:inline-flex !important; align-items:center !important;
background:var(--pu-card) !important; border:1px solid var(--pu-card-border) !important;
border-radius:9px !important; overflow:hidden !important;
height:46px !important;
box-shadow:none !important; padding:0 !important; margin:0 !important;
}
body.pu-shop .product .quantity input.qty,
body.pu-shop .quantity input.qty,
body.pu-shop .quantity input[type="number"]{
width:52px !important; text-align:center !important;
background:transparent !important; background-image:none !important;
border:none !important;
box-shadow:none !important; border-radius:0 !important;
color:var(--pu-text) !important; padding:0 !important;
height:100% !important; font-size:.9rem !important; font-weight:600 !important;
}
/* Catch every markup Flatsome/Woo emits: button.plus, a.plus, .button.plus, input.plus, .qty-btn */
body.pu-shop .quantity .minus, body.pu-shop .quantity .plus,
body.pu-shop .quantity button.minus, body.pu-shop .quantity button.plus,
body.pu-shop .quantity a.minus, body.pu-shop .quantity a.plus,
body.pu-shop .quantity input.minus, body.pu-shop .quantity input.plus,
body.pu-shop .quantity .button.minus, body.pu-shop .quantity .button.plus,
body.pu-shop .product .quantity .minus, body.pu-shop .product .quantity .plus,
body.pu-shop .woocommerce-cart-form .quantity > *:not(input),
body.pu-shop .cart_item .quantity > *:not(input){
background:transparent !important; background-image:none !important;
box-shadow:none !important; text-shadow:none !important;
color:var(--pu-text) !important;
padding:0 !important; border:none !important; border-radius:0 !important;
width:34px !important; min-width:34px !important; height:100% !important;
font-size:1.05rem !important; font-weight:700 !important; line-height:1 !important;
display:flex !important; align-items:center !important; justify-content:center !important;
cursor:pointer !important; letter-spacing:0 !important;
text-decoration:none !important;
transition:background .15s ease !important;
filter:none !important; transform:none !important;
}
body.pu-shop .quantity .minus:hover, body.pu-shop .quantity .plus:hover,
body.pu-shop .quantity button.minus:hover, body.pu-shop .quantity button.plus:hover,
body.pu-shop .quantity a.minus:hover, body.pu-shop .quantity a.plus:hover,
body.pu-shop .woocommerce-cart-form .quantity > *:not(input):hover{
background:rgba(168,85,247,.15) !important; color:#fff !important;
filter:none !important; transform:none !important; box-shadow:none !important;
}
body.pu-shop .product .cart, body.pu-shop .product form.cart{
display:flex !important; align-items:center !important;
gap:12px !important; flex-wrap:wrap !important;
margin:20px 0 !important;
}
body.pu-shop .product .cart .single_add_to_cart_button{
height:46px !important; padding:0 26px !important;
font-size:.92rem !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
min-width:180px !important;
}
body.pu-shop .buy-now-button, body.pu-shop a.buy_now_button,
body.pu-shop button.buy_now_button, body.pu-shop .wcdc-buy-now,
body.pu-shop .direct-checkout-btn,
body.pu-shop [class*="buy-now-button"], body.pu-shop [class*="buy_now_button"]{
background:transparent !important; background-image:none !important;
color:var(--pu-accent) !important;
border:1.5px solid var(--pu-accent) !important;
box-shadow:none !important;
height:46px !important; padding:0 26px !important;
font-weight:700 !important; font-size:.92rem !important;
border-radius:9px !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
min-width:140px !important;
transition:all .18s ease !important;
}
body.pu-shop .buy-now-button:hover, body.pu-shop a.buy_now_button:hover,
body.pu-shop button.buy_now_button:hover, body.pu-shop [class*="buy-now-button"]:hover,
body.pu-shop [class*="buy_now_button"]:hover{
background:rgba(168,85,247,.12) !important;
border-color:var(--pu-pink) !important;
color:var(--pu-pink) !important;
filter:none !important;
}
body.pu-shop .product_meta{
border-top:1px solid var(--pu-card-border) !important;
padding-top:14px !important; margin-top:18px !important;
font-family:var(--pu-font-mono) !important; font-size:.7rem !important;
color:var(--pu-muted) !important; letter-spacing:.06em !important;
}
body.pu-shop .product_meta > *{ display:block !important; margin-bottom:6px !important; }
body.pu-shop .product_meta a{ color:var(--pu-accent) !important; text-transform:uppercase !important; }
body.pu-shop .product_meta a:hover{ color:var(--pu-pink) !important; }
body.pu-shop .product-share, body.pu-shop .share-icons, body.pu-shop .social-icons{
margin-top:16px !important;
display:flex !important; gap:8px !important; flex-wrap:wrap !important;
}
body.pu-shop .product-share a, body.pu-shop .social-icons a,
body.pu-shop .product-share .button, body.pu-shop .social-icons .button{
background:var(--pu-card) !important;
border:1px solid var(--pu-card-border) !important;
color:var(--pu-muted) !important;
box-shadow:none !important;
width:36px !important; height:36px !important;
padding:0 !important; border-radius:8px !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
font-size:.85rem !important;
background-image:none !important;
}
body.pu-shop .product-share a:hover, body.pu-shop .social-icons a:hover{
color:#fff !important; border-color:var(--pu-accent) !important;
background:rgba(168,85,247,.15) !important;
}
body.pu-shop .product-share a i, body.pu-shop .social-icons a i{ font-size:14px !important; }
body.pu-shop .woocommerce-tabs ul.tabs{
background:transparent !important;
border-bottom:1px solid var(--pu-card-border) !important;
padding:0 !important; margin-bottom:20px !important;
}
body.pu-shop .woocommerce-tabs ul.tabs li{ background:transparent !important; border:none !important; border-radius:0 !important; margin:0 4px !important; padding:0 !important; }
body.pu-shop .woocommerce-tabs ul.tabs li a{
color:var(--pu-muted) !important; font-family:var(--pu-font-display) !important;
font-weight:700 !important; font-size:.85rem !important; padding:12px 18px !important;
display:block !important; border-bottom:2px solid transparent !important;
}
body.pu-shop .woocommerce-tabs ul.tabs li.active a,
body.pu-shop .woocommerce-tabs ul.tabs li.current a{
color:var(--pu-text) !important; border-bottom-color:var(--pu-accent) !important;
}
body.pu-shop .woocommerce-tabs .tabs::before, body.pu-shop .woocommerce-tabs .tabs::after,
body.pu-shop .woocommerce-tabs .tabs li::before, body.pu-shop .woocommerce-tabs .tabs li::after{ display:none !important; }
body.pu-shop .related h2, body.pu-shop .upsells h2, body.pu-shop .cross-sells h2{
color:var(--pu-text) !important; font-family:var(--pu-font-display) !important;
font-weight:700 !important; font-size:1.2rem !important; margin:32px 0 20px !important;
}
body.pu-shop.single-product .related ul.products,
body.pu-shop.single-product .related-products ul.products,
body.pu-shop.single-product .upsells ul.products,
body.pu-shop.single-product .related .row,
body.pu-shop.single-product .related-products .row,
body.pu-shop.single-product .upsells .row{
display:flex !important; flex-wrap:wrap !important; align-items:stretch !important;
}
body.pu-shop.single-product .related .product-small,
body.pu-shop.single-product .related .col,
body.pu-shop.single-product .related-products .product-small,
body.pu-shop.single-product .related-products .col,
body.pu-shop.single-product .upsells .product-small,
body.pu-shop.single-product .upsells .col{
display:flex !important; align-self:stretch !important; height:auto !important;
}
body.pu-shop.single-product .related .col-inner,
body.pu-shop.single-product .related-products .col-inner,
body.pu-shop.single-product .upsells .col-inner{
display:flex !important; flex-direction:column !important;
width:100% !important; height:100% !important;
}
body.pu-shop.single-product .related .box,
body.pu-shop.single-product .related-products .box,
body.pu-shop.single-product .upsells .box{
display:flex !important; flex-direction:column !important;
flex:1 1 auto !important; width:100% !important; height:100% !important;
border:none !important; box-shadow:none !important; transform:none !important;
}
body.pu-shop.single-product .related .box-text,
body.pu-shop.single-product .related-products .box-text,
body.pu-shop.single-product .upsells .box-text{
display:flex !important; flex-direction:column !important;
flex:1 1 auto !important;
}
body.pu-shop.single-product .related .star-rating,
body.pu-shop.single-product .related .star-rating-wrapper,
body.pu-shop.single-product .related .woocommerce-product-rating,
body.pu-shop.single-product .related .pu-loop-rating,
body.pu-shop.single-product .related-products .star-rating,
body.pu-shop.single-product .related-products .star-rating-wrapper,
body.pu-shop.single-product .related-products .woocommerce-product-rating,
body.pu-shop.single-product .upsells .star-rating,
body.pu-shop.single-product .upsells .star-rating-wrapper,
body.pu-shop.single-product .upsells .woocommerce-product-rating{
display:none !important;
}
body.pu-shop.single-product .related .product-title,
body.pu-shop.single-product .related .name,
body.pu-shop.single-product .related .name.product-title,
body.pu-shop.single-product .related .woocommerce-loop-product__title,
body.pu-shop.single-product .related .product-title a,
body.pu-shop.single-product .related .name a,
body.pu-shop.single-product .related-products .product-title,
body.pu-shop.single-product .related-products .name,
body.pu-shop.single-product .related-products .product-title a,
body.pu-shop.single-product .related-products .name a,
body.pu-shop.single-product .upsells .product-title,
body.pu-shop.single-product .upsells .name,
body.pu-shop.single-product .upsells .product-title a,
body.pu-shop.single-product .upsells .name a{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
line-clamp:2 !important;
overflow:hidden !important;
height:2.6em !important;
max-height:2.6em !important;
line-height:1.3 !important;
white-space:normal !important;
}
body.pu-shop.single-product .related .price-wrapper,
body.pu-shop.single-product .related-products .price-wrapper,
body.pu-shop.single-product .upsells .price-wrapper{
margin-top:auto !important;
}
/* Payment strip, badges, sysreq, features (emitted by product-fields snippet) */
body.pu-shop .pu-payment-section{
margin:20px 0 !important; padding:22px 24px !important;
background:var(--pu-panel) !important;
border:1px solid var(--pu-card-border) !important; border-radius:12px !important;
text-align:center !important;
}
body.pu-shop .pu-payment-title{
font-size:.9rem !important; font-weight:600 !important;
color:var(--pu-text) !important; margin-bottom:14px !important;
font-family:var(--pu-font-body) !important;
}
body.pu-shop .pu-payment-methods{
display:flex !important; justify-content:center !important; align-items:center !important;
gap:8px !important; flex-wrap:wrap !important;
}
body.pu-shop .pu-pm{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
min-width:64px !important; padding:8px 14px !important;
background:var(--pu-card) !important;
border:1px solid var(--pu-card-border) !important;
border-radius:8px !important;
font-family:var(--pu-font-mono) !important;
font-size:.68rem !important; font-weight:700 !important;
color:var(--pu-text) !important; letter-spacing:.08em !important;
}
body.pu-shop .pu-product-badges{
display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
margin:34px 0 40px;
}
body.pu-shop .pu-pb{
display:flex; align-items:center; justify-content:center; gap:12px;
padding:22px 20px; background:var(--pu-panel);
border:1px solid var(--pu-card-border); border-radius:12px;
color:var(--pu-text); font-family:var(--pu-font-mono);
font-size:.75rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; transition:all .22s ease;
}
body.pu-shop .pu-pb:hover{ border-color:var(--pu-accent); box-shadow:0 4px 14px rgba(168,85,247,.25); }
body.pu-shop .pu-pb svg{ width:20px; height:20px; color:var(--pu-accent); flex-shrink:0; }
body.pu-shop .pu-section-line{
display:grid !important; grid-template-columns:1fr auto 1fr;
align-items:center; gap:24px; margin:56px 0 34px !important;
}
body.pu-shop .pu-section-line .pu-sl-line{ height:1px; background:var(--pu-card-border); display:block; }
body.pu-shop .pu-section-line h2{
font-family:var(--pu-font-display) !important; font-weight:800 !important;
font-size:1.5rem !important; letter-spacing:.2em !important;
color:var(--pu-text) !important; text-transform:uppercase !important;
margin:0 !important; white-space:nowrap;
}
body.pu-shop .pu-sysreq-grid{
display:grid; grid-template-columns:repeat(6, 1fr); gap:12px;
margin:24px 0 40px;
}
body.pu-shop .pu-sysreq-card{
background:var(--pu-panel); border:1px solid var(--pu-card-border);
border-radius:12px; padding:22px 14px; text-align:center;
transition:all .22s ease;
}
body.pu-shop .pu-sysreq-card:hover{
border-color:var(--pu-accent); transform:translateY(-3px);
box-shadow:0 4px 14px rgba(168,85,247,.25);
}
body.pu-shop .pu-sysreq-icon{
width:44px; height:44px; margin:0 auto 14px;
background:rgba(168,85,247,.14); border-radius:10px;
display:flex; align-items:center; justify-content:center;
}
body.pu-shop .pu-sysreq-icon svg{ width:20px; height:20px; color:var(--pu-accent); }
body.pu-shop .pu-sysreq-label{
font-family:var(--pu-font-mono);
font-weight:700; font-size:.7rem;
color:var(--pu-muted); letter-spacing:.1em;
text-transform:uppercase; margin-bottom:8px;
}
body.pu-shop .pu-sysreq-value{
font-family:var(--pu-font-body); font-size:.85rem;
color:var(--pu-text); font-weight:500; line-height:1.4;
}
body.pu-shop .pu-features-grid{
display:grid; grid-template-columns:repeat(5, 1fr); gap:12px;
margin:24px 0 40px;
}
body.pu-shop .pu-features-card{
background:var(--pu-panel); border:1px solid var(--pu-card-border);
border-radius:12px; padding:22px 20px; transition:all .22s ease;
}
body.pu-shop .pu-features-card:hover{
border-color:var(--pu-accent); box-shadow:0 4px 14px rgba(168,85,247,.25);
}
body.pu-shop .pu-features-card-title{
font-family:var(--pu-font-body); font-weight:700; font-size:1rem;
color:var(--pu-text); margin-bottom:16px; padding-bottom:12px;
border-bottom:1px solid var(--pu-card-border);
}
body.pu-shop .pu-features-card ul{ list-style:none !important; padding:0 !important; margin:0 !important; }
body.pu-shop .pu-features-card ul li{
display:flex; align-items:flex-start; gap:8px;
padding:5px 0 !important; margin:0 !important;
font-size:.82rem; color:var(--pu-muted);
border:none !important; line-height:1.4;
}
body.pu-shop .pu-features-card ul li::before{
content:"•"; color:var(--pu-accent);
font-weight:800; font-size:.9rem; line-height:1.2; flex-shrink:0;
}
/* ═══════════════════════════════════════════════════════════════════
CART / CHECKOUT TABLES
═══════════════════════════════════════════════════════════════════ */
body.pu-shop .shop_table, body.pu-shop table.cart, body.pu-shop table{
background:var(--pu-card) !important; border:1px solid var(--pu-card-border) !important;
border-radius:12px !important; border-collapse:separate !important; border-spacing:0 !important;
overflow:hidden !important; color:var(--pu-text) !important;
}
body.pu-shop .shop_table th, body.pu-shop table.cart th{
background:var(--pu-panel) !important; color:var(--pu-text) !important;
font-family:var(--pu-font-display) !important; font-weight:700 !important;
font-size:.78rem !important; letter-spacing:.06em !important;
text-transform:uppercase !important; border-color:var(--pu-card-border) !important; padding:14px 16px !important;
}
body.pu-shop .shop_table td, body.pu-shop table.cart td{ border-color:var(--pu-card-border) !important; padding:14px 16px !important; }
/* ═══════════════════════════════════════════════════════════════════
MY ACCOUNT — kill Flatsome page-title bar, restyle nav + content
═══════════════════════════════════════════════════════════════════ */
body.pu-shop.woocommerce-account .woocommerce{
padding:24px 32px !important;
}
/* h1 heading area */
body.pu-shop.woocommerce-account h1,
body.pu-shop.woocommerce-account .entry-title{
font-family:var(--pu-font-display) !important;
font-weight:800 !important; font-size:1.8rem !important;
color:var(--pu-text) !important;
background:transparent !important; border:none !important;
padding:0 !important; margin:0 0 24px !important;
}
body.pu-shop.woocommerce-account h1::after,
body.pu-shop.woocommerce-account h1::before,
body.pu-shop.woocommerce-account .entry-title::after{ display:none !important; content:none !important; }
body.pu-shop .woocommerce-MyAccount-navigation{
background:var(--pu-panel) !important; border:1px solid var(--pu-card-border) !important;
border-radius:14px !important; padding:12px !important;
}
body.pu-shop .woocommerce-MyAccount-navigation ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
body.pu-shop .woocommerce-MyAccount-navigation ul li{ padding:0 !important; margin:2px 0 !important; border:none !important; }
body.pu-shop .woocommerce-MyAccount-navigation ul li a{
display:block !important; padding:11px 14px !important; border-radius:9px !important;
color:var(--pu-muted) !important; font-weight:600 !important; font-size:.85rem !important;
text-decoration:none !important;
}
body.pu-shop .woocommerce-MyAccount-navigation ul li a:hover{ background:rgba(168,85,247,.08) !important; color:#fff !important; }
body.pu-shop .woocommerce-MyAccount-navigation ul li.is-active a{
background:linear-gradient(90deg,rgba(168,85,247,.18),rgba(168,85,247,.03)) !important;
color:#fff !important;
}
body.pu-shop .woocommerce-MyAccount-content{
background:var(--pu-panel) !important; border:1px solid var(--pu-card-border) !important;
border-radius:14px !important; padding:24px !important;
}
/* Notices */
body.pu-shop .woocommerce-message, body.pu-shop .woocommerce-info, body.pu-shop .woocommerce-error{
background:var(--pu-card) !important; color:var(--pu-text) !important;
border:1px solid var(--pu-card-border) !important; border-radius:10px !important;
padding:14px 18px !important; box-shadow:none !important;
}
/* Top-of-page notices ("added to your cart", "removed", coupon applied…)
render full-bleed with no side padding. Gutter them like the shop
sections; the exceptions below re-flush notices already inside cards.
NOTE: deliberately NOT scoped to .woocommerce-notices-wrapper — on
single product pages Flatsome prints notices outside that wrapper. */
body.pu-shop .woocommerce-message,
body.pu-shop .woocommerce-info:not(.cart-empty),
body.pu-shop .woocommerce-error{
margin:16px 32px 0 !important;
}
body.pu-shop .woocommerce-MyAccount-content .woocommerce-message,
body.pu-shop .woocommerce-MyAccount-content .woocommerce-info,
body.pu-shop .woocommerce-MyAccount-content .woocommerce-error,
body.pu-shop form.checkout .woocommerce-message,
body.pu-shop form.checkout .woocommerce-info,
body.pu-shop form.checkout .woocommerce-error,
body.pu-shop #order_review .woocommerce-message,
body.pu-shop #order_review .woocommerce-info,
body.pu-shop #order_review .woocommerce-error,
body.pu-shop .pu-cart-page .woocommerce-message,
body.pu-shop .pu-cart-page .woocommerce-info,
body.pu-shop .pu-cart-page .woocommerce-error,
body.pu-shop .woocommerce-order .woocommerce-message,
body.pu-shop .woocommerce-order .woocommerce-info,
body.pu-shop .woocommerce-order .woocommerce-error{
margin:0 0 16px !important;
}
body.pu-shop .woocommerce-message{ border-left:3px solid var(--pu-success) !important; }
body.pu-shop .woocommerce-info:not(.cart-empty){ border-left:3px solid var(--pu-accent) !important; }
body.pu-shop .woocommerce-error{ border-left:3px solid var(--pu-pink) !important; }
/* Pagination */
body.pu-shop .woocommerce-pagination .page-numbers{
background:var(--pu-card) !important; color:var(--pu-text) !important;
border:1px solid var(--pu-card-border) !important; border-radius:9px !important;
padding:9px 14px !important; margin:0 3px !important; font-weight:700 !important;
}
body.pu-shop .woocommerce-pagination .page-numbers.current{
background:linear-gradient(135deg,var(--pu-accent),var(--pu-accent-2)) !important; color:#fff !important; border-color:rgba(255,255,255,.16) !important;
box-shadow:0 0 0 1px rgba(168,85,247,.2) !important;
}
body.pu-shop a{ color:var(--pu-accent); }
body.pu-shop a:hover{ color:var(--pu-pink); }
/* Widgets */
body.pu-shop .widget, body.pu-shop .sidebar-inner .widget{
background:var(--pu-panel) !important; border:1px solid var(--pu-card-border) !important;
border-radius:14px !important; padding:20px !important; margin-bottom:16px !important;
}
body.pu-shop .widget-title, body.pu-shop .widgettitle, body.pu-shop .widget h3{
color:var(--pu-text) !important; font-family:var(--pu-font-display) !important;
font-weight:800 !important; font-size:.95rem !important; letter-spacing:.05em !important;
padding-bottom:12px !important; margin-bottom:14px !important;
border-bottom:1px solid var(--pu-card-border) !important; text-transform:uppercase !important;
}
/* Shop extras (already emitted above) */
body.pu-shop .pu-shop-section{ margin:34px 0; padding:0 32px; }
body.pu-shop .pu-section-label{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; }
body.pu-shop .pu-section-label h2{
font-family:var(--pu-font-display) !important; font-weight:800 !important;
font-size:clamp(1.35rem, 1.05rem + 1.2vw, 1.7rem) !important;
letter-spacing:.02em; line-height:1.15 !important;
color:var(--pu-text) !important; margin:0 !important;
}
body.pu-shop .pu-section-label a{ font-size:.85rem; color:var(--pu-accent) !important; font-weight:600; text-decoration:none; white-space:nowrap; }
/* ═══════════════════════════════════════════════════════════════════
"SHOP BY GAME" CATEGORY GRID — pixel-identical to the dashboard.
Image is a full-bleed cover background on the card itself; a bottom
gradient (::before) keeps the label legible, and an accent radial
(::after) blooms on hover. No ![]()
stretching, so no wash-out.
═══════════════════════════════════════════════════════════════════ */
body.pu-shop .pu-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.pu-shop .pu-cat-card{
position:relative; border-radius:16px; overflow:hidden; height:150px;
border:1px solid var(--pu-card-border); padding:16px;
display:flex; flex-direction:column; justify-content:space-between;
cursor:pointer; transition:all .22s ease;
text-decoration:none !important; color:inherit !important;
background-size:cover; background-position:center;
}
body.pu-shop .pu-cat-card::before{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(8,6,13,.05) 30%,rgba(8,6,13,.88) 100%);
z-index:1; transition:opacity .22s ease; pointer-events:none;
}
body.pu-shop .pu-cat-card::after{
content:""; position:absolute; inset:-40%;
background:radial-gradient(circle at 50% 50%,var(--pu-accent-glow),transparent 70%);
opacity:0; transition:opacity .3s ease; pointer-events:none; z-index:0;
}
body.pu-shop .pu-cat-card > *{ position:relative; z-index:2; }
body.pu-shop .pu-cat-card:hover{ transform:translateY(-4px); border-color:rgba(168,85,247,.5); }
body.pu-shop .pu-cat-card:hover::after{ opacity:.55; }
body.pu-shop .pu-cat-card.g1{ background:radial-gradient(circle at 85% 30%,rgba(168,85,247,.4),transparent 55%),linear-gradient(200deg,#241a35,#0a0810); }
body.pu-shop .pu-cat-card.g2{ background:radial-gradient(circle at 15% 30%,rgba(236,72,153,.32),transparent 55%),linear-gradient(200deg,#22162c,#0a0810); }
body.pu-shop .pu-cat-card.g3{ background:radial-gradient(circle at 85% 70%,rgba(251,191,36,.24),transparent 55%),linear-gradient(200deg,#1c2035,#0a0810); }
body.pu-shop .pu-cat-card.g4{ background:radial-gradient(circle at 15% 70%,rgba(52,211,153,.22),transparent 55%),linear-gradient(200deg,#182420,#0a0810); }
body.pu-shop .pu-cat-card.g5{ background:radial-gradient(circle at 85% 30%,rgba(96,165,250,.28),transparent 55%),linear-gradient(200deg,#1a2130,#0a0810); }
body.pu-shop .pu-cat-card.g6{ background:radial-gradient(circle at 15% 30%,rgba(148,163,184,.22),transparent 55%),linear-gradient(200deg,#1e1e26,#0a0810); }
body.pu-shop .pu-cat-body{ margin-top:auto; }
body.pu-shop .pu-cat-name{
font-family:var(--pu-font-display); font-weight:800; font-size:1.25rem;
color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6);
}
body.pu-shop .pu-cat-count{
font-family:var(--pu-font-mono); font-size:.68rem; color:var(--pu-muted);
}
body.pu-shop .pu-featured-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.pu-shop .pu-featured-card{
background:var(--pu-card); border:1px solid var(--pu-card-border);
border-radius:16px; overflow:hidden;
text-decoration:none !important; color:inherit !important;
display:block; transition:all .22s ease;
}
body.pu-shop .pu-featured-card:hover{
border-color:var(--pu-accent); transform:translateY(-4px);
box-shadow:0 14px 30px rgba(0,0,0,.4);
}
body.pu-shop .pu-featured-thumb{
height:150px; position:relative; overflow:hidden;
display:flex; align-items:flex-end; padding:14px;
background-size:cover; background-position:center;
}
body.pu-shop .pu-featured-thumb.t1{ background:radial-gradient(circle at 70% 20%,rgba(168,85,247,.35),transparent 55%),linear-gradient(200deg,#241a35,#0a0810); }
body.pu-shop .pu-featured-thumb.t2{ background:radial-gradient(circle at 30% 20%,rgba(236,72,153,.3),transparent 55%),linear-gradient(200deg,#22162c,#0a0810); }
body.pu-shop .pu-featured-thumb.t3{ background:radial-gradient(circle at 70% 80%,rgba(251,191,36,.22),transparent 55%),linear-gradient(200deg,#1c2035,#0a0810); }
body.pu-shop .pu-featured-thumb.t4{ background:radial-gradient(circle at 30% 80%,rgba(52,211,153,.2),transparent 55%),linear-gradient(200deg,#182420,#0a0810); }
body.pu-shop .pu-featured-badge{
position:absolute; top:12px; left:12px; background:var(--pu-gold);
color:#1a1420; font-size:.62rem; font-weight:800;
padding:4px 9px; border-radius:5px; letter-spacing:.03em;
}
body.pu-shop .pu-featured-glyph{
font-family:var(--pu-font-display); font-weight:800;
color:rgba(255,255,255,.9); font-size:1.5rem;
text-shadow:0 2px 12px rgba(0,0,0,.6);
}
body.pu-shop .pu-featured-body{ padding:14px 16px 16px; }
body.pu-shop .pu-featured-name{ font-family:var(--pu-font-display); font-weight:700; font-size:.9rem; margin-bottom:6px; color:var(--pu-text); }
body.pu-shop .pu-featured-meta{ display:flex; justify-content:space-between; align-items:center; }
body.pu-shop .pu-featured-price{ font-size:.86rem; color:var(--pu-gold); font-weight:700; }
body.pu-shop .pu-featured-status{ font-family:var(--pu-font-mono); font-size:.66rem; color:var(--pu-success); }
body.pu-shop .pu-trust-strip{
display:grid; grid-template-columns:repeat(5,1fr);
background:var(--pu-panel); border:1px solid var(--pu-card-border);
border-radius:16px; overflow:hidden;
}
body.pu-shop .pu-trust-item{
display:flex; align-items:flex-start; gap:12px; padding:22px 20px;
border-right:1px solid var(--pu-card-border);
}
body.pu-shop .pu-trust-item:last-child{ border-right:none; }
body.pu-shop .pu-trust-icon{
width:38px; height:38px; border-radius:10px; background:rgba(168,85,247,.14);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
body.pu-shop .pu-trust-icon svg{ width:17px; height:17px; color:var(--pu-accent); }
body.pu-shop .pu-trust-title{ font-size:.82rem; font-weight:700; margin-bottom:3px; color:var(--pu-text); }
body.pu-shop .pu-trust-sub{ font-size:.72rem; color:var(--pu-muted); line-height:1.4; }
body.pu-shop .pu-discord-banner{
background:linear-gradient(120deg,rgba(168,85,247,.14),rgba(8,6,13,.4) 60%);
border:1px solid var(--pu-card-border); border-radius:20px;
padding:26px 30px; position:relative; overflow:hidden;
}
body.pu-shop .pu-discord-banner::after{
content:""; position:absolute; right:-40px; top:-40px;
width:260px; height:260px; border-radius:50%;
background:radial-gradient(circle, var(--pu-accent-glow), transparent 65%);
pointer-events:none;
}
body.pu-shop .pu-discord-inner{ display:flex; align-items:center; gap:20px; position:relative; z-index:1; }
body.pu-shop .pu-discord-icon{
width:56px; height:56px; border-radius:14px; background:rgba(168,85,247,.15);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
body.pu-shop .pu-discord-icon svg{ width:24px; height:24px; color:var(--pu-accent); }
body.pu-shop .pu-discord-copy{ flex:1; min-width:0; }
body.pu-shop .pu-discord-copy h3{
font-family:var(--pu-font-display) !important; font-weight:800 !important;
font-size:1.15rem !important; margin:0 0 4px !important; color:var(--pu-text) !important;
}
body.pu-shop .pu-discord-copy p{ color:var(--pu-muted) !important; font-size:.86rem !important; margin:0 !important; line-height:1.5; }
body.pu-shop .pu-discord-btn{
background:linear-gradient(135deg,#c084fc 0%,var(--pu-accent) 40%,var(--pu-accent-2) 100%) !important;
color:#fff !important; padding:12px 22px !important; border-radius:10px !important;
font-weight:700 !important; font-size:.86rem !important;
text-decoration:none !important; white-space:nowrap;
border:1px solid rgba(255,255,255,.16) !important;
box-shadow:0 0 0 1px rgba(168,85,247,.20), 0 6px 20px -6px rgba(168,85,247,.55); flex-shrink:0;
transition:filter .18s ease;
}
body.pu-shop .pu-discord-btn:hover{ filter:brightness(1.1); }
/* Search results page (WP core /?s= — but topbar search now opens modal instead) */
body.pu-shop.search .page-title, body.pu-shop.search-results h1{
font-family:var(--pu-font-display) !important; font-weight:800 !important;
font-size:1.4rem !important; letter-spacing:.06em !important;
text-transform:uppercase !important; color:var(--pu-text) !important;
margin:24px 32px !important;
}
body.pu-shop.search article.post, body.pu-shop.search-results article{
background:var(--pu-card) !important;
border:1px solid var(--pu-card-border) !important;
border-radius:16px !important;
padding:24px !important; margin:0 32px 20px !important;
max-width:calc(100% - 64px);
}
body.pu-shop.search article.post h2, body.pu-shop.search article.post .entry-title,
body.pu-shop.search-results article h2{
font-family:var(--pu-font-display) !important;
color:var(--pu-text) !important; font-weight:800 !important;
font-size:1.15rem !important; margin-bottom:8px !important;
}
body.pu-shop.search article.post h2 a,
body.pu-shop.search article.post .entry-title a{ color:var(--pu-text) !important; }
body.pu-shop.search article.post h2 a:hover{ color:var(--pu-accent) !important; }
body.pu-shop.search article.post .entry-content, body.pu-shop.search article.post p{
color:var(--pu-muted) !important; font-size:.9rem !important; line-height:1.6 !important;
}
body.pu-shop.search article.post .post-date, body.pu-shop.search article.post time{
color:var(--pu-muted) !important; font-family:var(--pu-font-mono) !important;
font-size:.7rem !important; letter-spacing:.08em !important;
}
body.pu-shop.search .continue-reading, body.pu-shop.search .read-more{
display:inline-block !important; margin-top:12px !important;
color:var(--pu-accent) !important; font-weight:600 !important;
text-transform:uppercase !important; font-size:.78rem !important;
letter-spacing:.06em !important;
}
body.pu-shop.search .container, body.pu-shop.search .row{
max-width:100% !important; width:100% !important;
}
@media (max-width:1400px){
body.pu-shop .pu-sysreq-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:1200px){
body.pu-shop .pu-cat-grid{ grid-template-columns:repeat(2,1fr); }
body.pu-shop .pu-featured-grid{ grid-template-columns:repeat(2,1fr); }
body.pu-shop .pu-trust-strip{ grid-template-columns:repeat(2,1fr); }
body.pu-shop .pu-trust-item{ border-bottom:1px solid var(--pu-card-border); }
body.pu-shop .pu-features-grid{ grid-template-columns:repeat(2,1fr); }
body.pu-shop .pu-product-badges{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
body.pu-shop{ padding-left:0 !important; }
body.pu-shop .pu-nav-sidebar{ transform:translateX(-100%); box-shadow:20px 0 50px rgba(0,0,0,.6); z-index:9999; }
body.pu-shop.pu-sb-mobile-open .pu-nav-sidebar{ transform:translateX(0); }
html.pu-sc body.pu-shop .pu-nav-sidebar{ width:var(--pu-sb-w) !important; }
html.pu-sc body.pu-shop{ padding-left:0 !important; }
html.pu-sc body.pu-shop .pu-sb-word{ opacity:1; width:auto; }
html.pu-sc body.pu-shop .pu-sb-item span:not(.pu-sb-tip){ opacity:1; width:auto; height:auto; }
body.pu-shop .pu-sidebar-toggle{ display:none; }
.pu-mobile-menu-btn{ display:flex !important; }
body.pu-shop .pu-shop-user-text{ display:none; }
body.pu-shop .pu-shop-back span{ display:none; }
body.pu-shop .pu-shop-topbar{ padding:12px 16px; }
body.pu-shop.single-product .product > .row{ flex-direction:column !important; }
body.pu-shop .product .summary{ padding-left:0 !important; }
body.pu-shop .pu-shop-section{ padding:0 16px; }
body.pu-shop .woocommerce-message,
body.pu-shop .woocommerce-info:not(.cart-empty),
body.pu-shop .woocommerce-error{
margin:12px 16px 0 !important;
}
}
@media (max-width:560px){
body.pu-shop .pu-cat-grid{ grid-template-columns:1fr; }
body.pu-shop .pu-featured-grid{ grid-template-columns:1fr; }
body.pu-shop .pu-trust-strip{ grid-template-columns:1fr; }
body.pu-shop .pu-trust-item{ border-right:none; }
body.pu-shop .pu-discord-inner{ flex-direction:column; text-align:center; }
body.pu-shop .pu-sysreq-grid{ grid-template-columns:repeat(2,1fr); }
body.pu-shop .pu-features-grid{ grid-template-columns:1fr; }
body.pu-shop .pu-product-badges{ grid-template-columns:1fr; }
}