/*
Theme Name: PlayPulse
Theme URI: https://example.com/playpulse
Author: PlayPulse
Description: A modern, UX-first WooCommerce theme for a digital code / gift-card store. Mobile-first with an app-style bottom nav, horizontal category rows and a focused checkout. Original design (inspired structurally by app-style digital stores).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: playpulse
*/
/* ===== Design tokens =====
Palette: UI/UX Pro Max "Gaming — neon purple + rose" dark system (2026-06).
Only the token VALUES changed in this refresh; every component reads these
variables, so the whole site re-skins without any structural/markup edits.
Previous values kept in the inline comments for easy rollback. */
:root{
--bg:#0f0f23; /* was #0b0d14 — deeper indigo-black */
--bg-soft:#15152e; /* was #121622 */
--surface:#1e1c35; /* was #171c2b — card surface */
--surface-2:#27273b; /* was #1f263a */
--line:rgba(167,139,250,.16); /* was rgba(255,255,255,.08) — faint purple hairline */
--text:#e2e8f0; /* was #e8ecf6 */
--muted:#94a3b8; /* was #9aa4bf */
--brand:#7c3aed; /* was #6c5ce7 — richer neon purple */
--brand-2:#a78bfa; /* was #00d4ff — lighter purple (was cyan) */
--accent:#f43f5e; /* was #ff5c8a — rose accent (badges/highlights)*/
--ok:#22c55e;
/* Primary action button → vivid blue (purple read as muddy against the
colourful product art, so kept the original blue here). */
--btn:#0e6dfd;
--btn-hover:#2a82ff;
--price:#4d9cff; /* blue used for prices (legible on dark surfaces) */
--radius:16px;
--radius-sm:11px; /* was 10px */
--card-pad:22px 24px; /* consistent padding for content cards/panels */
--shadow:0 10px 30px rgba(0,0,0,.45);
--glow:0 12px 36px -14px rgba(124,58,237,.55); /* subtle brand glow for CTAs/cards */
--container:1200px;
--font:'Inter',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
--font-head:'Space Grotesk','Inter',system-ui,sans-serif; /* display/headings */
}
/* ===== Light theme ===== */
/* Night mode is the default (the :root tokens above). Light mode only kicks in
when the visitor opts in (footer toggle → data-theme="light" on ), so
we just re-point the surface/text tokens; brand colours stay identical. */
html[data-theme="light"]{
--bg:#eef1f7;
--bg-soft:#ffffff;
--surface:#ffffff;
--surface-2:#f1f4fa;
--line:rgba(15,23,42,.12);
--text:#0f1729;
--muted:#586079;
--shadow:0 10px 30px rgba(15,23,42,.12);
}
/* A few chrome surfaces hardcode the dark glass colour; re-tint them in light. */
html[data-theme="light"] .playpulse-header{background:rgba(255,255,255,.85);}
html[data-theme="light"] .playpulse-bottom-nav{background:rgba(255,255,255,.92);}
body,.playpulse-header,.playpulse-footer{transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
line-height:1.55;-webkit-font-smoothing:antialiased;
/* Kill any stray horizontal scrollbar (e.g. from the horizontal product
scrollers or a classic vertical scrollbar). overflow-x:clip doesn't create
a scroll container, so position:sticky keeps working. */
overflow-x:clip;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.container{max-width:var(--container);margin:0 auto;padding:0 18px;}
h1,h2,h3,h4{line-height:1.2;}
/* Visually-hidden (a11y) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;word-wrap:normal!important;}
/* ===== Buttons ===== */
.button,.playpulse-btn,button.single_add_to_cart_button,.wc-block-components-button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:var(--btn);
color:#fff!important;border:0;border-radius:var(--radius-sm);
padding:11px 18px;font-weight:600;cursor:pointer;transition:background .14s ease,transform .12s ease;
text-align:center;
}
.button:hover,.playpulse-btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--btn-hover);transform:translateY(-1px);}
/* WooCommerce's ".alt" buttons (Place order, Proceed to checkout, etc.) ship their
own purple background at higher specificity — force them to the same solid blue. */
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,.wc-proceed-to-checkout .checkout-button,#place_order{
background:var(--btn);box-shadow:var(--shadow);
}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.wc-proceed-to-checkout .checkout-button:hover,#place_order:hover{background:var(--btn-hover);}
.single_add_to_cart_button{box-shadow:var(--shadow);}
/* Currency symbol (৳): the system Bengali glyph renders small and slightly
oblique. Normalise it — size it to match the digits, force an upright style,
and prefer a font whose Taka sign is upright. */
.woocommerce-Price-currencySymbol{
display:inline-block;margin-right:0.12em;
font-family:'Nirmala UI','Noto Sans Bengali','Hind Siliguri',system-ui,sans-serif;
font-style:normal!important;font-weight:inherit;font-size:1.04em;line-height:1;
}
/* ===== Header ===== */
.playpulse-header{
position:sticky;top:0;z-index:50;background:rgba(11,13,20,.85);
backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.playpulse-header-inner{display:flex;align-items:center;gap:18px;height:64px;}
.playpulse-logo{font-weight:800;font-size:20px;letter-spacing:.3px;display:flex;align-items:center;gap:10px;}
.playpulse-logo .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 14px var(--brand-2);}
.playpulse-logo img{height:38px;width:auto;}
/* Brand mark + two-tone wordmark (header + footer) */
.playpulse-mark{display:block;flex:0 0 auto;border-radius:11px;box-shadow:0 4px 14px rgba(124,58,237,.4);}
.playpulse-wordmark{font-weight:800;letter-spacing:.2px;line-height:1;white-space:nowrap;}
.playpulse-wordmark .pp-play{color:var(--text);}
.playpulse-wordmark .pp-pulse{color:var(--price);}
.playpulse-footer-brand{display:flex;align-items:center;gap:10px;font-size:20px;margin:0 0 12px;}
.playpulse-footer-brand .playpulse-wordmark{font-size:20px;}
.playpulse-nav{display:flex;gap:18px;margin-left:6px;align-items:center;}
.playpulse-nav a,.playpulse-nav-link{color:var(--muted);font-size:14px;padding:6px 2px;}
.playpulse-nav a:hover,.playpulse-nav-link:hover{color:var(--text);}
/* ===== Categories mega-menu ===== */
.playpulse-mega{position:relative;}
.playpulse-mega-toggle{
display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;
cursor:pointer;font:inherit;color:var(--muted);
}
.playpulse-mega-toggle:hover,.playpulse-mega.is-open .playpulse-mega-toggle{color:var(--text);}
.playpulse-mega-caret{font-size:11px;transition:transform .18s ease;}
.playpulse-mega.is-open .playpulse-mega-caret{transform:rotate(180deg);}
/* The dropdown panel — hidden until hover/focus/open. */
.playpulse-mega-panel{
position:absolute;top:calc(100% + 10px);left:0;z-index:60;
min-width:260px;padding:8px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.playpulse-mega:hover .playpulse-mega-panel,
.playpulse-mega:focus-within .playpulse-mega-panel,
.playpulse-mega.is-open .playpulse-mega-panel{opacity:1;visibility:visible;transform:translateY(0);}
/* Invisible bridge so the cursor can cross the gap to the panel. */
.playpulse-mega-panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;}
.playpulse-mega-cats{list-style:none;margin:0;padding:0;}
.playpulse-mega-cat{position:relative;}
.playpulse-mega-cat-link{
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);
color:var(--text);font-size:14px;font-weight:600;
}
.playpulse-mega-cat-link span:first-child{flex:1;}
.playpulse-mega-cat:hover>.playpulse-mega-cat-link,
.playpulse-mega-cat:focus-within>.playpulse-mega-cat-link{background:var(--surface-2);}
.playpulse-mega-count{
font-size:11px;font-weight:600;color:var(--muted);background:var(--bg-soft);
border-radius:999px;padding:1px 8px;
}
.playpulse-mega-arrow{color:var(--muted);font-size:16px;line-height:1;}
/* The per-category product flyout. */
.playpulse-mega-products{
position:absolute;top:-9px;left:100%;margin-left:8px;
min-width:320px;max-width:360px;padding:8px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);
opacity:0;visibility:hidden;transform:translateX(-6px);
transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.playpulse-mega-cat:hover>.playpulse-mega-products,
.playpulse-mega-cat:focus-within>.playpulse-mega-products{opacity:1;visibility:visible;transform:translateX(0);}
.playpulse-mega-products::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:100%;}
.playpulse-mega-products ul{list-style:none;margin:0 0 4px;padding:0;}
.playpulse-mega-products li a{
display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm);color:var(--text);
}
.playpulse-mega-products li a:hover{background:var(--surface-2);}
.playpulse-mega-pthumb img{width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--bg-soft);}
.playpulse-mega-pname{flex:1;font-size:13px;line-height:1.3;}
.playpulse-mega-pprice{font-size:12px;font-weight:700;color:var(--brand-2);white-space:nowrap;}
.playpulse-mega-pprice del{color:var(--muted);font-weight:400;margin-right:4px;}
.playpulse-mega-seeall{display:inline-block;padding:6px 8px;font-size:12px;font-weight:600;color:var(--brand-2);}
.playpulse-mega-empty{margin:6px 8px;color:var(--muted);font-size:13px;}
.playpulse-header-tools{margin-left:auto;display:flex;align-items:center;gap:14px;}
.playpulse-search{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;}
.playpulse-search input{background:transparent;border:0;color:var(--text);outline:none;width:160px;font-size:14px;}
.playpulse-search input::placeholder{color:var(--muted);}
/* Mobile search: the magnifier toggle and the slide-down panel are desktop-hidden;
the @media(max-width:520px) block below reveals them where the inline search is off. */
.playpulse-icon-btn.playpulse-search-toggle{display:none;}
.playpulse-search-panel{display:none;border-top:1px solid var(--line);padding:10px 0 12px;animation:ppSearchDown .18s ease;}
.playpulse-search-panel form{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;}
.playpulse-search-panel svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto;}
.playpulse-search-panel input[type="search"]{flex:1;min-width:0;background:transparent;border:0;color:var(--text);outline:none;font-size:16px;}/* 16px stops iOS zoom-on-focus */
/* Hide the browser's built-in search "clear" (×) — our own ✕ close button already
sits in the bar, and two ×'s side by side looked odd. */
.playpulse-search-panel input[type="search"]::-webkit-search-cancel-button,
.playpulse-search-panel input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}
.playpulse-search-panel input::placeholder{color:var(--muted);}
.playpulse-search-close{flex:0 0 auto;background:transparent;border:0;color:var(--muted);font-size:22px;line-height:1;padding:0 2px;cursor:pointer;}
@keyframes ppSearchDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.playpulse-icon-btn{position:relative;color:var(--text);display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;background:var(--surface);border:1px solid var(--line);}
.playpulse-icon-btn svg{width:20px;height:20px;display:block;}
.playpulse-hours{display:inline-flex;align-items:center;gap:6px;}
.playpulse-hours svg{width:14px;height:14px;flex:0 0 auto;}
/* Hide the bubble at zero — an empty cart needs no badge. */
.playpulse-cart-count[data-count="0"]{display:none!important;}
.playpulse-cart-count,.playpulse-badge-count{
position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;font-size:11px;
min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.playpulse-hours{font-size:12px;color:var(--muted);}
/* Header Login button (shown to logged-out visitors in place of the account icon). */
.playpulse-login-btn{
display:inline-flex;align-items:center;justify-content:center;
background:var(--btn);color:#fff;
font-size:14px;font-weight:600;padding:9px 20px;border-radius:999px;white-space:nowrap;
transition:background .14s ease,transform .12s ease;
}
.playpulse-login-btn:hover{background:var(--btn-hover);transform:translateY(-1px);color:#fff;}
/* ===== Hero ===== */
.playpulse-hero{
margin:22px 0;border-radius:24px;overflow:hidden;position:relative;
background:radial-gradient(1200px 400px at 10% -20%,rgba(124,58,237,.45),transparent),
radial-gradient(800px 400px at 100% 0%,rgba(244,63,94,.22),transparent),
var(--bg-soft);
border:1px solid var(--line);padding:46px 36px;
}
.playpulse-hero h1{font-size:clamp(26px,4vw,44px);margin:0 0 10px;}
.playpulse-hero p{color:var(--muted);max-width:560px;font-size:16px;margin:0 0 20px;}
.playpulse-hero .playpulse-btn{font-size:16px;padding:13px 26px;}
.playpulse-hero-badges{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;}
.playpulse-hero-badges span{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--muted);}
.playpulse-hero-badges svg{width:16px;height:16px;flex:0 0 auto;color:var(--brand-2);}
/* ===== Category chips ===== */
.playpulse-chips{display:flex;gap:10px;overflow-x:auto;padding:6px 0 14px;scrollbar-width:none;}
.playpulse-chips::-webkit-scrollbar{display:none;}
.playpulse-chip{white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--muted);}
.playpulse-chip:hover{color:var(--text);border-color:var(--brand);}
/* ===== Hero slideshow ===== */
.playpulse-slideshow{margin:22px 0;position:relative;width:100%;height:420px;border-radius:24px;overflow:hidden;background:var(--bg-soft);border:1px solid var(--line);}
.playpulse-slides{position:relative;width:100%;height:100%;}
.playpulse-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:flex;align-items:flex-end;}
.playpulse-slide.is-active{opacity:1;z-index:2;}
@media(prefers-reduced-motion:reduce){.playpulse-slide{transition:none;}}
.playpulse-slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.playpulse-slide-overlay{position:absolute;inset:0;
background:linear-gradient(0deg,rgba(11,13,20,.92) 0%,rgba(11,13,20,.4) 50%,rgba(11,13,20,.2) 100%);
}
.playpulse-slide-body{position:relative;z-index:3;padding:0 36px 40px;max-width:560px;}
.playpulse-slide-body h2{font-size:clamp(22px,4vw,38px);margin:0 0 8px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.playpulse-slide-price{font-size:22px;font-weight:700;color:var(--brand-2);margin:0 0 16px;
text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.playpulse-slide-price del{color:var(--muted);font-weight:400;margin-right:8px;}
.playpulse-slide-price ins{text-decoration:none;}
.playpulse-slide-body .playpulse-btn{font-size:15px;padding:13px 28px;}
/* Intro + image-less custom slides: no product image, so they carry the brand
gradient. Content stays bottom-aligned (inherited from .playpulse-slide) so the
Order Now button lands in the SAME spot as every other slide. */
.playpulse-slide-intro,
.playpulse-slide-plain{
background:radial-gradient(1200px 460px at 12% -20%,rgba(124,58,237,.55),transparent),
radial-gradient(900px 460px at 100% 10%,rgba(244,63,94,.24),transparent),
var(--bg-soft);
}
.playpulse-slide-intro .playpulse-slide-overlay,
.playpulse-slide-plain .playpulse-slide-overlay{background:none;}
/* Gradient slides use theme text colours so they stay legible in light mode. */
.playpulse-slide-plain .playpulse-slide-body h2,
.playpulse-slide-plain .playpulse-slide-ctext{color:var(--text);text-shadow:none;}
.playpulse-slide-intro-body{padding:0 36px 40px;max-width:600px;}
.playpulse-slide-intro-body h2{font-size:clamp(24px,4.4vw,42px);margin:0 0 14px;color:var(--text);text-shadow:none;}
.playpulse-slide-intro-desc{color:var(--muted);font-size:clamp(14px,1.6vw,17px);margin:0 0 12px;line-height:1.6;}
.playpulse-slide-intro-pay{
display:inline-flex;align-items:center;gap:7px;margin:0 0 22px;
color:var(--text);font-size:14px;font-weight:600;
background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
}
html[data-theme="light"] .playpulse-slide-intro-pay{background:rgba(15,23,42,.05);}
/* Custom-slide text line — white over an image, themed over a gradient. */
.playpulse-slide-ctext{color:#fff;font-size:clamp(14px,1.6vw,17px);margin:0 0 18px;line-height:1.55;max-width:520px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
@media(max-width:600px){.playpulse-slide-intro-body{padding:0 20px 28px;}}
/* Prev/next arrows — appear on hover (desktop), always visible on touch. */
.playpulse-slide-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:26px;line-height:1;color:#fff;
background:rgba(11,13,20,.45);backdrop-filter:blur(4px);
opacity:0;transition:opacity .25s,background .2s,transform .2s;}
.playpulse-slideshow:hover .playpulse-slide-arrow,
.playpulse-slide-arrow:focus-visible{opacity:1;}
.playpulse-slide-arrow:hover{background:rgba(11,13,20,.7);}
.playpulse-slide-prev{left:16px;}
.playpulse-slide-next{right:16px;}
@media(hover:none){.playpulse-slide-arrow{opacity:.85;}}
@media(max-width:600px){.playpulse-slide-arrow{width:36px;height:36px;font-size:22px;}.playpulse-slide-next{right:12px;}.playpulse-slide-prev{left:12px;}}
.playpulse-slide-dots{position:absolute;bottom:14px;right:20px;z-index:4;display:flex;gap:8px;}
.playpulse-slide-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);border:0;cursor:pointer;padding:0;transition:background .2s,transform .2s;}
.playpulse-slide-dot:hover{background:rgba(255,255,255,.65);transform:scale(1.15);}
.playpulse-slide-dot.is-active{background:#fff;}
@media(max-width:600px){
/* Fixed height (keeps the auto cross-fade smooth — auto-height would jump between
slides) sized to the content. The text-only intro is vertically CENTRED so there
is no lopsided empty gap; image/product slides stay bottom-aligned over the photo.
Nav arrows move into a tidy bottom control row beside the dots (no text overlap). */
.playpulse-slideshow{height:380px;}
.playpulse-slide-intro{align-items:center;}
.playpulse-slide-intro-body{padding:14px 18px;}
.playpulse-slide-intro-body h2{font-size:25px;line-height:1.16;margin:0 0 8px;}
.playpulse-slide-intro-desc{
font-size:13.5px;line-height:1.5;margin:0 0 12px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.playpulse-slide-intro-pay{margin:0 0 14px;padding:7px 14px;font-size:13px;}
.playpulse-hero-actions{gap:10px;}
.playpulse-hero-actions .playpulse-btn{padding:12px 20px;font-size:14px;}
.playpulse-slide-body{padding:0 18px 46px;}
.playpulse-slide-price{font-size:19px;margin:0 0 12px;}
/* Bottom control row: arrows flank the centred dots, always visible on touch. */
.playpulse-slide-arrow{opacity:.92;top:auto;bottom:9px;transform:none;width:32px;height:32px;font-size:20px;background:rgba(11,13,20,.6);}
.playpulse-slide-prev{left:14px;}
.playpulse-slide-next{right:14px;}
.playpulse-slide-dots{left:0;right:0;bottom:18px;justify-content:center;}
}
/* ===== Rows / scrollers ===== */
.playpulse-row{margin:30px 0;}
.playpulse-row-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.playpulse-row-head h2{font-size:20px;margin:0;}
.playpulse-row-heading{display:flex;align-items:center;gap:8px;}
.playpulse-row-all{color:var(--brand-2);font-size:14px;}
.playpulse-scroller{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:thin;}
.playpulse-scroller::-webkit-scrollbar{height:8px;}
.playpulse-scroller::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:8px;}
.playpulse-scroller .playpulse-card-product{min-width:210px;max-width:210px;scroll-snap-align:start;}
/* ===== Product card ===== */
.playpulse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;}
.playpulse-card-product{
/* position:relative is load-bearing, not cosmetic: WooCommerce's price markup
contains position:absolute .screen-reader-text spans. Without a positioned
ancestor their containing block is the initial containing block (), so
inside the horizontal .playpulse-scroller each hidden span plants a 1px box at
its in-flow x (~1000px+), escaping body{overflow-x:clip} and stretching
wide. That ballooned the mobile layout viewport and pushed the fixed bottom nav
below the fold on the homepage. Making the card the containing block keeps those
spans clipped inside the scroller. */
position:relative;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;display:flex;flex-direction:column;transition:transform .14s ease,border-color .14s ease;
}
.playpulse-card-product:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.6);}
.playpulse-card-thumb{position:relative;aspect-ratio:1/1;background:var(--bg-soft);display:block;}
.playpulse-card-thumb img{width:100%;height:100%;object-fit:cover;}
.playpulse-badge{position:absolute;top:10px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;}
/* Sale flag pinned to the image's top-right, matching the single product page. */
.playpulse-badge.sale{right:10px;left:auto;background:var(--accent);color:#fff;}
/* Sold-out sits top-left so it never collides with the Sale flag. */
.playpulse-badge.oos{left:10px;right:auto;background:#475569;color:#fff;}
.playpulse-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1;}
.playpulse-card-title{font-size:14px;font-weight:600;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;}
.playpulse-card-price{color:var(--brand-2);font-weight:700;}
.playpulse-card-price del{color:var(--muted);font-weight:400;margin-right:6px;}
.playpulse-card-price ins{text-decoration:none;}
.playpulse-card-btn{margin-top:auto;text-align:center;background:var(--btn);color:#fff;border-radius:var(--radius-sm);padding:9px;font-size:13px;font-weight:600;transition:background .14s ease;}
.playpulse-card-product:hover .playpulse-card-btn{background:var(--btn-hover);}
.is-oos .playpulse-card-btn{filter:grayscale(.6);opacity:.7;}
/* ===== WooCommerce overrides ===== */
/* Vertical rhythm only — horizontal gutter comes from .container (18px), so
homepage/static pages (nested .container) and Woo pages (.playpulse-main.container)
share ONE consistent 18px gutter, aligned with the header. Longhands on
purpose: the .container shorthand must keep supplying the side padding. */
.playpulse-main{padding-top:24px;padding-bottom:60px;}
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin:0;}
/* WooCommerce adds clearfix ::before/::after (content:" ";display:table) to
ul.products for its float layout. Once we make ul.products a grid those
pseudo-elements become phantom grid items — ::before steals the first cell and
shoves the first product into column 2 (a visible blank top-left gap, most
obvious on a single related/upsell product). Drop them on the grid. */
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none;}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;padding:0 0 14px;}
.woocommerce ul.products li.product a img{margin:0 0 10px;border-radius:0;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px;padding:0 12px;}
.woocommerce ul.products li.product .price{color:var(--brand-2)!important;padding:0 12px;display:block;}
.woocommerce ul.products li.product .button{margin:10px 12px 0;display:block;}
.woocommerce span.onsale{background:var(--accent);border-radius:999px;min-height:auto;min-width:auto;padding:4px 10px;line-height:1;}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{color:var(--muted);}
.playpulse-shop-layout{display:block;}
/* Single product. position:relative anchors the absolute "Sale!" badge to the
product (otherwise it escapes to the page corner). */
/* gap:0 44px → column gap only. A plain gap:44px also adds a 44px ROW gap, which
left a big empty band between the product and the tabs below. */
.woocommerce div.product{position:relative;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:0 44px;align-items:start;}
.woocommerce div.product .images,.woocommerce div.product .summary{margin:0!important;width:auto!important;float:none!important;}
.woocommerce div.product .product_title{font-size:28px;}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--brand-2);font-size:24px;}
/* "Sale!" badge — now rendered inside the gallery (see functions.php), pinned to
the image's top-right corner. */
.woocommerce div.product .woocommerce-product-gallery span.onsale{
position:absolute;top:12px;right:12px;left:auto;margin:0;z-index:4;pointer-events:none;}
/* Full-width sections sit in their own row directly below the two columns. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products,
.single-product .playpulse-codes-box{grid-column:1/-1;}
.woocommerce div.product .woocommerce-tabs{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
/* ---- Product gallery: compact, fully visible, clean click-to-zoom ---- */
.woocommerce div.product .woocommerce-product-gallery{
position:relative;margin:0;border:1px solid var(--line);border-radius:var(--radius);
background:var(--surface);transition:box-shadow .25s ease,transform .25s ease;}
.woocommerce div.product .woocommerce-product-gallery:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.28);}
.woocommerce div.product .woocommerce-product-gallery__wrapper{margin:0;}
.woocommerce div.product .woocommerce-product-gallery__image{border-radius:var(--radius);overflow:hidden;}
.woocommerce div.product .woocommerce-product-gallery__image a{display:block;}
.woocommerce div.product .woocommerce-product-gallery__image img{
display:block;width:100%;height:auto;border-radius:var(--radius);cursor:zoom-in;}
/* Fullscreen / lightbox trigger — top-left, so it never clashes with the Sale badge. */
.woocommerce div.product .woocommerce-product-gallery__trigger{
top:12px;left:12px;right:auto;width:auto;height:auto;font-size:0;line-height:0;
background:rgba(11,13,20,.72);backdrop-filter:blur(6px);border:1px solid var(--line);
border-radius:999px;padding:8px;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(0,0,0,.25);transition:background .2s,transform .2s;}
.woocommerce div.product .woocommerce-product-gallery__trigger:hover{background:var(--brand);transform:scale(1.08);}
.woocommerce div.product .woocommerce-product-gallery__trigger::after{
content:"⤢";font-size:16px;line-height:1;color:#fff;}
/* Thumbnail strip below the main image. */
.woocommerce div.product .flex-control-thumbs{
display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0!important;padding:0;list-style:none;}
.woocommerce div.product .flex-control-thumbs li{width:64px;margin:0;}
.woocommerce div.product .flex-control-thumbs img{
border:1px solid var(--line);border-radius:var(--radius-sm);opacity:.7;cursor:pointer;
transition:opacity .2s,border-color .2s;}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--brand);}
@media(max-width:820px){
.woocommerce div.product{grid-template-columns:1fr;gap:24px;}
.woocommerce div.product .images{max-width:360px;margin:0 auto!important;}
}
/* Cart + checkout cards */
.woocommerce table.shop_table{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line)!important;}
.woocommerce-checkout #payment,.woocommerce .cart-collaterals .cart_totals{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);}
/* Cart: full-width stacked layout — product list on top, cart totals below,
both spanning the full content width. */
.woocommerce-cart .woocommerce{display:block;max-width:760px;margin:0 auto;}
.woocommerce-cart .woocommerce-cart-form{width:100%;float:none;margin:0 0 24px;}
.woocommerce-cart .cart-collaterals{width:100%;float:none;margin:0;}
/* Totals card: padded container; the inner table is flush (no nested card). */
.woocommerce-cart .cart-collaterals .cart_totals{float:none;width:100%;padding:var(--card-pad);}
.woocommerce-cart .cart-collaterals .cart_totals h2{font-size:18px;margin:0 0 16px;}
.woocommerce-cart .cart-collaterals .cart_totals table{width:100%;margin:0;background:transparent;border:0;border-radius:0;}
.woocommerce-cart .cart-collaterals .cart_totals th,
.woocommerce-cart .cart-collaterals .cart_totals td{padding:12px 0;border-color:var(--line)!important;}
.woocommerce-cart .cart-collaterals .cart_totals td{text-align:right;}
.woocommerce-cart .wc-proceed-to-checkout{padding:0;margin:0;}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{display:block;width:100%;text-align:center;font-size:16px;padding:14px 20px;margin:16px 0 0!important;}
/* Coupons are entered at checkout only — hide the cart page's coupon form.
(Kept functional underneath, so an applied coupon still calculates/removes
correctly; we only remove the duplicate entry point.) */
.woocommerce-cart .woocommerce-cart-form .coupon{display:none;}
/* Update cart button: match size to the table row. */
.woocommerce-cart .woocommerce-cart-form .button[name="update_cart"]{font-size:13px;padding:8px 14px;}
/* Cart "remove item" — replace WooCommerce's bare × glyph with a clean icon
button (circular, red on hover). The × text is hidden; the icon is an inline
SVG background. */
.woocommerce-cart a.remove{
display:inline-flex!important;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:50%;font-size:0!important;color:transparent!important;
background:var(--surface-2);border:1px solid var(--line);
transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
.woocommerce-cart a.remove::before{
content:"";width:14px;height:14px;
background:currentColor;color:var(--muted);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition:color .15s ease;
}
.woocommerce-cart a.remove:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.08);color:transparent!important;}
.woocommerce-cart a.remove:hover::before{color:#fff;}
/* ===== Checkout: two-column layout =====
Left = customer details (billing fields + additional information, stacked).
Right = order summary + payment, in a sticky card.
Grid placement is explicit so an empty notices row can't shuffle the columns. */
/* page.php caps the wrapper at 820px inline; widen it for checkout so both
columns have room. Both columns are 1fr so they grow evenly. */
.woocommerce-checkout .playpulse-main>.container{max-width:1160px!important;}
.woocommerce-checkout form.checkout.woocommerce-checkout{
display:grid;grid-template-columns:1fr 1fr;gap:0 36px;align-items:start;
}
/* Two single-cell columns: details on the left, the whole order panel (heading +
review) wrapped on the right. No row-spanning, so the right card can never be
torn apart when the left column grows (e.g. "Create an account?"). */
.woocommerce-checkout form.checkout #customer_details{grid-column:1;}
.woocommerce-checkout form.checkout .playpulse-order-col{grid-column:2;position:sticky;top:84px;}
/* Mirror the left: the "Your order" heading is the TOP of the order card and
#order_review is its body — one seamless card whose top aligns with the left. */
.woocommerce-checkout form.checkout #order_review_heading{
margin:0;font-size:17px;
background:var(--surface);border:1px solid var(--line);border-bottom:0;
border-radius:var(--radius) var(--radius) 0 0;padding:22px 24px 0;
}
.woocommerce-checkout form.checkout #order_review{border-top:0;border-radius:0 0 var(--radius) var(--radius);}
/* Billing + additional stack vertically within the left column. */
.woocommerce-checkout #customer_details .col2-set{display:block;width:100%;}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:100%;float:none;margin:0 0 18px;}
/* Card-style panels for each section. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review{
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad);
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3{margin-top:0;font-size:17px;}
.woocommerce-checkout #order_review{padding:0 0 22px;overflow:hidden;}
.woocommerce-checkout #order_review .shop_table{border:0;border-radius:0;background:transparent;margin:0;}
.woocommerce-checkout #order_review .woocommerce-checkout-payment{border:0!important;border-radius:0!important;background:transparent!important;}
.woocommerce-checkout #order_review .button[name="woocommerce_checkout_place_order"],
.woocommerce-checkout #place_order{display:block;width:100%;text-align:center;font-size:16px;padding:14px 20px;}
/* Align the order table's cells with the "Your order" heading + Total row (24px
sides) so Product/Subtotal labels and prices line up with everything else. */
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th,
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td{
padding-left:24px;padding-right:24px;
}
/* Payment instructions + fields share the same 24px gutter. */
.woocommerce-checkout #order_review #payment{padding:0 24px;}
.woocommerce-checkout #order_review #payment .place-order{padding:0;}
/* bKash/Nagad fields: two equal-height columns. Each field is a flex column with
the input pinned to the bottom (margin-top:auto), and both columns stretched to
the same height — so the inputs line up regardless of label length. */
.playpulse-pay-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-items:stretch;margin-top:14px;}
.playpulse-pay-fields .form-row{display:flex;flex-direction:column;height:100%;margin:0;padding:0;float:none;width:auto;}
.playpulse-pay-fields label{margin:0 0 6px;font-size:13px;line-height:1.3;}
.playpulse-pay-fields .input-text{margin-top:auto;width:100%;}
@media(max-width:520px){
.playpulse-pay-fields{grid-template-columns:1fr;}
.playpulse-pay-fields .form-row{height:auto;}
}
/* Coupon — a row BETWEEN the Subtotal and Total in the order-summary table.
colspan cell spans the grid so the link aligns with the labels above. */
.playpulse-coupon-row td{padding:10px 24px!important;border:0!important;}
/* Collapsed state: clean standalone text link (no box/border). */
.playpulse-coupon-toggle{
display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
padding:0;margin:0;font:inherit;font-size:13px;font-weight:600;color:var(--btn);
}
.playpulse-coupon-toggle:hover{color:var(--btn-hover);text-decoration:underline;}
.playpulse-coupon-caret{font-size:10px;transition:transform .2s ease;}
.playpulse-coupon-toggle[aria-expanded="true"] .playpulse-coupon-caret{transform:rotate(180deg);}
/* Smooth accordion reveal. */
.playpulse-coupon-panel{overflow:hidden;max-height:60px;opacity:1;margin-top:10px;
transition:max-height .25s ease,opacity .2s ease,margin .25s ease;}
.playpulse-coupon-panel[hidden]{display:block;max-height:0;opacity:0;margin-top:0;}
/* Compact inline input + button — not full-width, proportional to the sidebar. */
.playpulse-coupon-inputrow{display:inline-flex;max-width:260px;width:100%;}
.playpulse-coupon-input{
flex:1;min-width:0;background:var(--bg-soft);border:1px solid var(--line);border-right:0;color:var(--text);
border-radius:var(--radius-sm) 0 0 var(--radius-sm);padding:6px 10px;font-size:13px;height:34px;
}
.playpulse-coupon-input::placeholder{color:var(--muted);}
.playpulse-coupon-input:focus{outline:none;border-color:var(--btn);}
.playpulse-coupon-apply{
flex:0 0 auto;background:var(--btn);color:#fff;border:0;cursor:pointer;font-weight:600;font-size:13px;
padding:0 14px;height:34px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;transition:background .14s ease;
}
.playpulse-coupon-apply:hover{background:var(--btn-hover);}
.playpulse-coupon-apply.is-loading{opacity:.7;pointer-events:none;}
@media(max-width:860px){
.woocommerce-checkout form.checkout.woocommerce-checkout{grid-template-columns:1fr;gap:20px;}
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout .playpulse-order-col{grid-column:1;}
.woocommerce-checkout form.checkout .playpulse-order-col{position:static;}
}
.woocommerce form .form-row input,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
background:var(--bg-soft)!important;border:1px solid var(--line)!important;color:var(--text)!important;border-radius:var(--radius-sm)!important;padding:10px 12px;
}
/* Field hints (e.g. the locked billing-email note): WooCommerce renders these as
a blue pop-up tooltip that overlaps the input. Make it a plain static hint that
always sits below the field instead. */
.woocommerce form .form-row .description{
display:block!important;position:static!important;clear:both;
background:transparent!important;color:var(--muted)!important;
border:0!important;border-radius:0!important;padding:0!important;
margin:8px 2px 0!important;font-size:13px;line-height:1.5;
}
.woocommerce form .form-row .description::before,
.woocommerce form .form-row .description::after{display:none!important;}
.woocommerce form .form-row .description a{color:var(--brand-2)!important;text-decoration:underline;}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--brand)!important;background:var(--surface)!important;color:var(--text)!important;}
/* ===== My account: sidebar nav (left) + content (right) =====
Scoped with :has() to the LOGGED-IN view only — the logged-out login/register
page has no navigation and must not be forced into this sidebar grid. */
/* page.php caps the wrapper at 820px inline; widen it so the content (orders
table, forms, etc.) has room to breathe. */
.woocommerce-account .playpulse-main>.container{max-width:1080px!important;}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){display:grid;grid-template-columns:240px 1fr;gap:0 32px;align-items:start;}
/* WooCommerce adds clearfix ::before/::after to .woocommerce; on a grid they
become phantom items that steal the first cell and shove the nav into the wrong
column. Drop them. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after{content:none;}
.woocommerce-account .woocommerce>.woocommerce-notices-wrapper{grid-column:1/-1;}
/* WooCommerce floats these and gives them 30%/68% widths — reset so each fills
its own grid track, and pin them to explicit columns. */
.woocommerce-account .woocommerce-MyAccount-navigation{grid-column:1;}
.woocommerce-account .woocommerce-MyAccount-content{grid-column:2;}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{box-sizing:border-box;width:100%!important;float:none!important;margin:0!important;}
/* ----- Orders table ----- */
.woocommerce-orders-table{width:100%;border-collapse:separate;border-spacing:0;border:0;background:transparent;}
.woocommerce-orders-table thead th{
text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
font-weight:700;padding:0 16px 12px;border:0!important;background:transparent!important;
}
.woocommerce-orders-table tbody tr{background:var(--bg-soft);}
.woocommerce-orders-table tbody tr:hover{background:var(--surface-2);}
.woocommerce-orders-table tbody td{
padding:16px;border:0!important;border-top:1px solid var(--line)!important;
font-size:14px;color:var(--text);vertical-align:middle;background:transparent!important;
}
/* Rounded ends on each row. */
.woocommerce-orders-table tbody td:first-child{border-radius:12px 0 0 12px;}
.woocommerce-orders-table tbody td:last-child{border-radius:0 12px 12px 0;text-align:right;}
.woocommerce-orders-table thead th:last-child{text-align:right;}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number{font-weight:700;}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-date{white-space:nowrap;color:var(--muted);}
/* Status: a small dot before the value (desktop table only). On phones WooCommerce
stacks the table and reuses every td::before to print the row label
("Status: ") — that wins content/float on specificity, but our box styles
(width/height/background) would still bleed in and squeeze the label into a
7px green circle (the odd floating dot on mobile). So the dot is min-width:769px
only; below that the status row reads like every other row (Date:/Total:). */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status{}
@media(min-width:769px){
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status::before{
content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:middle;
}
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-total{font-weight:600;}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-total small{color:var(--muted);font-weight:400;}
.woocommerce-orders-table .woocommerce-button.view{padding:9px 22px;font-size:14px;}
/* The Downloads / Addresses tables share the shop_table look. */
.woocommerce-MyAccount-content .shop_table:not(.woocommerce-orders-table){background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
/* ----- Addresses ----- */
.woocommerce-Addresses.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px;}
.woocommerce-Addresses.col2-set::before,
.woocommerce-Addresses.col2-set::after{content:none;}
.woocommerce-Address{width:auto!important;float:none!important;margin:0!important;
background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad);
}
/* Title row: heading left, edit/add link right, neatly aligned. */
.woocommerce-Address-title.title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;}
.woocommerce-Address-title.title h2,
.woocommerce-Address-title.title h3{margin:0;font-size:18px;}
.woocommerce-Address-title.title .edit{
flex:0 0 auto;font-size:13px;font-weight:600;color:var(--brand-2);
border:1px solid var(--line);border-radius:999px;padding:6px 14px;white-space:nowrap;
transition:border-color .15s,color .15s;
}
.woocommerce-Address-title.title .edit:hover{border-color:var(--brand-2);color:var(--text);}
.woocommerce-Address address{font-style:normal;color:var(--muted);line-height:1.7;font-size:14px;margin:0;}
@media(max-width:680px){
.woocommerce-Addresses.col2-set{grid-template-columns:1fr;}
}
/* Left: vertical, evenly-spaced nav as a card. */
.woocommerce-account .woocommerce-MyAccount-navigation{
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px;
position:sticky;top:84px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0;}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
display:block;padding:11px 16px;border-radius:var(--radius-sm);color:var(--muted);font-size:14px;font-weight:600;
transition:background .15s,color .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--surface-2);color:var(--text);}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
background:var(--btn);color:#fff;
}
/* Right: content card. */
.woocommerce-account .woocommerce-MyAccount-content{
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad);min-width:0;
}
.woocommerce-account .woocommerce-MyAccount-content > *:first-child{margin-top:0;}
@media(max-width:780px){
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr;gap:20px;}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{grid-column:1;}
.woocommerce-account .woocommerce-MyAccount-navigation{position:static;}
.woocommerce-account .woocommerce-MyAccount-navigation ul{flex-direction:row;flex-wrap:wrap;}
.woocommerce-account .woocommerce-MyAccount-navigation li a{padding:8px 14px;}
}
/* ===== Login / Register page (logged-out my-account) =====
Single centred card: a gradient banner, a segmented Login/Register toggle and
two stacked form panels that cross-slide when you switch. The WooCommerce forms
inside are untouched — see woocommerce/myaccount/form-login.php. */
.pp-auth{max-width:460px;margin:0 auto;}
/* The page title ("My account") sits in the full-width container; on the
logged-out login page centre it over the card. The logged-in dashboard keeps
its left-aligned title (it has the .logged-in body class). */
body.woocommerce-account:not(.logged-in) .playpulse-page-title{text-align:center;}
/* --- Banner --- */
/* Banner + card are one seamless panel: banner rounds the top, card rounds the
bottom, no overlap — so the gradient spans the full card width. */
.pp-auth-banner{
position:relative;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;padding:28px 28px 26px;margin:0;
background:linear-gradient(135deg,var(--brand),#3b82f6 70%,#22d3ee);
}
.pp-auth-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0,rgba(255,255,255,.18),transparent 55%);pointer-events:none;}
.pp-auth-banner-title{margin:0;color:#fff;font-size:24px;line-height:1.2;font-weight:800;position:relative;}
.pp-auth-banner-sub{margin:8px 0 0;color:rgba(255,255,255,.85);font-size:14px;position:relative;max-width:34ch;}
/* Banner copy swaps with the active panel (login vs register). */
.pp-auth .pp-auth-when{display:none;}
.pp-auth[data-state="login"] .pp-auth-when--login{display:inline;}
.pp-auth[data-state="register"] .pp-auth-when--register{display:inline;}
/* --- Card --- */
.pp-auth-card{
position:relative;background:var(--surface);border:1px solid var(--line);border-top:0;
border-radius:0 0 var(--radius) var(--radius);padding:30px 26px 26px;box-shadow:0 24px 60px -28px rgba(0,0,0,.6);
}
/* Kill WooCommerce's clearfix pseudo-rows. */
.pp-auth-card::before,.pp-auth-card::after{content:none!important;}
/* --- Segmented toggle --- */
.pp-auth-switch{
position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
padding:5px;margin:0 0 22px;
}
.pp-auth-switch-pill{
position:absolute;top:5px;left:5px;width:calc(50% - 5px);height:calc(100% - 10px);
border-radius:999px;background:var(--btn);box-shadow:0 6px 16px -8px rgba(14,109,253,.8);
transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.pp-auth[data-state="register"] .pp-auth-switch-pill{transform:translateX(100%);}
.pp-auth-tab{
position:relative;z-index:1;appearance:none;background:transparent;border:0;cursor:pointer;
padding:10px 8px;border-radius:999px;font-size:14px;font-weight:700;color:var(--muted);
transition:color .2s ease;font-family:inherit;
}
.pp-auth-tab[aria-selected="true"]{color:#fff;}
/* --- Panels + transition --- */
.pp-auth-panels{position:relative;}
/* No-JS fallback: both forms simply stack and are usable. */
.pp-auth-panel + .pp-auth-panel{margin-top:30px;padding-top:30px;border-top:1px solid var(--line);}
.pp-auth--js .pp-auth-panel{display:none;}
.pp-auth--js .pp-auth-panel + .pp-auth-panel{margin-top:0;padding-top:0;border-top:0;}
.pp-auth--js .pp-auth-panel.is-active{display:block;}
.pp-auth--js[data-state="login"] .pp-auth-panel--login.is-active{animation:ppAuthInLeft .34s cubic-bezier(.4,0,.2,1);}
.pp-auth--js[data-state="register"] .pp-auth-panel--register.is-active{animation:ppAuthInRight .34s cubic-bezier(.4,0,.2,1);}
@keyframes ppAuthInRight{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:none;}}
@keyframes ppAuthInLeft{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
.pp-auth-switch-pill{transition:none;}
.pp-auth--js .pp-auth-panel.is-active{animation:none;}
}
.pp-auth-heading{margin:0 0 4px;font-size:21px;font-weight:800;}
.pp-auth-lead{margin:0 0 18px;color:var(--muted);font-size:14px;}
/* WooCommerce wraps login/register forms in its own bordered, padded box; inside
our card that reads as a double box. Flatten it. */
.pp-auth-panel form.login,.pp-auth-panel form.register{
border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;
}
.pp-auth-panel form{margin:0;}
.pp-auth-panel .form-row{margin:0 0 13px;}
.pp-auth-panel label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px;}
/* Inputs: a recessed dark well with a clear border + blue focus ring, so the
fields read as crisp boxes instead of flat voids. */
.pp-auth-panel .input-text,
.pp-auth-panel input[type="text"],
.pp-auth-panel input[type="email"],
.pp-auth-panel input[type="password"],
.pp-auth-panel input[type="tel"]{
width:100%;box-sizing:border-box;
background:var(--bg)!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:10px!important;
padding:9px 12px!important;
font-size:14px;line-height:1.3;color:var(--text)!important;
transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.pp-auth-panel .input-text::placeholder,
.pp-auth-panel input::placeholder{color:var(--muted);opacity:1;}
.pp-auth-panel .input-text:hover,
.pp-auth-panel input[type="text"]:hover,
.pp-auth-panel input[type="email"]:hover,
.pp-auth-panel input[type="password"]:hover{border-color:rgba(255,255,255,.22)!important;}
.pp-auth-panel .input-text:focus,
.pp-auth-panel input[type="text"]:focus,
.pp-auth-panel input[type="email"]:focus,
.pp-auth-panel input[type="password"]:focus,
.pp-auth-panel input[type="tel"]:focus{
outline:none;border-color:var(--btn)!important;
box-shadow:0 0 0 3px rgba(14,109,253,.22)!important;
background:var(--bg-soft)!important;
}
.pp-auth-panel .button{display:block;width:100%;text-align:center;font-size:15px;padding:13px 18px;margin-top:4px;}
/* Cloudflare Turnstile widget sits just above the submit button. */
.pp-auth-panel .pp-turnstile{margin:2px 0 14px;}
/* Remember-me + forgot link on one line. */
.pp-auth-row-remember{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pp-auth-row-remember .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:8px;margin:0;}
.pp-auth-row-remember .woocommerce-form-login__rememberme span{font-size:13px;color:var(--text);}
.pp-auth-row-remember label{margin:0;}
.pp-auth-forgot{font-size:13px;color:var(--brand-2);font-weight:600;}
.pp-auth-forgot:hover{text-decoration:underline;}
/* Inline "Create an account / Sign in" prompt under each form. */
.pp-auth-altswitch{margin:18px 0 0;text-align:center;font-size:13px;color:var(--muted);}
.pp-auth-link{appearance:none;background:none;border:0;padding:0;cursor:pointer;color:var(--brand-2);font-weight:700;font-size:13px;font-family:inherit;}
.pp-auth-link:hover{text-decoration:underline;}
@media(max-width:520px){
.pp-auth-banner{padding:24px 20px;border-radius:16px;}
.pp-auth-banner-title{font-size:21px;}
.pp-auth-card{padding:28px 18px 22px;}
}
/* ===== Footer ===== */
.playpulse-footer{border-top:1px solid var(--line);background:var(--bg-soft);margin-top:40px;padding:40px 0 48px;}
.playpulse-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:30px;}
.playpulse-footer h4{margin:0 0 12px;font-size:15px;}
.playpulse-footer a{color:var(--muted);font-size:14px;display:block;padding:4px 0;}
.playpulse-footer a:hover{color:var(--text);}
.playpulse-footer .muted{color:var(--muted);font-size:14px;}
.playpulse-social{display:flex;gap:12px;margin-top:14px;}
.playpulse-social a{width:40px;height:40px;border-radius:11px;overflow:hidden;display:block;
box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .14s ease,box-shadow .14s ease;}
.playpulse-social a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.3);}
.playpulse-social svg{width:100%;height:100%;display:block;}
/* Payment methods: a footer column (beside Support) — bold heading, logo chips
in a 2×2 grid below. */
.playpulse-footer-pay h4{margin:0 0 12px;font-size:15px;}
.playpulse-pay-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:260px;}
.playpulse-pay-chip{
display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;line-height:1;
padding:8px 10px;border-radius:8px;background:#fff;color:var(--chip,#333);
border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.2);
height:56px;box-sizing:border-box;
}
.playpulse-pay-ico{width:24px;height:24px;flex:0 0 auto;border-radius:5px;display:block;}
/* Official logo chips: the logo fills the tile WITHOUT growing it. The chip has a
fixed height; the logo is capped to that height so a tall source image can't
stretch the box. object-fit:contain keeps aspect ratio. */
.playpulse-pay-chip.is-logo{padding:0 4px;}
.playpulse-pay-logo{display:block;width:138px;height:100%;max-height:52px;object-fit:contain;}
/* Bottom bar: copyright + legal links on the left, theme toggle on the right. */
.playpulse-footer-bottom{
border-top:1px solid var(--line);margin-top:22px;padding-top:18px;
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;
}
.playpulse-footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;color:var(--muted);font-size:13px;}
.playpulse-footer-legal a{color:var(--muted);padding:0;font-size:13px;}
.playpulse-footer-legal a:hover{color:var(--text);}
.playpulse-footer-legal .sep{opacity:.35;}
.playpulse-theme-toggle{
display:inline-flex;align-items:center;gap:9px;cursor:pointer;
background:var(--surface);border:1px solid var(--line);border-radius:999px;
color:var(--text);font:inherit;font-size:13px;font-weight:600;line-height:1;padding:8px 8px 8px 16px;
transition:border-color .15s ease,transform .12s ease;
}
.playpulse-theme-toggle:hover{border-color:var(--brand);transform:translateY(-1px);}
.playpulse-theme-icon{
display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;flex:0 0 auto;
}
.playpulse-theme-icon svg{width:15px;height:15px;}
.playpulse-theme-toggle .pp-sun{display:none;}
html[data-theme="light"] .playpulse-theme-toggle .pp-sun{display:block;}
html[data-theme="light"] .playpulse-theme-toggle .pp-moon{display:none;}
/* ===== Mobile bottom nav ===== */
.playpulse-bottom-nav{
position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
background:rgba(11,13,20,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);
padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
.playpulse-bottom-nav ul{list-style:none;margin:0;padding:0;display:flex;}
.playpulse-bottom-nav li{flex:1;}
.playpulse-bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:11px;position:relative;padding:4px 0;}
.playpulse-bottom-nav a.active,.playpulse-bottom-nav a:hover{color:var(--text);}
.playpulse-bottom-nav svg{width:22px;height:22px;}
.playpulse-bottom-nav .playpulse-badge-count{top:-2px;right:18px;}
/* ===== Responsive ===== */
@media(max-width:860px){
/* The fixed bottom nav exists only at this width — reserve space for it here,
not on desktop. */
.playpulse-footer{padding-bottom:110px;}
.playpulse-nav,.playpulse-hours{display:none;}
.playpulse-search input{width:110px;}
.playpulse-footer-grid{grid-template-columns:1fr;}
.playpulse-bottom-nav{display:block;}
}
@media(max-width:520px){
.playpulse-search{display:none;}
/* Inline search is gone on phones — show the magnifier toggle + slide-down bar. */
.playpulse-icon-btn.playpulse-search-toggle{display:inline-flex;}
.playpulse-search-panel:not([hidden]){display:block;}
.playpulse-scroller .playpulse-card-product{min-width:160px;max-width:160px;}
.woocommerce ul.products,.playpulse-grid{grid-template-columns:repeat(2,1fr);}
}
/* ===== Mobile UX polish (spacing rhythm + comfortable tap targets) =====
The layout is already mobile-first (bottom nav, horizontal scrollers, safe-area
insets). These overrides tighten the vertical rhythm so more product shows per
scroll, and lift a few small controls to a ≥40px touch target. */
@media(max-width:600px){
/* 30px between every row stacks into big dead bands on a phone; 22px shows
more product per scroll while still breathing. */
.playpulse-row{margin:22px 0;}
.playpulse-row-head{margin-bottom:12px;}
.playpulse-row-head h2{font-size:18px;}
.playpulse-main{padding-top:18px;padding-bottom:48px;}
/* Static hero (shown only when the slideshow is off): trim the heavy 46/36
desktop padding so the copy isn't boxed into a narrow column. */
.playpulse-hero{padding:30px 20px;margin:16px 0;border-radius:18px;}
.playpulse-hero p{font-size:15px;}
.playpulse-hero-badges{gap:8px;margin-top:16px;}
/* Category chips: a touch taller for an easier tap. */
.playpulse-chip{padding:9px 16px;}
/* Section gutter to the screen edge feels tight at 18px on small phones. */
.container{padding:0 16px;}
}
@media(max-width:520px){
/* ≥40px touch targets for the small, fiddly controls. */
.playpulse-icon-btn{width:40px;height:40px;}
/* The header now carries a 4th action (search). Tighten the row + shrink the
logo/Login pill so logo + actions never exceed the phone width — an overflow
here would re-balloon the layout viewport and push the bottom nav off-screen.
Spacing is trimmed before tap targets, so the icons stay a comfy 40px. */
.playpulse-header-inner{gap:10px;}
.playpulse-logo{font-size:18px;}
.playpulse-header-tools{gap:6px;}
.playpulse-login-btn{padding:8px 12px;font-size:13px;}
.woocommerce-cart a.remove{width:38px;height:38px;}
.playpulse-coupon-input,.playpulse-coupon-apply{height:42px;}
.playpulse-coupon-inputrow{max-width:none;}
/* Scroller / grid product CTA reads as a real button, not a thin strip. */
.playpulse-card-btn{padding:11px;font-size:13px;}
/* Keep 2-up product gutters tight so each card stays as large as possible. */
.playpulse-grid,.woocommerce ul.products{gap:12px;}
}
/* Bottom-nav count badges (cart + alerts): centre over the icon, nudged to its
top-right, so they sit correctly no matter how many nav items there are. */
.playpulse-bottom-nav .playpulse-cart-count,
.playpulse-bottom-nav .playpulse-badge-count{
top:-2px;left:50%;right:auto;margin-left:5px;
}
/* Hide the cart badge when the cart is empty (matches the header behaviour). */
.playpulse-bottom-nav .playpulse-cart-count[data-count="0"]{display:none!important;}
/* With 6 items the cells get narrow — keep labels on one line and scale type/
icons down a touch so nothing clips (e.g. the long word "Categories"). */
/* Defensive: flex items default to min-width:auto and won't shrink below their
content width. With 6 cells on a 360px phone that could overflow the bar, so let
the cells shrink and ellipsize the labels. (The homepage "nav below the fold" bug
was NOT caused here — see .playpulse-card-product; this just keeps the bar tidy.) */
.playpulse-bottom-nav ul{min-width:0;max-width:100%;}
.playpulse-bottom-nav li{min-width:0;}
.playpulse-bottom-nav a{min-width:0;}
.playpulse-bottom-nav a > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
@media(max-width:520px){
.playpulse-bottom-nav{padding-left:2px;padding-right:2px;}
.playpulse-bottom-nav a{font-size:10px;gap:2px;}
.playpulse-bottom-nav svg{width:21px;height:21px;}
}
@media(max-width:360px){
.playpulse-bottom-nav a{font-size:9px;}
.playpulse-bottom-nav svg{width:20px;height:20px;}
}
/* ===== Categories list page ([playpulse_categories]) ===== */
.playpulse-cat-intro{margin:2px 0 18px;color:var(--muted);font-size:15px;max-width:62ch;}
.playpulse-cat-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin:6px 0 0;
}
.playpulse-cat-card{
display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.playpulse-cat-card:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.6);}
.playpulse-cat-thumb{aspect-ratio:16/10;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.playpulse-cat-thumb img{width:100%;height:100%;object-fit:cover;}
/* Generated (no-image) gradient tile + glossy highlight. */
.playpulse-cat-thumb--gen::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 100% 0,rgba(255,255,255,.28),transparent 55%);pointer-events:none;}
.playpulse-cat-ico{width:48px;height:48px;color:#fff;position:relative;z-index:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.28));transition:transform .16s ease;}
.playpulse-cat-card:hover .playpulse-cat-ico{transform:scale(1.08);}
.playpulse-cat-initial{font-size:34px;font-weight:800;color:#fff;position:relative;z-index:1;}
/* Body row: name + count on the left, an arrow chip on the right. */
.playpulse-cat-body{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:12px 12px 13px;}
.playpulse-cat-name{font-weight:700;font-size:14px;color:var(--text);padding:0;line-height:1.25;}
.playpulse-cat-count{grid-column:1;font-size:12px;color:var(--muted);padding:2px 0 0;}
.playpulse-cat-go{
grid-column:2;grid-row:1/3;align-self:center;
width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);
transition:background .16s ease,color .16s ease,transform .16s ease,border-color .16s ease;
}
.playpulse-cat-go svg{width:15px;height:15px;}
.playpulse-cat-card:hover .playpulse-cat-go{background:var(--btn);border-color:var(--btn);color:#fff;transform:translateX(2px);}
@media(max-width:520px){
.playpulse-cat-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
.playpulse-cat-intro{font-size:14px;margin-bottom:14px;}
.playpulse-cat-ico{width:40px;height:40px;}
}
/* =====================================================================
DESIGN REFRESH (UI/UX Pro Max — neon-purple/rose dark, 2026-06)
Purely visual polish layered on top of the token remap above. No markup,
templates, features, or logos changed. To fully revert the look, restore
the theme backup in /backups/ — see LATEST_THEME_BACKUP.txt.
===================================================================== */
/* 1. Display font (Space Grotesk) on headings, logo wordmark and prices —
body copy stays Inter for readability. */
h1, h2, h3,
.playpulse-logo,
.playpulse-hero h1,
.playpulse-row-head h2,
.playpulse-card-title,
.playpulse-card-price,
.playpulse-slide-body h2,
.playpulse-slide-price,
.playpulse-cat-name,
.playpulse-cat-initial{
font-family:var(--font-head);
letter-spacing:-.01em;
}
/* Tabular figures so prices/quantities don't jiggle as they change. */
.playpulse-card-price,
.playpulse-slide-price,
.woocommerce .price{font-variant-numeric:tabular-nums;}
/* 2. Ambient brand glow behind the page — night mode only (light mode stays clean). */
html:not([data-theme="light"]) body{
background:
radial-gradient(900px 520px at 82% -8%, rgba(124,58,237,.16), transparent 60%),
radial-gradient(720px 520px at -8% 6%, rgba(244,63,94,.08), transparent 55%),
var(--bg);
background-attachment:fixed;
}
/* 3. Primary actions get a soft glow + lift. Blue buttons → blue glow (the rose
hero CTA keeps its own rose glow via .playpulse-btn-cta). */
.playpulse-btn,
.playpulse-card-btn,
.playpulse-login-btn{box-shadow:0 12px 32px -14px rgba(14,109,253,.55);}
.playpulse-btn:hover,
.playpulse-card-btn:hover,
.playpulse-login-btn:hover{
transform:translateY(-2px);
box-shadow:0 16px 40px -14px rgba(14,109,253,.7);
}
.playpulse-card-product:hover .playpulse-card-btn{filter:brightness(1.08);}
/* 3b. Prices → blue (matching the buttons); strikethrough "was" price stays muted. */
.playpulse-card-price,
.playpulse-slide-price,
.playpulse-mega-pprice{color:var(--price);}
.playpulse-card-price ins,
.woocommerce .price ins{color:var(--price);}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--price)!important;}
.playpulse-card-price del,
.woocommerce .price del{color:var(--muted)!important;opacity:.85;}
/* 4. Cards lift into a brand-tinted glow on hover (was a flat translate). */
.playpulse-card-product:hover,
.playpulse-cat-card:hover{box-shadow:0 18px 44px -20px rgba(124,58,237,.6);}
/* 5. Logo mark gets a touch more presence with the new palette. */
.playpulse-logo .dot{box-shadow:0 0 16px rgba(124,58,237,.7);}
/* 6. Hero headline accent — the clause after the last comma ("delivered fast.")
renders as a purple→rose gradient, matching the approved preview. */
.playpulse-hero-accent{
background:linear-gradient(115deg,#22d3ee,#3b82f6); /* cyan → blue (Option B) */
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* 7. Hero CTAs: primary "Order Now" in a rose gradient with glow; secondary
"Browse Categories" as a calm ghost/outline button. Scoped to the hero +
slideshow so the rest of the site keeps its cohesive purple buttons. */
.playpulse-hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px;}
.playpulse-btn-cta{
background:linear-gradient(135deg,var(--accent),#fb7185)!important;
box-shadow:0 12px 32px -12px rgba(244,63,94,.7)!important;
}
.playpulse-btn-cta:hover{
filter:brightness(1.05);transform:translateY(-2px);
box-shadow:0 18px 42px -12px rgba(244,63,94,.85)!important;
}
.playpulse-btn-ghost{
background:var(--surface)!important;border:1px solid var(--line)!important;
color:var(--text)!important;box-shadow:none!important;
}
.playpulse-btn-ghost:hover{border-color:var(--brand-2)!important;transform:translateY(-2px);}