/* =============================================================
0. Fonts (self-hosted — no external request at runtime)
============================================================= */
@font-face {
font-family: "Google Sans Flex";
src: url("/assets/fonts/google-sans-flex.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Headline serif — same lockup family as the wordmark's "shop" half
(skincareshop_logo.png), used for every heading so the logo doesn't
feel like a one-off flourish against a purely-sans site. */
@font-face {
font-family: "Playfair Display";
src: url("/assets/fonts/playfair-display-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Playfair Display";
src: url("/assets/fonts/playfair-display-700-italic.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* =============================================================
1. Design tokens
============================================================= */
:root {
--color-bg: #FCFBFA;
--color-surface: #F7F3F0;
--color-surface-alt: #F1EBE6;
--color-text: #2B1B1F;
--color-text-muted: #86726C;
--color-primary: #2B1B1F;
/* Two accent hues by design, not tints of one: --color-accent (blush)
is for bold fills — buttons, badges, borders — and is too light to
ever carry text on its own; --color-accent-dark is a deeper berry
shade, used wherever an accent color needs to sit as TEXT/an icon
on a light background (nav hover, active states) instead of as a
background fill. Anything that puts text or an icon on top of
--color-accent or --gradient-brand must use --color-primary (near-
black) for that foreground, never white — white fails contrast
against the pale end of the gradient. */
--color-accent: #ECC3CD;
--color-accent-dark: #9C4F63;
--color-accent-soft: #FDF4F6;
--color-border: #EEE7E1;
--color-white: #FFFFFF;
--gradient-brand: linear-gradient(135deg, #F3D3D7 0%, #E9C79C 100%);
--font-body: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-full: 999px;
--shadow-card: 0 2px 12px rgba(20, 24, 31, 0.06);
--shadow-card-hover: 0 12px 28px rgba(20, 24, 31, 0.12);
--container-max: 1200px;
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* =============================================================
2. Reset / base
============================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* Removes the double-tap-to-zoom gesture (and the ~300ms tap delay it
requires mobile browsers to wait for) on every element site-wide — a
quick double-tap on a link/button/icon no longer zooms the page. Pinch
zoom itself is untouched; only the double-tap gesture is disabled. */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body {
margin: 0;
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
font-family: var(--font-display);
line-height: 1.15;
margin: 0 0 var(--space-3);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-text);
}
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem); }
h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 700; }
p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
.icon { flex-shrink: 0; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* Scroll-reveal: fades/slides content in as it enters the viewport (see main.js) */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s var(--ease-bounce);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-group .reveal-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s var(--ease-bounce);
}
.reveal-group.is-visible .reveal-item {
opacity: 1;
transform: translateY(0);
}
.reveal-group.is-visible .reveal-item:nth-child(1) { transition-delay: 0.03s; }
.reveal-group.is-visible .reveal-item:nth-child(2) { transition-delay: 0.07s; }
.reveal-group.is-visible .reveal-item:nth-child(3) { transition-delay: 0.11s; }
.reveal-group.is-visible .reveal-item:nth-child(4) { transition-delay: 0.15s; }
.reveal-group.is-visible .reveal-item:nth-child(5) { transition-delay: 0.19s; }
.reveal-group.is-visible .reveal-item:nth-child(6) { transition-delay: 0.23s; }
.reveal-group.is-visible .reveal-item:nth-child(7) { transition-delay: 0.27s; }
.reveal-group.is-visible .reveal-item:nth-child(8) { transition-delay: 0.31s; }
.reveal-group.is-visible .reveal-item:nth-child(9) { transition-delay: 0.35s; }
.reveal-group.is-visible .reveal-item:nth-child(10) { transition-delay: 0.39s; }
.reveal-group.is-visible .reveal-item:nth-child(11) { transition-delay: 0.43s; }
.reveal-group.is-visible .reveal-item:nth-child(12) { transition-delay: 0.47s; }
/* =============================================================
3. Layout / utilities
============================================================= */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-4);
}
.section-heading-block {
text-align: center;
max-width: 560px;
margin: 0 auto var(--space-6);
}
.section-heading {
position: relative;
margin-bottom: var(--space-2);
padding-bottom: var(--space-3);
letter-spacing: -0.01em;
}
/* A short brand-gradient underline on every section title — a small,
repeated touch of color that ties otherwise-neutral sections together
without tinting whole backgrounds. */
.section-heading::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 40px;
height: 4px;
background: var(--gradient-brand);
border-radius: var(--radius-full);
transform: translateX(-50%);
}
.section-sub {
font-weight: 600;
color: var(--color-text-muted);
font-size: 1.05rem;
margin: 0;
}
.section-heading:only-child { margin-bottom: var(--space-4); }
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--gradient-brand);
color: var(--color-primary);
font-weight: 700;
font-size: 0.9rem;
padding: 12px var(--space-4);
border-radius: var(--radius-full);
border: none;
white-space: nowrap;
transition: filter 0.25s ease, transform 0.3s var(--ease-bounce);
}
.btn:hover { filter: brightness(0.95); transform: translateY(-2px) scale(1.02); }
.btn--lg { padding: 15px var(--space-5); font-size: 1rem; }
.btn--ghost {
background: var(--color-white);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface); }
.btn--sm { padding: 8px var(--space-3); font-size: 0.8rem; }
.page-content { padding-block: var(--space-6); }
.lede {
font-size: 1.125rem;
color: var(--color-text-muted);
max-width: 68ch;
}
.content-notice {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-4);
color: var(--color-text-muted);
}
/* =============================================================
4. Header / nav
============================================================= */
/* A flat, full-width bar (not the floating rounded pill this layout used
under its previous brand) — the "Shop" mega menu (.nav-megamenu) is
what makes the header read as a shop's, not a lead-gen site's. */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-4);
padding-block: var(--space-3);
}
/* Mobile-only cluster (search/wishlist/menu icons packed tightly, see the
width note below) — .justify-content:space-between on the bar above
already pushes this to the right edge against the logo, no margin
trick needed. Hidden entirely from 768px up, where the search field is
always visible and the wishlist link moves into .primary-nav instead. */
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-1);
flex-shrink: 0;
}
@media (min-width: 768px) {
.site-header__actions { display: none; }
}
.site-header__search-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
background: none;
border: none;
border-radius: var(--radius-full);
color: var(--color-text);
}
.site-header__search-toggle .icon { width: 19px; height: 19px; }
.site-header__search-toggle:hover { background: var(--color-surface); }
.site-header__favorites {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--radius-full);
color: var(--color-text);
}
.site-header__favorites:hover { background: var(--color-surface); }
.site-header__favorites .icon { width: 19px; height: 19px; }
.site-header__favorites-count {
position: absolute;
top: 2px;
right: 2px;
display: flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 3px;
background: var(--gradient-brand);
border-radius: var(--radius-full);
font-size: 0.65rem;
font-weight: 700;
color: var(--color-primary);
}
/* The desktop nav-integrated wishlist link (see .primary-nav__desktop-link
below for its base typography) — its own .site-header__favorites-count
badge sits relative to this instead, top-right of the whole pill. */
.primary-nav__desktop-link--favorites {
position: relative;
display: none;
}
@media (min-width: 768px) {
.primary-nav__desktop-link--favorites {
display: inline-flex;
align-items: center;
gap: 6px;
}
.primary-nav__desktop-link--favorites .icon { width: 17px; height: 17px; }
.primary-nav__desktop-link--favorites .site-header__favorites-count {
position: static;
min-width: 15px;
height: 15px;
}
}
/* Real width budget on a narrow phone: logo + 3 icons + gaps has to clear
~48px of container padding on top of everything else, which doesn't
leave room for the logo at its normal 36px height (it renders ~199px
wide at that size) — this is what was pushing the menu icon onto its
own line. Smaller here only; 768px-up keeps the full-size logo. */
@media (max-width: 767.98px) {
.site-header__bar { gap: var(--space-2) var(--space-3); }
.site-header__logo .brand-logo { height: 30px; }
}
/* Desktop-only mega menu under the "Shop" nav link — see components/
header.php. Pure CSS (:hover/:focus-within), no JS: the panel sits
flush against the trigger (top: 100%, no gap/transform offset) so the
mouse can travel from the link straight into the panel without a dead
zone that would drop the hover state early. Positioned relative to
.site-header (sticky, so it's a valid containing block) rather than
the trigger itself — "Shop" sits well left of center in the nav
cluster, so centering the panel on the trigger's own narrow box would
push its right edge past the viewport; centering on the full header
width instead keeps every column on screen. Hidden entirely below the
768px breakpoint (see .primary-nav__panel's own mobile drill-down for
category browsing there instead). */
.nav-megamenu__panel {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 90;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-5);
width: min(920px, calc(100vw - var(--space-5) * 2));
padding: var(--space-5);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card-hover);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
}
/* .is-open is JS-driven (assets/js/main.js), not :hover — the panel is
centered on the full header width (see the comment above), not on the
trigger's own small box, so there's a real physical gap between the
trigger and the panel that a pure :hover chain can't bridge (the mouse
crosses dead space belonging to neither element, which drops :hover
before it ever reaches the panel). JS keeps it open across that gap
with a short close-delay instead. :focus-within is kept as a pure-CSS
fallback for keyboard navigation, which doesn't have this problem —
Tab moves focus directly into the panel's links, no cursor travel. */
.nav-megamenu.is-open .nav-megamenu__panel,
.nav-megamenu:focus-within .nav-megamenu__panel {
opacity: 1;
visibility: visible;
}
.nav-megamenu__col-heading {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 0.9rem;
color: var(--color-text);
padding-bottom: var(--space-2);
margin-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
}
.nav-megamenu__col-heading .icon { width: 18px; height: 18px; color: var(--color-accent-dark); }
.nav-megamenu__col-heading:hover { color: var(--color-accent-dark); }
.nav-megamenu__sub-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.nav-megamenu__sub-links a {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.nav-megamenu__sub-links a:hover { color: var(--color-accent-dark); }
@media (max-width: 1023.98px) {
.nav-megamenu__panel { grid-template-columns: repeat(3, 1fr); }
}
/* Desktop-only — the mobile drill-down (.primary-nav__panel) is the
category browser there instead. This isn't just redundant: the panel
is hidden via opacity/visibility, not display:none, so its full laid-
out box (5 columns of subcategory links, ~900px tall) still counts
toward scrollable content. On desktop that's harmless (.nav-megamenu
isn't inside a scrolling container), but the mobile menu overlay is
`position: fixed` while open, which makes IT the panel's positioned
containing block instead of .site-header further up — dragging that
invisible ~900px into the mobile menu's own scroll area, which is
exactly what made it scroll so much further than its visible content
ever justified. Removing the panel from layout entirely on mobile is
what actually fixes that, not just hiding it. */
@media (max-width: 767.98px) {
.nav-megamenu { display: none; }
}
.site-header__logo {
position: relative;
z-index: 101;
display: inline-flex;
align-items: center;
}
.brand-logo {
display: block;
height: 36px;
width: auto;
}
/* The wordmark's artwork is black-on-transparent — this flips it to white
so it still reads on the dark footer, without needing a second asset. */
.brand-logo--on-dark {
filter: brightness(0) invert(1);
}
/* The header logo sits above the mobile nav overlay (higher z-index) so
it stays in its normal spot while the menu is open — but that overlay
is dark (.primary-nav's background, see the mobile block below), so
the logo needs the same on-dark flip while it's open, same as the
always-dark footer above. */
@media (max-width: 767.98px) {
body.nav-open .site-header__logo .brand-logo {
filter: brightness(0) invert(1);
}
}
.primary-nav {
display: none;
align-items: center;
gap: var(--space-5);
}
.primary-nav__desktop-link { display: none; }
.nav-toggle {
position: relative;
z-index: 101;
background: none;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
padding: 0;
flex-shrink: 0;
border-radius: var(--radius-full);
}
.nav-toggle__bar {
width: 20px;
height: 2px;
margin-inline: auto;
background: var(--color-text);
border-radius: var(--radius-full);
transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Mobile drill-down category browser: one "main" panel listing every
category as its own row, plus one panel per category holding its
subcategories — only ever one visible at a time (assets/js/main.js
toggles the `hidden` attribute and a one-way slide-in class), so
tapping a category swaps the whole screen instead of expanding inline
and pushing the rest of the list down. Desktop never sees any of this
(.primary-nav__desktop-link takes over instead, see the min-width
block below) — it already has the always-visible category-strip and
the shop pages themselves for browsing categories. */
.primary-nav__panel {
display: flex;
flex-direction: column;
width: 100%;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.primary-nav__panel[hidden] { display: none; }
.primary-nav__panel.is-entering-forward { opacity: 0; transform: translateX(20px); }
.primary-nav__panel.is-entering-back { opacity: 0; transform: translateX(-20px); }
.primary-nav__cat {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-3) var(--space-2);
background: none;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font: inherit;
font-size: 1.2rem;
font-weight: 700;
color: var(--color-white);
text-align: left;
}
.primary-nav__cat .icon:first-child { width: 22px; height: 22px; color: var(--color-accent); flex-shrink: 0; }
.primary-nav__cat .icon:last-child { width: 16px; height: 16px; margin-left: auto; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.primary-nav__cat:hover, .primary-nav__cat:active { color: var(--color-accent); }
/* No border-top of its own — the last .primary-nav__cat button right
above already has a border-bottom, and a second rule directly under it
just reads as a doubled-up line rather than two distinct sections. */
.primary-nav__secondary {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-2);
}
.primary-nav__secondary a {
font-size: 1.05rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
}
.primary-nav__secondary a:hover { color: var(--color-white); }
.primary-nav__back {
display: flex;
align-items: center;
gap: var(--space-2);
align-self: flex-start;
margin-bottom: var(--space-4);
padding: 0;
background: none;
border: none;
font: inherit;
font-size: 0.9rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
}
.primary-nav__back .icon { width: 16px; height: 16px; transform: rotate(180deg); }
.primary-nav__back:hover { color: var(--color-white); }
.primary-nav__sub-heading {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-3);
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-white);
}
.primary-nav__sub-heading .icon { width: 22px; height: 22px; color: var(--color-accent); }
.primary-nav__sub-links {
display: flex;
flex-direction: column;
gap: 2px;
}
.primary-nav__sub-links a {
padding: 10px var(--space-2);
border-radius: var(--radius-sm);
font-size: 1.05rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
}
.primary-nav__sub-links a:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.06); }
.primary-nav__sub-links a.primary-nav__sub-all {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 0;
color: var(--color-accent);
font-weight: 700;
}
@media (min-width: 768px) {
.nav-toggle { display: none; }
.primary-nav {
display: flex;
position: static;
background: none;
padding: 0;
flex-direction: row;
}
.primary-nav__desktop-link {
display: inline-flex;
font-weight: 600;
font-size: 0.95rem;
color: var(--color-text);
}
.primary-nav__desktop-link:hover { color: var(--color-primary); }
.primary-nav__panel { display: none; }
}
@media (max-width: 767.98px) {
.primary-nav {
display: flex;
position: fixed;
inset: 0;
z-index: 100;
background: var(--color-primary);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: calc(var(--space-6) * 2) var(--space-5) var(--space-6);
opacity: 0;
visibility: hidden;
transform: translateY(-16px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
overflow-y: auto;
overflow-x: hidden;
}
.primary-nav.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
body.nav-open { overflow: hidden; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle.is-open .nav-toggle__bar { background: var(--color-white); }
.nav-toggle.is-open { background: rgba(255, 255, 255, 0.08); }
}
/* =============================================================
5. Hero
============================================================= */
.hero { background: var(--color-bg); }
.hero__frame {
position: relative;
overflow: hidden;
width: 100%;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-white);
/* First layer paints on top in CSS — the photo has to come first, or
the fallback gradient (behind it, shown only if the photo fails to
load) would hide it completely. */
background: url("/assets/images/hero-bg.jpg") center / cover no-repeat,
linear-gradient(160deg, #3D2530 0%, var(--color-primary) 100%) center / cover no-repeat;
}
/* A dark scrim (keeps the white headline readable) plus two soft
brand-color glows — blush and champagne, echoing --gradient-brand. */
.hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(43, 27, 31, 0.4) 0%, rgba(43, 27, 31, 0.75) 100%),
radial-gradient(560px circle at 12% 15%, rgba(231, 180, 194, 0.3), transparent 60%),
radial-gradient(520px circle at 88% 85%, rgba(228, 185, 140, 0.25), transparent 60%);
pointer-events: none;
}
@media (max-width: 640px) {
.hero__frame { min-height: 420px; }
}
.hero__content {
position: relative;
z-index: 1;
padding: var(--space-6) var(--space-4);
max-width: 720px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.hero__icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: var(--space-4);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
}
.hero__icon .icon { width: 32px; height: 32px; }
.hero__title {
font-family: var(--font-display);
color: var(--color-white);
margin-bottom: var(--space-3);
font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
}
.hero__subtitle {
font-weight: 500;
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.82);
max-width: 56ch;
margin-inline: auto;
}
.hero__cta { margin-top: var(--space-5); }
.hero__cta .icon { width: 18px; height: 18px; }
/* Compact light header for every page except the homepage — see
components/page-header.php. Deliberately plain (page background, no
full-bleed color) and short, so it reads as a page title, not a second
hero. */
.page-header {
padding-block: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.page-header__row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
}
.page-header__icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: var(--radius-md);
background: var(--gradient-brand);
color: var(--color-primary);
}
.page-header__icon .icon { width: 24px; height: 24px; }
.page-header__text { flex: 1; min-width: 240px; }
.page-header__title {
margin: 0 0 4px;
font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
text-transform: none;
letter-spacing: -0.01em;
}
.page-header__subtitle {
margin: 0;
max-width: 62ch;
color: var(--color-text-muted);
}
.page-header__cta { flex-shrink: 0; }
/* =============================================================
6. Buttons / CTA
============================================================= */
.cta-block {
background: var(--color-primary);
color: var(--color-white);
padding-block: var(--space-7);
margin-top: var(--space-6);
}
.cta-block__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
}
.cta-block__text h2 { color: var(--color-white); }
.cta-block__text p { color: rgba(255, 255, 255, 0.8); margin: 0; }
@media (min-width: 700px) {
.cta-block__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.cta-block__button { flex-shrink: 0; }
}
/* =============================================================
6b. Stat row
============================================================= */
.stat-row-section {
position: relative;
z-index: 2;
margin-top: calc(-1 * var(--space-2));
margin-bottom: var(--space-6);
}
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
background: var(--color-border);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.stat-row__item {
background: var(--color-white);
padding: var(--space-5) var(--space-3);
text-align: center;
}
.stat-row__value {
display: block;
font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
font-weight: 900;
color: var(--color-primary);
letter-spacing: -0.02em;
}
.stat-row__label {
display: block;
margin-top: 4px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
/* =============================================================
6c. SEO text (quiet, text-only closing block — see components/seo-text.php)
============================================================= */
.seo-text {
padding-block: var(--space-6);
border-top: 1px solid var(--color-border);
}
.seo-text__inner { max-width: 68ch; }
.seo-text h2 {
font-size: 1.375rem;
margin-bottom: var(--space-3);
}
.seo-text p {
color: var(--color-text-muted);
font-size: 0.95rem;
}
.seo-text p:last-child { margin-bottom: 0; }
/* =============================================================
8. Trade grid / cards
============================================================= */
.trade-grid-section, .tasks-section, .price-note, .process, .related-trades {
padding-block: var(--space-6);
}
.trade-grid-section--hub { padding-block: var(--space-4); }
/* Homepage only — the Shop section sits between two visually similar
sections (Fagområder above, Guides below) using the same card-grid
pattern, so without this it reads as one continuous list rather than a
distinct part of the site. */
.trade-grid-section--divider {
background: var(--color-surface);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.section-eyebrow {
margin: 0 0 var(--space-1);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent-dark);
}
.trade-grid-section__more { text-align: center; margin-top: var(--space-5); }
.trade-grid-section__heading {
text-align: left;
margin-bottom: var(--space-4);
}
/* =============================================================
8b. Shop (Wattoo categories)
============================================================= */
.shop-category-section {
padding-block: var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.shop-category-section:last-of-type { border-bottom: none; }
.shop-category-heading {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.shop-category-heading h2 {
margin: 0;
flex: 1;
letter-spacing: -0.01em;
font-size: 1.375rem;
transition: color 0.2s ease;
}
.shop-category-heading:hover h2 { color: var(--color-accent-dark); }
.shop-category-heading__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid var(--color-border);
color: var(--color-text-muted);
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.shop-category-heading:hover .shop-category-heading__arrow {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-primary);
}
.shop-category-heading__arrow .icon { width: 16px; height: 16px; }
.shop-chip-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
/* On mobile, a wrapped grid of subcategory pills can run to several rows
and push products far down the page — same horizontal-slider treatment
as .category-strip instead, one row, swipe to see the rest. */
@media (max-width: 640px) {
.shop-chip-grid {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
margin-inline: calc(var(--space-4) * -1);
padding-inline: var(--space-4);
padding-bottom: 2px;
}
.shop-chip-grid::-webkit-scrollbar { display: none; }
.shop-chip { flex-shrink: 0; }
}
.shop-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px var(--space-3);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-bounce);
}
.shop-chip .icon { width: 13px; height: 13px; color: var(--color-text-muted); transition: color 0.2s ease; }
.shop-chip__count { color: var(--color-text-muted); font-weight: 400; }
.shop-chip:hover .shop-chip__count { color: inherit; }
.shop-chip:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-primary);
transform: translateY(-2px);
}
.shop-chip:hover .icon { color: var(--color-primary); }
.hub-no-results {
text-align: center;
color: var(--color-text-muted);
padding-block: var(--space-6);
}
/* Fixed column counts (not auto-fill) so a count that's a multiple of the
column count always fills the last row instead of leaving 1-2 orphans. */
/* Deliberately skips a 3-column tier: every curated trade count on the site
(12 popular, 8 related) divides evenly by 2 and 4 but not 3, so a 3-column
step would reintroduce the short-last-row problem this is fixing. */
.trade-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
@media (min-width: 560px) {
.trade-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.trade-grid { grid-template-columns: repeat(4, 1fr); }
}
/* The homepage shop teaser is a fixed, complete set of all 10 categories
(not a curated/truncated count like the popular-trades grid used to be),
so it gets column tiers that divide evenly into 10 rather than the
standard 4-column grid, which would orphan a lone card in the last row. */
@media (min-width: 560px) {
.trade-grid--shop { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.trade-grid--shop { grid-template-columns: repeat(5, 1fr); }
}
.trade-card {
display: flex;
align-items: center;
gap: var(--space-3);
/* Grid/flex items default to min-width: auto, which refuses to shrink
below the content's intrinsic width — with a long, unbroken uppercase
name (e.g. "VARMEPUMPE (LUFT-TIL-VAND)") that pushed the card past its
column instead of wrapping. min-width: 0 lets it shrink and wrap. */
min-width: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--shadow-card);
transition: box-shadow 0.3s ease, transform 0.3s var(--ease-bounce), border-color 0.3s ease;
}
/* Same reasoning as .shop-chip[hidden] above — the explicit `display: flex`
would otherwise beat hub-search.js setting a filtered-out card's hidden
property. */
.trade-card[hidden] { display: none; }
.trade-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
border-color: var(--color-accent);
}
.trade-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-primary);
transition: background 0.25s ease, color 0.25s ease;
}
.trade-card:hover .trade-card__icon {
background: var(--color-accent-soft);
color: var(--color-accent-dark);
}
.trade-card__name {
font-weight: 700;
flex: 1;
min-width: 0;
letter-spacing: 0.01em;
font-size: 0.95rem;
/* Danish compound words (badeværelsesrenovering, kloakrenovering) are a
single unbroken word with no space to wrap at — without this, a word
longer than the available width overflows into the arrow badge next
to it instead of breaking. hyphens:auto (the page is lang="da") picks
proper syllable break points; overflow-wrap is the fallback for
browsers that ignore hyphens. */
overflow-wrap: break-word;
hyphens: auto;
}
.trade-card__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid var(--color-border);
color: var(--color-text-muted);
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.trade-card__arrow .icon { width: 16px; height: 16px; }
.trade-card:hover .trade-card__arrow {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-primary);
}
/* =============================================================
9. Process steps
============================================================= */
.process__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-4);
}
.process__item {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-4);
}
.process__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-bottom: var(--space-3);
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
font-weight: 800;
}
.process__cta { text-align: center; margin-top: var(--space-6); }
.process__item h3 { margin-bottom: var(--space-1); font-size: 1.05rem; letter-spacing: -0.005em; }
.process__item p { margin: 0; color: var(--color-text-muted); }
/* =============================================================
10. Tasks list + price note (trade landing pages)
============================================================= */
.tasks-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-2) var(--space-4);
}
.tasks-list__item {
display: flex;
align-items: flex-start;
gap: var(--space-2);
color: var(--color-text);
}
.tasks-list__item .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--color-accent-dark); }
.price-note__box {
max-width: 760px;
margin-inline: auto;
background: var(--color-surface);
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.price-note__box h2 { margin-bottom: var(--space-2); }
.price-note__box p { margin: 0; color: var(--color-text-muted); }
.trade-article { margin-bottom: var(--space-2); }
/* =============================================================
10b. Guides
============================================================= */
.guide-article { max-width: 720px; margin-inline: auto; }
.guide-article h2 { margin-top: var(--space-6); }
.guide-meta {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.guide-cta-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin: var(--space-6) 0;
padding: var(--space-4);
background: var(--color-surface);
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-md);
}
.guide-cta-inline p { margin: 0; font-weight: 700; }
.guide-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
@media (min-width: 560px) {
.guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.guide-grid { grid-template-columns: repeat(4, 1fr); }
}
.guide-card {
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-width: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--shadow-card);
transition: box-shadow 0.3s ease, transform 0.3s var(--ease-bounce), border-color 0.3s ease;
}
.guide-card[hidden] { display: none; }
.guide-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
border-color: var(--color-accent);
}
.guide-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.guide-card__title {
font-weight: 700;
overflow-wrap: break-word;
hyphens: auto;
}
.guide-card__excerpt {
font-size: 0.85rem;
color: var(--color-text-muted);
}
/* =============================================================
11. Breadcrumb
============================================================= */
.breadcrumb {
margin-bottom: var(--space-4);
font-size: 0.875rem;
color: var(--color-text-muted);
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.breadcrumb li:not(:last-child)::after {
content: "/";
margin-left: var(--space-1);
color: var(--color-border);
}
.breadcrumb a:hover { color: var(--color-primary); }
/* =============================================================
12. FAQ
============================================================= */
.faq {
margin-top: var(--space-6);
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-4);
}
.faq__heading { margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.faq__list { max-width: 760px; margin-inline: auto; }
.faq__item {
background: var(--color-white);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-2);
transition: background 0.2s ease, color 0.2s ease;
}
.faq__question {
cursor: pointer;
font-weight: 700;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid var(--color-border);
color: var(--color-text-muted);
transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.faq__toggle .icon { width: 13px; height: 13px; }
.faq__item[open] .faq__toggle {
transform: rotate(45deg);
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-primary);
}
.faq__answer { margin: var(--space-2) 0 0; color: var(--color-text-muted); }
.faq__item[open] { background: var(--color-primary); color: var(--color-white); }
.faq__item[open] .faq__answer { color: rgba(255, 255, 255, 0.8); }
.faq__item[open] .faq__toggle { border-color: var(--color-accent); }
/* =============================================================
13. Footer
============================================================= */
.site-footer {
position: relative;
z-index: 0;
overflow: hidden;
background: var(--color-primary);
color: rgba(255, 255, 255, 0.85);
padding-top: var(--space-6);
border-top: 4px solid transparent;
border-image: var(--gradient-brand) 1;
}
/* A soft blush glow in the corner — real color presence instead of a
flat black slab, without touching text contrast (still white-on-dark). */
.site-footer::before {
content: "";
position: absolute;
top: -140px;
right: -100px;
width: 460px;
height: 460px;
z-index: -1;
background: radial-gradient(circle, rgba(240, 201, 206, 0.35) 0%, rgba(240, 201, 206, 0) 70%);
pointer-events: none;
}
.site-footer__inner {
display: grid;
gap: var(--space-6) var(--space-5);
padding-bottom: var(--space-6);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__logo {
display: inline-flex;
margin: 0 0 var(--space-3);
}
.site-footer__logo .brand-logo { height: 24px; }
.site-footer__tagline { max-width: 48ch; color: rgba(255, 255, 255, 0.7); }
.site-footer__disclosure {
max-width: 44ch;
margin-top: var(--space-3);
font-size: 0.8rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.5);
}
.site-footer__heading {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.5);
margin-bottom: var(--space-3);
}
.site-footer__nav {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: var(--space-2);
}
.site-footer__nav a:hover { color: var(--color-accent); }
.site-footer__giant {
position: relative;
padding-block: var(--space-5);
}
.site-footer__totop {
position: absolute;
top: var(--space-4);
right: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--color-white);
transition: background 0.2s ease;
}
.site-footer__totop:hover { background: rgba(255, 255, 255, 0.16); }
.site-footer__totop .icon { width: 18px; height: 18px; transform: rotate(-90deg); }
.site-footer__bottom {
padding-block: var(--space-4);
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.55);
}
.site-footer__bottom p { margin: 0 0 var(--space-2); }
@media (min-width: 640px) {
.site-footer__inner { grid-template-columns: repeat(2, 1fr); }
.site-footer__brand { grid-column: 1 / -1; }
}
/* 4 real columns (brand + 3 nav columns) at 40/20/20/20 — expressed as
fr units so the ratio holds regardless of the gap between them. */
@media (min-width: 1100px) {
.site-footer__inner {
grid-template-columns: 2fr 1fr 1fr 1fr;
align-items: start;
}
.site-footer__brand { grid-column: auto; }
}
.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-2);
font-size: 0.85rem;
}
.site-footer__legal a, .site-footer__legal-btn { color: var(--color-text-muted); }
.site-footer__legal a:hover, .site-footer__legal-btn:hover { color: var(--color-white); }
.site-footer__legal-btn {
background: none;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
/* =============================================================
15. Cookie consent banner
============================================================= */
.cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 70;
background: var(--color-white);
border-top: 1px solid var(--color-border);
box-shadow: 0 -4px 16px rgba(20, 24, 31, 0.1);
padding: var(--space-4);
padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
.cookie-banner__inner {
max-width: 960px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.cookie-banner__text {
margin: 0;
font-size: 0.9rem;
color: var(--color-text-muted);
flex: 1 1 320px;
}
.cookie-banner__text a { color: var(--color-primary); font-weight: 600; }
.cookie-banner__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
/* =============================================================
16. Legal pages (about / privacy / cookies / 404)
============================================================= */
.legal-article { max-width: 720px; margin: 0 auto var(--space-7); }
.legal-article section { margin-bottom: var(--space-5); }
.legal-article h2 { margin-bottom: var(--space-2); }
.legal-article ul { margin: 0 0 var(--space-3); padding-left: var(--space-4); color: var(--color-text-muted); }
.legal-article li { margin-bottom: var(--space-1); }
.cookie-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-3) 0 var(--space-5);
font-size: 0.9rem;
}
.cookie-table th, .cookie-table td {
text-align: left;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
.cookie-table th { color: var(--color-text-muted); font-weight: 600; }
.section-hub h1 { margin-top: var(--space-3); }
/* =============================================================
17. Goal cards (homepage "shop by goal")
============================================================= */
.goal-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
@media (min-width: 560px) {
.goal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.goal-grid { grid-template-columns: repeat(4, 1fr); }
}
.goal-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition: box-shadow 0.3s ease, transform 0.3s var(--ease-bounce), border-color 0.3s ease;
}
.goal-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
border-color: var(--color-accent);
}
.goal-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: var(--gradient-brand);
color: var(--color-primary);
}
.goal-card__icon .icon { width: 26px; height: 26px; }
.goal-card__title {
margin: 0;
font-size: 1.1rem;
text-transform: none;
}
.goal-card__text {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9rem;
flex: 1;
}
.goal-card__link {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 700;
font-size: 0.9rem;
color: var(--color-accent-dark);
}
.goal-card__link .icon { width: 15px; height: 15px; }
/* =============================================================
18. Shop sidebar navigation
============================================================= */
/* Single column (sidebar stacked above content) until there's room for a
real two-column shop layout — this is what stops every category/
subcategory page from being a dead end you can only leave via the
breadcrumb or scrolling to the bottom "related" grid. */
.shop-layout {
display: block;
padding-top: var(--space-5);
margin-bottom: var(--space-6);
}
@media (min-width: 900px) {
.shop-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: var(--space-6);
align-items: start;
}
}
.shop-sidebar {
margin-bottom: var(--space-5);
padding: var(--space-3);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
@media (min-width: 900px) {
.shop-sidebar { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
}
/* Below 900px the sidebar becomes an off-canvas drawer instead of a stack
of categories pushed above the products — .shop-sidebar-toggle opens
it, the backdrop or an Escape/close-button click closes it (see
assets/js/shop-drawer.js). */
@media (max-width: 899.98px) {
.shop-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 95;
width: min(320px, 85vw);
max-height: none;
margin-bottom: 0;
border-radius: 0;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.shop-sidebar.is-open { transform: translateX(0); }
}
.shop-sidebar-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 10px var(--space-4);
margin-bottom: var(--space-4);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-weight: 700;
font-size: 0.9rem;
color: var(--color-text);
}
.shop-sidebar-toggle .icon { width: 18px; height: 18px; color: var(--color-accent-dark); }
@media (min-width: 900px) {
.shop-sidebar-toggle { display: none; }
}
.shop-drawer-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 94;
background: rgba(43, 27, 31, 0.5);
}
.shop-drawer-backdrop.is-open { display: block; }
body.drawer-open { overflow: hidden; }
@media (min-width: 900px) {
.shop-drawer-backdrop { display: none !important; }
}
.shop-sidebar__drawer-header {
display: none;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-3);
}
@media (max-width: 899.98px) {
.shop-sidebar__drawer-header { display: flex; }
.shop-sidebar__drawer-header .shop-sidebar__heading { margin: 0; padding: 0; }
/* The standalone heading (desktop) would otherwise duplicate the one
already shown inside .shop-sidebar__drawer-header on mobile. */
.shop-sidebar > .shop-sidebar__heading { display: none; }
}
.shop-sidebar__close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
background: var(--color-surface);
border: none;
border-radius: 50%;
color: var(--color-text);
}
.shop-sidebar__close .icon { width: 16px; height: 16px; transform: rotate(45deg); }
.shop-sidebar__heading {
margin: 0 0 var(--space-2);
padding: 0 var(--space-2);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.shop-sidebar__list { display: flex; flex-direction: column; gap: 1px; }
.shop-sidebar__category-link {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 9px var(--space-2);
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.9rem;
color: var(--color-text);
transition: background 0.2s ease, color 0.2s ease;
}
.shop-sidebar__category-link .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); }
.shop-sidebar__category-link:hover { background: var(--color-surface); }
.shop-sidebar__item.is-active > .shop-sidebar__category-link {
background: var(--color-accent-soft);
color: var(--color-accent-dark);
}
.shop-sidebar__item.is-active > .shop-sidebar__category-link .icon { color: var(--color-accent-dark); }
.shop-sidebar__sublist {
display: flex;
flex-direction: column;
gap: 1px;
margin: 2px 0 var(--space-2) 30px;
padding-left: var(--space-2);
border-left: 2px solid var(--color-border);
}
.shop-sidebar__sublist a {
padding: 6px var(--space-2);
border-radius: var(--radius-sm);
font-size: 0.83rem;
color: var(--color-text-muted);
transition: background 0.2s ease, color 0.2s ease;
}
.shop-sidebar__sublist a:hover { background: var(--color-surface); color: var(--color-text); }
/* Subcategories get a lighter touch than the main-category active state
(background fill) below — bold + brand color on the text is enough at
this level, a filled pill for every item here read as too heavy. */
.shop-sidebar__sublist a.is-active {
color: var(--color-accent-dark);
font-weight: 700;
}
.shop-sidebar__count { color: var(--color-text-muted); font-weight: 400; }
.shop-sidebar__sublist a.is-active .shop-sidebar__count { color: inherit; opacity: 0.7; }
.shop-content { min-width: 0; }
/* =============================================================
19. Shop category tiles
============================================================= */
/* Richer visual tile for a shop category (icon badge in the brand
gradient, subcategory count, corner arrow) — used on the homepage
teaser, the 404 fallback, and a category page's "other categories"
grid. auto-fill means the same markup looks right whether the grid
holds 8, 9, or 10 cards, no per-page column math needed. */
.shop-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-3);
}
.shop-cat-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: var(--space-4);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition: box-shadow 0.3s ease, transform 0.3s var(--ease-bounce), border-color 0.3s ease;
}
.shop-cat-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
border-color: var(--color-accent);
}
.shop-cat-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: var(--space-1);
border-radius: var(--radius-md);
background: var(--gradient-brand);
color: var(--color-primary);
}
.shop-cat-card__icon .icon { width: 24px; height: 24px; }
.shop-cat-card__name {
font-weight: 800;
font-size: 1rem;
text-transform: none;
letter-spacing: -0.01em;
color: var(--color-text);
padding-right: var(--space-6);
overflow-wrap: break-word;
hyphens: auto;
}
.shop-cat-card__count {
font-size: 0.8rem;
font-weight: 700;
color: var(--color-accent-dark);
}
.shop-cat-card__arrow {
position: absolute;
top: var(--space-4);
right: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid var(--color-border);
color: var(--color-text-muted);
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.shop-cat-card__arrow .icon { width: 15px; height: 15px; }
.shop-cat-card:hover .shop-cat-card__arrow {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-primary);
}
/* =============================================================
20. Product cards (live feed data)
============================================================= */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
/* auto-fill/minmax(180px) alone often lands on a single column on a phone
(2×180px+gap doesn't fit) — force exactly 2 so products always sit
side by side instead of stacking into one tall column. */
@media (max-width: 640px) {
.product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
}
/* A short, fixed-count teaser row (e.g. 4 products under a shop-hub category
heading) rather than a full listing — capped at 4 columns so it reads as
one tidy row instead of stretching wide and thin on large screens. */
.product-grid--preview {
grid-template-columns: repeat(4, 1fr);
margin-bottom: var(--space-4);
}
@media (max-width: 560px) {
.product-grid--preview { grid-template-columns: repeat(2, 1fr); }
}
.product-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: box-shadow 0.3s ease, transform 0.3s var(--ease-bounce), border-color 0.3s ease;
}
/* The "stretched link" — covers the whole card so it's fully clickable,
sitting below .product-card__favorite (z-index) so that button stays
independently clickable despite the overlap. No visible content of its
own; :hover below still fires from anywhere in the card regardless,
since :hover applies whenever the pointer is over an element's box,
including through an absolutely-positioned, unstyled child. */
.product-card__link {
position: absolute;
inset: 0;
z-index: 1;
}
.product-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
border-color: var(--color-accent);
}
.product-card__image-wrap {
position: relative;
display: block;
aspect-ratio: 1 / 1;
background: var(--color-white);
overflow: hidden;
}
/* Sits above .product-card__link (z-index) so it stays independently
clickable despite that invisible link covering the whole card. */
.product-card__favorite {
position: absolute;
top: var(--space-2);
right: var(--space-2);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
color: var(--color-text-muted);
box-shadow: var(--shadow-card);
transition: color 0.2s ease;
}
.product-card__favorite .icon { width: 15px; height: 15px; }
.product-card__favorite:hover { color: var(--color-accent-dark); }
.product-card__favorite.is-active { color: var(--color-accent-dark); }
.product-card__favorite.is-active .icon { fill: currentColor; }
/* Absolutely positioned (not just width/height:100%) so the ![]()
's own
tall intrinsic size — most bottles/tubes are taller than they are wide
— never leaks into the flex layout. .product-card is display:flex;
flex-direction:column, and flex items get an automatic min-height
based on their in-flow content's intrinsic size by default; a normal,
in-flow ![]()
would push .product-card__image-wrap taller than its
aspect-ratio: 1/1 to fit the photo, which is exactly why every card
was a different height before this. Taking the image out of flow
entirely removes it from that calculation, so aspect-ratio is the only
thing deciding the wrapper's size.
object-fit: contain (not cover) — the whole product must stay visible,
same as the product detail page; the box being a fixed 1:1 square is
what keeps every card the same height, not cropping the photo. */
.product-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--space-3);
}
.product-card__badge {
position: absolute;
top: var(--space-2);
left: var(--space-2);
padding: 3px 9px;
background: var(--color-accent);
color: var(--color-primary);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
border-radius: var(--radius-full);
}
/* flex: 1 is what actually fixes CTA alignment across a row: .product-grid
is a CSS grid, and a grid's default align-items: stretch already makes
every .product-card in a row match the row's tallest card — but without
flex: 1 here, .product-card__body (also a flex column) just stayed its
own natural content height inside that taller box, leaving the extra
stretched space as blank room *below* the card rather than distributing
it. Combined with .product-card__cta's margin-top: auto below, the CTA
now always sits flush at the bottom of the (stretched) card, regardless
of how much variable content — standout label, variant count, old
price, delivery time — a given card has above it. */
.product-card__body {
display: flex;
flex-direction: column;
flex: 1;
gap: 4px;
padding: var(--space-3);
border-top: 1px solid var(--color-border);
}
.product-card__brand {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
/* Automatically computed (product_standouts(), src/helpers.php) — never
an editorial claim, so it's styled as a quiet fact, not a loud badge. */
.product-card__standout {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 2px;
font-size: 0.7rem;
font-weight: 700;
color: var(--color-accent-dark);
}
.product-card__standout .icon { width: 12px; height: 12px; flex-shrink: 0; }
.product-card__name {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
/* Clamp to 2 lines so cards in the same row stay the same height
regardless of how long a given feed product name is. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 2px;
}
.product-card__variants {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-accent-dark);
}
.product-card__price-row {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 2px;
}
.product-card__price { font-weight: 800; color: var(--color-accent-dark); }
.product-card__old-price {
font-size: 0.8rem;
color: var(--color-text-muted);
text-decoration: line-through;
}
.product-card__partner {
margin-top: 2px;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.product-card__delivery {
display: flex;
align-items: center;
gap: 4px;
margin-top: 4px;
font-size: 0.72rem;
font-weight: 600;
color: var(--color-text-muted);
}
.product-card__delivery .icon { width: 12px; height: 12px; flex-shrink: 0; }
/* An explicit visual CTA on top of the card's own full-card link — not a
second clickable element (that would be invalid nested-interactive HTML
inside the ), just a styled span that makes the existing click target
read as more obviously actionable. "Se tilbud" rather than "Køb her":
the purchase happens on the partner's site, not ours. */
.product-card__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
/* auto, not a fixed length — pins the CTA to the bottom of the
(grid-stretched) card by absorbing whatever's left after the
content above it, which is what keeps it on one line across a row
instead of trailing each card's own content height. See the
.product-card__body comment for the other half of this. */
margin-top: auto;
padding: 8px var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-accent);
color: var(--color-primary);
font-size: 0.8rem;
font-weight: 700;
transition: background 0.2s ease;
}
.product-card__cta .icon { width: 14px; height: 14px; }
.product-card:hover .product-card__cta { background: var(--gradient-brand); }
/* =============================================================
21. Global product search (header)
============================================================= */
/* Lives inline in the header bar now, not a separate full-width strip
below it. Hidden by default on mobile — the magnifier-only
.site-header__search-toggle button reveals it (JS adds .is-open, see
assets/js/product-search.js), dropping it to its own full-width row
below the logo/toggle row via flex-basis, since .site-header__bar wraps.
Always visible and inline between the logo and nav from 768px up. */
.site-search {
position: relative;
display: none;
align-items: center;
gap: var(--space-2);
flex: 1;
min-width: 0;
max-width: 480px;
padding: 10px var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
transition: border-color 0.2s ease;
}
.site-search.is-open {
display: flex;
flex-basis: 100%;
max-width: none;
order: 3;
}
.site-search:focus-within { border-color: var(--color-accent); }
@media (min-width: 768px) {
.site-search { display: flex; }
}
.site-search > .icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-text-muted); }
.site-search__input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: none;
font: inherit;
font-size: 0.9rem;
color: var(--color-text);
}
/* iOS Safari auto-zooms the page when a focused text input renders below
16px — this one sits under that at its normal (desktop-tuned) size, so
force 16px specifically on mobile, where the auto-zoom actually
triggers. Must come after the rule above: same specificity, so source
order decides, and this needs to win. */
@media (max-width: 767.98px) {
.site-search__input { font-size: 16px; }
}
.site-search__input::placeholder { color: var(--color-text-muted); }
.site-search__results {
position: absolute;
top: calc(100% + var(--space-2));
left: 0;
right: 0;
max-height: 70vh;
overflow-y: auto;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card-hover);
z-index: 55;
}
.site-search-result {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
transition: background 0.15s ease;
}
.site-search-result:last-child { border-bottom: none; }
.site-search-result:hover, .site-search-result:focus { background: var(--color-surface); }
.site-search-result--all {
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: var(--color-accent-dark);
}
.site-search-result__image {
width: 44px;
height: 44px;
flex-shrink: 0;
object-fit: contain;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.site-search-result__body { flex: 1; min-width: 0; }
.site-search-result__name {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-search-result__meta {
display: block;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.site-search-result__price {
flex-shrink: 0;
font-weight: 700;
font-size: 0.85rem;
color: var(--color-text);
}
.site-search__empty {
padding: var(--space-4);
text-align: center;
color: var(--color-text-muted);
font-size: 0.85rem;
}
/* =============================================================
22. Category circles + deals grid (homepage)
============================================================= */
.category-circle-row {
padding-block: var(--space-5);
border-bottom: 1px solid var(--color-border);
}
/* Setting overflow-x here makes the UA compute overflow-y as auto too (a
CSS rule, not a bug) — without headroom, that clips the icon's upward
hover lift right at the box's own top edge. The padding-top/negative
margin-top pair below gives the lift room to clear that edge without
shifting the row's outer spacing. */
.category-circle-grid {
display: flex;
gap: var(--space-4);
overflow-x: auto;
scrollbar-width: none;
padding-top: 10px;
margin-top: -10px;
padding-bottom: 2px;
}
/* Centered once there's room for every circle to fit without scrolling
(a handful of categories at 84px each) — below this it stays left-
aligned, the correct starting point for a horizontally-scrolling row
that (on a narrow screen, or once there are more categories) genuinely
overflows; centering an overflowing scroll container makes its start
sit mid-scroll instead of at the first item. */
@media (min-width: 768px) {
.category-circle-grid { justify-content: center; }
}
.category-circle-grid::-webkit-scrollbar { display: none; }
.category-circle {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
width: 84px;
text-align: center;
}
.category-circle__icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-dark);
transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-bounce);
}
.category-circle__icon .icon { width: 26px; height: 26px; }
.category-circle:hover .category-circle__icon {
background: var(--gradient-brand);
color: var(--color-primary);
transform: translateY(-3px);
}
.category-circle__label {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-text);
overflow-wrap: break-word;
hyphens: auto;
}
.deals-section {
background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-bg) 100%);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.deals-heading {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--space-2);
width: fit-content;
margin: 0 auto var(--space-1);
}
/* =============================================================
23. Dedicated search page (/sog/)
============================================================= */
.search-page-form {
display: flex;
align-items: center;
gap: var(--space-2);
max-width: 640px;
margin: 0 auto var(--space-6);
padding: 10px 10px 10px var(--space-4);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
box-shadow: var(--shadow-card);
}
.search-page-form > .icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-text-muted); }
.search-page-form__input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: none;
font: inherit;
font-size: 0.95rem;
color: var(--color-text);
}
@media (max-width: 767.98px) {
.search-page-form__input { font-size: 16px; }
}
.search-page-form__input::placeholder { color: var(--color-text-muted); }
/* =============================================================
24. Collapsible "read more" (category/subcategory body text)
============================================================= */
/* The editorial body text used to sit above the product grid as its own
full paragraph — real product cards are what a visitor came for, so
this keeps the text available (for SEO and the curious) without it
being the first thing in the way of the products. */
.read-more {
margin-bottom: var(--space-4);
}
.read-more summary {
display: inline-flex;
align-items: center;
gap: 4px;
list-style: none;
cursor: pointer;
font-weight: 700;
font-size: 0.9rem;
color: var(--color-accent-dark);
}
.read-more summary::-webkit-details-marker { display: none; }
.read-more summary::after {
content: "";
width: 6px;
height: 6px;
margin-left: 2px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.2s ease;
}
.read-more[open] summary::after { transform: rotate(-135deg) translateY(2px); }
.read-more p {
margin: var(--space-2) 0 0;
color: var(--color-text-muted);
max-width: 68ch;
}
/* =============================================================
25. Product filters / sort (subcategory pages)
============================================================= */
.product-filters {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.product-filters__sort {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-muted);
}
.product-filters__sort select {
padding: 7px 10px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font: inherit;
font-size: 0.85rem;
font-weight: 700;
color: var(--color-text);
}
@media (max-width: 767.98px) {
.product-filters__sort select { font-size: 16px; }
}
.product-filters__dropdown { position: relative; }
.product-filters__dropdown summary {
list-style: none;
cursor: pointer;
padding: 8px 14px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 700;
color: var(--color-text);
}
.product-filters__dropdown summary::-webkit-details-marker { display: none; }
.product-filters__dropdown[open] summary { border-color: var(--color-accent); }
.product-filters__panel {
position: absolute;
top: calc(100% + var(--space-2));
left: 0;
z-index: 20;
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 200px;
max-height: 260px;
overflow-y: auto;
padding: var(--space-3);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card-hover);
}
.product-filters__checkbox {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
}
.product-filters__checkbox input { accent-color: var(--color-accent); width: 16px; height: 16px; flex-shrink: 0; }
.product-filters__checkbox--standalone {
padding: 8px 14px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
}
.product-filters__clear {
font-size: 0.85rem;
font-weight: 700;
color: var(--color-accent-dark);
margin-left: auto;
}
/* =============================================================
26. Pagination
============================================================= */
.pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-3);
margin: var(--space-6) 0;
}
.pagination__link {
padding: 9px var(--space-4);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-weight: 700;
font-size: 0.85rem;
color: var(--color-text);
}
.pagination__link:hover { border-color: var(--color-accent); }
.pagination__link.is-disabled { color: var(--color-text-muted); opacity: 0.5; pointer-events: none; }
.pagination__pages {
display: flex;
align-items: center;
gap: 4px;
}
.pagination__page {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
font-weight: 700;
font-size: 0.85rem;
color: var(--color-text);
}
.pagination__page:hover { background: var(--color-surface); }
.pagination__page.is-current {
background: var(--gradient-brand);
color: var(--color-primary);
}
.pagination__ellipsis {
width: 24px;
text-align: center;
color: var(--color-text-muted);
}
/* =============================================================
27. Brands A-Å (/brands/)
============================================================= */
.brand-jump {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: var(--space-5);
padding: var(--space-2);
background: var(--color-surface);
border-radius: var(--radius-md);
}
.brand-jump a {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 0.8rem;
font-weight: 700;
color: var(--color-text-muted);
}
.brand-jump a:hover { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.brand-group { margin-bottom: var(--space-5); scroll-margin-top: 120px; }
.brand-group__letter {
margin-bottom: var(--space-3);
color: var(--color-accent-dark);
}
.brand-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-2);
}
.brand-chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-weight: 700;
color: var(--color-text);
transition: border-color 0.2s ease, transform 0.2s var(--ease-bounce);
}
.brand-chip:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.brand-chip__count {
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 700;
color: var(--color-text-muted);
}
/* =============================================================
28. Product detail page (/produkt/{slug}/)
============================================================= */
.product-page { padding-block: var(--space-5) var(--space-6); }
.product-page__layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
margin-top: var(--space-4);
}
@media (min-width: 768px) {
.product-page__layout { grid-template-columns: minmax(0, 420px) 1fr; align-items: start; }
}
.product-page__image-wrap {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
padding: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: zoom-in;
}
.product-page__image {
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--space-5);
}
.product-page__badge {
position: absolute;
top: var(--space-3);
left: var(--space-3);
padding: 4px 10px;
background: var(--color-accent);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
color: var(--color-primary);
}
.product-page__zoom-hint {
position: absolute;
bottom: var(--space-3);
right: var(--space-3);
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
color: var(--color-text);
box-shadow: var(--shadow-card);
}
.product-page__zoom-hint .icon { width: 16px; height: 16px; }
.product-page__heading-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.product-page__favorite {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-text-muted);
transition: color 0.2s ease, border-color 0.2s ease;
}
.product-page__favorite .icon { width: 18px; height: 18px; }
.product-page__favorite:hover { color: var(--color-accent-dark); border-color: var(--color-accent); }
.product-page__favorite.is-active {
color: var(--color-accent-dark);
border-color: var(--color-accent);
}
.product-page__favorite.is-active .icon { fill: currentColor; }
.product-page__brand {
display: inline-block;
margin-bottom: var(--space-2);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.product-page__brand:hover { color: var(--color-accent-dark); }
.product-page__name {
margin-bottom: var(--space-3);
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
}
.product-page__price-row {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.product-page__price { font-size: 1.75rem; font-weight: 800; color: var(--color-accent-dark); }
.product-page__old-price {
font-size: 1.1rem;
color: var(--color-text-muted);
text-decoration: line-through;
}
.product-page__savings {
display: inline-block;
margin: 0 0 var(--space-3);
padding: 4px 10px;
background: var(--color-accent-soft);
border-radius: var(--radius-sm);
font-size: 0.85rem;
font-weight: 700;
color: var(--color-accent-dark);
}
.product-page__variants { margin: 0 0 var(--space-4); }
.product-page__variants-label {
margin: 0 0 var(--space-2);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.product-page__variant-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.product-page__variant {
padding: 8px var(--space-3);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
transition: border-color 0.2s ease, background 0.2s ease;
}
.product-page__variant:hover { border-color: var(--color-accent-dark); }
.product-page__variant.is-selected {
background: var(--color-accent-soft);
border-color: var(--color-accent-dark);
color: var(--color-accent-dark);
}
.product-page__delivery {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-4);
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-muted);
}
.product-page__delivery .icon { width: 16px; height: 16px; }
.product-page__price-history {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-3);
font-size: 0.85rem;
color: var(--color-text-muted);
}
.product-page__price-history .icon { width: 15px; height: 15px; flex-shrink: 0; }
.product-page__cta { width: 100%; justify-content: center; }
.product-page__cta-note {
margin: var(--space-2) 0 var(--space-5);
font-size: 0.8rem;
color: var(--color-text-muted);
}
.product-page__description h2 {
font-size: 1.1rem;
margin-bottom: var(--space-2);
}
.product-page__description p { color: var(--color-text); }
.product-page__related { margin-top: var(--space-6); }
/* =============================================================
29. Image zoom dialog (native