/*
* Store Theme — single bundled stylesheet.
*
* Deliberately one file, not three: Lighthouse mobile (throttled) penalises
* every extra render-blocking heavily (PR 5 target: home >= 90).
* Kept as three clearly-delimited sections below instead of separate files
* so each concern (fonts / tokens / layout) is still easy to find and edit:
* 1. @font-face (self-hosted fonts)
* 2. Design tokens (CSS custom properties)
* 3. Layout + components (header, footer, homepage, WooCommerce hooks)
*/
/* =========================================================================
* 1. Fonts
* =======================================================================*/
/*
* Self-hosted fonts — no Google Fonts / CDN requests (GDPR + performance).
*
* Baloo 2 (display/headings — friendly + rounded) + Hanken Grotesk (body/UI
* — clean humanist): the pair approved in docs/prototypes/medallion-studio.html.
* Both OFL-licensed. Each ships a Latin-Extended subset carrying the Romanian
* diacritics that live outside Latin-1 — ă Ă ș Ș ț Ț (comma-below) — with
* â Â î Î in the base Latin subset (glyph coverage verified, no tofu). Subset
* woff2 files were downloaded once from fonts.googleapis.com/css2 (no API key,
* one-time asset fetch — same category as the PR 4 stock photos) and committed
* under assets/fonts/. Replaces the previous Fraunces/Inter faces (PR 24).
*/
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/baloo2-600-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/baloo2-600-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/baloo2-700-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/baloo2-700-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/hanken-400-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/hanken-400-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/hanken-500-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/hanken-500-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/hanken-600-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/hanken-600-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================================
* 2. Design tokens
* =======================================================================*/
/*
* Brand design tokens — CSS custom properties.
*
* Palette: the GREEN-AND-CREAM friendly brand approved in
* docs/prototypes/medallion-studio.html. Forest green is the PRIMARY / CTA /
* accent role (promoted from the old section-band accent); cream stays the
* paper; brass/gold is reserved for PRICES. Swapping this one block re-skins
* home, product/designer AND every WooCommerce view with no per-template edit.
*
* Legacy aliases (--store-color-forest / --store-color-brass) are kept pointed
* at the new primary/gold values so older component rules keep resolving.
*/
:root {
color-scheme: light dark;
/* Neutrals — cream paper + warm ink */
--store-color-ink: #211c15;
--store-color-ink-soft: #4a4038;
--store-color-ink-faint: #8a7e6e;
--store-color-paper: #faf7f2;
--store-color-paper-alt: #f1eadd;
--store-color-white: #ffffff;
--store-color-surface: #ffffff;
--store-color-line: #e6dccb;
--store-color-line-strong: #d8c9ae;
/* Primary — forest green (CTA / links / accents) */
--store-color-primary: #33473a;
--store-color-primary-strong: #24332a;
--store-color-primary-ink: #faf7f2;
--store-color-primary-tint: #e3ede4;
--store-color-primary-text: #2e4636;
/* Secondary — announcement + footer band */
--store-color-secondary: #2a3a30;
--store-color-secondary-ink: #f4efe4;
--store-color-secondary-tint: #dde6de;
/* Gold / brass — PRICES only */
--store-color-gold: #8a6730;
--store-color-gold-tint: #f3e6d0;
/* Legacy aliases (keep older rules resolving to the new roles) */
--store-color-brass: #33473a;
--store-color-brass-dark: #8a6730;
--store-color-brass-tint: #f3e6d0;
--store-color-forest: #33473a;
--store-color-forest-dark: #24332a;
--store-color-terracotta: #b5563c;
/* Status */
--store-color-good: #3d6b4c;
--store-color-success: #3d6b4c;
--store-color-error: #b3392c;
--store-color-danger: #b3392c;
/* Typography */
--store-font-heading: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
--store-font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--store-fs-xs: 0.8125rem;
--store-fs-sm: 0.9375rem;
--store-fs-base: 1rem;
--store-fs-md: 1.125rem;
--store-fs-lg: 1.375rem;
--store-fs-xl: 1.75rem;
--store-fs-2xl: 2.25rem;
--store-fs-3xl: 2.75rem;
--store-lh-tight: 1.15;
--store-lh-base: 1.6;
/* Spacing scale */
--store-space-2xs: 0.25rem;
--store-space-xs: 0.5rem;
--store-space-sm: 0.75rem;
--store-space-md: 1.25rem;
--store-space-lg: 2rem;
--store-space-xl: 3.25rem;
--store-space-2xl: 5rem;
/* Shape — friendly rounding from the prototype */
--store-radius-xs: 8px;
--store-radius-sm: 12px;
--store-radius-md: 18px;
--store-radius-lg: 26px;
--store-radius-pill: 999px;
/* Warm brown-tinted soft shadows (amber-free) */
--store-shadow-sm: 0 1px 2px rgba(74, 54, 30, 0.06);
--store-shadow-md: 0 6px 20px rgba(74, 54, 30, 0.10);
--store-shadow-lg: 0 18px 46px rgba(74, 54, 30, 0.14);
--store-shadow-primary: 0 8px 22px rgba(36, 51, 42, 0.26);
--store-ring: 0 0 0 3px rgba(51, 71, 58, 0.4);
/* Layout */
--store-container-width: 1240px;
--store-gutter: 1.25rem;
}
/*
* Dark theme — warm espresso-green (never cold slate). The site DEFAULTS to
* the cream light look (front-page/header set data-theme="light"); the header
* toggle flips [data-theme] on . prefers-color-scheme is honoured only
* when the visitor has expressed no explicit choice.
*/
:root[data-theme="dark"] {
--store-color-ink: #f1efe7;
--store-color-ink-soft: #b7b3a4;
--store-color-ink-faint: #8a8676;
--store-color-paper: #171a16;
--store-color-paper-alt: #1d211b;
--store-color-white: #232821;
--store-color-surface: #232821;
--store-color-line: #353c31;
--store-color-line-strong: #48513f;
--store-color-primary: #79a888;
--store-color-primary-strong: #8fbf9d;
--store-color-primary-ink: #12180f;
--store-color-primary-tint: #263026;
--store-color-primary-text: #93c1a0;
--store-color-secondary: #2e4034;
--store-color-secondary-ink: #edeae0;
--store-color-secondary-tint: #9fbfa9;
--store-color-gold: #cb9e58;
--store-color-gold-tint: #3a2e14;
--store-color-brass: #79a888;
--store-color-brass-dark: #cb9e58;
--store-color-brass-tint: #3a2e14;
--store-color-forest: #79a888;
--store-color-forest-dark: #1d211b;
--store-color-good: #57b77c;
--store-color-success: #57b77c;
--store-color-error: #e06a5a;
--store-color-danger: #e06a5a;
--store-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--store-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
--store-shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.55);
--store-shadow-primary: 0 8px 22px rgba(121, 168, 136, 0.32);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) {
--store-color-ink: #f1efe7;
--store-color-ink-soft: #b7b3a4;
--store-color-ink-faint: #8a8676;
--store-color-paper: #171a16;
--store-color-paper-alt: #1d211b;
--store-color-white: #232821;
--store-color-surface: #232821;
--store-color-line: #353c31;
--store-color-line-strong: #48513f;
--store-color-primary: #79a888;
--store-color-primary-strong: #8fbf9d;
--store-color-primary-ink: #12180f;
--store-color-primary-tint: #263026;
--store-color-primary-text: #93c1a0;
--store-color-secondary: #2e4034;
--store-color-secondary-ink: #edeae0;
--store-color-secondary-tint: #9fbfa9;
--store-color-gold: #cb9e58;
--store-color-gold-tint: #3a2e14;
--store-color-brass: #79a888;
--store-color-brass-dark: #cb9e58;
--store-color-brass-tint: #3a2e14;
--store-color-forest: #79a888;
--store-color-forest-dark: #1d211b;
--store-color-good: #57b77c;
--store-color-success: #57b77c;
--store-color-error: #e06a5a;
--store-color-danger: #e06a5a;
--store-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--store-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
--store-shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.55);
--store-shadow-primary: 0 8px 22px rgba(121, 168, 136, 0.32);
}
}
@media (min-width: 782px) {
:root {
--store-fs-2xl: 2.75rem;
--store-fs-3xl: 3.5rem;
--store-gutter: 2rem;
}
}
/* =========================================================================
* 3. Layout + components
* =======================================================================*/
/*
* Layout + component styles: header, footer, homepage sections, WooCommerce
* hook output. Mobile-first (80% of RO traffic is mobile — PLAN.md §5):
* base rules target small screens, wider layouts live behind min-width
* media queries.
*
* `.screen-reader-text` is provided by the Kadence parent theme.
*/
/* -----------------------------------------------------------------------
* Base
* ---------------------------------------------------------------------*/
body {
font-family: var(--store-font-body);
color: var(--store-color-ink);
background: var(--store-color-paper);
font-size: var(--store-fs-base);
line-height: var(--store-lh-base);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--store-font-heading);
color: var(--store-color-ink);
line-height: var(--store-lh-tight);
font-weight: 700;
letter-spacing: -0.01em;
}
a {
color: inherit;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: none;
box-shadow: var(--store-ring);
border-radius: var(--store-radius-xs);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.store-container {
max-width: var(--store-container-width);
margin-inline: auto;
padding-inline: var(--store-gutter);
}
.store-section {
padding-block: var(--store-space-xl);
}
.store-section__title {
font-size: var(--store-fs-xl);
margin: 0 0 var(--store-space-md);
}
.store-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--store-space-xs);
font-family: var(--store-font-body);
font-weight: 600;
font-size: var(--store-fs-sm);
text-decoration: none;
padding: 0.9em 1.6em;
border-radius: var(--store-radius-sm);
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.store-btn--primary {
background: var(--store-color-primary);
color: var(--store-color-primary-ink);
box-shadow: var(--store-shadow-primary);
}
.store-btn--primary:hover,
.store-btn--primary:focus-visible {
background: var(--store-color-primary-strong);
color: var(--store-color-primary-ink);
transform: translateY(-1px);
}
/* -----------------------------------------------------------------------
* Header
* ---------------------------------------------------------------------*/
.store-header {
background: var(--store-color-paper);
border-bottom: 1px solid var(--store-color-line);
position: sticky;
top: 0;
z-index: 40;
}
.store-header__row {
display: flex;
align-items: center;
gap: var(--store-space-sm);
padding-block: var(--store-space-sm);
}
.store-header__logo {
margin-inline-end: auto;
}
.store-header__wordmark {
font-family: var(--store-font-heading);
font-weight: 600;
font-size: var(--store-fs-lg);
text-decoration: none;
color: var(--store-color-ink);
}
.store-header__nav {
display: none;
}
.store-nav__list {
display: flex;
align-items: center;
gap: var(--store-space-md);
list-style: none;
margin: 0;
padding: 0;
font-size: var(--store-fs-sm);
font-weight: 500;
}
.store-nav__list a {
text-decoration: none;
padding-block: var(--store-space-xs);
}
.store-nav__list a:hover,
.store-nav__list a:focus-visible {
color: var(--store-color-primary-text);
}
.store-header__actions {
display: flex;
align-items: center;
gap: var(--store-space-xs);
}
.store-header__toggle,
.store-header__cart {
display: inline-flex;
align-items: center;
gap: var(--store-space-2xs);
background: none;
border: none;
padding: var(--store-space-xs);
cursor: pointer;
color: var(--store-color-ink);
text-decoration: none;
position: relative;
}
.store-cart-count {
position: absolute;
top: 2px;
right: 2px;
min-width: 1.1rem;
height: 1.1rem;
border-radius: 999px;
background: var(--store-color-terracotta);
color: var(--store-color-white);
font-size: 0.6875rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
padding-inline: 3px;
}
.store-cart-count[data-count="0"] {
display: none;
}
.store-header__search-panel {
border-top: 1px solid var(--store-color-line);
padding-block: var(--store-space-sm);
background: var(--store-color-paper-alt);
}
.store-header__search-panel[hidden],
.store-header__mobile-nav[hidden] {
display: none;
}
.store-header__search-panel .search-form,
.store-header__search-panel form[role="search"] {
display: flex;
gap: var(--store-space-xs);
}
.store-header__search-panel input[type="search"] {
flex: 1;
padding: 0.6em 0.9em;
border: 1px solid var(--store-color-line);
border-radius: var(--store-radius-sm);
font-family: var(--store-font-body);
}
.store-header__mobile-nav {
border-top: 1px solid var(--store-color-line);
background: var(--store-color-paper);
padding: var(--store-space-md) var(--store-gutter);
}
.store-header__mobile-nav .store-nav__list {
flex-direction: column;
align-items: flex-start;
gap: var(--store-space-sm);
font-size: var(--store-fs-md);
}
@media (min-width: 900px) {
.store-header__menu-toggle,
.store-header__mobile-nav {
display: none;
}
.store-header__nav {
display: block;
margin-inline-end: var(--store-space-md);
}
}
/* -----------------------------------------------------------------------
* Homepage: hero
* ---------------------------------------------------------------------*/
.store-hero {
background: linear-gradient(160deg, var(--store-color-forest) 0%, var(--store-color-forest-dark) 100%);
color: var(--store-color-paper);
padding-block: var(--store-space-2xl) var(--store-space-xl);
}
.store-hero__inner {
max-width: 46rem;
}
.store-hero__eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--store-fs-xs);
font-weight: 600;
color: var(--store-color-brass-tint);
margin: 0 0 var(--store-space-sm);
}
.store-hero__title {
font-size: var(--store-fs-3xl);
margin: 0 0 var(--store-space-md);
color: var(--store-color-paper);
}
.store-hero__subtitle {
font-size: var(--store-fs-md);
color: var(--store-color-paper-alt);
margin: 0 0 var(--store-space-lg);
max-width: 38rem;
}
/* -----------------------------------------------------------------------
* Homepage: social proof (pet photo strip, PR 25)
*
* Auto-scrolling marquee: the track (duplicated tile set, see
* store_theme_render_social_proof()) animates from translateX(0) to
* translateX(-50%) so the loop is seamless, and pauses on hover/focus.
* `prefers-reduced-motion: reduce` removes the animation entirely, leaving
* a plain, manually scrollable snap row underneath (still zero motion).
* Every tile is a fixed 4:5 box (width/height attrs + aspect-ratio here)
* so the lazy-loaded images never shift layout once they arrive.
* ---------------------------------------------------------------------*/
.store-section--social-proof {
padding-block: var(--store-space-lg) var(--store-space-xl);
}
.store-section__title--center {
text-align: center;
}
.store-social-proof__scroller {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.store-social-proof__disclaimer {
margin: 0 0 var(--store-space-sm);
font-size: var(--store-fs-xs);
color: var(--store-color-ink-faint);
font-style: italic;
text-align: center;
}
.store-social-proof__track {
display: flex;
gap: var(--store-space-md);
width: max-content;
animation: store-social-proof-marquee 40s linear infinite;
}
.store-social-proof__scroller:hover .store-social-proof__track,
.store-social-proof__scroller:focus-within .store-social-proof__track {
animation-play-state: paused;
}
@keyframes store-social-proof-marquee {
from {
transform: translateX(0);
}
to {
/* Track holds the tile set twice back-to-back, so -50% is exactly
* one full set's width — the loop point is invisible. */
transform: translateX(-50%);
}
}
.store-social-proof__item {
flex: 0 0 auto;
width: 168px;
scroll-snap-align: start;
}
.store-social-proof__item:focus-visible {
outline: 2px solid var(--store-color-primary);
outline-offset: 3px;
border-radius: var(--store-radius-md);
}
.store-social-proof__media {
display: block;
aspect-ratio: 4 / 5;
border-radius: var(--store-radius-md);
overflow: hidden;
background: var(--store-color-paper-alt);
}
.store-social-proof__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.store-social-proof__caption {
margin-top: var(--store-space-xs);
text-align: center;
}
.store-social-proof__name {
display: block;
font-size: var(--store-fs-sm);
font-weight: 600;
color: var(--store-color-ink);
}
.store-social-proof__tag {
display: inline-block;
margin-top: 2px;
font-size: 0.6875rem;
font-style: italic;
color: var(--store-color-ink-faint);
}
@media (prefers-reduced-motion: reduce) {
.store-social-proof__track {
animation: none;
}
}
/* -----------------------------------------------------------------------
* Homepage: trust bar
* ---------------------------------------------------------------------*/
.store-section--trust {
padding-block: var(--store-space-lg);
background: var(--store-color-paper-alt);
border-bottom: 1px solid var(--store-color-line);
}
.store-trust {
display: flex;
flex-wrap: wrap;
gap: var(--store-space-md) var(--store-space-lg);
list-style: none;
margin: 0;
padding: 0;
justify-content: center;
}
.store-trust__item {
display: flex;
align-items: center;
gap: var(--store-space-xs);
font-size: var(--store-fs-sm);
font-weight: 500;
color: var(--store-color-ink-soft);
}
.store-trust__item .kadence-svg-iconset {
color: var(--store-color-primary);
display: inline-flex;
}
.store-trust--badges {
justify-content: flex-start;
gap: var(--store-space-md);
}
/* -----------------------------------------------------------------------
* Homepage: category grid
* ---------------------------------------------------------------------*/
.store-categories__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--store-space-md);
}
@media (min-width: 600px) {
.store-categories__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.store-categories__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.store-category-card {
display: flex;
flex-direction: column;
text-decoration: none;
background: var(--store-color-surface);
border: 1px solid var(--store-color-line);
border-radius: var(--store-radius-lg);
overflow: hidden;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.store-category-card:hover,
.store-category-card:focus-visible {
box-shadow: var(--store-shadow-md);
transform: translateY(-2px);
}
.store-category-card__media {
aspect-ratio: 1 / 1;
background: var(--store-color-paper-alt);
display: block;
}
.store-category-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.store-category-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--store-font-heading);
font-size: var(--store-fs-3xl);
color: var(--store-color-brass);
}
.store-category-card__body {
padding: var(--store-space-md);
}
.store-category-card__title {
display: block;
font-weight: 600;
font-size: var(--store-fs-md);
margin-bottom: var(--store-space-2xs);
}
.store-category-card__desc {
display: block;
font-size: var(--store-fs-sm);
color: var(--store-color-ink-soft);
}
/* -----------------------------------------------------------------------
* Homepage: product strip
* ---------------------------------------------------------------------*/
.store-products-strip__scroller {
display: flex;
gap: var(--store-space-md);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--store-space-xs);
-webkit-overflow-scrolling: touch;
}
.store-product-card {
flex: 0 0 auto;
width: 200px;
scroll-snap-align: start;
text-decoration: none;
color: inherit;
}
.store-product-card__media {
display: block;
aspect-ratio: 1 / 1;
background: var(--store-color-paper-alt);
border-radius: var(--store-radius-md);
overflow: hidden;
margin-bottom: var(--store-space-xs);
}
.store-product-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.store-product-card__title {
display: block;
font-size: var(--store-fs-sm);
font-weight: 500;
margin-bottom: var(--store-space-2xs);
}
.store-product-card__price {
display: block;
font-size: var(--store-fs-sm);
font-weight: 600;
color: var(--store-color-brass-dark);
}
/* -----------------------------------------------------------------------
* Homepage: wood-grain section band (PR 25)
*
* ONE shared, desaturated wood-grain texture (Pexels photo 82256 — plain
* light wood surface, no logo, no people, commercial-use Pexels license),
* SELF-HOSTED in the theme (assets/images/wood-grain.jpg) and served from the
* site's own origin so the homepage makes ZERO requests to any external image
* host — no visitor IP leaks and the store stays reproducible offline. It is
* applied as a ::before background layer behind an existing section (the
* content teaser) rather than as an ![]()
— a CSS background-image is
* discovered by the normal style/paint pipeline, not the preload scanner,
* so it can't compete with the hero's text LCP or regress CWV. The tint
* gradient + filter desaturate/soften it so the section's own cream/green
* tokens stay legible in both themes; `isolation: isolate` + negative
* z-index keep it strictly behind the section's real content, and putting
* it on ::before (not the section itself) means `filter` only touches the
* texture, never the heading/card text on top of it.
* ---------------------------------------------------------------------*/
.store-section--wood {
position: relative;
isolation: isolate;
}
.store-section--wood::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(
color-mix(in srgb, var(--store-color-paper) 82%, transparent),
color-mix(in srgb, var(--store-color-paper) 82%, transparent)
),
url('../images/wood-grain.jpg') center / cover no-repeat;
filter: saturate(0.45) sepia(0.08);
}
/* -----------------------------------------------------------------------
* Homepage: content teaser
* ---------------------------------------------------------------------*/
.store-teaser__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--store-space-md);
}
@media (min-width: 782px) {
.store-teaser__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.store-teaser-card {
display: block;
text-decoration: none;
background: var(--store-color-primary-tint);
border-radius: var(--store-radius-lg);
padding: var(--store-space-md);
color: var(--store-color-ink);
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.store-teaser-card:hover,
.store-teaser-card:focus-visible {
box-shadow: var(--store-shadow-md);
transform: translateY(-2px);
}
.store-teaser-card__title {
display: block;
font-family: var(--store-font-heading);
font-weight: 600;
font-size: var(--store-fs-md);
margin-bottom: var(--store-space-xs);
}
.store-teaser-card__text {
display: block;
font-size: var(--store-fs-sm);
color: var(--store-color-ink-soft);
margin-bottom: var(--store-space-sm);
}
.store-teaser-card__cta {
display: block;
font-size: var(--store-fs-sm);
font-weight: 600;
color: var(--store-color-primary-text);
}
/* Coming-soon teaser: a static (non-link) card announcing the planned
second product — no hover lift, softly outlined instead of filled. */
.store-teaser-card--soon {
background: transparent;
border: 1px dashed var(--store-color-line-strong);
}
.store-teaser-card--soon:hover,
.store-teaser-card--soon:focus-visible {
box-shadow: none;
transform: none;
}
/* -----------------------------------------------------------------------
* Footer
* ---------------------------------------------------------------------*/
.store-footer {
background: var(--store-color-secondary);
color: var(--store-color-secondary-ink);
margin-top: var(--store-space-2xl);
}
.store-footer a {
color: var(--store-color-secondary-ink);
text-decoration: none;
}
.store-footer a:hover,
.store-footer a:focus-visible {
color: var(--store-color-white);
text-decoration: underline;
}
.store-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--store-space-lg);
padding-block: var(--store-space-xl);
}
@media (min-width: 782px) {
.store-footer__grid {
grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
}
.store-footer__col h2 {
font-family: var(--store-font-body);
font-size: var(--store-fs-sm);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--store-color-paper);
margin: 0 0 var(--store-space-sm);
}
.store-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--store-space-xs);
font-size: var(--store-fs-sm);
}
.store-footer__wordmark {
font-family: var(--store-font-heading);
font-size: var(--store-fs-lg);
color: var(--store-color-white);
margin: 0 0 var(--store-space-sm);
}
.store-footer__soon {
opacity: 0.7;
font-style: italic;
}
.store-footer__payments {
flex-direction: row !important;
align-items: center;
gap: var(--store-space-sm) !important;
flex-wrap: wrap;
}
.store-footer__payments .kadence-svg-iconset {
display: inline-flex;
}
.store-footer__payments-cod {
font-size: var(--store-fs-xs);
border: 1px solid rgba(250, 247, 242, 0.3);
border-radius: var(--store-radius-sm);
padding: 0.2em 0.5em;
}
.store-footer__courier-note {
font-size: var(--store-fs-xs);
margin-top: var(--store-space-sm);
color: var(--store-color-paper-alt);
opacity: 0.85;
}
.store-footer__legal-region {
border-top: 1px solid rgba(250, 247, 242, 0.15);
padding-block: var(--store-space-md);
}
.store-footer__legal-pictograms:empty::before {
content: "";
display: block;
min-height: 1px; /* reserved region, filled in PR 11 — avoids CLS once populated */
}
.store-footer__bottom {
border-top: 1px solid rgba(250, 247, 242, 0.15);
padding-block: var(--store-space-sm);
font-size: var(--store-fs-xs);
opacity: 0.8;
}
/* -----------------------------------------------------------------------
* Single product: delivery estimate + trust badges under add-to-cart
* ---------------------------------------------------------------------*/
.store-product-trust {
margin-block: var(--store-space-md);
padding-block-start: var(--store-space-md);
border-top: 1px solid var(--store-color-line);
}
.store-product-trust__delivery {
display: flex;
align-items: center;
gap: var(--store-space-xs);
font-size: var(--store-fs-sm);
font-weight: 500;
margin: 0 0 var(--store-space-sm);
}
.store-product-trust__delivery .kadence-svg-iconset {
color: var(--store-color-primary);
}
/* -----------------------------------------------------------------------
* WooCommerce archive/product tweaks (layout-only — no template copies)
* ---------------------------------------------------------------------*/
.woocommerce-product-gallery {
aspect-ratio: 1 / 1;
}
ul.products li.product img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* Prices stay gold/brass across every WooCommerce view. */
.woocommerce p.price,
.woocommerce span.price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
color: var(--store-color-gold);
font-weight: 600;
}
/* Buttons: forest-green fill + cream ink + friendly rounding, sitewide
(archive, cart, checkout, account) — no per-template edits. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
background: var(--store-color-primary);
color: var(--store-color-primary-ink);
border-radius: var(--store-radius-sm);
border: 1px solid transparent;
font-family: var(--store-font-heading);
font-weight: 700;
box-shadow: var(--store-shadow-primary);
transition: background-color 0.15s ease, transform 0.15s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
background: var(--store-color-primary-strong);
color: var(--store-color-primary-ink);
transform: translateY(-1px);
}
/* Links + selected + focus adopt the green primary role. */
.woocommerce a:not(.button),
.woocommerce-breadcrumb a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--store-color-primary-text);
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
border-top-color: var(--store-color-primary);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
color: var(--store-color-primary);
}
/* Selected variation / on-sale tint uses the sage wash, not blue-grey. */
.woocommerce span.onsale {
background: var(--store-color-primary);
color: var(--store-color-primary-ink);
border-radius: var(--store-radius-pill);
}
/* Cards on archive pages get the friendly larger radius + warm shadow. */
.woocommerce ul.products li.product {
border-radius: var(--store-radius-lg);
}
/* ---------------------------------------------------------------------------
* SEO layer (PR 9): breadcrumb trail + category long-description below grid.
* ------------------------------------------------------------------------- */
.store-breadcrumb {
font-size: var(--store-fs-sm);
color: var(--store-color-ink-soft);
padding-block: var(--store-space-sm);
}
.store-breadcrumb a {
color: var(--store-color-ink-soft);
text-decoration: none;
}
.store-breadcrumb a:hover,
.store-breadcrumb a:focus-visible {
color: var(--store-color-primary-text);
text-decoration: underline;
}
.store-breadcrumb .separator {
margin-inline: var(--store-space-2xs);
color: var(--store-color-line);
}
/* Category "long description" — keyword-rich copy rendered AFTER the product
* grid (see inc/seo.php), visually set apart from the products above it. */
.store-category-longdesc {
margin-top: var(--store-space-xl);
padding-top: var(--store-space-lg);
border-top: 1px solid var(--store-color-line);
}
.store-category-longdesc p {
max-width: 70ch;
color: var(--store-color-ink-soft);
font-size: var(--store-fs-sm);
line-height: 1.7;
}
.store-category-longdesc p + p {
margin-top: var(--store-space-sm);
}
/* ---------------------------------------------------------------------------
* Announcement bar (PR 24) — forest-green band above the header with a
* rotating RO value-prop and a Câini/Pisici segmented pill toggle. Shows on
* mobile and desktop; the message ellipsises rather than wrapping.
* ------------------------------------------------------------------------- */
.store-announce {
background: var(--store-color-secondary);
color: var(--store-color-secondary-ink);
font-size: var(--store-fs-sm);
font-weight: 500;
}
.store-announce__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--store-space-sm);
padding-block: 0.55rem;
min-height: 2.5rem;
}
.store-announce__msg {
display: flex;
align-items: center;
gap: var(--store-space-xs);
min-width: 0;
}
.store-announce__msg .kadence-svg-iconset,
.store-announce__msg svg {
flex: none;
}
.store-announce__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Header theme (dark/light) toggle — round icon button matching the prototype. */
.store-header__theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--store-radius-pill);
border: 1px solid var(--store-color-line);
background: var(--store-color-surface);
color: var(--store-color-ink);
cursor: pointer;
padding: 0;
}
.store-header__theme-toggle:hover {
border-color: var(--store-color-line-strong);
}
.store-header__theme-toggle .store-icon--sun {
display: none;
}
:root[data-theme="dark"] .store-header__theme-toggle .store-icon--sun {
display: inline-flex;
}
:root[data-theme="dark"] .store-header__theme-toggle .store-icon--moon {
display: none;
}
/* Surface-aware header/cards in dark mode (they were hard-coded to paper). */
.store-header {
background: var(--store-color-paper);
}
.store-product-card__media,
.store-category-card__media {
background: var(--store-color-paper-alt);
}
/* ---------------------------------------------------------------------------
* Kadence archive/product hero band (PR 24): the parent theme paints the
* WooCommerce archive/single title strip with its own cold default
* (#edf2f7). Warm it to the cream paper so archives read on-brand — a single
* token-driven override, no per-template edits.
* ------------------------------------------------------------------------- */
.entry-hero-container-inner {
background: var(--store-color-paper-alt);
border-bottom: 1px solid var(--store-color-line);
}
/* ---------------------------------------------------------------------------
* Header + dark-mode polish (PR 24).
*
* Kadence paints the header background directly on `#masthead` (ID
* specificity), so the token-driven header colour needs an ID-level selector
* to win — in BOTH themes. This also brings the light header from pure white
* to the warm cream paper of the prototype.
* ------------------------------------------------------------------------- */
#masthead.store-header {
background: var(--store-color-paper);
border-bottom: 1px solid var(--store-color-line);
}
/* Dark mode: keep the hero a deep espresso-green with cream text (the
forest→primary alias otherwise flips light in dark and inverts the hero),
and lift the gold eyebrow so it stays legible on the dark band. */
:root[data-theme="dark"] .store-hero {
background: linear-gradient(160deg, #26332b 0%, #12180f 100%);
}
:root[data-theme="dark"] .store-hero__title,
:root[data-theme="dark"] .store-hero__subtitle {
color: var(--store-color-ink);
}
:root[data-theme="dark"] .store-hero__eyebrow {
color: var(--store-color-gold);
}
/* The search field inside the header keeps a readable surface in dark mode. */
:root[data-theme="dark"] .store-header__search-panel input[type="search"] {
background: var(--store-color-surface);
color: var(--store-color-ink);
border-color: var(--store-color-line);
}
/* Cart action-row buttons: WooCommerce's higher-specificity :disabled rule
forces a muted grey text that fails contrast on our green fill (e.g. the
"Actualizează coșul" button before a quantity changes). Restore legible
cream text and read the disabled state through reduced opacity instead. */
.woocommerce-cart table.cart td.actions .button:disabled,
.woocommerce-checkout table.cart td.actions .button:disabled,
#add_payment_method table.cart td.actions .button:disabled {
color: var(--store-color-primary-ink);
opacity: 0.55;
}