/*
Theme Name: NestAura
Theme URI: https://nestaura.com.au
Author: NestAura
Author URI: https://nestaura.com.au
Description: Full NestAura eCommerce theme — smart home & lifestyle. WooCommerce + AliDropship compatible.
Version: 9.8
Requires at least: 6.0
Requires PHP: 8.1
License: Private
License URI: https://nestaura.com.au
Text Domain: nestaura
Tags: e-commerce, woocommerce, custom
*/
/* ============================================================
NestAura — Full Stylesheet
Primary: #0e335d | Accent: #f4a724 | BG: #f8f9fb | Text: #1a1a2e
============================================================ */
/* ── Custom Properties ─────────────────────────────────────── */
:root {
--navy: #0e335d;
--navy-dk: #09254a;
--gold: #f4a724;
--gold-dk: #d9911a;
--bg: #f8f9fb;
--text: #1a1a2e;
--text-m: #4a4a6a;
--text-l: #8888aa;
--muted: #8888aa;
--white: #ffffff;
--border: #e8eaf0;
--success: #22c55e;
--danger: #ef4444;
--warn: #f59e0b;
--r-card: 12px;
--r-btn: 8px;
--r-pill: 50px;
--shadow-sm: 0 2px 8px rgba(14,51,93,.06);
--shadow-md: 0 4px 20px rgba(14,51,93,.10);
--shadow-lg: 0 8px 40px rgba(14,51,93,.15);
--transition: all .3s ease;
}
/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
body, .site { overflow-x: hidden; }
a { color: var(--navy); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--gold); }
ul { list-style: none; padding: 0; margin: 0; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; color: var(--text); }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
/* ── Top Bar ────────────────────────────────────────────────── */
.top-bar { background: var(--navy); color: #c8d8f0; font-size: .8rem; padding: .4rem 0; text-align: center; letter-spacing: .02em; }
.top-bar a { color: var(--gold); }
/* ── Navbar ─────────────────────────────────────────────────── */
.navbar-main { background: var(--navy); padding: .75rem 0; position: sticky; top: 0; z-index: 1050; box-shadow: 0 2px 20px rgba(0,0,0,.25); transition: padding .3s ease; }
.navbar-main.scrolled { padding: .4rem 0; }
.brand-logo { font-size: 1.6rem; font-weight: 700; color: var(--white) !important; letter-spacing: -.02em; }
.brand-logo span { color: var(--gold); }
/* Search bar */
.search-form { position: relative; width: 100%; max-width: 420px; }
.search-input { width: 100%; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--r-pill); padding: .5rem 2.8rem .5rem 1.2rem; color: var(--white); font-size: .9rem; outline: none; transition: var(--transition); }
.search-input::placeholder { color: rgba(255,255,255,.5); }
.search-input:focus { background: rgba(255,255,255,.2); border-color: var(--gold); }
.search-btn { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,.7); font-size: .9rem; padding: .2rem; transition: var(--transition); }
.search-btn:hover { color: var(--gold); }
/* Nav icons */
.nav-icons { display: flex; align-items: center; gap: .5rem; }
.nav-icon-btn { position: relative; background: rgba(255,255,255,.08); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1rem; transition: var(--transition); text-decoration: none; }
.nav-icon-btn:hover { background: rgba(244,167,36,.2); color: var(--gold); }
.badge-count { position: absolute; top: -4px; right: -4px; background: var(--gold); color: var(--navy); font-size: .62rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--navy); }
/* Mega Menu */
.mega-menu-wrapper { border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-cats { display: flex; align-items: center; gap: .1rem; overflow-x: auto; }
.nav-cat-item { position: relative; }
.nav-cat-link { display: flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.85); padding: .55rem .75rem; border-radius: var(--r-btn); font-size: .83rem; font-weight: 500; white-space: nowrap; transition: var(--transition); }
.nav-cat-link:hover, .nav-cat-link.active { background: rgba(255,255,255,.1); color: var(--gold); }
.nav-cat-link i { font-size: .8rem; }
/* Mobile hamburger */
.hamburger { background: none; border: none; color: var(--white); font-size: 1.4rem; }
/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary-na { background: var(--navy); color: var(--white); border: 2px solid var(--navy); padding: .6rem 1.5rem; border-radius: var(--r-btn); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; transition: var(--transition); cursor: pointer; }
.btn-primary-na:hover { background: var(--navy-dk); border-color: var(--navy-dk); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(14,51,93,.25); color: var(--white); }
.btn-gold { background: var(--gold); color: var(--navy); border: 2px solid var(--gold); padding: .6rem 1.5rem; border-radius: var(--r-btn); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; transition: var(--transition); cursor: pointer; text-decoration: none; }
.btn-gold:hover { background: var(--gold-dk); border-color: var(--gold-dk); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(244,167,36,.35); color: var(--navy); }
.btn-outline-na { background: transparent; color: var(--navy); border: 2px solid var(--navy); padding: .6rem 1.5rem; border-radius: var(--r-btn); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; transition: var(--transition); cursor: pointer; text-decoration: none; }
.btn-outline-na:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.btn-outline-gold { background: transparent; color: var(--gold-dk); border: 2px solid var(--gold); padding: .55rem 1.4rem; border-radius: var(--r-btn); font-weight: 600; font-size: .875rem; display: inline-flex; align-items: center; gap: .4rem; transition: var(--transition); cursor: pointer; text-decoration: none; }
.btn-outline-gold:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); }
.btn-lg { padding: .85rem 2.2rem; font-size: 1rem; }
.btn-sm { padding: .4rem 1rem; font-size: .8rem; }
.btn-full { width: 100%; justify-content: center; }
/* ── Section Utilities ──────────────────────────────────────── */
.section-pad { padding: 5rem 0; }
.section-pad-sm { padding: 3rem 0; }
.section-title { font-size: 2rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.section-subtitle { color: var(--text-m); font-size: 1rem; margin-bottom: 2.5rem; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header .divider { width: 50px; height: 3px; background: linear-gradient(90deg, var(--navy), var(--gold)); border-radius: 2px; margin: .75rem auto 0; }
/* ── Hero Slider ────────────────────────────────────────────── */
/* Restored to v4.6 exact state — no overrides, no height:auto conflict.
Height (580px) is set by the CLS fix block further below in this file. */
.hero-slider { position: relative; overflow: hidden; }
.hero-slider-track { position: relative; display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.hero-slide { min-width: 100%; min-height: 580px; background-color: #0e335d; background-size: cover; background-position: center; display: flex; align-items: center; position: relative; flex-shrink: 0; }
.hero-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(14,51,93,.85) 0%, rgba(14,51,93,.5) 60%, transparent 100%); }
.hero-content { position: relative; z-index: 2; color: var(--white); }
.hero-eyebrow { display: inline-block; background: rgba(244,167,36,.2); border: 1px solid rgba(244,167,36,.4); color: var(--gold); font-size: .8rem; font-weight: 600; padding: .3rem .9rem; border-radius: var(--r-pill); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; }
.hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: 1rem; line-height: 1.1; color: var(--white); }
.hero-title span { color: var(--gold); }
.hero-subtitle { font-size: 1.1rem; color: rgba(255,255,255,.85); margin-bottom: 2rem; max-width: 500px; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3); color: var(--white); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; cursor: pointer; transition: var(--transition); backdrop-filter: blur(4px); }
.slider-prev { left: 1.5rem; }
.slider-next { right: 1.5rem; }
.slider-prev:hover, .slider-next:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.slider-dots { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; z-index: 10; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; transition: var(--transition); }
.slider-dot.active { background: var(--gold); width: 24px; border-radius: 4px; }
/* ── Trust Badges ───────────────────────────────────────────── */
.trust-bar { background: var(--white); padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.trust-item { display: flex; align-items: center; gap: .75rem; }
.trust-icon { width: 44px; height: 44px; background: rgba(14,51,93,.06); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 1.1rem; flex-shrink: 0; }
.trust-text strong { display: block; font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.trust-text span { font-size: .75rem; color: var(--text-m); }
/* ── Category Cards ─────────────────────────────────────────── */
.category-card { background: var(--white); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); cursor: pointer; border: 2px solid transparent; text-align: center; }
.category-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--gold); }
.category-card-img { height: 120px; overflow: hidden; position: relative; }
.category-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.category-card:hover .category-card-img img { transform: scale(1.08); }
.category-card-body { padding: 1rem .75rem; }
.category-card-icon { width: 44px; height: 44px; background: rgba(14,51,93,.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 1rem; margin: -30px auto .6rem; position: relative; z-index: 2; border: 3px solid var(--white); transition: var(--transition); }
.category-card:hover .category-card-icon { background: var(--gold); color: var(--navy); }
.category-card-name { font-size: .85rem; font-weight: 600; color: var(--text); }
.cat-img-placeholder { background: linear-gradient(135deg, rgba(14,51,93,.12) 0%, rgba(14,51,93,.24) 100%); display: flex; align-items: center; justify-content: center; }
.cat-img-placeholder > i { font-size: 2.5rem; color: var(--navy); opacity: .3; }
/* ── Product Cards ──────────────────────────────────────────── */
.product-card { background: var(--white); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); border: 1.5px solid var(--border); display: flex; flex-direction: column; height: 100%; }
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: transparent; }
.product-img-wrap { position: relative; overflow: hidden; background: #f0f2f7; aspect-ratio: 1/1; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-img-wrap img { transform: scale(1.06); }
.product-badges { position: absolute; top: .6rem; left: .6rem; display: flex; flex-direction: column; gap: .3rem; z-index: 2; }
.badge-sale { background: var(--danger); color: var(--white); font-size: .65rem; font-weight: 700; padding: .2rem .5rem; border-radius: 4px; text-transform: uppercase; }
.badge-new { background: var(--success); color: var(--white); font-size: .65rem; font-weight: 700; padding: .2rem .5rem; border-radius: 4px; text-transform: uppercase; }
.badge-best { background: var(--gold); color: var(--navy); font-size: .65rem; font-weight: 700; padding: .2rem .5rem; border-radius: 4px; text-transform: uppercase; }
.product-actions { position: absolute; top: .6rem; right: .6rem; display: flex; flex-direction: column; gap: .35rem; opacity: 0; transform: translateX(8px); transition: var(--transition); z-index: 2; }
.product-card:hover .product-actions { opacity: 1; transform: translateX(0); }
.action-btn { width: 34px; height: 34px; background: var(--white); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-m); font-size: .85rem; box-shadow: var(--shadow-md); transition: var(--transition); cursor: pointer; }
.action-btn:hover { background: var(--gold); color: var(--navy); }
.product-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.product-category { font-size: .7rem; font-weight: 600; color: var(--gold-dk); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.product-name { font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: .5rem; }
.product-name a { color: inherit; }
.product-name a:hover { color: var(--navy); }
.product-rating { display: flex; align-items: center; gap: .3rem; margin-bottom: .6rem; }
.product-rating .stars { color: #f59e0b; font-size: .75rem; }
.product-rating .count { font-size: .75rem; color: var(--text-l); }
.product-prices { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; margin-bottom: .85rem; margin-top: auto; }
.product-prices del { text-decoration: line-through !important; display: inline-flex; align-items: center; opacity: 1 !important; }
.product-prices del .woocommerce-Price-amount,
.product-prices del bdi { font-size: .78rem !important; font-weight: 400 !important; color: var(--text-l) !important; }
.product-prices ins { text-decoration: none !important; display: inline-flex; align-items: center; }
.product-prices ins .woocommerce-Price-amount,
.product-prices ins bdi { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--danger) !important; }
.product-prices > .woocommerce-Price-amount { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--navy) !important; }
.product-prices > .woocommerce-Price-amount bdi { font-size: inherit; color: inherit; }
.price-pct-off { display: inline-block; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 700; padding: .12rem .4rem; border-radius: 4px; letter-spacing: .03em; }
.price-from { font-size: .72rem; font-weight: 600; color: var(--text-m); text-transform: uppercase; letter-spacing: .04em; margin-right: .15rem; }
.price-current { font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.price-old { font-size: .78rem; color: var(--text-l); text-decoration: line-through; }
.price-save { font-size: .72rem; font-weight: 600; color: var(--success); }
.btn-add-cart { width: 100%; background: var(--navy); color: var(--white); border: none; padding: .6rem; border-radius: 8px; font-weight: 600; font-size: .85rem; display: flex; align-items: center; justify-content: center; gap: .4rem; transition: var(--transition); cursor: pointer; }
.btn-add-cart:hover { background: var(--gold); color: var(--navy); }
/* ── Flash Sale Banner ──────────────────────────────────────── */
.flash-sale-banner { background: linear-gradient(135deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); color: var(--white); padding: 3rem 0; text-align: center; position: relative; overflow: hidden; }
.flash-sale-badge { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); padding: .3rem .9rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; letter-spacing: .06em; margin-bottom: .75rem; }
.flash-sale-title { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.countdown-timer { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.countdown-unit { text-align: center; }
.countdown-num { background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); border-radius: 10px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.countdown-label { font-size: .65rem; letter-spacing: .08em; opacity: .75; margin-top: .25rem; text-transform: uppercase; }
.countdown-sep { font-size: 1.5rem; font-weight: 700; opacity: .6; margin-top: -.8rem; }
/* ── Why NestAura ───────────────────────────────────────────── */
.why-item { text-align: center; background: var(--white); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm); border: 1.5px solid var(--border); transition: var(--transition); }
.why-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: transparent; }
.why-img { height: 110px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wi-quality .why-img { background: linear-gradient(135deg, #0e335d 0%, #1e6aaf 100%); }
.wi-delivery .why-img { background: linear-gradient(135deg, #b8650c 0%, #f4a724 100%); }
.wi-returns .why-img { background: linear-gradient(135deg, #0d7a5f 0%, #22c55e 100%); }
.wi-support .why-img { background: linear-gradient(135deg, #5b2d9e 0%, #7c3aed 100%); }
.why-icon { width: 68px; height: 68px; background: rgba(255,255,255,.18); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.9rem; border: 2px solid rgba(255,255,255,.3); transition: var(--transition); }
.why-item:hover .why-icon { background: rgba(255,255,255,.3); transform: scale(1.08); }
.why-body { padding: 1.25rem 1.1rem; }
.why-item h5 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; color: var(--text); }
.why-item p { font-size: .82rem; color: var(--text-m); margin: 0; }
/* ── Reviews ────────────────────────────────────────────────── */
.review-card { background: var(--white); border-radius: var(--r-card); padding: 1.8rem; box-shadow: var(--shadow-sm); border: 1.5px solid var(--border); transition: var(--transition); }
.review-card:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--navy) 0%, var(--gold) 100%); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.review-stars { color: #f59e0b; font-size: .85rem; margin-bottom: .5rem; }
.review-body { font-size: .9rem; color: var(--text-m); line-height: 1.6; font-style: italic; }
.verified-badge { background: rgba(34,197,94,.1); color: var(--success); font-size: .7rem; font-weight: 600; padding: .15rem .5rem; border-radius: 4px; }
/* ── Newsletter ─────────────────────────────────────────────── */
.newsletter-section { background: linear-gradient(135deg, var(--navy) 0%, #1a4a8a 100%); color: var(--white); padding: 5rem 0; position: relative; overflow: hidden; }
.newsletter-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%, rgba(244,167,36,.1) 0%, transparent 60%); }
.newsletter-form { display: flex; gap: .5rem; max-width: 480px; margin: 2rem auto 0; }
.newsletter-input { flex: 1; padding: .75rem 1.2rem; border-radius: var(--r-btn); border: 1.5px solid rgba(255,255,255,.2); font-size: .9rem; outline: none; background: rgba(255,255,255,.15); color: var(--white); }
.newsletter-input::placeholder { color: rgba(255,255,255,.5); }
.newsletter-input:focus { background: rgba(255,255,255,.2); border-color: var(--gold); }
/* ── Footer ─────────────────────────────────────────────────── */
.footer-main { background: #0a2540; color: #b0c4de; padding: 4rem 0 0; }
.footer-brand .brand-desc { font-size: .85rem; line-height: 1.7; margin: .8rem 0 1.2rem; color: #8aa8c8; }
.footer-heading { font-size: .75rem; font-weight: 700; color: var(--white); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-links li { margin-bottom: .4rem; }
.footer-links a { font-size: .85rem; color: #8aa8c8; transition: var(--transition); }
.footer-links a:hover { color: var(--gold); padding-left: .3rem; }
.footer-social { display: flex; gap: .6rem; margin-top: .8rem; }
.social-btn { width: 38px; height: 38px; background: rgba(255,255,255,.07); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #8aa8c8; font-size: .9rem; transition: var(--transition); }
.social-btn:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding: 1.5rem 0; margin-top: 3rem; text-align: center; font-size: .8rem; color: #5a7a9a; }
.payment-icons { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; flex-wrap: wrap; }
.payment-icon { background: rgba(255,255,255,.08); border-radius: 6px; padding: .3rem .7rem; font-size: .75rem; font-weight: 600; color: #8aa8c8; }
/* ── Shop Sidebar ───────────────────────────────────────────── */
.shop-wrap { padding-top: 2rem; padding-bottom: 3rem; }
.shop-sidebar { position: sticky; top: 100px; }
.filter-card { background: var(--white); border-radius: var(--r-card); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); border: 1.5px solid var(--border); margin-bottom: .85rem; }
.filter-title { font-size: .72rem; font-weight: 700; color: var(--text); margin-bottom: .85rem; padding-bottom: .5rem; border-bottom: 1.5px solid var(--border); text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; }
.filter-title i { color: var(--navy); }
/* Search */
.sidebar-search-wrap { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--r-btn); overflow: hidden; transition: border-color .2s; }
.sidebar-search-wrap:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(14,51,93,.07); }
.sidebar-search-input { flex: 1; border: none; outline: none; padding: .5rem .75rem; font-size: .85rem; color: var(--text); background: transparent; min-width: 0; }
.sidebar-search-btn { background: var(--navy); border: none; color: #fff; padding: .5rem .85rem; cursor: pointer; font-size: .85rem; transition: background .2s; flex-shrink: 0; }
.sidebar-search-btn:hover { background: var(--gold); color: var(--navy); }
/* Category List */
.sidebar-cat-list { list-style: none; padding: 0; margin: 0; }
.sidebar-cat-item { margin-bottom: .15rem; }
.sidebar-cat-item a { display: flex; align-items: center; justify-content: space-between; padding: .42rem .6rem; text-decoration: none; color: var(--text-m); font-size: .84rem; border-radius: 7px; transition: background .15s, color .15s; gap: .4rem; }
.sidebar-cat-item a:hover { background: #f0f4f8; color: var(--navy); }
.sidebar-cat-item.active a { background: rgba(14,51,93,.08); color: var(--navy); font-weight: 700; }
.sidebar-cat-name { flex: 1; }
.sidebar-cat-count { background: #eff3f8; color: var(--text-m); font-size: .7rem; font-weight: 700; padding: .12rem .42rem; border-radius: 20px; min-width: 22px; text-align: center; flex-shrink: 0; }
.sidebar-cat-item.active .sidebar-cat-count { background: var(--navy); color: #fff; }
/* Price Range */
.price-display { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.price-val { font-size: .9rem; font-weight: 700; color: var(--navy); }
.price-sep { color: var(--text-l); font-size: .8rem; }
.price-sliders { display: flex; flex-direction: column; gap: .55rem; }
.price-range-slider { width: 100%; accent-color: var(--navy); cursor: pointer; height: 4px; }
.sidebar-apply-btn { display: block; width: 100%; background: var(--navy); color: #fff; border: none; border-radius: var(--r-btn); padding: .52rem 1rem; font-size: .83rem; font-weight: 700; cursor: pointer; transition: background .2s; text-align: center; }
.sidebar-apply-btn:hover { background: var(--gold); color: var(--navy); }
/* Sale Toggle */
.sidebar-toggle { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 8px; cursor: pointer; border: 1.5px solid var(--border); transition: border-color .15s, background .15s; }
.sidebar-toggle:hover { border-color: var(--navy); background: #f8fafc; }
.sidebar-toggle--on { border-color: var(--danger); background: #fef2f2; }
.sidebar-toggle input[type="checkbox"] { accent-color: var(--danger); width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-toggle-icon { color: var(--danger); font-size: .9rem; }
.sidebar-toggle-label { font-size: .85rem; font-weight: 600; color: var(--text); }
/* Mini Products Widget */
.sidebar-mini-products { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.sidebar-mini-product-link { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; padding: .3rem .25rem; border-radius: 8px; transition: background .15s; }
.sidebar-mini-product-link:hover { background: #f5f7fa; }
.sidebar-mini-img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 7px; overflow: hidden; background: #f0f2f7; border: 1.5px solid var(--border); }
.sidebar-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-mini-info { flex: 1; min-width: 0; }
.sidebar-mini-name { font-size: .78rem; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: .18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-mini-price { font-size: .8rem; font-weight: 700; color: var(--navy); }
.sidebar-mini-price .woocommerce-Price-amount { font-size: inherit; }
.sidebar-view-all { display: block; text-align: center; font-size: .78rem; font-weight: 700; color: var(--navy); text-decoration: none; margin-top: .8rem; padding: .42rem; border: 1.5px dashed var(--border); border-radius: 7px; transition: border-color .15s, color .15s; }
.sidebar-view-all:hover { border-color: var(--navy); color: var(--gold-dk); }
/* Toolbar */
.shop-toolbar { background: var(--white); border-radius: var(--r-card); padding: .85rem 1.2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; box-shadow: var(--shadow-sm); border: 1.5px solid var(--border); margin-bottom: 1.5rem; }
.results-count { font-size: .85rem; color: var(--text-m); }
.sort-select { padding: .4rem .9rem; border: 1.5px solid var(--border); border-radius: var(--r-btn); font-size: .85rem; color: var(--text); background: var(--white); cursor: pointer; outline: none; }
.products-grid { --bs-gutter-x: .85rem; --bs-gutter-y: .85rem; }
/* ── Product Detail ─────────────────────────────────────────── */
.product-gallery-main { border-radius: var(--r-card); overflow: hidden; background: #f0f2f7; aspect-ratio: 1/1; cursor: zoom-in; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-gallery-thumbs { display: flex; gap: .5rem; margin-top: .75rem; }
.gallery-thumb { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: var(--transition); background: #f0f2f7; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--navy); }
.product-detail-title { font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin-bottom: .5rem; }
.product-detail-price .price-current { font-size: 1.8rem; font-weight: 700; color: var(--navy); }
.gst-note { font-size: .75rem; color: var(--text-l); margin-top: .2rem; }
.qty-stepper { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--r-btn); overflow: hidden; width: fit-content; }
.qty-btn { width: 38px; height: 42px; background: #f3f4f8; border: none; font-size: 1.1rem; color: var(--text); cursor: pointer; transition: var(--transition); }
.qty-btn:hover { background: var(--navy); color: var(--white); }
.qty-input { width: 52px; height: 42px; border: none; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); text-align: center; font-size: .95rem; font-weight: 600; color: var(--text); outline: none; }
/* ── Toast Notifications ────────────────────────────────────── */
.toast-container-na { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.toast-na { background: var(--white); border-radius: var(--r-card); padding: .85rem 1.2rem; box-shadow: var(--shadow-lg); border-left: 4px solid var(--success); display: flex; align-items: center; gap: .7rem; min-width: 260px; max-width: 340px; animation: slideInRight .3s ease; font-size: .875rem; font-weight: 500; }
.toast-na.error { border-left-color: var(--danger); }
.toast-na.warning { border-left-color: var(--warn); }
.toast-na.info { border-left-color: var(--navy); }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* ── Mobile Drawer ──────────────────────────────────────────── */
.mobile-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(85vw, 320px); background: var(--navy); z-index: 2000; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); overflow-y: auto; padding: 1.5rem; }
.mobile-drawer.open { transform: translateX(0); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1999; opacity: 0; visibility: hidden; transition: var(--transition); }
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer-close { background: none; border: none; color: rgba(255,255,255,.7); font-size: 1.3rem; cursor: pointer; }
.drawer-nav-link { display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.85); padding: .75rem .5rem; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .9rem; font-weight: 500; transition: var(--transition); }
.drawer-nav-link:hover { color: var(--gold); padding-left: 1rem; }
.drawer-nav-link i { width: 18px; color: var(--gold); }
/* ── Misc Utilities ─────────────────────────────────────────── */
.text-gold { color: var(--gold-dk) !important; }
.text-navy { color: var(--navy) !important; }
.bg-navy { background: var(--navy) !important; }
.page-hero { background: linear-gradient(135deg, var(--navy) 0%, #1a4a8a 100%); color: var(--white); padding: 3.5rem 0; }
.page-hero h1 { color: var(--white); }
.card-na { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sm); border: 1.5px solid var(--border); padding: 1.5rem; }
.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state-icon { font-size: 3.5rem; color: var(--border); margin-bottom: 1rem; }
.back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; background: var(--navy); color: var(--white); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; opacity: 0; visibility: hidden; transition: var(--transition); box-shadow: var(--shadow-md); z-index: 999; }
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); }
.tag-chip { display: inline-block; background: rgba(14,51,93,.07); color: var(--navy); font-size: .75rem; font-weight: 600; padding: .2rem .7rem; border-radius: var(--r-pill); margin: .2rem; }
.skeleton { background: linear-gradient(90deg, #e8eaf0 25%, #f3f4f8 50%, #e8eaf0 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ── WooCommerce Overrides ──────────────────────────────────── */
.woocommerce-page #page,
.woocommerce #page { background: var(--bg); }
/* Product loop */
.woocommerce ul.products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.woocommerce ul.products li.product { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sm); border: 1.5px solid var(--border); overflow: hidden; transition: var(--transition); }
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.woocommerce ul.products li.product img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .9rem; font-weight: 600; padding: .75rem .75rem 0; color: var(--text); }
.woocommerce ul.products li.product .price { padding: .3rem .75rem; color: var(--navy); font-weight: 700; font-size: 1rem; }
.woocommerce ul.products li.product .price del { color: var(--text-l); font-size: .85rem; }
.woocommerce ul.products li.product .button { display: block; margin: .5rem .75rem .75rem; text-align: center; background: var(--navy); color: #fff; padding: .55rem; border-radius: var(--r-btn); font-size: .85rem; font-weight: 600; transition: var(--transition); border: none; cursor: pointer; }
.woocommerce ul.products li.product .button:hover { background: var(--gold); color: var(--navy); }
.woocommerce ul.products li.product .onsale { background: var(--danger); border-radius: 4px; font-size: .65rem; font-weight: 700; padding: .2rem .5rem; top: .6rem; left: .6rem; }
/* Single product — scoped to body.single-product only */
body.single-product .woocommerce div.product .product_title { font-size: 1.8rem; color: var(--text); }
body.single-product .woocommerce div.product p.price,
body.single-product .woocommerce div.product span.price { color: var(--navy); font-size: 1.6rem; font-weight: 700; }
body.single-product .woocommerce div.product .price del { opacity: 1 !important; }
body.single-product .woocommerce div.product .price del .woocommerce-Price-amount,
body.single-product .woocommerce div.product .price del bdi { font-size: 1rem !important; font-weight: 400 !important; color: var(--text-l) !important; }
body.single-product .woocommerce div.product .price ins { text-decoration: none !important; }
body.single-product .woocommerce div.product .price ins .woocommerce-Price-amount,
body.single-product .woocommerce div.product .price ins bdi { font-size: 1.8rem !important; font-weight: 700 !important; color: var(--danger) !important; }
body.single-product .woocommerce div.product .woocommerce-product-details__short-description { color: var(--text-m); margin-bottom: 1.5rem; }
body.single-product .woocommerce div.product .single_add_to_cart_button { background: var(--navy) !important; color: #fff !important; border-radius: var(--r-btn) !important; font-weight: 700 !important; padding: .75rem 2rem !important; font-size: 1rem !important; border: none !important; transition: var(--transition) !important; }
body.single-product .woocommerce div.product .single_add_to_cart_button:hover { background: var(--gold) !important; color: var(--navy) !important; }
/* Star ratings — gold on single product & reviews */
.star-rating::before,
.woocommerce-product-rating .star-rating::before { color: #d1d5db !important; }
.star-rating span::before,
.woocommerce-product-rating .star-rating span::before { color: #f59e0b !important; }
.woocommerce-Reviews .star-rating::before { color: #d1d5db !important; }
.woocommerce-Reviews .star-rating span::before { color: #f59e0b !important; }
/* Cart & Checkout */
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; background: var(--white); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm); }
.woocommerce table.shop_table th { background: #f3f4f8; padding: .9rem 1.2rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-m); border: none; }
.woocommerce table.shop_table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce #place_order { background: var(--navy) !important; color: #fff !important; border-radius: var(--r-btn) !important; font-weight: 700 !important; font-size: 1rem !important; padding: .8rem 2rem !important; border: none !important; transition: var(--transition) !important; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce #place_order:hover { background: var(--gold) !important; color: var(--navy) !important; }
/* WC notices */
.woocommerce-message, .woocommerce-info { background: #eff6ff; border-left: 4px solid var(--navy); padding: 1rem 1.25rem; border-radius: 0 var(--r-card) var(--r-card) 0; margin-bottom: 1rem; }
.woocommerce-error { background: #fef2f2; border-left: 4px solid var(--danger); padding: 1rem 1.25rem; }
/* Forms */
.woocommerce form .form-row label { font-size: .83rem; font-weight: 600; color: var(--text); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select { border: 1.5px solid var(--border); border-radius: var(--r-btn); padding: .6rem .9rem; font-size: .9rem; width: 100%; outline: none; transition: var(--transition); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(14,51,93,.08); }
/* ── Static Pages — Shared ──────────────────────────────────── */
:root { --sage: #8FAF8A; --sage-lt: rgba(143,175,138,.12); --page-dark: #2C2C2C; --page-bg: #FAF9F6; }
.sp-page { background: var(--page-bg); font-family: 'Lato', 'Inter', sans-serif; }
.sp-page h1,.sp-page h2,.sp-page h3 { font-family: 'Cormorant Garamond', Georgia, serif; }
.sp-hero { padding: 5rem 0 4rem; text-align: center; }
.sp-hero.sp-hero--sage { background: linear-gradient(135deg, var(--sage-lt) 0%, rgba(201,168,76,.06) 100%); }
.sp-hero.sp-hero--dark { background: linear-gradient(135deg, #1a2d1a 0%, #0e335d 100%); color: #fff; }
.sp-hero-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); background: var(--sage-lt); padding: .3rem .9rem; border-radius: 50px; margin-bottom: 1rem; }
.sp-hero--dark .sp-hero-eyebrow { color: #c9a84c; background: rgba(201,168,76,.15); }
.sp-hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--page-dark); line-height: 1.2; margin-bottom: 1rem; }
.sp-hero--dark .sp-hero-title { color: #fff; }
.sp-hero-title span { color: var(--sage); border-bottom: 3px solid #c9a84c; }
.sp-hero-sub { font-size: 1.05rem; color: var(--text-m); max-width: 640px; margin: 0 auto; line-height: 1.7; }
.sp-hero--dark .sp-hero-sub { color: rgba(255,255,255,.75); }
.sp-section { padding: 4rem 0; }
.sp-section--alt { background: #fff; }
.sp-section-title { font-size: 1.8rem; font-weight: 700; color: var(--page-dark); margin-bottom: .5rem; }
.sp-section-title::after { content: ''; display: block; width: 48px; height: 3px; background: var(--sage); border-radius: 2px; margin-top: .5rem; }
.sp-section-lead { color: var(--text-m); font-size: 1rem; line-height: 1.75; margin-bottom: 1.5rem; }
.sp-trust-card { background: #fff; border-radius: var(--r-card); padding: 2rem 1.5rem; text-align: center; box-shadow: var(--shadow-sm); border-top: 4px solid var(--sage); transition: var(--transition); }
.sp-trust-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sp-trust-icon { font-size: 2rem; margin-bottom: .75rem; }
.sp-trust-title { font-size: 1rem; font-weight: 700; color: var(--page-dark); margin-bottom: .4rem; }
.sp-trust-desc { font-size: .85rem; color: var(--text-m); line-height: 1.6; }
.sp-step-card { text-align: center; padding: 1.5rem 1rem; }
.sp-step-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--sage-lt); display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; font-size: 1.6rem; border: 2px solid var(--sage); }
.sp-step-num { font-size: .7rem; font-weight: 800; color: var(--sage); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .25rem; }
.sp-step-title { font-size: .95rem; font-weight: 700; color: var(--page-dark); margin-bottom: .35rem; }
.sp-step-desc { font-size: .82rem; color: var(--text-m); line-height: 1.6; }
.sp-why-list { list-style: none; padding: 0; margin: 0; }
.sp-why-list li { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0; font-size: .95rem; color: var(--text-m); border-bottom: 1px solid var(--border); }
.sp-why-list li:last-child { border-bottom: none; }
.sp-why-list li::before { content: '✓'; color: var(--sage); font-weight: 800; font-size: 1.05rem; flex-shrink: 0; }
.sp-img-placeholder { border-radius: var(--r-card); background: linear-gradient(135deg, var(--sage-lt) 0%, rgba(201,168,76,.08) 100%); display: flex; align-items: center; justify-content: center; min-height: 320px; font-size: 5rem; border: 2px dashed rgba(143,175,138,.4); }
.sp-cta-banner { background: linear-gradient(135deg, var(--sage) 0%, #6a9464 100%); padding: 4rem 0; text-align: center; color: #fff; }
.sp-cta-banner h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; }
.sp-btn-gold { display: inline-block; background: #c9a84c; color: #fff; font-weight: 700; padding: .75rem 2.5rem; border-radius: var(--r-btn); text-decoration: none; font-size: 1rem; transition: var(--transition); border: none; cursor: pointer; }
.sp-btn-gold:hover { background: #a8872e; color: #fff; }
.sp-contact-card { background: #fff; border-radius: var(--r-card); padding: 2rem 1.5rem; text-align: center; box-shadow: var(--shadow-sm); border-top: 4px solid #c9a84c; }
.sp-contact-icon { font-size: 2rem; margin-bottom: .75rem; }
.sp-contact-title { font-size: 1rem; font-weight: 700; color: var(--page-dark); margin-bottom: .5rem; }
.sp-contact-detail { font-size: .9rem; color: var(--text-m); line-height: 1.7; }
.sp-contact-detail a { color: var(--sage); font-weight: 600; text-decoration: none; }
.sp-contact-detail a:hover { text-decoration: underline; }
.sp-contact-form { background: #fff; border-radius: var(--r-card); padding: 2.5rem; box-shadow: var(--shadow-sm); }
.sp-contact-form label { font-size: .83rem; font-weight: 700; color: var(--page-dark); display: block; margin-bottom: .35rem; }
.sp-form-field { width: 100%; border: 1.5px solid var(--border); border-radius: var(--r-btn); padding: .65rem 1rem; font-size: .9rem; outline: none; transition: var(--transition); background: var(--page-bg); color: var(--page-dark); font-family: 'Lato','Inter',sans-serif; }
.sp-form-field:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(143,175,138,.15); }
.sp-form-msg { padding: .85rem 1.25rem; border-radius: var(--r-btn); font-size: .9rem; font-weight: 600; margin-bottom: 1rem; display: none; }
.sp-form-msg.success { background: #f0fdf4; border-left: 4px solid var(--success); color: #166534; display: block; }
.sp-form-msg.error { background: #fef2f2; border-left: 4px solid var(--danger); color: #991b1b; display: block; }
.sp-faq-item { border-bottom: 1px solid var(--border); }
.sp-faq-btn { width: 100%; text-align: left; background: none; border: none; padding: 1.1rem 0; font-size: .97rem; font-weight: 700; color: var(--page-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: 'Lato','Inter',sans-serif; }
.sp-faq-btn .faq-icon { font-size: 1.1rem; color: var(--sage); transition: var(--transition); flex-shrink: 0; }
.sp-faq-btn[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.sp-faq-answer { font-size: .9rem; color: var(--text-m); line-height: 1.75; padding-bottom: 1rem; display: none; }
.sp-faq-answer.open { display: block; }
.sp-shipping-table { width: 100%; border-collapse: collapse; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm); }
.sp-shipping-table thead { background: var(--sage); color: #fff; }
.sp-shipping-table th { padding: .9rem 1.2rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sp-shipping-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--text-m); background: #fff; }
.sp-shipping-table tr:last-child td { border-bottom: none; }
.sp-shipping-table td:first-child { font-weight: 700; color: var(--page-dark); }
.sp-callout { background: var(--sage-lt); border-left: 4px solid var(--sage); border-radius: 0 var(--r-card) var(--r-card) 0; padding: 1.5rem; }
.sp-callout ul { list-style: none; padding: 0; margin: 0; }
.sp-callout li { padding: .4rem 0; font-size: .9rem; color: var(--text-m); display: flex; gap: .6rem; }
.sp-callout li::before { content: '•'; color: var(--sage); font-weight: 800; flex-shrink: 0; }
.sp-policy-section { margin-bottom: 2.5rem; }
.sp-policy-section h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: var(--page-dark); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--sage-lt); }
.sp-policy-section p,.sp-policy-section li { font-size: .92rem; color: var(--text-m); line-height: 1.8; }
.sp-policy-section ul,.sp-policy-section ol { padding-left: 1.5rem; margin-top: .5rem; }
.sp-policy-section li { margin-bottom: .3rem; }
.sp-policy-note { background: #fffbeb; border-left: 4px solid #c9a84c; padding: .85rem 1.2rem; border-radius: 0 var(--r-btn) var(--r-btn) 0; font-size: .87rem; color: #92400e; margin-top: 1rem; }
.sp-contact-strip { background: var(--page-dark); color: rgba(255,255,255,.8); text-align: center; padding: 2.5rem 0; font-size: 1rem; }
.sp-contact-strip a { color: #c9a84c; font-weight: 700; text-decoration: none; }
.sp-contact-strip a:hover { text-decoration: underline; }
/* ── Default Page Template (page.php) ───────────────────────── */
.sp-page-mini-hero { background: var(--sage-lt); padding: 2.5rem 0; border-bottom: 2px solid rgba(143,175,138,.22); }
.sp-mini-hero-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 700; color: var(--page-dark); margin: 0; }
/* Generic page content typography */
.sp-page-content { font-family: 'Lato','Inter',sans-serif; }
.sp-page-content p { font-size: .95rem; color: var(--text-m); line-height: 1.85; margin-bottom: 1.1rem; }
.sp-page-content h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.55rem; font-weight: 700; color: var(--page-dark); margin: 2.2rem 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--sage-lt); }
.sp-page-content h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--page-dark); margin: 1.6rem 0 .5rem; }
.sp-page-content h4 { font-size: 1rem; font-weight: 700; color: var(--page-dark); margin: 1.2rem 0 .4rem; }
.sp-page-content ul { padding-left: 1.4rem; margin-bottom: 1rem; list-style: disc; }
.sp-page-content ol { padding-left: 1.4rem; margin-bottom: 1rem; list-style: decimal; }
.sp-page-content li { font-size: .92rem; color: var(--text-m); margin-bottom: .4rem; line-height: 1.75; }
.sp-page-content a { color: var(--sage); font-weight: 600; text-decoration: none; }
.sp-page-content a:hover { text-decoration: underline; }
.sp-page-content blockquote { background: var(--sage-lt); border-left: 4px solid var(--sage); padding: 1rem 1.5rem; border-radius: 0 var(--r-card) var(--r-card) 0; margin: 1.5rem 0; font-style: italic; color: var(--text-m); font-size: .95rem; }
.sp-page-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm); }
.sp-page-content table th { background: var(--sage); color: #fff; padding: .75rem 1rem; text-align: left; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sp-page-content table td { border-bottom: 1px solid var(--border); padding: .75rem 1rem; color: var(--text-m); background: #fff; font-size: .9rem; }
.sp-page-content table tr:last-child td { border-bottom: none; }
.sp-page-content strong { color: var(--page-dark); }
.sp-page-content hr { border: none; border-top: 2px solid var(--sage-lt); margin: 2rem 0; }
/* Policy pages (terms / privacy / refund — wraps the_content()) */
.sp-policy-content { font-family: 'Lato','Inter',sans-serif; }
.sp-policy-content h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; font-weight: 700; color: var(--page-dark); margin: 2.5rem 0 .75rem; padding: .75rem 1rem .75rem 1.25rem; background: var(--sage-lt); border-left: 4px solid var(--sage); border-radius: 0 var(--r-btn) var(--r-btn) 0; }
.sp-policy-content h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--page-dark); margin: 1.5rem 0 .5rem; }
.sp-policy-content p { font-size: .92rem; color: var(--text-m); line-height: 1.85; margin-bottom: 1rem; }
.sp-policy-content ul,.sp-policy-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.sp-policy-content li { font-size: .9rem; color: var(--text-m); margin-bottom: .4rem; line-height: 1.8; }
.sp-policy-content ul li { list-style: disc; }
.sp-policy-content ol li { list-style: decimal; }
.sp-policy-content a { color: var(--sage); font-weight: 600; text-decoration: none; }
.sp-policy-content a:hover { text-decoration: underline; }
.sp-policy-content strong { color: var(--page-dark); }
.sp-policy-content hr { border: none; border-top: 2px solid var(--sage-lt); margin: 2rem 0; }
/* WooCommerce functional page wrapper (Cart / Checkout / My Account) */
.sp-wc-content-wrap { padding: .5rem 0; }
.sp-wc-content-wrap .woocommerce-notices-wrapper + .woocommerce { margin-top: 1rem; }
.sp-wc-content-wrap .woocommerce-cart-form { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 1.5rem; }
.sp-wc-content-wrap .cart-collaterals,.sp-wc-content-wrap .checkout-payment { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 1.5rem; margin-top: 1.5rem; }
.sp-wc-content-wrap .woocommerce-account-wrap { min-height: 400px; }
/* FAQ category section headers */
.sp-faq-category { margin: 3rem 0 1rem; }
.sp-faq-cat-badge { display: inline-flex; align-items: center; gap: .55rem; background: var(--sage-lt); border: 1.5px solid var(--sage); border-radius: var(--r-pill); padding: .45rem 1.1rem; font-size: .78rem; font-weight: 800; color: var(--sage); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.sp-faq-cat-badge i { font-size: .9rem; }
.sp-faq-cat-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--page-dark); margin-bottom: 0; }
/* ── Track Order ─────────────────────────────────────────────── */
.track-result { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-md); overflow: hidden; margin-bottom: 1.5rem; }
.track-result-header { background: linear-gradient(135deg, var(--sage) 0%, #6a9464 100%); color: #fff; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.track-order-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; font-weight: 700; }
.track-status-badge { background: rgba(255,255,255,.25); border: 1.5px solid rgba(255,255,255,.5); border-radius: 50px; padding: .3rem .9rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.track-result-grid { padding: 1.5rem; display: grid; gap: 1rem; }
.track-result-grid > div { display: flex; flex-direction: column; gap: .25rem; }
.track-result-grid strong { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-l); }
.track-result-grid span { font-size: .95rem; color: var(--page-dark); }
.track-items-list { list-style: none; padding: 0; margin: 0; }
.track-items-list li { font-size: .9rem; color: var(--text-m); padding: .2rem 0; border-bottom: 1px solid var(--border); }
.track-items-list li:last-child { border-bottom: none; }
.track-status-guide { display: flex; flex-direction: column; gap: 1.25rem; }
.track-guide-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-sm); border-left: 4px solid var(--sage); }
.track-guide-icon { font-size: 1.6rem; flex-shrink: 0; }
.track-guide-title { font-weight: 700; font-size: .95rem; color: var(--page-dark); margin-bottom: .2rem; }
.track-guide-desc { font-size: .83rem; color: var(--text-m); line-height: 1.6; }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
.mega-menu-wrapper { display: none; }
.hamburger { display: flex !important; }
.hero-slide { min-height: 400px; }
.section-pad { padding: 3rem 0; }
.hero-title { font-size: clamp(1.6rem, 5vw, 2.5rem); }
}
@media (max-width: 767px) {
.hero-slide { min-height: 320px; }
.section-title { font-size: 1.5rem; }
.countdown-num { width: 48px; height: 48px; font-size: 1.3rem; }
.newsletter-form { flex-direction: column; }
.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 480px) {
.woocommerce ul.products { grid-template-columns: 1fr; }
.slider-prev, .slider-next { display: none; }
}
/* ============================================================
v3.0 — Accessibility, Skip Link, Breadcrumbs, Responsive
============================================================ */
/* ── Skip-to-content link ───────────────────────────────────── */
.skip-link {
position: absolute;
top: -9999px; left: 0;
background: var(--navy); color: #fff;
padding: 12px 20px; font-size: 14px; font-weight: 700;
z-index: 9999; border-radius: 0 0 8px 0;
transition: none;
}
.skip-link:focus { top: 0; }
/* ── Focus-visible — global accessible outline ──────────────── */
:focus-visible {
outline: 2px solid #1a73e8;
outline-offset: 2px;
border-radius: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
/* ── Touch targets — buttons & inputs ≥ 44px ───────────────── */
button, .btn, .sp-btn, .sp-btn-primary, .sp-btn-white,
.sp-btn-outline, .nav-icon-btn, .hamburger, .drawer-close,
.search-btn, .back-to-top {
min-height: 44px;
min-width: 44px;
}
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="number"], textarea, select {
min-height: 44px;
font-size: 16px; /* prevent iOS zoom */
}
/* ── Breadcrumb nav ─────────────────────────────────────────── */
.na-breadcrumb-nav {
background: #f1f5f9;
border-bottom: 1px solid #e2e8f0;
padding: 8px 0;
}
.na-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
color: #6b7280;
gap: 0;
}
.na-breadcrumb__item a { color: var(--navy); font-weight: 500; }
.na-breadcrumb__item a:hover { color: var(--gold); }
.na-breadcrumb__item span[aria-current="page"] { color: #374151; font-weight: 600; }
.na-breadcrumb__sep { color: #9ca3af; padding: 0 6px; }
/* ── All grids: natural collapse ────────────────────────────── */
.sp-highlights-grid,
.sp-details-grid,
.sp-details__grid,
.sp-highlights__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
/* ── Flex rows: wrap on mobile ──────────────────────────────── */
.sp-cta-btns, .sp-cta-strip__buttons, .sp-hero__pills,
.sp-hero-stats, .footer-bottom > .container-xl > div {
flex-wrap: wrap;
}
/* ── Footer responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
.footer-main .row > div { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 640px) {
.footer-main .row > div { flex: 0 0 100%; max-width: 100%; }
.footer-social { justify-content: center; }
.footer-bottom .d-flex { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.payment-icons { justify-content: center; flex-wrap: wrap; gap: 8px; }
.newsletter-input { width: 100%; }
}
/* ── Header / nav responsive ────────────────────────────────── */
@media (max-width: 1024px) {
.navbar-main .search-form { max-width: 320px; }
}
@media (max-width: 640px) {
.navbar-main .search-form { display: none; }
.brand-logo { font-size: 1.3rem !important; }
.top-bar { font-size: .72rem; }
}
/* ── Page hero responsive ───────────────────────────────────── */
@media (max-width: 768px) {
.sp-page-mini-hero--returns,
.sp-page-mini-hero--track,
.sp-hero--shipping {
padding: 64px 20px;
}
.sp-hero__pills, .sp-hero-stats { flex-direction: column; align-items: center; }
}
@media (max-width: 640px) {
.sp-mini-hero-title,
.sp-hero__title { font-size: clamp(24px, 6vw, 32px); }
.sp-hero__sub, .sp-mini-hero-subtitle { font-size: 15px; }
}
/* ── Steps: connector line ──────────────────────────────────── */
@media (max-width: 480px) {
.sp-steps::before { display: none; }
.sp-step { flex-direction: column; gap: 12px; }
}
/* ── CTA strips ─────────────────────────────────────────────── */
@media (max-width: 768px) {
.sp-cta-strip { padding: 40px 24px; border-radius: 14px; }
.sp-cta-strip__inner { flex-direction: column; text-align: center; }
.sp-cta-strip__buttons, .sp-cta-btns {
flex-direction: column; align-items: stretch; width: 100%;
}
}
/* ── ACL card responsive ────────────────────────────────────── */
@media (max-width: 640px) {
.sp-acl-card { flex-direction: column; gap: 12px; }
}
/* ── Track order ────────────────────────────────────────────── */
@media (max-width: 640px) {
.sp-track-lookup, .sp-track-how,
.sp-track-result, .sp-track-info-grid { padding: 32px 16px; }
}
/* ── WooCommerce product grid ───────────────────────────────── */
@media (max-width: 1200px) {
.woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}
@media (max-width: 480px) {
.woocommerce ul.products { grid-template-columns: 1fr; }
}
/* ====================================================================
NestAura v4.0 — Responsive & SEO Enhancement Block
All rules additive — no existing class names removed
==================================================================== */
/* ── GLOBAL RESETS ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid #c9a96e;
outline-offset: 2px;
}
button, .button, a.button, input[type="submit"] {
min-height: 44px;
min-width: 44px;
cursor: pointer;
}
input, select, textarea {
min-height: 44px;
font-size: 16px; /* prevents iOS auto-zoom */
}
/* ── SKIP LINK ──────────────────────────────────────────────────── */
.na-skip-link {
position: absolute;
top: -100%;
left: 0;
background: #1a2e44;
color: #fff;
padding: 12px 24px;
z-index: 9999;
text-decoration: none;
font-weight: 600;
}
.na-skip-link:focus { top: 0; }
/* ── BREADCRUMBS ────────────────────────────────────────────────── */
.na-breadcrumb {
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
font-size: 13px;
color: #666;
}
.na-breadcrumb ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.na-breadcrumb li:not(:last-child)::after {
content: "›";
margin-left: 4px;
color: #999;
}
.na-breadcrumb a {
color: #c9a96e;
text-decoration: none;
}
.na-breadcrumb a:hover { text-decoration: underline; }
/* Existing breadcrumb nav class compatibility */
.na-breadcrumb-nav { background: #f8f9fb; border-bottom: 1px solid #eee; }
.na-breadcrumbs { display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:10px 0; gap:4px; align-items:center; }
.na-breadcrumb__sep { color:#999; font-size:12px; }
.na-breadcrumb__item a { color:#c9a96e; text-decoration:none; font-size:13px; }
.na-breadcrumb__item a:hover { text-decoration:underline; }
.na-breadcrumb__item span[aria-current] { color:#555; font-size:13px; }
/* ── CARD ANIMATION (IntersectionObserver) ──────────────────────── */
.na-animate {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.na-animate.na-visible {
opacity: 1;
transform: translateY(0);
}
/* ── HEADER RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
.site-header, .na-header { padding: 12px 16px; }
.na-header__logo img { max-height: 40px; width: auto; }
.na-nav__list {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #1a2e44;
padding: 16px;
z-index: 999;
}
.na-nav__list.is-open { display: flex; }
.na-nav-toggle { display: flex; }
.na-header__actions { gap: 8px; }
}
/* ── FRONT PAGE HERO ────────────────────────────────────────────── */
@media (max-width: 768px) {
.hero, .na-hero {
min-height: 60vh;
padding: 60px 16px 40px;
}
.hero__title, .na-hero__title {
font-size: clamp(26px, 7vw, 44px);
}
.hero__ctas, .na-hero__ctas {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.hero__ctas a, .na-hero__ctas a {
width: 100%;
text-align: center;
}
/* Hero Slider responsive */
.hero-slide { min-height: 60vh; }
.hero-content { padding: 40px 16px 32px; }
.hero-title { font-size: clamp(26px, 7vw, 44px) !important; }
.hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
.hero-ctas a { width: 100%; text-align: center; }
}
/* ── PRODUCT GRIDS ──────────────────────────────────────────────── */
.products,
.woocommerce ul.products,
.na-products-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 24px;
}
@media (max-width: 640px) {
.products,
.woocommerce ul.products,
.na-products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
@media (max-width: 400px) {
.products,
.woocommerce ul.products,
.na-products-grid {
grid-template-columns: 1fr;
}
}
/* ── CATEGORY CARDS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
.na-categories__grid, .category-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px;
}
}
@media (max-width: 480px) {
.na-categories__grid, .category-grid {
grid-template-columns: 1fr !important;
}
}
/* ── TESTIMONIALS ───────────────────────────────────────────────── */
@media (max-width: 768px) {
.na-testimonials__grid, .testimonials-grid {
grid-template-columns: 1fr !important;
}
}
/* ── NEWSLETTER STRIP ───────────────────────────────────────────── */
@media (max-width: 640px) {
.na-newsletter, .newsletter-section {
padding: 40px 16px;
}
.na-newsletter__form, .newsletter-form {
flex-direction: column;
gap: 12px;
}
.na-newsletter__form input, .newsletter-form input {
width: 100%;
}
}
/* ── SINGLE PRODUCT — strictly scoped to body.single-product ─────── */
@media (max-width: 768px) {
body.single-product .woocommerce div.product {
display: block !important;
}
body.single-product .woocommerce div.product .woocommerce-product-gallery {
width: 100% !important;
position: static !important;
margin-bottom: 24px;
}
body.single-product .woocommerce div.product .summary {
width: 100% !important;
float: none !important;
}
.woocommerce-tabs ul.tabs {
overflow-x: auto;
white-space: nowrap;
}
}
/* ── PAGE-SHIPPING RESPONSIVE ───────────────────────────────────── */
@media (max-width: 768px) {
.sp-hero__stats {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.sp-highlights__grid {
grid-template-columns: 1fr !important;
}
.sp-details__grid {
grid-template-columns: 1fr !important;
}
.sp-cta-strip__inner {
flex-direction: column;
align-items: center;
text-align: center;
}
.sp-cta-strip__actions {
flex-direction: column;
width: 100%;
}
.sp-cta-strip__actions a {
width: 100%;
text-align: center;
}
}
@media (max-width: 640px) {
.sp-steps__grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 480px) {
.sp-steps__grid {
grid-template-columns: 1fr !important;
}
}
/* ── PAGE-RETURNS RESPONSIVE ────────────────────────────────────── */
@media (max-width: 768px) {
.rp-grid, .returns-grid {
grid-template-columns: 1fr !important;
}
.rp-cta-strip__inner {
flex-direction: column;
align-items: center;
text-align: center;
}
}
/* ── PAGE-ABOUT RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
.about-story-grid, .na-about__grid {
grid-template-columns: 1fr !important;
}
.about-stats, .na-about__stats {
flex-wrap: wrap;
justify-content: center;
}
.about-cta-strip__inner {
flex-direction: column;
text-align: center;
}
}
/* ── PAGE-CONTACT RESPONSIVE ────────────────────────────────────── */
@media (max-width: 768px) {
.contact-grid, .na-contact__grid, .sp-contact-layout {
grid-template-columns: 1fr !important;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
width: 100%;
}
}
/* ── PAGE-TRACK ORDER RESPONSIVE ────────────────────────────────── */
@media (max-width: 640px) {
.track-form, .na-track__form {
flex-direction: column;
gap: 12px;
}
.track-form input,
.track-form button {
width: 100%;
}
}
/* ── FOOTER RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
.site-footer .footer-grid,
.na-footer__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 32px;
}
}
@media (max-width: 640px) {
.site-footer .footer-grid,
.na-footer__grid {
grid-template-columns: 1fr !important;
gap: 24px;
}
.na-footer__bottom {
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
}
.na-footer__social {
justify-content: center;
}
.na-newsletter__form {
flex-direction: column;
gap: 10px;
}
.na-newsletter__form input { width: 100%; }
}
/* ── WOOCOMMERCE GLOBAL RESPONSIVE ─────────────────────────────── */
@media (max-width: 768px) {
.woocommerce-cart-form,
.woocommerce #payment {
padding: 16px !important;
}
.woocommerce form .form-row {
width: 100% !important;
float: none !important;
}
.woocommerce-checkout #order_review {
width: 100% !important;
float: none !important;
}
}
/* ── BLOG PAGE STYLES ───────────────────────────────────────────── */
.na-blog-hero {
background: linear-gradient(135deg, #0f1f3d 0%, #1a3a6b 60%, #2a5298 100%);
color: #fff;
padding: 80px 24px 60px;
text-align: center;
}
.na-blog-hero h1 {
font-size: clamp(28px, 5vw, 48px);
font-weight: 800;
margin: 0 0 12px;
color: #fff;
}
.na-blog-hero p {
font-size: 18px;
color: rgba(255,255,255,0.8);
margin: 0;
}
.na-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
@media (max-width: 1024px) {
.na-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.na-blog-grid { grid-template-columns: 1fr; }
}
.na-blog-card {
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.na-blog-card:hover {
box-shadow: 0 8px 32px rgba(15,31,61,0.12);
transform: translateY(-3px);
}
.na-blog-card__img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.na-blog-card__img-placeholder {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #1a3a6b, #2a5298);
display: flex;
align-items: center;
justify-content: center;
}
.na-blog-card__img-placeholder i {
font-size: 48px;
color: rgba(255,255,255,0.3);
}
.na-blog-card__body {
padding: 20px 24px 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.na-blog-card__cat {
display: inline-block;
background: #e8f0fe;
color: #2a5298;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.na-blog-card__title {
font-size: 17px;
font-weight: 700;
color: #0f1f3d;
margin: 0 0 8px;
line-height: 1.4;
}
.na-blog-card__title a {
color: inherit;
text-decoration: none;
}
.na-blog-card__title a:hover { color: #2a5298; }
.na-blog-card__excerpt {
font-size: 14px;
color: #555;
line-height: 1.6;
flex: 1;
margin-bottom: 16px;
}
.na-blog-card__meta {
font-size: 12px;
color: #888;
margin-bottom: 12px;
}
.na-blog-card__link {
display: inline-block;
color: #2a5298;
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.na-blog-card__link:hover { text-decoration: underline; }
.na-blog-pagination {
text-align: center;
padding: 0 24px 48px;
}
.na-blog-pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.na-blog-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #2a5298;
text-decoration: none;
font-size: 14px;
}
.na-blog-pagination .page-numbers.current {
background: #1a3a6b;
color: #fff;
border-color: #1a3a6b;
}
/* ── SINGLE POST STYLES ─────────────────────────────────────────── */
.na-post-hero {
background: linear-gradient(135deg, #0f1f3d 0%, #1a3a6b 60%, #2a5298 100%);
color: #fff;
padding: 60px 24px 48px;
text-align: center;
}
.na-post-hero h1 {
font-size: clamp(24px, 4vw, 40px);
font-weight: 800;
margin: 0 0 12px;
color: #fff;
}
.na-post-hero__meta {
font-size: 14px;
color: rgba(255,255,255,0.75);
}
.na-post-body {
max-width: 780px;
margin: 0 auto;
padding: 48px 24px;
}
/* Full-width treatment scoped to post body content only — never touches author avatar */
.na-post-body .entry-content img,
.na-post-featured-img img {
border-radius: 10px;
margin-bottom: 32px;
width: 100%;
height: auto;
}
/* Author avatar: fixed 80px circle — NEVER full width */
.na-post-body .na-author-box__avatar,
.na-author-box .na-author-box__avatar {
width: 80px !important;
height: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
border-radius: 50% !important;
object-fit: cover !important;
flex-shrink: 0 !important;
margin: 0 !important;
display: block !important;
}
.na-post-body h2 { color: #0f1f3d; margin-top: 2em; }
.na-post-body h3 { color: #1a3a6b; margin-top: 1.5em; }
.na-post-body p { line-height: 1.8; color: #333; }
.na-post-body a { color: #2a5298; }
.na-author-box {
background: #f0f4f9;
border-radius: 12px;
padding: 24px;
display: flex;
gap: 20px;
align-items: center;
margin: 40px 0;
}
@media (max-width: 480px) {
.na-author-box { flex-direction: column; text-align: center; }
}
.na-author-box__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.na-author-box__name { font-weight: 700; color: #0f1f3d; margin-bottom: 4px; }
.na-author-box__bio { font-size: 13px; color: #555; margin: 0; }
.na-related-posts {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px 60px;
}
.na-related-posts h3 { font-size: 22px; font-weight: 700; color: #0f1f3d; margin-bottom: 24px; }
.na-related-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .na-related-posts__grid { grid-template-columns: 1fr; } }
.na-share-buttons {
display: flex;
gap: 12px;
margin: 32px 0;
flex-wrap: wrap;
}
.na-share-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
color: #fff;
}
.na-share-btn--fb { background: #1877f2; }
.na-share-btn--tw { background: #1da1f2; }
.na-share-btn--fb:hover { background: #166fe5; }
.na-share-btn--tw:hover { background: #1a91da; }
/* ====================================================================
NestAura v4.1 — CLS, SEO & Accessibility Fixes
Target: CLS < 0.1 · SEO > 90 · Accessibility > 90
==================================================================== */
/* ── 1. STABLE STICKY NAVBAR — prevent height change on scroll ─────── */
/* Remove padding shrink on scroll (was causing sticky-nav CLS).
Keep same padding; only change box-shadow on scroll. */
.navbar-main {
min-height: 68px;
padding: .75rem 0 !important; /* lock padding — overrides .scrolled */
}
.navbar-main.scrolled {
padding: .75rem 0 !important;
box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
/* ── 2. FONT FALLBACK SIZE-ADJUST — reduce Inter swap CLS ─────────── */
/* These @font-face overrides adjust the fallback metrics so that
when Inter swaps in, text reflow is minimal (< 5% shift). */
@font-face {
font-family: 'Inter Fallback';
src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 107%;
}
/* ── 3. IMAGE CONTAINERS — explicit aspect-ratio on all card images ── */
/* Category cards already have height:120px — add aspect-ratio too */
.category-card-img {
height: 120px;
aspect-ratio: 3 / 1;
overflow: hidden;
background: #f0f2f7;
contain: strict;
}
.category-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Product image wrap — reinforce aspect-ratio reservation */
.product-img-wrap {
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f0f2f7;
contain: layout;
}
.product-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Blog card image containers — prevent height shift */
.na-blog-card .na-blog-img,
.na-blog-card figure,
.na-blog-card .post-thumbnail {
aspect-ratio: 16 / 9;
overflow: hidden;
background: #e8eaf0;
}
.na-blog-card .na-blog-img img,
.na-blog-card figure img,
.na-blog-card .post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── 4. HERO SLIDER — stable height reservation ───────────────────── */
.hero-slider {
contain: layout; /* prevents reflow from late-loading content */
}
.hero-slide {
height: 580px; /* fixed height — eliminates min-height CLS */
min-height: unset;
overflow: hidden;
}
@media (max-width: 991px) {
.hero-slide { height: 400px; min-height: unset; }
}
@media (max-width: 767px) {
.hero-slide { height: 320px; min-height: unset; }
}
/* ── 5. WHY-ITEMS & REVIEW CARDS — consistent card heights ───────── */
.why-item { height: 100%; }
.review-card { height: 100%; }
/* ── 6. ACCESSIBILITY — focus-visible, contrast, labels ───────────── */
/* Stronger focus ring for WCAG 2.4.11 */
:focus-visible {
outline: 3px solid #1a73e8 !important;
outline-offset: 3px !important;
}
/* Fix muted text contrast — #8888aa on white = ~3.5:1, below 4.5 */
.text-muted, .muted,
.sp-info-sub, .sp-trust-badge p,
.brand-desc, .footer-links a,
.section-subtitle, .product-category,
.review-body, .count {
color: #5a5a80; /* upgraded from #8888aa — now ~4.6:1 on white */
}
/* Footer text contrast */
.footer-main .brand-desc,
.footer-links a,
.footer-main p {
color: #9ab4cc; /* was #8aa8c8 — already ok; reinforce */
}
/* ── 7. NEWSLETTER LABEL (screen-reader) ─────────────────────────── */
/* If JS can't add a label, at least provide visible hint */
.footer-newsletter-label {
display: block;
font-size: .75rem;
color: #9ab4cc;
margin-bottom: .3rem;
}
/* ── 8. TOUCH TARGETS — ensure ALL interactive elements ≥ 44px ──── */
.nav-icon-btn,
.hamburger,
.drawer-close,
.search-btn,
.back-to-top,
.btn-add-cart,
.sp-btn-primary,
.sp-btn-white,
.btn-gold,
.btn-outline-na,
.slider-prev,
.slider-next {
min-height: 44px;
min-width: 44px;
}
/* ── 9. MOBILE: no horizontal overflow ───────────────────────────── */
html, body, .site, #page, #content {
max-width: 100vw;
overflow-x: hidden;
}
/* Slider track — must NOT have overflow:hidden.
overflow:hidden here clips slides 2/3 in the track's local coordinate
space BEFORE translateX runs, making them permanently invisible.
Viewport clipping is handled by .hero-slider { overflow:hidden } above. */
.hero-slider-track {
width: 100%;
}
/* ── 10. FORM INPUTS — prevent iOS zoom (must be ≥ 16px) ─────────── */
input, select, textarea,
.search-input,
.newsletter-input,
.sidebar-search-input,
.sp-form-group input,
.sp-form-group select,
.sp-form-group textarea {
font-size: 16px !important;
}
/* ── 11. MOBILE HERO CONTENT — prevent overflow on small phones ─── */
@media (max-width: 375px) {
.hero-content { padding: 20px 12px; }
.hero-title { font-size: clamp(1.4rem, 8vw, 2rem) !important; }
.hero-ctas { flex-direction: column; align-items: stretch; }
.hero-ctas a { width: 100%; text-align: center; }
.trust-item { flex-direction: column; text-align: center; gap: .5rem; }
}
/* ── 12. BADGE / CART COUNT — reserved width to prevent CLS ──────── */
.badge-count,
.cart-count-badge {
min-width: 18px;
width: 18px;
height: 18px;
/* Always in DOM, hidden via display:none — no space reserved without display */
}
/* ── 13. COUNTDOWN TIMER — tabular nums to prevent digit-shift CLS ─ */
.countdown-num {
font-variant-numeric: tabular-nums;
min-width: 64px;
width: 64px;
}
/* ── 14. STICKY SIDEBAR — prevent width shift ─────────────────────── */
.shop-sidebar {
top: 88px; /* updated for stable nav height */
width: 100%;
}
/* ── 15. MOBILE 768px GRID PASS ────────────────────────────────────── */
@media (max-width: 768px) {
/* 2-col product grid on tablets */
.row.g-3 [class*="col-6"] { flex: 0 0 50%; max-width: 50%; }
/* Blog cards stack */
.na-blog-grid { grid-template-columns: 1fr !important; }
/* Flash sale countdown compact */
.countdown-num { width: 48px; min-width: 48px; font-size: 1.3rem; }
.countdown-timer { gap: .5rem; }
/* Why section: 2 col */
.why-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
/* Single column on phones */
.col-6 { flex: 0 0 100%; max-width: 100%; }
.row.g-3 [class*="col-6"] { flex: 0 0 100%; max-width: 100%; }
/* Trust bar: 2 items per row */
.trust-bar .col-6 { flex: 0 0 50%; max-width: 50%; }
.why-grid { grid-template-columns: 1fr !important; }
}
/* ================================================================
NestAura Related Products + Sidebar Alignment Fix — v4.0
================================================================ */
/* ── Fix existing shop-loop card height so rows are even ─────── */
.product-card-wc-inner {
height: 100%;
display: flex;
flex-direction: column;
}
/* ── Related Products section ────────────────────────────────── */
.na-related-products {
padding: 3rem 0 2.5rem;
margin-top: 2rem;
border-top: 2px solid var(--border);
background: var(--bg);
overflow: hidden;
}
.na-related-products__heading {
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-weight: 800;
color: var(--text);
margin: 0 0 1.5rem;
padding-bottom: .7rem;
border-bottom: 1.5px solid var(--border);
position: relative;
}
.na-related-products__heading::after {
content: '';
position: absolute;
bottom: -1.5px; left: 0;
width: 52px; height: 2.5px;
background: var(--gold);
border-radius: 2px;
}
/* CSS Grid — 4 columns desktop → 3 → 2 → 1 */
.na-related-products__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
align-items: stretch;
}
/* Card wrapper — stretch to grid row height */
.na-related-products__card {
display: flex;
flex-direction: column;
min-width: 0; /* prevent grid blowout */
}
.na-related-products__card .product-card {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}
/* 1:1 image aspect ratio */
.na-related-products__card .product-img-wrap {
aspect-ratio: 1 / 1;
width: 100%;
overflow: hidden;
}
.na-related-products__card .product-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Body — flex so price/button always sit at bottom */
.na-related-products__card .product-card-body {
flex: 1;
display: flex;
flex-direction: column;
padding: .9rem 1rem;
}
.na-related-products__card .product-name {
flex-grow: 1;
font-size: .875rem;
line-height: 1.4;
margin-bottom: .4rem;
}
.na-related-products__card .product-prices {
margin-top: auto;
padding-top: .4rem;
margin-bottom: .7rem;
}
/* WooCommerce default add-to-cart button inside related products */
.na-related-products__card .woocommerce-loop-add-to-cart-link,
.na-related-products__card .button.add_to_cart_button {
display: block;
width: 100%;
text-align: center;
background: var(--navy);
color: #fff;
border: none;
padding: .55rem 1rem;
border-radius: 8px;
font-size: .83rem;
font-weight: 600;
transition: var(--transition);
cursor: pointer;
}
.na-related-products__card .woocommerce-loop-add-to-cart-link:hover,
.na-related-products__card .button.add_to_cart_button:hover {
background: var(--gold);
color: var(--navy);
}
/* ── Related Products — Responsive breakpoints ───────────────── */
@media (max-width: 1199px) {
.na-related-products__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.na-related-products__grid { grid-template-columns: repeat(2, 1fr); }
.na-related-products { padding: 2.25rem 0; }
}
@media (max-width: 480px) {
.na-related-products__grid { grid-template-columns: 1fr; gap: 1rem; }
.na-related-products { padding: 1.75rem 0; }
.na-related-products__heading { font-size: 1.15rem; }
}
/* ── WooCommerce Sidebar widget area ─────────────────────────── */
.na-wc-sidebar {
padding: 2rem 0 3rem;
background: var(--bg);
border-top: 1px solid var(--border);
}
.na-wc-sidebar__inner {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: flex-start;
}
/* Each widget already gets .filter-card from before_widget in functions.php */
/* Extra resets to normalise WP widget defaults */
.na-wc-sidebar .filter-card {
flex: 1 1 220px;
min-width: 200px;
max-width: 320px;
margin-bottom: 0; /* override any filter-card default margin */
}
/* Widget list (Pages, Archives, Categories) */
.na-wc-sidebar .widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.na-wc-sidebar .widget ul li {
margin: 0;
}
.na-wc-sidebar .widget ul li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: .38rem .5rem;
font-size: .84rem;
color: var(--text-m);
text-decoration: none;
border-radius: 7px;
transition: background .15s, color .15s;
gap: .4rem;
}
.na-wc-sidebar .widget ul li a:hover {
background: #f0f4f8;
color: var(--navy);
}
/* Nested lists (sub-categories) */
.na-wc-sidebar .widget ul ul {
padding-left: 1rem;
margin-top: .1rem;
}
/* Count badges from WP archive/categories widgets */
.na-wc-sidebar .widget ul li .post-count,
.na-wc-sidebar .widget ul li .count {
background: #eff3f8;
color: var(--text-m);
font-size: .68rem;
font-weight: 700;
padding: .1rem .38rem;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
}
/* WP search widget inside sidebar */
.na-wc-sidebar .widget.widget_search .search-form,
.na-wc-sidebar .widget.widget_search form {
display: flex;
gap: .4rem;
}
.na-wc-sidebar .widget.widget_search input[type="search"] {
flex: 1;
border: 1.5px solid var(--border);
border-radius: var(--r-btn);
padding: .45rem .7rem;
font-size: .84rem;
outline: none;
color: var(--text);
}
.na-wc-sidebar .widget.widget_search input[type="search"]:focus {
border-color: var(--navy);
}
.na-wc-sidebar .widget.widget_search button,
.na-wc-sidebar .widget.widget_search input[type="submit"] {
background: var(--navy);
color: #fff;
border: none;
border-radius: var(--r-btn);
padding: .45rem .85rem;
font-size: .83rem;
font-weight: 600;
cursor: pointer;
transition: background .2s;
}
.na-wc-sidebar .widget.widget_search button:hover,
.na-wc-sidebar .widget.widget_search input[type="submit"]:hover {
background: var(--gold);
color: var(--navy);
}
/* ── WooCommerce Sidebar — Responsive ───────────────────────── */
@media (max-width: 992px) {
.na-wc-sidebar__inner { gap: 1rem; }
.na-wc-sidebar .filter-card { flex: 1 1 200px; }
}
@media (max-width: 640px) {
.na-wc-sidebar__inner { flex-direction: column; }
.na-wc-sidebar .filter-card { max-width: 100%; min-width: 0; width: 100%; }
}
/* ── End NestAura Related Products + Sidebar Alignment Fix ────── */
/* ================================================================
NestAura Related Products Compact Layout Fix — v4.0
Overrides the spacing values above to match the compact visual
rhythm of the Featured Products / Best Sellers homepage sections.
================================================================ */
/* ── Section: tighter vertical space inside product-page container ── */
/* The page already has container.py-4 (1.5 rem); keep section lean */
.na-related-products {
padding-top: 1.5rem;
padding-bottom: 2rem;
margin-top: .75rem;
overflow: visible; /* allow card hover translateY(-5px) to show */
overflow-x: hidden; /* still prevent horizontal scroll */
}
/* ── Heading: single gold bar, no double-border clutter ─────────── */
.na-related-products__heading {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 1.1rem;
padding-bottom: 0;
border-bottom: none;
}
.na-related-products__heading::after { bottom: 0; }
/* ── Grid: 1 rem gap matches Bootstrap row g-3 rhythm ───────────── */
.na-related-products__grid { gap: 1rem; }
/* ── Image: 4:3 ratio — shorter than 1:1 keeps cards compact ────── */
.na-related-products__card .product-img-wrap { aspect-ratio: 4 / 3; }
/* ── Card body: tighter padding + font matching homepage cards ───── */
.na-related-products__card .product-card-body { padding: .75rem; }
.na-related-products__card .product-name { font-size: .83rem; margin-bottom: .28rem; }
.na-related-products__card .product-prices { margin-bottom: .5rem; }
/* WooCommerce add-to-cart button — same height as btn-add-cart on hp */
.na-related-products__card .woocommerce-loop-add-to-cart-link,
.na-related-products__card .button.add_to_cart_button {
padding: .5rem 1rem;
font-size: .82rem;
}
/* ── Responsive: mobile keeps 2 cols (overrides earlier 1-col rule) */
@media (max-width: 1199px) { .na-related-products__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
.na-related-products__grid { grid-template-columns: repeat(2, 1fr); }
.na-related-products { padding: 1.25rem 0 1.5rem; margin-top: .5rem; }
}
@media (max-width: 480px) {
/* 2 columns on small phones — 1 column only if truly no space */
.na-related-products__grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.na-related-products__card .product-card-body { padding: .6rem; }
}
@media (max-width: 360px) { .na-related-products__grid { grid-template-columns: 1fr; } }
/* ── Sidebar widgets: additional alignment polish ────────────────── */
/* Ensure consistent left-edge alignment when widgets stack vertically */
.na-wc-sidebar .widget ul li {
list-style: none;
padding-left: 0;
}
/* Remove any WP default list indent that bleeds through */
.na-wc-sidebar .widget ul,
.na-wc-sidebar .widget ol {
padding-left: 0 !important;
margin-left: 0 !important;
list-style: none;
}
/* Sub-lists get explicit 1 rem indent — not browser default */
.na-wc-sidebar .widget ul ul,
.na-wc-sidebar .widget ul ol {
padding-left: 1rem !important;
margin-left: 0 !important;
}
/* Consistent title bottom spacing across all widget types */
.na-wc-sidebar .filter-title {
margin-bottom: .75rem;
}
/* Same bottom margin for every widget block regardless of widget type */
.na-wc-sidebar .filter-card.widget { margin-bottom: 0; }
/* Pages widget: hide the nested sub-page indentation if unwanted */
.na-wc-sidebar .widget_pages ul li { border-bottom: none; }
/* Categories / Archives count alignment */
.na-wc-sidebar .widget_categories ul li,
.na-wc-sidebar .widget_archive ul li {
display: flex;
align-items: center;
justify-content: space-between;
}
.na-wc-sidebar .widget_categories ul li a,
.na-wc-sidebar .widget_archive ul li a {
flex: 1;
}
/* === End NestAura Related Products Compact Layout Fix === */
/* ================================================================
NestAura Related Products Compact Fix — v4.0 (definitive)
Template now uses Bootstrap row g-3 + col-6 col-md-4 col-lg-3,
identical to Featured Products / Best Sellers. These rules handle
only section chrome + the one mobile-column override.
================================================================ */
/* ── Section wrapper: lean spacing inside container.py-4 ────────── */
.na-related-products {
margin-top: 2rem;
padding-top: 1.5rem;
padding-bottom: 0;
border-top: 1.5px solid var(--border);
background: transparent;
overflow: visible; /* let card hover translateY(-5px) show */
}
/* ── Heading: matches section-title weight, single gold bar ──────── */
.na-related-products__header { margin-bottom: 1.25rem; }
.na-related-products__heading {
font-size: 1.3rem;
font-weight: 700;
color: var(--text);
margin: 0;
padding-bottom: 0;
border-bottom: none; /* remove double-line from earlier block */
}
.na-related-products__heading::after {
content: '';
display: block;
width: 40px;
height: 2.5px;
background: var(--gold);
border-radius: 2px;
margin-top: .35rem;
position: static; /* override absolute from earlier block */
}
/* ── Product image: 1:1 aspect ratio + object-fit cover ─────────── */
/* .product-img-wrap already sets aspect-ratio:1/1 and object-fit:cover */
/* Scoped override to undo the 4/3 set in the previous Compact block */
.na-related-products .product-img-wrap { aspect-ratio: 1 / 1; }
.na-related-products .product-img-wrap img { object-fit: cover; }
/* ── Bootstrap col behaviour inside .na-related-products ─────────── */
/* col-6 col-md-4 col-lg-3 gives: mobile 2 | sm-tablet 2 | tablet 3 | desktop 4 */
/* Override the global @480px rule that collapses all .col-6 to 1-col */
/* Related products keeps 2 columns down to 360 px */
@media (max-width: 480px) {
.na-related-products .col-6 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
/* Truly tiny phones (≤360px) → 1 column */
@media (max-width: 360px) {
.na-related-products .col-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* ── No horizontal overflow ──────────────────────────────────────── */
.na-related-products { overflow-x: hidden; }
/* === End NestAura Related Products Compact Fix (definitive) === */
/* ── Screen-reader only (visually hidden but accessible) ─────────── */
.screen-reader-text {
clip: rect(1px,1px,1px,1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
clip: auto !important;
clip-path: none;
display: block;
font-size: .875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
background: #fff;
color: #0e335d;
border-radius: 4px;
box-shadow: 0 0 0 3px #1a73e8;
}
/* ====================================================================
NestAura v4.1 — Mobile Optimisation Pass (375px & 768px)
==================================================================== */
/* ── Mobile drawer: overlay, does not push content ───────────────── */
.mobile-drawer {
position: fixed;
top: 0; left: 0;
height: 100vh;
width: min(320px, 85vw);
background: #0e335d;
z-index: 2000;
transform: translateX(-105%);
transition: transform .3s ease;
overflow-y: auto;
padding: 1.25rem 1rem;
will-change: transform;
}
.mobile-drawer.open { transform: translateX(0); }
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
z-index: 1999;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.drawer-backdrop.open { opacity: 1; visibility: visible; }
/* Drawer links */
.drawer-nav-link {
display: flex;
align-items: center;
gap: .6rem;
color: rgba(255,255,255,.85);
padding: .7rem .5rem;
border-radius: 8px;
font-size: .9rem;
font-weight: 500;
text-decoration: none;
transition: background .15s, color .15s;
min-height: 44px;
}
.drawer-nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.drawer-close {
background: none;
border: none;
color: rgba(255,255,255,.7);
font-size: 1.3rem;
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
}
/* ── 375px — phones ──────────────────────────────────────────────── */
@media (max-width: 375px) {
/* Navbar: compact, no horizontal scroll */
.navbar-main .container-xl { padding-left: 12px; padding-right: 12px; }
.brand-logo { font-size: 1.2rem !important; }
/* Hero: full-height on tiny screens with stable dimensions */
.hero-slide { height: 300px; }
.hero-content { padding: 20px 16px; }
.hero-title { font-size: clamp(1.3rem, 7vw, 1.8rem) !important; }
.hero-subtitle { font-size: .85rem; }
.hero-ctas { flex-direction: column; gap: 8px; }
.hero-ctas a { width: 100%; justify-content: center; text-align: center; }
/* Trust bar: 2×2 grid */
.trust-bar .col-6 { flex: 0 0 50%; max-width: 50%; }
.trust-item { flex-direction: column; text-align: center; gap: .4rem; }
.trust-icon { margin: 0 auto; }
/* Section titles smaller */
.section-title { font-size: 1.25rem; }
/* Category grid: 2 cols on tiny screens */
.col-6.col-sm-4.col-md-3.col-lg-2 { flex: 0 0 50%; max-width: 50%; }
/* Product grid: 1 col on tiny screens */
.col-6.col-md-4.col-lg-3 { flex: 0 0 100%; max-width: 100%; }
/* Flash sale countdown: smaller */
.countdown-num { width: 40px; min-width: 40px; font-size: 1.1rem; height: 44px; }
.countdown-timer { gap: .3rem; }
.flash-sale-title { font-size: 1.25rem; }
/* Best sellers: scrollable row compact */
.best-seller-row > div { min-width: 180px; max-width: 200px; }
/* New arrivals: single column */
.col-12.col-sm-6.col-lg-3 { flex: 0 0 100%; max-width: 100%; }
/* Why items: 1 col */
.col-md-6.col-lg-3 { flex: 0 0 100%; max-width: 100%; }
/* Footer: stack all */
.footer-main .row > div { flex: 0 0 100%; max-width: 100%; }
/* Quick-links: 2 col */
.col-6.col-sm-4.col-md-2 { flex: 0 0 50%; max-width: 50%; }
/* Buttons: prevent very small tap targets */
.btn-gold, .btn-outline-na, .btn-primary-na { padding: .7rem 1rem; font-size: .85rem; }
}
/* ── 768px — tablets ─────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Search bar: hidden on mobile (hamburger provides access) */
.navbar-main .search-form { max-width: 220px; }
/* Hero: stack content, comfortable padding */
.hero-content { padding: 32px 24px; }
.hero-title { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; }
.hero-ctas { gap: 10px; }
/* Product cards: 2-column grid */
.col-6.col-md-4.col-lg-3 { flex: 0 0 50%; max-width: 50%; }
/* New arrivals: 2-col */
.col-12.col-sm-6.col-lg-3 { flex: 0 0 50%; max-width: 50%; }
/* Why NestAura: 2-col */
.col-md-6.col-lg-3 { flex: 0 0 50%; max-width: 50%; }
/* Reviews: single column */
.col-md-4 { flex: 0 0 100%; max-width: 100%; }
/* Blog cards: always full width */
.na-blog-grid {
grid-template-columns: 1fr !important;
}
/* Single post hero: compact */
.na-post-hero { padding: 40px 16px !important; }
/* Page hero sections */
.sp-page-mini-hero--contact,
.sp-page-mini-hero--returns,
.sp-page-mini-hero--track { padding: 48px 16px !important; }
/* Contact form: stack layout */
.sp-contact-layout { grid-template-columns: 1fr !important; }
/* Quick links: 3-col */
.col-6.col-sm-4.col-md-2 { flex: 0 0 33.333%; max-width: 33.333%; }
/* Forms: full-width inputs */
.sp-form-group input,
.sp-form-group select,
.sp-form-group textarea,
.newsletter-input,
.search-input {
width: 100%;
max-width: 100%;
font-size: 16px; /* prevents iOS zoom */
}
/* Newsletter form: stack */
.newsletter-form { flex-direction: column; align-items: stretch; gap: 10px; }
.newsletter-form .btn-gold { width: 100%; justify-content: center; }
/* Footer newsletter: stack */
.footer-col .d-flex.gap-2 { flex-direction: column; }
.footer-col .d-flex.gap-2 input { width: 100%; }
.footer-col .d-flex.gap-2 button { width: 100%; justify-content: center; }
}
/* ── 480px — large phones ────────────────────────────────────────── */
@media (max-width: 480px) {
/* Category: 2 col stays, product: 2 col stays */
/* Trust bar: 2×2 */
.trust-bar .col-6 { flex: 0 0 50%; max-width: 50%; }
/* Slider dots: hide on very small screens */
.slider-prev, .slider-next { display: none !important; }
/* Page title sizes */
.sp-mini-hero-title,
.sp-hero__title { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; }
/* Contact trust: 2×2 */
.sp-contact-trust { grid-template-columns: repeat(2,1fr) !important; }
/* About page highlights: 1 col */
.sp-highlights-grid,
.sp-details-grid { grid-template-columns: 1fr !important; }
}
/* ── Overflow safety on ALL widths ───────────────────────────────── */
/* Prevent any section from causing horizontal scroll */
section, .section-pad, .section-pad-sm,
.trust-bar, .flash-sale-banner, .newsletter-section,
.footer-main, .hero-slider {
overflow-x: hidden;
max-width: 100vw;
}
/* Best sellers scroll row: no horizontal overflow on page */
.d-flex.overflow-auto { -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
/* ── Product cards: uniform height in grid ───────────────────────── */
.product-card { display: flex; flex-direction: column; }
.product-card-body { flex: 1; display: flex; flex-direction: column; }
.product-card-body .product-prices { margin-top: auto; }
/* ── Blog card: fixed image ratio ────────────────────────────────── */
.na-blog-card__img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
aspect-ratio: 2 / 1;
}
/* ── Page templates: CLS stable heroes ──────────────────────────── */
.sp-page-mini-hero--contact,
.sp-page-mini-hero--returns,
.sp-page-mini-hero--track,
.sp-hero--shipping {
contain: layout;
min-height: 180px;
}
/* ====================================================================
NestAura Blog System Polish — v4.0
Covers: blog hero, blog cards, 2-col post layout, blog sidebar,
compact related posts, post hero classes, CTA strip, mobile
==================================================================== */
/* ── Blog Hero ────────────────────────────────────────────────────── */
.na-blog-hero__eyebrow {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #c9a227; /* --gold */
background: rgba(201,162,39,.12);
padding: .3rem .75rem;
border-radius: 20px;
margin-bottom: .75rem;
}
.na-blog-hero__desc {
font-size: 1.05rem;
color: rgba(255,255,255,.82);
margin: .5rem auto 0;
max-width: 560px;
}
/* ── Blog Index Section ───────────────────────────────────────────── */
.na-blog-index-section {
padding: 3rem 0 4rem;
background: var(--bg, #f6f8fb);
}
.na-blog-empty {
padding: 60px 24px;
text-align: center;
}
/* ── Blog Card: author + meta improvements ────────────────────────── */
.na-blog-card__img-link {
display: block;
overflow: hidden;
border-radius: 12px 12px 0 0;
}
.na-blog-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
font-size: .78rem;
color: #6b7a99;
margin: .4rem 0 .75rem;
}
.na-blog-card__author {
display: inline-flex;
align-items: center;
gap: .3rem;
}
.na-blog-card__read-time {
display: inline-flex;
align-items: center;
gap: .3rem;
}
.na-blog-card__meta-sep {
color: #c0c8d8;
user-select: none;
}
/* ── 2-Column Post Layout (single.php & archive.php) ─────────────── */
.na-post-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 2.5rem;
align-items: start;
padding-top: 3rem;
padding-bottom: 4rem;
}
.na-post-layout__main {
min-width: 0; /* prevent grid blowout */
}
.na-post-layout__sidebar {
position: sticky;
top: 88px; /* clears fixed nav */
min-width: 0;
}
/* ── Post Hero classes (replace inline styles) ────────────────────── */
.na-post-hero {
background: linear-gradient(135deg, #0f1f3d 0%, #1a3a6b 100%);
padding: 56px 24px 48px;
text-align: center;
}
.na-post-hero__inner {
max-width: 780px;
}
.na-post-hero__cat {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #c9a227;
background: rgba(201,162,39,.12);
padding: .3rem .75rem;
border-radius: 20px;
margin-bottom: 16px;
text-decoration: none;
transition: background .2s;
}
.na-post-hero__cat:hover { background: rgba(201,162,39,.22); }
.na-post-hero__title {
color: #fff;
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 800;
line-height: 1.25;
margin: 0 0 .75rem;
}
.na-post-hero__meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .35rem;
font-size: .85rem;
color: rgba(255,255,255,.78);
margin: 0;
}
.na-post-hero__author-link {
color: rgba(255,255,255,.9);
text-decoration: none;
}
.na-post-hero__author-link:hover { color: #c9a227; }
.na-post-hero__read-time {
display: inline-flex;
align-items: center;
gap: .3rem;
}
/* ── Post Featured Image ─────────────────────────────────────────── */
.na-post-featured-img {
margin: 0 0 2rem;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #e8eaf0;
}
.na-post-featured-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── Share label class (replaces inline font-weight) ─────────────── */
.na-share-label {
font-weight: 600;
color: #0f1f3d;
align-self: center;
font-size: 14px;
}
/* ── Author Box content wrapper ──────────────────────────────────── */
.na-author-box__content { flex: 1; min-width: 0; }
.na-author-box__name-link {
color: inherit;
text-decoration: none;
}
.na-author-box__name-link:hover { color: #1a3a6b; }
/* ── Compact Related Posts (mini-card grid) ───────────────────────── */
.na-related-posts {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1.5px solid var(--border, #e2e8f0);
}
.na-related-posts__heading {
font-size: 1.15rem;
font-weight: 700;
color: #0f1f3d;
margin: 0 0 1.25rem;
}
.na-related-mini-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.na-related-mini {
display: flex;
flex-direction: column;
border: 1px solid var(--border, #e2e8f0);
border-radius: 10px;
overflow: hidden;
background: #fff;
transition: box-shadow .2s, transform .2s;
}
.na-related-mini:hover {
box-shadow: 0 6px 20px rgba(15,31,61,.1);
transform: translateY(-3px);
}
.na-related-mini__thumb {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #e8eaf0;
}
.na-related-mini__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s;
}
.na-related-mini:hover .na-related-mini__thumb img { transform: scale(1.04); }
.na-related-mini__thumb--placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #c0c8d8;
}
.na-related-mini__body {
flex: 1;
display: flex;
flex-direction: column;
padding: .85rem 1rem;
}
.na-related-mini__cat {
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #1a3a6b;
margin-bottom: .4rem;
}
.na-related-mini__title {
font-size: .88rem;
font-weight: 700;
line-height: 1.35;
margin: 0 0 .4rem;
}
.na-related-mini__title a {
color: #0f1f3d;
text-decoration: none;
}
.na-related-mini__title a:hover { color: #1a3a6b; }
.na-related-mini__excerpt {
font-size: .78rem;
color: #6b7a99;
line-height: 1.5;
flex: 1;
margin: 0 0 .5rem;
}
.na-related-mini__link {
font-size: .78rem;
font-weight: 600;
color: #1a3a6b;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .25rem;
margin-top: auto;
}
.na-related-mini__link:hover { color: #c9a227; }
/* ── Post CTA Strip (replaces inline styles in single.php) ───────── */
.na-post-cta {
background: #1a3a6b;
padding: 48px 24px;
text-align: center;
}
.na-post-cta__inner {
max-width: 600px;
}
.na-post-cta__heading {
color: #fff;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 .75rem;
}
.na-post-cta__sub {
color: rgba(255,255,255,.8);
margin: 0 0 1.5rem;
font-size: .95rem;
}
/* ── Blog Sidebar ─────────────────────────────────────────────────── */
.na-blog-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.na-sidebar-widget {
background: #fff;
border: 1px solid var(--border, #e2e8f0);
border-radius: 12px;
padding: 1.25rem 1.25rem 1.4rem;
}
.na-sidebar-widget__title {
font-size: .82rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #0f1f3d;
margin: 0 0 1rem;
padding-bottom: .6rem;
border-bottom: 2px solid #c9a227;
}
/* Sidebar Search */
.na-sidebar-search {
display: flex;
gap: .5rem;
}
.na-sidebar-search__input {
flex: 1;
border: 1.5px solid var(--border, #e2e8f0);
border-radius: 8px;
padding: .5rem .75rem;
font-size: .875rem;
color: #0f1f3d;
outline: none;
transition: border-color .2s;
min-height: 44px;
}
.na-sidebar-search__input:focus { border-color: #1a3a6b; }
.na-sidebar-search__btn {
background: #1a3a6b;
color: #fff;
border: none;
border-radius: 8px;
padding: .5rem .85rem;
min-height: 44px;
min-width: 44px;
cursor: pointer;
font-size: .9rem;
transition: background .2s;
}
.na-sidebar-search__btn:hover { background: #c9a227; }
/* Sidebar Categories */
.na-sidebar-cats {
list-style: none;
margin: 0;
padding: 0;
}
.na-sidebar-cats__item {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f0f4f8;
}
.na-sidebar-cats__item:last-child { border-bottom: none; }
.na-sidebar-cats__item a {
flex: 1;
padding: .5rem .25rem;
font-size: .84rem;
color: #334155;
text-decoration: none;
transition: color .15s;
}
.na-sidebar-cats__item a:hover,
.na-sidebar-cats__item.is-current a { color: #1a3a6b; font-weight: 600; }
.na-sidebar-cats__count {
font-size: .7rem;
font-weight: 700;
color: #6b7a99;
background: #f0f4f8;
padding: .15rem .4rem;
border-radius: 20px;
min-width: 24px;
text-align: center;
}
/* Sidebar Recent Posts */
.na-sidebar-recent {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.na-sidebar-recent__item {
display: flex;
gap: .75rem;
align-items: flex-start;
}
.na-sidebar-recent__thumb {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 8px;
overflow: hidden;
background: #e8eaf0;
display: block;
}
.na-sidebar-recent__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.na-sidebar-recent__info {
flex: 1;
min-width: 0;
}
.na-sidebar-recent__title {
display: block;
font-size: .82rem;
font-weight: 600;
color: #0f1f3d;
text-decoration: none;
line-height: 1.35;
margin-bottom: .25rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.na-sidebar-recent__title:hover { color: #1a3a6b; }
.na-sidebar-recent__date {
font-size: .72rem;
color: #8898aa;
}
/* Sidebar Shop CTA */
.na-sidebar-widget--cta {
background: linear-gradient(135deg, #0f1f3d 0%, #1a3a6b 100%);
border: none;
}
.na-sidebar-cta__eyebrow {
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #c9a227;
margin: 0 0 .4rem;
}
.na-sidebar-cta__heading {
color: #fff;
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 .5rem;
}
.na-sidebar-cta__body {
font-size: .82rem;
color: rgba(255,255,255,.75);
margin: 0 0 1rem;
}
.na-sidebar-cta__btn {
width: 100%;
text-align: center;
display: block;
}
/* ── Sidebar dynamic widget normalisation ─────────────────────────── */
.na-sidebar-widget--dynamic .widget { margin-bottom: 0; }
.na-sidebar-widget--dynamic .widget-title,
.na-sidebar-widget--dynamic .widgettitle {
font-size: .82rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #0f1f3d;
margin: 0 0 .75rem;
}
.na-sidebar-widget--dynamic ul {
list-style: none;
margin: 0; padding: 0;
}
.na-sidebar-widget--dynamic ul li a {
font-size: .84rem;
color: #334155;
text-decoration: none;
padding: .35rem 0;
display: block;
}
.na-sidebar-widget--dynamic ul li a:hover { color: #1a3a6b; }
/* ── Blog grid: enforce equal-height cards ────────────────────────── */
.na-blog-grid {
align-items: stretch;
}
.na-blog-card {
height: 100%;
}
/* ── Blog grid in archive sidebar layout ─────────────────────────── */
/* Removed: archive.php now uses full-width na-blog-wrap layout. */
/* The rule below is intentionally disabled to prevent grid conflicts. */
/* .na-post-layout__main .na-blog-grid { grid-template-columns: repeat(2, 1fr); } */
/* ── Mobile Responsive — Blog System ─────────────────────────────── */
@media (max-width: 1100px) {
.na-post-layout {
grid-template-columns: 1fr 280px;
gap: 2rem;
}
}
@media (max-width: 900px) {
/* Stack layout: sidebar below main */
.na-post-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.na-post-layout__sidebar {
position: static;
top: unset;
}
/* Archive grid: 2 cols when full-width */
.na-post-layout__main .na-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Related mini: 2 cols */
.na-related-mini-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
/* Blog index: already handled by earlier rule (1fr) */
.na-post-layout__main .na-blog-grid {
grid-template-columns: 1fr;
}
.na-related-mini-grid {
grid-template-columns: 1fr;
}
.na-post-hero {
padding: 40px 20px 32px;
}
.na-blog-hero__desc { font-size: .92rem; }
.na-post-cta { padding: 36px 20px; }
.na-post-cta__heading { font-size: 1.25rem; }
.na-blog-index-section { padding: 2rem 0 3rem; }
}
@media (max-width: 480px) {
.na-post-hero__title { font-size: 1.4rem; }
.na-post-hero__meta { font-size: .78rem; }
.na-blog-card__meta { font-size: .72rem; }
.na-sidebar-widget { padding: 1rem; }
.na-related-mini-grid { gap: .75rem; }
}
/* ======================================================================
NestAura Blog System — v4.0 Production Fix
Supersedes all earlier conflicting blog grid / card rules.
Uses !important selectively to cut through accumulated overrides.
======================================================================
Fixes:
- 3-col grid on desktop, 2-col tablet, 1-col mobile
- Aspect-ratio 16:9 image (no more fixed-height placeholder)
- Removes dark blue placeholder div entirely
- Equal-height cards via flex-column + flex:1 body
- Author / meta row layout
- Category badge styled with brand colours
- Excerpt clamped to 3 lines
- Pagination dots styled
- Blog hero refined
====================================================================== */
/* ── Blog section wrapper ─────────────────────────────────────────── */
.na-blog-index-section {
padding: 3rem 0 5rem !important;
background: #f6f8fb !important;
}
/* na-blog-wrap: provides max-width + gutter, keeps grid clean */
.na-blog-wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* ── 3-column grid — definitive rules ────────────────────────────── */
/* Full-width blog listing (page-blog.php, not inside na-post-layout) */
.na-blog-index-section .na-blog-grid,
.na-blog-wrap .na-blog-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 2rem !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
align-items: stretch;
}
@media (max-width: 1024px) {
.na-blog-index-section .na-blog-grid,
.na-blog-wrap .na-blog-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
.na-blog-index-section .na-blog-grid,
.na-blog-wrap .na-blog-grid {
grid-template-columns: 1fr !important;
gap: 1.25rem !important;
}
}
/* ── Blog card ────────────────────────────────────────────────────── */
.na-blog-card {
display: flex !important;
flex-direction: column !important;
background: #fff;
border: 1px solid #e5e9f0;
border-radius: 14px;
overflow: hidden;
transition: box-shadow .25s ease, transform .25s ease;
height: 100%;
}
.na-blog-card:hover {
box-shadow: 0 10px 36px rgba(15, 31, 61, .13);
transform: translateY(-4px);
}
/* ── Featured image wrapper — 16:9 aspect ratio, always an ![]()
─── */
/* This replaces the old fixed-height + dark placeholder approach. */
.na-blog-card__img-link {
display: block !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
background: #dde3ed !important; /* neutral grey while image loads */
flex-shrink: 0;
text-decoration: none;
}
.na-blog-card__img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform .45s ease;
}
.na-blog-card:hover .na-blog-card__img {
transform: scale(1.05);
}
/* Hide the old dark placeholder div entirely if it still renders */
.na-blog-card__img-placeholder {
display: none !important;
}
/* ── Card body ────────────────────────────────────────────────────── */
.na-blog-card__body {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
padding: 1.2rem 1.35rem 1.4rem !important;
gap: .45rem;
}
/* ── Category badge ────────────────────────────────────────────────── */
.na-blog-card__cat {
display: inline-block;
font-size: .67rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #1a3a6b;
background: rgba(26, 58, 107, .08);
padding: .28rem .7rem;
border-radius: 20px;
text-decoration: none;
align-self: flex-start;
line-height: 1.4;
transition: background .2s;
}
.na-blog-card__cat:hover {
background: rgba(26, 58, 107, .16);
}
/* ── Post title ────────────────────────────────────────────────────── */
.na-blog-card__title {
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
margin: .1rem 0 0 !important;
}
.na-blog-card__title a {
color: #0f1f3d;
text-decoration: none;
}
.na-blog-card__title a:hover { color: #1a3a6b; }
/* ── Excerpt — max 3 lines ─────────────────────────────────────────── */
.na-blog-card__excerpt {
font-size: .875rem !important;
color: #5a6a82 !important;
line-height: 1.58 !important;
flex: 1 !important;
margin: 0 !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* ── Meta row: author · date · read time ──────────────────────────── */
.na-blog-card__meta {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: .28rem .4rem;
font-size: .75rem !important;
color: #6b7a99 !important;
margin: .2rem 0 !important;
}
.na-blog-card__author {
display: inline-flex;
align-items: center;
gap: .28rem;
font-weight: 500;
color: #5a6a82;
}
.na-blog-card__read-time {
display: inline-flex;
align-items: center;
gap: .28rem;
}
.na-blog-card__meta-sep { color: #c0cad8; user-select: none; }
/* ── Read More link ────────────────────────────────────────────────── */
.na-blog-card__link {
display: inline-flex !important;
align-items: center;
gap: .3rem;
font-size: .82rem !important;
font-weight: 700 !important;
color: #1a3a6b !important;
text-decoration: none !important;
margin-top: auto !important;
padding-top: .5rem !important;
transition: color .2s;
}
.na-blog-card__link:hover { color: #c9a227 !important; }
/* ── Blog hero — definitive styles ─────────────────────────────────── */
.na-blog-hero {
background: linear-gradient(135deg, #0a1628 0%, #1a3a6b 55%, #1e4a8a 100%) !important;
padding: 72px 24px 56px !important;
text-align: center !important;
}
.na-blog-hero h1 {
color: #ffffff !important;
font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
font-weight: 800 !important;
margin: .5rem 0 .75rem !important;
line-height: 1.2 !important;
}
.na-blog-hero__eyebrow {
display: inline-block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #c9a227;
background: rgba(201, 162, 39, .14);
padding: .3rem .8rem;
border-radius: 20px;
margin-bottom: .8rem;
}
.na-blog-hero__desc {
font-size: 1.05rem !important;
color: rgba(255, 255, 255, .82) !important;
margin: 0 auto !important;
max-width: 520px !important;
}
/* ── Blog pagination ─────────────────────────────────────────────── */
.na-blog-pagination {
display: flex;
justify-content: center;
gap: .5rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.na-blog-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 .5rem;
border-radius: 8px;
font-size: .875rem;
font-weight: 600;
color: #1a3a6b;
background: #fff;
border: 1.5px solid #e5e9f0;
text-decoration: none;
transition: all .2s;
}
.na-blog-pagination .page-numbers.current {
background: #1a3a6b;
color: #fff;
border-color: #1a3a6b;
}
.na-blog-pagination .page-numbers:hover:not(.current) {
background: #f0f4f8;
border-color: #1a3a6b;
}
/* ── Empty state ─────────────────────────────────────────────────── */
.na-blog-empty {
padding: 4rem 1.5rem 5rem;
text-align: center;
}
/* ── Mobile tweaks ───────────────────────────────────────────────── */
@media (max-width: 768px) {
.na-blog-hero { padding: 48px 20px 40px !important; }
.na-blog-wrap { padding: 0 1rem; }
.na-blog-index-section { padding: 2rem 0 3.5rem !important; }
}
@media (max-width: 480px) {
.na-blog-card__body { padding: 1rem 1.1rem 1.2rem !important; }
.na-blog-card__title { font-size: .95rem !important; }
.na-blog-card__excerpt { font-size: .82rem !important; }
}
/* ======================================================================
v4.0 BLOG GRID — HIGH-SPECIFICITY OVERRIDE
Covers both template paths:
page-blog.php → body.page-template-page-blog
home.php → body.home (when page_for_posts is set)
These selectors win over Bootstrap columns and any generic
.na-blog-grid rules defined earlier in this file.
==================================================================== */
body.page-template-page-blog .na-blog-grid,
body.home .na-blog-grid,
body.blog .na-blog-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 2rem !important;
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 2rem 1.5rem !important;
align-items: stretch !important;
}
@media (max-width: 1024px) {
body.page-template-page-blog .na-blog-grid,
body.home .na-blog-grid,
body.blog .na-blog-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
body.page-template-page-blog .na-blog-grid,
body.home .na-blog-grid,
body.blog .na-blog-grid {
grid-template-columns: 1fr !important;
}
}
/* Blog card: ensure full height fill inside grid cells */
body.page-template-page-blog .na-blog-card,
body.home .na-blog-card,
body.blog .na-blog-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* Featured image: 16/9 ratio, object-fit cover, no height shift */
body.page-template-page-blog .na-blog-card__img-link,
body.home .na-blog-card__img-link,
body.blog .na-blog-card__img-link {
display: block !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
background: #e8eaf0 !important;
}
body.page-template-page-blog .na-blog-card__img,
body.home .na-blog-card__img,
body.blog .na-blog-card__img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* ══════════════════════════════════════════════════════════════════
HOMEPAGE BLOG PREVIEW SECTION (.na-home-blog-section)
Appears between Reviews and Quick Links on the front page.
══════════════════════════════════════════════════════════════════ */
/* Section wrapper */
.na-home-blog-section {
background: #f6f8fb;
}
/* Grid inside section — forces 3-col, inherits .na-blog-wrap override */
/* (.na-blog-wrap .na-blog-grid already has 3-col with !important) */
.na-home-blog-section .na-hp-blog-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 2rem !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
align-items: stretch;
}
/* Tablet: 2 columns */
@media (max-width: 1024px) {
.na-home-blog-section .na-hp-blog-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Mobile: 1 column */
@media (max-width: 640px) {
.na-home-blog-section .na-hp-blog-grid {
grid-template-columns: 1fr !important;
gap: 1.25rem !important;
}
}
/* "View All Articles" button row */
.na-home-blog-section .text-center {
margin-top: 2.5rem;
}
/* Card hover lift (consistent with blog page) */
.na-home-blog-section .na-blog-card:hover {
box-shadow: 0 10px 36px rgba(15, 31, 61, .13);
transform: translateY(-4px);
}
/* Ensure meta separators render */
.na-blog-card__meta-sep {
color: #bcc5d6;
font-size: .75rem;
line-height: 1;
}
/* ══════════════════════════════════════════════════════════════════
SINGLE POST — AUTHOR BOX PREMIUM REDESIGN
Root cause of giant avatar: .na-post-body img { width: 100% }
overrides .na-author-box__avatar { width: 72px } (lower specificity).
Fix: use .na-author-box .na-author-box__avatar (0,2,0) to win.
══════════════════════════════════════════════════════════════════ */
/* Section: full card with gold left-border accent */
.na-author-box {
display: flex !important;
align-items: center !important;
gap: 1.4rem !important;
background: #fff !important;
border: 1px solid #e5e9f0 !important;
border-left: 4px solid #c9a227 !important;
border-radius: 0 16px 16px 0 !important;
padding: 1.5rem 1.75rem !important;
margin: 2.5rem 0 !important;
box-shadow: 0 4px 20px rgba(15,31,61,.07) !important;
}
/* THE FIX — beats .na-post-body img { width:100%; margin-bottom:32px } */
.na-author-box .na-author-box__avatar {
width: 80px !important;
height: 80px !important;
min-width: 80px !important;
border-radius: 50% !important;
object-fit: cover !important;
flex-shrink: 0 !important;
margin: 0 !important; /* remove the 32px bottom margin */
border: 3px solid #c9a227 !important;
box-shadow: 0 0 0 3px rgba(201,162,39,.15) !important;
display: block !important;
}
/* Content wrapper */
.na-author-box .na-author-box__content {
flex: 1 !important;
min-width: 0 !important;
}
/* "Written by" eyebrow label */
.na-author-box__eyebrow {
font-size: .67rem !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: #c9a227 !important;
margin: 0 0 .2rem !important;
line-height: 1 !important;
}
/* Author name */
.na-author-box .na-author-box__name {
font-size: 1rem !important;
font-weight: 700 !important;
color: #0f1f3d !important;
margin: 0 0 .35rem !important;
line-height: 1.3 !important;
}
.na-author-box .na-author-box__name-link {
color: #0f1f3d !important;
text-decoration: none !important;
}
.na-author-box .na-author-box__name-link:hover {
color: #1a3a6b !important;
text-decoration: underline !important;
}
/* Bio text */
.na-author-box .na-author-box__bio {
font-size: .875rem !important;
color: #5a6a82 !important;
line-height: 1.58 !important;
margin: 0 !important;
}
/* Mobile: stack vertically */
@media (max-width: 540px) {
.na-author-box {
flex-direction: column !important;
text-align: center !important;
border-left: none !important;
border-top: 4px solid #c9a227 !important;
border-radius: 16px !important;
}
.na-author-box .na-author-box__avatar {
margin: 0 auto !important;
}
}
/* ══════════════════════════════════════════════════════════════════
SIDEBAR — CTA WIDGET FIX + PREMIUM POLISH
══════════════════════════════════════════════════════════════════ */
/* Force dark gradient on CTA widget — !important beats equal-specificity rules */
.na-sidebar-widget.na-sidebar-widget--cta {
background: linear-gradient(135deg, #0f1f3d 0%, #1a3a6b 100%) !important;
border: none !important;
box-shadow: 0 6px 24px rgba(15,31,61,.18) !important;
}
/* Sidebar widget cards: subtle premium shadow */
.na-sidebar-widget {
box-shadow: 0 2px 12px rgba(15,31,61,.06) !important;
}
/* Sidebar widget titles: gold underline accent */
.na-sidebar-widget__title {
padding-bottom: .65rem !important;
border-bottom: 2px solid #c9a227 !important;
margin-bottom: 1.1rem !important;
}
/* Recent articles: thumbnail hover effect */
.na-sidebar-recent__thumb {
transition: opacity .2s ease !important;
}
.na-sidebar-recent__thumb:hover {
opacity: .85 !important;
}
/* Recent articles: title hover colour */
.na-sidebar-recent__title:hover {
color: #c9a227 !important;
text-decoration: underline !important;
}
/* Sidebar CTA button: full-width, bold */
.na-sidebar-cta__btn.btn-gold {
display: block !important;
width: 100% !important;
text-align: center !important;
font-weight: 700 !important;
padding: .65rem 1rem !important;
margin-top: .25rem !important;
}
/* ── Post CTA strip (full-width below post) ───────────────────────── */
.na-post-cta {
background: linear-gradient(135deg, #0f1f3d 0%, #1a3a6b 100%);
padding: 3rem 1.5rem;
text-align: center;
}
.na-post-cta__inner { max-width: 600px; margin: 0 auto; }
.na-post-cta__heading {
color: #fff;
font-size: 1.6rem;
font-weight: 700;
margin: 0 0 .5rem;
}
.na-post-cta__sub {
color: rgba(255,255,255,.75);
font-size: .9rem;
margin: 0 0 1.5rem;
}
/* ══════════════════════════════════════════════════════════════════
SIDEBAR — PROFESSIONAL POLISH v2
Fixes:
1. Recent articles: date stacking below title (display: block)
2. Thumbnail size locked to 72px regardless of global img resets
3. Clean dividers between items
4. CTA dark gradient — chained + !important so nothing can override
══════════════════════════════════════════════════════════════════ */
/* ── Base widget card ──────────────────────────────────────────── */
.na-blog-sidebar .na-sidebar-widget {
border-radius: 14px !important;
padding: 1.4rem 1.5rem 1.5rem !important;
box-shadow: 0 2px 14px rgba(15,31,61,.07) !important;
}
/* ── Widget title underline ────────────────────────────────────── */
.na-blog-sidebar .na-sidebar-widget__title {
display: flex !important;
align-items: center !important;
gap: .5rem !important;
font-size: .78rem !important;
letter-spacing: .12em !important;
border-bottom: 2px solid #c9a227 !important;
padding-bottom: .65rem !important;
margin-bottom: 1.1rem !important;
}
/* ── Recent articles list ──────────────────────────────────────── */
.na-sidebar-recent {
gap: 0 !important; /* gap handled per-item via padding */
}
.na-sidebar-recent__item {
display: flex !important;
align-items: flex-start !important;
gap: .85rem !important;
padding: .85rem 0 !important;
border-bottom: 1px solid #f0f2f6 !important;
}
.na-sidebar-recent__item:first-child {
padding-top: 0 !important;
}
.na-sidebar-recent__item:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
}
/* Thumbnail: 72×72 locked — beats any global img { width:100% } reset */
.na-sidebar-recent__thumb {
width: 72px !important;
min-width: 72px !important;
height: 72px !important;
border-radius: 10px !important;
overflow: hidden !important;
flex-shrink: 0 !important;
display: block !important;
background: #e8eaf0 !important;
transition: opacity .2s ease !important;
}
.na-sidebar-recent__thumb:hover { opacity: .85 !important; }
.na-sidebar-recent__thumb img {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 72px !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* Info column: title then date stacked vertically */
.na-sidebar-recent__info {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: .25rem !important;
}
.na-sidebar-recent__title {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: .82rem !important;
font-weight: 600 !important;
color: #0f1f3d !important;
text-decoration: none !important;
line-height: 1.38 !important;
margin: 0 !important;
}
.na-sidebar-recent__title:hover {
color: #c9a227 !important;
text-decoration: underline !important;
}
.na-sidebar-recent__date {
display: block !important; /* KEY FIX: was inline, now stacks below title */
font-size: .71rem !important;
color: #94a3b8 !important;
margin: 0 !important;
}
/* ── CTA shop widget — belt, braces and superglue ─────────────── */
.na-blog-sidebar .na-sidebar-widget.na-sidebar-widget--cta,
.na-sidebar-widget.na-sidebar-widget--cta,
.na-blog-sidebar .na-sidebar-widget--cta {
background: linear-gradient(135deg, #0f1f3d 0%, #1a3a6b 100%) !important;
border: none !important;
box-shadow: 0 8px 32px rgba(15,31,61,.25) !important;
padding: 1.75rem !important;
}
.na-sidebar-cta {
display: flex !important;
flex-direction: column !important;
gap: .1rem !important;
}
.na-sidebar-cta__eyebrow {
font-size: .67rem !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #c9a227 !important;
margin: 0 0 .35rem !important;
}
.na-sidebar-cta__heading {
color: #fff !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin: 0 0 .55rem !important;
}
.na-sidebar-cta__body {
font-size: .81rem !important;
color: rgba(255,255,255,.78) !important;
line-height: 1.5 !important;
margin: 0 0 1.1rem !important;
}
.na-sidebar-cta__btn {
display: block !important;
width: 100% !important;
text-align: center !important;
font-weight: 700 !important;
padding: .7rem 1rem !important;
border-radius: 8px !important;
}
/* CTA widget title inherits sidebar title style but inverted for dark bg */
.na-sidebar-widget--cta .na-sidebar-widget__title {
color: rgba(255,255,255,.5) !important;
border-bottom-color: rgba(201,162,39,.35) !important;
}
/* ══════════════════════════════════════════════════════════════════
NESTAURA PRICE TICKET BADGE v4.1
Inspired by premium retail ticket design — navy / gold theme
══════════════════════════════════════════════════════════════════ */
.product-prices--ticket {
margin-bottom: .85rem !important;
margin-top: auto !important;
}
/* ── Amazon-style price block — shop loop cards & single product page ─────── */
/* Replaces the old crystal ticket (.na-price-ticket) — v4.7 */
/* Loop card: compact layout */
.product-card .na-price-block {
margin-top: .25rem;
font-family: inherit;
}
.product-card .na-price-row {
display: flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
margin-bottom: .18rem;
}
.product-card .na-pct-badge {
background: #c9271d;
color: #fff;
font-size: .72rem;
font-weight: 700;
padding: .1rem .42rem;
border-radius: 3px;
letter-spacing: .01em;
white-space: nowrap;
}
.product-card .na-sale-price {
font-size: 1.25rem;
font-weight: 800;
color: #0f1f3d;
line-height: 1;
}
.product-card .na-was-row {
font-size: .78rem;
color: #6b7280;
line-height: 1.4;
}
.product-card .na-was-row s {
text-decoration-color: #9ca3af;
}
/* ── Single product price block — anchored to #na-variation-ticket ──────────
Previous selectors used body.single-product … .summary … which failed to
match on some Hostinger / WooCommerce DOM layouts. ID selector guarantees
a match regardless of surrounding class stack.
──────────────────────────────────────────────────────────────────────── */
#na-variation-ticket {
margin: .1rem 0 1.25rem;
font-family: inherit;
}
#na-variation-ticket .na-price-block {
margin: 0 0 .5rem !important;
font-family: inherit !important;
}
#na-variation-ticket .na-price-row {
display: flex !important;
align-items: center !important;
gap: .5rem !important;
flex-wrap: wrap !important;
margin-bottom: .35rem !important;
}
/* Percentage badge — matches loop card red */
#na-variation-ticket .na-pct-badge {
display: inline-flex !important;
align-items: center !important;
background: #c9271d !important;
color: #fff !important;
font-size: .85rem !important;
font-weight: 700 !important;
padding: .2rem .6rem !important;
border-radius: 4px !important;
letter-spacing: .01em !important;
white-space: nowrap !important;
line-height: 1.3 !important;
}
/* Sale price — large bold navy, matches loop colour */
#na-variation-ticket .na-sale-price {
font-size: 2.4rem !important;
font-weight: 800 !important;
color: #0f1f3d !important;
line-height: 1 !important;
letter-spacing: -.03em !important;
}
/* Was: $X struck-through line */
#na-variation-ticket .na-was-row {
font-size: .92rem !important;
color: #6b7280 !important;
margin-bottom: .18rem !important;
line-height: 1.5 !important;
}
#na-variation-ticket .na-was-row s {
text-decoration-color: #9ca3af !important;
}
/* You save: $Y (Z%) line — green, matches loop */
#na-variation-ticket .na-save-row {
font-size: .9rem !important;
color: #16a34a !important;
font-weight: 600 !important;
line-height: 1.5 !important;
}
/* Plain price (non-sale) */
#na-variation-ticket .na-plain-price {
font-size: 2.4rem !important;
font-weight: 800 !important;
color: #0f1f3d !important;
letter-spacing: -.03em !important;
line-height: 1 !important;
display: inline-block !important;
}
/* "From" label for variable non-sale */
#na-variation-ticket .na-from-label {
font-size: .75rem !important;
font-weight: 600 !important;
color: #6b7280 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
margin-right: .3rem !important;
vertical-align: middle !important;
}
/* Mobile: scale down price on small screens */
@media (max-width: 575px) {
#na-variation-ticket .na-sale-price,
#na-variation-ticket .na-plain-price {
font-size: 1.85rem !important;
}
#na-variation-ticket .na-pct-badge {
font-size: .75rem !important;
}
}
/* ══════════════════════════════════════════════════════════════════
COMPREHENSIVE RESPONSIVE FIXES v4.1
Covers: trust badges, quick links, testimonials, section padding,
related products, font-size gaps, general polish
══════════════════════════════════════════════════════════════════ */
/* ── 1. Global section padding — tighter on small screens ─────── */
.section-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (max-width: 768px) { .section-pad { padding-top: 2.5rem; padding-bottom: 2.5rem; } }
@media (max-width: 480px) { .section-pad { padding-top: 1.75rem; padding-bottom: 1.75rem; } }
/* ── 2. Trust badges — stack to 2×2 on small mobile ──────────── */
@media (max-width: 480px) {
.trust-strip .col-6 { flex: 0 0 50%; max-width: 50%; }
.trust-badge { padding: .75rem .5rem; font-size: .75rem; }
}
@media (max-width: 360px) {
.trust-strip .col-6 { flex: 0 0 100%; max-width: 100%; }
}
/* ── 3. Quick links / category pills — wrap on mobile ─────────── */
@media (max-width: 480px) {
.quick-links-grid,
.na-quick-links {
grid-template-columns: repeat(3, 1fr) !important;
gap: .5rem !important;
}
}
@media (max-width: 360px) {
.quick-links-grid,
.na-quick-links {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ── 4. Testimonials — 1 column on mobile ─────────────────────── */
@media (max-width: 640px) {
.testimonials-grid,
.na-testimonials-grid {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
}
/* ── 5. Related products — 2 columns at 768-1024px ───────────── */
@media (max-width: 1024px) and (min-width: 641px) {
.na-related-products__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
.na-related-products__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
.na-related-products__grid { grid-template-columns: 1fr !important; }
}
/* ── 6. Newsletter section — fluid title ─────────────────────── */
.newsletter-section .section-title,
.na-newsletter .section-title {
font-size: clamp(1.3rem, 4vw, 1.9rem);
}
/* ── 7. Product cards — tighter padding on mobile ─────────────── */
@media (max-width: 480px) {
.product-card-body { padding: .75rem .65rem; }
.product-name { font-size: .82rem; }
/* na-price-ticket removed v4.7 — see na-price-block mobile rules above */
}
/* ── 8. Hero slider text — clamp on all sizes ─────────────────── */
.hero-title { font-size: clamp(1.5rem, 4.5vw, 2.8rem); line-height: 1.15; }
.hero-subtitle { font-size: clamp(.82rem, 2vw, 1rem); }
@media (max-width: 480px) {
.hero-content { padding: 1.5rem 1rem; }
.hero-ctas { flex-direction: column; gap: .6rem; }
.hero-ctas .btn-gold,
.hero-ctas .btn-outline-na { width: 100%; text-align: center; }
}
/* ── 9. Footer links — comfortable tap targets on mobile ──────── */
@media (max-width: 640px) {
.footer-links a { padding: .2rem 0; display: inline-block; }
.footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}
/* ── 10. Search bar — show on mobile (was hidden ≤640px) ─────── */
@media (max-width: 640px) {
.search-form {
display: flex !important;
order: 3;
flex-basis: 100%;
margin-top: .4rem;
}
.navbar-main .container-xl > .d-flex { flex-wrap: wrap; }
}
/* ── 11. Blog cards — 1 column on phones ─────────────────────── */
@media (max-width: 540px) {
.na-blog-grid { grid-template-columns: 1fr !important; }
.na-blog-card__img { aspect-ratio: 16/9; }
}
/* ── 12. Single post — remove side padding on mobile ─────────── */
@media (max-width: 640px) {
.na-post-body { padding: 24px 16px !important; }
.na-post-hero__title { font-size: clamp(1.3rem, 6vw, 1.9rem); }
.na-share-buttons { flex-wrap: wrap; gap: .5rem; }
}
/* ── 13. Author box — stack on very narrow screens ────────────── */
@media (max-width: 480px) {
.na-author-box {
flex-direction: column !important;
align-items: flex-start !important;
gap: .75rem !important;
}
}
/* ── 14. Mega menu horizontal scroll on tablet ────────────────── */
@media (max-width: 1024px) and (min-width: 993px) {
.nav-cats { overflow-x: auto; white-space: nowrap; }
.nav-cats::-webkit-scrollbar { height: 3px; }
.nav-cats::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 2px; }
}
/* ── 15. Prevent horizontal scroll from inline styles ─────────── */
html, body { overflow-x: hidden !important; max-width: 100vw; }
.container-xl { overflow-x: hidden; }
/* ── 16. WooCommerce page headings — mobile size ─────────────── */
@media (max-width: 640px) {
.woocommerce h1.page-title,
.woocommerce-page h1.page-title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
.woocommerce-products-header { padding: 1.5rem 0 1rem; }
}
/* ══════════════════════════════════════════════════════════════════
SINGLE PRODUCT PAGE — PRICE + VARIATION STYLING v4.7
All rules scoped to body.single-product — zero impact on homepage,
category pages, archive pages, or any WooCommerce shortcodes.
══════════════════════════════════════════════════════════════════ */
/* Standard price: strikethrough in muted grey */
body.single-product .woocommerce div.product p.price del,
body.single-product .woocommerce div.product span.price del {
opacity: 1 !important;
color: #94a3b8 !important;
}
body.single-product .woocommerce div.product p.price del .woocommerce-Price-amount,
body.single-product .woocommerce div.product span.price del .woocommerce-Price-amount,
body.single-product .woocommerce div.product p.price del bdi,
body.single-product .woocommerce div.product span.price del bdi {
color: #94a3b8 !important;
font-size: 1rem !important;
font-weight: 400 !important;
}
/* Sale price: large, gold */
body.single-product .woocommerce div.product p.price ins,
body.single-product .woocommerce div.product span.price ins {
text-decoration: none !important;
background: none !important;
}
body.single-product .woocommerce div.product p.price ins .woocommerce-Price-amount,
body.single-product .woocommerce div.product span.price ins .woocommerce-Price-amount,
body.single-product .woocommerce div.product p.price ins bdi,
body.single-product .woocommerce div.product span.price ins bdi {
color: #c9a227 !important;
font-size: 2rem !important;
font-weight: 800 !important;
}
/* Regular (non-sale) single product price */
body.single-product .woocommerce div.product p.price > .woocommerce-Price-amount:only-child,
body.single-product .woocommerce div.product span.price > .woocommerce-Price-amount:only-child {
color: #0f1f3d !important;
font-size: 1.9rem !important;
font-weight: 800 !important;
}
/* Variable product price range */
body.single-product .woocommerce div.product p.price,
body.single-product .woocommerce div.product span.price {
color: #0f1f3d !important;
font-size: 1.7rem !important;
font-weight: 700 !important;
}
/* .woocommerce-variation-price styling removed — element is hidden entirely;
#na-variation-ticket is the only visible price on single product pages. */
/* na-price-ticket single product override removed v4.7 — see na-price-block rules */
/* Variation swatches / attribute table — single product page only */
body.single-product .woocommerce div.product .variations td,
body.single-product .woocommerce div.product .variations th {
padding: .5rem .4rem !important;
vertical-align: middle !important;
}
body.single-product .woocommerce div.product .variations label {
font-weight: 600 !important;
color: #0f1f3d !important;
}
body.single-product .woocommerce div.product .variations select {
border: 1.5px solid #c9a227 !important;
border-radius: 8px !important;
padding: .45rem .75rem !important;
font-weight: 600 !important;
color: #0f1f3d !important;
background: #fffdf5 !important;
min-width: 180px;
}
body.single-product .woocommerce div.product .variations select:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(201,162,39,.25) !important;
}
/* Stock status — single product page only */
body.single-product .woocommerce div.product .stock.in-stock {
color: #16a34a !important;
font-weight: 700 !important;
font-size: .88rem !important;
}
body.single-product .woocommerce div.product .stock.out-of-stock {
color: #dc2626 !important;
font-weight: 700 !important;
}
/* ── Buy Now Button — Shop Loop Product Cards (v4.1) ──────────────────────── */
/* Gold glass pill that replaces the default navy button in every product card */
.product-card .button.add_to_cart_button,
.product-card-body .button.add_to_cart_button,
.product-card .button.add_to_cart_button.ajax_add_to_cart,
ul.products li.product .product-card .button {
display: block !important;
width: 100% !important;
text-align: center !important;
background: linear-gradient(135deg, #c9a227 0%, #e0be3a 50%, #c9a227 100%) !important;
color: #0f1f3d !important;
border: none !important;
border-radius: 10px !important;
font-weight: 700 !important;
font-size: .85rem !important;
padding: .6rem 1rem !important;
letter-spacing: .04em !important;
cursor: pointer !important;
box-shadow: 0 4px 14px rgba(201,162,39,.32), inset 0 1px 0 rgba(255,255,255,.3) !important;
transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
text-transform: uppercase !important;
}
.product-card .button.add_to_cart_button:hover,
.product-card-body .button.add_to_cart_button:hover,
ul.products li.product .product-card .button:hover {
background: linear-gradient(135deg, #b8901f 0%, #c9a227 100%) !important;
color: #0c1a38 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(201,162,39,.42), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
/* ── Single Product: hide ALL default WC / AliDropship price outputs ──────── */
/* Strictly scoped to body.single-product — NEVER fires on homepage or other */
/* pages even if WooCommerce shortcodes render .woocommerce div.product there.*/
/* The .price div stays in DOM (just invisible) so WC variation JS can write */
/* to it — required for correct add-to-cart / checkout price passing. */
body.single-product .woocommerce div.product .summary .price,
body.single-product .woocommerce div.product .summary p.price,
body.single-product .woocommerce div.product .woocommerce-variation-price,
body.single-product .woocommerce div.product .woocommerce-variation-price .price,
body.single-product .woocommerce div.product .woocommerce-variation-price .woocommerce-Price-amount {
display: none !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* Our custom ticket is always the visible price — single product page only */
body.single-product #na-variation-ticket {
display: block !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}
/* ── Single Product "Buy Now" box + RED button — body.single-product only ─── */
/* Strictly scoped — never fires on homepage, shop, archive, or category pages */
body.single-product .woocommerce div.product form.cart {
background: linear-gradient(135deg, #f9f9ff 0%, #ffffff 100%) !important;
border: 2px solid rgba(15,31,61,.12) !important;
border-radius: 14px !important;
padding: 1.1rem 1.25rem !important;
box-shadow: 0 4px 20px rgba(15,31,61,.08) !important;
margin-top: .75rem !important;
display: flex !important;
align-items: center !important;
gap: .75rem !important;
flex-wrap: wrap !important;
}
/* Red "Buy Now" button — single product page only */
body.single-product .woocommerce div.product form.cart .single_add_to_cart_button,
body.single-product .woocommerce div.product form.cart button[type=submit],
body.single-product .woocommerce div.product form.cart button.button,
body.single-product .woocommerce div.product .single_add_to_cart_button,
body.single-product .woocommerce div.product button[type=submit].single_add_to_cart_button {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 45%, #b91c1c 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
font-weight: 800 !important;
font-size: 1rem !important;
padding: .82rem 2.4rem !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
cursor: pointer !important;
box-shadow: 0 6px 22px rgba(185,28,28,.45), inset 0 1px 0 rgba(255,190,190,.35) !important;
transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
flex-shrink: 0 !important;
min-width: 160px !important;
text-align: center !important;
}
body.single-product .woocommerce div.product form.cart .single_add_to_cart_button:hover,
body.single-product .woocommerce div.product form.cart button[type=submit]:hover,
body.single-product .woocommerce div.product .single_add_to_cart_button:hover,
body.single-product .woocommerce div.product button[type=submit].single_add_to_cart_button:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 32px rgba(185,28,28,.55), inset 0 1px 0 rgba(255,180,180,.2) !important;
}
/* Quantity input — single product page only */
body.single-product .woocommerce div.product form.cart .qty,
body.single-product .woocommerce div.product form.cart input.qty {
border: 2px solid rgba(15,31,61,.2) !important;
border-radius: 8px !important;
padding: .6rem .5rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: #0f1f3d !important;
width: 64px !important;
text-align: center !important;
background: #fff !important;
}
body.single-product .woocommerce div.product form.cart .qty:focus,
body.single-product .woocommerce div.product form.cart input.qty:focus {
outline: none !important;
border-color: #c9a227 !important;
box-shadow: 0 0 0 3px rgba(201,162,39,.2) !important;
}
/* ═══════════════════════════════════════════════════════════════════
MY ACCOUNT — NestAura Branded Styling
All rules scoped to body.woocommerce-account (or .na-account-*)
Does NOT affect: cart, checkout, shop, or single product pages.
═══════════════════════════════════════════════════════════════════ */
/* ── Page wrapper ──────────────────────────────────────────────── */
.na-account-wrapper {
background: linear-gradient(180deg, #f0f4f9 0%, #fff 40%, #f8fafc 100%);
min-height: 100vh;
}
/* ── Hero ──────────────────────────────────────────────────────── */
.na-account-hero {
background: linear-gradient(135deg, #0f1f3d 0%, #1a3a6b 60%, #2a5298 100%);
color: #fff;
padding: 80px 24px;
text-align: center;
position: relative;
overflow: hidden;
}
.na-account-hero__deco { position: absolute; inset: 0; pointer-events: none; }
.na-account-hero__circle { position: absolute; border-radius: 50%; }
.na-account-hero__circle--1 { width:400px;height:400px;top:-100px;right:-80px;background:rgba(255,255,255,.05); }
.na-account-hero__circle--2 { width:250px;height:250px;bottom:-60px;left:10%;background:rgba(255,255,255,.04); }
.na-account-hero__circle--3 { width:180px;height:180px;top:20px;left:-40px;background:rgba(255,255,255,.03); }
.na-account-hero__inner {
position: relative; z-index: 2; max-width: 600px; margin: 0 auto;
}
.na-account-hero__badge {
display: inline-flex; align-items: center;
background: rgba(255,255,255,.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.25); color: #fff;
font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
padding: 6px 16px; border-radius: 999px; margin-bottom: 16px;
}
.na-account-hero__title {
color: #fff; font-size: clamp(28px, 5vw, 44px); font-weight: 800;
margin: 0 0 12px; line-height: 1.2;
}
.na-account-hero__subtitle {
color: rgba(255,255,255,.8); font-size: 17px; margin: 0; line-height: 1.6;
}
/* ── Content area ──────────────────────────────────────────────── */
.na-account-content-area { padding: 48px 0 64px; }
/* ── WC container reset — override default floats & max-widths ─── */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-page { max-width: 100%; }
/* ── Main two-column layout: sidebar nav + content panel ────────── */
body.woocommerce-account .woocommerce {
display: flex;
gap: 28px;
align-items: flex-start;
}
/* ── Account Navigation sidebar ────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-navigation {
flex: 0 0 220px;
background: rgba(255,255,255,.75);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.9);
border-radius: 16px;
box-shadow: 0 4px 24px rgba(15,31,61,.08), 0 1px 4px rgba(15,31,61,.04);
padding: 8px 0;
position: sticky; top: 80px;
float: none !important; width: auto !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none; margin: 0; padding: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
margin: 0;
border-left: 3px solid transparent;
transition: background .15s, border-color .15s;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li:hover {
background: rgba(14,51,93,.04);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block; padding: 12px 20px;
font-size: .88rem; font-weight: 600; color: #374151;
text-decoration: none;
transition: color .15s;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li:hover a { color: #0e335d; }
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
border-left-color: #f4a724;
background: rgba(244,167,36,.06);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
color: #0e335d; font-weight: 700;
}
/* Logout — subtle danger tint */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
border-top: 1px solid #f0f2f7; margin-top: 4px; border-left-color: transparent !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: #dc2626; }
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout:hover { background: rgba(220,38,38,.04); }
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout:hover a { color: #b91c1c; }
/* ── Content panel ─────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-content {
flex: 1 1 0;
min-width: 0;
background: rgba(255,255,255,.75);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.9);
border-radius: 16px;
box-shadow: 0 4px 24px rgba(15,31,61,.08), 0 1px 4px rgba(15,31,61,.04);
padding: 32px 36px;
float: none !important; width: auto !important;
}
/* Content typography */
body.woocommerce-account .woocommerce-MyAccount-content > p {
font-size: .95rem; color: #374151; line-height: 1.75; margin-bottom: 1rem;
}
body.woocommerce-account .woocommerce-MyAccount-content a {
color: #0e335d; font-weight: 600; text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-content a:hover {
color: #f4a724; text-decoration: underline;
}
/* Section headings */
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
font-size: 18px; font-weight: 800; color: #0f1f3d;
margin: 0 0 20px; padding-bottom: 12px;
border-bottom: 2px solid #f0f2f7;
}
/* ── Notices & Messages ────────────────────────────────────────── */
body.woocommerce-account .woocommerce-message {
background: #f0fdf4; border: 1px solid #86efac; border-left: 4px solid #22c55e;
border-radius: 10px; padding: 14px 18px; font-size: .9rem; color: #166534;
margin-bottom: 20px; list-style: none;
}
body.woocommerce-account .woocommerce-error {
background: #fff1f2; border: 1px solid #fca5a5; border-left: 4px solid #ef4444;
border-radius: 10px; padding: 14px 18px 14px 36px; font-size: .9rem; color: #991b1b;
margin-bottom: 20px;
}
body.woocommerce-account .woocommerce-info {
background: #eff6ff; border: 1px solid #93c5fd; border-left: 4px solid #3b82f6;
border-radius: 10px; padding: 14px 18px; font-size: .9rem; color: #1e40af;
margin-bottom: 20px; list-style: none;
}
/* ── Form inputs — shared across login/register/addresses/account ─ */
body.woocommerce-account .woocommerce-Input,
body.woocommerce-account .woocommerce-form input[type="text"],
body.woocommerce-account .woocommerce-form input[type="email"],
body.woocommerce-account .woocommerce-form input[type="password"],
body.woocommerce-account .woocommerce-form input[type="tel"],
body.woocommerce-account .woocommerce-form select,
body.woocommerce-account .woocommerce-address-fields input[type="text"],
body.woocommerce-account .woocommerce-address-fields input[type="email"],
body.woocommerce-account .woocommerce-address-fields input[type="tel"],
body.woocommerce-account .woocommerce-address-fields select,
body.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="password"] {
width: 100%; padding: 11px 14px;
border: 1.5px solid #e2e8f0; border-radius: 10px;
font-size: 14px; outline: none;
transition: border-color .2s, box-shadow .2s;
box-sizing: border-box; background: #fff;
font-family: inherit; color: #1a1a2e;
}
body.woocommerce-account .woocommerce-Input:focus,
body.woocommerce-account .woocommerce-form input[type="text"]:focus,
body.woocommerce-account .woocommerce-form input[type="email"]:focus,
body.woocommerce-account .woocommerce-form input[type="password"]:focus,
body.woocommerce-account .woocommerce-form select:focus,
body.woocommerce-account .woocommerce-address-fields input:focus,
body.woocommerce-account .woocommerce-address-fields select:focus,
body.woocommerce-account .woocommerce-EditAccountForm input:focus {
border-color: #0e335d;
box-shadow: 0 0 0 3px rgba(14,51,93,.1);
}
/* Labels */
body.woocommerce-account .woocommerce-form label,
body.woocommerce-account .woocommerce-address-fields label,
body.woocommerce-account .woocommerce-EditAccountForm label,
body.woocommerce-account #customer_login label {
display: block; font-weight: 600; font-size: 13px;
color: #0f1f3d; margin-bottom: 6px;
}
/* Form row spacing */
body.woocommerce-account .woocommerce-form .form-row,
body.woocommerce-account .woocommerce-address-fields .form-row,
body.woocommerce-account .woocommerce-EditAccountForm .form-row {
margin-bottom: 18px;
}
/* Primary buttons */
body.woocommerce-account .woocommerce-form .button,
body.woocommerce-account .woocommerce-form button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-address-fields ~ .form-row .button,
body.woocommerce-account .woocommerce-EditAccountForm .button {
background: linear-gradient(135deg, #0e335d 0%, #1a4a82 100%);
color: #fff !important; border: none;
padding: 12px 28px; border-radius: 10px;
font-size: 15px; font-weight: 700; cursor: pointer;
transition: opacity .2s, transform .15s; margin-top: 8px;
font-family: inherit; text-decoration: none !important;
display: inline-block; letter-spacing: .01em;
}
body.woocommerce-account .woocommerce-form .button:hover,
body.woocommerce-account .woocommerce-form button[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content .button:hover {
opacity: .9; transform: translateY(-1px); color: #fff !important;
}
/* Inline helpers: lost password, checkbox label */
body.woocommerce-account .woocommerce-LostPassword { margin-top: 8px; font-size: 13px; }
body.woocommerce-account .woocommerce-LostPassword a { color: #0e335d; font-weight: 600; }
body.woocommerce-account .woocommerce-form__label-for-checkbox {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 400; color: #374151; cursor: pointer;
}
/* ── Login / Register two-column view ──────────────────────────── */
body.woocommerce-account #customer_login {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: start;
}
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
background: rgba(255,255,255,.75);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.9);
border-radius: 16px;
box-shadow: 0 4px 24px rgba(15,31,61,.08), 0 1px 4px rgba(15,31,61,.04);
padding: 32px 36px;
float: none !important; width: auto !important;
}
body.woocommerce-account #customer_login h2 {
font-size: 20px; font-weight: 800; color: #0f1f3d;
margin: 0 0 24px; padding-bottom: 14px; border-bottom: 2px solid #f0f2f7;
}
/* ── Orders table ──────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-orders-table {
width: 100%; border-collapse: collapse; margin: 0;
border-radius: 12px; overflow: hidden;
box-shadow: 0 2px 8px rgba(15,31,61,.06);
}
body.woocommerce-account .woocommerce-orders-table thead th {
background: #0e335d; color: #fff;
padding: 12px 16px; font-size: .78rem; font-weight: 700;
text-align: left; text-transform: uppercase; letter-spacing: .07em;
}
body.woocommerce-account .woocommerce-orders-table tbody tr {
border-bottom: 1px solid #e8eaf0;
}
body.woocommerce-account .woocommerce-orders-table tbody tr:last-child { border-bottom: none; }
body.woocommerce-account .woocommerce-orders-table tbody td {
padding: 14px 16px; font-size: .9rem; color: #374151; background: #fff;
}
body.woocommerce-account .woocommerce-orders-table tbody tr:hover td { background: #f8f9fb; }
/* "View" action button */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions a {
display: inline-block; padding: 6px 14px;
background: #0e335d; color: #fff !important;
border-radius: 6px; font-size: .8rem; font-weight: 600;
text-decoration: none; transition: background .2s, color .2s; border: none;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions a:hover {
background: #f4a724; color: #0e335d !important;
}
/* Order status pills */
body.woocommerce-account .woocommerce-orders-table .order-status {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
background: #f0f4f8; color: #374151;
}
/* ── Addresses section ─────────────────────────────────────────── */
body.woocommerce-account .woocommerce-Addresses { display: flex; gap: 24px; flex-wrap: wrap; }
body.woocommerce-account .woocommerce-Address {
flex: 1 1 260px;
background: #f8fafc; border-radius: 14px;
padding: 22px 26px; border: 1.5px solid #e8eaf0;
}
body.woocommerce-account .woocommerce-Address .col-1,
body.woocommerce-account .woocommerce-Address .col-2 { float: none !important; width: auto !important; }
body.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body.woocommerce-account .woocommerce-Address-title h3 {
font-size: 14px; font-weight: 800; color: #0f1f3d;
margin: 0; border-bottom: none; padding-bottom: 0;
}
body.woocommerce-account .woocommerce-Address address {
font-size: .88rem; color: #374151; line-height: 1.75; font-style: normal;
}
/* ── Downloads table ───────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-downloads-table {
width: 100%; border-collapse: collapse;
}
body.woocommerce-account .woocommerce-MyAccount-downloads-table th {
background: #0e335d; color: #fff;
padding: 10px 14px; font-size: .78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em; text-align: left;
}
body.woocommerce-account .woocommerce-MyAccount-downloads-table td {
padding: 12px 14px; border-bottom: 1px solid #e8eaf0;
font-size: .9rem; color: #374151; background: #fff;
}
/* ── Order view (single order detail page) ─────────────────────── */
body.woocommerce-account .woocommerce-order-details table,
body.woocommerce-account .woocommerce-customer-details table {
width: 100%; border-collapse: collapse;
}
body.woocommerce-account .woocommerce-order-details table th,
body.woocommerce-account .woocommerce-customer-details table th {
background: #0e335d; color: #fff;
padding: 10px 14px; font-size: .8rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; text-align: left;
}
body.woocommerce-account .woocommerce-order-details table td,
body.woocommerce-account .woocommerce-customer-details table td {
padding: 12px 14px; border-bottom: 1px solid #e8eaf0;
font-size: .9rem; color: #374151;
}
/* ── Help strip ────────────────────────────────────────────────── */
.na-account-help-strip {
background: #0e335d; padding: 20px 0;
}
.na-account-help-inner {
display: flex; align-items: center; justify-content: center;
gap: 16px; flex-wrap: wrap;
}
.na-account-help-text { color: rgba(255,255,255,.8); font-size: .88rem; }
.na-account-help-divider { color: rgba(255,255,255,.35); }
.na-account-help-link {
color: #f4a724; font-weight: 700; text-decoration: none;
font-size: .88rem; transition: opacity .2s;
}
.na-account-help-link:hover { opacity: .75; color: #f4a724; text-decoration: none; }
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 767px) {
.na-account-hero { padding: 60px 20px; }
.na-account-content-area { padding: 24px 0 40px; }
/* Stack nav above content */
body.woocommerce-account .woocommerce {
flex-direction: column;
gap: 16px;
}
/* Horizontal scrolling tab nav on mobile */
body.woocommerce-account .woocommerce-MyAccount-navigation {
flex: none; width: 100% !important;
position: static; border-radius: 12px;
padding: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex; overflow-x: auto; scrollbar-width: none;
white-space: nowrap; gap: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
body.woocommerce-account .woocommerce-MyAccount-navigation li {
border-left: none; border-bottom: 3px solid transparent; flex-shrink: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
border-left-color: transparent; border-bottom-color: #f4a724;
background: rgba(244,167,36,.07);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
padding: 12px 16px; font-size: .82rem;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
border-top: none; border-left: none; margin-left: auto;
}
body.woocommerce-account .woocommerce-MyAccount-content {
padding: 24px 20px; border-radius: 12px;
}
/* Stack login + register vertically */
body.woocommerce-account #customer_login {
grid-template-columns: 1fr; gap: 20px;
}
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
padding: 24px 20px; border-radius: 12px;
}
/* Addresses stack */
body.woocommerce-account .woocommerce-Addresses { flex-direction: column; }
body.woocommerce-account .woocommerce-Address { flex: none; }
}
@media (max-width: 480px) {
.na-account-hero__title { font-size: 26px; }
.na-account-hero__subtitle { font-size: 15px; }
}
/* ═══════════════════════════════════════════════════════════════════
FEATURE 1 — Welcome Popup (na-popup-*)
Dark navy premium card. All selectors prefixed na-popup-.
No existing selectors modified.
═══════════════════════════════════════════════════════════════════ */
/* ── Overlay ────────────────────────────────────────────────────── */
.na-popup-overlay {
display: none; /* JS adds .is-open to reveal */
position: fixed; inset: 0; z-index: 9998;
background: rgba(0,0,0,.72);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
align-items: center; justify-content: center;
padding: 16px;
}
.na-popup-overlay.is-open {
display: flex;
animation: naFadeIn .22s ease;
}
/* ── Modal card — dark navy gradient ────────────────────────────── */
.na-popup-modal {
background: linear-gradient(160deg, #0e335d 0%, #09254a 100%);
border-radius: 22px;
max-width: 440px; width: 100%;
position: relative; overflow: hidden;
box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 4px 20px rgba(0,0,0,.3),
0 0 0 1px rgba(255,255,255,.08);
padding: 52px 40px 38px;
animation: naSlideUp .3s cubic-bezier(.4,0,.2,1);
}
/* ── Background glow blobs ──────────────────────────────────────── */
.na-popup-modal::before,
.na-popup-modal::after {
content: ''; position: absolute; border-radius: 50%;
pointer-events: none;
}
.na-popup-modal::before {
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(244,167,36,.22) 0%, transparent 70%);
top: -80px; right: -60px;
animation: naGlow 5s ease-in-out infinite alternate;
}
.na-popup-modal::after {
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(74,158,255,.15) 0%, transparent 70%);
bottom: -60px; left: -40px;
animation: naGlow 7s ease-in-out infinite alternate-reverse;
}
/* ── Shimmer particles ──────────────────────────────────────────── */
.na-popup-particles {
position: absolute; inset: 0; pointer-events: none;
overflow: hidden; border-radius: 22px; z-index: 0;
}
.na-popup-particles span {
position: absolute; border-radius: 50%;
background: rgba(244,167,36,.6);
animation: naFloat linear infinite;
}
.na-popup-particles span:nth-child(1) { width:4px; height:4px; left:12%; top:85%; animation-duration:6s; animation-delay:0s; }
.na-popup-particles span:nth-child(2) { width:3px; height:3px; left:28%; top:78%; animation-duration:8.5s; animation-delay:1.2s; }
.na-popup-particles span:nth-child(3) { width:5px; height:5px; left:52%; top:88%; animation-duration:7s; animation-delay:0.6s; }
.na-popup-particles span:nth-child(4) { width:3px; height:3px; left:68%; top:80%; animation-duration:9.5s; animation-delay:2s; }
.na-popup-particles span:nth-child(5) { width:4px; height:4px; left:84%; top:92%; animation-duration:5.5s; animation-delay:1.8s; }
.na-popup-particles span:nth-child(6) { width:2px; height:2px; left:42%; top:95%; animation-duration:10s; animation-delay:0.3s; }
/* ── Gold icon circle ───────────────────────────────────────────── */
.na-popup-icon-circle {
position: relative; z-index: 1;
width: 68px; height: 68px; border-radius: 50%;
background: linear-gradient(135deg, #f4a724 0%, #e8940a 100%);
box-shadow: 0 0 0 8px rgba(244,167,36,.18), 0 0 32px rgba(244,167,36,.35);
display: flex; align-items: center; justify-content: center;
font-size: 30px; margin: 0 auto 20px;
animation: naPulse 2.8s ease-in-out infinite;
}
/* ── Inner content z-index ──────────────────────────────────────── */
#naPopupFormWrap,
#naPopupSuccessWrap { position: relative; z-index: 1; }
/* ── Close button ───────────────────────────────────────────────── */
.na-popup-close {
position: absolute; top: 14px; right: 14px; z-index: 2;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
border-radius: 50%; width: 32px; height: 32px;
font-size: 18px; line-height: 1; cursor: pointer;
color: rgba(255,255,255,.75);
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.na-popup-close:hover { background: rgba(255,255,255,.2); color: #fff; }
.na-popup-close:focus-visible { outline: 2px solid #f4a724; outline-offset: 2px; }
/* ── Badge pill ─────────────────────────────────────────────────── */
.na-popup-badge-wrap { text-align: center; margin-bottom: 12px; }
.na-popup-badge {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(244,167,36,.16); border: 1px solid rgba(244,167,36,.45);
color: #f4a724; font-size: 11px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
padding: 4px 13px; border-radius: 999px;
}
/* ── Typography ─────────────────────────────────────────────────── */
.na-popup-title {
font-size: 23px; font-weight: 800; color: #fff;
margin: 0 0 4px; line-height: 1.2; text-align: center;
}
.na-popup-subheading {
font-size: 17px; font-weight: 700; color: #f4a724;
margin: 0 0 10px; text-align: center;
}
.na-popup-subtitle {
font-size: 13.5px; color: rgba(255,255,255,.65);
margin: 0 0 22px; line-height: 1.6; text-align: center;
}
/* ── Email input — dark frosted glass ───────────────────────────── */
.na-popup-input-wrap { margin-bottom: 8px; }
.na-popup-input {
width: 100%; padding: 13px 16px;
background: rgba(255,255,255,.08);
border: 1.5px solid rgba(255,255,255,.15);
border-radius: 10px; color: #fff;
font-size: 14px; outline: none; font-family: inherit;
box-sizing: border-box;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.na-popup-input::placeholder { color: rgba(255,255,255,.38); }
.na-popup-input:focus {
border-color: #f4a724; background: rgba(255,255,255,.12);
box-shadow: 0 0 0 3px rgba(244,167,36,.25);
}
/* ── Inline message (error / ok) ────────────────────────────────── */
.na-popup-msg {
display: none; font-size: 13px; font-weight: 600;
padding: 9px 13px; border-radius: 8px; margin-bottom: 10px;
}
.na-popup-msg--error { background: rgba(239,68,68,.14); color: #fca5a5; border-left: 3px solid #ef4444; }
.na-popup-msg--ok { background: rgba(34,197,94,.12); color: #86efac; border-left: 3px solid #22c55e; }
/* ── CTA button — gold ──────────────────────────────────────────── */
.na-popup-cta {
display: block; width: 100%; margin-top: 4px;
background: linear-gradient(135deg, #f4a724 0%, #e8940a 100%);
color: #0e335d !important; border: none;
padding: 14px 24px; border-radius: 10px;
font-size: 15px; font-weight: 800; cursor: pointer;
font-family: inherit; letter-spacing: .01em;
box-shadow: 0 4px 18px rgba(244,167,36,.4);
transition: opacity .2s, transform .15s, box-shadow .2s;
text-align: center;
}
.na-popup-cta:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(244,167,36,.5); }
.na-popup-cta:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
.na-popup-cta:focus-visible { outline: 3px solid rgba(255,255,255,.55); outline-offset: 3px; }
/* ── Disclaimer ─────────────────────────────────────────────────── */
.na-popup-disclaimer {
font-size: 11px; color: rgba(255,255,255,.35);
text-align: center; margin: 14px 0 0;
}
/* ── Success state ──────────────────────────────────────────────── */
.na-popup-success-icon {
font-size: 52px; text-align: center; margin-bottom: 14px;
animation: naPopIn .4s cubic-bezier(.36,.07,.19,.97);
}
.na-popup-success-title {
font-size: 22px; font-weight: 800; color: #fff;
text-align: center; margin: 0 0 8px;
}
.na-popup-success-msg {
font-size: 14px; color: rgba(255,255,255,.68);
text-align: center; margin: 0 0 16px; line-height: 1.6;
}
/* ── Copyable coupon chip ────────────────────────────────────────── */
.na-popup-coupon-chip {
display: flex; align-items: center; justify-content: center; gap: 10px;
background: rgba(244,167,36,.12);
border: 1.5px dashed rgba(244,167,36,.55);
border-radius: 12px; padding: 14px 20px; margin-bottom: 8px;
cursor: pointer; transition: background .18s, border-color .18s;
}
.na-popup-coupon-chip:hover { background: rgba(244,167,36,.22); border-color: rgba(244,167,36,.8); }
.na-popup-coupon-chip:focus-visible { outline: 2px solid #f4a724; outline-offset: 2px; }
.na-popup-coupon-code {
font-size: 21px; font-weight: 900; letter-spacing: .12em;
color: #f4a724; font-family: 'Courier New', monospace;
}
.na-popup-coupon-hint {
font-size: 11px; color: rgba(255,255,255,.42);
text-align: center; margin: 0 0 20px;
}
/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes naFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes naSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes naGlow { from { opacity: .08; } to { opacity: .35; } }
@keyframes naFloat { from { transform: translateY(0); opacity: .65; }
to { transform: translateY(-130px); opacity: 0; } }
@keyframes naPulse {
0%, 100% { box-shadow: 0 0 0 8px rgba(244,167,36,.18), 0 0 32px rgba(244,167,36,.35); }
50% { box-shadow: 0 0 0 12px rgba(244,167,36,.26), 0 0 50px rgba(244,167,36,.52); }
}
@keyframes naPopIn {
0% { transform: scale(.5); opacity: 0; }
70% { transform: scale(1.12); }
100% { transform: scale(1); opacity: 1; }
}
/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.na-popup-modal { padding: 44px 22px 30px; border-radius: 18px; }
.na-popup-title { font-size: 20px; }
.na-popup-subheading { font-size: 15px; }
.na-popup-coupon-code { font-size: 17px; letter-spacing: .09em; }
}
/* ═══════════════════════════════════════════════════════════════════
FEATURE 2 — Top Bar Coupon Chip (na-topbar-*)
All selectors prefixed na-topbar-. No existing .top-bar rules modified.
═══════════════════════════════════════════════════════════════════ */
/* ── Chip button ────────────────────────────────────────────────── */
.na-topbar-chip {
display: inline-flex; align-items: center; gap: 4px;
position: relative; /* anchor for tooltip */
background: rgba(244,167,36,.22);
border: 1px solid rgba(244,167,36,.55);
color: #fff;
font-size: .72rem; font-weight: 600; font-family: inherit;
padding: 2px 10px; border-radius: 999px;
cursor: pointer; vertical-align: middle;
transition: background .18s;
line-height: 1.6; white-space: nowrap;
/* Reset button defaults */
-webkit-appearance: none; appearance: none;
}
.na-topbar-chip:hover { background: rgba(244,167,36,.4); }
.na-topbar-chip:focus-visible { outline: 2px solid #f4a724; outline-offset: 2px; }
.na-topbar-chip strong { color: #f4a724; font-weight: 800; }
/* ── Tooltip ────────────────────────────────────────────────────── */
.na-topbar-tooltip {
position: absolute;
bottom: calc(100% + 7px); left: 50%;
transform: translateX(-50%);
background: #0e335d; color: #fff;
font-size: 11px; font-weight: 700;
padding: 4px 10px; border-radius: 6px;
white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity .18s;
/* Down-pointing caret */
}
.na-topbar-tooltip::after {
content: '';
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #0e335d;
}
.na-topbar-tooltip--visible { opacity: 1; }
/* ── Mobile: keep chip visible but compact ──────────────────────── */
@media (max-width: 640px) {
.na-topbar-chip { font-size: .68rem; padding: 2px 8px; }
}
/* ═══════════════════════════════════════════════════════════════════
FEATURE 3 — Social Proof Toast (na-toast-*)
Premium floating card. Container is JS-injected into
with position:fixed in an inline style — stacking-context-proof.
No static toast HTML is ever rendered by PHP.
═══════════════════════════════════════════════════════════════════ */
/* JS sets position:fixed inline. This reinforces + adds sizing. */
#naToastContainer {
position: fixed !important;
bottom: 24px;
left: 20px;
z-index: 99999;
width: 308px;
pointer-events: none;
}
/* ── Card wrapper ───────────────────────────────────────────────── */
.na-toast {
background: #fff;
border-radius: 16px;
overflow: hidden; /* clips ::before gold bar */
box-shadow:
0 24px 64px rgba(0,0,0,.18),
0 8px 24px rgba(0,0,0,.12),
0 0 0 1px rgba(0,0,0,.07);
pointer-events: auto;
/* Off-screen left + invisible on mount */
transform: translateX(-130%);
opacity: 0;
transition: transform .44s cubic-bezier(.4,0,.2,1), opacity .36s ease;
will-change: transform, opacity;
}
/* Gold top accent bar — display:block pushes content down cleanly */
.na-toast::before {
content: '';
display: block;
height: 4px;
background: linear-gradient(90deg, #f4a724 0%, #ffd46b 100%);
}
.na-toast.na-toast--visible {
transform: translateX(0);
opacity: 1;
}
/* ── Inner row: avatar + body ───────────────────────────────────── */
.na-toast-inner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px 12px;
}
/* Navy circle avatar — shows buyer's initial letter */
.na-toast-avatar {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, #0e335d 0%, #1a5490 100%);
display: flex; align-items: center; justify-content: center;
font-size: 17px; font-weight: 800; color: #fff;
font-family: inherit; letter-spacing: 0;
box-shadow: 0 4px 12px rgba(14,51,93,.32);
line-height: 1;
}
/* Text body */
.na-toast-body { min-width: 0; flex: 1; }
.na-toast-name {
font-size: 13.5px; font-weight: 800; color: #0e335d;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.3;
}
.na-toast-location {
font-size: 11.5px; color: #6b7280; margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.na-toast-product {
font-size: 13px; font-weight: 700; color: #111827;
margin-top: 6px; line-height: 1.35;
/* Allow wrapping for longer product names */
overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* ── Footer: live dot + label + time + verified badge ───────────── */
.na-toast-footer {
display: flex; align-items: center; gap: 6px;
padding: 9px 16px 13px;
border-top: 1px solid #f3f4f6;
}
.na-toast-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34,197,94,.25);
animation: naToastDot 1.8s ease-in-out infinite;
}
.na-toast-live {
font-size: 10.5px; font-weight: 700;
color: #16a34a; text-transform: uppercase; letter-spacing: .05em;
}
.na-toast-sep {
font-size: 10px; color: #d1d5db;
}
.na-toast-time {
font-size: 11px; color: #9ca3af; flex: 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.na-toast-verified {
font-size: 10.5px; font-weight: 700;
color: #f4a724; white-space: nowrap;
display: flex; align-items: center; gap: 3px;
}
/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes naToastDot {
0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
50% { box-shadow: 0 0 0 5px rgba(34,197,94,.1); }
}
/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
#naToastContainer { bottom: 16px; left: 12px; width: calc(100vw - 24px); }
.na-toast-avatar { width: 40px; height: 40px; font-size: 15px; }
}
/* ══════════════════════════════════════════════════════════════════
MOBILE RESPONSIVENESS PATCH v9.8
Targets: 320 px – 640 px screens
Scope : cart, checkout, coupon field, payment, single-product,
product variations, WC notices, toast, overflow
Does NOT touch: coupon validation logic, checkout security hooks
══════════════════════════════════════════════════════════════════ */
/* ── 0. Global: prevent any element from causing horizontal scroll ── */
@media (max-width: 640px) {
* { box-sizing: border-box; }
html, body { overflow-x: hidden !important; max-width: 100%; }
img, video, iframe, object, embed, svg {
max-width: 100% !important;
height: auto;
}
}
/* ── 1. Cart table — make scrollable on narrow screens ─────────────
WC's shop_table has fixed columns (Remove / Product / Price /
Quantity / Total). On phones, scroll is less jarring than collapsing
the row labels, and it keeps WC's own JS (qty update, remove) intact.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Wrap the table in a scroll container */
.woocommerce-cart-form {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Make the table itself shrinkable */
.woocommerce table.shop_table.cart {
min-width: 420px; /* prevents text wrapping inside tiny cells */
font-size: .82rem;
}
.woocommerce table.shop_table.cart th,
.woocommerce table.shop_table.cart td {
padding: .6rem .75rem;
}
/* Product thumbnail — smaller on mobile */
.woocommerce table.shop_table.cart td.product-thumbnail img {
width: 52px !important;
height: 52px !important;
object-fit: cover;
border-radius: 6px;
}
}
/* ── 2. Coupon field — stack vertically on mobile ──────────────────
Default WC puts the input and "Apply coupon" button in an inline
flex row that collapses awkwardly at < 400 px.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.woocommerce-cart-form .coupon {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
padding: 0 !important;
}
.woocommerce-cart-form .coupon #coupon_code {
width: 100% !important;
margin: 0 !important;
}
.woocommerce-cart-form .coupon .button[name="apply_coupon"] {
width: 100% !important;
text-align: center !important;
justify-content: center !important;
}
}
/* ── 3. Cart totals / cart collaterals — full-width block ──────────
WC floats cart_totals to the right (38% width by default).
On mobile everything should be full-width stack.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.cart-collaterals,
.cart-collaterals .cart_totals {
width: 100% !important;
float: none !important;
}
.cart-collaterals .cart_totals table {
width: 100% !important;
}
}
/* ── 4. Proceed-to-checkout button — full width ────────────────────
The "Proceed to checkout" CTA should span the full cart width on
phones. WC wraps it in .wc-proceed-to-checkout.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.woocommerce-cart .wc-proceed-to-checkout {
padding: 0 !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: .9rem 1rem !important;
font-size: 1rem !important;
}
}
/* ── 5. Checkout layout — collapse col2-set, order review ──────────
WC's classic checkout uses float-based .col2-set (billing + shipping)
and a separate #order_review column. Both need full-width on mobile.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
width: 100% !important;
float: none !important;
margin: 0 0 1.25rem !important;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
width: 100% !important;
float: none !important;
padding: 0 !important;
}
/* Checkout form rows: half-width fields → full-width on mobile */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
width: 100% !important;
float: none !important;
margin-right: 0 !important;
}
}
/* ── 6. Checkout form fields — comfortable spacing on mobile ───────*/
@media (max-width: 480px) {
.woocommerce form .form-row {
padding: 0 !important;
margin-bottom: .85rem !important;
}
.woocommerce form .form-row label {
margin-bottom: .25rem;
display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
font-size: 16px !important; /* prevents iOS auto-zoom */
padding: .65rem .8rem !important;
}
}
/* ── 7. Payment methods — labels, radios, and place-order button ───*/
@media (max-width: 640px) {
/* Payment method list — wrap long labels */
.woocommerce #payment .payment_methods li {
padding: .75rem !important;
}
.woocommerce #payment .payment_methods li label {
font-size: .88rem;
line-height: 1.4;
word-break: break-word;
}
/* Place Order button — full width on mobile */
.woocommerce #place_order {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: .95rem 1rem !important;
font-size: 1.05rem !important;
margin-top: 1rem !important;
}
/* #payment box padding */
.woocommerce #payment {
padding: 1rem !important;
}
}
/* ── 8. WooCommerce notices (info / message / error) ───────────────
Default WC flex row puts a before the text.
On mobile that button eats all the horizontal space.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-items: flex-start !important;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
width: 100% !important;
text-align: center !important;
order: -1; /* show CTA above message text */
}
}
/* ── 9. Single-product page ─────────────────────────────────────────
a) Quantity stepper + add-to-cart button stack on 480 px and below.
b) Variation dropdowns go full-width (WC uses a table layout).
c) Gallery thumbnail strip scrolls horizontally instead of wrapping.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
/* Add-to-cart row: stack qty then button */
body.single-product .woocommerce div.product form.cart {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
body.single-product .woocommerce div.product form.cart .quantity {
width: 100% !important;
}
body.single-product .woocommerce div.product form.cart input.qty {
width: 100% !important;
text-align: center !important;
}
body.single-product .woocommerce div.product form.cart .single_add_to_cart_button {
width: 100% !important;
text-align: center !important;
}
/* Product title — keep readable */
body.single-product .woocommerce div.product .product_title {
font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
}
/* Price — reduce on tiny screens */
body.single-product .woocommerce div.product p.price,
body.single-product .woocommerce div.product span.price {
font-size: clamp(1.2rem, 4.5vw, 1.6rem) !important;
}
}
/* Variable products: variation table → stacked on mobile */
@media (max-width: 640px) {
.woocommerce div.product .variations {
display: block !important;
width: 100% !important;
}
.woocommerce div.product .variations tr,
.woocommerce div.product .variations tbody {
display: block !important;
}
.woocommerce div.product .variations td,
.woocommerce div.product .variations th {
display: block !important;
width: 100% !important;
padding: .3rem 0 !important;
border: none !important;
}
.woocommerce div.product .variations select {
width: 100% !important;
font-size: 16px !important; /* prevent iOS zoom */
}
}
/* Gallery thumbnails: scroll rather than wrap */
@media (max-width: 640px) {
.woocommerce-product-gallery .flex-control-thumbs {
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
gap: 6px;
padding-bottom: 4px;
}
.woocommerce-product-gallery .flex-control-thumbs li {
flex-shrink: 0 !important;
width: 58px !important;
}
}
/* ── 10. Toast notification — prevent overflow on 320px phones ─────*/
@media (max-width: 480px) {
.toast-container-na {
right: .75rem !important;
left: .75rem !important;
bottom: .75rem !important;
width: auto !important;
}
.toast-na {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
font-size: .8rem !important;
padding: .7rem .9rem !important;
}
}
/* ── 11. Order review table in checkout — scrollable on mobile ──────*/
@media (max-width: 640px) {
.woocommerce-checkout-review-order-table,
#order_review .shop_table {
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
width: 100% !important;
font-size: .85rem;
}
}
/* ── 12. Sticky / fixed elements — adjust for phone viewport ────────*/
@media (max-width: 480px) {
.back-to-top {
bottom: 1rem !important;
right: 1rem !important;
width: 40px !important;
height: 40px !important;
}
}
/* ── 13. WooCommerce tabs — scroll on mobile (not wrap) ─────────────*/
@media (max-width: 640px) {
.woocommerce-tabs ul.tabs {
display: flex !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
gap: 4px;
padding-bottom: 2px;
border-bottom: 2px solid var(--border);
}
.woocommerce-tabs ul.tabs li {
flex-shrink: 0;
white-space: nowrap;
}
.woocommerce-tabs ul.tabs li a {
padding: .5rem .85rem !important;
font-size: .82rem !important;
}
}
/* ── 14. Shipping calculator on cart — stack fields ─────────────────*/
@media (max-width: 640px) {
.shipping-calculator-form p {
width: 100% !important;
float: none !important;
margin-right: 0 !important;
}
.shipping-calculator-form select,
.shipping-calculator-form input {
width: 100% !important;
font-size: 16px !important;
}
.shipping-calculator-button { width: 100% !important; text-align: center !important; }
}
/* ── 15. Product meta (SKU / categories / tags) — wrap on mobile ────*/
@media (max-width: 480px) {
.product_meta {
font-size: .82rem !important;
word-break: break-word !important;
}
.product_meta > span {
display: block !important;
margin-bottom: .35rem !important;
}
}
/* ── END MOBILE PATCH v9.8 ────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
HOMEPAGE MOBILE FIX v9.9.1
Root cause: hero slider overflow:hidden does not clip translateX'd
flex children on iOS Safari / older WebKit without a GPU layer.
Slides 2 & 3 (dark navy bg) bleed right of slide 1, creating the
"narrow left content / dark right panel" appearance reported on phones.
All fixes are inside max-width media queries — desktop untouched.
══════════════════════════════════════════════════════════════════ */
/* ── 1. Body / root wrappers — strict full-viewport width ──────────
Prevents Bootstrap's scrollbar-compensation padding-right from
shifting the page content left and revealing a dark gap on the right.
─────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
html {
overflow-x: hidden !important;
width: 100% !important;
}
body {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
padding-right: 0 !important; /* neutralise Bootstrap modal scrollbar shim */
}
#page,
.site,
#content,
.site-content {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
}
/* ── 2. Hero slider — GPU layer + explicit overflow clip ───────────
WebKit / iOS Safari needs transform: translateZ(0) on the clipping
parent to honour overflow:hidden for transform'd children.
Also removes contain:layout which can suppress the compositing hint
on some Safari / WKWebView versions.
─────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
.hero-slider {
position: relative !important;
overflow: hidden !important;
width: 100% !important;
max-width: 100vw !important;
contain: none !important; /* remove layout containment on mobile */
-webkit-transform: translateZ(0); /* force GPU compositing layer (WebKit) */
transform: translateZ(0);
isolation: isolate; /* belt-and-suspenders stacking context */
}
/* Track: let it be as wide as needed; hero-slider clips it */
.hero-slider-track {
overflow: visible !important;
/* Width stays auto; slides determine it via min-width: 100% */
}
/* Each slide: constrained to the slider container's width */
.hero-slide {
min-width: 100% !important;
max-width: 100% !important; /* prevents any slide from exceeding parent */
width: 100% !important;
flex-shrink: 0 !important;
}
}
/* ── 3. Hero content — always full-width on mobile ─────────────────
.col-lg-6 gives 50% only at ≥992px via Bootstrap. But if any
stacking-context or flex quirk keeps it narrow below 992px, this
forces 100% explicitly.
─────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
.hero-content,
.hero-content[class*="col-"] {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}
}
/* ── 4. All homepage section wrappers — full viewport width ─────────
Guards against any section, container, or row that might not
naturally fill 100% on narrow screens.
─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Top-level sections */
.top-bar,
.navbar-main,
.mega-menu-wrapper,
.hero-slider,
.flash-sale-banner,
.newsletter-section,
.footer-main,
footer {
width: 100% !important;
max-width: 100vw !important;
left: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Container inside sections */
.container-xl {
width: 100% !important;
max-width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
}
/* ── 5. Mobile drawer — ensure it can never affect document flow ────
Always position:fixed and translated off-screen left when closed.
Applies at all widths as a safety rule (no breakpoint needed).
─────────────────────────────────────────────────────────────────── */
.mobile-drawer {
position: fixed !important;
}
.mobile-drawer:not(.open) {
transform: translateX(-110%) !important;
-webkit-transform: translateX(-110%) !important;
visibility: hidden; /* hide from assistive tech when closed */
pointer-events: none; /* ensure no accidental tap-through */
}
.mobile-drawer.open {
transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
visibility: visible;
pointer-events: auto;
}
/* ── 6. Drawer backdrop — ensure it never causes layout shift ───────*/
.drawer-backdrop:not(.open) {
display: none !important;
}
.drawer-backdrop.open {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ── END HOMEPAGE MOBILE FIX v9.9.1 ─────────────────────────────── */