/* ==========================================================================
   PELU PROFESSIONAL — DESIGN SYSTEM
   Brand tokens (--p-*) are injected from the Customizer (inc/class-pelu-customizer-output.php).
   Structural tokens below are the fixed design system: spacing, radius, shadows, breakpoints.
   ========================================================================== */

:root {
	--space-1: .25rem; --space-2: .5rem; --space-3: 1rem; --space-4: 1.5rem;
	--space-5: 2.5rem; --space-6: 4rem; --space-7: 6rem;
	--radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
	--radius-pill: 999px; --radius-round: 50%;
	--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
	--shadow-md: 0 6px 24px rgba(0,0,0,.07);
	--shadow-lg: 0 -4px 24px rgba(0,0,0,.08);
	--border: #e6e2dc; --muted: #6f6a64;
	/* Semantic colours — used for stock, alerts, validation everywhere. */
	--success: #2e7d32; --danger: #b3261e; --warning: #b26a00; --wish: #c0392b;
	--container: 1320px; --header-h: 72px;
	/* Motion scale: fast = state changes, base = UI, slow = imagery. */
	--t-fast: .15s ease; --transition: .22s ease; --t-slow: .45s ease;
	--ease-out: cubic-bezier(.2,.8,.3,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--p-bg); color: var(--p-text);
	font-family: var(--p-font-body); font-size: var(--p-font-size); line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--p-accent); }
h1, h2, h3, h4 { font-family: var(--p-font-heading); font-weight: 500; line-height: 1.2; margin: 0 0 var(--space-3); letter-spacing: .01em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 var(--space-3); }
ul { padding: 0; margin: 0; list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, select, textarea { font: inherit; }

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; background: var(--p-primary); color: #fff; padding: var(--space-2) var(--space-3); z-index: 1000; }

/* ---------- Buttons ---------- */
.btn, .button, .single_add_to_cart_button, .checkout-button, .wc-block-components-button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	padding: .8em 1.8em; border-radius: var(--p-btn-radius); border: 1px solid transparent;
	font-size: .85rem; font-weight: 500; letter-spacing: .06em; text-transform: var(--p-btn-transform);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
	line-height: 1.2;
}
.btn--primary, .button, .single_add_to_cart_button, .checkout-button { background: var(--p-primary); color: #fff; }
.btn--primary:hover, .button:hover, .single_add_to_cart_button:hover { background: var(--p-accent); color: #fff; }
.btn--secondary { background: transparent; color: var(--p-primary); border-color: var(--p-primary); }
.btn--secondary:hover { background: var(--p-primary); color: #fff; }
.btn--ghost { color: var(--p-primary); padding-inline: 0; }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="password"], input[type="number"], textarea, select {
	width: 100%; padding: .75em 1em; border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: #fff; color: var(--p-text); transition: border-color var(--transition);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--p-accent); outline-offset: 1px; border-color: var(--p-accent); }
.search-form, .woocommerce-product-search { display: flex; gap: var(--space-2); }
.search-form input[type="search"], .woocommerce-product-search input[type="search"] { flex: 1; }

/* ---------- Components ---------- */
.section-title { text-align: center; margin: 0 auto var(--space-5); max-width: 640px; }
.section-title__sub { color: var(--muted); }

.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition); }
.card:hover { box-shadow: var(--shadow-md); }
.card__body { padding: var(--space-3); }
.card__title { font-size: 1.05rem; margin-bottom: var(--space-2); }
.card__excerpt { color: var(--muted); font-size: .9rem; margin: 0; }

.feature-box { text-align: center; padding: var(--space-4); }
.feature-box__icon { display: inline-block; width: 40px; height: 40px; color: var(--p-accent); margin-bottom: var(--space-2); }
.feature-box__title { font-size: 1rem; font-family: var(--p-font-body); font-weight: 600; }
.feature-box__text { color: var(--muted); font-size: .9rem; }

.badge { display: inline-block; padding: .25em .7em; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radius-sm); }
.badge--accent { background: var(--p-accent); color: #fff; }
.badge--muted { background: var(--p-secondary); color: var(--muted); }

.alert { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--p-accent); background: var(--p-secondary); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.alert--error { border-color: var(--danger); }
.alert--success { border-color: var(--success); }

.breadcrumbs { font-size: .8rem; color: var(--muted); margin: var(--space-3) 0 var(--space-4); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: .5; }

.post-grid, .products { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .post-grid, .products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .post-grid, .products { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Announcement bar ---------- */
.announcement-bar { background: var(--p-primary); color: #fff; font-size: .8rem; letter-spacing: .04em; text-align: center; padding: var(--space-2) 0; }
.announcement-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header ---------- */
.site-header { background: var(--p-bg); border-bottom: 1px solid var(--border); position: relative; z-index: 100; }
.has-sticky-header .site-header { position: sticky; top: 0; }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: max(var(--header-h), calc(var(--p-logo-h, 56px) + 20px)); }
.site-branding { flex-shrink: 0; }
/* Logo sizes are set in Customizer → Header / Footer, so they can be tuned
   per logo without touching CSS. */
.site-branding img { max-height: var(--p-logo-h, 56px); width: auto; }
@media (max-width: 767px) { .site-branding img { max-height: var(--p-logo-h-mobile, 40px); } }
.site-footer__col img, .site-footer .custom-logo { max-width: var(--p-footer-logo-w, 180px); height: auto; width: auto; }
.site-footer__col .custom-logo-link { display: inline-block; margin-bottom: var(--space-3); }
.site-title { font-family: var(--p-font-heading); font-size: 1.4rem; letter-spacing: .04em; }
.header-centered .site-header__inner { justify-content: space-between; }
.header-centered .site-branding { order: 0; }

.header-toggle { display: none; width: 40px; height: 40px; }
.header-toggle svg { width: 24px; height: 24px; }

.primary-nav { flex: 1; }
.primary-nav__list { display: flex; gap: var(--space-4); }
.primary-nav__list > li { position: static; }
.primary-nav__list > li > a { display: block; padding: var(--space-3) 0; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.primary-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: var(--space-2) 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--transition), transform var(--transition); }
.primary-nav .has-children { position: relative; }
.primary-nav .has-children:hover > .sub-menu, .primary-nav .has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.primary-nav .sub-menu a { display: block; padding: var(--space-2) var(--space-3); font-size: .9rem; }

/* Mega menu */
.mega-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--border); box-shadow: var(--shadow-md); padding: var(--space-5) 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--transition), transform var(--transition); }
.is-mega:hover .mega-panel, .is-mega:focus-within .mega-panel { opacity: 1; visibility: visible; transform: none; }
.mega-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); }
.mega-panel__title { display: block; font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-2); }
.mega-panel__list a { display: block; padding: .3em 0; color: var(--muted); font-size: .9rem; }
.mega-panel__list a:hover { color: var(--p-accent); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.header-actions__item { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; position: relative; font-size: .75rem; font-weight: 600; letter-spacing: .05em; }
.header-actions__item svg { width: 22px; height: 22px; }
.header-cart__count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--p-accent); color: #fff; font-size: .65rem; font-weight: 700; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; }

.header-search { border-top: 1px solid var(--border); padding: var(--space-3) 0; background: var(--p-bg); }
.header-search[hidden] { display: none; }

/* ---------- Hero (front page foundation) ---------- */
/* Hero + slider layout lives here, not in home.css, so the slider can never
   break if the homepage template or page-cache setup skips the front-page
   stylesheet. Decorative controls (arrows, dots) stay in home.css. */
.hero-stack { position: relative; overflow: hidden; }
/* align-items:flex-start stops short slides being stretched to the tallest
   one; the track's own height is synced to the active slide in JS. */
.hero-track { display: flex; width: 100%; align-items: flex-start;
	transition: transform .6s cubic-bezier(.2,.8,.3,1), height .45s cubic-bezier(.2,.8,.3,1); }
.hero-stack--slider .hero-track > .hero { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .hero-track { transition: none; } }

/* Arrows */
.hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff;
	border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-round);
	transition: background var(--transition), opacity var(--transition); opacity: 0; }
.hero-nav svg { width: 22px; height: 22px; }
.hero-nav:hover { background: rgba(255,255,255,.28); color: #fff; }
.hero-nav--prev { left: 20px; }
.hero-nav--next { right: 20px; }
.hero-stack:hover .hero-nav, .hero-nav:focus-visible { opacity: 1; }
@media (max-width: 767px) { .hero-nav { display: none; } }

/* Dots */
.hero-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3;
	display: flex; justify-content: center; gap: 10px; }
.hero-dot { width: 32px; height: 3px; padding: 10px 0; background: none; border: 0;
	position: relative; cursor: pointer; }
.hero-dot::after { content: ""; position: absolute; inset: 10px 0; background: rgba(255,255,255,.4);
	transition: background var(--transition), transform var(--transition); }
.hero-dot:hover::after { background: rgba(255,255,255,.7); }
.hero-dot.is-active::after { background: #fff; transform: scaleY(1.6); }

/* Pause / play */
.hero-pause { position: absolute; right: 20px; bottom: 20px; z-index: 3;
	width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
	border-radius: var(--radius-round); opacity: 0; transition: opacity var(--transition); }
.hero-stack:hover .hero-pause, .hero-pause:focus-visible { opacity: 1; }
.hero-pause__icon { width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.hero-pause[aria-pressed="true"] .hero-pause__icon { width: 0; height: 0; border: 0;
	border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
@media (max-width: 767px) { .hero-pause { display: none; } }

/* Admin-only hint when nothing is configured yet */
.hero-hint { text-align: center; font-size: .85rem; color: var(--muted);
	background: var(--p-secondary); padding: var(--space-2); margin: 0; }


/* No image uploaded: fall back to a brand gradient rather than a blank block. */
.hero--nobg { background: linear-gradient(135deg, var(--p-primary) 0%, #2a2622 55%, var(--p-accent) 160%); }
.hero--nobg::before { background: none; }

/* Full-image banners: the artwork already carries the design, so show all of
   it and let its own proportions set the height instead of cropping. */
/* Base slide: a cropped background photo with the text overlaid. */
.hero-stack .hero { min-height: clamp(420px, 70vh, 720px); display: flex; align-items: center; position: relative; color: #fff; overflow: hidden; background: var(--p-primary); }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Full-image banners: the artwork already carries the design, so show all of
   it and let its own proportions set the height instead of cropping.
   Specificity matches the base rule above so it always wins. */
.hero-stack .hero--full { min-height: 0; height: auto; display: block; overflow: visible; background: none; }
.hero-stack .hero--full .hero__bg { position: relative; inset: auto; display: block; width: 100%; }
.hero-stack .hero--full .hero__bg img { width: 100%; height: auto; max-height: none; object-fit: contain; display: block; }
.hero-stack .hero--full::before { display: none; }
.hero-stack .hero--full .hero__inner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }

/* Image-only banner: no overlay at all, the whole slide is one link. */
.hero-stack .hero--bare::before { display: none; }
.hero-stack .hero--bare .hero__inner { display: none; }
.hero__link { position: absolute; inset: 0; z-index: 2; }
.hero { min-height: 60vh; display: flex; align-items: center; background-size: cover; background-position: center; position: relative; color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15)); }
.hero__inner { position: relative; max-width: 640px; }
.hero__title { color: #fff; }
.hero__sub { font-size: 1.1rem; opacity: .9; margin-bottom: var(--space-4); }

/* ---------- Entry (pages/posts) ---------- */
.entry { max-width: 820px; margin: 0 auto var(--space-6); }
.entry__meta { color: var(--muted); font-size: .85rem; }
.entry__thumb { margin: 0 0 var(--space-4); }
.entry__content > * + * { margin-top: var(--space-3); }
.error-404 { text-align: center; padding: var(--space-6) 0; }
.error-404 .btn { margin: var(--space-2); }
.error-404__search { max-width: 420px; margin: var(--space-5) auto 0; }

/* ---------- WooCommerce essentials ---------- */
.product-card { list-style: none; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition); display: flex; flex-direction: column; }
.product-card:hover { box-shadow: var(--shadow-md); }
.product-card__media { position: relative; aspect-ratio: 1; background: var(--p-secondary); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__media .badge { position: absolute; top: var(--space-2); left: var(--space-2); }
.product-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.product-card__brand { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.product-card__title { font-family: var(--p-font-body); font-size: .95rem; font-weight: 500; margin: 0; }
.product-card__price { font-weight: 600; margin-top: auto; }
.product-card .button { margin-top: var(--space-2); width: 100%; }
.trust-badges { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted); }
.trust-badges__item::before { content: "✓"; color: var(--p-accent); margin-right: var(--space-2); }
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-error, .woocommerce-info { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--p-accent); background: var(--p-secondary); margin-bottom: var(--space-4); }
.woocommerce-error { border-color: var(--danger); }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--space-7); padding: var(--space-6) 0 var(--space-4); border-top: 1px solid var(--border); }
.footer-dark .site-footer { background: var(--p-primary); color: rgba(255,255,255,.8); }
.footer-dark .site-footer a { color: rgba(255,255,255,.8); }
.footer-dark .site-footer a:hover { color: #fff; }
.footer-dark .site-footer .widget__title { color: #fff; }
.footer-light .site-footer { background: var(--p-secondary); }
.site-footer__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.widget__title { font-family: var(--p-font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-3); }
.site-footer__about { font-size: .9rem; margin: var(--space-3) 0; }
.site-footer__contact { font-style: normal; font-size: .9rem; }
.footer-menu a, .legal-menu a { display: block; padding: .3em 0; font-size: .9rem; }
.social-links { display: flex; gap: var(--space-3); font-size: .85rem; margin-top: var(--space-3); }
.newsletter-form { display: flex; gap: var(--space-2); }
.newsletter-form__input { flex: 1; }
.site-footer__bottom { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid rgba(128,128,128,.25); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: .8rem; }
.legal-menu { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.legal-menu a { padding: 0; }
.payment-icons { display: flex; gap: var(--space-2); }
.payment-icons__item { border: 1px solid currentColor; opacity: .6; border-radius: var(--radius-sm); padding: .15em .5em; font-size: .65rem; letter-spacing: .05em; }
.site-footer__copyright { margin: 0; }

.whatsapp-fab { position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: var(--radius-round); background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: 90; }
.whatsapp-fab svg { width: 28px; height: 28px; }
.whatsapp-fab:hover { color: #fff; transform: translateY(-2px); }

/* ---------- Mobile navigation (≤1023px) ---------- */
@media (max-width: 1023px) {
	.header-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.primary-nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--p-bg); overflow-y: auto; padding: var(--space-4) var(--space-3); transform: translateX(-100%); transition: transform var(--transition); z-index: 99; }
	.primary-nav.is-open { transform: none; }
	.primary-nav__list { flex-direction: column; gap: 0; }
	.primary-nav__list > li > a { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
	.primary-nav .sub-menu, .mega-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 var(--space-3) var(--space-3); display: none; }
	.primary-nav .has-children.is-open > .sub-menu, .is-mega.is-open .mega-panel { display: block; }
	.mega-panel__grid { grid-template-columns: 1fr; gap: var(--space-3); }
	.header-actions__lang, .header-actions__currency { display: none; }
}
@media (max-width: 480px) {
	.post-grid, .products { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
	.newsletter-form { flex-direction: column; }
	.header-actions { gap: 0; }
}

/* ---------- Phase 3 globals: product card extras, quick view, sales popup ---------- */
.product-card__media > a { display: block; aspect-ratio: 1; }
.product-card__badges { position: absolute; top: var(--space-2); left: var(--space-2); display: flex; flex-direction: column; gap: 4px; }
.product-card__wish { position: absolute; top: var(--space-2); right: var(--space-2); width: 34px; height: 34px; border-radius: var(--radius-round); background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); color: var(--p-primary); transition: color var(--transition), transform var(--transition); }
.product-card__wish svg { width: 18px; height: 18px; }
.product-card__wish[aria-pressed="true"] { color: var(--wish); }
.product-card__wish[aria-pressed="true"] svg { fill: currentColor; }
.product-card__qv { position: absolute; left: 0; right: 0; bottom: 0; padding: .6em; background: rgba(17,17,17,.85); color: #fff; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; transform: translateY(100%); transition: transform var(--transition); }
.product-card:hover .product-card__qv, .product-card:focus-within .product-card__qv { transform: none; }
@media (hover: none) { .product-card__qv { display: none; } }
.product-card__rating { font-size: .75rem; color: var(--muted); }
.product-card__rating > span { position: relative; display: inline-block; color: #ddd; letter-spacing: .05em; }
.product-card__rating > span::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--r); overflow: hidden; color: var(--p-accent); white-space: nowrap; }
.header-wish__count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--p-primary); color: #fff; font-size: .65rem; font-weight: 700; border-radius: var(--radius-pill); display: none; align-items: center; justify-content: center; }
.header-wish__count.is-visible { display: flex; }

/* Quick view modal */
.qv-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--space-3); background: rgba(0,0,0,.55); }
.qv-modal.is-open { display: flex; }
.qv-modal__box { position: relative; background: #fff; max-width: 860px; width: 100%; max-height: 90vh; overflow: auto; border-radius: var(--radius-md); }
.qv-modal__close { position: absolute; top: var(--space-2); right: var(--space-2); width: 40px; height: 40px; z-index: 1; }
.qv-modal__close svg { width: 22px; height: 22px; }
.qv { display: grid; gap: var(--space-4); padding: var(--space-4); }
@media (min-width: 720px) { .qv { grid-template-columns: 1fr 1fr; padding: var(--space-5); } }
.qv__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.qv__title { font-size: 1.5rem; }
.qv__price { font-size: 1.2rem; font-weight: 600; margin-bottom: var(--space-3); }
.qv__desc { color: var(--muted); margin-bottom: var(--space-4); }
.qv .btn { margin-right: var(--space-2); }

/* Sales notification popup */
.sales-pop { position: fixed; bottom: 20px; z-index: 150; display: flex; align-items: center; gap: var(--space-3); max-width: 340px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); background: #fff; color: var(--p-text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: .82rem; transform: translateY(20px); opacity: 0; transition: opacity var(--transition), transform var(--transition); pointer-events: none; }
.sales-pop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sales-pop--bottom-left { left: 20px; }
.sales-pop--bottom-right { right: 20px; }
.sales-pop--dark { background: var(--p-primary); color: #fff; border-color: transparent; }
.sales-pop__img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.sales-pop__text { margin: 0; line-height: 1.4; }
.sales-pop__text a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sales-pop__meta { display: block; opacity: .65; font-size: .72rem; margin-top: 2px; }
.sales-pop__close { position: absolute; top: 2px; right: 6px; font-size: 1rem; opacity: .5; }
@media (max-width: 480px) { .sales-pop { left: 12px; right: 12px; max-width: none; bottom: 84px; } }

/* Announcement marquee */
.announcement-bar__icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.announcement-bar--scroll .container { overflow: hidden; }
.announcement-bar--scroll .announcement-bar__text { display: inline-block; white-space: nowrap; animation: pelu-marquee 18s linear infinite; }
@keyframes pelu-marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .announcement-bar--scroll .announcement-bar__text { animation: none; } }

/* ---------- Phase 7: FAQ, consent, countdown ---------- */
.faq-section { margin-top: var(--space-5); }
.faq-section__title { text-align: center; margin-bottom: var(--space-4); }
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item__q { padding: var(--space-3) 0; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after { content: "+"; font-size: 1.3rem; color: var(--p-accent); flex-shrink: 0; transition: transform var(--transition); }
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__a { padding-bottom: var(--space-3); color: var(--muted); }

.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 180; background: #fff; border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: var(--space-4) 0; }
.consent[hidden] { display: none; }
.consent__inner { width: min(100% - 2rem, var(--container)); margin-inline: auto; display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .consent__inner { grid-template-columns: 1fr auto auto; align-items: center; } }
.consent__text { font-size: .85rem; margin: 0; color: var(--muted); }
.consent__text a { text-decoration: underline; text-underline-offset: 3px; }
.consent__options { display: flex; gap: var(--space-3); font-size: .85rem; white-space: nowrap; }
.consent__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.consent__actions .btn { padding: .6em 1.2em; font-size: .78rem; }

.announcement-bar__count { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: .4em; }

/* ---------- Phase 10: accessibility & motion ---------- */
/* Visible focus for keyboard users on every interactive element. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--p-accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}
/* Never remove focus entirely — only soften it for pointer users. */
:focus:not(:focus-visible) { outline: none; }

/* Minimum touch target on controls that could otherwise be small. */
.header-actions__item, .qty-btn, .view-switch button, .product-card__wish, .product-card__cmp { min-width: 44px; min-height: 44px; }

/* Respect reduced-motion preferences across every animation. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.product-card:hover .product-card__media img,
	.cat-card:hover .cat-card__media img { transform: none; }
}

/* Forced-colors (Windows high contrast) support. */
@media (forced-colors: active) {
	.btn, .button { border: 1px solid ButtonText; }
	.product-card, .card { border: 1px solid CanvasText; }
}

/* ==========================================================================
   PHASE 11 — micro-interactions, loading states, polish
   Motion is deliberately restrained: it confirms an action, it never performs.
   Everything here is disabled under prefers-reduced-motion (rule above).
   ========================================================================== */

/* ---- Buttons: weight shift instead of bounce ---- */
.btn, .button, .single_add_to_cart_button, .checkout-button {
	position: relative;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--t-fast), box-shadow var(--transition);
}
.btn:hover, .button:hover, .single_add_to_cart_button:hover { box-shadow: 0 2px 12px rgba(0,0,0,.10); }
.btn:active, .button:active, .single_add_to_cart_button:active { transform: translateY(1px); box-shadow: none; }

/* Loading state for any async button. */
.btn.is-loading, .button.loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after, .button.loading::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent;
	border-radius: var(--radius-round); animation: pelu-spin .6s linear infinite;
	color: #fff;
}
@keyframes pelu-spin { to { transform: rotate(360deg); } }

/* Confirmation tick after add-to-cart. */
.button.added::after { content: "✓"; margin-left: .4em; }
.added_to_cart { display: none; }

/* ---- Links: underline grows from the left ---- */
.entry__content a:not(.btn), .site-footer__about a, .card__title a {
	background-image: linear-gradient(var(--p-accent), var(--p-accent));
	background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
	transition: background-size var(--transition);
}
.entry__content a:not(.btn):hover, .card__title a:hover { background-size: 100% 1px; }

/* ---- Product card: lift + reveal, no jitter ---- */
.product-card { transition: box-shadow var(--transition), transform var(--transition); }
.product-card:hover { transform: translateY(-3px); }
.product-card__wish:active, .product-card__cmp:active { transform: scale(.92); }
.product-card__wish[aria-pressed="true"] { animation: pelu-pop .3s var(--ease-out); }
@keyframes pelu-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* ---- Cart badge pulses when the count changes ---- */
.header-cart__count.is-bumped { animation: pelu-pop .35s var(--ease-out); }

/* ---- Images fade in once decoded (no flash of empty box) ---- */
.product-card__media img, .cat-card__media img, .entry__thumb img, .brand-card__logo {
	opacity: 0; transition: opacity var(--transition), transform var(--t-slow);
}
.product-card__media img.is-loaded, .cat-card__media img.is-loaded,
.entry__thumb img.is-loaded, .brand-card__logo.is-loaded,
.no-js .product-card__media img, .no-js .cat-card__media img { opacity: 1; }

/* ---- Skeletons: shown while an async panel fills ---- */
.skeleton { background: linear-gradient(90deg, var(--p-secondary) 25%, #efece7 37%, var(--p-secondary) 63%); background-size: 400% 100%; animation: pelu-shimmer 1.3s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes pelu-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.skeleton-card__media { aspect-ratio: 1; }
.skeleton-card__body { padding: var(--space-3); display: grid; gap: var(--space-2); }
.skeleton-line { height: 12px; }
.skeleton-line--short { width: 55%; }

/* ---- Panels & modals: gentle entrance ---- */
.qv-modal.is-open .qv-modal__box { animation: pelu-rise .28s var(--ease-out); }
@keyframes pelu-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mega-panel, .primary-nav .sub-menu { transition: opacity var(--transition), transform var(--transition), visibility var(--transition); }

/* ---- Toast notifications (shared style for any status message) ---- */
.pelu-toast {
	position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
	background: var(--p-primary); color: #fff; padding: .9em 1.6em; border-radius: var(--radius-md);
	box-shadow: var(--shadow-md); font-size: .88rem; z-index: 210; opacity: 0;
	transition: opacity var(--transition), transform var(--transition); pointer-events: none;
	max-width: calc(100% - 32px);
}
.pelu-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.pelu-toast--success { background: var(--success); }
.pelu-toast--error { background: var(--danger); }

/* ---- Form validation feedback ---- */
input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--danger); }
input:user-invalid:focus { outline-color: var(--danger); }
.woocommerce-invalid input { border-color: var(--danger); }
.woocommerce-validated input { border-color: var(--success); }

/* ---- Price presentation: consistent everywhere ---- */
.price del, .product-card__price del { opacity: .45; font-weight: 400; font-size: .9em; margin-right: .35em; }
.price ins, .product-card__price ins { text-decoration: none; font-weight: 600; }
.product-card__price { font-variant-numeric: tabular-nums; }

/* ---- Sticky add-to-cart bar on mobile product pages ---- */
.sticky-atc {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
	display: none; align-items: center; gap: var(--space-3);
	padding: var(--space-2) var(--space-3); background: var(--p-bg);
	border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);
	transform: translateY(100%); transition: transform var(--transition);
}
.sticky-atc.is-visible { transform: none; }
.sticky-atc__info { flex: 1; min-width: 0; }
.sticky-atc__name { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__price { font-weight: 600; font-size: .95rem; }
.sticky-atc .btn { flex-shrink: 0; }
@media (max-width: 767px) { .single-product .sticky-atc { display: flex; } .single-product .whatsapp-fab { bottom: 84px; } }

/* ---- Mobile refinements ---- */
@media (max-width: 767px) {
	.site-header__inner { gap: var(--space-2); }
	.hero__actions .btn { flex: 1; justify-content: center; }
	.shop-toolbar { font-size: .8rem; }
	.shop-toolbar__controls { width: 100%; justify-content: space-between; }
	.section-title { margin-bottom: var(--space-4); }
	.home-section { padding: var(--space-5) 0; }
	.trust-badges { grid-template-columns: 1fr; }
	/* Comfortable reading measure on small screens. */
	.entry__content { font-size: 1rem; }
}

/* ---- Empty states: never a dead end ---- */
.empty-state { text-align: center; padding: var(--space-6) var(--space-3); max-width: 520px; margin-inline: auto; }
.empty-state__title { font-family: var(--p-font-heading); font-size: 1.3rem; margin-bottom: var(--space-2); }
.empty-state__text { color: var(--muted); margin-bottom: var(--space-4); }
.empty-state .search-form { margin-bottom: var(--space-3); }
.empty-state__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-4); }
.empty-state__chips a { display: inline-block; padding: .35em 1em; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: .85rem; color: var(--muted); }
.empty-state__chips a:hover { border-color: var(--p-accent); color: var(--p-accent); }
.empty-state .btn { margin: 0 var(--space-1); }

/* ==========================================================================
   SCROLL ANIMATIONS
   Elements rise into place once, as they enter the viewport. Deliberately
   subtle: 16px of travel, one pass, never on repeat scrolling — the page
   should feel alive, not perform. Powered by IntersectionObserver (no library).
   Fully disabled under prefers-reduced-motion by the rule above.
   ========================================================================== */

/* Hidden only when JS is available; without JS everything renders normally. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
	will-change: opacity, transform;
}
.js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Directional variants for layouts that read better sideways. */
.js [data-reveal="left"]  { transform: translateX(-20px); }
.js [data-reveal="right"] { transform: translateX(20px); }
.js [data-reveal="scale"] { transform: scale(.97); }
.js [data-reveal="left"].is-revealed,
.js [data-reveal="right"].is-revealed,
.js [data-reveal="scale"].is-revealed { transform: none; }

/* Children stagger in sequence — the delay is set inline by JS. */
.js [data-reveal-children] > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.js [data-reveal-children].is-revealed > * {
	opacity: 1;
	transform: none;
}

/* Section headings get a hairline that draws itself under the title. */
.js .section-title__heading { position: relative; }
.js .section-title.is-revealed .section-title__heading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	width: 48px;
	height: 1px;
	background: var(--p-accent);
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	animation: pelu-rule .7s var(--ease-out) .15s forwards;
}
@keyframes pelu-rule { to { transform: translateX(-50%) scaleX(1); } }

/* Hero content settles in on load (no observer needed — it is above the fold). */
.js .hero__title  { animation: pelu-hero .8s var(--ease-out) both; }
.js .hero__sub    { animation: pelu-hero .8s var(--ease-out) .12s both; }
.js .hero__actions{ animation: pelu-hero .8s var(--ease-out) .24s both; }
@keyframes pelu-hero { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Header condenses slightly once the page is scrolled. */
.has-sticky-header .site-header { transition: box-shadow var(--transition), background var(--transition); }
.site-header.is-scrolled .site-header__inner { min-height: 60px; transition: min-height var(--transition); }
.site-header__inner { transition: min-height var(--transition); }

/* Reduced motion: reveal everything immediately, animate nothing. */
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal],
	.js [data-reveal-children] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
	.js .hero__title, .js .hero__sub, .js .hero__actions { animation: none; }
	.js .section-title.is-revealed .section-title__heading::after { animation: none; transform: translateX(-50%) scaleX(1); }
}

/* Page enters with a short fade — removes the blank-flash between pages. */
.js body { animation: pelu-page-in .35s var(--ease-out) both; }
@keyframes pelu-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js body { animation: none; } }