, and rebuilding them
is how a screen ends up half-modal. What changes is only that there is
nothing left around the edges - no dim, no gutter, nothing behind to
scroll, and one thing on screen at a time.
The exit is a labelled button rather than a ✕, because at full width there
is no page showing round the outside to tell you what you would be going
back to. */
dialog.sheet--screen {
width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
}
dialog.sheet--screen::backdrop { background: var(--bg); backdrop-filter: none; }
.sheet--screen .sheet__panel { border-radius: 0; box-shadow: none; }
/* the head is the screen's own bar now, so it earns a little more room and
sticks to the top edge rather than floating inside a frame */
.sheet--screen .sheet__head { padding: .7rem clamp(.8rem, 2vw, 1.4rem); }
.sheet--screen .sheet__body { padding: 1rem clamp(.8rem, 2vw, 1.4rem) 2rem; }
/* Content that was drawn for an 80vw window would run to a 2560px line here,
which is unreadable. The board and the forms get the width they need and
the rest is margin. */
.sheet--screen .sheet__body > * { max-width: 1800px; width: 100%; }
.sheet--screen .sheet__body { justify-items: center; }
.sheet--screen .sheet__body > * { justify-self: center; }
/* The back control: only a screen has one. A screen also hides the ✕ - the
labelled way out is the point, because at full width there is no page
showing around the edges to say what is behind.
THE PRODUCT EDITOR KEEPS BOTH, and the reason is the Salvesta beside it. It
is the only screen here with a save: on the others (the sales desk, Tarned)
every press writes as it goes, so leaving is only ever "go back" and the
labelled control says that better than a glyph. In a form, leaving WITHOUT
saving is its own act, and the place a hand goes to do it is the corner
beside the save button - not a "← Kataloog" at the far end of the bar,
which reads as navigation. They do the same thing today (both go through
the same dirty guard); they do not mean the same thing. */
.sheet__back { display: none; }
.sheet--screen .sheet__back { display: inline-flex; align-items: center; gap: .35rem; }
.sheet--screen .sheet__head > .icon-btn[data-close] { display: none; }
/* …and it is separated from Salvesta, so "close" is never mis-hit for "save" */
.sheet--screen .sheet__head > .icon-btn[data-drawer-close] { margin-inline-start: .45rem; }
/* a screen's title sits next to the way out rather than starting the row */
.sheet--screen .sheet__head h2 { font-size: var(--t-lg); }
.fieldset {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: .9rem 1rem;
}
.fieldset > h3 {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
color: var(--ink-3); margin-bottom: .7rem;
}
/* ---- the product editor's shape -----------------------------------------
ELEVEN BOXES IN ONE COLUMN IS NOT A FORM, IT IS A LIST. Every section wore
the same border and the same small grey heading, so nothing said that the
name mattered more than the video links - and the two things you fill first
and check most, the price and the description, were at the bottom of it.
Two columns, and the side is the argument. LEFT is what you WRITE - who the
product is, what it says, what it costs, how many are on the shelf. RIGHT
is what you ATTACH - pictures, files, the tags that decide where it turns
up, the products that hang off it. The left is the wider of the two because
it is the one with sentences in it.
Under 1100px it is one column in the same order, which is also the order a
product actually gets filled in, so nothing about the narrow view is a
compromise. ------------------------------------------------------------ */
.pedit { display: grid; gap: 1rem; align-items: start; }
.pedit__col { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.pedit__banners:empty { display: none; }
.pedit__banners > :last-child { margin-bottom: 0; }
@media (min-width: 1100px) {
.pedit { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pedit__banners { grid-column: 1 / -1; }
}
.pedit__prices { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.pedit__grouph {
padding-inline: .2rem; font-size: var(--t-xs); text-transform: uppercase;
letter-spacing: .06em; color: var(--ink-3); margin: .2rem 0 -.3rem;
}
/* the dealer discount: one number that moves every preview below it, so it
rides at the top of the prices rather than in a section four screens up */
.pedit__dd { padding: .6rem .7rem; background: var(--surface-2); }
.pedit__add { display: grid; gap: .3rem; justify-items: start; padding-inline: .2rem; }
/* ---- a section within a section -----------------------------------------
Pictures, documents and video are one question - what the product looks
like - and were three fieldsets. A .mblock is the same content without the
second border, so grouping them costs no extra frame. */
.mblock + .mblock, .more + .mblock { margin-top: .9rem; }
.mblock > .flabel { margin-bottom: .4rem; }
.mblock__sep { height: 1px; background: var(--line); margin: .8rem 0; }
/* ---- the fields that are real but rarely touched -------------------------
A
, deliberately: the controls stay in the DOM when it is shut, so
a value that arrived by import or by copy is never hidden from the code
that saves it, and admin.js opens the one that already holds something. */
.more { margin-top: .7rem; }
.more > summary {
cursor: pointer; font-size: var(--t-xs); font-weight: 650; color: var(--ink-3);
padding: .35rem .5rem; border-radius: var(--radius-sm);
list-style: none; display: flex; align-items: center; gap: .4rem;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
content: '▸'; font-size: .8em; color: var(--ink-4);
transition: transform .12s ease;
}
.more[open] > summary::before { transform: rotate(90deg); }
.more > summary:hover { background: var(--surface-2); color: var(--ink); }
.more__body { padding: .6rem .5rem 0; }
.more--quiet > summary { font-weight: 500; color: var(--ink-4); }
/* ---- variants, as tabs ---------------------------------------------------
Several variants were several full cards stacked down the page, and by the
third one there was no telling where one ended and the next began - nor,
more expensively, which of the fields on screen belonged to the variant and
which to the whole product. Somebody sets a price on „Variant 2“ believing
it is the product's, or hunts for the description inside a variant card.
So: a DARKER SHELL, and the boundary is a thing you can see. Everything
inside it belongs to the one variant whose tab is down; everything above it
- the name, the description, the dealer discount - is the product's. The
strip is also the overview the stack never gave: every variant at once, by
the name the person typing gave it, and a mark on any whose SKU will refuse
to save. Every panel stays in the DOM, hidden rather than unbuilt. */
.vtabs {
background: var(--surface-3); border: 1px solid var(--line-2);
border-radius: var(--radius); padding: .5rem;
}
.vtabs__strip { display: flex; flex-wrap: wrap; gap: .3rem; }
.vtab {
display: inline-flex; align-items: center; gap: .4rem;
max-width: 15rem; padding: .35rem .6rem;
border: 1px solid transparent; border-radius: var(--radius-sm);
font-size: var(--t-sm); font-weight: 600; color: var(--ink-3);
background: transparent; cursor: pointer;
}
.vtab:hover { background: var(--surface-2); color: var(--ink); }
.vtab.is-on {
background: var(--surface); color: var(--brand-ink);
border-color: var(--line); box-shadow: var(--shadow-1);
}
/* the ordinal, so „Variant 2“ in an error message finds its tab */
.vtab__n {
flex: none; min-width: 1.15rem; height: 1.15rem; border-radius: 50%;
display: grid; place-items: center;
font-size: var(--t-xs); font-weight: 700;
background: var(--line); color: var(--ink-2);
}
.vtab.is-on .vtab__n { background: var(--brand); color: #fff; }
.vtab__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtab--bad { color: var(--sale); }
.vtab__bad {
flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%;
display: grid; place-items: center;
background: var(--sale); color: #fff; font-size: var(--t-xs); font-weight: 800;
}
.vtab--add { font-size: var(--t-md); font-weight: 700; padding-inline: .7rem; color: var(--ink-3); }
.vtab--add:hover { color: var(--brand-ink); }
.vtabs__hint {
font-size: var(--t-xs); color: var(--ink-3);
padding: .5rem .25rem .1rem;
}
.vtabs__hint b { color: var(--ink-2); font-weight: 650; }
/* the open panel, raised off the darker shell */
.vpanel { margin-top: .5rem; background: var(--surface); box-shadow: var(--shadow-1); }
.vpanel[hidden] { display: none; }
/* the tab names the variant, so the panel's own heading is for screen readers
only - what is left of the head is the one action it offers, and it takes
no height when there is none (the first variant cannot be removed) */
.vpanel__h { margin-bottom: 0; min-height: 0; }
.vpanel__h:has(button) { margin-bottom: .5rem; }
/* …and the stock fence keeps its contrast against the lighter panel */
.vpanel .vstock { background: var(--surface-2); }
/* stock and its substitutes, fenced off together: „how many are there“ and
„what do we do when there are none“ are one question, and they used to sit
at opposite ends of the variant card */
.vstock {
margin-top: .8rem; padding: .7rem .75rem;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface);
}
.frow { display: grid; gap: .5rem; margin-bottom: .6rem; }
.frow:last-child { margin-bottom: 0; }
.frow--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .frow--2 { grid-template-columns: 1fr; } }
.flabel { font-size: var(--t-xs); color: var(--ink-3); font-weight: 650; display: block; margin-bottom: .2rem; }
.flabel span { color: var(--ink-4); font-weight: 500; text-transform: none; }
textarea.field { min-height: 78px; resize: vertical; font-size: var(--t-sm); }
/* A textarea that is exactly as tall as what is in it (admin.js sizes it on
every keystroke). No drag handle: the height is never wrong, so there is
nothing to drag, and no minimum beyond the two rows it opens at - a short
description should not leave a 78px hole under one line of text. */
textarea.field--grow {
min-height: 0; resize: none; overflow: hidden;
/* the size of the input it replaced, not the smaller one the big
description boxes use - the same words should not shrink */
font-size: var(--t-base);
}
/* --- translation --------------------------------------------------------- */
.trbanner {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: var(--t-sm);
background: var(--warn-wash); color: var(--warn); border: 1px solid currentColor;
}
.trbanner b { color: inherit; }
.trbanner .btn { margin-inline-start: auto; }
.trbanner--ok { background: var(--ok-wash); color: var(--ok); }
.trbadge {
display: inline-flex; align-items: center; gap: .25rem; font-size: 10px;
font-weight: 800; letter-spacing: .04em; padding: .1rem .35rem; border-radius: 4px;
background: var(--warn-wash); color: var(--warn); text-transform: uppercase;
}
/* the Estonian original shown above each English input */
.tr-src {
font-size: var(--t-sm); color: var(--ink-3); background: var(--surface-2);
border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: .45rem .6rem; margin-bottom: .3rem;
max-height: 8.5rem; overflow-y: auto; overscroll-behavior: contain; white-space: pre-wrap;
}
.tr-src:empty::after { content: '—'; color: var(--ink-4); }
/* --- small html editor --------------------------------------------------- */
.ed { border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.ed__bar {
display: flex; gap: .15rem; align-items: center; flex-wrap: wrap;
padding: .3rem; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.ed__bar button {
min-width: 28px; height: 26px; padding: 0 .4rem; border-radius: 4px;
font-size: var(--t-xs); font-weight: 700; color: var(--ink-2);
}
.ed__bar button:hover { background: var(--surface); color: var(--brand-ink); }
.ed__bar .sp { margin-inline-start: auto; }
.ed textarea {
width: 100%; border: 0; padding: .6rem .7rem; resize: vertical;
font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
background: var(--surface); color: var(--ink); display: block;
}
.ed textarea:focus-visible { outline: none; }
.ed textarea[hidden] { display: none; }
/* --- rich text surface --------------------------------------------------- */
.ed__rich {
min-height: 9rem; max-height: 26rem; overflow-y: auto; overscroll-behavior: contain;
padding: .7rem .8rem; background: var(--surface); color: var(--ink);
font-size: var(--t-sm); line-height: 1.6;
}
.ed--small .ed__rich { min-height: 4.5rem; }
.ed__rich:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.ed__rich:empty::before {
content: attr(data-placeholder); color: var(--ink-4);
}
.ed__rich ul, .ed__rich ol { padding-left: 1.2rem; margin: .4rem 0; }
.ed__rich li { margin: .12rem 0; }
.ed__rich li::marker { color: var(--brand); }
.ed__rich h3, .ed__rich h4 { font-size: var(--t-md); margin: .5rem 0 .3rem; }
.ed__rich a { color: var(--brand-ink); }
.ed__rich .desc-head { font-weight: 600; color: var(--ink); }
.ed__rich .desc-head i { color: var(--ink-3); font-weight: 400; }
.ed__bar button[data-src][aria-pressed="true"] { background: var(--brand); color: #fff; }
/* the caret's current formatting, reflected on the toolbar */
.ed__bar button[data-cmd][aria-pressed="true"] {
background: var(--brand-wash); color: var(--brand-ink);
box-shadow: inset 0 0 0 1px var(--brand-line);
}
/* The description editor is a sheet like the rest; all it needs of its own is
for the editor to fill the window instead of sitting at its natural height,
which is why this body is told to be exactly as tall as the sheet allows. */
/* every panel is this height now (see dialog.sheet), so --fill has nothing
left to say about it */
.edfull__body { padding: .75rem; background: var(--surface-2); display: block; }
.edfull__body .ed { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.edfull__body .ed__rich { max-height: none; height: 100%; font-size: var(--t-base); }
.edfull__body .ed textarea { height: 100%; }
/* --- sister products ----------------------------------------------------- */
.sister {
display: grid; gap: .5rem; padding: .6rem; border-radius: var(--radius-sm);
background: var(--surface); border: 1px solid var(--line); margin-bottom: .4rem;
}
.sister__head { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); }
.sister__head b { color: var(--ink); }
.sister__head button { margin-inline-start: auto; color: var(--sale); font-size: var(--t-xs); font-weight: 650; }
.sister__why {
font-size: var(--t-xs); color: var(--ink-3); background: var(--surface-2);
border-radius: 4px; padding: .4rem .55rem; line-height: 1.5;
}
.sister__why b { color: var(--ink); }
/* parts of a sister combination */
.parts { display: grid; gap: .25rem; margin-top: .15rem; }
.parts__row {
display: grid; grid-template-columns: auto minmax(0,1fr) 62px 26px;
gap: .45rem; align-items: center;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: .25rem .3rem .25rem .5rem;
font-size: var(--t-xs);
}
.parts__row b { font-family: var(--mono); font-size: 10.5px; color: var(--ink); }
.parts__row > span { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parts__row input { height: 26px; padding: 0 .3rem; text-align: center; font-size: var(--t-xs); }
.parts__row button { color: var(--ink-4); font-size: 15px; line-height: 1; }
.parts__row button:hover { color: var(--sale); }
/* inherited / invalid field states */
.field[data-inherited="true"] {
background: var(--surface-2); color: var(--ink-3); cursor: not-allowed;
}
.field.is-bad { border-color: var(--sale); background: var(--sale-wash); }
.fhint { font-size: var(--t-xs); color: var(--ink-4); margin-top: .2rem; display: block; }
.fhint--bad { color: var(--sale); font-weight: 600; }
/* live price preview */
.preview {
background: var(--surface-2); border: 1px dashed var(--line-2);
border-radius: var(--radius-sm); padding: .6rem .75rem; font-size: var(--t-sm);
display: grid; gap: .25rem; margin-top: .6rem;
}
.preview b { color: var(--ink); font-variant-numeric: tabular-nums; }
.preview s { color: var(--ink-4); }
.preview__row { display: flex; gap: .5rem; align-items: baseline; }
.preview__row span:first-child { color: var(--ink-3); min-width: 8.5rem; }
/* uploads */
.drop {
border: 1.5px dashed var(--line-2); border-radius: var(--radius);
padding: 1rem; text-align: center; background: var(--surface-2);
}
.drop.is-over { border-color: var(--brand); background: var(--brand-wash); }
.drop p { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: .5rem; }
.drop__actions { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
/* one image field: add, star the main one, edit alt text, remove */
.imggrid {
display: grid; gap: .5rem; margin-top: .6rem;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.imgcard {
position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface-2);
}
/* Order is the model: the first card is the main picture, the next two are
the extras on the PDF sheet. The cards say which is which, because the only
other clue is their position. */
.imgcard--main { border-color: var(--brand); border-width: 2px; }
.imgcard--pdf { border-color: var(--brand-line); border-width: 2px; }
.imgcard[draggable="true"] { cursor: grab; }
.imgcard.is-drag { opacity: .4; }
.imgcard.is-over { outline: 2px dashed var(--brand); outline-offset: -2px; }
.imgcard img { width: 100%; height: 100%; object-fit: contain; }
.imgcard figcaption {
position: absolute; top: 0; left: 0; right: 0; text-align: center;
background: var(--brand); color: #fff; font-size: 9px; font-weight: 800;
letter-spacing: .05em; padding: 1px;
}
.imgcard .cap--pdf { background: var(--brand-wash); color: var(--brand-ink);
border-bottom: 1px solid var(--brand-line); }
.imgcard__bar {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; justify-content: center; gap: 1px; padding: 2px;
background: linear-gradient(transparent, rgb(0 0 0 / .55));
}
.imgcard__bar button {
width: 24px; height: 22px; border-radius: 4px; color: #fff;
display: grid; place-items: center; font-size: 13px; line-height: 1;
}
.imgcard__bar button:hover { background: rgb(255 255 255 / .25); }
.imgcard__bar button[disabled] { color: var(--brand); opacity: 1; pointer-events: none; }
.imgcard__bar .has-alt { color: #7ee2a0; }
.filelist { list-style: none; padding: 0; display: grid; gap: .35rem; margin-top: .5rem; }
.filelist li {
display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm);
border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .45rem .6rem;
background: var(--surface);
}
.filelist svg { color: var(--sale); flex: none; }
.filelist .x { margin-inline-start: auto; color: var(--ink-4); }
.filelist .x:hover { color: var(--sale); }
/* document / video rows in the editor */
.filelist li.doc { display: grid; gap: .35rem; align-items: stretch; }
.doc__top { display: flex; align-items: center; gap: .5rem; }
.doc__top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc__top select { width: auto; height: 26px; padding: 0 .4rem; font-size: var(--t-xs);
margin-inline-start: auto; }
.doc__top .icon-btn { width: 26px; height: 26px; }
.doc__desc {
text-align: left; font-size: var(--t-xs); color: var(--ink-2);
border: 1px dashed var(--line-2); border-radius: 4px; padding: .3rem .45rem; width: 100%;
}
.doc__desc:hover { border-color: var(--brand); color: var(--brand-ink); }
.doc__desc.is-empty { color: var(--ink-4); }
.vidkind {
flex: none; font-size: 10px; font-weight: 800; letter-spacing: .04em;
background: var(--brand-wash); color: var(--brand-ink);
border-radius: 4px; padding: .1rem .35rem;
}
.parts__row--rel { grid-template-columns: auto minmax(0,1fr) auto 26px; }
.relchk {
display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-xs);
font-weight: 650; color: var(--ink-3); white-space: nowrap;
}
.relchk .tag__box { width: 15px; height: 15px; }
.relchk[aria-pressed="true"] { color: var(--warn); }
.relchk[aria-pressed="true"] .tag__box { background: var(--warn); border-color: var(--warn); color: #1b1400; }
/* tag picker */
.tagpick { display: flex; flex-wrap: wrap; gap: .3rem; }
.tagpick__chip {
display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem;
border-radius: 999px; background: var(--brand-wash); border: 1px solid var(--brand-line);
color: var(--brand-ink); font-size: var(--t-xs); font-weight: 650;
}
.tagpick__chip button { color: inherit; opacity: .6; display: grid; place-items: center; }
.tagpick__chip button:hover { opacity: 1; }
.tagpick__add {
border: 1px dashed var(--line-2); border-radius: 999px; padding: .2rem .6rem;
font-size: var(--t-xs); font-weight: 650; color: var(--ink-3);
}
.tagpick__add:hover { border-color: var(--brand); color: var(--brand-ink); }
.tagpick__group { margin-bottom: .7rem; }
.tagpick__group:last-child { margin-bottom: 0; }
/* --- catalogue membership (only rendered when there are two or more) ------ */
/* the "add an existing product" rows add on click, so they get a plus rather
than a tick box - there is no selection to confirm */
.picker__plus {
display: grid; place-items: center; width: 16px; height: 16px;
border-radius: 50%; background: var(--brand-wash); color: var(--brand-ink);
}
.picker__opt--add:hover .picker__plus { background: var(--brand); color: #fff; }
/* a picked product from another catalogue says so - cross-catalogue cross-sell
is intended, but it should never be a surprise */
.othercat {
font-size: var(--t-xs); font-weight: 650; color: var(--brand-ink);
background: var(--brand-wash); border-radius: 999px; padding: .05rem .4rem;
}
.adminbar__cat { display: inline-flex; align-items: center; gap: .35rem; }
.adminbar__cat .field { width: auto; padding: .28rem .5rem; font-size: var(--t-sm); }
.catrow {
display: flex; align-items: flex-start; gap: .55rem; padding: .45rem .1rem;
border-top: 1px solid var(--line); cursor: pointer;
}
.catrow:first-of-type { border-top: 0; }
.catrow input { margin-top: .15rem; accent-color: var(--brand); }
.catrow span { display: block; font-size: var(--t-sm); }
.catrow .fhint { display: block; }
/* one block of tag groups per catalogue the product is listed in, so it is
never ambiguous which catalogue a tag is being added to */
.catblock { border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: .6rem .65rem; margin-bottom: .6rem; }
.catblock:last-child { margin-bottom: 0; }
.catblock--here { border-color: var(--brand-line); background: var(--brand-wash); }
/* the hint after the name can be a full sentence: it wraps, it does not push
the drawer sideways */
.catblock__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem;
margin-bottom: .5rem; }
.catblock__head b { font-size: var(--t-sm); }
.catblock__head .fhint { min-width: 0; }
.picker { display: grid; gap: .4rem; max-height: 46dvh; overflow-y: auto;
overscroll-behavior: contain; }
.picker__opt {
display: grid; grid-template-columns: 16px 1fr auto; gap: .5rem; align-items: center;
padding: .38rem .5rem; border-radius: var(--radius-sm); text-align: left; width: 100%;
font-size: var(--t-sm); color: var(--ink-2);
}
.picker__opt:hover { background: var(--surface-2); }
.picker__opt[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.picker__opt[aria-pressed="true"] .tag__box { background: var(--brand); border-color: var(--brand); color: #fff; }
/* --- tag manager --------------------------------------------------------- */
.tm { display: grid; gap: .6rem; }
.tm__hint { font-size: var(--t-sm); color: var(--ink-3); }
.tmg {
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface-2); overflow: hidden;
}
.tmg.is-drag { opacity: .45; }
.tmg.is-over { outline: 2px dashed var(--brand); outline-offset: -2px; }
.tmg__head {
display: grid; grid-template-columns: 22px minmax(0,1fr) auto auto;
gap: .4rem; align-items: center; padding: .5rem .6rem;
background: var(--surface); border-bottom: 1px solid var(--line);
}
.tmg__head b { color: var(--ink); font-size: var(--t-base); }
.tmg__head .tag__n { font-weight: 500; }
.tmg__body { padding: .35rem .6rem .5rem; display: grid; gap: .2rem; }
.tmt {
display: grid; grid-template-columns: 22px minmax(0,1fr) auto auto auto auto;
gap: .4rem; align-items: center;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: .3rem .45rem; font-size: var(--t-sm);
}
.tmt.is-drag { opacity: .45; }
.tmt.is-over { outline: 2px dashed var(--brand); outline-offset: -2px; }
.tmt__names { min-width: 0; }
.tmt__et { color: var(--ink); font-weight: 600; display: block;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmt__en { color: var(--ink-3); font-size: var(--t-xs); display: block;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmt__en--missing { color: var(--warn); font-weight: 700; }
.grip {
cursor: grab; color: var(--ink-4); display: grid; place-items: center;
width: 22px; height: 26px; touch-action: none;
}
.grip:active { cursor: grabbing; }
.tm .icon-btn { width: 26px; height: 26px; }
.tm__move { display: inline-flex; gap: 1px; }
.tm__move button {
width: 22px; height: 26px; border: 1px solid var(--line); background: var(--surface);
color: var(--ink-3); font-size: 10px; line-height: 1;
}
.tm__move button:first-child { border-radius: 4px 0 0 4px; }
.tm__move button:last-child { border-radius: 0 4px 4px 0; }
.tm__move button:hover { color: var(--brand-ink); border-color: var(--brand); }
.tm__move button[disabled] { opacity: .3; pointer-events: none; }
.tmform {
display: grid; grid-template-columns: 1fr 1fr auto auto; gap: .35rem;
align-items: end; padding: .45rem; margin-top: .3rem;
background: var(--brand-wash); border: 1px dashed var(--brand-line);
border-radius: var(--radius-sm);
}
@media (max-width: 620px) { .tmform { grid-template-columns: 1fr 1fr; } }
.tmform .field { height: 32px; padding: 0 .5rem; font-size: var(--t-sm); }
/* --- price calculator ---------------------------------------------------- */
.calcrules { display: grid; gap: .4rem; }
.calcrule {
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface); padding: .5rem .6rem;
}
.calcrule__top { display: flex; align-items: center; gap: .5rem; }
.calcrule__top b { color: var(--ink); font-size: var(--t-sm); }
.calcrule__top .icon-btn { width: 24px; height: 24px; }
.calcres { margin-inline-start: auto; font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.calcerr { margin-inline-start: auto; font-size: var(--t-xs); color: var(--sale); font-weight: 600; }
.calcrule__f {
display: block; margin-top: .3rem; font-family: var(--mono); font-size: 10.5px;
color: var(--ink-3); background: var(--surface-2);
border-radius: 4px; padding: .25rem .4rem; overflow-x: auto; white-space: nowrap;
}
.calcvars { display: grid; gap: .3rem; }
.calcvar {
display: grid; grid-template-columns: minmax(0,150px) 100px minmax(0,1fr) 24px;
gap: .45rem; align-items: center; font-size: var(--t-xs);
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: .25rem .4rem;
}
.calcvar b { font-family: var(--mono); font-size: 11px; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; }
.calcvar input { height: 26px; padding: 0 .35rem; font-size: var(--t-xs); text-align: right; }
.calcvar > span { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calcvar button { color: var(--ink-4); font-size: 15px; }
.calcvar button:hover { color: var(--sale); }
@media (max-width: 620px) {
.calcvar { grid-template-columns: minmax(0,1fr) 90px 24px; }
.calcvar > span { display: none; }
}
/* dialog.modal and its panel lived here: the one-product enquiry dialog's
frame. That dialog became the basket page (paring.html) and nothing has
worn the class since, so the frame went with it rather than sitting here
as a thing the next person has to work out is unused. */
.diff { font-size: var(--t-sm); display: grid; gap: .3rem; }
.diff__row { display: grid; grid-template-columns: 84px 1fr; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.diff__tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .35rem; border-radius: 4px; text-align: center; height: fit-content; }
.diff__tag--new { background: var(--ok-wash); color: var(--ok); }
.diff__tag--upd { background: var(--warn-wash); color: var(--warn); }
.diff__tag--del { background: var(--sale-wash); color: var(--sale); }
.stat-row { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: .5rem 0 .9rem; }
.stat-row div b { display: block; font-size: var(--t-lg); color: var(--ink); line-height: 1.1; }
.stat-row div span { font-size: var(--t-xs); color: var(--ink-3); }
/* The toast is a popover (see admin.js), which puts it in the top layer -
above a modal dialog's backdrop, where every z-index in this file is not.
The UA stylesheet gives a popover `inset: 0; margin: auto; border; padding`,
so those are all overridden here rather than fought with. */
.toast, .toast:popover-open {
position: fixed; inset: auto; left: 50%; translate: -50% 0; bottom: 1.25rem;
z-index: 300; margin: 0; border: 0; overflow: visible;
background: var(--ink); color: var(--bg); padding: .6rem 1.1rem; border-radius: 999px;
font-size: var(--t-sm); font-weight: 600; box-shadow: var(--shadow-3);
width: max-content; max-width: min(92vw, 40rem);
}
.toast::backdrop { background: transparent; }
/* ==========================================================================
ROLE SWITCHER (prototype only - not shipped)
========================================================================== */
.rolebar {
background: repeating-linear-gradient(45deg, #1F2937, #1F2937 10px, #263243 10px, #263243 20px);
color: #E5E7EB; font-size: var(--t-xs);
/* Hidden until a script says otherwise. The bar is in the MARKUP of three
pages, and DERIVE.adaptChrome() is what removes it for a customer on the
served site - which is only safe if that call is reached. A blocked
localStorage used to throw before it, and the customer was left looking
at „VAADE · Klient / Edasimüüja / Admin". So the default is off, and the
prototype (no session) and a signed-in session each switch it on. */
display: none;
}
.rolebar.is-live { display: block; }
.rolebar__inner { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding-block: .45rem; }
.rolebar__hint { opacity: .75; }
@media (max-width: 860px) { .rolebar__hint { display: none; } }
.rolebar b { color: #fff; }
.rolebar__tag {
background: #F59E0B; color: #111; font-weight: 800; padding: .1rem .4rem;
border-radius: 4px; letter-spacing: .04em; font-size: 10px;
}
.roles { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid #4B5563; }
.roles button { padding: .22rem .7rem; color: #D1D5DB; font-weight: 600; }
.roles button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.rolebar a { color: #93C5FD; }
/* The switch line - what THIS view does not have, on a row of its own under
the switcher. derive.js fills it, and only an admin session is sent the
states it reads, so nobody else can see one. */
.rolebar__flags {
flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .1rem .5rem;
border-top: 1px solid #3C4757; padding-top: .4rem; color: #FCD34D;
}
.rolebar__flags[hidden] { display: none; } /* display:flex outranks [hidden] */
.rolebar__where { color: #9CA3AF; }
/* ==========================================================================
PRODUCT PAGE
========================================================================== */
.crumbs {
display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
font-size: var(--t-xs); color: var(--ink-4); padding-block: 1rem .25rem;
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand-ink); text-decoration: underline; }
/* the tag levels are filled in as a group; contents lets each crumb inside it
take part in the flex row, so the separators get the same gap as the rest */
#crumbTags { display: contents; }
/* four crumbs is a long line on a phone: the row wraps, and the product name
- the one item that can be arbitrarily long - breaks rather than pushing
the page sideways */
#crumbName { min-width: 0; overflow-wrap: anywhere; }
/* Crumbs left, pager right, one line at the top of the page. The pager never
shrinks - it is three fixed controls; the crumbs give way and wrap, which
they already do. */
.crumbrow { display: flex; align-items: flex-start; gap: 1rem; }
.crumbrow .crumbs { flex: 1 1 auto; min-width: 0; }
/* The pager: previous / back to the list / next, for walking the filtered
catalogue without returning to it between products. Deliberately small and
quiet - it is a way THROUGH the page, not part of the product - and it is
never printed (see the print block below). */
.pager {
flex: 0 0 auto; display: flex; align-items: center; gap: .3rem;
padding-block: 1rem .25rem;
}
.pager__at {
font-size: var(--t-xs); color: var(--ink-4); white-space: nowrap;
font-variant-numeric: tabular-nums; margin-inline-end: .15rem;
}
.pager__btn {
display: inline-flex; align-items: center; gap: .3rem;
min-height: 28px; padding-inline: .45rem;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface); color: var(--ink-2);
font-size: var(--t-xs); font-weight: 600; text-decoration: none;
white-space: nowrap;
}
.pager__btn:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-wash); }
.pager__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* an end of the list stays in place and stops responding, rather than
vanishing and sliding the other two under the cursor */
.pager__btn.is-off { opacity: .35; cursor: default; }
/* On a phone the three controls stay; the one word does not. */
@media (max-width: 640px) {
.pager__lbl { display: none; }
.pager__at { font-size: 11px; }
}
.pdp {
display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: start; padding-block: 1rem 3rem;
}
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.gal { position: sticky; top: 78px; display: grid; gap: .5rem; }
@media (max-width: 900px) { .gal { position: static; } }
.gal__main {
aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; background: var(--surface); position: relative; width: 100%;
}
.gal__main img { width: 100%; height: 100%; object-fit: contain; }
.gal__main button { position: absolute; inset: 0; width: 100%; cursor: zoom-in; }
.gal__hint {
position: absolute; right: .5rem; bottom: .5rem;
background: color-mix(in srgb, var(--ink) 76%, transparent); color: #fff;
border-radius: 999px; padding: .22rem .6rem; font-size: var(--t-xs); font-weight: 600;
pointer-events: none;
}
.gal__thumbs { display: flex; flex-wrap: wrap; gap: .4rem; }
.gal__thumbs button {
width: 68px; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden;
border: 2px solid var(--line); background: var(--surface);
}
.gal__thumbs button[aria-current="true"] { border-color: var(--brand); }
.gal__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pdp__head h1 { font-size: var(--t-2xl); letter-spacing: -.02em; margin-bottom: .35rem; }
/* same rule the catalogue rows carry under the product name */
.pdp__rule { border: 0; border-top: 1.5px solid color-mix(in srgb, var(--brand) 55%, transparent);
margin: .45rem 0 .55rem; width: 100%; }
/* the product's tags, in tag-manager order, each a link into that filter */
.pdp__tags { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: 1.1rem; }
.pdp__tags .rowtag { text-decoration: none; }
.buybox {
position: relative;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface); padding: 1rem; margin-bottom: 1.25rem;
}
/* which prices these are, said on the box rather than only in the role bar */
.tradebadge {
position: absolute; top: .55rem; right: .6rem;
font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em;
color: var(--brand-ink); background: var(--brand-wash);
border: 1px solid var(--brand-line); border-radius: 999px;
padding: .12rem .55rem;
}
.tradebadge[hidden] { display: none; }
.buybox h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: .6rem; }
.buybox .opt { border: 1px solid var(--line); margin-bottom: .35rem; }
.buybox .opt[aria-checked="true"] { border-color: var(--brand); }
.price-now { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .9rem 0 .2rem; }
.price-now b { font-size: var(--t-2xl); color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.price-now b.is-sale { color: var(--sale); }
.price-now s { color: var(--ink-4); font-size: var(--t-md); }
/* Rides on the price it qualifies, never on a line of its own: it is part of
what the number means. Inside the (or the .opt__price) so it shares the
baseline, with its own size and weight so it does not shout. */
.price-note {
font-size: var(--t-xs); font-weight: 500; color: var(--ink-4);
margin-inline-start: .3rem; white-space: nowrap;
}
.price-dealer {
margin-top: .5rem; padding: .5rem .7rem; border-radius: var(--radius-sm);
background: var(--brand-wash); border: 1px solid var(--brand-line);
color: var(--brand-ink); font-size: var(--t-sm); font-weight: 600;
}
.pdp__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.spec { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 1.25rem; }
.spec li {
display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 1rem;
padding: .55rem 0; border-top: 1px solid var(--line); font-size: var(--t-sm);
}
.spec dt, .spec .k { color: var(--ink-3); }
.spec .v { color: var(--ink); font-weight: 550; }
.prose { margin-top: 1.5rem; font-size: var(--t-base); color: var(--ink-2); }
.prose .desc-head { font-size: var(--t-md); color: var(--ink); margin-bottom: .75rem; }
.prose .desc-head i { color: var(--ink-3); font-size: var(--t-sm); }
.prose ul { padding-left: 1.15rem; display: grid; gap: .3rem; }
.prose li::marker { color: var(--brand); }
.prose a { color: var(--brand-ink); }
/* --- videos live in the gallery strip, after the images ------------------ */
.vid__play {
position: absolute; inset: 0; display: grid; place-items: center;
background: rgb(0 0 0 / .22); color: #fff; pointer-events: none;
}
.vid__play svg { filter: drop-shadow(0 2px 8px rgb(0 0 0 / .6)); }
.vid__none { display: grid; place-items: center; height: 100%; color: var(--ink-4); }
.gal__thumbs button.is-vid { position: relative; }
.thumbplay {
position: absolute; inset: 0; display: grid; place-items: center;
background: rgb(0 0 0 / .3); color: #fff; pointer-events: none;
}
.lb__thumbs button.is-vid { position: relative; }
/* lightbox slot holds an image, an iframe or a video element */
.lb__slot { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; }
.lb__slot img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.lb__embed { width: min(1200px, 92vw); aspect-ratio: 16/9; max-height: 100%; }
.lb__embed iframe, .lb__embed video {
width: 100%; height: 100%; border: 0; border-radius: var(--radius-sm); background: #000;
}
.atts { list-style: none; padding: 0; display: grid; gap: .4rem; margin-top: .75rem; }
.att__meta { display: block; font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; margin-top: .1rem; }
.att--admin { border-style: dashed; border-color: var(--brand-line); }
/* --- related products / spare parts tabs --------------------------------- */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs button {
padding: .55rem .9rem; font-weight: 650; font-size: var(--t-base);
color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--brand-ink); border-bottom-color: var(--brand); }
.tabs .tag__n { font-weight: 500; }
.relbar {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
margin-bottom: .75rem; font-size: var(--t-sm); color: var(--ink-3);
}
/* --- the actions, following you down the page ---------------------------- */
.stickyacts {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(8px);
border-top: 1px solid var(--line);
padding: .5rem 0 max(.5rem, env(safe-area-inset-bottom));
}
.stickyacts[hidden] { display: none; }
.stickyacts__in { display: flex; gap: .5rem; align-items: center; }
.stickyacts .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 700px) { .stickyacts .btn { flex: 0 0 auto; } }
/* three labels on a narrow phone: shrink the type rather than wrap or clip */
@media (max-width: 520px) {
.stickyacts .btn { padding-inline: .5rem; font-size: var(--t-xs); }
}
.relrow { position: relative; }
.relrow .row__media { width: 110px; }
.relrow--rec { border-color: var(--warn); border-width: 2px; padding: calc(.75rem - 1px); }
.relpick {
width: 17px; height: 17px; flex: none; border: 1.5px solid var(--line-2);
border-radius: 4px; display: grid; place-items: center; color: transparent;
align-self: center;
}
.relpick[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.ribbon--rec span { background: var(--warn); color: #1b1400; }
.atts a {
display: flex; align-items: center; gap: .6rem; text-decoration: none;
border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: .6rem .75rem; background: var(--surface); color: var(--ink);
font-size: var(--t-sm); font-weight: 550;
}
.atts a:hover { border-color: var(--brand-line); background: var(--brand-wash); color: var(--brand-ink); }
.atts svg { color: var(--sale); flex: none; }
.atts small { margin-inline-start: auto; color: var(--ink-4); font-weight: 500; }
/* --- the note under the gallery, and the public extra info --------------- */
.gal__note { margin-top: .5rem; font-size: var(--t-xs); color: var(--ink-4); }
.xinfo {
margin-top: 1.5rem; border-left: 3px solid var(--brand-line);
background: var(--brand-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: .8rem 1rem;
}
.xinfo h2 { font-size: var(--t-md); margin-bottom: .3rem; }
.xinfo .prose { margin-top: 0; }
/* Printing the product page itself is not the product sheet - that is its own
document at pdf.html, opened by the PDF button. What is left here is only
enough to keep a browser's Ctrl+P from looking broken. */
@media print {
@page { size: A4 portrait; margin: 12mm; }
.gal { position: static; }
.gal__thumbs, .pdp__actions, .crumbrow, .crumbs, .pager,
.stickyacts, #relWrap { display: none !important; }
.pdp { grid-template-columns: 1.05fr 1fr; gap: 8mm; }
.pdp__head h1 { font-size: 16pt; }
.buybox { border: 1px solid #ccc; }
.prose { font-size: 9.5pt; }
}
/* ==========================================================================
HOME
========================================================================== */
/* --- the hero band ---------------------------------------------------------
ONE IMAGE, EDGE TO EDGE, and nothing else with a border on it. The photo
used to sit in a rounded, shadowed card beside a rounded card of text
inside a bordered band - three rectangles arguing about which one you were
meant to look at. Now the band IS the photo, and the page fades into it
from the left with a scrim in the surface colour, so the heading keeps the
ordinary ink colours (and the brand orange in the ) against solid
ground rather than being knocked out in white over grass.
NOT FULL HEIGHT. It is capped by clamp() at a band, not a screen: the car
cards are the point of the front page and they must be visible without
scrolling past a poster to reach them.
THE PHOTO IS NARROWER THAN THE BAND, and pinned right. That is what zooms
it out: `cover` scales an image to fill the box it is given, so a
full-width box on a 4:3 photo enlarges it until only a 40% slice of its
height fits, and the truck arrives cropped and enormous. Given three
quarters of the width it scales down instead - more sky, more ground, a
whole vehicle - and it starts further from the words. Its left edge is
masked away rather than trusted to land under the opaque end of the scrim:
both are percentages of the same band, so they do track each other at
every width, but a seam down the middle of a hero is not a thing to leave
to arithmetic.
The scrim turns VERTICAL below 880px, where the column is too narrow for a
left-hand fade to leave the photo anything: bottom-weighted, so the words
sit on the darkened lower half and the truck keeps the top.
------------------------------------------------------------------------- */
.hero {
position: relative; isolation: isolate; overflow: hidden;
display: grid; align-items: center;
min-height: clamp(340px, 34vw, 500px);
background: var(--surface);
border-bottom: 1px solid var(--line);
padding-block: clamp(2rem, 5vw, 3.5rem);
}
.hero__bg {
position: absolute; inset: 0 0 0 auto; z-index: -2;
width: 70%; height: 100%; object-fit: cover; object-position: 50% 56%;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.hero::after {
content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(100deg,
var(--surface) 0%,
var(--surface) 30%,
color-mix(in srgb, var(--surface) 72%, transparent) 45%,
color-mix(in srgb, var(--surface) 26%, transparent) 64%,
color-mix(in srgb, var(--surface) 6%, transparent) 82%,
transparent 100%);
}
.hero__inner { position: relative; max-width: min(var(--maxw), 100%); }
.hero h1 {
font-size: var(--t-3xl); letter-spacing: -.025em; margin-bottom: 1.1rem;
max-width: 15ch; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--brand-ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero__actions .btn { padding: .7rem 1.25rem; font-size: var(--t-md); }
@media (max-width: 880px) {
.hero {
min-height: clamp(380px, 88vw, 520px); align-items: end;
padding-block: 2rem 1.75rem;
}
/* full width again: there is no room beside the words on a phone, so the
photo takes the whole band and the scrim turns vertical under it */
.hero__bg {
inset: 0; width: 100%; object-position: 56% 42%;
-webkit-mask-image: none; mask-image: none;
}
.hero::after {
background: linear-gradient(180deg,
transparent 0%,
transparent 24%,
color-mix(in srgb, var(--surface) 50%, transparent) 44%,
color-mix(in srgb, var(--surface) 90%, transparent) 62%,
var(--surface) 78%);
}
.hero h1 { max-width: none; }
}
.section { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.section__head { max-width: 62ch; margin-bottom: 1.75rem; }
.section__head h2 { font-size: var(--t-2xl); letter-spacing: -.02em; margin-bottom: .5rem; }
.section__head p { color: var(--ink-3); }
/* --- the car blocks --------------------------------------------------------
One card per make: the photo, the make, and every model generation under
it, each a link straight into that filter. The makes and the models are
read from the catalogue's own model tags - a new generation appears here
the moment its tag exists, and a make with no photo of its own falls
through into "Muud autod" rather than showing an empty frame. */
.carcards {
display: grid; gap: 1.25rem;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
@media (min-width: 1080px) { .carcards { grid-template-columns: repeat(4, 1fr); } }
.carcard {
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); overflow: hidden;
transition: border-color .14s, box-shadow .14s, transform .14s;
}
.carcard:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.carcard__img { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.carcard__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .35s; }
.carcard:hover .carcard__img img { scale: 1.04; }
.carcard__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.carcard__make {
font-size: var(--t-md); letter-spacing: -.015em;
}
.carcard__models { list-style: none; padding: 0; display: grid; gap: .1rem; }
.carcard__models a {
display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
padding: .34rem .45rem; margin-inline: -.45rem; border-radius: var(--radius-sm);
font-size: var(--t-base); font-weight: 550; color: var(--ink-2); text-decoration: none;
}
.carcard__models a:hover { background: var(--brand-wash); color: var(--brand-ink); }
.carcard__models em {
font-style: normal; font-size: var(--t-xs); color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
/* The two cards with no photo: same frame, different weight. They sit under
the makes, side by side, and say what is here and what is on the way. */
.carcards--plain { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 1.25rem; }
@media (min-width: 1080px) { .carcards--plain { grid-template-columns: 1fr 1fr; } }
.carcard--plain { background: var(--surface-2); }
.carcard--plain .carcard__body { padding: 1.25rem 1.35rem 1.35rem; }
.carcard__soon { font-size: var(--t-sm); color: var(--ink-4); }
/* --- the brands ------------------------------------------------------------
Same shape as the makes above: a brand we have written a page about gets a
picture and two sentences, and the rest are a list in one plain card. It
was a strip of ten chips, then ten small cards, and neither could point at
one brand harder than at the other nine (Rein, 06.09.2026).
The section carries a TINT so it reads as a different question - "who makes
this" rather than "what fits my car". Mixed off --ink rather than hard-coded
so it steps AWAY from the page in both themes: 4% black over the light
page, 4% white over the dark one. */
.section--tint {
background: color-mix(in srgb, var(--ink) 4%, var(--bg-2));
border-block: 1px solid var(--line);
}
.brandbands { display: grid; gap: 1.25rem; }
.brandband {
display: grid; grid-template-columns: minmax(0, 1fr);
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); overflow: hidden;
transition: border-color .14s, box-shadow .14s;
}
/* the picture keeps its own column once there is room for one */
@media (min-width: 860px) { .brandband { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.brandband:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
/* Stacked, the picture keeps a shape of its own. Side by side, the TEXT sets
the height and the picture covers whatever that turns out to be - the other
way round left a 16/10 image dictating a band half of which was empty. */
.brandband__img { display: block; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.brandband__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .35s; }
@media (min-width: 860px) {
/* `height: 100%` is not enough on its own: the ![]()
still contributes its
intrinsic 16/9 to the row, so a 675px-wide column asked for 380px of band
and left half the text side empty. Taking the picture out of flow
entirely - absolute inside a relative frame - lets the words decide. */
.brandband__img { aspect-ratio: auto; position: relative; min-height: 250px; }
.brandband__img img { position: absolute; inset: 0; }
}
.brandband:hover .brandband__img img { scale: 1.03; }
.brandband__body {
padding: clamp(1.1rem, 3vw, 1.65rem); display: flex; flex-direction: column; gap: .5rem;
}
.brandband__name { font-size: var(--t-lg); letter-spacing: -.015em; }
.brandband__lede { color: var(--ink-3); font-size: var(--t-sm); line-height: 1.6; }
.brandband__cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .7rem; }
/* The CANOPY is the subject, not the truck (Rein, 06.09.2026). A short wide
crop off a 16/9 photo centres on the doors and cuts the roof off, so the
focal point moves up and slightly right - which is where the canopy sits in
every one of these press shots. */
.brandband__img img { object-position: 56% 10%; }
/* --- one small card per brand ----------------------------------------------
„Muud brändid" as a single list card did not belong there (Rein), so every
brand that has no band of its own gets a card, inline.
The two-letter square is gone (Rein, 08.09.2026) and the card is centred.
It stood in for a logo that never arrived, and at card size „EG" next to
„EGR" was the same word twice. When real logos come they belong ABOVE the
name in this centred column, not beside it. */
.bcards {
display: grid; gap: .7rem; margin-top: 1.25rem;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.bcard {
display: flex; align-items: center; justify-content: center;
padding: .7rem .75rem; text-decoration: none; text-align: center;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color .14s, box-shadow .14s, transform .14s;
}
.bcard:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.bcard__text { display: grid; gap: .05rem; min-width: 0; justify-items: center; }
.bcard__name {
font-size: var(--t-base); font-weight: 650; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcard em {
font-style: normal; font-size: var(--t-xs); color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.brands { display: flex; flex-wrap: wrap; gap: .5rem; }
.brands a {
border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1rem;
font-weight: 650; color: var(--ink-2); text-decoration: none; background: var(--surface);
font-size: var(--t-sm);
}
.brands a:hover { border-color: var(--brand-line); color: var(--brand-ink); background: var(--brand-wash); }
.band {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: clamp(1.5rem, 4vw, 2.5rem);
display: grid; gap: clamp(1.5rem, 4vw, 2.75rem);
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
align-items: start;
}
@media (max-width: 780px) { .band { grid-template-columns: 1fr; } }
.band h2 { font-size: var(--t-xl); margin-bottom: .4rem; }
.band p { color: var(--ink-3); font-size: var(--t-sm); }
.contact-list { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: var(--t-sm); }
.contact-list li { display: flex; gap: .55rem; align-items: flex-start; }
.contact-list svg { color: var(--brand); flex: none; margin-top: .15rem; }
.contact-list a { color: var(--ink-2); text-decoration: none; }
.contact-list a:hover { color: var(--brand-ink); }
/* two addresses, so each one says which it is before it says where */
.contact-list b { display: block; font-size: var(--t-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); }
.contact-list span { color: var(--ink-2); }
/* Visiting is by arrangement - a workshop is not a shop with opening hours,
and someone who drives out to a locked door does not come back. */
.callfirst {
display: flex; gap: .6rem; align-items: flex-start;
margin-top: .9rem; padding: .7rem .85rem;
background: var(--warn-wash); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
border-radius: var(--radius); font-size: var(--t-sm); color: var(--ink-2);
}
.callfirst svg { color: var(--warn); flex: none; margin-top: .1rem; }
/* --- the front page's own enquiry form -------------------------------------
The same endpoint the product pages post to (api/inquiry.php, honeypot and
all), laid out inline instead of in a dialog. With the 'inquiry' switch off
there is no form at all - the mailto buttons stay, which is the honest
fallback for a catalogue-only site. */
.cform { display: grid; gap: .7rem; margin-top: 1.1rem; }
.cform__row { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .cform__row { grid-template-columns: 1fr; } }
.cform__foot { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cform__hint { font-size: var(--t-xs); color: var(--ink-4); }
.cform__err { font-size: var(--t-sm); color: var(--sale); }
.cform__hp { position: absolute; left: -9999px; }
.cform__done {
margin-top: 1.1rem; padding: 1rem 1.15rem; border-radius: var(--radius);
background: var(--ok-wash); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}
.cform__done h3 { font-size: var(--t-md); margin-bottom: .25rem; color: var(--ink); }
.cform__done p { color: var(--ink-2); }
/* ==========================================================================
FOOTER
========================================================================== */
.site-foot {
border-top: 1px solid var(--line); background: var(--surface);
padding-block: 2.5rem 2rem; margin-top: 3rem;
}
.foot-grid {
display: grid; gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.foot-grid h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: .6rem; }
.foot-grid ul { list-style: none; padding: 0; display: grid; gap: .35rem; font-size: var(--t-sm); }
.foot-grid a { color: var(--ink-2); text-decoration: none; }
.foot-grid a:hover { color: var(--brand-ink); text-decoration: underline; }
.foot-base {
margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
font-size: var(--t-xs); color: var(--ink-4);
}
/* ==========================================================================
PRINT
========================================================================== */
@media print {
.site-head, .site-foot, .facets, .toolbar, .rolebar, .facet-fab, .row__cta { display: none !important; }
body { background: #fff; color: #000; font-size: 11pt; }
.row { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
/* No URL spelled out after every link: it doubled the length of the sheet
and a printed address is not a usable one anyway. Links stay links -
a PDF viewer keeps them clickable - and the product sheet carries one
link icon next to the SKU for the way back. */
}
/* Coming back from a product, the row you left from is scrolled to and lit
for a moment - long enough to find it, short enough not to look selected.
Nothing depends on the class; it is removed on a timer. */
.row--returned { animation: rowReturned 1.6s ease-out; }
@keyframes rowReturned {
0%, 45% { box-shadow: 0 0 0 2px var(--brand); }
100% { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) { .row--returned { animation: none; } }
/* shipment-picker mode: the catalogue is the picker - every row keeps
its tags and search hit, and shows exactly one control: the quantity
stepper bound to the shipment being filled */
.rows--shippick .row__cta { display: none; }
/* the admin's incoming-goods line on a catalogue card */
.row__incoming { display: grid; gap: .15rem; border-top: 1px dashed var(--line);
margin-top: .45rem; padding-top: .4rem; font-size: var(--t-xs); color: var(--ink-3); }
.row__incoming b { color: var(--ink-2); }
.row__incoming-title {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--ink-4);
}
/* the columns are their own grid inside the block, so the make-one line below
them stays full width instead of becoming a third column */
.row__incoming--1 { display: grid; gap: .15rem; min-width: 0; }
.row__incoming--2 { display: grid; gap: .15rem .8rem;
grid-template-columns: 1fr 1fr; align-items: start; }
.row__incoming--2 > div { display: grid; gap: .15rem; min-width: 0; }
/* collapsible shipment item table, SKUs copy on click */
.shipitems { margin: .3rem 0; font-size: var(--t-xs); }
.shipitems summary { cursor: pointer; color: var(--ink-3); font-weight: 600; }
.shipitems table { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.shipitems td { padding: .18rem .4rem .18rem 0; border-top: 1px solid var(--line);
vertical-align: top; }
.shipitems .r { text-align: right; white-space: nowrap; color: var(--ink-4); }
.skucopy { font-family: var(--mono); font-size: 11px; background: var(--surface-2);
border: 1px solid var(--line); border-radius: 4px; padding: .05rem .35rem;
cursor: copy; color: var(--ink-2); }
.skucopy:hover { border-color: var(--brand-line); color: var(--ink); }
/* ==========================================================================
LEGAL PAGES - privacy, terms. One column of text, nothing else on it.
========================================================================== */
.doc { max-width: 78ch; padding-block: clamp(2rem, 5vw, 3.5rem); }
.doc h1 { font-size: var(--t-2xl); letter-spacing: -.02em; margin-bottom: .4rem; }
.doc__meta { font-size: var(--t-sm); color: var(--ink-4); margin-bottom: 2rem; }
.doc h2 {
font-size: var(--t-md); margin: 2rem 0 .5rem;
padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.doc p, .doc li { color: var(--ink-2); font-size: var(--t-base); line-height: 1.65; }
.doc p { margin-bottom: .75rem; }
.doc ul, .doc ol { margin: 0 0 .9rem 1.15rem; display: grid; gap: .3rem; }
.doc a { color: var(--brand-ink); }
.doc__note {
margin-top: 2.5rem; padding: .9rem 1.1rem; border-radius: var(--radius);
background: var(--surface-2); border: 1px solid var(--line);
font-size: var(--t-sm); color: var(--ink-3);
}
/* The one thing on a brand page that is not prose: the supplier's own full
catalogue. It is the answer to "is there anything else?" and it is the
reason the page exists, so it gets the brand wash rather than another
paragraph. Brand-coloured and not warn-coloured on purpose - .callfirst
already owns "read this before you drive over". */
.doc__hl {
margin: 1.4rem 0 1.6rem; padding: 1rem 1.15rem;
background: var(--brand-wash); border: 1px solid var(--brand-line);
border-radius: var(--radius); line-height: 1.6;
}
.doc__hl b { color: var(--ink); }
.doc__hl a { font-weight: 650; }
.doc__hl-note { display: inline-block; margin-top: .45rem;
font-size: var(--t-sm); color: var(--ink-3); }
/* ==========================================================================
A BRAND PAGE - brand-rhinoman.html, and whatever follows it
It started as a .doc: one 78ch column of prose with pictures dropped in,
which is right for the privacy policy and wrong for this. "Try to redesign
it to be a little bit wider and a little more columns and webdesign
elements, so it would be kind of nice designed web page not flat article"
(Rein, 06.09.2026). So it is page sections at the site's full width: a head
band, prose beside a facts panel, the ranges as three cards, and two
coloured bands for the things a reader is meant to act on.
Every piece degrades to one column, and all of it is inside the two
[data-doc] articles - so a reader with no JavaScript still gets the whole
Estonian page and a crawler reads it without running anything.
========================================================================== */
.bp-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.bp-head__grid {
display: grid; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center;
padding-block: clamp(1.75rem, 5vw, 3rem);
}
@media (min-width: 900px) {
.bp-head__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.bp-kicker {
font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--brand-ink); margin-bottom: .5rem;
}
.bp-head__text h1 { font-size: var(--t-2xl); letter-spacing: -.02em; margin-bottom: .6rem; }
.bp-lede { color: var(--ink-2); font-size: var(--t-md); line-height: 1.55; max-width: 46ch; }
.bp-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.bp-head__fig { margin: 0; }
.bp-head__fig img {
display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
object-fit: cover; object-position: 56% 22%;
border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.bp-body { padding-block: clamp(1.75rem, 5vw, 3rem); }
.bp-h2 { font-size: var(--t-xl); letter-spacing: -.015em; margin: 2.5rem 0 1rem; }
.bp-intro { color: var(--ink-3); max-width: 68ch; margin-bottom: 1.25rem; }
/* prose beside the numbers, because the numbers are what a reader scans for
and a paragraph is not where they should have to find them */
.bp-split { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
@media (min-width: 900px) {
.bp-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.bp-prose h2 { font-size: var(--t-lg); margin-bottom: .6rem; }
.bp-prose p { color: var(--ink-2); line-height: 1.65; margin-bottom: .8rem; max-width: 62ch; }
/* a list in the prose, not inside a range card's - the supplier's
own spec points, which are a list in the source and read as one here too */
.bp-prose ul {
color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6;
max-width: 62ch; margin-bottom: .8rem;
padding-left: 1.15rem; display: grid; gap: .35rem;
}
.bp-prose li::marker { color: var(--brand); }
.bp-facts {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 1.1rem 1.25rem;
}
.bp-facts h3 {
font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--ink-4); margin-bottom: .6rem;
}
.bp-facts dl { display: grid; gap: 0; margin: 0; }
.bp-facts dl > div {
display: flex; justify-content: space-between; gap: 1rem;
padding: .5rem 0; border-top: 1px solid var(--line);
}
.bp-facts dl > div:first-child { border-top: 0; }
.bp-facts dt { color: var(--ink-3); font-size: var(--t-sm); }
.bp-facts dd { margin: 0; color: var(--ink); font-size: var(--t-sm); font-weight: 650; text-align: right; }
/* the two bands a reader is meant to act on */
.bp-promo, .bp-end {
display: grid; gap: 1rem; align-items: center; margin-top: 2rem;
padding: clamp(1.1rem, 3vw, 1.6rem);
border-radius: var(--radius-lg);
}
@media (min-width: 760px) {
.bp-promo, .bp-end { grid-template-columns: minmax(0, 1fr) auto; }
}
.bp-promo { background: var(--brand-wash); border: 1px solid var(--brand-line); }
.bp-end { background: var(--surface); border: 1px solid var(--line); }
.bp-promo h3, .bp-end h3 { font-size: var(--t-md); margin-bottom: .35rem; }
.bp-promo p, .bp-end p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; max-width: 64ch; }
.bp-promo__note { color: var(--ink-3) !important; margin-top: .4rem; }
/* the three ranges */
.bp-ranges {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.bp-range {
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); overflow: hidden;
transition: border-color .14s, box-shadow .14s;
}
.bp-range:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
/* the renders are drawn on white, so the frame is white in both themes -
the page's own grey behind them shows as a paler rectangle */
.bp-range__fig { margin: 0; background: #fff; border-bottom: 1px solid var(--line); }
.bp-range__fig img { display: block; width: 100%; height: auto; }
.bp-range__body { padding: .95rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.bp-range__body h3 { font-size: var(--t-md); }
.bp-range__body h3 span {
display: block; font-size: var(--t-xs); font-weight: 550; color: var(--ink-4);
margin-top: .15rem;
}
.bp-range__one { color: var(--ink-3); font-size: var(--t-sm); line-height: 1.55; }
.bp-range__load {
display: flex; flex-direction: column; gap: .1rem;
padding: .55rem .65rem; border-radius: var(--radius-sm);
background: var(--surface-2); border: 1px solid var(--line);
}
.bp-range__load span { font-size: var(--t-xs); color: var(--ink-4); }
.bp-range__load b { font-size: var(--t-sm); color: var(--ink); }
.bp-range details { margin-top: auto; }
.bp-range summary {
cursor: pointer; font-size: var(--t-sm); font-weight: 650; color: var(--brand-ink);
padding: .35rem 0;
}
.bp-range details ul {
margin: .3rem 0 0 1.05rem; padding: 0; display: grid; gap: .25rem;
font-size: var(--t-sm); color: var(--ink-2);
}
.bp-range details li::marker { color: var(--brand); }
.bp-note {
margin-top: 2rem; padding: clamp(1.1rem, 3vw, 1.5rem);
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.bp-note h3 { font-size: var(--t-md); margin-bottom: .4rem; }
.bp-note p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.65; max-width: 78ch; }
.bp-cars {
display: grid; gap: .7rem;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.bp-car {
display: grid; gap: .1rem; padding: .7rem .85rem; text-decoration: none;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color .14s, box-shadow .14s, transform .14s;
}
.bp-car:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.bp-car b { font-size: var(--t-base); color: var(--ink); }
.bp-car span { font-size: var(--t-xs); color: var(--ink-4); }
.bp-allbtn { margin-top: 1.1rem; }
/* ==========================================================================
THE ENQUIRY BASKET - paring.html, and the header button that leads to it
Two columns on a desk (what you collected, who you are), one on a phone,
with the basket first in both: the form is worth filling in only once the
list above it is right.
========================================================================== */
/* the header button is gone: the bar (above) replaced it, because a count
could never answer "did that press do what I meant" */
.toast--cart a { color: var(--bg); text-decoration: underline; margin-inline-start: .5rem; }
.page-h1 { font-size: var(--t-2xl); letter-spacing: -.02em; margin: 1.2rem 0 .3rem; }
.page-lede { color: var(--ink-2); max-width: 62ch; margin-bottom: 1.4rem; }
.enq-grid {
display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
gap: clamp(1rem, 3vw, 2.2rem); align-items: start; padding-bottom: 3rem;
}
@media (max-width: 900px) { .enq-grid { grid-template-columns: 1fr; } }
.enq-lines > .flabel, .enq-form > .flabel { display: block; margin-bottom: .5rem; }
/* --- one collected product ------------------------------------------------- */
.enq-row {
display: grid; align-items: center; gap: .8rem;
grid-template-columns: 84px minmax(0, 1fr) auto auto 28px 28px;
padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.enq-row__media {
width: 84px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm);
overflow: hidden; background: var(--surface-2); border: 1px solid var(--line);
}
.enq-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enq-row__title { color: var(--ink); font-weight: 600; }
.enq-row__title:hover { color: var(--brand-ink); }
.enq-row__sku {
font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); margin-top: .15rem;
}
.enq-row__price { text-align: right; white-space: nowrap; }
.enq-row__price b { display: block; font-size: var(--t-base); }
.enq-row__price b.is-sale { color: var(--sale); }
.enq-row__x {
color: var(--ink-4); font-size: 20px; line-height: 1;
width: 28px; height: 28px; border-radius: var(--radius-sm);
}
.enq-row__x:hover { color: var(--sale); background: var(--sale-wash); }
/* --- the per-line comment --------------------------------------------------
An icon, not a button labelled "Add comment" and not an open text box:
most lines never get one, and four empty fields down a basket read as four
things left undone. It fills in when the line has something on it, which is
the only state worth noticing from across the screen. The field itself
spans the row underneath, where it belongs to one line and not to the
list. */
.enq-row__noteb {
color: var(--ink-4); width: 28px; height: 28px; border-radius: var(--radius-sm);
display: grid; place-items: center; justify-self: center;
}
.enq-row__noteb:hover { color: var(--brand-ink); background: var(--brand-wash); }
.enq-row__noteb.has-note { color: var(--brand-ink); }
.enq-row__noteb.has-note svg { fill: var(--brand-wash); }
.enq-row__note {
grid-column: 1 / -1; display: block; margin-top: -.2rem;
padding-inline-start: calc(84px + .8rem);
}
.enq-row__note[hidden] { display: none; }
.enq-row__note .field { font-size: var(--t-sm); padding-block: .35rem; }
.enq-row--addon .enq-row__note { padding-inline-start: calc(60px + .8rem); }
/* A PRODUCT AND ITS ADD-ONS ARE ONE GROUP, and the group is drawn as one.
The nesting is the whole point of the redesign - it is what tells the desk
"these rails go with THAT canopy", and it survives into the offer and the
order (db/016) - so it has to be legible before anything is read, not
inferred from an indent. Hence a tinted, rail-bordered block rather than
four rows in a row. */
.enq-group { margin-bottom: .8rem; }
.enq-group:last-child { margin-bottom: 0; }
.enq-group > .enq-row { border-bottom: 0; }
.enq-group__addons {
margin-inline-start: 1.5rem; padding: .1rem .7rem .2rem;
border-inline-start: 2px solid var(--brand-line);
background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.enq-group__note {
display: block; padding-top: .35rem; font-size: var(--t-xs);
color: var(--ink-3); font-weight: 600; letter-spacing: .01em;
}
.enq-row--addon {
grid-template-columns: 60px minmax(0, 1fr) auto auto 28px 28px;
border-bottom: 1px dashed var(--line);
padding: .45rem 0;
}
.enq-group__addons .enq-row:last-child { border-bottom: 0; }
.enq-row--addon .enq-row__media { width: 60px; }
.enq-row--addon .enq-row__title { font-weight: 500; font-size: var(--t-sm); }
.enq-row--addon .enq-row__price b { font-size: var(--t-sm); font-weight: 600; }
.enq-row--gone { grid-template-columns: minmax(0, 1fr) 28px; color: var(--ink-3); }
.enq-row--gone b { font-family: var(--mono); font-size: var(--t-sm); }
/* On a phone the row is two lines, and every cell is PLACED. It used to lean
on auto-placement around two grid-column overrides, which was already hard
to read and stopped being predictable the moment the row grew a sixth cell
for the comment icon. */
@media (max-width: 620px) {
.enq-row {
grid-template-columns: 60px minmax(0, 1fr) 28px 28px;
grid-template-areas: "media main note x"
"media qty price price"
"field field field field";
gap: .5rem .6rem; align-items: center;
}
.enq-row__media { width: 60px; grid-area: media; align-self: start; }
.enq-row__main { grid-area: main; }
.enq-row__qty { grid-area: qty; }
.enq-row__price { grid-area: price; text-align: right; }
.enq-row__noteb { grid-area: note; }
.enq-row__x { grid-area: x; }
.enq-row__note { grid-area: field; padding-inline-start: 0; }
.enq-group__addons { margin-inline-start: .6rem; padding-inline: .5rem; }
.enq-row--addon { grid-template-columns: 60px minmax(0, 1fr) 28px 28px; }
.enq-row--addon .enq-row__note { padding-inline-start: 0; }
/* a line whose product has left the catalogue has neither price nor comment */
.enq-row--gone { grid-template-areas: "main x"; }
}
/* --- the totals ------------------------------------------------------------ */
.enq-sum {
margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--radius);
background: var(--surface-2); border: 1px solid var(--line);
}
.enq-sum__badge {
display: inline-block; margin-bottom: .5rem; padding: .1rem .45rem;
border-radius: 4px; background: var(--brand-wash); color: var(--brand-ink);
font-size: var(--t-xs); font-weight: 700; letter-spacing: .03em;
}
.enq-sum__row {
display: flex; justify-content: space-between; align-items: baseline;
gap: 1rem; padding: .3rem 0; color: var(--ink-2); font-size: var(--t-sm);
}
.enq-sum__row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.enq-sum__row small { color: var(--ink-3); font-weight: 400; }
.enq-sum__row--total {
margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--line-2);
font-size: var(--t-base);
}
.enq-sum__row--total b { font-size: var(--t-lg); }
/* "the price will be specified" is a real answer, and it has to read as one
rather than as a missing number - so it is worded and coloured, never 0,00 */
/* Send, and the same list as a document. The second one is not a lesser
Send - it is a different verb - so it sits beside it rather than under it
as an afterthought, and in the quiet style so which of the two is the
point of the page is never in question. The width override is because
.enq-form makes every button full width, which is right when a button is
the only thing on its line and wrong the moment two share one. */
.enq-send { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.enq-form .enq-send .btn { width: auto; flex: 1 1 10rem; margin-top: 0; }
.enq-tbd { color: var(--warn); font-weight: 600; font-size: var(--t-sm); }
/* The delivery line in words, under the totals. Two states, and the one that
matters is the second: no rate on file for this address, so the price is
worked out by hand and travels with the offer. That is not a detail to be
discovered on the quote, so it is said here, in the warning tone. */
.enq-shipnote {
margin-top: .6rem; padding: .5rem .6rem; border-radius: var(--radius-sm);
font-size: var(--t-xs); line-height: 1.45;
color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line);
}
.enq-shipnote--tbd {
color: var(--warn); font-weight: 550;
background: var(--warn-wash);
border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
/* --- the form -------------------------------------------------------------- */
.enq-form {
padding: 1.1rem 1.2rem 1.3rem; border-radius: var(--radius);
border: 1px solid var(--line); background: var(--surface);
box-shadow: var(--shadow-1); position: sticky; top: 1rem;
}
@media (max-width: 900px) { .enq-form { position: static; } }
.enq-form textarea.field { resize: vertical; min-height: 6rem; }
.enq-form .btn { width: 100%; justify-content: center; margin-top: .7rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); color: var(--ink-2); }
.check input { accent-color: var(--brand); width: 1rem; height: 1rem; }
/* a tick box sharing a .frow--2 with a labelled field: sit on the input's own
line rather than on the label above it, and let the box keep its own width */
.check--field { align-items: flex-start; padding-top: 1.55rem; }
.check--field input { flex: none; margin-top: .1rem; }
/* --- which fields matter ----------------------------------------------------
Said on the form rather than learned by having a save refused (Rein,
07.09.2026). The asterisk marks the four the system genuinely will not
accept without - validateImport() already refuses a file missing any of
them - and the muted chip marks what makes a product look finished in the
catalogue rather than half-entered. Both are , so the reason is
one hover away and neither needs a sentence beside it. */
.freq {
color: var(--sale); font-weight: 800; text-decoration: none;
margin-inline-start: .1rem; cursor: help;
}
.frec {
margin-inline-start: .3rem; padding: .02rem .34rem; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--line);
font-size: 10px; font-weight: 600; letter-spacing: .01em;
color: var(--ink-4); text-decoration: none; cursor: help;
text-transform: lowercase; vertical-align: 1px;
}
/* the legend in the fieldset heading, so the asterisk is explained once */
.fs__legend {
float: inline-end; font-size: var(--t-xs); font-weight: 500; color: var(--ink-4);
}
.fs__legend .frec { cursor: default; }
/* the name and its „Soovitatud" tick share a row: the name takes what is
left, the tick takes what it needs */
.frow--name { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.check--feat { padding-bottom: .55rem; white-space: nowrap; }
.enq-empty {
padding: clamp(2rem, 6vw, 4rem) 0 4rem; max-width: 52ch;
}
.enq-empty h2 { font-size: var(--t-xl); margin-bottom: .4rem; }
.enq-empty p { color: var(--ink-2); margin-bottom: 1.2rem; }
/* ==========================================================================
MÜÜGIHALDUS - the sales desk (admin only)
One board, one row per deal, at the stage it has reached. It replaced
three lists that showed the same customer three times; the stage is a
filter chip, never a different screen.
========================================================================== */
.sale-chips { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; }
.sale-chips button {
padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line);
font-size: var(--t-xs); font-weight: 600; color: var(--ink-3);
display: inline-flex; align-items: center; gap: .35rem;
}
.sale-chips button[aria-selected="true"] {
background: var(--brand-wash); border-color: var(--brand-line); color: var(--brand-ink);
}
.sale-chips .tag__n { color: inherit; opacity: .7; }
/* --- the board is a table ---------------------------------------------------
A deal is five facts - stage, whose, where it stands, when, how much - and
they belong in columns, because the whole point of a list is comparing down
it. The detail unfolds under its own row rather than replacing the list. */
.sale-tools {
display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .7rem;
}
.sale-search {
display: flex; align-items: center; gap: .4rem; flex: 1 1 16rem; min-width: 0;
margin-inline-start: auto; color: var(--ink-4);
}
.sale-search .field { height: 30px; font-size: var(--t-sm); }
.sale-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.sale-board { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden; }
.sale-row { background: var(--surface); }
.sale-row.is-open .sale-tr { background: var(--surface-2); }
.sale-tr {
display: grid; width: 100%; text-align: start; align-items: center; gap: .6rem;
grid-template-columns:
92px 104px minmax(0, 1.5fr) 84px minmax(0, 1.4fr) 118px 78px 52px 100px 100px;
padding: .5rem .8rem; font-size: var(--t-sm);
}
.sale-tr:hover { background: var(--surface-2); }
.sale-tr--head {
background: var(--surface-2); border-bottom: 1px solid var(--line);
font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
color: var(--ink-4); font-weight: 700; padding-block: .35rem;
}
.sale-td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sale-td--no { font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; color: var(--ink); }
.sale-tr--head .sale-td--no { font-family: var(--font); font-size: 9.5px; font-weight: 700; }
.sale-td--who b { display: block; color: var(--ink); }
.sale-td--who .fhint { display: block; margin: 0; }
.sale-td--status, .sale-td--when { color: var(--ink-2); }
.sale-td--n, .sale-td--sum, .sale-td--vat { text-align: end; font-variant-numeric: tabular-nums; }
.sale-td--sum { font-weight: 700; color: var(--ink); }
/* every price on this desk is NET, so the gross figure is its own column
rather than a different way of showing the same one */
.sale-td--vat { color: var(--ink-3); }
.sale-td--ship { color: var(--ink-2); }
/* dealer or customer - it decides what the quote should be priced at */
.sale-who {
display: inline-block; padding: .05rem .35rem; border-radius: 4px;
font-size: 10px; font-weight: 700; letter-spacing: .02em;
background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3);
}
.sale-who--dealer { background: #EEF2FF; border-color: #C7D2FE; color: #3730A3; }
[data-theme="dark"] .sale-who--dealer { background: #1E1B4B; border-color: #3730A3; color: #C7D2FE; }
/* A colour per SITUATION, not per word: waiting on us, waiting on them, won,
finished, dead. The eye sorts the board before the reading does. */
.sale-st {
display: inline-block; padding: .08rem .4rem; border-radius: 4px;
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.sale-st--hot { background: #FEE2E2; color: #991B1B; } /* new, on us */
.sale-st--wait { background: #FEF3C7; color: #92400E; } /* on them */
.sale-st--draft { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.sale-st--won { background: #DCFCE7; color: #166534; } /* confirmed */
.sale-st--done { background: #DBEAFE; color: #1E40AF; } /* invoiced, closed */
.sale-st--dead { background: var(--surface-2); color: var(--ink-4); text-decoration: line-through; }
[data-theme="dark"] .sale-st--hot { background: #450A0A; color: #FCA5A5; }
[data-theme="dark"] .sale-st--wait { background: #422006; color: #FCD34D; }
[data-theme="dark"] .sale-st--won { background: #052E16; color: #86EFAC; }
[data-theme="dark"] .sale-st--done { background: #172554; color: #93C5FD; }
.sale-warn { color: var(--warn); font-weight: 700; }
.sale-row__c {
display: inline-block; padding: 0 .3rem; border-radius: 999px;
background: var(--brand-wash); border: 1px solid var(--brand-line);
font-size: 10px; color: var(--brand-ink); font-weight: 700;
}
.sale-none { padding: 1rem; background: var(--surface); }
@media (max-width: 1200px) {
.sale-tr { grid-template-columns: 92px minmax(0, 1.4fr) 84px 118px 100px; row-gap: .2rem; }
.sale-td--no { grid-column: 2; font-size: 10px; }
.sale-td--when, .sale-td--n, .sale-td--ship, .sale-td--vat { display: none; }
}
/* --- the lines, read-only: the same three figures the editor works in ----- */
.sale-line {
display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 38px 76px 42px 76px 82px;
gap: .4rem; align-items: baseline; font-size: var(--t-xs);
padding: .25rem 0; border-bottom: 1px solid var(--line);
}
.sale-line--head {
font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
color: var(--ink-4); font-weight: 700; border-bottom: 1.5px solid var(--line-2);
}
.sale-line__list, .sale-line__disc, .sale-line__unit, .sale-line__sum, .sale-line__qty {
text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sale-line__disc { color: var(--sale); font-weight: 600; }
.sale-line__unit { color: var(--ink); font-weight: 600; }
.sale-line__note { display: block; color: var(--ink-3); font-style: italic; }
/* --- the editor's line: qty, list, discount, final, and a total nobody types */
.sl-head {
display: grid; align-items: center; gap: .5rem;
grid-template-columns: 22px 26px 56px minmax(0, 1fr) auto auto;
padding: 0 .5rem .2rem; font-size: 9.5px; text-transform: uppercase;
letter-spacing: .05em; color: var(--ink-4); font-weight: 700;
}
.sl-head__nums, .sl-row__nums {
display: grid; gap: .3rem; align-items: center;
grid-template-columns: 52px 84px 62px 88px 92px;
}
.sl-head__nums span { text-align: end; }
.sl-head__nums span:first-child { text-align: start; }
.sl-row__nums input { height: 28px; font-size: var(--t-xs); text-align: end; }
.sl-pc { display: flex; align-items: center; gap: .15rem; }
.sl-pc span { color: var(--ink-4); font-size: 10px; }
.sl-row__tot {
text-align: end; font-variant-numeric: tabular-nums; font-weight: 700;
font-size: var(--t-xs); color: var(--ink);
}
/* a price that does not follow from the discount is legitimate - it is what a
special price IS - so it is marked, not flagged as an error */
.sl-row--special .sl-row__tot { color: var(--brand-ink); }
.sl-row--special .sl-row__tot::after {
content: " ★"; font-size: 9px; color: var(--brand); }
/* THE EXPANDED HALF HANGS OFF THE ROW ABOVE IT, and has to look like it.
Three things say so together, because indentation alone was too quiet to
read at a glance: a step to the right, a brand-coloured rail down the left
edge, and a faint tint. The rail is the one that does the work - it starts
at the row's own left edge and runs the height of the detail, so the eye
follows it up to the line it belongs to. */
.sale-row__body {
padding: .1rem .8rem .8rem 2.8rem;
border-top: 1px solid var(--line);
border-inline-start: 3px solid var(--brand);
background: var(--surface-2);
}
.sale-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
gap: 1.2rem; padding-top: .7rem; }
@media (max-width: 820px) { .sale-cols { grid-template-columns: 1fr; } }
.sale-lines { display: grid; gap: .15rem; margin-top: .3rem; }
/* a wrapped SKU is unreadable and throws the row's alignment out, and these
run to 20 characters - so the column takes what it needs and the NAME is
the one that gives way */
.sale-line__sku { white-space: nowrap; }
/* the add-on is indented under the product it was ticked on - the structure
the customer meant, carried from the enquiry through to the order */
.sale-line--addon { padding-inline-start: 1.1rem; border-bottom-style: dashed; color: var(--ink-3); }
.sale-line--addon .sale-line__sku::before { content: "↳ "; color: var(--ink-4); }
.sale-line__sku { font-family: var(--mono); color: var(--ink); }
.sale-line__name { color: var(--ink-2); }
.sale-line--addon .sale-line__sku { color: var(--ink-3); }
.sale-line__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale-line__qty, .sale-line__sum { text-align: end; font-variant-numeric: tabular-nums; }
.sale-msg {
font-size: var(--t-sm); color: var(--ink-2); white-space: pre-wrap;
margin: .2rem 0 .4rem; line-height: 1.5;
}
.sale-acts { display: flex; gap: .4rem; flex-wrap: wrap; align-items: end; margin-top: .8rem; }
.sale-acts__st { display: grid; gap: .15rem; }
.sale-acts__st .field { min-width: 170px; font-size: var(--t-xs); }
.sale-comments { display: grid; gap: .4rem; margin: .3rem 0 .5rem; }
.sale-comment {
padding: .4rem .6rem; border-radius: var(--radius-sm);
background: var(--surface-2); border: 1px solid var(--line);
}
.sale-comment p { font-size: var(--t-sm); color: var(--ink-2); white-space: pre-wrap; margin-top: .15rem; }
.sale-addc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
/* the line editor's indent toggle: one button per row, because "under which
product" is always "the last row that was not itself an add-on" */
.sl-row [data-slindent] { color: var(--ink-4); font-size: 13px; }
.sl-row [data-slindent][aria-pressed="true"] { color: var(--brand-ink); font-weight: 700; }
.sl-row--addon { margin-inline-start: 1.2rem; border-style: dashed; }
/* --- the offer's covering letter, composed before it is sent ------------- */
.sale-compose {
margin-top: .8rem; padding: .8rem; border-radius: var(--radius-sm);
background: var(--brand-wash); border: 1px solid var(--brand-line);
}
.sale-compose textarea.field {
resize: vertical; min-height: 7rem; margin-top: .3rem;
background: var(--surface); font-size: var(--t-sm); line-height: 1.5;
}
.sale-compose__acts { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
/* ==========================================================================
THE STORAGE NOTICE — assets/consent.js
A bar, not a modal. Nothing here needs consent (see the file header), so
nothing here is allowed to hold the page hostage: it sits at the foot,
says what is kept, and goes away when acknowledged.
========================================================================== */
.sbar {
position: fixed; inset-inline: 0; bottom: 0; z-index: 250;
background: var(--surface); border-top: 1px solid var(--line-2);
box-shadow: 0 -2px 12px rgb(23 24 26 / .10);
animation: sbarIn .25s ease-out;
}
/* Out of the way while a dialog is open. A modal