/* ============================================================================
Maktune v5 — the redesign system
----------------------------------------------------------------------------
Extends tokens.css rather than replacing it. Every existing --mk-* token
still means what it meant; this file adds the layer the redesign needs and
nothing else, so the commerce pages that have not been reworked yet keep
rendering exactly as they do today.
THE ONE IDEA THIS SYSTEM SERVES
------------------------------
Maktune manufactures chairs and keeps the parts to repair them. So the page
alternates between two registers:
CINEMATIC near-black and graphite. Product theatre. Big imagery, few
words, generous air. This is where the chair is the subject.
COMMERCE warm white and soft grey. Legible, calm, quick to scan. This
is where the customer buys, compares and finds a part.
Alternating them is what stops the site reading as "a dark theme" or as
"another white storefront". Neither register is allowed to run for more than
two consecutive chapters.
ACCENT DISCIPLINE
-----------------
Blue is the brand and the only action colour. Orange appears ONLY on a
genuine, currently-live discount — never as decoration, never as a "new" or
"popular" flag. If you find yourself reaching for orange to add interest,
the layout is the problem.
========================================================================== */
:root {
/* -------------------------------------------------- Cinematic surfaces */
/* Not pure black. #000 against a photograph's own blacks looks like a hole
punched in the page; these carry a trace of the brand navy so product
shots sit in the surface instead of on top of it. */
--v5-black: #0B0C0F; /* deepest chapter ground */
--v5-graphite: #14161B; /* standard dark chapter */
--v5-graphite-2: #1C1F26; /* raised panel on dark */
--v5-graphite-3: #262A33; /* hairline borders on dark */
/* ---------------------------------------------------- Commerce surfaces */
--v5-paper: #FBFAF8; /* warm white — the default page ground */
--v5-paper-2: #F4F2EE; /* quiet alternate band */
--v5-paper-3: #EAE7E1; /* borders and rules on paper */
/* ------------------------------------------------------------- Ink */
--v5-ink: #14171F; /* on paper */
--v5-ink-soft: #5C6474;
--v5-on-dark: #F4F5F7; /* on graphite */
--v5-on-dark-soft: #A2A9B8; /* 5.9:1 on --v5-graphite */
--v5-on-dark-faint: #6E7686; /* decorative only — never body copy */
/* ----------------------------------------------------------- Accent */
--v5-blue: var(--mk-blue); /* actions on paper */
/* #0E2CCB on near-black is 2.4:1 — unreadable. Dark chapters get a lifted
blue that clears 4.5:1 on --v5-graphite while staying the same hue. */
--v5-blue-lift: #5B79FF;
--v5-offer: var(--mk-orange); /* GENUINE live discounts only */
/* ------------------------------------------------------- Typography */
/* One family. Fraunces was retired from the download in v4 and is not
coming back: an engineering-led brand reads as more credible in a precise
grotesque than in a display serif, and it keeps the page to two font
files. Weight and tracking do the work a second family would have. */
--v5-display-tight: -0.035em; /* 40px and up */
--v5-display-snug: -0.022em; /* 24-40px */
--v5-eyebrow-track: 0.09em;
/* ------------------------------------------------------------ Rhythm */
/* A chapter is not a card. These are deliberately large — the brief asks
for generous spacing between sections, and the single fastest way to make
a storefront look templated is to set every gap to 48px. */
--v5-chapter: clamp(72px, 9vw, 136px);
--v5-chapter-tight: clamp(56px, 6vw, 88px);
--v5-stack: clamp(20px, 2.4vw, 32px);
--v5-ease: cubic-bezier(.22, .61, .36, 1);
--v5-ease-out: cubic-bezier(.16, 1, .3, 1);
/* ========================================================================
THE ATMOSPHERE PALETTE
------------------------------------------------------------------------
Declared here rather than in v5-atmosphere.css because that file is gated
to the front page, and the product and shop pages continue the same
colour system. Tokens cost nothing when unused; a missing one silently
drops a chapter back to its unstyled ground.
Drawn from the materials the product is actually made of — mesh, steel,
chrome, foam, packing board — while staying recognisably one palette.
====================================================================== */
/* ------------------------------------------------ Warm light grounds --- */
/* Warm white, never #fff. Pure white against product photography reads as
a hole; these carry a trace of the packing-board warmth. */
--v5-ivory: #F8F5EF; /* the shopping and product-selection ground */
--v5-stone: #F1ECE3; /* its quieter partner */
--v5-mist: #EEF0F2; /* cool technical grey — engineering, specs */
--v5-mist-warm: #F6F5F2;
--v5-natural: #F7F2E9; /* daylight and wood — the workspace gallery */
--v5-industrial: #EDE8DF; /* kraft and unfinished board — the factory */
/* ---------------------------------------------------- Dark materials --- */
--v5-hero-ink: #0D0F13; /* hero ground, a shade warmer than pure ink */
--v5-charcoal: #191C22; /* engineering and maintenance chapters */
--v5-gunmetal: #232831; /* its raised planes */
--v5-steel: #2B313B; /* hairlines on dark */
/* --------------------------------------------------------- Accents ----- */
/* Cobalt is the brand blue pushed toward the light so it survives on
near-black. Used for illumination and outlines, never for body text. */
--v5-cobalt: #4E6BF5;
--v5-cobalt-dim: rgba(78, 107, 245, .28);
--v5-cobalt-glow: rgba(78, 107, 245, .16);
--v5-indigo: #141F5C; /* creator programme ground */
--v5-indigo-2: #0F1642;
--v5-amber: #C97A22; /* factory highlight — warm, not gold */
--v5-amber-soft: rgba(201, 122, 34, .14);
}
/* ============================================================================
Muted text, recalibrated for warm grounds
----------------------------------------------------------------------------
--mk-muted-soft (#6E7684) was chosen as "the lightest grey that still clears
4.5:1 on WHITE" — 4.58, with almost no margin. Every warm ground above is
marginally darker than white, and the margin is gone:
on #F8F5EF ivory 4.21 FAIL
on #F1ECE3 stone 3.89 FAIL
on #EDE8DF industrial 3.75 FAIL
on #FDFCF9 card 4.46 FAIL
axe caught two instances; the arithmetic says the rest were failing quietly.
Contrast is not traded for mood, so the token is re-derived rather than the
atmosphere lightened: #626975 is the lightest grey clearing 4.5:1 on ALL six
grounds, worst case 4.53 on the factory's kraft.
Scoped to v5 surfaces. Pages still on v3 templates keep white grounds, where
the original value holds.
========================================================================== */
.v5, .v5-route { --mk-muted-soft: #626975; }
/* ============================================================================
1. Chapter grounds
========================================================================== */
.v5 { background: var(--v5-paper); color: var(--v5-ink); }
/*
* main.css line 40 sets `body h1, body h2, body h3, body h4 { color: var(--ink) }`.
* That paints the heading DIRECTLY, so it beats any colour the section
* inherits down — every heading on a dark chapter rendered near-black on
* near-black and simply vanished. This is the fourth time this exact trap has
* bitten this codebase; see the v3 notes on `body.home-v3 h1..h4`.
*
* `inherit` at (0,1,1) outranks (0,0,2) and hands the heading back to whatever
* its chapter set, so .v5-dark and .v5 both work without a rule each.
*/
.v5 h1, .v5 h2, .v5 h3, .v5 h4, .v5 h5, .v5 h6 { color: inherit; }
.v5-chapter { padding-block: var(--v5-chapter); position: relative; }
.v5-chapter--tight { padding-block: var(--v5-chapter-tight); }
.v5-chapter--flush { padding-block: 0; }
.v5-dark {
background: var(--v5-graphite);
color: var(--v5-on-dark);
}
.v5-dark--deep { background: var(--v5-black); }
.v5-paper-alt { background: var(--v5-paper-2); }
.v5-wrap {
width: 100%;
max-width: var(--mk-container);
margin-inline: auto;
/* padding-inline, never the `padding` shorthand — a shorthand here wipes
the horizontal gutter and the content goes edge-to-edge on phones while
looking correct on desktop, where the max-width hides it. */
padding-inline: var(--mk-gutter);
}
.v5-wrap--narrow { max-width: 940px; }
/* ============================================================================
2. Type scale
========================================================================== */
.v5-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: var(--v5-eyebrow-track);
text-transform: uppercase;
color: var(--v5-ink-soft);
margin: 0 0 14px;
display: block;
}
.v5-dark .v5-eyebrow { color: var(--v5-on-dark-soft); }
/* Section headings are sentence case on purpose. The old homepage shouted in
uppercase at six different sizes; the brief calls that out, and uppercase at
display sizes also costs legibility for no gain. */
.v5-h1 {
font-size: clamp(38px, 6.2vw, 76px);
line-height: 1.02;
letter-spacing: var(--v5-display-tight);
font-weight: 700;
margin: 0;
text-wrap: balance;
}
.v5-h2 {
font-size: clamp(28px, 3.8vw, 50px);
line-height: 1.08;
letter-spacing: var(--v5-display-tight);
font-weight: 700;
margin: 0;
text-wrap: balance;
}
.v5-h3 {
font-size: clamp(20px, 2.1vw, 27px);
line-height: 1.2;
letter-spacing: var(--v5-display-snug);
font-weight: 650;
margin: 0;
}
.v5-lede {
font-size: clamp(16px, 1.28vw, 19px);
line-height: 1.6;
color: var(--v5-ink-soft);
margin: 18px 0 0;
max-width: 58ch;
}
.v5-dark .v5-lede { color: var(--v5-on-dark-soft); }
.v5-head { margin-bottom: clamp(32px, 4vw, 56px); }
.v5-head--center { text-align: center; }
.v5-head--center .v5-lede { margin-inline: auto; }
/* ============================================================================
3. Actions
========================================================================== */
.v5-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px; /* comfortably tappable, per the brief */
padding: 0 28px;
border-radius: var(--mk-r);
border: 1px solid transparent;
font-size: 15px;
font-weight: 620;
letter-spacing: -0.005em;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background var(--mk-dur) var(--v5-ease),
border-color var(--mk-dur) var(--v5-ease),
color var(--mk-dur) var(--v5-ease),
transform var(--mk-dur) var(--v5-ease);
}
.v5-btn:hover { transform: translateY(-1px); }
.v5-btn:active { transform: translateY(0); }
.v5-btn--primary { background: var(--v5-blue); color: #fff; }
.v5-btn--primary:hover { background: var(--mk-blue-dark); color: #fff; }
.v5-btn--ghost {
background: transparent;
color: var(--v5-ink);
border-color: var(--v5-paper-3);
}
.v5-btn--ghost:hover { border-color: var(--v5-ink); }
/* On a dark chapter the quiet action is a hairline, not a grey fill — a grey
button on graphite reads as disabled. */
.v5-dark .v5-btn--ghost {
color: var(--v5-on-dark);
border-color: rgba(255, 255, 255, .26);
}
.v5-dark .v5-btn--ghost:hover {
border-color: var(--v5-on-dark);
background: rgba(255, 255, 255, .06);
}
.v5-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* A text action that is not a button. Used where the brief asks for a "quiet
secondary action" and a second filled button would compete with the first. */
.v5-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 15px;
color: var(--v5-blue);
text-decoration: none;
}
.v5-dark .v5-link { color: var(--v5-blue-lift); }
.v5-link svg { transition: transform var(--mk-dur) var(--v5-ease); }
.v5-link:hover svg { transform: translateX(3px); }
/* ============================================================================
4. Motion
----------------------------------------------------------------------------
Subtle, and it supports the product rather than announcing itself. One
entrance, one distance, one curve. Gated behind `scripting: enabled` so that
content is never stranded at opacity 0 when JS fails — a trap this codebase
has hit before.
========================================================================== */
@media (scripting: enabled) {
.v5-rise {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s var(--v5-ease-out), transform .7s var(--v5-ease-out);
transition-delay: calc(var(--i, 0) * 70ms);
}
.v5-rise.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.v5-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
.v5-btn:hover { transform: none; }
}
/* ============================================================================
5. Media frames
----------------------------------------------------------------------------
Every slot that will eventually hold Kling/gpt-image video is a
.v5-media with a fixed aspect ratio, so dropping the file in later changes
no layout at all. Until then it holds a still, and `data-v5-video` records
what the finished clip should show — the brief's shot list, kept next to the
slot it belongs to rather than in a document nobody opens.
========================================================================== */
.v5-media {
position: relative;
overflow: hidden;
border-radius: var(--mk-r-lg);
background: var(--v5-graphite-2);
isolation: isolate;
}
/* maktune_picture() emits ![]()
, so a child
combinator on img matches NOTHING — the frames all rendered at the image's
intrinsic size inside a correctly-sized box. Descendant selectors, and the
itself has to be told to fill, since it is an inline box by
default and would collapse the height it is meant to pass through. */
.v5-media picture { display: block; width: 100%; height: 100%; }
.v5-media img,
.v5-media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.v5-media--contain img { object-fit: contain; }
.v5-media--square { aspect-ratio: 1 / 1; }
.v5-media--4x3 { aspect-ratio: 4 / 3; }
.v5-media--3x2 { aspect-ratio: 3 / 2; }
.v5-media--16x9 { aspect-ratio: 16 / 9; }
.v5-media--portrait { aspect-ratio: 4 / 5; }
/* Marks a frame whose final asset is still to be produced. Deliberately quiet:
it should read as "considered and pending", not as a broken image. It is
removed by deleting the class — no layout depends on it. */
.v5-pending::after {
content: attr(data-pending);
position: absolute;
left: 14px;
bottom: 14px;
z-index: 2;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(255, 255, 255, .78);
background: rgba(11, 12, 15, .62);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .14);
padding: 6px 10px;
border-radius: var(--mk-r-pill);
pointer-events: none;
}
body.v5-hide-pending .v5-pending::after { content: none; }
/* ============================================================================
6. Small shared pieces
========================================================================== */
.v5-rule { height: 1px; background: var(--v5-paper-3); border: 0; margin: 0; }
.v5-dark .v5-rule { background: var(--v5-graphite-3); }
.v5-stat-n {
font-size: clamp(30px, 3.4vw, 44px);
font-weight: 700;
letter-spacing: var(--v5-display-tight);
line-height: 1;
}
/* Price. Struck-through original only ever appears beside a real sale price. */
.v5-price { font-weight: 680; font-size: 17px; letter-spacing: -0.01em; }
.v5-price del { color: var(--mk-muted-soft); font-weight: 500; margin-left: 8px; font-size: 14px; }
/* WooCommerce wraps a sale price in , which every browser underlines by
default. On a price that reads as a strikethrough — the exact opposite of
what it means. */
.v5-price ins,
.v5-anatomy-p ins { text-decoration: none; background: none; color: inherit; }
.v5-offer-flag {
display: inline-block;
/* --mk-orange-ink, NOT the brand coral. tokens.css says exactly this: the
coral is 3.25:1 against white and is for decoration — wedges, rules,
large fills — while anything with words ON it uses the darker variant at
4.73:1. This flag is words on coral, and it was using the wrong one. */
background: var(--mk-orange-ink);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
padding: 5px 9px;
border-radius: var(--mk-r-xs);
}
.v5-stock { font-size: 13px; font-weight: 560; color: var(--mk-green); display: inline-flex; align-items: center; gap: 7px; }
.v5-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v5-stock--out { color: var(--mk-muted-soft); }
/* Video fades in over its own poster once it is actually playing, so a slow
connection never shows a black rectangle. */
.v5-media > video { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--v5-ease); }
.v5-media.has-video > video { opacity: 1; }
.v5-media.has-video > picture,
.v5-media.has-video > img { opacity: 0; }
/* "To be confirmed" / "not published yet". Dashed rather than solid, because it
marks an admitted gap and should not look like a badge. */
.v5-tbc-flag {
display: inline-block;
font-size: 11.5px;
font-weight: 650;
letter-spacing: .03em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: var(--mk-r-pill);
border: 1px dashed var(--mk-muted-soft);
color: var(--mk-muted-soft);
}
/* ============================================================================
6b. Breadcrumbs
----------------------------------------------------------------------------
Shared by the shop, the product pages and the purchase journey, so it lives
here rather than in any one of them.
The links are the SAME colour as the separators around them, deliberately.
Left blue, a breadcrumb is a run of links distinguished from its surrounding
text by colour alone, which fails WCAG 1.4.1 — axe flagged exactly that on
cart and checkout, where this rule was not loading and the links fell back to
the default link blue. Colour carries no meaning here; position does.
========================================================================== */
.v5-crumbs {
padding-block: 18px 0;
font-size: 13px;
color: var(--mk-muted-soft);
}
.v5-crumbs .v5-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v5-crumbs--flush { padding: 0 0 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v5-crumbs a { color: inherit; text-decoration: none; }
.v5-crumbs a:hover { color: var(--v5-blue); text-decoration: underline; }
.v5-crumbs [aria-current] { color: var(--v5-ink); font-weight: 560; }
/* ============================================================================
7. Shared components
----------------------------------------------------------------------------
These four — the product card, the component nav, the anatomy grid and the
spec chips — began life in v5-home.css and are now used by the homepage, the
three routed pages AND the product and shop templates.
They live here rather than being duplicated because v5-home.css states the
rule in its own header: a rule useful on a second page belongs in the system.
The alternative was copying 150 lines into v5-shop.css, and two copies of a
component drift the moment anyone edits one.
Nothing here changed on the way across — same declarations, same order, and
v5-system loads before v5-home so the cascade is unchanged. Verified by pixel
diff of the homepage and all three routed pages.
========================================================================== */
/* ------------------------------------------------------- Product cards --- */
.v5-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.v5-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--v5-paper-3);
border-radius: var(--mk-r-lg);
overflow: hidden;
transition: border-color var(--mk-dur) var(--v5-ease), transform var(--mk-dur) var(--v5-ease);
}
.v5-card:hover { border-color: var(--v5-ink); transform: translateY(-2px); }
.v5-card-media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
background: var(--v5-paper);
padding: 8%;
}
.v5-card-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v5-card-media .v5-offer-flag { position: absolute; top: 12px; left: 12px; }
.v5-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v5-card-role {
font-size: 11px;
font-weight: 650;
letter-spacing: var(--v5-eyebrow-track);
text-transform: uppercase;
color: var(--mk-muted-soft);
}
.v5-card-t { font-size: 15.5px; font-weight: 600; letter-spacing: -0.014em; line-height: 1.32; margin: 0; }
.v5-card-t a { color: inherit; text-decoration: none; }
.v5-card-t a:hover { color: var(--v5-blue); }
.v5-card-rating { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--v5-ink-soft); }
.v5-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.v5-card-cta { width: 100%; margin-top: 12px; min-height: 44px; }
/* ------------------------------------------------------- Component nav --- */
.v5-partnav {
list-style: none;
margin: clamp(16px, 2vw, 28px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--v5-paper-3);
border-radius: var(--mk-r-lg);
overflow: hidden;
background: #fff;
}
.v5-partnav li + li { border-left: 1px solid var(--v5-paper-3); }
.v5-partnav a {
display: flex;
flex-direction: column;
gap: 4px;
height: 100%;
padding: 22px 24px;
text-decoration: none;
color: inherit;
transition: background var(--mk-dur) var(--v5-ease);
}
.v5-partnav a:hover { background: var(--v5-paper-2); }
.v5-partnav-name { font-weight: 620; font-size: 15.5px; letter-spacing: -0.012em; }
.v5-partnav-note { font-size: 13.5px; color: var(--v5-ink-soft); }
.v5-partnav svg { margin-top: 10px; color: var(--v5-blue); }
/* ------------------------------------------------------- Anatomy grid ---- */
.v5-anatomy-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: clamp(10px, 1.2vw, 18px);
counter-reset: part;
}
.v5-anatomy-grid a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
height: 100%;
padding: 20px 12px 22px;
border: 1px solid var(--v5-graphite-3);
border-radius: var(--mk-r-lg);
background: var(--v5-graphite);
text-decoration: none;
color: var(--v5-on-dark);
transition: background var(--mk-dur) var(--v5-ease), border-color var(--mk-dur) var(--v5-ease), transform var(--mk-dur) var(--v5-ease);
}
.v5-anatomy-grid a:hover { background: var(--v5-graphite-2); border-color: var(--v5-blue-lift); transform: translateY(-3px); }
/*
* The product photographs are black components on WHITE backgrounds, straight
* from the listings. `mix-blend-mode: screen` was wrong in both directions:
* screen keeps white white and drops black out, which is the opposite of what
* a dark chapter needs, and multiply would have dissolved the products
* themselves — they are nearly the same value as the graphite behind them.
*
* So the tile is deliberately light instead of fighting the source images. A
* dark chapter with bright product plates is a stronger composition than a
* uniformly dark one, and it keeps the photographs recognisably the real
* listing shots rather than re-cut silhouettes.
*/
.v5-anatomy-media {
width: 100%;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
margin-bottom: 4px;
background: var(--v5-paper);
border-radius: var(--mk-r);
padding: 10%;
}
.v5-anatomy-media img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--mk-dur) var(--v5-ease);
}
.v5-anatomy-grid a:hover .v5-anatomy-media img { transform: scale(1.04); }
.v5-anatomy-t { font-size: 14px; font-weight: 620; letter-spacing: -0.012em; margin: 0; }
.v5-anatomy-s { font-size: 12.5px; color: var(--v5-on-dark-faint); }
.v5-anatomy-p { font-size: 13.5px; font-weight: 600; color: var(--v5-on-dark-soft); margin-top: 4px; }
.v5-anatomy-p del { display: none; } /* the grid is a directory, not a sale */
/* ---------------------------------------------- Spec chips and actions --- */
.v5-specs {
list-style: none;
margin: 26px 0 22px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.v5-specs li {
font-family: var(--mk-font-mono);
font-size: 12.5px;
padding: 7px 12px;
border: 1px solid var(--v5-paper-3);
border-radius: var(--mk-r-xs);
color: var(--v5-ink);
}
.v5-dark .v5-specs li { border-color: var(--v5-graphite-3); color: var(--v5-on-dark); }
.v5-more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 52px); }
.v5-head--center + .v5-more,
.v5-anatomy .v5-more { justify-content: center; }
@media (max-width: 1080px) {
.v5-anatomy-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
.v5-partnav { grid-template-columns: 1fr; }
.v5-partnav li + li { border-left: 0; border-top: 1px solid var(--v5-paper-3); }
/* Name and arrow on the first line, note beneath. The note is a full-width
flex item, so without explicit order it pushes the arrow onto a third
line of its own — which reads as a stray glyph rather than an affordance
attached to the row. DOM order stays name → note → arrow for screen
readers. */
.v5-partnav a { flex-direction: row; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.v5-partnav-name { flex: 1; order: 1; }
.v5-partnav svg { order: 2; margin: 0; }
.v5-partnav-note { order: 3; flex-basis: 100%; }
}
@media (max-width: 620px) {
/* One card per row. At two columns the product name wraps to three lines
and the price and stock chip collide — the brief calls this out. */
.v5-grid-4 { grid-template-columns: 1fr; }
.v5-card { flex-direction: row; align-items: stretch; }
.v5-card-media { width: 132px; flex: none; aspect-ratio: auto; padding: 12px; }
.v5-card-body { padding: 16px 16px 16px 4px; }
.v5-card-cta { margin-top: 10px; }
.v5-anatomy-grid { grid-template-columns: repeat(2, 1fr); }
.v5-more .v5-btn { width: 100%; }
}