:root {
--ink: #1a1a1a;
--ink-muted: #6b6b6b;
--iron: #2c3038;
--ember: #b4531f;
--surface: #ffffff;
--surface-2: #f5f4f2;
--line: #e3e1de;
--ok: #1c6b45;
--bad: #a32020;
--radius: 6px;
--shell: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--surface);
-webkit-text-size-adjust: 100%;
}
.container {
width: 100%;
padding-inline: clamp(16px, 2.5vw, 40px);
}
a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
background: var(--surface-2);
padding: 2px 6px;
border-radius: 3px;
}
.muted { color: var(--ink-muted); }
.site-header {
background: var(--iron);
color: #fff;
padding-block: 14px;
}
.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.brand {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
}
.brand:hover { text-decoration: none; }
.main-nav {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.main-nav a { color: #e8e6e3; font-size: 0.95rem; }
.main-nav .nav-admin {
color: #fff; background: var(--ember);
padding: 2px 10px; border-radius: 3px; font-weight: 600;
}
.main-nav .nav-admin:hover { background: #99441a; text-decoration: none; }
.account-tile-admin { border-color: var(--ember); }
.account-tile-admin h2 { color: var(--ember); }
.site-footer {
margin-top: 64px;
padding-block: 28px;
border-top: 1px solid var(--line);
background: var(--surface-2);
font-size: 0.9rem;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 8px; }
main.container { padding-block: 32px; }
.flash {
padding: 12px 16px;
border-radius: var(--radius);
border-left: 4px solid;
margin-bottom: 20px;
}
.flash-ok { background: #eaf5ef; border-color: var(--ok); color: var(--ok); }
.flash-bad { background: #fbecec; border-color: var(--bad); color: var(--bad); }
.panel {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px 24px;
margin-block: 20px;
}
.lead { font-size: 1.15rem; color: var(--ink-muted); }
.error-page { background: var(--surface-2); }
.error-shell {
max-width: 640px;
padding-block: 72px;
}
.error-code {
font-size: 4.5rem;
line-height: 1;
margin: 0 0 8px;
color: var(--iron);
letter-spacing: -0.02em;
}
.error-back { margin-top: 32px; }
.trace {
background: var(--iron);
color: #e8e6e3;
padding: 16px;
border-radius: var(--radius);
overflow-x: auto;
font-size: 0.8rem;
line-height: 1.5;
}
.auth-card {
max-width: 440px;
margin-inline: auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 32px;
}
.auth-card h1 { margin-top: 0; font-size: 1.6rem; }
label {
display: block;
margin-top: 18px;
margin-bottom: 6px;
font-weight: 600;
font-size: 0.92rem;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select {
width: 100%;
padding: 11px 13px;
font: inherit;
font-size: 0.98rem;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
input:focus, textarea:focus, select:focus {
outline: 2px solid var(--ember);
outline-offset: 1px;
border-color: var(--ember);
}
input:disabled { background: var(--surface-2); color: var(--ink-muted); }
.field-hint { margin: 6px 0 0; font-size: 0.85rem; color: var(--ink-muted); }
[hidden] { display: none !important; }
.btn {
display: inline-block;
margin-top: 24px;
padding: 12px 24px;
font: inherit;
font-weight: 600;
color: #fff;
background: var(--ember);
border: 1px solid var(--ember);
border-radius: var(--radius);
cursor: pointer;
}
.btn:hover { background: #99441a; text-decoration: none; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--surface-2); }
.btn-sm { padding: 7px 14px; margin-top: 0; font-size: 0.88rem; }
.inline-form { display: inline-block; }
.auth-links { margin-top: 22px; font-size: 0.92rem; }
.auth-links .sep { color: var(--ink-muted); margin-inline: 6px; }
.error-list { margin: 0; padding-left: 20px; }
.error-list li + li { margin-top: 4px; }
.account-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px;
margin-block: 28px;
}
.account-tile {
display: block;
padding: 20px;
color: var(--ink);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.account-tile:hover { border-color: var(--ember); text-decoration: none; }
.account-tile h2 { margin: 0 0 4px; font-size: 1.05rem; }
.account-tile p { margin: 0; font-size: 0.9rem; }
.admin-body { background: var(--surface-2); }
.admin-header { background: var(--iron); color: #fff; padding-block: 14px; }
.admin-header .brand { color: #fff; }
.admin-tag {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--ember);
padding: 2px 7px;
border-radius: 3px;
vertical-align: middle;
}
.admin-user { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; }
.admin-exit { color: #e8e6e3; white-space: nowrap; }
.admin-exit:hover { color: #fff; }
.admin-user .muted { color: #b8b5b1; }
.admin-login-page { display: flex; align-items: center; min-height: 100vh; }
.admin-auth { margin-block: 48px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 24px; }
.stat {
flex: 1 1 150px;
padding: 20px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.stat-value { display: block; font-size: 2rem; font-weight: 700; color: var(--iron); line-height: 1.1; }
.stat-label { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--ink-muted); }
.catalogue { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
.catalogue-sidebar h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; }
.category-nav { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.category-nav li { padding: 4px 0; }
.category-nav .is-parent { margin-top: 10px; font-weight: 600; }
.category-nav .is-child a { padding-left: 12px; }
.category-nav a { color: var(--ink); }
.category-nav .is-current > a { color: var(--ember); font-weight: 600; }
.catalogue-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
.catalogue-head h1 { margin: 0; font-size: 1.5rem; }
.catalogue-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.catalogue-controls input, .catalogue-controls select { width: auto; padding: 8px 10px; }
.catalogue-controls .btn { margin-top: 0; }
.breadcrumb { font-size: .88rem; color: var(--ink-muted); margin-bottom: 18px; }
.breadcrumb span { margin-inline: 6px; }
.child-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.chip {
display: inline-block; padding: 6px 14px; font-size: .9rem;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: 999px; color: var(--ink);
}
.chip:hover { border-color: var(--ember); text-decoration: none; }
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
gap: 20px;
margin-block: 24px;
}
@media (min-width: 1100px) {
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.product-card {
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
transition: border-color .15s;
}
.product-card:hover { border-color: var(--ember); }
.product-card-link { color: var(--ink); display: block; }
.product-card-link:hover { text-decoration: none; }
.product-card-media { position: relative; aspect-ratio: 1; background: var(--surface-2); }
.product-card-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-card-noimage {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
background: repeating-linear-gradient(45deg, #f0eeec, #f0eeec 10px, #e8e5e2 10px, #e8e5e2 20px);
color: var(--ink-muted); font-size: .85rem; text-align: center;
}
.product-card-noimage.large { aspect-ratio: 1; font-size: 1rem; }
.product-card-body { padding: 14px 16px 16px; }
.product-card-name { margin: 0 0 8px; font-size: .98rem; line-height: 1.35; font-weight: 600; }
.product-card-price { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.product-card-stock { margin: 8px 0 0; }
.price-now { font-size: 1.1rem; font-weight: 700; color: var(--iron); }
.price-ask { font-size: .95rem; font-weight: 600; color: var(--ember); }
.stock { font-size: .82rem; font-weight: 600; }
.stock-in { color: var(--ok); }
.stock-low { color: #9a6b00; }
.stock-out { color: var(--bad); }
.stock-enquiry { color: var(--ember); }
.badge {
display: inline-block; padding: 3px 9px; font-size: .72rem; font-weight: 700;
letter-spacing: .03em; text-transform: uppercase; border-radius: 3px;
}
.badge-featured { position: absolute; top: 8px; left: 8px; background: var(--iron); color: #fff; }
.badge-enquiry { background: #fdf0e6; color: var(--ember); border: 1px solid #f0d4bd; }
.badge-ok { background: #eaf5ef; color: var(--ok); }
.badge-muted { background: var(--surface-2); color: var(--ink-muted); }
.badge-warn { background: #fff4e5; color: #8a5a00; border: 1px solid #f0dcbb; text-transform: none; }
.badge-warn.sev-high { background: #fbecec; color: var(--bad); border-color: #f0c2c2; }
.badge-warn.sev-medium { background: #fff4e5; color: #8a5a00; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.product-gallery { display: flex; flex-direction: column; }
@media (min-width: 901px) {
.product-detail {
grid-template-columns:
minmax(0, min(50%, max(320px, calc(100vh - var(--header-h) - 130px))))
minmax(0, 1fr);
}
.product-detail:not(:has(.gallery-thumbs)) {
grid-template-columns:
minmax(0, min(50%, max(320px, calc(100vh - var(--header-h) - 48px))))
minmax(0, 1fr);
}
.product-gallery {
position: sticky; top: calc(var(--header-h) + 16px);
align-self: start;
}
main:has(> .product-detail) > * {
max-width: 1440px;
margin-inline: auto;
}
}
.gallery-main {
position: relative;
border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
display: flex; align-items: center; justify-content: center;
aspect-ratio: 1 / 1;
flex: 0 0 auto;
}
.gallery-main img {
width: 100%; height: 100%;
display: block; object-fit: contain;
}
.gallery-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 40px; height: 40px; padding: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; line-height: 1; color: var(--ink);
background: #fff; border: 1px solid var(--line);
box-shadow: 0 1px 4px rgba(26, 26, 26, .16);
border-radius: 50%; cursor: pointer;
transition: background var(--ease), transform var(--ease);
}
.gallery-nav:hover { background: #fff; }
.gallery-nav:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-count {
position: absolute; right: 12px; bottom: 12px;
padding: 4px 10px; border-radius: 999px;
background: rgba(26, 26, 26, .62); color: #fff;
font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
pointer-events: none;
}
.gallery-zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gallery-zoom:focus-visible { outline: 2px solid var(--ember); outline-offset: -3px; }
.lightbox {
width: 100%; height: 100%; max-width: 100%; max-height: 100%;
margin: 0; padding: 0; border: 0;
background: transparent; color: #fff;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(12, 12, 12, .9); }
.lightbox-image {
max-width: 92vw; max-height: 88vh; width: auto; height: auto;
background: #fff; border-radius: var(--radius);
}
.lightbox-close,
.lightbox-nav {
position: fixed;
display: flex; align-items: center; justify-content: center;
width: 46px; height: 46px; padding: 0;
color: #fff; background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-count {
position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
padding: 4px 12px; border-radius: 999px;
background: rgba(255, 255, 255, .14);
font-size: .85rem; font-variant-numeric: tabular-nums;
}
html.lightbox-open { overflow: hidden; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumb {
padding: 0; width: 72px; height: 72px; cursor: pointer;
background: none; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.gallery-thumb.is-active { border-color: var(--ember); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-summary h1 { margin: 0 0 8px; font-size: 1.7rem; line-height: 1.25; }
.product-meta { font-size: .88rem; margin: 0 0 18px; }
.product-price { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
.product-price .price-now { font-size: 1.7rem; }
.product-stock { margin-bottom: 20px; }
.product-terms {
margin: 0 0 20px;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface);
}
.product-terms > summary {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 11px 14px; cursor: pointer; list-style: none;
font-size: .82rem; color: var(--ink-muted);
}
.product-terms > summary::-webkit-details-marker { display: none; }
.product-terms > summary:hover { background: var(--surface-2); }
.product-terms > summary:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.terms-facts { flex: 1 1 auto; min-width: 0; }
.terms-sep { color: var(--line); padding: 0 2px; }
.terms-toggle {
flex: 0 0 auto; color: var(--ember); font-weight: 600;
}
.terms-toggle::after { content: " ›"; display: inline-block; transition: transform .15s ease; }
.product-terms[open] .terms-toggle::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
.terms-toggle::after { transition: none; }
}
.product-terms[open] > summary {
border-bottom: 1px solid var(--line);
}
.product-terms-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.product-terms-body > p { margin: 0; }
.product-voltage { display: flex; flex-direction: column; gap: 3px; }
.product-voltage .voltage-value { font-weight: 600; font-size: .9rem; }
.product-voltage .muted,
.product-returns { font-size: .82rem; line-height: 1.55; }
.product-export { display: flex; align-items: baseline; gap: 10px; }
.product-export .export-tag {
flex: 0 0 auto;
font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #fff; background: var(--iron);
padding: 3px 7px; border-radius: 3px;
}
.product-export .muted { font-size: .82rem; line-height: 1.55; }
.buy-form input[type="number"] { width: 6rem; }
.buy-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.buy-actions .btn { margin-top: 16px; }
.enquiry-box {
padding: 20px; background: #fdf7f2;
border: 1px solid #f0d4bd; border-radius: var(--radius);
}
.product-section { margin-block: 36px; }
.product-section h2 { font-size: 1.2rem; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.product-description { line-height: 1.7; }
.product-description h2, .product-description h3, .product-description h4 { font-size: 1.05rem; margin-top: 20px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.spec-table th { width: 40%; background: var(--surface-2); font-weight: 600; }
.video-facade { position: relative; max-width: 640px; aspect-ratio: 16/9; }
.video-play {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
display: block;
}
.video-play img {
width: 100%; height: 100%; object-fit: cover;
display: block; border-radius: var(--radius);
}
.video-play-icon {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 3rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.video-facade iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 28px; }
.page-link {
padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius);
color: var(--ink); font-size: .92rem;
}
.page-link:hover { border-color: var(--ember); text-decoration: none; }
.page-current { background: var(--iron); color: #fff; border-color: var(--iron); }
.page-gap { color: var(--ink-muted); padding-inline: 4px; }
.pagination-summary { font-size: .86rem; margin-top: 10px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-head h1 { font-size: 1.5rem; }
.admin-head .btn { margin-top: 0; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .92rem; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table thead th { background: var(--surface-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table td img { border: 1px solid var(--line); border-radius: 3px; object-fit: cover; }
.admin-actions { white-space: nowrap; }
.admin-actions > * { margin-right: 10px; }
.tree-indent { color: var(--ink-muted); margin-right: 4px; }
.warning-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 20px; }
.admin-filters input, .admin-filters select { width: auto; padding: 8px 10px; }
.admin-filters .btn { margin-top: 0; }
.admin-form { max-width: none; }
.admin-form h2 { font-size: 1.05rem; margin-top: 32px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.admin-panel {
margin-top: 36px; padding: 24px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.form-actions { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.quick-add { margin: -4px 0 20px; }
.quick-add-panel {
margin-top: 12px; padding: 16px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.quick-add-panel label { margin-top: 0; }
#category-add-status:empty { display: none; }
#category-add-status.is-error { color: var(--bad); }
.image-previews { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.image-previews:empty { display: none; }
.image-preview { position: relative; margin: 0; width: 120px; }
.image-preview-remove {
position: absolute; top: -8px; right: -8px;
width: 24px; height: 24px; padding: 0; line-height: 1;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; color: #fff; background: var(--bad);
border: 2px solid var(--surface); border-radius: 50%; cursor: pointer;
}
.image-preview-remove:hover { background: #861a1a; }
.image-preview img {
width: 120px; height: 120px; object-fit: cover;
border: 1px solid var(--line); border-radius: var(--radius); display: block;
}
.image-preview figcaption {
margin-top: 4px; font-size: .78rem; color: var(--ink-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropzone {
padding: 10px; margin: -10px -10px 0;
border: 1px dashed transparent; border-radius: var(--radius);
transition: background-color .12s, border-color .12s;
}
.dropzone.is-dropping { border-color: var(--ember); background: var(--surface-2); }
.dropzone.is-dropping * { pointer-events: none; }
.drop-problem { color: var(--bad); font-weight: 600; }
.guide { max-width: 760px; }
.guide-meta { font-size: .88rem; color: var(--ink-muted); margin: -6px 0 22px; }
.guide-faqs h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.table-scroll { overflow-x: auto; margin: 14px 0; }
.table-scroll .spec-table { min-width: 460px; }
.guide-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }
.guide-product {
display: flex; flex-direction: column; gap: 6px; padding: 12px;
background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md);
color: var(--ink); text-decoration: none;
}
.guide-product:hover { border-color: var(--ember); text-decoration: none; }
.guide-product img { width: 100%; height: auto; border-radius: 4px; }
.guide-product-name { font-weight: 600; line-height: 1.3; }
.guide-product-price { color: var(--ink-muted); font-size: .92rem; }
.product-guide-link { font-size: .92rem; margin: -6px 0 14px; }
.product-pair {
display: grid; gap: 32px; align-items: start;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.product-pair > .product-section { margin-block: 0; }
.faq-row {
margin-bottom: 16px; padding: 16px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.faq-row label { margin-top: 0; }
.faq-row label + input, .faq-row label + textarea { margin-bottom: 12px; }
.faq-row textarea { margin-bottom: 8px; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.faq-item summary {
padding: 14px 18px; font-weight: 600; cursor: pointer; list-style: none;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+'; font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--ember);
transition: transform .15s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.faq-item > p { margin: 0; padding: 0 18px 16px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) {
.faq-item summary::after { transition: none; }
}
.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.checkbox input { width: auto; }
.link-button {
background: none; border: none; padding: 0; font: inherit; font-size: .92rem;
color: var(--ember); cursor: pointer; text-decoration: underline;
}
.link-danger { color: var(--bad); }
.btn-danger { background: var(--bad); border-color: var(--bad); }
.btn-danger:hover { background: #861a1a; }
.danger-zone {
max-width: 760px; margin-top: 40px; padding: 20px;
border: 1px solid #f0c2c2; border-radius: var(--radius); background: #fdf5f5;
}
.danger-zone h2 { margin-top: 0; font-size: 1rem; color: var(--bad); }
.quality-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 20px; }
.quality-tile {
padding: 12px 18px; border-radius: var(--radius);
background: var(--surface); border: 1px solid var(--line); min-width: 110px;
}
.quality-tile.sev-high { border-color: #f0c2c2; background: #fdf5f5; }
.quality-tile.sev-medium { border-color: #f0dcbb; background: #fffaf2; }
a.quality-tile { display: block; color: inherit; cursor: pointer; }
a.quality-tile:hover { border-color: var(--ember); text-decoration: none; }
a.quality-tile:hover .quality-label { color: var(--ember); }
a.quality-tile.is-active { border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); }
.reply-thread { list-style: none; margin: 0 0 24px; padding: 0; }
.reply {
padding: 14px 16px; margin-bottom: 12px;
background: var(--surface-2); border: 1px solid var(--line);
border-left: 3px solid var(--ember); border-radius: var(--radius);
}
.reply-unsent { border-left-color: var(--bad); background: #fbecec; }
.reply-meta { margin: 0 0 8px; font-size: .82rem; }
.reply-unsent .reply-meta strong { color: var(--bad); }
.reply-body { line-height: 1.6; }
.quality-count { display: block; font-size: 1.5rem; font-weight: 700; color: var(--iron); }
.quality-label { display: block; font-size: .82rem; color: var(--ink-muted); }
.image-manager { display: flex; flex-wrap: wrap; gap: 14px; margin-block: 16px; }
.image-tile { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; text-align: center; }
.image-tile img { display: block; object-fit: cover; border-radius: 3px; }
.tiny { font-size: .78rem; font-weight: 400; margin-top: 6px; display: block; }
.attribute-table input { width: 100%; }
.nav-cart { position: relative; }
.cart-badge {
display: inline-block; min-width: 19px; margin-left: 5px; padding: 1px 6px;
font-size: .72rem; font-weight: 700; line-height: 1.5; text-align: center;
color: #fff; background: var(--ember); border-radius: 999px;
}
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.cart-item {
display: grid;
grid-template-columns: 88px minmax(0, 1fr) 150px 104px 76px;
grid-template-areas:
"media detail qty total remove"
"media price qty total remove";
column-gap: 16px;
row-gap: 2px;
align-items: center;
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.cart-item-media { grid-area: media; align-self: start; }
.cart-item-detail { grid-area: detail; align-self: end; }
.cart-item-price { grid-area: price; align-self: start; }
.cart-item-qty { grid-area: qty; }
.cart-item-total { grid-area: total; }
.cart-item-remove { grid-area: remove; }
.cart-item.is-blocked { background: #fdf5f5; }
.cart-item-media img { width: 88px; height: 88px; object-fit: contain; background: var(--surface-2); border-radius: var(--radius); }
.cart-item-media .product-card-noimage { width: 88px; height: 88px; border-radius: var(--radius); font-size: .7rem; }
.cart-item-name { margin: 0 0 4px; font-size: .95rem; line-height: 1.35; overflow-wrap: break-word; }
.cart-item-name a { color: var(--ink); }
.cart-item-meta { margin: 0; font-size: .8rem; line-height: 1.4; }
.cart-item-price { font-size: .9rem; }
.cart-item-price .price-now { font-weight: 600; }
.cart-item-note { margin: 8px 0 0; font-size: .85rem; }
.note-bad { color: var(--bad); }
.note-info { color: #8a5a00; }
.cart-item .label {
display: none;
font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted);
}
.qty-form { display: flex; gap: 6px; align-items: center; }
.qty-form input[type="number"] { width: 4.5rem; padding: 8px 10px; }
.qty-form .btn { margin-top: 0; }
.qty-fixed { font-weight: 600; }
.cart-item-total { text-align: right; font-size: 1.05rem; }
.cart-item-remove { text-align: right; }
.cart-item-remove form { margin: 0; }
.cart-actions {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; padding-top: 20px;
}
.cart-actions .btn { margin-top: 0; }
.cart-summary {
position: sticky; top: 20px;
max-height: calc(100vh - 40px); overflow-y: auto;
padding: 24px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.cart-summary h2 { margin-top: 0; font-size: 1.1rem; }
.summary-lines { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 20px 0; }
.summary-lines dt { color: var(--ink-muted); font-size: .92rem; }
.summary-lines dd { margin: 0; text-align: right; font-size: 1.05rem; }
.summary-note { font-size: .85rem; margin: 12px 0 0; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn:disabled { background: #c9c5c1; border-color: #c9c5c1; cursor: not-allowed; }
.cart-empty { text-align: center; padding: 48px 24px; }
.cart-empty .btn { margin-top: 16px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.checkout-main h2 { font-size: 1.1rem; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.address-choice { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-block: 18px; }
.address-choice legend { padding-inline: 8px; font-weight: 600; font-size: .92rem; }
.address-option { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-weight: 400; }
.address-option input { width: auto; margin-top: 3px; }
.address-option span { font-size: .92rem; line-height: 1.5; }
.checkout-summary {
position: sticky; top: 20px; padding: 24px;
max-height: calc(100vh - 40px); overflow-y: auto;
background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.checkout-summary h2 { margin-top: 0; font-size: 1.1rem; }
.summary-items { list-style: none; margin: 0 0 18px; padding: 0; font-size: .92rem; }
.summary-items li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.summary-item-total { white-space: nowrap; }
.summary-lines dt.grand, .summary-lines dd.grand {
padding-top: 10px; border-top: 1px solid var(--line); font-size: 1.1rem; color: var(--ink);
}
.not-configured { color: #8a5a00; font-size: .88rem; font-style: italic; }
.order-received { max-width: 760px; }
.order-ref { text-align: center; }
.order-number { font-size: 1.6rem; font-weight: 700; letter-spacing: .06em; color: var(--iron); margin: 6px 0; }
.order-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.order-table th, .order-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.order-table thead th { background: var(--surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.order-table tfoot th { text-align: right; font-weight: 600; }
.order-table tfoot tr.grand th, .order-table tfoot tr.grand td { font-size: 1.05rem; border-top: 2px solid var(--line); }
.order-address { font-style: normal; line-height: 1.7; }
.status-history { list-style: none; margin: 0; padding: 0; }
.status-history li { padding: 10px 0 10px 18px; border-left: 2px solid var(--line); position: relative; }
.status-history li::before {
content: ''; position: absolute; left: -5px; top: 16px;
width: 8px; height: 8px; border-radius: 50%; background: var(--ember);
}
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
gap: 56px;
align-items: center;
padding-block: 40px;
border-bottom: 1px solid var(--line);
margin-bottom: 8px;
max-width: 1560px;
margin-inline: auto;
}
@media (min-width: 1400px) {
.hero { grid-template-columns: minmax(0, 580px) minmax(0, 1fr); max-width: 1480px; }
.hero h1 { max-width: none; }
.hero .lead { max-width: 48ch; }
.hero-stage { width: min(100%, 680px); }
}
@media (min-width: 1700px) {
.hero { gap: 64px; }
}
.hero-media {
display: block;
width: 100%;
max-width: 480px;
margin-inline: auto;
}
.hero-media img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
background: var(--surface-2);
}
@media (max-width: 1100px) {
.hero { gap: 40px; }
.hero-media { max-width: 400px; }
}
@media (max-width: 820px) {
.hero { grid-template-columns: 1fr; gap: 32px; padding-block: 32px; }
.hero-media { max-width: 360px; }
}
@media (max-width: 560px) {
.hero { gap: 26px; padding-block: 26px; }
.hero-media { max-width: 290px; }
.hero-actions { gap: 10px; margin-top: 26px; }
.hero-actions .btn { flex: 1 1 100%; text-align: center; }
}
.hero-eyebrow {
margin: 0 0 14px;
font-size: .78rem; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--ember);
}
.hero h1 {
margin: 0 0 18px;
font-size: clamp(1.8rem, 3.6vw, 2.6rem);
line-height: 1.15;
letter-spacing: -.02em;
max-width: 20ch;
text-wrap: balance;
}
.hero .lead { max-width: 44ch; margin-bottom: 0; font-size: 1.05rem; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-actions .btn { margin-top: 0; padding: 13px 26px; }
.setup-notice { border-left: 3px solid var(--ember); }
.setup-notice h2 { margin-top: 0; font-size: 1.1rem; }
.home-section { margin-block: 48px; }
.section-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
border-bottom: 1px solid var(--line);
padding-bottom: 10px; margin-bottom: 22px;
}
.section-head h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.01em; }
.section-head a { font-size: .92rem; white-space: nowrap; }
.home-section > h2 {
font-size: 1.3rem; letter-spacing: -.01em;
border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 22px;
}
.collection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
}
.collection-tile {
display: flex; flex-direction: column; gap: 4px;
padding: 18px 20px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink);
}
.collection-tile:hover { border-color: var(--ember); text-decoration: none; }
.collection-name { font-weight: 600; font-size: .98rem; }
.collection-count { font-size: .82rem; }
.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.trust h3 { margin: 0 0 6px; font-size: 1rem; }
.trust p { margin: 0; font-size: .93rem; color: var(--ink-muted); }
.b2b-cta {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
padding: 32px;
background: var(--iron);
border-radius: var(--radius);
}
.b2b-cta h2 { margin: 0 0 8px; color: #fff; font-size: 1.25rem; border: 0; padding: 0; }
.b2b-cta p { margin: 0; color: #c3c8ce; max-width: 52ch; font-size: .95rem; }
.b2b-cta .btn { margin-top: 0; flex-shrink: 0; }
.payment-choice { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-block: 12px 0; }
.payment-option { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-weight: 400; }
.payment-option:last-child { margin-bottom: 0; }
.payment-option input { width: auto; margin-top: 4px; }
.payment-option span { font-size: .93rem; line-height: 1.5; }
.payment-page { max-width: 620px; margin-inline: auto; text-align: center; }
.payment-page .panel { text-align: center; }
.pay-amount { font-size: 1.5rem; font-weight: 700; color: var(--ember); margin: 4px 0 0; }
.payment-status { color: var(--ink-muted); font-size: .95rem; }
.payment-page .btn { margin-top: 12px; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 900px) {
.nav-search { width: 100%; margin: 4px 0 10px; }
.nav-search input[type="search"] { width: 100%; }
.catalogue { grid-template-columns: 1fr; }
.catalogue-sidebar { order: 2; }
.product-detail { grid-template-columns: 1fr; gap: 24px; }
.cart-layout { grid-template-columns: 1fr; }
.cart-summary { position: static; max-height: none; overflow-y: visible; }
.checkout-layout { grid-template-columns: 1fr; }
.checkout-summary { position: static; order: -1; max-height: none; overflow-y: visible; }
.order-table { display: block; overflow-x: auto; }
}
@media (max-width: 700px) {
.cart-item {
grid-template-columns: 90px 1fr;
grid-template-areas:
"media detail"
"price qty"
"total remove";
gap: 12px 14px;
align-items: start;
}
.cart-item-media,
.cart-item-detail,
.cart-item-price { align-self: start; }
.cart-item-media { grid-area: media; }
.cart-item-detail { grid-area: detail; }
.cart-item-price { grid-area: price; }
.cart-item-qty { grid-area: qty; }
.cart-item-total { grid-area: total; text-align: left; }
.cart-item-remove { grid-area: remove; text-align: right; align-self: center; }
.cart-item .label { display: block; margin-bottom: 4px; }
.cart-item-media img,
.cart-item-media .product-card-noimage { width: 90px; height: 90px; }
}
@media (max-width: 640px) {
.header-inner { flex-direction: column; align-items: flex-start; }
.main-nav { gap: 14px; }
.error-code { font-size: 3.25rem; }
.error-shell { padding-block: 48px; }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.product-summary h1 { font-size: 1.35rem; }
.product-price .price-now { font-size: 1.4rem; }
.catalogue-head { flex-direction: column; align-items: stretch; }
.catalogue-controls { flex-direction: column; align-items: stretch; }
.catalogue-controls input, .catalogue-controls select { width: 100%; }
.admin-table { display: block; overflow-x: auto; white-space: nowrap; }
.admin-filters { flex-direction: column; align-items: stretch; }
.admin-filters input, .admin-filters select { width: 100%; }
}
.admin-nav { background: rgba(0, 0, 0, .18); }
.admin-nav .container { display: flex; flex-wrap: wrap; gap: 2px; }
.admin-nav-link {
color: rgba(255, 255, 255, .72);
padding: 10px 14px;
font-size: .9rem;
text-decoration: none;
border-bottom: 2px solid transparent;
}
.admin-nav-link:hover { color: #fff; text-decoration: none; }
.admin-nav-link.is-active { color: #fff; border-bottom-color: currentColor; }
.coupon-box { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.coupon-box label { display: block; font-size: .85rem; margin-bottom: 6px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.coupon-row .btn { margin-top: 0; flex: 0 0 auto; }
.coupon-applied { font-size: .9rem; margin-bottom: 4px; }
.summary-discount { color: var(--good, #1c7c4a); }
.review-summary { font-size: 1.05rem; margin-bottom: 14px; }
.review-list { list-style: none; padding: 0; margin: 0 0 24px; }
.review { border-bottom: 1px solid var(--line); padding-block: 16px; }
.review:last-child { border-bottom: 0; }
.review-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.review-rating { color: #b8860b; letter-spacing: 1px; white-space: nowrap; }
.review-body { margin: 0 0 6px; }
.review-meta { font-size: .85rem; }
.review-form { margin-top: 24px; }
.review-blocked { margin-top: 16px; font-size: .9rem; }
.review-moderate + .review-moderate { margin-top: 12px; }
.review-moderate-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.pill {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
border: 1px solid var(--line);
}
.pill-good { background: #eef7f1; border-color: #bfe0cd; color: #1c7c4a; }
.pill-bad { background: #fdf5f5; border-color: #f0c2c2; color: var(--bad); }
.pill-warn { background: #fffaf2; border-color: #f0dcbb; color: #96600d; }
.pill-muted { background: #f6f6f6; color: #666; }
.panel-alert { border-color: #f0c2c2; background: #fdf5f5; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 220px; }
@media (max-width: 640px) {
.field-row { flex-direction: column; gap: 0; }
.admin-nav .container { overflow-x: auto; flex-wrap: nowrap; }
}
.password-wrap { position: relative; display: block; }
.password-wrap input { width: 100%; padding-right: 4.5rem; }
.password-toggle {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
background: none;
border: 0;
padding: 4px 8px;
font-size: .8rem;
font-weight: 600;
color: var(--ink-muted);
cursor: pointer;
border-radius: 4px;
}
.password-toggle:hover { color: var(--ink); background: var(--surface-2); }
.password-toggle:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.demo-video-count { margin: 4px 0 20px; }
.demo-video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 28px;
}
.demo-video { min-width: 0; }
.demo-video-frame {
aspect-ratio: 16 / 9;
background: var(--surface-2);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 10px;
}
.demo-video-frame img,
.demo-video-frame iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.demo-video-frame .product-card-noimage { width: 100%; height: 100%; }
.demo-video-title { font-size: 1rem; line-height: 1.35; margin: 0 0 4px; }
.demo-video-title a { color: var(--ink); }
.demo-video-meta { font-size: .82rem; margin: 0 0 6px; }
.demo-video-desc { font-size: .88rem; margin: 0 0 10px; color: var(--ink-muted); }
.settings-textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; line-height: 1.5; }
.static-page { max-width: none; }
.static-page > h1 {
font-size: 2rem; line-height: 1.15; letter-spacing: -.02em;
margin: 0 0 22px; padding-bottom: 16px;
border-bottom: 2px solid var(--iron);
}
.prose-toc {
max-width: 68ch; margin: 0 0 34px; padding: 18px 22px;
background: var(--surface-2);
border: 1px solid var(--line); border-radius: var(--radius);
}
.prose-toc-title {
margin: 0 0 10px;
font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-muted);
}
.prose-toc ol {
margin: 0; padding: 0; list-style: none;
columns: 2; column-gap: 32px;
}
.prose-toc li {
margin: 0 0 7px;
break-inside: avoid;
counter-increment: toc;
font-size: .88rem; line-height: 1.4;
}
.prose-toc { counter-reset: toc; }
.prose-toc li::before {
content: counter(toc) ".";
display: inline-block; min-width: 1.4em;
color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.prose-toc a { color: var(--ink); }
.prose-toc a:hover { color: var(--ember); }
.prose h2 { scroll-margin-top: 18px; }
@media (max-width: 640px) {
.prose-toc ol { columns: 1; }
}
@media (min-width: 1024px) {
.static-page:has(.prose-toc) {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 0 56px; align-items: start;
max-width: 1400px;
}
.static-page:has(.prose-toc) > h1 { grid-column: 1 / -1; }
.static-page:has(.prose-toc) .prose-toc {
position: sticky; top: 20px; margin: 0;
background: none; border: 0; border-left: 2px solid var(--line);
border-radius: 0; padding: 2px 0 2px 18px;
}
.static-page:has(.prose-toc) .prose-toc ol { columns: 1; }
.static-page:has(.prose-toc) .prose-toc li { margin-bottom: 10px; }
.static-page:has(.prose-toc) .prose { max-width: 76ch; }
}
.prose { max-width: 68ch; }
.prose p, .prose li { line-height: 1.75; }
.prose p { margin: 0 0 15px; }
.prose > p:first-child {
font-size: 1.06rem; line-height: 1.65; color: var(--ink);
margin-bottom: 26px;
}
.prose h2 {
font-size: 1.02rem; font-weight: 600; letter-spacing: .01em;
margin: 34px 0 12px; padding-top: 20px;
border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1rem; font-weight: 600; margin: 22px 0 8px; }
.prose strong { font-weight: 600; color: var(--iron); }
.prose a { border-bottom: 1px solid rgba(180, 83, 31, .35); }
.prose a:hover { border-bottom-color: var(--ember); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 600; }
.prose blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 3px solid var(--line); color: var(--ink-muted); }
@media (max-width: 640px) {
.static-page > h1 { font-size: 1.6rem; }
}
.enquiry-form { max-width: 640px; }
.enquiry-form textarea { min-height: 120px; }
.enquiry-about { margin: 0 0 4px; font-size: .95rem; color: var(--ink); }
.contact-enquiry { margin-top: 32px; }
.enquiry-message { white-space: pre-wrap; max-width: 68ch; line-height: 1.7; }
.filter-chip-alert { border-color: #f0dcbb; background: #fffaf2; }
.admin-user .btn-quiet {
color: #fff;
border-color: rgba(255, 255, 255, .4);
background: transparent;
}
.admin-user .btn-quiet:hover {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .7);
color: #fff;
}
.admin-user .btn-quiet:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.filter-sep { color: var(--ink-muted); opacity: .5; }
.contact-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin: 28px 0 8px;
}
.contact-card {
border: 1px solid var(--line);
border-radius: 10px;
padding: 18px 20px;
background: var(--surface);
}
.contact-card h2 {
font-size: .82rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 10px;
}
.contact-card-value {
font-size: 1.02rem;
font-weight: 600;
line-height: 1.45;
margin: 0 0 6px;
overflow-wrap: anywhere;
}
.contact-card .muted { margin: 0; font-size: .9rem; line-height: 1.55; }
.delivery-quote { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.delivery-quote label { margin-top: 0; }
.delivery-quote-row { display: flex; gap: 8px; align-items: stretch; }
.delivery-quote-row input { flex: 1 1 auto; min-width: 0; }
.delivery-quote-row .btn { margin-top: 0; white-space: nowrap; }
.delivery-to { font-size: .85rem; margin-left: 4px; }
.delivery-quote-row input[readonly] {
background: var(--surface-2);
color: var(--ink-muted);
cursor: default;
}
.address-chosen { margin-block: 18px; }
.address-chosen p { margin: 0 0 6px; }
.address-chosen .field-hint { margin-top: 10px; }
.address-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
margin-block: 20px;
}
.address-card {
position: relative;
padding: 18px 20px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
}
.address-card.is-default { border-color: var(--ember); }
.address-card .badge { position: absolute; top: 14px; right: 14px; }
.address-card-name { margin: 0 0 6px; }
.address-card p { margin: 0 0 6px; font-size: .92rem; line-height: 1.55; }
.address-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.address-form { max-width: 640px; }
.summary-items li { align-items: flex-start; }
.summary-item-thumb {
flex: 0 0 48px;
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 6px;
background: var(--surface-2);
}
.summary-item-name { flex: 1 1 auto; min-width: 0; }
.admin-product-cell { display: flex; gap: 12px; align-items: flex-start; }
.admin-product-detail { min-width: 0; }
.admin-thumb {
flex: 0 0 44px;
width: 44px;
height: 44px;
object-fit: cover;
border-radius: 6px;
background: var(--surface-2);
border: 1px solid var(--line);
}
.admin-thumb-empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-muted);
font-size: 1.1rem;
border-style: dashed;
}
.nav-toggle {
display: none;
padding: 10px;
background: transparent;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: var(--radius);
cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
display: block;
width: 20px; height: 2px;
background: #fff;
transition: transform .15s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: relative; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 720px) {
.has-nav-toggle .header-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.has-nav-toggle .brand { order: 1; }
.has-nav-toggle .nav-toggle { display: block; order: 2; flex: 0 0 auto; }
.has-nav-toggle .main-nav {
display: none;
flex-direction: column;
gap: 0;
flex: 0 0 100%;
order: 3;
margin-top: 12px;
border-top: 1px solid rgba(255, 255, 255, .15);
}
.has-nav-toggle .main-nav.is-open {
display: flex;
max-height: calc(100vh - 88px);
max-height: calc(100dvh - 88px);
overflow-y: auto;
overscroll-behavior: contain;
}
.has-nav-toggle .main-nav a {
padding: 14px 2px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.has-nav-toggle .main-nav a:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after { transition: none; }
}
.stat-value.stat-text { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.demo-video-frame { position: relative; }
:root {
--sand: #faf8f5;
--sand-2: #f2ede6;
--hair: #ece8e2;
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
--s5: 48px; --s6: 64px; --s7: 96px;
--r-sm: 10px; --r-md: 14px; --r-lg: 18px;
--ease: 180ms cubic-bezier(.2, .6, .3, 1);
}
:root { --header-h: 71px; }
html { scroll-padding-top: calc(var(--header-h) + 13px); }
@media (min-width: 901px) {
.cart-summary, .checkout-summary {
top: calc(var(--header-h) + 16px);
max-height: calc(100vh - var(--header-h) - 32px);
}
}
@media (min-width: 901px) {
.catalogue-sidebar {
position: sticky;
top: calc(var(--header-h) + 16px);
align-self: start;
max-height: calc(100vh - var(--header-h) - 32px);
overflow-y: auto;
padding-right: 4px;
}
}
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--iron);
background: color-mix(in srgb, var(--iron) 92%, transparent);
-webkit-backdrop-filter: saturate(160%) blur(10px);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@supports not (backdrop-filter: blur(4px)) {
.site-header { background: var(--iron); }
}
.brand { font-size: 1.3rem; }
.main-nav { align-items: center; gap: 22px; }
.main-nav a { transition: color var(--ease); }
.main-nav a:hover { color: #fff; text-decoration: none; }
.nav-search { position: relative; display: flex; align-items: center; margin-right: 6px; flex: 0 0 auto; }
.nav-search input[type="search"] {
width: clamp(200px, 22vw, 320px); margin: 0;
padding: 11px 96px 11px 42px;
font-size: .95rem; color: #fff;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .20); border-radius: 999px;
transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.nav-search input[type="search"]::placeholder { color: rgba(232, 230, 227, .6); }
.nav-search input[type="search"]:hover { background: rgba(255, 255, 255, .14); }
.nav-search input[type="search"]:focus {
outline: none;
background: rgba(255, 255, 255, .17);
border-color: rgba(255, 255, 255, .45);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .10);
}
.nav-search::before {
content: ''; position: absolute; left: 16px; width: 13px; height: 13px;
border: 2px solid rgba(232, 230, 227, .75); border-radius: 50%;
pointer-events: none;
}
.nav-search::after {
content: ''; position: absolute; left: 27px; top: calc(50% + 4px);
width: 7px; height: 2px; border-radius: 2px;
background: rgba(232, 230, 227, .75); transform: rotate(45deg);
pointer-events: none;
}
.nav-search-go {
position: absolute; right: 5px;
padding: 8px 18px; font-size: .85rem; font-weight: 600; color: #fff;
background: var(--ember); border: none; border-radius: 999px; cursor: pointer;
transition: background var(--ease);
}
.nav-search-go:hover { background: #9d4619; }
.currency-picker { margin-right: 4px; }
.currency-picker summary {
padding: 8px 14px; font-size: .88rem; color: #e8e6e3; cursor: pointer;
list-style: none; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
white-space: nowrap;
}
.currency-picker summary::-webkit-details-marker { display: none; }
.currency-picker summary::after { content: ' ▾'; opacity: .7; }
.currency-picker[open] summary { background: rgba(255, 255, 255, .12); }
.currency-picker summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.currency-panel {
position: absolute; right: clamp(16px, 2.5vw, 40px); top: calc(100% + 8px); z-index: 60;
width: 280px; padding: 14px;
background: var(--surface); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.currency-note { margin: 0 0 10px; font-size: .78rem; color: var(--ink-muted); line-height: 1.5; }
.currency-age { margin: -4px 0 10px; font-size: .74rem; color: var(--ink-muted); }
.currency-age.is-stale { color: var(--bad); }
.currency-search {
width: 100%; margin: 0 0 10px; padding: 8px 12px; font-size: .9rem;
border: 1px solid var(--line); border-radius: var(--radius);
}
.currency-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.currency-option {
display: flex; gap: 10px; align-items: baseline;
padding: 8px 10px; text-align: left; font-size: .9rem;
background: none; border: none; border-radius: var(--radius); cursor: pointer;
}
.currency-option:hover { background: var(--surface-2); }
.currency-option.is-active { font-weight: 600; color: var(--ember); }
.currency-code { min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.currency-name { color: var(--ink-muted); }
.currency-option.is-active .currency-name { color: inherit; }
@media (min-width: 721px) {
.currency-picker { order: 5; }
}
@media (max-width: 720px) {
.has-nav-toggle .currency-picker { order: 2; margin-left: auto; }
.has-nav-toggle .nav-toggle { order: 3; }
}
@media (max-width: 720px) {
.currency-picker { position: static; }
.currency-panel {
left: 12px; right: 12px; width: auto;
top: 100%; margin-top: 6px;
}
.currency-list { max-height: 45vh; }
}
.nav-cart { position: relative; }
.cart-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; margin-left: 6px; padding-inline: 5px;
font-size: .7rem; font-weight: 700; line-height: 1;
color: #fff; background: var(--ember); border-radius: 999px;
}
.nav-cta {
padding: 9px 18px; border-radius: 999px;
background: var(--ember); color: #fff !important; font-weight: 600;
transition: background var(--ease), transform var(--ease);
}
.nav-cta:hover { background: #9d4619; text-decoration: none; transform: translateY(-1px); }
.site-header a:focus-visible, .site-header button:focus-visible {
outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px;
}
.home-section { margin-block: var(--s7); }
.section-head {
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: var(--s2); margin-bottom: var(--s4);
}
.section-head h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.section-head p { margin: 0; }
.section-link { font-weight: 600; white-space: nowrap; }
.eyebrow {
margin: 0 0 var(--s1); font-size: .76rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--ember);
}
.btn-ghost {
background: transparent; color: var(--ink); border-color: currentColor;
}
.btn-ghost:hover { background: rgba(0, 0, 0, .04); }
.btn { transition: background var(--ease), transform var(--ease), border-color var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.hero-marks {
display: flex; flex-wrap: wrap; gap: var(--s3);
margin: var(--s4) 0 0; padding: 0; list-style: none;
font-size: .88rem; color: var(--ink-muted);
}
.hero-marks li { display: flex; align-items: center; gap: 8px; }
.hero-marks li::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--ember); flex: none;
}
.hero-stage {
position: relative;
width: min(100%, 548px);
margin-inline: auto;
padding: 3% 6% 7%;
display: flex;
justify-content: center;
}
.hero-stage::before {
content: ''; position: absolute; z-index: 0; inset: 0;
background: radial-gradient(120% 100% at 50% 35%, var(--sand-2), var(--sand));
border-radius: var(--r-lg);
}
.hero-media { position: relative; }
.hero-media img { border-radius: var(--r-md); background: transparent; }
.hero-card {
position: absolute; left: -28px; bottom: 8%; z-index: 2;
display: grid; gap: 2px; padding: 14px 18px;
background: #fff; border: 1px solid var(--hair); border-radius: var(--r-sm);
box-shadow: 0 6px 20px rgba(26, 26, 26, .08);
color: var(--ink); text-decoration: none;
transition: transform var(--ease), box-shadow var(--ease);
}
.hero-card:hover {
text-decoration: none; transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(26, 26, 26, .12);
}
.hero-card-name { font-weight: 700; }
.hero-card-meta { font-size: .8rem; color: var(--ink-muted); }
.hero-card-price { margin-top: 4px; font-weight: 700; color: var(--ember); }
.hero-card-cta { font-size: .8rem; font-weight: 600; color: var(--ember); }
.trust-strip {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2);
margin: 0 0 var(--s6); padding: var(--s3) var(--s2);
list-style: none;
background: var(--sand); border: 1px solid var(--hair); border-radius: var(--r-md);
}
.trust-strip li {
display: flex; align-items: center; justify-content: center; gap: 10px;
font-size: .9rem; font-weight: 600; text-align: center;
}
.trust-strip svg { width: 20px; height: 20px; color: var(--ember); flex: none; }
.cat-grid {
display: grid; gap: var(--s3);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
@media (min-width: 1000px) {
.cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cat-grid { grid-auto-rows: 1fr; }
.cat-card {
display: flex; flex-direction: column; overflow: hidden;
background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md);
color: var(--ink); text-decoration: none;
transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.cat-card:hover {
text-decoration: none; transform: translateY(-3px);
border-color: var(--ember); box-shadow: 0 10px 26px rgba(26, 26, 26, .09);
}
.cat-card-media { aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center; }
.cat-card-media img { width: 100%; height: 100%; object-fit: contain; }
.cat-card-noimage { font-size: .82rem; color: var(--ink-muted); }
.cat-card-body {
flex: 1;
display: grid; gap: 2px; padding: var(--s3);
grid-template-areas: "title arrow" "meta arrow";
grid-template-columns: 1fr auto;
align-items: center;
align-content: space-between;
}
.cat-card-body h3 { grid-area: title; margin: 0; font-size: 1.02rem; }
.cat-card-body p { grid-area: meta; margin: 0; font-size: .85rem; }
.cat-card-cta {
grid-area: arrow; color: var(--ember); font-size: 1.2rem;
align-self: end;
transition: transform var(--ease);
}
.cat-card:hover .cat-card-cta { transform: translateX(4px); }
.story {
display: grid; gap: var(--s6); align-items: center;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
margin-block: var(--s7);
padding: var(--s5); background: var(--sand);
border: 1px solid var(--hair); border-radius: var(--r-lg);
}
.story-media img {
width: 100%; height: auto; display: block;
border-radius: var(--r-md); background: #fff;
}
.story-copy h2 { margin: 0 0 var(--s2); font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.story-copy p { margin: 0 0 var(--s2); }
.story-marks { margin: var(--s3) 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.story-marks li { padding-left: 22px; position: relative; font-size: .94rem; }
.story-marks li::before {
content: ''; position: absolute; left: 0; top: .55em;
width: 8px; height: 8px; border-radius: 2px; background: var(--ember);
}
.b2b {
margin-block: var(--s7); padding: var(--s6) var(--s5);
background: var(--iron); color: #e8e6e3; border-radius: var(--r-lg);
}
.b2b-inner { max-width: 62ch; }
.b2b h2 { margin: 0 0 var(--s2); color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.b2b p { margin: 0 0 var(--s4); color: #c3c8ce; }
.b2b .eyebrow { color: #e8a06a; }
.b2b-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.b2b .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.b2b .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.quote-grid {
display: grid; gap: var(--s3);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.quote {
margin: 0; padding: var(--s4);
background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md);
}
.quote-stars { color: var(--ember); letter-spacing: 2px; margin-bottom: var(--s2); }
.quote-stars .is-dim { color: var(--hair); }
.quote blockquote { margin: 0 0 var(--s3); font-size: 1.02rem; line-height: 1.6; }
.quote figcaption { font-size: .88rem; display: grid; gap: 2px; }
.closing {
margin-block: var(--s7) var(--s6); padding: var(--s6) var(--s4);
text-align: center;
background: var(--sand); border: 1px solid var(--hair); border-radius: var(--r-lg);
}
.closing h2 {
margin: 0 auto var(--s4); max-width: 22ch;
font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.02em;
}
.closing-actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.footer-grid {
display: grid; gap: var(--s5);
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
padding-bottom: var(--s5);
}
.footer-brand .brand { color: var(--ink); font-size: 1.2rem; }
.footer-brand p { margin: var(--s1) 0 var(--s3); max-width: 34ch; }
.footer-contact { font-style: normal; font-size: .9rem; line-height: 1.8; }
.footer-col h2 {
margin: 0 0 var(--s2); font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col a { color: var(--ink); font-size: .92rem; }
.footer-col a:hover { color: var(--ember); }
.footer-social { display: flex; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; font-size: .9rem; }
.footer-nav { padding-top: var(--s3); border-top: 1px solid var(--hair); }
@media (max-width: 900px) {
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.footer-brand { grid-column: 1 / -1; }
.story { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s4); }
.story-media { order: 2; max-width: 420px; margin-inline: auto; }
.trust-strip { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
}
@media (max-width: 820px) {
.home-section, .story, .b2b, .closing { margin-block: var(--s6); }
.b2b { padding: var(--s5) var(--s4); }
.hero-card { position: static; margin-top: var(--s3); justify-items: start; }
.hero-stage { flex-direction: column; align-items: center; }
.hero-stage::before { inset: 0 -2% 22% -2%; }
}
@media (max-width: 560px) {
.trust-strip { grid-template-columns: 1fr; padding: var(--s3); }
.trust-strip li { justify-content: flex-start; }
.footer-grid { grid-template-columns: 1fr; }
.closing { padding: var(--s5) var(--s3); }
.closing-actions .btn, .b2b-actions .btn { flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.btn, .cat-card, .hero-card, .nav-cta, .cat-card-cta, .main-nav a { transition: none; }
.btn:hover, .cat-card:hover, .hero-card:hover, .nav-cta:hover { transform: none; }
}