/* ============================================================================
kd-pn-refurb.css · Peak Network mock — refurbished-mode chrome
----------------------------------------------------------------------------
Lights up whenever [data-pn-condition="refurb"] is on : refurb
hero + bar, per-item leaf marker, green primary-button override, etc.
The dedicated refurbished.html page hardcodes the attr; product.html
sets it from ?condition=refurb. Custom-property scoped (forest green)
and theme-aware via dark/gray overrides below.
============================================================================ */
/* Custom properties scoped to refurb mode. Default to neutral so
pages without the data attr render unchanged. */
[data-pn-condition="refurb"] {
--kd-pn-refurb-fg: #2d6a4f; /* forest green for icons + accents */
--kd-pn-refurb-bg: #ecf4ee; /* very pale green wash */
--kd-pn-refurb-line: #2d6a4f33; /* faint divider for strips */
}
[data-theme="dark"][data-pn-condition="refurb"] {
--kd-pn-refurb-fg: #74c69d;
--kd-pn-refurb-bg: #15291f;
--kd-pn-refurb-line: #74c69d44;
}
[data-theme="gray"][data-pn-condition="refurb"] {
--kd-pn-refurb-fg: #4f8a6c;
--kd-pn-refurb-bg: #1f2a26;
--kd-pn-refurb-line: #4f8a6c44;
}
/* ===== Refurb hero — top of /refurbished.html =========================
Bigger plant icon + sustainability framing. Visually distinct from
the regular shop hero so customers immediately know this is the
sub-section, not the main catalogue. */
.kd-pn-refurb-hero {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 32px;
margin-bottom: 8px;
background: var(--kd-pn-refurb-bg);
border: 1px solid var(--kd-pn-refurb-line);
border-left: 6px solid var(--kd-pn-refurb-fg);
}
.kd-pn-refurb-hero__icon { flex-shrink: 0; color: var(--kd-pn-refurb-fg); }
.kd-pn-refurb-hero__eyebrow {
display: block;
font-family: var(--kd-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--kd-pn-refurb-fg);
margin-bottom: 6px;
}
.kd-pn-refurb-hero__title {
font-family: 'Allerta Stencil', var(--kd-font-mono);
font-size: clamp(22px, 2.4vw, 32px);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--kd-pn-refurb-fg);
margin: 0 0 12px;
}
.kd-pn-refurb-hero__lede {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--kd-fg-soft);
max-width: 70ch;
}
.kd-pn-refurb-hero__lede a { color: var(--kd-pn-refurb-fg); }
@media (max-width: 720px) {
.kd-pn-refurb-hero { flex-direction: column; padding: 20px; }
}
/* ===== Condition selector — reused on shop.html ===== */
/* When refurb is active, recolor the active pill green so the
selection visibly carries the brand mode. */
[data-pn-condition="refurb"] .kd-pn-condition a[data-pn-cond="refurb"] {
background: var(--kd-pn-refurb-fg);
color: var(--kd-bg);
}
/* ===== Product page: hide unavailable conditions =====================
Each product page declares which conditions exist via
data-pn-conditions on the .kd-pn-condition wrapper (e.g.
"new,refurb"). Pills not in that list are hidden. If only one
condition is left, hide the whole nav (no choice = no UI). */
.kd-pn-condition[data-pn-conditions]:not([data-pn-conditions*="new"]) a[data-pn-cond="new"],
.kd-pn-condition[data-pn-conditions]:not([data-pn-conditions*="refurb"]) a[data-pn-cond="refurb"],
.kd-pn-condition[data-pn-conditions]:not([data-pn-conditions*="used"]) a[data-pn-cond="used"] {
display: none;
}
.kd-pn-condition[data-pn-conditions="new"],
.kd-pn-condition[data-pn-conditions="refurb"],
.kd-pn-condition[data-pn-conditions="used"] {
display: none;
}
/* "Also available refurbished" hint shown on a NEW-condition product
page when a refurb variant exists. Tag-able via a new helper class. */
.kd-pn-refurb-hint {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
margin: 8px 0 12px;
background: var(--kd-pn-refurb-bg, transparent);
color: var(--kd-pn-refurb-fg, var(--kd-fg-muted));
border: 1px solid var(--kd-pn-refurb-line, var(--kd-border));
font-family: var(--kd-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
text-decoration: none;
}
.kd-pn-refurb-hint:hover { text-decoration: underline; }
[data-pn-condition="refurb"] .kd-pn-refurb-hint { display: none; }
/* Force the helper to show its accent palette on light theme even
when not in refurb mode (so the hint reads as green on white). */
.kd-pn-refurb-hint,
.kd-pn-refurb-card,
.kd-pn-footer__refurb {
--kd-pn-refurb-fg: #2d6a4f;
--kd-pn-refurb-bg: #ecf4ee;
--kd-pn-refurb-line: #2d6a4f33;
}
/* Primary buttons (Add to cart, etc.) tint green so the buy CTA on a
refurb listing matches the rest of the segment instead of using the
mono accent. background-color (not the shorthand) so the gloss
gradient defined in kd-pn-shop.css still layers on top. */
[data-pn-condition="refurb"] .kd-btn--primary {
background-color: var(--kd-pn-refurb-fg, #2d6a4f);
border-color: var(--kd-pn-refurb-fg, #2d6a4f);
color: #fff;
}
/* ===== Per-item refurb marker =========================================
When the page is in refurb mode (data-pn-condition="refurb" on )
every product card / list row / table row picks up a small green
plant glyph so the segment is unmistakable on each item. The icon
is a CSS background (inline SVG data URI), so no markup change. */
[data-pn-condition="refurb"] .kd-pn-prod,
[data-pn-condition="refurb"] .kd-pn-prod--row { position: relative; }
[data-pn-condition="refurb"] .kd-pn-prod::after,
[data-pn-condition="refurb"] .kd-pn-prod--row::after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #ecf4ee url("data:image/svg+xml;utf8,") center/16px no-repeat;
border: 1px solid #2d6a4f33;
pointer-events: none;
z-index: 1;
}
/* Product-page title: prepend a small leaf so the H1 itself flags
the refurb variant on sight. Uses the same inline-SVG glyph as
the per-item markers, sized to match the heading line-height. */
[data-pn-condition="refurb"] .kd-pn-detail__title::before {
content: '';
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-right: 10px;
vertical-align: -0.05em;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* Table view: tint the thumbnail cell so the row reads as refurb on
sight, even when the cards aren't visible. */
[data-pn-condition="refurb"] .kd-pn-view-table tbody td.kd-pn-table__thumb {
background: #ecf4ee;
color: #2d6a4f;
}
[data-pn-condition="refurb"] .kd-pn-view-table tbody td.kd-pn-table__thumb::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-right: 4px;
vertical-align: -2px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* Discreet green tint on the footer "Certified refurbished →" link
so it reads as a distinct sub-section from the main Shop column. */
.kd-pn-footer__refurb { color: var(--kd-pn-refurb-fg) !important; }
/* ===== Refurb bar — top of product.html when ?condition=refurb =======
Thin green strip that appears on the product page only when the
user has explicitly chosen the refurbished variant. Removes any
ambiguity that they're looking at a refurb listing — same plant
icon, same green palette as the rest of the segment. */
.kd-pn-refurb-bar { display: none; }
[data-pn-condition="refurb"] .kd-pn-refurb-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin-bottom: 16px;
background: var(--kd-pn-refurb-bg, #ecf4ee);
border: 1px solid var(--kd-pn-refurb-line, #2d6a4f33);
border-left: 4px solid var(--kd-pn-refurb-fg, #2d6a4f);
color: var(--kd-pn-refurb-fg, #2d6a4f);
font-family: var(--kd-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
}
.kd-pn-refurb-bar svg { flex-shrink: 0; color: var(--kd-pn-refurb-fg, #2d6a4f); }
.kd-pn-refurb-bar__copy { flex: 1; color: var(--kd-fg-soft); }
.kd-pn-refurb-bar__copy strong { color: var(--kd-pn-refurb-fg, #2d6a4f); font-weight: var(--kd-w-semibold); }
.kd-pn-refurb-bar a {
flex-shrink: 0;
color: var(--kd-pn-refurb-fg, #2d6a4f);
text-decoration: none;
text-transform: uppercase;
}
.kd-pn-refurb-bar a:hover { text-decoration: underline; }
/* ===== Refurb-strip on the storefront =================================
Green-washed band placed between "New arrivals" and the news row
on index.html. The strip is visually self-contained (border-left
accent + soft bg) so the 3 product cards inside are unmistakably
in the refurb segment — they cannot be confused with new equipment
on the rest of the page. The card-style head explains the
programme and links to the dedicated /refurbished.html page. */
.kd-pn-refurb-card {
display: flex;
flex-direction: column;
padding: 24px 28px;
background: var(--kd-pn-refurb-bg);
border: 1px solid var(--kd-pn-refurb-line);
border-left: 4px solid var(--kd-pn-refurb-fg);
}
.kd-pn-refurb-card__head {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--kd-pn-refurb-line);
text-decoration: none;
color: inherit;
}
.kd-pn-refurb-card__head:hover .kd-pn-refurb-card__cta { text-decoration: underline; }
.kd-pn-refurb-card__icon { flex-shrink: 0; color: var(--kd-pn-refurb-fg); }
.kd-pn-refurb-card__copy { flex: 1; }
.kd-pn-refurb-card__eyebrow {
display: block;
font-family: var(--kd-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--kd-pn-refurb-fg);
margin-bottom: 4px;
}
.kd-pn-refurb-card__title {
font-family: 'Allerta Stencil', var(--kd-font-mono);
font-size: 18px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--kd-pn-refurb-fg);
margin: 0 0 4px;
}
.kd-pn-refurb-card__lede { margin: 0; font-size: 13px; color: var(--kd-fg-soft); line-height: 1.5; }
.kd-pn-refurb-card__cta {
flex-shrink: 0;
font-family: var(--kd-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--kd-pn-refurb-fg);
}
/* Product grid inside the strip. The cards keep their default chrome
so they read as normal kd-pn-prod cards — just unambiguously inside
the green region. */
.kd-pn-refurb-card__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 900px) {
.kd-pn-refurb-card__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.kd-pn-refurb-card__head { flex-direction: column; align-items: flex-start; }
.kd-pn-refurb-card__grid { grid-template-columns: 1fr; }
}