/* ============================================================================ HPM Bouhandelaars public look, Phase 4 (2 Nov 2026) Light, sunny glass: the chrome (header, search, dropdowns, panels, footer) is frosted glass over a soft sea-and-sun wash; content stays on readable panels. Loaded on every page after hpm-theme.css. Scopes - Global rules (top bar, header, search band, footer) apply on every page, public, store and admin. - Page component rules are written as ":is(.pg,body.admin-glass main .pg-canvas.pg) .thing" and expanded at build time to :is(.pg, body.admin-glass main .pg-canvas.pg) .thing so they apply on public pages (body.pg) AND inside the Website Builder canvas (.pg-canvas) on the dark admin page, where they out-rank the admin theme. Since Phase 5 the store pages carry .pg too (store rules at the end). - Site Branding colours/font arrive as --hpm-primary / --hpm-secondary / --pg-font from _BrandTokens.cshtml. ============================================================================ */ :root { --pg-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --pg-ink: #14283a; --pg-text: #2a3a4a; --pg-muted: #5f6f7f; --pg-sea: var(--hpm-primary, #1a5f7a); --pg-sea-deep: #0f3f55; --pg-sea-soft: rgba(26, 95, 122, 0.10); --pg-sun: var(--hpm-secondary, #ffc107); --pg-sun-deep: #e0a800; --pg-sun-soft: rgba(255, 193, 7, 0.18); --pg-clay: #ef6c00; --pg-page: #eef2f6; --pg-glass: rgba(255, 255, 255, 0.68); --pg-glass-strong: rgba(255, 255, 255, 0.86); --pg-border: rgba(20, 40, 58, 0.11); --pg-border-strong: rgba(20, 40, 58, 0.18); --pg-blur: saturate(160%) blur(16px); --pg-shadow: 0 10px 30px rgba(20, 40, 58, 0.08); --pg-shadow-lift: 0 18px 40px rgba(20, 40, 58, 0.14); --pg-radius: 16px; --pg-radius-sm: 10px; --pg-navy: #10243a; --pg-navy-glass: rgba(255, 255, 255, 0.06); --pg-navy-border: rgba(255, 255, 255, 0.12); --pg-good: #1f9d61; --pg-bad: #d8463f; --pg-info: #2b7fd6; --pg-warn: #b7860b; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --pg-glass: rgba(255, 255, 255, 0.94); --pg-glass-strong: #ffffff; } } /* ---------- page backdrop (public pages and the editor canvas) ---------- */ body.pg { background: var(--pg-page); color: var(--pg-text); font-family: var(--pg-font); -webkit-font-smoothing: antialiased; } body.pg::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 38rem at -8% -12%, rgba(26, 95, 122, 0.20), transparent 60%), radial-gradient(52rem 34rem at 108% -4%, rgba(255, 193, 7, 0.22), transparent 60%), radial-gradient(44rem 30rem at 50% 118%, rgba(26, 95, 122, 0.10), transparent 60%); } .visual-preview-container.pg-canvas { position: relative; isolation: isolate; background: var(--pg-page); color: var(--pg-text); font-family: var(--pg-font); border-radius: 12px; } .visual-preview-container.pg-canvas::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(60rem 38rem at -8% -12%, rgba(26, 95, 122, 0.20), transparent 60%), radial-gradient(52rem 34rem at 108% -4%, rgba(255, 193, 7, 0.22), transparent 60%); } /* ---------- type ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) h1, :is(.pg,body.admin-glass main .pg-canvas.pg) h2, :is(.pg,body.admin-glass main .pg-canvas.pg) h3, :is(.pg,body.admin-glass main .pg-canvas.pg) h4, :is(.pg,body.admin-glass main .pg-canvas.pg) h5, :is(.pg,body.admin-glass main .pg-canvas.pg) h6, :is(.pg,body.admin-glass main .pg-canvas.pg) .h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .h6 { color: var(--pg-ink); font-weight: 700; letter-spacing: -0.015em; } :is(.pg,body.admin-glass main .pg-canvas.pg) h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .h1 { font-size: clamp(1.9rem, 1.35rem + 2vw, 2.75rem); line-height: 1.12; } :is(.pg,body.admin-glass main .pg-canvas.pg) h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); line-height: 1.18; } :is(.pg,body.admin-glass main .pg-canvas.pg) h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem); } :is(.pg,body.admin-glass main .pg-canvas.pg) h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .h5 { font-weight: 600; letter-spacing: 0; } :is(.pg,body.admin-glass main .pg-canvas.pg) h6, :is(.pg,body.admin-glass main .pg-canvas.pg) .h6 { font-weight: 600; letter-spacing: 0; } :is(.pg,body.admin-glass main .pg-canvas.pg) h1, :is(.pg,body.admin-glass main .pg-canvas.pg) h2, :is(.pg,body.admin-glass main .pg-canvas.pg) h3, :is(.pg,body.admin-glass main .pg-canvas.pg) h4, :is(.pg,body.admin-glass main .pg-canvas.pg) h5, :is(.pg,body.admin-glass main .pg-canvas.pg) h6 { font-family: var(--pg-heading-font, inherit); } :is(.pg,body.admin-glass main .pg-canvas.pg) p { line-height: 1.6; } :is(.pg,body.admin-glass main .pg-canvas.pg) a { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) a:hover { color: var(--pg-sea-deep); } :is(.pg,body.admin-glass main .pg-canvas.pg) .lead { color: var(--pg-text); font-weight: 400; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-muted { color: var(--pg-muted) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-dark { color: var(--pg-ink) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-white { color: #fff !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-white-50 { color: rgba(255, 255, 255, 0.6) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-primary { color: var(--pg-sea) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-success { color: var(--pg-good) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-danger { color: var(--pg-bad) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-warning { color: var(--pg-warn) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-info { color: var(--pg-info) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-secondary { color: var(--pg-muted) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .text-light { color: rgba(255, 255, 255, 0.85) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-light { background: transparent !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-white { background: var(--pg-glass-strong) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .border { border-color: var(--pg-border) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .border-top, :is(.pg,body.admin-glass main .pg-canvas.pg) .border-bottom, :is(.pg,body.admin-glass main .pg-canvas.pg) .border-start, :is(.pg,body.admin-glass main .pg-canvas.pg) .border-end { border-color: var(--pg-border) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) hr { border-color: var(--pg-border-strong); opacity: 1; } :is(.pg,body.admin-glass main .pg-canvas.pg) .shadow, :is(.pg,body.admin-glass main .pg-canvas.pg) .shadow-sm, :is(.pg,body.admin-glass main .pg-canvas.pg) .shadow-lg { box-shadow: var(--pg-shadow) !important; } /* CMS page-builder content (live .page-section and the editor canvas .visual-section): the owner sets text colours on blocks and sections, so headings, lead text and paragraphs inherit instead of taking the theme ink */ :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section h6, :is(.pg,body.admin-glass main .pg-canvas.pg) .visual-section h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .visual-section h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .visual-section h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .visual-section h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .visual-section h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .visual-section h6, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section .lead, :is(.pg,body.admin-glass main .pg-canvas.pg) .visual-section .lead, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section p, :is(.pg,body.admin-glass main .pg-canvas.pg) .visual-section p { color: inherit; } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section .text-white, :is(.pg,body.admin-glass main .pg-canvas.pg) .visual-section .text-white { color: #fff !important; } /* phones: hpm-theme gives every CMS text block a white 90% box for readability over photos; white text inside that box was invisible (Services page "Our Services"), so inside the box it turns ink on phones only (owner, 2 Nov) */ @media (max-width: 767.98px) { :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section .block-text .text-white, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section .block-text .text-white h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section .block-text .text-white h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section .block-text .text-white h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section .block-text .text-white p, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section .block-text .text-white-50 { color: var(--pg-ink) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-section .block-text .text-white .lead { color: var(--pg-text) !important; } } /* ---------- page headers (static pages: Contact, Terms, Privacy, Returns, Shipping) ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) .page-header { background: var(--pg-glass); -webkit-backdrop-filter: var(--pg-blur); backdrop-filter: var(--pg-blur); color: var(--pg-ink); border-top: 1px solid var(--pg-border); border-bottom: 1px solid var(--pg-border); padding: 2.25rem 0 1.75rem; margin: 0 0 2rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-header h1 { color: var(--pg-ink); margin-bottom: 0.5rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-header p, :is(.pg,body.admin-glass main .pg-canvas.pg) .page-header .lead { color: var(--pg-muted); } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-header .breadcrumb { margin: 0; font-size: 0.9rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-header .breadcrumb-item a { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-header .breadcrumb-item.active { color: var(--pg-muted); } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-header .breadcrumb-item + .breadcrumb-item::before { color: var(--pg-muted); } /* ---------- hero (home fallback) ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-section { background: linear-gradient(135deg, var(--pg-sea) 0%, var(--pg-sea-deep) 100%); border-radius: 0 0 28px 28px; padding: 4.5rem 0; } :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-section::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(34rem 24rem at 92% 10%, rgba(255, 193, 7, 0.28), transparent 60%); } :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-section .container { z-index: 1; } :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-title { color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-tagline { color: var(--pg-sun); font-weight: 500; } :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-description { color: rgba(255, 255, 255, 0.88); } /* ---------- section headings and bands ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) .section-heading { color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .section-heading::after { background: var(--pg-sun); border-radius: 2px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .about-section, :is(.pg,body.admin-glass main .pg-canvas.pg) .calculator-section { background: transparent; } :is(.pg,body.admin-glass main .pg-canvas.pg) .stats-section { background: var(--pg-navy); color: #fff; border-radius: 28px; margin: 0 1rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .stat-number { color: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) .stat-label { color: rgba(255, 255, 255, 0.8); } :is(.pg,body.admin-glass main .pg-canvas.pg) .cta-section { background: linear-gradient(135deg, var(--pg-sun) 0%, #ffb300 100%); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .cta-section h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .cta-section .lead { color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section.bg-dark { background: var(--pg-navy) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section .card { background: var(--pg-glass-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .experience-badge { background: var(--pg-sea); border-radius: var(--pg-radius); box-shadow: var(--pg-shadow); } :is(.pg,body.admin-glass main .pg-canvas.pg) .placeholder-img { background: linear-gradient(135deg, var(--pg-sea-soft), var(--pg-sun-soft)); color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .feature-icon { background: var(--pg-sea); box-shadow: 0 8px 20px rgba(26, 95, 122, 0.25); } /* ---------- panels (cards and the hand-written panel classes) ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) .card, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form, :is(.pg,body.admin-glass main .pg-canvas.pg) .calculator-card, :is(.pg,body.admin-glass main .pg-canvas.pg) .testimonial-card, :is(.pg,body.admin-glass main .pg-canvas.pg) .team-card { background: var(--pg-glass); -webkit-backdrop-filter: var(--pg-blur); backdrop-filter: var(--pg-blur); border: 1px solid var(--pg-border); border-radius: var(--pg-radius); box-shadow: var(--pg-shadow); color: var(--pg-text); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card.border-0 { border: 1px solid var(--pg-border) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .card.shadow-lg { background: var(--pg-glass-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header { background: transparent; color: var(--pg-ink); font-weight: 600; border-bottom: 1px solid var(--pg-border); padding: 0.9rem 1.25rem; border-radius: var(--pg-radius) var(--pg-radius) 0 0 !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header h6 { color: inherit; font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: 0; } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header .bi { color: var(--pg-sea); margin-right: 0.3rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-footer { background: transparent; border-top: 1px solid var(--pg-border); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-body { color: var(--pg-text); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-title { color: var(--pg-ink); } /* coloured card headers (account, dashboard, trade application) -> a toned edge instead of a solid block */ :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-primary, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-success, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-info, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-warning, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-danger, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-dark, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-secondary, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-light, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-white { background: transparent !important; color: var(--pg-ink) !important; box-shadow: inset 4px 0 0 var(--pg-tone, var(--pg-sea)); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-primary, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-info { --pg-tone: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-success { --pg-tone: var(--pg-good); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-warning { --pg-tone: var(--pg-sun-deep); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-danger { --pg-tone: var(--pg-bad); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-dark, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-secondary { --pg-tone: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-light, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header.bg-white { --pg-tone: var(--pg-border-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] .text-white, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] .text-dark, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] h6 { color: var(--pg-ink) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] .bi { color: var(--pg-tone, var(--pg-sea)); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] .btn-light, :is(.pg,body.admin-glass main .pg-canvas.pg) .card-header[class*="bg-"] .btn-outline-light { color: var(--pg-ink); border-color: var(--pg-border-strong); background: var(--pg-glass-strong); } /* solid coloured cards (dashboard tiles) -> glass with a toned top edge */ :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-primary, :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-success, :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-info, :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-warning, :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-danger, :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-dark, :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-secondary { background: var(--pg-glass) !important; color: var(--pg-text) !important; box-shadow: var(--pg-shadow), inset 0 3px 0 var(--pg-tone, var(--pg-sea)); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-primary, :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-info { --pg-tone: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-success { --pg-tone: var(--pg-good); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-warning { --pg-tone: var(--pg-sun-deep); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-danger { --pg-tone: var(--pg-bad); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-dark, :is(.pg,body.admin-glass main .pg-canvas.pg) .card.bg-secondary { --pg-tone: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .card[class*="bg-"] .text-white, :is(.pg,body.admin-glass main .pg-canvas.pg) .card[class*="bg-"] .text-white-50 { color: var(--pg-ink) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .card[class*="bg-"] .text-white-50 { color: var(--pg-muted) !important; } /* service cards keep their lift */ :is(.pg,body.admin-glass main .pg-canvas.pg) .service-card { border: 1px solid var(--pg-border); } :is(.pg,body.admin-glass main .pg-canvas.pg) .service-card:hover { transform: translateY(-4px); box-shadow: var(--pg-shadow-lift); } :is(.pg,body.admin-glass main .pg-canvas.pg) .service-card .card-title { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card { background: linear-gradient(160deg, var(--pg-sea) 0%, var(--pg-sea-deep) 100%); border-radius: var(--pg-radius); box-shadow: var(--pg-shadow); } :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card i { color: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) .team-card img { border-color: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) .team-card h5 { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .testimonial-card::before { color: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) .accordion-item { background: var(--pg-glass); border: 1px solid var(--pg-border); color: var(--pg-text); } :is(.pg,body.admin-glass main .pg-canvas.pg) .accordion-item:first-of-type { border-radius: var(--pg-radius-sm) var(--pg-radius-sm) 0 0; } :is(.pg,body.admin-glass main .pg-canvas.pg) .accordion-item:last-of-type { border-radius: 0 0 var(--pg-radius-sm) var(--pg-radius-sm); } :is(.pg,body.admin-glass main .pg-canvas.pg) .accordion-button { background: transparent; color: var(--pg-ink); font-weight: 600; box-shadow: none; } :is(.pg,body.admin-glass main .pg-canvas.pg) .accordion-button:not(.collapsed) { background: var(--pg-sea-soft); color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .accordion-button:focus { box-shadow: 0 0 0 0.2rem var(--pg-sun-soft); } :is(.pg,body.admin-glass main .pg-canvas.pg) .list-group-item { background: transparent; border-color: var(--pg-border); color: var(--pg-text); } :is(.pg,body.admin-glass main .pg-canvas.pg) .list-group-item-action:hover { background: var(--pg-sea-soft); } :is(.pg,body.admin-glass main .pg-canvas.pg) .modal-content { background: var(--pg-glass-strong); -webkit-backdrop-filter: var(--pg-blur); backdrop-filter: var(--pg-blur); border: 1px solid var(--pg-border); border-radius: var(--pg-radius); } :is(.pg,body.admin-glass main .pg-canvas.pg) .modal-header, :is(.pg,body.admin-glass main .pg-canvas.pg) .modal-footer { border-color: var(--pg-border); } :is(.pg,body.admin-glass main .pg-canvas.pg) .alert { border-radius: var(--pg-radius-sm); } :is(.pg,body.admin-glass main .pg-canvas.pg) .badge { border-radius: 999px; font-weight: 600; padding: 0.35em 0.7em; } :is(.pg,body.admin-glass main .pg-canvas.pg) .progress { background: var(--pg-sea-soft); border-radius: 999px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .progress-bar { border-radius: 999px; } /* ---------- home shop band (home page; styles in the partial are overridden here) ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) .home-shop-band { background: transparent; border-bottom: 0; } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-cat-tile { background: var(--pg-glass); border: 1px solid var(--pg-border); border-radius: 14px; color: var(--pg-ink); box-shadow: var(--pg-shadow); } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-cat-tile i { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-cat-count { color: var(--pg-muted); } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-cat-tile:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .home-cat-tile:focus-visible { background: var(--pg-ink); border-color: var(--pg-ink); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-cat-tile:hover i, :is(.pg,body.admin-glass main .pg-canvas.pg) .home-cat-tile:focus-visible i { color: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-cat-tile:hover .home-cat-count, :is(.pg,body.admin-glass main .pg-canvas.pg) .home-cat-tile:focus-visible .home-cat-count { color: rgba(255, 255, 255, 0.7); } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-product-card { background: var(--pg-glass); border: 1px solid var(--pg-border); border-radius: 14px; color: var(--pg-ink); box-shadow: var(--pg-shadow); } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-product-card:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .home-product-card:focus-visible { border-color: var(--pg-sea); color: var(--pg-ink); box-shadow: var(--pg-shadow-lift); } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-product-img { background: #fff; border-radius: 10px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-delivery-row > div { background: var(--pg-glass); border: 1px solid var(--pg-border); border-radius: 14px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-delivery-row i { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .home-delivery-row a { color: var(--pg-ink); } /* ---------- buttons ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) :not(.btn-group):not(.input-group):not(.pagination):not(.btn-group-vertical) > .btn { border-radius: 999px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn { font-weight: 600; padding: 0.55rem 1.15rem; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.85rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-lg { padding: 0.8rem 1.6rem; font-size: 1.05rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-primary { background: var(--pg-sea); border-color: var(--pg-sea); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-primary:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-primary:focus { background: var(--pg-sea-deep); border-color: var(--pg-sea-deep); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-warning { background: var(--pg-sun); border-color: var(--pg-sun); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-warning:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-warning:focus { background: var(--pg-sun-deep); border-color: var(--pg-sun-deep); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-dark { background: var(--pg-ink); border-color: var(--pg-ink); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-dark:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-dark:focus { background: #0b1a28; border-color: #0b1a28; color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-secondary { background: var(--pg-glass-strong); border-color: var(--pg-border-strong); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-secondary:hover { background: #fff; border-color: var(--pg-ink); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-light { background: var(--pg-glass-strong); border-color: var(--pg-border); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-outline-primary { color: var(--pg-sea); border-color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-outline-primary:hover { background: var(--pg-sea); border-color: var(--pg-sea); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-outline-secondary { color: var(--pg-ink); border-color: var(--pg-border-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-outline-secondary:hover { background: var(--pg-ink); border-color: var(--pg-ink); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-outline-dark { color: var(--pg-ink); border-color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-outline-dark:hover { background: var(--pg-ink); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn-link { font-weight: 500; color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn:focus-visible { box-shadow: 0 0 0 0.25rem var(--pg-sun-soft); } /* ---------- forms ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) .form-label { font-weight: 500; color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .form-control, :is(.pg,body.admin-glass main .pg-canvas.pg) .form-select { background: var(--pg-glass-strong); color: var(--pg-ink); border: 1px solid var(--pg-border-strong); border-radius: var(--pg-radius-sm); padding: 0.6rem 0.85rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .form-control::placeholder { color: #8a97a4; } :is(.pg,body.admin-glass main .pg-canvas.pg) .form-control:focus, :is(.pg,body.admin-glass main .pg-canvas.pg) .form-select:focus { background: #fff; border-color: var(--pg-sea); box-shadow: 0 0 0 0.2rem rgba(26, 95, 122, 0.16); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .form-control-sm { padding: 0.35rem 0.65rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .input-group-text { background: var(--pg-glass-strong); border: 1px solid var(--pg-border-strong); color: var(--pg-muted); border-radius: var(--pg-radius-sm); } :is(.pg,body.admin-glass main .pg-canvas.pg) .form-check-input { border-color: var(--pg-border-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .form-check-input:checked { background-color: var(--pg-sea); border-color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .form-text { color: var(--pg-muted); } :is(.pg,body.admin-glass main .pg-canvas.pg) .form-floating > label { color: var(--pg-muted); } /* ---------- tables, breadcrumbs, pagination, nav tabs ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(20, 40, 58, 0.03); --bs-table-hover-bg: var(--pg-sea-soft); color: var(--pg-text); border-color: var(--pg-border); } :is(.pg,body.admin-glass main .pg-canvas.pg) .table thead th { color: var(--pg-muted); font-size: 0.82rem; font-weight: 600; border-bottom: 1px solid var(--pg-border-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .table-light, :is(.pg,body.admin-glass main .pg-canvas.pg) .table thead.table-light th { --bs-table-bg: rgba(20, 40, 58, 0.04); background: rgba(20, 40, 58, 0.04); } :is(.pg,body.admin-glass main .pg-canvas.pg) .table-responsive { border-radius: var(--pg-radius-sm); } :is(.pg,body.admin-glass main .pg-canvas.pg) .breadcrumb { background: transparent; font-size: 0.9rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .breadcrumb-item a { color: var(--pg-sea); text-decoration: none; } :is(.pg,body.admin-glass main .pg-canvas.pg) .breadcrumb-item.active { color: var(--pg-muted); } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-link { color: var(--pg-sea); border-color: var(--pg-border); background: var(--pg-glass-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-item.active .page-link { background: var(--pg-sea); border-color: var(--pg-sea); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .nav-tabs { border-bottom-color: var(--pg-border-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .nav-tabs .nav-link { color: var(--pg-muted); border: 0; border-bottom: 2px solid transparent; font-weight: 500; } :is(.pg,body.admin-glass main .pg-canvas.pg) .nav-tabs .nav-link.active { color: var(--pg-ink); background: transparent; border-bottom-color: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) .nav-pills .nav-link { color: var(--pg-ink); border-radius: 999px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .nav-pills .nav-link.active { background: var(--pg-ink); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .rounded-circle.bg-primary { background: var(--pg-sea) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .dropdown-menu { background: #fff; border: 1px solid var(--pg-border); border-radius: 14px; box-shadow: var(--pg-shadow-lift); padding: 0.4rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .dropdown-item { border-radius: 8px; color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .dropdown-item:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .dropdown-item:focus { background: var(--pg-sea-soft); color: var(--pg-ink); } /* ---------- CMS blocks (page builder output, live and in the canvas) ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) .block-text { color: inherit; } :is(.pg,body.admin-glass main .pg-canvas.pg) .iconbox-heading { color: var(--pg-ink); font-weight: 600; } :is(.pg,body.admin-glass main .pg-canvas.pg) .iconbox-link { color: var(--pg-sea); font-weight: 500; text-decoration: none; } :is(.pg,body.admin-glass main .pg-canvas.pg) .block-service-card .card { border: 1px solid var(--pg-border) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .block-gallery .gallery-item img { border-radius: var(--pg-radius-sm); box-shadow: var(--pg-shadow); } :is(.pg,body.admin-glass main .pg-canvas.pg) .gallery-caption { color: var(--pg-muted); } :is(.pg,body.admin-glass main .pg-canvas.pg) .block-social .social-link { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .block-social .social-link:hover { color: var(--pg-sea-deep); } :is(.pg,body.admin-glass main .pg-canvas.pg) .page-empty { color: var(--pg-muted); padding: 3rem 1rem; text-align: center; } /* ---------- "Added to cart" overlay ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal .modal-content { background: #fff; border-radius: 20px; } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal .modal-header { border-bottom: 0; padding: 1.4rem 1.5rem 0.25rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal .modal-title { color: var(--pg-ink); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal .modal-title .bi { color: var(--pg-good); font-size: 1.4rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal .modal-body { padding: 0.75rem 1.5rem 0.5rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal #cartModalProductImage { max-height: 150px; border-radius: 12px; border: 1px solid var(--pg-border); background: #fff; padding: 0.5rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal #cartModalProductName { color: var(--pg-ink); font-weight: 600; font-size: 1.05rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal .alert-light { background: var(--pg-sun-soft); border: 1px solid rgba(255, 193, 7, 0.45); color: var(--pg-ink); border-radius: 12px; } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal .modal-footer { border-top: 0; padding: 0.5rem 1.5rem 1.5rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal .btn-dark { background: var(--pg-sun); border-color: var(--pg-sun); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) #addToCartModal .btn-dark:hover { background: var(--pg-sun-deep); border-color: var(--pg-sun-deep); color: var(--pg-ink); } /* ---------- Full Preview bar ---------- */ .pg-preview-bar { position: sticky; top: 0; z-index: 1030; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; background: linear-gradient(135deg, var(--pg-sun) 0%, #ffb300 100%); color: var(--pg-ink); padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; box-shadow: 0 4px 16px rgba(20, 40, 58, 0.18); } .pg-preview-bar .btn { border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.85rem; } /* ---------- motion and phones ---------- */ @media (prefers-reduced-motion: reduce) { :is(.pg,body.admin-glass main .pg-canvas.pg) .service-card:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .btn:hover { transform: none; } :is(.pg,body.admin-glass main .pg-canvas.pg) .btn, :is(.pg,body.admin-glass main .pg-canvas.pg) .service-card { transition: none; } } @media (max-width: 767.98px) { :is(.pg,body.admin-glass main .pg-canvas.pg) .page-header { padding: 1.5rem 0 1.25rem; margin-bottom: 1.25rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-section { padding: 3rem 0; border-radius: 0 0 20px 20px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .stats-section { border-radius: 20px; margin: 0 0.75rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .card-body { padding: 1rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card { padding: 1.25rem; } } /* ============================================================================ Site chrome: every page (public, store and admin), both looks. Written with plain selectors heavy enough to beat hpm-theme.css, site.css and the layout's inline style block. ============================================================================ */ /* top bar */ :is(body,body.admin-glass main .pg-canvas.pg) .top-bar.bg-dark { background: var(--pg-navy) !important; border-bottom: 1px solid var(--pg-navy-border); font-size: 0.82rem; letter-spacing: 0.01em; } :is(body,body.admin-glass main .pg-canvas.pg) .top-bar a { color: rgba(255, 255, 255, 0.85) !important; } :is(body,body.admin-glass main .pg-canvas.pg) .top-bar a:hover { color: var(--pg-sun) !important; opacity: 1; } :is(body,body.admin-glass main .pg-canvas.pg) .top-bar .mx-2 { color: rgba(255, 255, 255, 0.35); } /* sticky header */ :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar.bg-white { background: var(--pg-glass-strong) !important; -webkit-backdrop-filter: var(--pg-blur); backdrop-filter: var(--pg-blur); border-bottom: 1px solid var(--pg-border); box-shadow: none !important; padding: 0.6rem 0; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top.scrolled .navbar.bg-white { box-shadow: 0 8px 24px rgba(20, 40, 58, 0.10) !important; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .brand-name { color: var(--pg-ink); font-weight: 700; letter-spacing: -0.01em; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .tagline-small { color: var(--pg-muted) !important; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-nav .nav-link { color: var(--pg-ink); font-weight: 500; padding: 0.5rem 0.9rem; border-radius: 999px; border-bottom: 0; transition: background-color .15s, color .15s; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-nav .nav-link:hover { color: var(--pg-ink); background: rgba(20, 40, 58, 0.06); } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-nav .nav-link.active { color: var(--pg-ink); background: var(--pg-sun); border-bottom: 0; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-nav .nav-link.wishlist-link, :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-nav .nav-link.cart-link { padding: 0.45rem 0.7rem; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-nav .nav-link .badge.bg-danger { background: var(--pg-clay) !important; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-nav .btn.btn-primary { border-radius: 999px; background: var(--pg-ink); border-color: var(--pg-ink); font-weight: 600; padding: 0.45rem 1rem; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-nav .btn.btn-primary:hover { background: var(--pg-sea); border-color: var(--pg-sea); } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-toggler { border-color: var(--pg-border-strong); border-radius: 10px; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem var(--pg-sun-soft); } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .dropdown-menu { background: #fff; border: 1px solid var(--pg-border); border-radius: 14px; box-shadow: var(--pg-shadow-lift); padding: 0.4rem; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .dropdown-item { border-radius: 8px; color: var(--pg-ink); font-size: 0.93rem; } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .dropdown-item:hover, body header.sticky-top .dropdown-item:focus { background: var(--pg-sea-soft); color: var(--pg-ink); } :is(body,body.admin-glass main .pg-canvas.pg) header.sticky-top .dropdown-divider { border-color: var(--pg-border); } @media (max-width: 991.98px) { body header.sticky-top .navbar-collapse { padding: 0.5rem 0 0.75rem; } body header.sticky-top .navbar-nav .nav-link { padding: 0.65rem 0.9rem; } body header.sticky-top .navbar-nav .nav-item.ms-lg-3 .nav-link { display: inline-flex; align-items: center; gap: 0.5rem; } } /* the admin dark body keeps a dark header, same shape */ body.admin-glass[data-theme="dark"] header.sticky-top .navbar.bg-white { background: rgba(16, 24, 34, 0.82) !important; border-bottom-color: rgba(255, 255, 255, 0.10); } body.admin-glass[data-theme="dark"] header.sticky-top .brand-name, body.admin-glass[data-theme="dark"] header.sticky-top .navbar-nav .nav-link { color: #e8edf2; } body.admin-glass[data-theme="dark"] header.sticky-top .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } body.admin-glass[data-theme="dark"] header.sticky-top .navbar-nav .nav-link.active { color: var(--pg-ink); } body.admin-glass[data-theme="dark"] header.sticky-top .tagline-small { color: #9aa7b4 !important; } body.admin-glass[data-theme="dark"] header.sticky-top .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); } body.admin-glass[data-theme="dark"] header.sticky-top .navbar-toggler-icon { filter: invert(1); } body.admin-glass[data-theme="dark"] header.sticky-top .dropdown-menu { background: rgba(22, 31, 44, 0.94); border-color: rgba(255, 255, 255, 0.12); } body.admin-glass[data-theme="dark"] header.sticky-top .dropdown-item { color: #e8edf2; } body.admin-glass[data-theme="dark"] header.sticky-top .dropdown-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } body.admin-glass[data-theme="dark"] header.sticky-top .dropdown-divider { border-color: rgba(255, 255, 255, 0.12); } /* search band under the header */ :is(body,body.admin-glass main .pg-canvas.pg) .site-search-band { background: transparent; border-bottom: 0; padding: 0.6rem 0 0.3rem; } :is(body,body.admin-glass main .pg-canvas.pg) .site-search-band .site-search .form-control { background: var(--pg-glass-strong); -webkit-backdrop-filter: var(--pg-blur); backdrop-filter: var(--pg-blur); border: 1px solid var(--pg-border-strong); border-right: 0; border-radius: 999px 0 0 999px; padding: 0.6rem 1.1rem; color: var(--pg-ink); } :is(body,body.admin-glass main .pg-canvas.pg) .site-search-band .site-search .form-control:focus { border-color: var(--pg-sea); box-shadow: 0 0 0 0.2rem rgba(26, 95, 122, 0.16); } :is(body,body.admin-glass main .pg-canvas.pg) .site-search-band .site-search .btn.btn-dark { border-radius: 0 999px 999px 0; background: var(--pg-ink); border-color: var(--pg-ink); padding: 0.6rem 1.1rem; } :is(body,body.admin-glass main .pg-canvas.pg) .site-search-band .site-search .btn.btn-dark:hover { background: var(--pg-sea); border-color: var(--pg-sea); } :is(body,body.admin-glass main .pg-canvas.pg) .site-search-band .site-search-suggest { background: #fff; border: 1px solid var(--pg-border); border-radius: 14px; overflow: hidden; box-shadow: var(--pg-shadow-lift); } :is(body,body.admin-glass main .pg-canvas.pg) .site-search-band .site-search-suggest .list-group-item { background: transparent; border-color: var(--pg-border); color: var(--pg-ink); } body.admin-glass[data-theme="dark"] .site-search-band .site-search .form-control { background: rgba(22, 31, 44, 0.9); color: #e8edf2; border-color: rgba(255, 255, 255, 0.14); } /* footer */ :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section.bg-dark { background: var(--pg-navy) !important; border-top: 1px solid var(--pg-navy-border); color: rgba(255, 255, 255, 0.82); } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section h5, body footer.footer-section h6 { color: var(--pg-sun) !important; font-weight: 600; letter-spacing: 0; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section h5 { font-size: 1.15rem; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section h6 { font-size: 0.95rem; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .text-light { color: rgba(255, 255, 255, 0.82) !important; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .text-muted { color: rgba(255, 255, 255, 0.55) !important; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .footer-links a { color: rgba(255, 255, 255, 0.72); } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .footer-links a:hover { color: var(--pg-sun); } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section a.text-light:hover { color: var(--pg-sun) !important; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .border.border-secondary.rounded { background: var(--pg-navy-glass); border-color: var(--pg-navy-border) !important; border-radius: 12px !important; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pg-navy-glass); border: 1px solid var(--pg-navy-border); color: #fff !important; margin-right: 0.5rem !important; transition: background-color .15s, color .15s; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .social-links a:hover { background: var(--pg-sun); color: var(--pg-ink) !important; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .social-links a .fs-5 { font-size: 1.05rem !important; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .form-control { background: var(--pg-navy-glass); border: 1px solid var(--pg-navy-border); color: #fff; border-radius: 999px; padding: 0.45rem 0.9rem; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .form-control::placeholder { color: rgba(255, 255, 255, 0.5); } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .form-control:focus { background: rgba(255, 255, 255, 0.1); border-color: var(--pg-sun); box-shadow: 0 0 0 0.2rem var(--pg-sun-soft); color: #fff; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .btn.btn-warning { border-radius: 999px; background: var(--pg-sun); border-color: var(--pg-sun); color: var(--pg-ink) !important; padding: 0.45rem 1rem; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .btn.btn-warning:hover { background: var(--pg-sun-deep); border-color: var(--pg-sun-deep); } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .d-flex.flex-wrap.gap-3 a { display: inline-flex; align-items: center; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--pg-navy-glass); border: 1px solid var(--pg-navy-border); font-size: 0.88rem; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .d-flex.flex-wrap.gap-3 a:hover { background: var(--pg-sun); color: var(--pg-ink) !important; border-color: var(--pg-sun); } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section hr.border-secondary { border-color: var(--pg-navy-border) !important; opacity: 1; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .btn-link.text-muted { color: rgba(255, 255, 255, 0.55) !important; } :is(body,body.admin-glass main .pg-canvas.pg) footer.footer-section .btn-link.text-muted:hover { color: var(--pg-sun) !important; } /* ---------- headings on dark panels stay white (contact info card, stats band, dark sections) ---------- */ :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card h6, :is(.pg,body.admin-glass main .pg-canvas.pg) .stats-section h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .stats-section h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .stats-section h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .stats-section h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .stats-section h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .stats-section h6, :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-section h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-section h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .hero-section h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-dark h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-dark h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-dark h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-dark h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-dark h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-dark h6, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-primary h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-primary h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-primary h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-primary h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-primary h5, :is(.pg,body.admin-glass main .pg-canvas.pg) .bg-primary h6, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section h3 { color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card p, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card li, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card a { color: rgba(255, 255, 255, 0.9); } :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-info-card hr { border-color: rgba(255, 255, 255, 0.25); } :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section .card h1, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section .card h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section .card h3, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section .card h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .contact-form-section .card h5 { color: var(--pg-ink); } /* ============================================================================ Phase 5 (2 Nov 2026): the store, cart, checkout, courier, payment and wishlist pages. Product photos sit on solid white; everything around them is glass on the page wash. The add-to-cart button is the brand yellow on every page (listing, featured, details, wishlist, compare). Store/Index carries 750 lines of inline CSS written for a slate body; these rules out-rank it. ============================================================================ */ /* category band */ :is(.pg,body.admin-glass main .pg-canvas.pg) .category-banner { /* no backdrop-filter here: a filter on this band would make the sub-menu (position: fixed on phones) position itself inside the band and sit behind the content below it (owner bug report, 2 Nov evening) */ background: #fff !important; border-bottom: 1px solid var(--pg-border); box-shadow: none; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-link { color: var(--pg-ink); border-radius: 999px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-link i { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-item:hover .category-link { color: var(--pg-ink); background: var(--pg-sea-soft); } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-item.active .category-link { color: var(--pg-ink); background: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-item.active .category-link i { color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-count.badge.bg-light { background: rgba(20, 40, 58, 0.08) !important; color: var(--pg-ink) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-item.active .category-count.badge.bg-light { background: rgba(20, 40, 58, 0.16) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .subcategory-dropdown { background: #fff; border: 1px solid var(--pg-border); border-radius: 14px; box-shadow: var(--pg-shadow-lift); } :is(.pg,body.admin-glass main .pg-canvas.pg) .subcategory-item { color: var(--pg-ink); border-radius: 8px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .subcategory-item i { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .subcategory-item:hover { background: var(--pg-sea-soft); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .subcategory-item.active { background: var(--pg-sun); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .subcategory-all { color: var(--pg-ink); font-weight: 600; } :is(.pg,body.admin-glass main .pg-canvas.pg) .subcategory-all i { color: var(--pg-sun-deep); } :is(.pg,body.admin-glass main .pg-canvas.pg) .main-category-link { color: var(--pg-ink); border-radius: 8px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .main-category-link i { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .main-category-link:hover { background: var(--pg-sea-soft); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .main-category-link.active { background: var(--pg-ink); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .main-category-link.active i { color: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-overlay { background: rgba(20, 40, 58, 0.45); } /* phones: the sub-menu is position:fixed INSIDE .category-banner, and the banner is a stacking context (position: relative; z-index: 100 in the store CSS), so the menu could never rise above the page overlay the script appends to at z-index 1040: it showed, but every tap hit the overlay. While a menu is open the banner is lifted above the overlay; closed, it goes back under the sticky header (owner report, 2 Nov evening). */ @media (max-width: 991.98px) { :is(.pg,body.admin-glass main .pg-canvas.pg) .category-banner:has(.category-item.show) { z-index: 1045; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-item.show .subcategory-dropdown { z-index: 1050; pointer-events: auto; } } /* category band on phones: equal tiles in a tidy grid instead of a wrapped row of odd widths; names may take two lines; the active tile is a rounded square, not a circle; no stuck hover tint on touch screens */ @media (max-width: 991.98px) { :is(.pg,body.admin-glass main .pg-canvas.pg) .category-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; padding: 8px 10px 10px; overflow: visible; justify-content: stretch; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-item { width: auto; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-link { width: 100%; border-radius: 12px; padding: 8px 4px 6px; gap: 3px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-link span:not(.badge) { white-space: normal; max-width: none; font-size: 0.62rem; line-height: 1.15; max-height: 2.3em; overflow: hidden; text-align: center; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-link .category-count.badge { font-size: 0.62rem; padding: 0.2em 0.5em; margin-left: 0 !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-link i:first-child { font-size: 1.15rem; } } @media (hover: none) { :is(.pg,body.admin-glass main .pg-canvas.pg) .category-item:hover .category-link { background: transparent; color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-item.active:hover .category-link { background: var(--pg-sun); } } /* delivery promise strip and the compare bar stay navy (brand bands, data-a11y-dark) */ :is(.pg,body.admin-glass main .pg-canvas.pg) .store-delivery-strip { background: var(--pg-navy); color: rgba(255, 255, 255, 0.85); } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-delivery-strip a { color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-delivery-strip a:hover { color: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-delivery-strip .strip-sep { color: rgba(255, 255, 255, 0.35); } :is(.pg,body.admin-glass main .pg-canvas.pg) .compare-bar { background: var(--pg-navy); box-shadow: 0 -8px 24px rgba(20, 40, 58, 0.25); } /* featured and category picks */ :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-products-section, :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-section { background: var(--pg-glass); -webkit-backdrop-filter: var(--pg-blur); backdrop-filter: var(--pg-blur); border: 1px solid var(--pg-border); border-radius: var(--pg-radius); box-shadow: var(--pg-shadow); } :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-products-section h2, :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-section h2 { color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-card, :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-card, :is(.pg,body.admin-glass main .pg-canvas.pg) .product-card { background: #fff; border: 1px solid var(--pg-border); border-radius: var(--pg-radius); box-shadow: var(--pg-shadow) !important; -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform .15s, box-shadow .15s; } :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-card:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-card:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .product-card:hover { transform: translateY(-3px); box-shadow: var(--pg-shadow-lift) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-image-container, :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-image-container, :is(.pg,body.admin-glass main .pg-canvas.pg) .product-image-container { background: #fff; border-bottom: 1px solid var(--pg-border); } :is(.pg,body.admin-glass main .pg-canvas.pg) .product-image-container .placeholder-image.bg-light { background: var(--pg-sea-soft) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-badge, :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-badge, :is(.pg,body.admin-glass main .pg-canvas.pg) .sale-badge { border-radius: 999px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-badge.bg-info { background: var(--pg-sea) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .carousel-control-prev, :is(.pg,body.admin-glass main .pg-canvas.pg) .carousel-control-next { background: var(--pg-ink); border-radius: 50%; opacity: .85; } :is(.pg,body.admin-glass main .pg-canvas.pg) .carousel-control-prev:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .carousel-control-next:hover { background: var(--pg-ink); opacity: 1; } :is(.pg,body.admin-glass main .pg-canvas.pg) .carousel-indicators button { background-color: rgba(20, 40, 58, 0.25); border: 2px solid #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .carousel-indicators button.active { background-color: var(--pg-sun); } :is(.pg,body.admin-glass main .pg-canvas.pg) [data-card-link] { cursor: pointer; } :is(.pg,body.admin-glass main .pg-canvas.pg) [data-card-link]:hover .card-title { color: var(--pg-sea); } /* product card text */ :is(.pg,body.admin-glass main .pg-canvas.pg) .product-card .card-title, :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-card .card-title, :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-card .card-title { color: var(--pg-ink); font-weight: 600; font-size: 1rem; } :is(.pg,body.admin-glass main .pg-canvas.pg) .product-card h4.text-primary, :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-card h4.text-primary, :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-card h4.text-primary, :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-card .text-primary.fw-bold { color: var(--pg-sea) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .product-card h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .featured-card h4, :is(.pg,body.admin-glass main .pg-canvas.pg) .category-featured-card h4 { font-size: 1.35rem; letter-spacing: -0.01em; } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-count { color: var(--pg-muted); } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-count strong { color: var(--pg-ink); } /* add to cart = brand yellow everywhere; view details = ink outline */ :is(.pg,body.admin-glass main .pg-canvas.pg) form[action$="/Cart/AddToCart"] .btn-dark, :is(.pg,body.admin-glass main .pg-canvas.pg) form[action$="/Cart/AddToCart"] .btn-primary { background: var(--pg-sun); border-color: var(--pg-sun); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) form[action$="/Cart/AddToCart"] .btn-dark:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) form[action$="/Cart/AddToCart"] .btn-dark:focus, :is(.pg,body.admin-glass main .pg-canvas.pg) form[action$="/Cart/AddToCart"] .btn-primary:hover { background: var(--pg-sun-deep); border-color: var(--pg-sun-deep); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .wishlist-heart, :is(.pg,body.admin-glass main .pg-canvas.pg) .compare-toggle { background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 8px rgba(20, 40, 58, 0.15); color: var(--pg-muted); } :is(.pg,body.admin-glass main .pg-canvas.pg) .wishlist-heart:hover { color: var(--pg-bad); } :is(.pg,body.admin-glass main .pg-canvas.pg) .compare-toggle:hover { color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .compare-toggle.selected { background: var(--pg-sea); color: #fff; } /* filters */ :is(.pg,body.admin-glass main .pg-canvas.pg) .facet-link { color: var(--pg-ink); border-radius: 8px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .facet-link:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .facet-link:focus-visible { background: var(--pg-sea-soft); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .facet-link.active { background: var(--pg-ink); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .facet-count { color: var(--pg-muted); } :is(.pg,body.admin-glass main .pg-canvas.pg) .facet-link.active .facet-count { color: rgba(255, 255, 255, 0.7); } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-facet .form-label { color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-chip { background: var(--pg-glass-strong); color: var(--pg-ink); border: 1px solid var(--pg-border-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-chip:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .store-chip:focus-visible { background: var(--pg-ink); color: #fff; border-color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-chip-clear { background: transparent; color: var(--pg-sea); border-color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .store-chip-clear:hover { background: var(--pg-sea); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .alert-warning { color: #664d03; background: rgba(255, 193, 7, 0.16); border-color: rgba(255, 193, 7, 0.4); } :is(.pg,body.admin-glass main .pg-canvas.pg) #load-more-btn.btn-light { background: var(--pg-glass-strong); border: 1px solid var(--pg-border-strong); color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) #load-more-btn.btn-light:hover { background: var(--pg-ink); color: #fff; border-color: var(--pg-ink); } :is(.pg,body.admin-glass main .pg-canvas.pg) .pagination .page-link { color: var(--pg-ink); background: var(--pg-glass-strong); border-color: var(--pg-border); } :is(.pg,body.admin-glass main .pg-canvas.pg) .pagination .page-link:hover { background: var(--pg-sea-soft); color: var(--pg-ink); border-color: var(--pg-border-strong); } :is(.pg,body.admin-glass main .pg-canvas.pg) .pagination .page-item.active .page-link { background: var(--pg-ink); border-color: var(--pg-ink); color: #fff; } :is(.pg,body.admin-glass main .pg-canvas.pg) .pagination .page-item.disabled .page-link { background: transparent; color: var(--pg-muted); border-color: var(--pg-border); } /* product page */ :is(.pg,body.admin-glass main .pg-canvas.pg) .product-thumbs .product-thumb { background: #fff; border-color: var(--pg-border); border-radius: 8px; } :is(.pg,body.admin-glass main .pg-canvas.pg) .product-thumbs .product-thumb.active, :is(.pg,body.admin-glass main .pg-canvas.pg) .product-thumbs .product-thumb:focus { border-color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .sale-price-display.bg-light { background: var(--pg-sun-soft) !important; border-radius: var(--pg-radius-sm) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .table-info th { background: var(--pg-sea) !important; color: #fff; border-color: var(--pg-sea); } :is(.pg,body.admin-glass main .pg-canvas.pg) .star-rating-input input[type="radio"]:focus-visible + label { outline-color: var(--pg-sun-deep); } :is(.pg,body.admin-glass main .pg-canvas.pg) .review-item { background: var(--pg-glass-strong); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-sm); } :is(.pg,body.admin-glass main .pg-canvas.pg) .hover-card:hover { transform: translateY(-4px); box-shadow: var(--pg-shadow-lift); } /* cart, checkout, courier, payment */ :is(.pg,body.admin-glass main .pg-canvas.pg) .cart-item:hover { background: rgba(20, 40, 58, 0.03); } :is(.pg,body.admin-glass main .pg-canvas.pg) .cart-item { border-color: var(--pg-border) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .fulfilment-option > div { background: var(--pg-glass-strong); border-color: var(--pg-border-strong) !important; border-radius: var(--pg-radius-sm) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .fulfilment-option.selected > div { border-color: var(--pg-good) !important; background: rgba(31, 157, 97, 0.08); } :is(.pg,body.admin-glass main .pg-canvas.pg) .fulfilment-radio:focus-visible + div { outline-color: var(--pg-sun-deep); } :is(.pg,body.admin-glass main .pg-canvas.pg) .courier-option, :is(.pg,body.admin-glass main .pg-canvas.pg) .payment-option { background: var(--pg-glass-strong); border-color: var(--pg-border-strong) !important; border-radius: var(--pg-radius-sm) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .courier-option:hover, :is(.pg,body.admin-glass main .pg-canvas.pg) .payment-option:not(.opacity-50):hover { background: #fff; box-shadow: var(--pg-shadow); } :is(.pg,body.admin-glass main .pg-canvas.pg) .courier-option.border-primary, :is(.pg,body.admin-glass main .pg-canvas.pg) .payment-option.border-primary { background: var(--pg-sea-soft); border-color: var(--pg-sea) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .split-courier-option:hover { background: var(--pg-sea-soft) !important; } :is(.pg,body.admin-glass main .pg-canvas.pg) .alert-light.border { background: var(--pg-glass-strong); border-color: var(--pg-border) !important; color: var(--pg-text); } /* wishlist */ :is(.pg,body.admin-glass main .pg-canvas.pg) .wishlist-item .product-card { background: #fff; } /* mobile bottom contact bar (phones): navy like the top bar and footer, white icons; the page link colour on body.pg used to out-rank the bar's own white and made the icons unreadable (owner report, 2 Nov evening) */ :is(body,body.admin-glass main .pg-canvas.pg) .mobile-contact-bar { background: var(--pg-navy); border-top: 1px solid var(--pg-navy-border); box-shadow: 0 -6px 20px rgba(20, 40, 58, 0.25); } :is(body,body.admin-glass main .pg-canvas.pg) .mobile-contact-bar .mobile-contact-item { color: #fff; } :is(body,body.admin-glass main .pg-canvas.pg) .mobile-contact-bar .mobile-contact-item i { color: var(--pg-sun); } :is(body,body.admin-glass main .pg-canvas.pg) .mobile-contact-bar .mobile-contact-item span { color: rgba(255, 255, 255, 0.85); font-size: 0.6rem; } :is(body,body.admin-glass main .pg-canvas.pg) .mobile-contact-bar .mobile-contact-item:hover, :is(body,body.admin-glass main .pg-canvas.pg) .mobile-contact-bar .mobile-contact-item:focus, :is(body,body.admin-glass main .pg-canvas.pg) .mobile-contact-bar .mobile-contact-item:hover span, :is(body,body.admin-glass main .pg-canvas.pg) .mobile-contact-bar .mobile-contact-item:focus span { color: var(--pg-sun); } :is(body,body.admin-glass main .pg-canvas.pg) .mobile-contact-bar .mobile-contact-item:focus-visible { outline: 3px solid var(--pg-sun); outline-offset: -3px; border-radius: 8px; }