/* ==========================================================================
catalogue.css - the product page's gallery and specification blocks, plus
the placed-order summary strip.
PAGE-SCOPED. Loaded only by the views that set `$pageStyles = ['catalogue']`
before requiring layout/base.php - today catalogue/product.php,
catalogue/category.php, catalogue/index.php, catalogue/search.php and
account/confirmation.php. Everything shared by every page stays in site.css;
what lives here is one screen's worth of layout that the rest of the site
would otherwise download and never apply.
NO NEW DESIGN TOKENS. Every colour, radius, shadow and font below is a
`--nico-*` custom property declared in site.css, so this file cannot drift
the palette. It adds classes, never a second vocabulary.
NO SCRIPT ANYWHERE. The gallery, the strip and the related grid are CSS
only - see the gallery block for how the photograph swap works without one.
========================================================================== */
/* ---------------------------------------------------------------- product hero */
/* Gallery left, buying column right - the reference's `col-md-5` / `col-md-7`
split, expressed as a grid so neither column needs a class of its own.
Stacked below 62em, and the gallery is first in the source, so a phone reads
photograph -> name -> price -> ladder, which is the order a buyer scans in. */
.nico-product-hero {
display: grid;
gap: clamp(1.75rem, 4vw, 3rem);
align-items: start;
grid-template-columns: 1fr;
margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
/* A grid item's automatic minimum size is its CONTENT's minimum, and the buying
column holds the price ladder, whose every cell is `white-space: nowrap`. Left
at `auto` the column refuses to be narrower than that table, the 1fr track
grows to match, and the whole page scrolls sideways on a phone - the ladder's
own `overflow-x` never gets the chance to scroll, because its container was
handed all the width it asked for.
`min-width: 0` is what hands the constraint back to `.nico-table-wrap`. */
.nico-product-hero > * {
min-width: 0;
}
/* And once the ladder really does scroll, what is absolutely positioned inside
it has to resolve against a box on this page rather than against the document.
`.nico-visually-hidden` is `position: absolute`, and the ladder's last column
heading holds one - the label on the add-to-basket column. With no positioned
ancestor it resolves against the initial containing block, which puts a 1px
element at the x it happens to sit at inside a table wider than its own box,
and that alone makes the whole document scroll sideways on a phone.
THE ANCHOR IS THE COLUMN, NOT THE SCROLLING BOX, and that distinction is now
load-bearing for a second reason. `.nico-table-wrap` is `overflow-x: auto`,
and a box with one axis not `visible` computes the OTHER to `auto` too - so it
clips on both axes. An overflow clip does NOT apply to a descendant whose
containing block is an ANCESTOR of the clipping box, so anchoring here instead
is what lets the tailored-price tooltip inside the ladder hang below the
table's bottom edge without being cut in half. Anchored on the wrapper it was
clipped, measured; anchored here it is not.
It still fixes the original problem, because `.nico-buy` is an ordinary
in-flow column: the visually-hidden label resolves against something the width
of the page rather than against the document, which is all that rule ever
needed. */
.nico-product-hero .nico-buy {
position: relative;
}
@media (min-width: 62em) {
.nico-product-hero {
grid-template-columns: 5fr 7fr;
column-gap: clamp(2.5rem, 5vw, 4rem);
}
}
/* ---------------------------------------------------------------- gallery
THE PHOTOGRAPH SWAP IS A SCROLL-SNAP STRIP, not a carousel and not a
`:target` show/hide.
The stage is one horizontally scrolling box holding every photograph at full
width, snapping to each. The thumbnails below are plain `#fragment` links to
the figures inside it, so activating one asks the browser to bring that
figure into view - and the nearest scrollable ancestor it scrolls is the
stage. That is the whole mechanism: no script, no plugin, no state class.
It was chosen over a `:target` swap for one reason. A `:target` stack needs
`:has()` to hide the default slide once another is targeted; without it a
reader who steps back to an earlier photograph sees the later one painted on
top, because a stack of absolutely positioned siblings resolves by document
order. The strip has no such failure mode - it degrades to a plain
scrollable row of images everywhere, and it is swipeable on touch, which a
thumbnail-only swap is not.
Momentum, keyboard scrolling and the scrollbar all come for free. */
/* `nico-photos`, not `nico-gallery`: site.css already owns `.nico-gallery` and
`.nico-gallery__mark` for the homepage's six-tile strip. A second block under
the same name inherits that one's grid columns and dark ground, which is
exactly what it did before this was renamed. */
.nico-photos {
display: grid;
gap: 0.75rem;
}
.nico-photos__stage {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
/* A SQUARE FRAME for a mixed set of aspect ratios. Product photographs are
stored at whatever the camera gave, portrait and near-square both, so the
frame is fixed and the photograph is fitted inside it - see the `contain`
on the image below. A frame that followed the first photograph's own ratio
would resize as the reader scrolled to the second. */
aspect-ratio: 1 / 1;
border: 1px solid var(--nico-border);
border-radius: var(--nico-radius-lg);
/* PAGE-COLOURED FILL (--nico-light, the .nico-section--light this frame sits
on), NOT WHITE - a house standard, not a tidy-up. These frames assume every
product photograph is a CUT-OUT WITH A TRANSPARENT BACKGROUND, which is what
the bakery produces, so the page's own cream shows through the transparent
pixels. White would be the safe choice for a photograph with a
baked-in white background (a JPEG shot on a white sweep); the price of this
choice is that such a photograph now renders as a white rectangle on cream.
That is a reason to RE-CUT that photograph, not to repaint the frame.
The same fill and the same reasoning apply to .nico-product-card__media. */
background-color: var(--nico-light);
/* Keeps the fragment jump from tucking the stage under the sticky header. */
scroll-margin-top: 6rem;
/* The scrollbar is KEPT, thinned rather than hidden. It is the only thing on
the frame that says the photographs continue sideways, and a reader on a
desktop without a thumbnail in reach drags it. Hiding it would leave the
strip looking like a single static image. */
scrollbar-width: thin;
scrollbar-color: var(--nico-border) transparent;
}
.nico-photos__slide {
flex: 0 0 100%;
margin: 0;
scroll-snap-align: center;
scroll-snap-stop: always;
scroll-margin-top: 6rem;
}
/* CONTAIN, NOT COVER. These are catalogue photographs of a product against a
plain ground; cropping one to fill a square would cut the end off a baguette.
The padding keeps the subject off the frame's own border. */
.nico-photos__slide img {
display: block;
width: 100%;
height: 100%;
padding: 1rem;
object-fit: contain;
}
/* One thumbnail per photograph, as an anchor into the strip. Rendered only when
there is more than one - a single thumbnail under a single photograph is a
control that does nothing. */
.nico-photos__thumbs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.nico-photos__thumb {
display: block;
width: 4.5rem;
height: 4.5rem;
padding: 0.25rem;
border: 1px solid var(--nico-border);
border-radius: var(--nico-radius);
background-color: var(--nico-white);
}
.nico-photos__thumb:hover,
.nico-photos__thumb:focus-visible {
border-color: var(--nico-band-accent);
}
.nico-photos__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* ---- the no-photograph tile
THE MAIN STATE, NOT AN EDGE CASE. `product_images` is empty in production, so
this is what a visitor sees on almost every product today. It is drawn as a
deliberate tile - the accent ground the rest of the site uses for a quiet
panel, a wheat mark, and a line saying photography is coming - rather than
left as a broken `![]()
` or an empty box, either of which reads as a fault on
the page instead of as a gap in the catalogue. */
.nico-photos__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.9rem;
aspect-ratio: 1 / 1;
padding: 1.5rem;
border: 1px solid var(--nico-border);
border-radius: var(--nico-radius-lg);
background-color: var(--nico-accent-soft);
text-align: center;
}
/* The wheat mark, as a MASK rather than as inline SVG in the markup.
It appears on the product page's empty tile and on every card's empty tile,
and the two views cannot share a partial - so keeping the drawing here is the
only way it has one definition. A mask rather than a background image because
the tint then comes from `background-color`, which is a `--nico-*` token: the
glyph follows the palette instead of hard-coding a hex inside a data URI.
It is decorative - the product's name is beside it in every case - so the
element carrying it is `aria-hidden` and contributes no text. */
.nico-photos__mark {
display: block;
width: clamp(3rem, 12vw, 4.5rem);
aspect-ratio: 1 / 1;
background-color: var(--nico-accent);
-webkit-mask: var(--nico-wheat-mark) center / contain no-repeat;
mask: var(--nico-wheat-mark) center / contain no-repeat;
}
/* Declared once, used by both tiles. Attributes are single-quoted and only
`<`, `>` are escaped, which is what keeps a data URI readable. */
.nico-photos__empty,
.nico-product-card__media--empty {
--nico-wheat-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V8'/%3E%3Cpath d='M12 8c0-2.5-1.4-4.5-3.5-5C8.5 5.5 9.9 7.5 12 8z'/%3E%3Cpath d='M12 8c0-2.5 1.4-4.5 3.5-5C15.5 5.5 14.1 7.5 12 8z'/%3E%3Cpath d='M12 13c0-2.5-1.4-4.5-3.5-5C8.5 10.5 9.9 12.5 12 13z'/%3E%3Cpath d='M12 13c0-2.5 1.4-4.5 3.5-5C15.5 10.5 14.1 12.5 12 13z'/%3E%3Cpath d='M12 18c0-2.5-1.4-4.5-3.5-5C8.5 15.5 9.9 17.5 12 18z'/%3E%3Cpath d='M12 18c0-2.5 1.4-4.5 3.5-5C15.5 15.5 14.1 17.5 12 18z'/%3E%3C/svg%3E");
}
.nico-photos__empty-note {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nico-ink-muted);
}
/* ---------------------------------------------------------------- buying column */
.nico-buy__kicker {
display: block;
margin-bottom: 0.5rem;
}
/* THE NAME ROW: the product's on the left and, for a product sold in several
versions, the version picker at the right-hand end of the same line. The
names the version being read - "Toast White Sliced" - so the control beside it
is a control over the very words it sits next to. The eyebrow is above this row
on a line of its own, and the lead price below it.
THE HEADING TAKES THE REMAINING WIDTH AND MAY WRAP ITS OWN TEXT; THE PICKER
NEVER SHRINKS. `min-width: 0` is what lets a long name narrow and wrap beside
the control instead of pushing it onto a second line the moment the name
stops fitting on one. The row carries the margin the heading used to carry
under itself, so the space between the heading and the lead price is the one
this page has always had, with the picker beside the name or under it.
`center`, NOT `baseline`. The control is a bordered box and the heading is one
or more lines of display type; aligning their first baselines sits the box
high against a wrapped name. Centring the two is what makes them one row.
THE PICKER DROPS UNDER THE HEADING, ON A LINE OF ITS OWN, WHEN THE ROW IS
40rem (640px) OR NARROWER. Measured, not guessed: the picker is 278px wide
(its cue, the gap and a select no narrower than 8rem) and the heading is 60px
type at its largest. At that size "Toast White" - where a three-word name such
as "Toast White Sliced" wraps - is 305px and the longest word in the catalogue,
"Multigrain", is 262px. Beside the picker "Toast White" needs a row of
305 + 24 + 278 = 607px for the name to take two lines; a 601px row measured
three, and "Multigrain" alone overflows its box under 564px. 640px keeps that
headroom and is the first round figure above it. The smaller type of a narrower
window needs less, so one threshold holds for every size of heading.
THE BREAKPOINT IS ON THE ROW, NOT ON THE VIEWPORT, and that is the reason it is
a container query. The buying column is 7/12 of the shell from 62em up and the
whole shell below it, so one row width turns up at two very different window
widths: 640px of row is a window of about 1340px in the two-column layout and
about 745px when the columns stack. No single media query says both. The heading's
flex-basis is the fallback where container queries are not supported - the picker
then still wraps below the name, at its natural width, from about 542px of row. */
.nico-buy__title {
container-type: inline-size;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1.5rem;
margin-bottom: 0.75rem;
}
.nico-buy__title h1 {
flex: 1 1 15rem;
min-width: 0;
}
/* The picker itself: its visible cue and its select side by side, never shrunk.
IT WEARS THE SITE'S OWN FORM CONTROL. The border, the radius, the white fill,
the body typeface, the 1rem text, the drawn arrow and the focus ring all come
from the `.nico-field select` rules in site.css, which this control is named in -
the same way the buying band's switcher is named there, and for the same reason:
a second answer to what a dropdown on this site looks like is how two of them
come to look like two different widgets. `width` is the ONLY property restated
here, because that rule is written for a field filling a column and this one
shares a line.
THE `hidden` ATTRIBUTE DECIDES WHETHER IT IS SHOWN, and the rule after this one is
what lets it. The picker ships with the attribute and size-picker.js removes it
once the listener is bound, so the hiding survives a stylesheet that never
arrived and a reader who got the CSS but not the script is not shown a dropdown
that goes nowhere. `display: flex` outranks the browser's own `[hidden]` rule,
so it is restated below. */
.nico-size-pick {
display: flex;
flex: none;
align-items: center;
gap: 0.5rem;
}
.nico-size-pick[hidden] {
display: none;
}
/* The cue reads as part of the eyebrow type it echoes, which `.nico-kicker` on the
element itself is what does - letter-spaced small caps in muted ink. Only the
bottom margin that class carries for a stacked heading comes off here, and the
words are kept on one line because they are a label for the box beside them. */
.nico-size-pick__label {
margin-bottom: 0;
white-space: nowrap;
}
.nico-size-pick select {
width: auto;
min-width: 8rem;
/* Shorter than a stacked form field: this sits beside a heading rather than in a
column of labelled inputs, and 1rem text still clears the iOS zoom
threshold. */
padding-block: 0.4rem;
}
@container (max-width: 40rem) {
/* Under the heading the picker takes the whole line rather than the width of its
longest option, so "Catering bag" does not decide the size of every other one. */
.nico-size-pick {
flex: 1 1 100%;
}
.nico-size-pick select {
flex: 1 1 auto;
}
}
/* The lead figure: the one number a trade buyer compares suppliers on, so it is
set at heading weight, with "per piece" beside it on the same line and the same
baseline rather than stacked under it. */
.nico-buy__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.5rem;
margin-bottom: 0.9rem;
}
.nico-buy__price strong {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
}
.nico-buy__price span {
font-size: 0.82rem;
letter-spacing: 0.04em;
color: var(--nico-ink-muted);
}
.nico-buy__desc {
margin-bottom: 1.1rem;
color: var(--nico-ink-muted);
}
/* The at-a-glance list the reference sets beside the price: availability, code,
storage. A definition list rather than Porto's `` of "LABEL: value"
strings, because that is what the pairs are. */
.nico-buy__facts {
display: grid;
gap: 0.35rem;
margin-bottom: 1.4rem;
padding-top: 1.1rem;
border-top: 1px solid var(--nico-border);
font-size: 0.9rem;
}
.nico-buy__facts div {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.nico-buy__facts dt {
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.76rem;
align-self: center;
color: var(--nico-ink-muted);
}
.nico-buy__facts dd {
margin: 0;
color: var(--nico-ink);
}
/* THE VERSION PANE WHILE ANOTHER VERSION LOADS. Choosing a version navigates, and
until that page lands every figure in this pane - the lead price, the facts, the
pack table and its note - still belongs to the version being left. size-picker.js
sets `data-nico-pending` on the pane the moment it navigates, so a load that
stalls cannot be read as the new version's prices: they are faded, they stop
taking clicks, and a spinner sits over them.
THE CHILDREN FADE, NOT THE PANE. `opacity` on an element fades everything inside
it, its own `::after` included, so fading the pane would draw the spinner at the
same strength as the prices it is there to warn about. The pane's direct children
carry the opacity instead, which leaves the pane's `::after` at full strength.
`position: relative` is set only while pending. It is the spinner's anchor and
nothing else wants it: the column's own `position: relative` above is what
anchors the ladder's visually-hidden label and tooltip, and the pane must not
take that job from it. The spinner sits at the top right of the pane, level with
the lead price, rather than in the middle of a pane that can be taller than the
screen; at that edge it covers none of the figures on a phone either.
The ring is drawn with `border` and a transparent right edge, as the filter
spinner in account.css is, and turns on `nico-spin` from site.css. Under
reduced motion it holds still: the faded prices already say the page is busy. */
.nico-buy__version[data-nico-pending] {
position: relative;
cursor: progress;
}
.nico-buy__version[data-nico-pending] > * {
opacity: 0.35;
pointer-events: none;
}
.nico-buy__version[data-nico-pending]::after {
content: '';
position: absolute;
top: 0.15rem;
right: 0;
width: 2rem;
height: 2rem;
border: 3px solid var(--nico-accent);
border-right-color: transparent;
border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
.nico-buy__version[data-nico-pending]::after {
animation: nico-spin 0.6s linear infinite;
}
}
/* ---------------------------------------------------------------- stacked sections
NO TABS, deliberately, where the reference stacks Description / Additional
information / Reviews behind tab controls.
Two reasons, and either alone would settle it. This site exists to be read by
answer engines, and content behind a tab control is content they discount or
skip; and a tab needs a script, which no page in src/Public ships. Plain
sections with real headings cost nothing and are read by everything. */
.nico-product-sections {
margin-top: clamp(2.5rem, 6vw, 4rem);
display: grid;
gap: clamp(2rem, 5vw, 3rem);
}
.nico-product-section > h2 {
margin-bottom: 1rem;
font-size: 1.35rem;
}
.nico-product-section + .nico-product-section {
padding-top: clamp(2rem, 5vw, 3rem);
border-top: 1px solid var(--nico-border);
}
/* The specification table. `.nico-price-table` is the wrong shape for it - that
one right-aligns every column but the first for money, and this holds words. */
.nico-spec-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.nico-spec-table th,
.nico-spec-table td {
padding: 0.7rem 1rem;
text-align: left;
vertical-align: top;
}
.nico-spec-table th {
width: 40%;
font-weight: 600;
color: var(--nico-ink-muted);
}
.nico-spec-table tr + tr th,
.nico-spec-table tr + tr td {
border-top: 1px solid var(--nico-border);
}
/* Related products need NO RULES OF THEIR OWN. They are `.nico-grid` from
site.css holding the real product card, which is the same pair the category
page renders - so the row below a product page is that page's grid, not a
lookalike maintained beside it. The card's own media rules follow. */
/* ---------------------------------------------------------------- card media
The same square frame, the same `contain` fit and the same no-photograph tile
as the product page, at card scale - so a reader who taps a card from the
category grid lands on a page that shows them what they just tapped.
The listing paths hand the card a SINGLE-element list holding the primary
photograph only, so there is one image here and never a strip. */
.nico-product-card__media {
display: block;
aspect-ratio: 1 / 1;
margin-bottom: 1.1rem;
border: 1px solid var(--nico-border);
border-radius: var(--nico-radius);
/* --nico-light, the cream of the .nico-section--light the page content sits
on, and NOT the card's own white behind it, so a transparent cut-out reads
as it does on the product page. Cut-out photographs are the house standard;
an opaque white background will show as a white rectangle - re-cut the
photograph, do not repaint this frame. The full trade-off is written at
.nico-photos__stage. */
background-color: var(--nico-light);
overflow: hidden;
}
.nico-product-card__media img {
display: block;
width: 100%;
height: 100%;
padding: 0.6rem;
object-fit: contain;
}
.nico-product-card__media--empty {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--nico-accent-soft);
}
.nico-product-card__media--empty .nico-photos__mark {
width: 2.75rem;
}
/* ---------------------------------------------------------------- order summary strip
account/confirmation.php. It lives in this file rather than in site.css for
the same reason the gallery does: it is one screen's worth of layout, and the
confirmation page opts into this stylesheet the same way the catalogue pages
do.
The reference's five-cell row - order number, date, email, total, payment
method. Ours carries the four the view is actually given; nothing here is
invented to fill a cell the payload has no value for. */
.nico-order-strip {
display: grid;
gap: 1px;
grid-template-columns: 1fr;
margin-top: 1.5rem;
border: 1px solid var(--nico-border);
border-radius: var(--nico-radius-lg);
background-color: var(--nico-border);
overflow: hidden;
}
@media (min-width: 48em) {
.nico-order-strip {
grid-template-columns: repeat(3, 1fr);
}
/* Two cells rather than three, since the total moved into the money block
below where it can be shown being arrived at. Its own modifier rather than
an auto-fit track list: the cell count here is fixed by what the page has
to say, not by how many happen to fit. */
.nico-order-strip--pair {
grid-template-columns: repeat(2, 1fr);
}
}
/* The line table and the totals, stepped out of the 34rem reading column the
rest of the confirmation sits in.
The reading measure is right for the prose on that page and too narrow for a
five-column money table: it left 504px against a table that wants 616px, and
the column scrolled off the right-hand edge was the LINE TOTAL - the one that
ties to the subtotal printed underneath it.
Negative margins rather than a second `.nico-shell`, so the recap stays one
element inside one container. `min()` is what keeps it safe on a phone: below
the recap's own width the margins go to zero and it simply fills the column,
so nothing is ever pulled wider than the space it has.
THE CARD'S GUTTER IS PART OF THAT SUM. The site sits inside one rounded card
inset from the viewport by `--nico-card-gutter` on each side (see site.css),
so the viewport is wider than anything on the page is allowed to be - and a
recap sized against `100vw` alone would be pulled past the card's edge by
exactly that inset and clipped by it. */
.nico-order-recap {
--nico-recap-width: min(
46rem,
calc(100vw - (2 * var(--nico-card-gutter)) - (2 * var(--nico-gutter)))
);
width: var(--nico-recap-width);
margin-inline: min(0px, calc((100% - var(--nico-recap-width)) / 2));
}
/* The lines table's heading, matched to the money block that follows it so the
two read as one section rather than as a table and an unrelated total. */
.nico-order-lines__heading {
margin-top: 2rem;
font-size: 1.1rem;
}
.nico-order-strip > div {
padding: 1rem 0.75rem;
background-color: var(--nico-white);
text-align: center;
}
.nico-order-strip dt {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--nico-ink-muted);
}
/* `break-word`, NOT `anywhere`. The page sits in the 34rem reading shell, so a
three-cell row leaves each value about 150px - and `anywhere` spends that by
splitting the document number mid-run into "SO/2026/08/001" and "47", which
is the one string on this page a customer reads back to us over WhatsApp.
`break-word` breaks only when a word cannot fit at all. */
.nico-order-strip dd {
margin-top: 0.35rem;
font-size: 0.9rem;
font-weight: 700;
color: var(--nico-ink);
overflow-wrap: break-word;
}
/* The bank details under the payment cell. Tabular so an account number read
off a phone and typed into a banking app cannot be misread digit for digit -
the same reason the order number above it is set that way. */
.nico-order-strip__account {
display: block;
margin-top: 0.2rem;
font-weight: 600;
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.03em;
color: var(--nico-ink-muted);
}
/* Where the order is going. One panel, not a two-column billing/shipping pair:
this business either delivers to one address or hands the order over at one
counter, and the payload names which. */
.nico-order-destination {
margin-top: 2rem;
padding: 1.25rem 1.4rem;
border: 1px solid var(--nico-border);
border-radius: var(--nico-radius-lg);
background-color: var(--nico-white);
}
.nico-order-destination h2 {
font-size: 1.1rem;
}
.nico-order-destination p {
margin-top: 0.5rem;
color: var(--nico-ink-muted);
}