/*
 Theme Name:   Bookarazzi (WoodMart Child)
 Theme URI:    https://bookarazzi.sk
 Description:  Child theme of WoodMart for the Bookarazzi shop. All project-specific
               PHP, styles and template overrides live here — the parent theme is
               never edited, because an update would silently discard those edits.
 Author:       digitalka.sk
 Author URI:   https://digitalka.sk
 Template:     woodmart
 Version:      0.1.0
 Text Domain:  woodmart-child
 Requires PHP: 8.3
*/

/* ===========================================================================
   Static pages — the shared long-form treatment
   ===========================================================================
   WHAT THIS FIXES, MEASURED. Every page the build generates from Markdown rendered at the
   full container: `.entry-content` 1410 px wide at x=15 on a 1440 px viewport, with 18 px
   type. That is about 160 characters a line — three times a comfortable measure, and the
   reason the pages „looked awful" rather than merely plain. The same measurement found `h2`
   at 24 px with `margin-top: 0`, so a section heading sat as close to the paragraph above it
   as to its own text and the pages read as one undivided block.

   SCOPED TO `body.bookarazzi-content-page` (inc/page-classes.php), which sits on the twelve
   pages built from Markdown and on nothing else — NOT on all seventeen the build owns. The
   cart, the checkout, the account page, the shop and the blog are owned only for their title,
   slug and role, and a 612 px text column squeezed the cart from 1410 px to 858. The demo's
   own pages are laid out block by block in the editor and must keep their own look; these
   twelve have no layout but this file.

   THE MEASURE IS IN `rem`, NOT `em`, and that is the whole reason this file states widths
   the way it does. `max-width: 34em` resolves against the ELEMENT's own font size, so the
   same declaration gave the 18 px paragraphs their intended 612 px while every h2 at 2 rem
   got 34 × 36 = 1224 px and the lead 1410 — a text column that looked indented under
   flush-left headings. Measured in the browser, not guessed: the first reading of it blamed
   specificity against the parent theme, and a dump of every rule that sets max-width on
   those elements showed only this file's own. `rem` is root-relative, so one number means
   one width at every size.

   Selectors still start with `body` and each rule carries its own max-width rather than
   inheriting from a `> *` catch-all. That part IS about weight: functions.php records that
   the parent enqueues its generated CSS at priority 10100 against this file's 10010, so a
   later rule of equal specificity would win. It costs nothing to be heavier than needed.

   The brand red is SAMPLED from the delivered photography, not picked: #ab0f19 is the most
   frequent colour of the table in content/banners/bestseller-packshot, and #8c0616 that of
   the wallpaper behind it. On white #ab0f19 measures 7.46 : 1, which clears WCAG AAA for
   body text, so it needs no apology at any size.

   The theme's own --wd-alternative-color is #fbbc34, a demo amber that belongs to nothing in
   this shop; it is deliberately not used. */

/* The client's two typefaces, delivered 2026-09-23 with the note that she holds web licences
   for both (Pangram Pangram; the fonts' own name table points at the Pangram commercial EULA).
   Only the WEB formats are in the theme — woff2, and woff for the few browsers without it.
   The desktop .otf / .ttf from the same ZIPs stay out of the repository and off the server.

     PP Playground Medium  a calligraphic script — the same hand as the bottle labels
     PP Rader Regular      a narrow grotesque; the product motto and the book quotations

   Both carry every Slovak and Czech letter (checked in the cmap: á ä č ď é í ĺ ľ ň ó ô ŕ š ť
   ú ý ž, ě ř ů, and „ “ €). `swap`, so text is never invisible while a face loads; the one on
   the front page's first screen is preloaded by inc/fonts.php so the swap does not show. */
@font-face {
	font-family: "PP Playground";
	src: url("fonts/pp-playground-medium.woff2") format("woff2"),
		url("fonts/pp-playground-medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PP Rader";
	src: url("fonts/pp-rader-regular.woff2") format("woff2"),
		url("fonts/pp-rader-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* THE BASE SIZE, 20 % up from the theme's 18 / 16 px (the client, 2026-09-25). WoodMart prints
   `--wd-text-font-size` in its inline theme-settings CSS on `:root`, and `html` takes its
   font-size from it, so every rem in this file scales with it. `html:root` (0,1,1) outranks
   the theme's `:root` (0,1,0) whatever the order the two stylesheets land in; the breakpoint
   is the theme's own. */
html:root {
	--wd-text-font-size: 22px;
}

@media (max-width: 768.98px) {
	html:root {
		--wd-text-font-size: 19px;
	}
}

/* The project's values, declared once on `body` so both the static pages and the product
   detail read from the same four numbers. Declaring them costs nothing — no rule outside the
   scoped blocks below uses them. */
body {
	/* 748 px at the 22 px root (612 px at the theme's 18 px), about 68 characters either way.
	   Full-container prose here runs to 1410 px — some 160 characters a line, readable only
	   in the sense that the letters are visible. */
	--bookarazzi-measure: 34rem;
	--bookarazzi-wide: 46rem;
	--bookarazzi-red: #ab0f19;
	/* The same red as bare channels, for its translucent uses: rgb(var(--bookarazzi-red-rgb) / 8%).
	   CSS cannot take the alpha of a hex custom property without color-mix(), and color-mix()
	   computes to color(srgb …) where the checks compare rgba(…). verify-base.sh asserts the
	   two stay the same colour. Until 2026-09-23 thirteen places spelled rgb(171 15 25 / …)
	   out by hand, so a change of the brand red would have left every tint behind. */
	--bookarazzi-red-rgb: 171 15 25;
	/* The client's faces, each with a fallback of its own kind: a script falls back to an
	   italic serif, not to Satoshi, so a failed download still reads as the same idea. */
	--bookarazzi-font-script: "PP Playground", "Snell Roundhand", "Apple Chancery", Georgia, serif;
	--bookarazzi-font-narrow: "PP Rader", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--bookarazzi-red-deep: #8c0616;
	--bookarazzi-rule: rgb(0 0 0 / 12%);
	--bookarazzi-rhythm: clamp(2rem, 4vw, 3.25rem);

	/* THE PAGE GUTTER. The theme ships `.container { max-width: 1800px; padding-inline: 15px }`,
	   so measured on /parfumy/: content 1410 px at x=15 on a 1440 px viewport — a margin of
	   ONE PERCENT of the window, and the same 15 px at every width up to 1830 px. On a laptop
	   the shop ran edge to edge.

	   `clamp` and not a fixed value: 16 px on a phone keeps what the theme already had there
	   (15 px), 1440 px gets about 50 px, and it stops growing at 56 px. The cap matters —
	   `3.5vw` unbounded would put 90 px of air on a 2560 px screen on top of the centring the
	   max-width already does.

	   1560 px instead of 1800: at 1920 px and wider the product grid was a 1770 px row, which
	   is 4 columns of 440 px. Narrowing the page is what makes the gutter readable as a margin
	   rather than as leftover space. */
	--bookarazzi-gutter: clamp(1rem, 3.5vw, 3.5rem);
	--bookarazzi-page-max: 1560px;

	/* ⚠️ NOT A DESIGN CHOICE, A TRANSLATION FIX. WoodMart transforms every button through
	   `:is(.btn,.button,button,[type=submit],[type=button]){text-transform:var(--btn-transform)}`
	   and the Perfumes demo sets `--btn-transform: capitalize` on `:root`
	   (#wd-style-theme_settings_default-inline-css). English survives that — "Add To Cart" —
	   and Slovak does not: the button read „Pridať Do Košíka" with capitals mid-sentence,
	   and so did nine other controls on a product page, the cart's „Späť Do Obchodu" among
	   them. The label in the DOM was correct the whole time; only CSS was rewriting it.
	   `none` and not `uppercase`, because in this project the delivered text is the truth.

	   Set on `body` rather than `:root` deliberately: the theme's inline CSS is enqueued at
	   10100 against this file's 10010, so an equally specific `:root` rule here would lose.
	   `body` is a closer ancestor, so the custom property resolves from it and hook priority
	   stops mattering. */
	--btn-transform: none;
}

/* One gutter for the whole shop. `.container` is the theme's own wrapper and it is used by
   the header, the page title, the content and the footer alike — measured on four pages, all
   four at `max-width: 1800px; padding-inline: 15px`. Changing it in one place keeps the logo
   on the same left edge as the content below it, which is the reason not to narrow only
   `main`. */
body .container {
	max-width: var(--bookarazzi-page-max);
	padding-inline: var(--bookarazzi-gutter);
}

body.bookarazzi-content-page {
	/* Smaller than the rhythm O značke takes. That page has five sections and photographs
	   between them; the legal pages have up to fourteen headings and nothing else, and five
	   rem of air above each one turns them into a scroll. */
	--bookarazzi-rhythm: clamp(2rem, 4vw, 3.25rem);
}

/* ---------------------------------------------------------------------------
   One left edge
   ---------------------------------------------------------------------------
   THE PAGE TITLE IS NOT PART OF THE CONTENT and that is what made the first version of this
   file look wrong in a way no single rule was wrong. Measured on /o-znacke/ at 1440 px:
   `h1.entry-title` at x=15, the lead at x=306, the prose at x=414 — three left edges on one
   page, each of them correct on its own. The eye reads the staggered edges as broken layout,
   the same way the four-column grid did before it was cut to 2 x 2.

   So the CONTAINER narrows instead of the text inside it. Both of the theme's containers
   carry `max-width: 1800px` and `padding-inline: 15px` with `box-sizing: border-box`
   (woodmart/css/parts/base.css), so `--bookarazzi-wide + 2 × --bookarazzi-gutter` makes their content box
   exactly `--bookarazzi-wide` — and the title, the breadcrumbs, the prose, the accordion,
   the tables and the photographs all start at the same x. Everything inside is therefore
   `margin-inline: 0`, not `auto`: centring a 612 px column inside an 828 px one would
   reintroduce the second edge this rule exists to remove.

   `.wd-page-title` itself is left full width, because its background is full-bleed on the
   rest of the shop and this must not be the one place it is not. */
body.bookarazzi-content-page .wd-page-title > .container,
body.bookarazzi-content-page main.wd-content-layout {
	max-width: calc(var(--bookarazzi-wide) + 2 * var(--bookarazzi-gutter));
	margin-inline: auto;
}

/* The text column. Tables and the FAQ accordion are deliberately NOT in this list — they
   take the wider measure below, because a three-column table at 612 px wraps every cell. */
body.bookarazzi-content-page .entry-content > p,
body.bookarazzi-content-page .entry-content > h2,
body.bookarazzi-content-page .entry-content > h3,
body.bookarazzi-content-page .entry-content > h4,
body.bookarazzi-content-page .entry-content > ul,
body.bookarazzi-content-page .entry-content > ol,
body.bookarazzi-content-page .entry-content > blockquote {
	max-width: var(--bookarazzi-measure);
	margin-inline: 0;
}

body.bookarazzi-content-page .entry-content > p {
	margin-block: 0 1.35em;
	line-height: 1.75;
}

/* The opening sentence. On every one of these pages the delivery starts with a line that
   introduces the rest — „V tejto sekcii nájdete odpovede…" on the FAQ, the scope sentence on
   the legal pages. It is set slightly larger and given the section rhythm below it, which
   reads as an introduction without claiming more than the text says. `:first-child` and not
   `:first-of-type`, so a page that opens with a heading gets no lead at all. */
body.bookarazzi-content-page .entry-content > p:first-child {
	margin-block-end: var(--bookarazzi-rhythm);
	font-size: 1.125rem;
	line-height: 1.7;
}

body.bookarazzi-content-page .entry-content > h2 {
	margin-block: var(--bookarazzi-rhythm) 0.8em;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	line-height: 1.25;
}

/* A short red rule above each section title: the page's only ornament, and enough on its own
   to make a heading read as the start of something rather than the end of the paragraph
   above it. */
body.bookarazzi-content-page .entry-content > h2::before {
	content: "";
	display: block;
	width: 2.5rem;
	margin-block-end: 0.7em;
	border-block-start: 2px solid var(--bookarazzi-red);
}

body.bookarazzi-content-page .entry-content > h3 {
	margin-block: 2rem 0.6em;
	font-size: clamp(1.125rem, 1.6vw, 1.25rem);
	line-height: 1.35;
}

body.bookarazzi-content-page .entry-content > h4 {
	margin-block: 1.6rem 0.5em;
	font-size: 1.0625rem;
	line-height: 1.4;
}

body.bookarazzi-content-page .entry-content > ul,
body.bookarazzi-content-page .entry-content > ol {
	margin-block: 0 1.35em;
	padding-inline-start: 1.35rem;
}

body.bookarazzi-content-page .entry-content li {
	margin-block: 0.3em;
	line-height: 1.7;
}

body.bookarazzi-content-page .entry-content a {
	color: var(--bookarazzi-red-deep);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------------
   Tables — Cookies, Ochrana osobných údajov
   ---------------------------------------------------------------------------
   `overflow-x: auto` on the figure rather than a smaller font: these tables name cookies and
   retention periods, and a phone that cannot show the third column has to be able to reach
   it. Shrinking the type until it fits would make the column unreadable instead of
   unreachable, which is worse. */
body.bookarazzi-content-page .entry-content > figure.wp-block-table {
	max-width: min(var(--bookarazzi-wide), 100%);
	margin-block: 1.5rem var(--bookarazzi-rhythm);
	margin-inline: 0;
	overflow-x: auto;
}

body.bookarazzi-content-page .entry-content > figure.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

body.bookarazzi-content-page .entry-content > figure.wp-block-table :is(th, td) {
	padding: 0.7em 0.9em;
	border: 0;
	border-block-end: 1px solid var(--bookarazzi-rule);
	line-height: 1.6;
	text-align: start;
	vertical-align: top;
}

body.bookarazzi-content-page .entry-content > figure.wp-block-table thead th {
	border-block-end: 2px solid var(--bookarazzi-red);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

body.bookarazzi-content-page .entry-content > figure.wp-block-table tbody tr:last-child :is(th, td) {
	border-block-end: 0;
}

/* ===========================================================================
   FAQ accordion
   ===========================================================================
   THE ACCORDION WAS ALREADY THERE and already worked: 27 panes, `cursor: pointer`, a plus
   that rotates 45° when open, and the schema.org FAQPage markup. What it had no look was
   `wd-style-simple`, whose only job is to remove ornament — measured `border-bottom:
   0px none`, so the questions rendered as a stack of bare text lines with a faint grey plus
   1400 px away at the far edge of the container. Nothing signalled that a line could be
   opened.

   STYLED HERE RATHER THAN SWITCHED TO `wd-style-shadow`. WoodMart derives that class from
   the block's `design` attribute, so changing the look that way means rewriting the saved
   markup of every pane — and stored block HTML that no longer matches the block's save()
   is invalid in the editor, which is the one failure only the editor reveals. A child
   stylesheet changes the same pixels without touching a single stored block.

   The panes stay closed on load (`allClosed`) and the plus is the affordance; the card is
   what makes the plus look like a control rather than a decoration. */

body.bookarazzi-content-page .entry-content .wd-accordion {
	/* The parent uses this one custom property for the title's padding-block AND the
	   content's padding-bottom, so one value sets the whole vertical comfort of a card. */
	--wd-accordion-spacing: 1.15rem;

	/* `.wd-accordion` ships `--wd-row-gap: 0.001px` — a flex gap of nothing, because the
	   default style separates items with a border instead. Cards need real space. */
	--wd-row-gap: 0.625rem;

	max-width: var(--bookarazzi-measure);
	margin-block: 0 var(--bookarazzi-rhythm);
	margin-inline: 0;
}

body.bookarazzi-content-page .entry-content .wd-accordion > .wd-accordion-item {
	border: 1px solid var(--bookarazzi-rule);
	border-radius: 10px;
	background-color: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.bookarazzi-content-page .entry-content .wd-accordion > .wd-accordion-item:hover {
	border-color: rgb(var(--bookarazzi-red-rgb) / 35%);
}

/* The open card. `:has()` is a progressive nicety and nothing depends on it — the rotated
   plus and the visible answer already say which pane is open, so a browser without it loses
   a red border and no information. */
body.bookarazzi-content-page .entry-content .wd-accordion > .wd-accordion-item:has(> .wd-accordion-title.wd-active) {
	border-color: var(--bookarazzi-red);
	box-shadow: 0 2px 14px rgb(0 0 0 / 6%);
}

body.bookarazzi-content-page .entry-content .wd-accordion-title {
	gap: 1rem;
	padding-inline: 1.25rem;
}

body.bookarazzi-content-page .entry-content .wd-accordion-title-text {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
}

/* The parent turns the question `--wd-primary-color` on hover and when open; that is the
   demo's colour and this shop's is the sampled red. */
body.bookarazzi-content-page .entry-content .wd-accordion-title:is(.wd-active, :hover) > .wd-accordion-title-text {
	color: var(--bookarazzi-red-deep);
}

/* The opener is a woodmart-font glyph at 10 px in --color-gray-300. At the measure it now
   sits beside the question instead of at the far edge of a 1410 px row, so it is worth
   seeing: brand red, and large enough to read as a control. */
body.bookarazzi-content-page .entry-content .wd-accordion-opener {
	flex: 0 0 auto;
	width: 1.25rem;
	color: var(--bookarazzi-red);
	font-size: 13px;
}

/* The answer. `.wd-accordion-content` is `display: none` when closed, so padding on it
   cannot open a gap in a collapsed card. */
body.bookarazzi-content-page .entry-content .wd-accordion-content {
	padding-inline: 1.25rem;
}

body.bookarazzi-content-page .entry-content .wd-accordion-content-inner {
	--wd-row-gap: 0.9rem;

	font-size: 1rem;
	line-height: 1.75;
}

body.bookarazzi-content-page .entry-content .wd-accordion-content-inner :is(ul, ol) {
	margin-block: 0;
	padding-inline-start: 1.35rem;
}

/* A section label binds to the group of cards under it, not to the gap above them. */
body.bookarazzi-page-casto-kladene-otazky .entry-content > h2 {
	margin-block-end: 0.55em;
}

/* ===========================================================================
   O značke — the one page with photography
   ===========================================================================
   Everything above applies here too; these are the pieces the shared treatment has no
   business carrying, because no other page has a pull quote, a photograph or a row of four
   labels. */

body.bookarazzi-page-o-znacke {
	/* Wider air than the legal pages: five sections, photographs between them, and nothing
	   to scroll past. */
	--bookarazzi-rhythm: clamp(2.5rem, 6vw, 5rem);
}

/* The lead. The delivery sets it as one large bold line above everything else — it is the
   brand's sentence, not a section, so it gets its own treatment rather than a heading. */
body.bookarazzi-page-o-znacke .entry-content > p:first-child {
	max-width: var(--bookarazzi-wide);
	margin-block-end: var(--bookarazzi-rhythm);
	padding-block-end: 1.1em;
	border-block-end: 2px solid var(--bookarazzi-red);
	color: var(--bookarazzi-red-deep);
	font-size: clamp(1.5rem, 3.4vw, 2.25rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

body.bookarazzi-page-o-znacke .entry-content > h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
}

/* Photographs are the page's relief, so they are the one thing allowed past the measure —
   but not the full 1410 px either, or the reader loses the column. */
body.bookarazzi-page-o-znacke .entry-content > figure.wp-block-image {
	max-width: min(var(--bookarazzi-wide), 100%);
	margin-block: var(--bookarazzi-rhythm);
	margin-inline: 0;
}

body.bookarazzi-page-o-znacke .entry-content > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* The founder's philosophy. The delivery marks it large, bold and italic; centred and in the
   brand red it reads as the pause it is, and the quotation marks are already in the text.

   It takes the WIDE measure rather than the text column, because its text is centred: at
   612 px its centre falls at x=612 while the photographs and the grid centre at x=720, and
   the one centred thing on the page would be the one thing off-centre. */
body.bookarazzi-page-o-znacke .entry-content > blockquote.wp-block-quote {
	max-width: min(var(--bookarazzi-wide), 100%);
	margin-block: var(--bookarazzi-rhythm);
	padding: 0;
	border: 0;
	color: var(--bookarazzi-red-deep);
	font-size: clamp(1.35rem, 3vw, 1.9rem);
	font-style: italic;
	line-height: 1.35;
	text-align: center;
}

body.bookarazzi-page-o-znacke .entry-content > blockquote.wp-block-quote p {
	max-width: none;
	margin: 0;
}

/* The two groups of four — Esencia Bookarazzi and Bookarazzi je zážitok. A grid rather than
   the theme's flex columns, so the four labels sit on one baseline however long the text
   under them runs, and so the breakpoints are ours rather than the theme's.

   TWO WIDTHS ON THE WHOLE PAGE, and the grid takes the wider one. A first attempt gave it
   1152 px, which is comfortable for four columns but put its left edge at x=144 under a
   heading starting at x=414: both were centred, both were correct, and the pair read as
   broken. Two shared edges beat three centred ones, so the grid is as wide as the
   photographs and lays the four out 2 x 2. */
body.bookarazzi-page-o-znacke .entry-content > .wp-block-columns {
	display: grid;
	max-width: min(var(--bookarazzi-wide), 100%);
	margin-block: 1.5rem var(--bookarazzi-rhythm);
	margin-inline: 0;
	gap: clamp(1.75rem, 4vw, 2.75rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 576px) {
	body.bookarazzi-page-o-znacke .entry-content > .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

body.bookarazzi-page-o-znacke .entry-content .wp-block-column {
	max-width: none;
	padding-block-start: 1rem;
	border-block-start: 2px solid var(--bookarazzi-red);
}

/* BLENDED IN UK · MADE IN FRANCE · … — the delivery writes the first group in capitals and
   the second in sentence case. Letter-spacing suits both and invents neither. */
body.bookarazzi-page-o-znacke .entry-content .wp-block-column h3 {
	max-width: none;
	margin-block: 0 0.6em;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: none;
}

body.bookarazzi-page-o-znacke .entry-content .wp-block-column p {
	max-width: none;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.7;
}

/* The line under the second grid, which points at the FAQ. Addressed by position after the
   grid, not as the last paragraph: since 2026-09-24 the page closes with „Kde sa naše príbehy
   stretávajú“ and the FAQ line sits in the middle. */
body.bookarazzi-page-o-znacke .entry-content > .wp-block-columns + p {
	margin-block-start: var(--bookarazzi-rhythm);
	padding-block-start: 1.1em;
	border-block-start: 1px solid var(--bookarazzi-rule);
}

/* ===========================================================================
   Product detail
   ===========================================================================
   Scoped to `body.single-product`, which is WooCommerce's own body class
   (woocommerce/includes/wc-template-functions.php) and therefore stable across theme
   updates — not a demo class and not a per-page id.

   WHAT THIS FIXES, MEASURED on /produkt/wind-of-change/ at 1440 px. The page is 5 404 px
   tall and 2 651 px of that is the perfume's story: the return promise, the composition
   („Hlava · Srdce · Základ"), four books the scent is paired with, and the invitation to
   name the bottle yourself. All of it rendered in `.wd-single-content` at **1410 px flush
   left at x=15** — the same ~160 characters a line as the static pages had, except this is
   the text that sells the product. Nothing was missing and nothing errored; it simply read
   like a terms-of-service page.

   The buy column above it is left as the theme composed it. It works: the gallery holds the
   left half, the title, the motto, the price, the cart row and the attribute table the right,
   and the column is sticky. Only its typography is tightened. */

/* ---------------------------------------------------------------------------
   The story
   ---------------------------------------------------------------------------
   ONE COLUMN, CENTRED, and no second width: unlike O značke this description has no
   photographs, no quote blocks and no grids — it is 40 paragraphs of prose — so a wide
   measure for anything would only introduce an edge that nothing else shares. */
body.single-product .wd-single-content {
	max-width: var(--bookarazzi-measure);
	margin-inline: auto;
	margin-block-start: var(--bookarazzi-rhythm);
}

body.single-product .wd-single-content > p {
	margin-block: 0 1.35em;
	line-height: 1.75;
}

/* The product's own chapter heading — the scent's name, which the delivery repeats as an h2
   under the return promise. */
body.single-product .wd-single-content > h2 {
	margin-block: var(--bookarazzi-rhythm) 0.8em;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
}

body.single-product .wd-single-content > h2:not(:first-child)::before {
	content: "";
	display: block;
	width: 2.5rem;
	margin-block-end: 0.7em;
	border-block-start: 2px solid var(--bookarazzi-red);
}

/* „Príbeh vône" · „Knihy, ktoré sa nám spájajú s …" · „My sme túto vôňu nazvali …" — the
   three chapters of the story. */
body.single-product .wd-single-content > h3 {
	margin-block: var(--bookarazzi-rhythm) 1.2em;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.25;
}

body.single-product .wd-single-content > h3::after {
	content: "";
	display: block;
	width: 100%;
	margin-block-start: 0.7em;
	border-block-start: 1px solid var(--bookarazzi-rule);
}

/* An h4 is one of two things here, and the delivery uses the same level for both: a book —
   „Antoine de Saint-Exupéry: Malý princ" — or a tier of the composition — „Hlava". This is
   the book, which keeps its own capitalisation because it is a title somebody wrote. */
body.single-product .wd-single-content > h4 {
	margin-block: 2.25rem 0.5em;
	color: var(--bookarazzi-red);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-transform: none;
}

/* And this is a tier: one word, so capitals turn it into the label it is and let the reader
   see the three tiers at a glance instead of reading for them. A BOOK MUST NEVER GET THIS —
   „PAULO COELHO: ALCHYMISTA" destroys casing the author chose — so the two are told apart by
   what follows: a tier's notes line is bold in the delivery, a book's is a quotation.
   Measured across all five products: 3 tiers each, every one followed by a bold line, and
   4 books each, none of them followed by one. `verify-base.sh` asserts that.

   `:has()` and a progressive one: without it a tier label looks like a book title, which is
   the same treatment it had before this file existed. */
body.single-product .wd-single-content > h4:has(+ p > strong:only-child) {
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* THE LINE UNDER AN h4 IS THAT BLOCK'S LEAD, and it is one of exactly two things: the notes
   of a tier („**Citrón • Citrusové tóny**", bold in the delivery) or the sentence quoted from
   a book („Keď niečo naozaj chceš…", plain). Both are set apart from the paragraph that
   explains them, and both are addressed without `:has()` — the notes line is recognised by
   the `<strong>` the delivery puts there, and turns upright because it is not a quotation. */
body.single-product .wd-single-content > h4 + p {
	margin-block-end: 1em;
	color: var(--bookarazzi-red-deep);
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.5;
}

/* The book quotation — the h4 + p that is NOT a tier's notes line — is set in PP Rader
   (2026-09-25). PP Playground was tried first (2026-09-24) and the client found the script
   unreadable at this size. Upright, because the face has no italic and a synthesised slant
   only smears a narrow grotesque. */
body.single-product .wd-single-content > h4:not(:has(+ p > strong:only-child)) + p {
	font-family: var(--bookarazzi-font-narrow);
	font-size: 1.2rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
}

body.single-product .wd-single-content > h4 + p strong {
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.04em;
}

/* „Ktorá postava by ho nosila?" — a question the delivery bolds on its own line before the
   answer. It reads as a label for the paragraph that follows, so it gets the air of one. */
body.single-product .wd-single-content > p > strong:only-child {
	display: inline-block;
	margin-block-start: 0.4em;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   The return promise
   ---------------------------------------------------------------------------
   „Risk Free Fragrance Discovery" — the 2 ml sample that lets the bottle go back unopened.
   It is the shop's central commercial promise (docs/09-requirements), it is identical on all
   five products, and it was rendered as the first of nine indistinguishable headings.

   MARKED BY A CONTINUOUS RED RULE, NOT BY A BOX, because a box needs a wrapper element and
   this text comes from content/products/*.md through the same renderer as everything else —
   wrapping it would mean rewriting the stored blocks of all five products. Three adjacent
   elements share one left border and their vertical margins are removed, so the border reads
   as a single line. The shape it depends on — h2, then exactly two paragraphs — is asserted
   for all five products by `verify-base.sh`, so a delivery that changes it fails a check
   instead of quietly losing the rule. */
body.single-product .wd-single-content > h2:first-child,
body.single-product .wd-single-content > h2:first-child + p,
body.single-product .wd-single-content > h2:first-child + p + p {
	margin-block: 0;
	padding-inline-start: 1.35rem;
	border-inline-start: 2px solid var(--bookarazzi-red);
}

body.single-product .wd-single-content > h2:first-child {
	padding-block-start: 1.2rem;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
}

body.single-product .wd-single-content > h2:first-child + p {
	color: var(--bookarazzi-red-deep);
	font-size: 1.0625rem;
}

body.single-product .wd-single-content > h2:first-child + p + p {
	margin-block-end: var(--bookarazzi-rhythm);
	padding-block-end: 1.2rem;
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   Gallery
   ---------------------------------------------------------------------------
   The theme's layout is a five-column grid with the three photographs spanning 5, 3 and 2 —
   measured cells of 675, 385 and 240 px with a 50 px gap. On stock photography that asymmetry
   is the point; on these it is not, because all five products ship the same number of pictures
   (four since 2026-09-24) and every one of them is 1458 × 1667. Two portraits of the same ratio at different widths get
   different heights — 440 px next to 274 px — and the pair reads as a mistake rather than as
   a composition, with 166 px of white under the smaller one.

   The hero takes the full width and the other three a row of equal cells, so they get equal
   heights, and NOTHING IS CROPPED: identical ratios in identical cells need no `object-fit`.
   Three columns because every product ships exactly four pictures; a fifth one would wrap
   into a second row on its own, which `verify-browser.mjs` would catch. */
/* ⚠️ ONLY WHERE THE THEME ACTUALLY USES A GRID. The gallery carries `wd-off-lg`, so the
   carousel is switched off from 1025 px up and the three pictures become a grid; below that
   they are carousel slides driven by `--wd-col-md: 1` and `--wd-col-sm: 1` on the wrapper,
   and a `grid-template-columns` from here overrode those and left the phone showing a
   170 px picture in a 360 px column. Below 1025 px this file does not touch the gallery. */
@media (min-width: 1025px) {
	body.single-product .wd-single-gallery .wd-carousel-wrap {
		gap: 20px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.single-product .wd-single-gallery .wd-carousel-wrap > .wd-carousel-item {
		grid-column: span 1;
	}

	body.single-product .wd-single-gallery .wd-carousel-wrap > .wd-carousel-item:first-child {
		grid-column: 1 / -1;
	}
}

/* Let the cell decide the size, not the file. Without this the picture lays out at the
   intrinsic width of whichever srcset candidate the browser picked — and because WordPress
   puts `sizes="auto"` on every lazy-loaded image, `auto` has no layout width to resolve
   against and the choice comes out small: a 262 px file rendering at 240 px inside a column
   that is 330 px wide. */
body.single-product .wd-single-gallery .woocommerce-product-gallery__image > img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   The buy column
   --------------------------------------------------------------------------- */

/* The motto. Every product's delivery opens with one quoted line — „Vietor nemení iba smer
   cesty…" — and then the description. Rendered as two identical grey paragraphs, the line
   that carries the whole idea of the scent looked like the first half of a spec sheet. */
/* In PP Rader since 2026-09-25, at the client's request — upright for the same reason as
   the book quotations in the story (PP Playground, tried the day before, was unreadable). */
body.single-product .wd-single-short-desc .woocommerce-product-details__short-description > p:first-child {
	margin-block-end: 1.1em;
	color: var(--bookarazzi-red-deep);
	font-family: var(--bookarazzi-font-narrow);
	font-size: 1.35rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.35;
}

body.single-product .wd-single-short-desc .woocommerce-product-details__short-description > p {
	line-height: 1.7;
}

/* The attribute table: Objem · Koncentrácia · Vôňová rodina · … The label is what the reader
   scans, so it stops competing with the value for weight. */
body.single-product .wd-single-attrs .wd-attr-name {
	color: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.single-product .wd-single-attrs .woocommerce-product-attributes-item :is(th, td) {
	padding-block: 0.85em;
}

/* Stripe's Link button. NOT RESTYLED, and that is the decision: Stripe renders it in an
   iframe inside `#wc-stripe-express-checkout-element` and it carries Link's own brand green,
   which is the one colour on this page that belongs to nothing in this shop. It is their
   button and their guidelines govern it. Whether it appears on a product page at all is a
   commercial question — WooCommerce → Stripe → Express checkouts — so it is written up for
   the client instead of being switched off here.

   All this rule does is give it air, so „Pridať do košíka" and „Kúpiť teraz" group together
   above it and Link reads as the alternative it is rather than as a third equal action. */
body.single-product #wc-stripe-express-checkout-element {
	margin-block-start: 0.85rem;
}

/* ===========================================================================
   Checkout
   ===========================================================================
   Scoped to `body.woocommerce-checkout`, WooCommerce's own body class.

   The page is composed by the demo's WoodMart layout „Checkout form - Perfumes", so nothing
   here touches a stored block — the same arrangement as the product detail. WHAT WAS WRONG,
   measured on a 1440 px viewport with one perfume in the cart:

     express platba        1410 × 48 px at x=15, above everything — the loudest thing on the
                           page was the alternative to the form, not the form
     kupón                 the FIRST element under the notice: „Máte kupón?" before anybody
                           has typed a character
     pravý stĺpec          border 2px solid rgb(41,39,36) — the only hard box in the shop
     ul#shipping_method    `text-align: end`, so four delivery options sat right-aligned with
                           ragged left edges and the radio behind the label
     .input-text           font-size 14px under an 18px label — the value smaller than its
                           own name
     .product-total        rgb(118,118,118) — the price of the thing being bought rendered in
                           the same grey as disabled text
     #place_order          font-size 14px on the button that takes the money

   The two-column split (643 px form + 707 px summary) is the theme's and stays. */

/* ⚠️ THE EXPRESS ROW HAS NO RULES HERE ANY MORE. It used to be constrained to 24 rem and
   centred, because it carried Apple Pay AND Stripe Link and at 1410 px the pair dominated a
   page whose job is the form below. The client had those switched off (BK-0037), so
   `.wd-el-hook` renders nothing and the rules were deleted rather than left as dead CSS that
   reads as intent — the third time on this branch that a declaration which could not apply was
   removed instead of kept. Turning express payments back on means styling that row again. */

/* ---------------------------------------------------------------------------
   The coupon, in the summary
   ---------------------------------------------------------------------------
   ⛔ IT USED TO OPEN THE CHECKOUT. „Máte kupón? Kliknite sem pre zadanie kódu" ran across the
   full width above the form — the first thing somebody read after deciding to pay. That prompt
   sends people out of the checkout to hunt for a code they may not have, and the ones who find
   nothing come back feeling they paid too much. The block now sits in the order summary,
   between the figures and the card, where the amount it changes is on screen.

   The move is a block move in the layout, not a CSS trick: scripts/arrange-checkout-layout.php.

   ⚠️ `order: 0` is not decoration. The theme gives `.wd-checkout-coupon` `order: 2`, which was
   harmless where it used to live and put it BELOW the pay button in its new column — measured,
   the coupon at y=2141 against payment methods at y=1070, with the DOM order already right. */
body.woocommerce-checkout .wd-checkout-coupon {
	order: 0;
	display: flex;

	/* ⚠️ `flex-direction` stated, for the second time on this branch. The block is a WoodMart
	   column and the theme lays it out downwards, so `display: flex` alone changed nothing that
	   mattered: the field kept a row to itself. Measured — the container in `column`, the
	   field's `flex-basis: 9rem` applied to its HEIGHT, and the row came out 162 px tall. */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 1.2rem;
	padding-block-end: 1.2rem;
	border-block-end: 1px solid var(--bookarazzi-rule);
	font-size: 0.9rem;
	text-align: start;
}

/* ⚠️ There is no `form.checkout_coupon` here. The theme renders the block itself, so the
   toggle, the field and the button are direct children of `.wd-checkout-coupon` — the first
   version of these rules aimed at WooCommerce's own wrapper and matched nothing. */
body.woocommerce-checkout .wd-checkout-coupon .woocommerce-form-coupon-toggle {
	flex: 1 0 100%;
	margin: 0;
}

/* A real label for the field below it. WooCommerce's own line — „Máte kupón? Kliknite sem pre
   zadanie kódu" — went with the template override: the field is already open, so there was
   nothing for the link to reveal, and it pointed at a form the parser had dropped. */
body.woocommerce-checkout .bookarazzi-coupon__label {
	display: block;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wd-entities-title-color, #242424);
	cursor: pointer;
}

/* WooCommerce's answer, in the shop's own words where it has none of its own. */
body.woocommerce-checkout .bookarazzi-coupon__status {
	flex: 1 0 100%;
	margin: 0.2rem 0 0;
	padding: 0.6rem 0.8rem;
	font-size: 0.85rem;
	line-height: 1.5;
	border-radius: 8px;
}

body.woocommerce-checkout .bookarazzi-coupon__status[data-kind="ok"] {
	color: #2a5f46;
	background-color: #eef4f0;
}

body.woocommerce-checkout .bookarazzi-coupon__status[data-kind="error"] {
	color: var(--bookarazzi-red-deep);
	background-color: rgb(var(--bookarazzi-red-rgb) / 8%);
}

body.woocommerce-checkout .bookarazzi-coupon__status[data-kind="pending"] {
	color: rgb(41 39 36);
	background-color: rgb(0 0 0 / 5%);
}

/* Field and button on one line. WooCommerce puts them in two `.form-row` blocks, which stack
   by default and gave a code entry three rows of its own inside the summary card. */
body.woocommerce-checkout .wd-checkout-coupon .form-row-first {
	flex: 1 1 9rem;
	width: auto;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout .wd-checkout-coupon .form-row-last {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout .wd-checkout-coupon .input-text {
	width: 100%;
	font-size: 1rem;
}

body.woocommerce-checkout .wd-checkout-coupon .checkout_coupon {
	display: contents;
}

/* Applying a code is a secondary action beside „Objednávka s povinnosťou platby". The quiet
   variant the rest of the shop uses: outlined, not filled. */
body.woocommerce-checkout .wd-checkout-coupon button {
	min-height: 3rem;
	padding-inline: 1.3rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wd-entities-title-color, #242424);
	background-color: transparent;
	border: 1px solid var(--bookarazzi-rule);
	border-radius: 8px;
}

/* ⚠️ Only the border is set here. A tinted hover was tried and LOST to the shop's own button
   rule, which fills every button brand red — measured `rgb(171, 15, 25)` with white text while
   this block asked for an 8 % tint. The declaration was deleted rather than fought: dead CSS
   that reads as intent is worse than none, and one hover for every button in the shop is the
   better answer anyway. The resting state is what marks this button as secondary. */
body.woocommerce-checkout .wd-checkout-coupon button:where(:hover, :focus-visible) {
	border-color: rgb(var(--bookarazzi-red-rgb) / 35%);
}

/* The summary. A hairline and a radius instead of the demo's 2px black frame, which was the
   only hard-edged box in the whole shop. */
body.woocommerce-checkout .wp-block-wd-column:has(#place_order) {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--bookarazzi-rule);
	border-radius: 14px;
	background-color: #fcfcfc;
}

/* Section headings — „Fakturačné údaje", „Ďalšie informácie", „Vaša objednávka". The same red
   rule the static pages use, so the checkout belongs to the same shop as the rest. */
body.woocommerce-checkout .wp-block-wd-title {
	margin-block-end: 1.1em;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.25;
}

body.woocommerce-checkout .wp-block-wd-title::before {
	content: "";
	display: block;
	width: 2.5rem;
	margin-block-end: 0.6em;
	border-block-start: 2px solid var(--bookarazzi-red);
}

/* ---------------------------------------------------------------------------
   The form
   --------------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce-checkout .form-row label {
	display: block;
	margin-block-end: 0.35rem;
	color: var(--wd-entities-title-color, #242424);
	font-size: 0.9375rem;
	font-weight: 500;
}

/* ⚠️ THE FIELD'S SIZE COMES FROM THE THEME'S OWN CUSTOM PROPERTIES, not from padding here.
   The parent styles every input through one rule — `.wd select, .wd textarea,
   input[type=email], … { padding: 0 15px; height: var(--wd-form-height) }`
   (woodmart/css/style.min.css:183) — so a `padding-block` from this file changed nothing
   visible: measured 8px top and bottom and a height stuck at 42px. Setting the variables
   instead works with that rule rather than against it, exactly as `--btn-transform` does.

   Measured before: height 42px, radius 0, border rgba(0,0,0,0.1), focus border
   rgba(0,0,0,0.15) — a focus ring one hundredth of an alpha away from the resting state. */
body.woocommerce-checkout {
	--wd-form-height: 3rem;
	--wd-form-brd-radius: 6px;
	--wd-form-brd-color: var(--bookarazzi-rule);
	--wd-form-brd-color-focus: var(--bookarazzi-red);
}

/* A value must not be smaller than its own name: 14 px under an 18 px label. */
body.woocommerce-checkout .woocommerce-checkout :is(.input-text, select, textarea) {
	font-size: 1rem;
}

/* A visible focus ring, and not only a border one alpha step darker. Keyboard users get the
   same information as mouse users or the form is a guessing game. */
body.woocommerce-checkout .woocommerce-checkout :is(.input-text, select, textarea):focus {
	outline: 2px solid rgb(var(--bookarazzi-red-rgb) / 25%);
	outline-offset: 1px;
}

/* A textarea has no business being one line tall. */
body.woocommerce-checkout .woocommerce-checkout textarea {
	height: auto;
	padding-block: 0.7em;
}

/* The required marker. Red on white is 7.46 : 1, so it carries on its own — but it is an
   asterisk, and a form that marks required fields must also say what the mark means. That
   sentence is content, not CSS; here it only stops being an afterthought. */
body.woocommerce-checkout .woocommerce-checkout .required {
	color: var(--bookarazzi-red);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Delivery
   ---------------------------------------------------------------------------
   Four options that the customer has to compare, previously right-aligned with the radio
   behind the label: every line started at a different x and the control was the last thing
   the eye reached. A flex row puts the radio first and every label on one left edge. */
body.woocommerce-checkout ul#shipping_method {
	margin: 0;
	padding: 0;
	text-align: start;
}

body.woocommerce-checkout ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	padding-block: 0.5rem;
	text-align: start;
}

body.woocommerce-checkout ul#shipping_method li + li {
	border-block-start: 1px solid var(--bookarazzi-rule);
}

body.woocommerce-checkout ul#shipping_method li input {
	flex: 0 0 auto;
	margin: 0;
}

/* The whole row is the target, not just the eight pixels of the radio. */
body.woocommerce-checkout ul#shipping_method li label {
	flex: 1;
	margin: 0;
	font-size: 1rem;
	cursor: pointer;
	text-align: start;
}

/* „Doprava" sits beside a list of four, so it belongs at the list's first line rather than
   floating in the middle of it.
   ⚠️ `align-items`, NOT `vertical-align`. This looks like a table and is not one: the parent
   sets `display: flex` on `.shop_table` and on every `tr`, with `align-items: center`
   (measured). `vertical-align: top` therefore did exactly nothing — the label stayed at
   y=939 against a list starting at y=880 — and it took a measurement to see that, because
   the declaration is the right one for the markup and the wrong one for the layout. */
body.woocommerce-checkout tr.woocommerce-shipping-totals {
	align-items: flex-start;
}

body.woocommerce-checkout tr.woocommerce-shipping-totals th {
	padding-block-start: 1.1rem;
}

/* ---------------------------------------------------------------------------
   Figures
   --------------------------------------------------------------------------- */

/* The price of the thing being bought, no longer in the grey of disabled text. */
body.woocommerce-checkout .shop_table .product-total {
	color: var(--wd-entities-title-color, #242424);
}

body.woocommerce-checkout .shop_table :is(th, td) {
	padding-block: 0.9rem;
}

body.woocommerce-checkout .order-total :is(th, td) {
	padding-block-start: 1.1rem;
}

/* The button that takes the money needs nothing of its own any more: height, size and radius
   all come from `--btn-accented-*` in the Buttons section, which every primary action in the
   shop now shares. Three declarations were deleted here rather than left to drift. */

/* The card fields. WooCommerce wraps the active payment method in `.payment_box`, which the
   theme fills `rgb(245,245,245)` — a grey block inside the summary card, so the customer
   ended up looking at a box within a box at the exact moment they type a card number. The
   fields are Stripe's own iframes and are not touched; only the container behind them. */
body.woocommerce-checkout #payment ul.wc_payment_methods div.payment_box {
	padding: 0;
	background-color: transparent;
}

/* Small print of the payment method — Stripe's test-mode notice and Link's terms. */
body.woocommerce-checkout #payment ul.wc_payment_methods div.payment_box::before {
	display: none;
}

/* The two consents. A checkbox someone must tick to place a paid order deserves a target
   bigger than 13 px. Superfaktúra's „Fakturovať na firmu" (#wi_as_company, a plain
   `input-checkbox`) gets the same, or it stays the browser's 13 px blue beside our red. */
body.woocommerce-checkout .woocommerce-checkout :is(.woocommerce-form__input-checkbox, #ship-to-different-address-checkbox, #wi_as_company) {
	width: 1.125rem;
	height: 1.125rem;
	margin-inline-end: 0.6rem;
	accent-color: var(--bookarazzi-red);
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-block-start: 1.25rem;
}

/* „(voliteľné)" belongs to a field one may leave empty, not to a checkbox one may leave
   unticked — WooCommerce appends it to every non-required field, the checkbox included. */
body.woocommerce-checkout #wi_as_company_field .optional {
	display: none;
}

body.woocommerce-checkout #wi_as_company_field label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

/* The delivery radios, same reasoning. */
body.woocommerce-checkout ul#shipping_method li input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--bookarazzi-red);
}

/* On a phone the label must not keep a column of its own. Measured at 390 px: „Doprava" held
   the left cell and pushed all four options to x=119 of a 360 px container, so each one had
   about 240 px for a line like „Osobný odber — LaLa Space, Bratislava". Stacked, they get the
   full width. 768 px is the theme's own `md` breakpoint. */
@media (max-width: 768px) {
	body.woocommerce-checkout tr.woocommerce-shipping-totals {
		flex-direction: column;
	}

	body.woocommerce-checkout tr.woocommerce-shipping-totals th {
		padding-block-start: 0;
		padding-block-end: 0.35rem;
	}
}

/* ---------------------------------------------------------------------------
   The shop grid inside the gutter
   ---------------------------------------------------------------------------
   The product archive puts its grid in a STRETCHED `wd/section`: the theme gives it
   `position: relative; left: -<container padding>; width: 100vw`, so the grid runs from edge
   to edge. Measured, and it always did — 1440 px at x=0 both before and after the gutter
   changed, because that `left` is computed FROM the container's padding and followed it.

   With a 15 px page it looked deliberate. With a 50 px gutter it does not: the headline, the
   notice and the footer sit at x=50 and the product table touches the glass. That is a
   consequence of narrowing the page, so it is handled here rather than left for later.

   ⚠️ SCOPED TO THE ARCHIVE, and `wd/section` only. The other stretched element in the whole
   shop is the front page's hero slider (`wp-block-wd-slider`), which is the client's
   photography and MUST stay full-bleed. Measured: those two are the only stretched blocks on
   /, /parfumy/, a product, a static page and the blog.

   If the full-bleed product table turns out to be wanted, this block is the only thing to
   delete.

   ⛔ THE CATEGORY PAGES WERE LEFT OUT until 2026-09-24. `post-type-archive-product` is the
   shop page only; /collections/parfumy/ is `tax-product_cat` and kept the edge-to-edge table
   (measured: 1440 px at x=0 under a heading at x=50). Nothing linked there then. The
   Collections menu links nowhere else, so both archives now sit on the same column. */
body.post-type-archive-product .wp-block-wd-section,
body.tax-product_cat .wp-block-wd-section {
	left: 0;
	width: 100%;
}

/* ===========================================================================
   Submenu of the main navigation
   ===========================================================================
   ⛔ THIS WAS AN ACCESSIBILITY FAILURE, not only a plain look. Measured on the „Parfumy"
   dropdown at 1440 px:

     položka          rgb(131,131,131) on white = 3.79 : 1 at 14 px
     WCAG AA          4.5 : 1 for text under 24 px  ->  FAILS
     hover            rgb(41,39,36) — darker grey, no colour, no background, no indicator
     veľkosť          14 px, while the parent menu item above it is 18 px
     panel            no radius, shadow rgba(0,0,0,0.15) 0 0 3px

   The five items are the five perfumes: the shop's whole catalogue behind a menu nobody can
   comfortably read. */

/* ⚠️ THE COLOURS ARE THE THEME'S OWN CUSTOM PROPERTIES, not declarations fighting it. The
   parent owns both states through `.wd-sub-menu { --sub-menu-color: … ;
   --sub-menu-color-hover: var(--wd-primary-color) }` and applies them at `.wd-sub-menu
   li > a` and `… a:hover` (woodmart/css/style.min.css). The hover rule is (0,2,2) and a
   `color` from here at (0,1,4) lost it — measured: the tint and the bar appeared, the text
   stayed grey. Setting the variables is the third time this shop does it, after
   `--btn-transform` and `--wd-form-*`.

   `--wd-primary-color` is the demo's own accent and belongs to nothing in this shop. */
body .wd-dropdown-menu {
	border-radius: 10px;
	box-shadow: 0 12px 32px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 8%);
}

/* ⚠️ ON `.wd-sub-menu` ITSELF, not on the panel around it. The theme declares both properties
   on that very element, and a custom property set ON an element beats one INHERITED into it —
   so the same two lines one level up changed nothing at all: measured, the resting colour went
   straight back to rgb(131,131,131) and its 3.79 : 1. */
body .wd-sub-menu {
	--sub-menu-color: var(--wd-entities-title-color, #333);
	--sub-menu-color-hover: var(--bookarazzi-red-deep);
}

/* The rows. `padding-inline` plus a matching negative margin so the hover fill spans the whole
   panel and reads as a row rather than as a coloured word. */
body .wd-dropdown-menu .wd-sub-menu > li > a,
body .wd-dropdown-menu .sub-menu > li > a,
body .wd-dropdown-menu ul > li > a {
	position: relative;
	margin-inline: -20px;
	padding: 0.55rem 20px;
	border-radius: 6px;
	font-size: 0.9375rem;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* The hover. Brand red on a tint of itself, plus a red bar at the start of the row — the
   colour alone would be one more grey-to-something change, and the bar is what makes the row
   read as selected at a glance.

   rgb(171 15 25 / 6%) on white is #f7eaeb; #8c0616 on it measures 9.1 : 1, so the state that
   the customer reads longest is the one with the most contrast. */
body .wd-dropdown-menu ul > li > a:where(:hover, :focus-visible) {
	background-color: rgb(var(--bookarazzi-red-rgb) / 6%);
}

body .wd-dropdown-menu ul > li > a::before {
	content: "";
	position: absolute;
	inset-block: 0.55rem;
	inset-inline-start: 6px;
	width: 2px;
	border-radius: 2px;
	background-color: var(--bookarazzi-red);
	opacity: 0;
	transition: opacity 0.2s ease;
}

body .wd-dropdown-menu ul > li > a:where(:hover, :focus-visible)::before {
	opacity: 1;
}

/* A keyboard user must see the same thing a mouse user does, and then some. The ring itself
   comes from the theme's `--wd-otl-*` (see the buttons section); only its offset changes, so it
   sits inside the row instead of straddling the panel edge. */
body .wd-dropdown-menu ul > li > a {
	--wd-otl-offset: -2px;
}

/* ---------------------------------------------------------------------------
   Collections — the mega menu (scripts/build-navigation.php, design „Set sizes")
   ---------------------------------------------------------------------------
   One column per top-level category. Parfumy holds a line, Bookarazzi, and the line holds the
   five perfumes — and without these rules all six rows looked alike: measured, „Bookarazzi"
   and „The Final Chapter" were the same 15 px / 400 at the same x, so the line read as a sixth
   perfume. The line is set in the weight of a label and its perfumes hang from a hairline, the
   same rule colour the static pages use. */
body .wd-dropdown-menu.wd-design-sized .item-level-2.menu-item-has-children > a {
	font-weight: 600;
}

body .wd-dropdown-menu.wd-design-sized .item-level-2 > .sub-sub-menu {
	margin-inline-start: 0.35rem;
	padding-inline-start: 0.85rem;
	border-inline-start: 1px solid var(--bookarazzi-rule);
}

/* ===========================================================================
   Buttons
   ===========================================================================
   Measured across the shop before this block — every primary action was a hard-edged
   rectangle:

     hero „Kúpiť teraz"        126 × 48, rgb(41,39,36), radius 0, 14 px
     „Pridať do košíka"        265 × 42, rgb(41,39,36), radius 0, 13 px
     „Kúpiť teraz" (produkt)   235 × 42, transparent + 1px rgb(41,39,36), radius 0, 13 px
     „Skontrolovať" (košík)    362 × 42, rgb(41,39,36), radius 0, 13 px
     #place_order              607 × 59, radius 8, 18 px   <- the one already styled here

   So the checkout button already looked like a different design system from every other
   button in the shop. Two more numbers: the primary hover went rgb(41,39,36) ->
   rgb(28,25,24), a thirteen-unit darkening nobody can see, and the quiet variant #f7f7f7 ->
   #efefef, eight units.

   ⚠️ SET THROUGH `--btn-accented-*`, NOT `--btn-height`. The theme resolves every button
   through `min-height: var(--btn-accented-height, var(--btn-height, 42px))`, so the generic
   token would also grow things that must not grow: the quantity stepper is a 25 × 42 pair of
   `.btn`, and our own cookie-bar buttons are 117 × 42 with a check that measures how
   prominent they are. The accented token reaches the primary actions and nothing else —
   verified by measuring the stepper and the consent bar afterwards.

   The radius is set on the button tokens only, NOT on `--wd-brd-radius`: that one is the
   theme's global radius and it would round cards, images and overlays across the whole shop,
   which is a different decision from making the buttons less blunt. */
body {
	--btn-accented-brd-radius: 8px;
	--btn-default-brd-radius: 8px;
	--btn-accented-height: 3rem;
	--btn-accented-font-size: 1rem;
	--btn-accented-padding: 0.85em 1.7em;

	/* Ink at rest, BRAND RED on hover. The shop's accent is already red everywhere else — the
	   rule above a heading, the submenu hover, the return promise — so a button that turns red
	   under the cursor belongs to the same palette. White on #ab0f19 measures 7.46 : 1. */
	--btn-accented-bgcolor-hover: var(--bookarazzi-red);
	--btn-accented-color-hover: #fff;

	/* The quiet variant — „Použiť kupón", „Späť do obchodu". Its 8-unit grey shift becomes the
	   same red tint the submenu uses. */
	--btn-default-bgcolor-hover: rgb(var(--bookarazzi-red-rgb) / 8%);
	--btn-default-color-hover: var(--bookarazzi-red-deep);
}

/* A press that answers. `transform` and not a colour change alone, because the fill is already
   doing the colour work and a 1 px lift is what makes a rectangle feel like a control. */
body :is(.btn, .button, button[type="submit"], input[type="submit"]):not(.minus, .plus) {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
		transform 0.12s ease, box-shadow 0.2s ease;
}

body :is(.single_add_to_cart_button, .wd-buy-now-btn, .checkout-button, #place_order, .wp-block-wd-button.btn):hover {
	box-shadow: 0 4px 14px rgb(var(--bookarazzi-red-rgb) / 22%);
	transform: translateY(-1px);
}

body :is(.single_add_to_cart_button, .wd-buy-now-btn, .checkout-button, #place_order, .wp-block-wd-button.btn):active {
	box-shadow: none;
	transform: translateY(0);
}

/* ⚠️ THE BLOCK BUTTON DARKENS ITSELF WITH AN INSET SHADOW, not with a background colour:
   measured `rgba(0,0,0,0.1) 0 0 0 1000px inset` on hover, which is why
   `--btn-accented-bgcolor-hover` never reached it — it is `btn-style-default`, not accented.
   The rule above already replaces that shadow.

   ⚠️ AND IT INVERTS INSTEAD OF TURNING RED, which is the opposite of every other button here.
   These two buttons — the hero's „Kúpiť teraz" and „Zobraziť parfum" on the tiles — are the
   only ones that sit ON A PHOTOGRAPH, and the client's photography is red: a brand-red fill
   put the button inside the baroque wallpaper behind it and it nearly disappeared. Tried,
   screenshotted, rejected. White on that photograph is unmistakable at any hue, and the red
   moves to the label, so the colour still says which shop this is. */
body .wp-block-wd-button.btn:where(:hover, :focus-visible) {
	background-color: #fff;
	color: var(--bookarazzi-red-deep);
}

/* The bordered variant — „Kúpiť teraz" beside the cart button. A hairline that becomes the
   brand red rather than a border that only gets darker. */
body .wd-buy-now-btn:where(:hover, :focus-visible) {
	border-color: var(--bookarazzi-red);
	color: var(--bookarazzi-red-deep);
}

/* ⚠️ A FOCUS RING THE THEME ALREADY OWNS — AND OWNS WITH `!important`.
   css/style.min.css carries

       :is(a, button, input[type=submit], …):focus-visible {
           outline: var(--wd-otl-width, 2px) var(--wd-otl-style, dotted)
                    var(--wd-otl-color, var(--wd-otl-color-scheme, #000)) !important;
           outline-offset: var(--wd-otl-offset, calc(var(--wd-otl-width) * -1 / 2));
       }

   so an `outline` declared here never applied, whatever its specificity — measured
   `2px dotted rgb(0, 0, 0)` on „Pridať do košíka" while a 3 px solid rule sat in this file.
   The ring is read from four custom properties, so those are what gets set: the same lesson as
   `--sub-menu-color` for the submenu and `--wd-form-*` for the checkout. Two px of dotted black
   is also not a ring anyone sees against a dark fill. */
body {
	--wd-otl-width: 3px;
	--wd-otl-style: solid;
	--wd-otl-color: rgb(var(--bookarazzi-red-rgb) / 45%);
	--wd-otl-offset: 2px;
}

/* Prefers-reduced-motion is not a preference to argue with. */
@media (prefers-reduced-motion: reduce) {
	body :is(.btn, .button, button, input[type="submit"]) {
		transition: none;
	}

	body :is(.single_add_to_cart_button, .wd-buy-now-btn, .checkout-button, #place_order):hover {
		transform: none;
	}
}

/* The two `wd/button` blocks — the hero's „Kúpiť teraz" and „Zobraziť parfum" on the tiles.
   Their SHAPE is a block setting and is set as one in build-homepage.php (`semi-round`), so
   the editor and the page agree on what they are. Their SCALE is this shop's: the block's own
   `btn-size-large` declares `--btn-height: 48px; --btn-font-size: 14px` on the element, and a
   14 px call to action beside 18 px everywhere else reads as an afterthought.

   The variables are set on the element too, because that is the only way to beat one that is
   already there — the same rule the submenu taught. */
body .wp-block-wd-button.btn {
	--btn-brd-radius: 8px;
	--btn-height: 3rem;
	--btn-font-size: 1rem;
	--btn-padding: 0.85em 1.7em;
}

/* ===========================================================================
   Search
   ===========================================================================
   Measured before, with „wind" typed into the header search:

     panel             300 × 70, radius 0, shadow rgba(0,0,0,0.15) 0 0 3px
     input             14 px — the same 14 px the submenu had
     položka           301 × 97, hairline, no hover state
     zvýraznený výraz  `<strong>` in rgb(51,51,51) — THE SAME COLOUR as the rest of the title,
                       so the one thing the search has to show, what it matched, was invisible

   The search itself works: the AJAX call returns
   `{"suggestions":[{"value":"Wind of Change","permalink":…,"price":…}]}` and Enter lands on
   the product. Nothing here changes behaviour. */

body .wd-search-dropdown,
body .wd-search-results {
	border-radius: 10px;
	box-shadow: 0 12px 32px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 8%);
}

/* 300 px has to hold a thumbnail, a product name and a price on one row. */
body .wd-search-dropdown {
	min-width: 23rem;
}

body .wd-search-dropdown input.s {
	font-size: 1rem;
}

body .wd-search-dropdown input.s:focus-visible {
	outline: 2px solid rgb(var(--bookarazzi-red-rgb) / 25%);
	outline-offset: -2px;
}

/* One suggestion. The hover is the same red tint the submenu uses, so the two dropdowns in the
   header behave alike. */
body .wd-suggestion {
	transition: background-color 0.2s ease;
}

body .wd-suggestion:where(:hover, :focus-within) {
	background-color: rgb(var(--bookarazzi-red-rgb) / 5%);
}

/* ⚠️ WHAT THE SEARCH MATCHED, IN THE BRAND RED. The theme wraps the matched fragment in
   `<strong>` and then leaves it the colour of the rest of the title — so „**Wind** of Change"
   and „Wind of Change" looked identical and the feature's whole feedback was a font weight
   nobody notices at 16 px. */
body .wd-suggestion .wd-entities-title strong {
	color: var(--bookarazzi-red-deep);
	font-weight: 700;
}

body .wd-suggestion .price {
	font-size: 0.9375rem;
}

/* ===========================================================================
   Social icon in the footer
   ===========================================================================
   The footer column used to promise a newsletter — „Novinky do schránky", „Dostávajte
   novinky…" — under which sat five social icons and NO e-mail field. The copy is corrected in
   build-branding.php; what remains is that the one real profile was a 27 × 30 link with a
   16 px glyph, which is both hard to hit and easy to miss now that it is alone.

   Sized through the theme's own `--wd-social-*`, which `.wd-social-icons > a` resolves as
   `width/height: var(--wd-social-size, 40px)` and
   `font-size: var(--wd-social-icon-size, …)` (woodmart/css/parts/el-social-icons.css). */
body footer .wd-social-icons {
	--wd-social-size: 2.75rem;
	--wd-social-icon-size: 1.375rem;
	--wd-social-color: #fff;
	--wd-social-color-hover: #fff;
	--wd-social-bg-hover: var(--bookarazzi-red);

	margin-block-start: 0.35rem;
}

/* ⚠️ THE SIZE VARIABLE ALONE DOES NOT SIZE IT. `wd-style-default` lays the link out from its
   padding and font-size rather than from `--wd-social-size` — measured 38 × 42 with the
   variable already at 2.75rem.

   ⚠️ And `width` loses to a more specific rule of the theme while `min-height` does not:
   measured 38 × 50 when both were set, so the height took and the width did not. The square
   therefore comes from `min-height` plus `aspect-ratio: 1`, which needs no width at all. The
   target is ~49 px on both axes — WCAG 2.5.8 asks for 24, and 44 is what a thumb wants. */
body footer .wd-social-icons > a {
	flex: 0 0 auto;
	min-height: 2.75rem;
	padding: 0;
	aspect-ratio: 1;
	border-radius: 999px;
	transition: background-color 0.2s ease, transform 0.12s ease;
}

body footer .wd-social-icons > a:hover {
	transform: translateY(-1px);
}

/* Brand red on a #111211 footer is a ring nobody finds; the footer swaps the colour and keeps
   the width and offset from the global tokens. */
body footer {
	--wd-otl-color: rgb(255 255 255 / 60%);
}

/* ===========================================================================
   Newsletter band (front page only)
   ===========================================================================
   The shell for the Ecomail embed (REQ-048), rendered by inc/newsletter.php as the shortcode
   `[bookarazzi_newsletter]` and placed on the front page by scripts/build-homepage.php. When
   the embed lands it replaces the form's insides; these rules are written against the ROLES
   — field, button, consent, message — so they survive that swap.

   ⚠️ IT IS A PANEL, NOT A FULL-BLEED BAND. The mockup drew it edge to edge, but this shop is
   capped at 1560 px (--bookarazzi-page-max) and exactly two blocks are allowed out of the
   container: the hero photograph and nothing else worth adding. A band that broke the cap
   here would be the third, and 05_page-gutter.md would stop being true. The radius is the
   14 px of the checkout summary card, so it reads as the same family of surface.

   The tint is the brand red at 5 % — the same colour as the submenu hover and the return
   guarantee on the product detail, at the lightest step that is still visibly warm. */
body .bookarazzi-newsletter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-block: var(--bookarazzi-rhythm);
	padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 3vw, 2.75rem);
	background-color: rgb(var(--bookarazzi-red-rgb) / 5%);
	border-radius: 14px;

	/* ⚠️ NOT the shop's usual #767676. The tint computes to rgb(251, 243, 244), and #767676 on
	   it measures 4,16 : 1 — under the 4,5 that WCAG AA asks for text below 24 px, which the
	   lead, the label and the consent line all are. #5f5f5f on the same ground measures
	   5,85 : 1, which is a margin rather than a pass by two hundredths: the consent line is
	   the smallest type in the band and the one people actually have to read. */
	--bookarazzi-newsletter-muted: #5f5f5f;
}

body .bookarazzi-newsletter__intro {
	flex: 1 1 22rem;
}

/* The same 40 × 2 px rule that sits above the headings on the static pages, so the band is
   recognisably part of this shop and not a plugin's idea of a call to action. */
body .bookarazzi-newsletter__title::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-bottom: 0.9rem;
	background-color: var(--bookarazzi-red);
}

body .bookarazzi-newsletter__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.25;
}

body .bookarazzi-newsletter__lead {
	max-width: var(--bookarazzi-measure);
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--bookarazzi-newsletter-muted);
}

body .bookarazzi-newsletter__form {
	flex: 1 1 24rem;
	margin: 0;
}

body .bookarazzi-newsletter__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--bookarazzi-newsletter-muted);
}

body .bookarazzi-newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

/* 3 rem tall, like every other main action in this shop — the checkout's #place_order and
   „Pridať do košíka" both measured 54 px at the theme's 18 px root (before the 22 px root of 2026-09-25). */
body .bookarazzi-newsletter__input {
	flex: 1 1 12rem;
	height: 3rem;
	padding-inline: 1rem;
	font-size: 1rem;
	color: inherit;
	background-color: #fff;
	border: 1px solid var(--bookarazzi-rule);
	border-radius: 6px;
}

body .bookarazzi-newsletter__input[aria-invalid="true"] {
	border-color: var(--bookarazzi-red-deep);
}

body .bookarazzi-newsletter__btn {
	flex: 0 0 auto;
	min-height: 3rem;
	padding-inline: 1.9rem;
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	background-color: rgb(41 39 36);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.12s ease;
}

body .bookarazzi-newsletter__btn:where(:hover, :focus-visible) {
	color: #fff;
	background-color: var(--bookarazzi-red);
	transform: translateY(-1px);
}

/* ⚠️ THE CONSENT IS NOT FINE PRINT. It was 14 px of #767676 running the full width of the
   form column, wrapping mid-phrase — legally present and practically unread. It is now
   15,3 px on a 30 rem measure at 5,85 : 1, which is the same treatment the rest of this shop
   gives text somebody is expected to read. */
body .bookarazzi-newsletter__consent {
	max-width: 30rem;
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	line-height: 1.65;
	color: var(--bookarazzi-newsletter-muted);
}

/* The way out of the sentence, on its own line. Inside the paragraph it wrapped as „Ochrana /
   osobných údajov" and read as part of the consent rather than as a document to open — and
   the theme leaves a link in a paragraph the colour of its text, so nothing said it was one. */
body .bookarazzi-newsletter__more {
	margin: 0.45rem 0 0;
	font-size: 0.85rem;
	line-height: 1.5;
}

body .bookarazzi-newsletter__more a {
	color: var(--bookarazzi-red-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body .bookarazzi-newsletter__more a:hover {
	color: var(--bookarazzi-red);
}

/* The slot Ecomail's own messages will use. */
body .bookarazzi-newsletter__status {
	margin: 0.8rem 0 0;
	padding: 0.7rem 0.9rem;
	font-size: 0.88rem;
	line-height: 1.5;
	border-radius: 8px;
}

body .bookarazzi-newsletter__status[data-kind="error"] {
	color: var(--bookarazzi-red-deep);
	background-color: rgb(var(--bookarazzi-red-rgb) / 8%);
}

body .bookarazzi-newsletter__status[data-kind="pending"] {
	color: rgb(41 39 36);
	background-color: rgb(0 0 0 / 5%);
}

/* A sign-up Ecomail accepted (inc/ecomail.php). The same ink as the text of the band on a
   neutral ground: it confirms, it does not celebrate. */
body .bookarazzi-newsletter__status[data-kind="success"] {
	color: rgb(41 39 36);
	background-color: rgb(0 0 0 / 5%);
	border-inline-start: 3px solid var(--bookarazzi-red);
}

/* The honeypot field for robots (inc/newsletter.php). Off-screen rather than `display: none`,
   which the simpler bots read as „skip this field". */
body .bookarazzi-newsletter__trap {
	position: absolute;
	inset-inline-start: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 575px) {
	body .bookarazzi-newsletter__input,
	body .bookarazzi-newsletter__btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .bookarazzi-newsletter__btn {
		transition: none;
	}

	body .bookarazzi-newsletter__btn:where(:hover, :focus-visible) {
		transform: none;
	}
}

/* ===========================================================================
   Cart
   ===========================================================================
   Scoped to `body.woocommerce-cart`, WooCommerce's own body class.

   The page is the demo's WoodMart layout, so most of what follows corrects a block setting
   with CSS rather than markup — the same situation as the checkout, and the same answers,
   because the two pages are one step apart and may not look like two different shops.

   Measured before, at 1440 px:

     .wp-block-wd-column   border 2px solid rgb(17,18,17), radius 0 — the summary sat in a
                           hard black rectangle while the checkout's summary is a 14 px card
     .woocommerce-shipping-methods
                           `text-align: end`: four delivery options right-aligned, the radio
                           AFTER the label, and „Osobný odber — LaLa Space, Bratislava"
                           wrapping mid-address
     .cart_totals th       102 px wide, so „Cena spolu" broke across two lines
     .coupon input         font-size 14 px, radius 0 — a sharp rectangle beside a button with
                           an 8 px radius
     .quantity             42 px tall beside a 54 px coupon field
     .product-remove a     30 × 30 — under the 44 px that WCAG 2.5.8 asks of a target that
                           deletes something
     .product-name a       rgb(51,51,51) at 400 — the thing being bought, in body text
     .product-subtotal     rgb(118,118,118) — its price in the grey of disabled text */

/* Fields and the quantity stepper, from the same tokens the checkout sets. The stepper reads
   `--wd-form-height` too, so it stops being 12 px shorter than the field beside it. */
body.woocommerce-cart {
	--wd-form-height: 3rem;
	--wd-form-brd-radius: 6px;
	--wd-form-brd-color: var(--bookarazzi-rule);
	--wd-form-brd-color-focus: var(--bookarazzi-red);
}

/* ⚠️ THE STEPPER DECLARES THE HEIGHT ON ITSELF. `--wd-form-height` set on `body` reaches the
   coupon field and not the quantity box: the theme puts `--wd-form-height: 42px` on
   `.quantity` itself, and a property set ON an element beats one inherited INTO it — the same
   thing `--sub-menu-color` taught the submenu. Measured: the chain from body down read 3rem
   at every level and 42px at `.quantity`. */
body.woocommerce-cart .quantity {
	--wd-form-height: 3rem;
}

/* 13 px digits in a 54 px box read as a placeholder rather than a value. */
body.woocommerce-cart .quantity input.qty {
	width: 2.6rem;
	font-size: 1rem;
	border-radius: 0;
}

/* Three parts, one control: the theme rounds all four corners of each button, so minus and
   plus looked like two separate buttons with a square field wedged between them. */
body.woocommerce-cart .quantity .minus {
	border-radius: 6px 0 0 6px;
}

body.woocommerce-cart .quantity .plus {
	border-radius: 0 6px 6px 0;
}

/* The summary card — the checkout's card, to the declaration. */
body.woocommerce-cart .wp-block-wd-column:has(.cart_totals) {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--bookarazzi-rule);
	border-radius: 14px;
	background-color: #fcfcfc;
}

/* Headings — „Sumár košíka" and „Mohlo by vás zaujímať…" — carry the red rule the static
   pages and the checkout use. */
body.woocommerce-cart .wp-block-wd-title {
	margin-block-end: 1.1em;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.25;
}

body.woocommerce-cart .wp-block-wd-title::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-bottom: 0.7rem;
	background-color: var(--bookarazzi-red);
}

/* ---------------------------------------------------------------------------
   The line items
   --------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce-cart-form .shop_table thead th {
	padding-block: 0.9rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #767676;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table :is(th, td) {
	padding-block: 1.1rem;
	border-block-end: 1px solid var(--bookarazzi-rule);
}

body.woocommerce-cart .cart_item .product-thumbnail img {
	border-radius: 8px;
	background-color: #f7f5f4;
}

/* The thing being bought, in the colour of a heading rather than of body text. */
body.woocommerce-cart .cart_item .product-name a {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--wd-entities-title-color, #242424);
}

body.woocommerce-cart .cart_item .product-subtotal {
	font-weight: 600;
	color: var(--wd-entities-title-color, #242424);
}

/* ⚠️ A 30 × 30 target that deletes a line. WCAG 2.5.8 asks 24, a thumb wants 44, and this is
   the one control on the page whose mis-tap costs the customer something. */
body.woocommerce-cart .cart_item .product-remove a {
	width: 2.75rem;
	min-height: 2.75rem;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.woocommerce-cart .cart_item .product-remove a:where(:hover, :focus-visible) {
	color: var(--bookarazzi-red-deep);
	background-color: rgb(var(--bookarazzi-red-rgb) / 8%);
}

/* The coupon: a value must not be smaller than its own label, and the field may not be a
   sharp rectangle beside a rounded button. */
body.woocommerce-cart .coupon .input-text {
	font-size: 1rem;
}

body.woocommerce-cart .woocommerce-cart-form td.actions {
	padding-block-start: 1.6rem;
	border-block-end: 0;
}

/* ---------------------------------------------------------------------------
   Delivery, in the summary
   ---------------------------------------------------------------------------
   The same correction as the checkout's `ul#shipping_method`: right-aligned options with the
   control behind the label are four lines that each start somewhere else. */
body.woocommerce-cart .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	text-align: start;
}

body.woocommerce-cart .woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	padding-block: 0.5rem;
	text-align: start;
}

body.woocommerce-cart .woocommerce-shipping-methods li + li {
	border-block-start: 1px solid var(--bookarazzi-rule);
}

body.woocommerce-cart .woocommerce-shipping-methods li input {
	flex: 0 0 auto;
	margin: 0;
}

body.woocommerce-cart .woocommerce-shipping-methods li label {
	flex: 1;
	margin: 0;
	font-size: 1rem;
	cursor: pointer;
	text-align: start;
}

body.woocommerce-cart .woocommerce-shipping-destination {
	margin-block: 0.6rem 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #767676;
}

/* A toggle that opens a form is a link, not a second primary action. */
body.woocommerce-cart .shipping-calculator-button {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--bookarazzi-red-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   The totals
   ---------------------------------------------------------------------------
   ⚠️ The label column was 102 px of a 362 px card, so „Cena spolu" wrapped onto two lines
   while the number beside it had room to spare. Rows become flex — label left, figure right —
   and the delivery row stacks instead, because a list of four options in the remaining
   240 px is not a comparison anybody can make. */
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals table tbody {
	display: block;
	width: 100%;
	border: 0;
}

body.woocommerce-cart .cart_totals table tr {
	display: flex;
	/* ⚠️ `flex-direction` stated, not left to the default. Below the theme's breakpoint
	   `.shop_table_responsive tr` is a COLUMN, so the label and the figure stacked — measured
	   at 390 px, th at y=796 and td at y=863, in a row that says `nowrap`. */
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
}

body.woocommerce-cart .cart_totals table tr + tr {
	border-block-start: 1px solid var(--bookarazzi-rule);
}

body.woocommerce-cart .cart_totals table :is(th, td) {
	display: block;
	width: auto;
	padding: 0.9rem 0;
	border: 0;
}

body.woocommerce-cart .cart_totals table th {
	flex: 0 0 auto;
	font-size: 1rem;
	font-weight: 500;
	text-align: start;
	color: #767676;
}

body.woocommerce-cart .cart_totals table td {
	flex: 1;
	text-align: end;
}

/* ⚠️ THE MOBILE LABEL, TWICE. `shop_table_responsive` hides the `th` below the breakpoint and
   prints the label again from `td::before { content: attr(data-title) }`. Bringing the `th`
   back as a flex item un-hid it — measured at 390 px: „Medzisúčet" then „Medzisúčet89,00 €",
   and the same for „Doprava" and „Cena spolu". The row layout here is the same at every
   width, so the generated copy is the one that goes. */
body.woocommerce-cart .cart_totals table td::before {
	content: none;
}

body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals {
	flex-direction: column;
	gap: 0;
}

body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals :is(th, td) {
	width: 100%;
	text-align: start;
}

body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th {
	padding-block-end: 0.35rem;
}

body.woocommerce-cart .cart_totals tr.order-total th {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wd-entities-title-color, #242424);
}

body.woocommerce-cart .wc-proceed-to-checkout {
	padding-block-start: 1.2rem;
}

/* ===========================================================================
   Checkout steps
   ===========================================================================
   `ul.wd-checkout-steps` — the same element on the cart, the checkout and the thank-you page.

   Measured before, at 1440 px: every step at **28 px**, all three in the same
   `rgb(36, 36, 36)`, the current one told apart by an underline and nothing else, and the
   separator an SVG arrow in a 23 × 38 box. Three links of heading size, one of them
   underlined — it read as a navigation menu, not as progress, and „kde som" was a question
   the customer had to answer by spotting an underline.

   ⚠️ THE THEME MARKS ONLY THE CURRENT STEP. `step-active` sits on one `li`; the ones behind it
   carry the same `step-inactive` as the ones ahead. Done and upcoming are told apart by
   POSITION instead: `li:has(~ .step-active)` is behind the current step, `.step-active ~ li`
   is ahead of it.

   ⚠️ EVERY SELECTOR HERE STARTS WITH `body`, and that is not decoration. The theme's own
   `.wd-checkout-steps` and `.wd-checkout-steps li` score exactly what the same selectors score
   here, and its stylesheet is enqueued at 10100 against this file's 10010 — so a tie goes to
   the theme. Without the prefix the list kept the theme's `gap: 10px 15px` and never filled
   its row: measured 723 px inside a 1339 px container, with 15 px gaps this file had set to 0. */
body .wd-checkout-steps {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 0 var(--bookarazzi-rhythm);
	padding: 0;
	counter-reset: bookarazzi-step;
	list-style: none;

	/* ⚠️ `width: 100%` because of ONE page. In the cart the list sits in a block wrapper and
	   fills the 1339 px row by itself; in the checkout its parent `.container` is a flex COLUMN
	   with `align-items: start`, so the list shrank to its content — 596 px, then 694 — and the
	   connectors came out as 18 px stubs. `flex: 1` did not help: in a column that grows the
	   HEIGHT. Measured, after being caught by `flex-direction` twice already on this branch. */
	width: 100%;
}

body .wd-checkout-steps li {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
}

/* The badge. */
body .wd-checkout-steps li::before {
	content: counter(bookarazzi-step);
	counter-increment: bookarazzi-step;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	color: #767676;
	background-color: rgb(0 0 0 / 6%);
	border-radius: 999px;
}

/* ⚠️ THE ARROW IS AN ICON-FONT GLYPH, and the rule that draws it is more specific than it
   looks: `.wd-checkout-steps li:not(:last-child)::after { content: "\f121"; font-family:
   "woodmart-font" }` scores (0,2,2) against the (0,1,2) of `.wd-checkout-steps li::after`.
   Overriding the loose selector left a small chevron painting underneath the connector line —
   visible on a screenshot and on nothing else. The same pseudo-element becomes the connector,
   at the same specificity, so nothing has to be hidden and re-added. */
body .wd-checkout-steps li:not(:last-child)::after {
	content: "";
	flex: 1;
	min-width: 2rem;
	height: 1px;
	margin-inline-start: 0.5rem;

	/* ⚠️ `font-size: 0`, and it is load-bearing. The theme's rule scores (0,2,2) — the same as
	   this one without `body` — and its stylesheet is enqueued at 10100 against this file's
	   10010, so on a tie it wins. `font-size: 85%` of a 28 px list stayed, and the icon-font
	   glyph drew a 24 px arrow that hung out of a 1 px box, under the connector line. Visible
	   on a screenshot and on nothing else; the computed `content` read `""` the whole time. */
	font-size: 0;
	line-height: 0;
	font-family: inherit;
	color: transparent;
	opacity: 1;
	background-color: var(--bookarazzi-rule);
}

body .wd-checkout-steps li:last-child {
	flex: 0 0 auto;
}

/* The theme fades every label to `opacity: .7` and the current one back to 1, so the three
   colours set below would arrive at seven tenths each. `body` wins the tie. */
body .wd-checkout-steps li :is(a, span) {
	opacity: 1;
}

body .wd-checkout-steps li :is(a, span) {
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.3;
	color: #767676;
	text-decoration: none;
	white-space: nowrap;
}

/* Behind the current step: done. */
body .wd-checkout-steps li:has(~ .step-active)::before {
	content: "✓";
	font-size: 1.05rem;
	color: #fff;
	background-color: var(--bookarazzi-red);
}

body .wd-checkout-steps li:has(~ .step-active):not(:last-child)::after {
	background-color: var(--bookarazzi-red);
}

body .wd-checkout-steps li:has(~ .step-active) :is(a, span) {
	color: var(--wd-entities-title-color, #242424);
}

body .wd-checkout-steps li:has(~ .step-active) a:hover {
	color: var(--bookarazzi-red-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The current step. */
body .wd-checkout-steps .step-active::before {
	color: #fff;
	background-color: rgb(41 39 36);
}

/* ⚠️ `body` in front, and not for show. The theme underlines the current step at exactly this
   specificity and its generated stylesheet is enqueued at 10100 against this file's 10010, so
   a tie goes to the theme — measured: the label stayed underlined. The badge and the weight
   already say which step this is; a third signal is just noise. */
body .wd-checkout-steps .step-active :is(a, span) {
	font-weight: 600;
	color: var(--wd-entities-title-color, #242424);
	text-decoration: none;
}

/* ⚠️ At 390 px three labels of 0.9 rem do not fit and the row either wraps or overflows.
   The badges and the connectors stay — they are the progress — and only the label of the step
   the customer is standing on is spelled out. */
@media (max-width: 575px) {
	/* ⚠️ `display: flex`, because the theme HIDES the other steps below its own breakpoint:
	   `.wd-checkout-steps .step-inactive { display: none }`. With them gone the counter never
	   reached them either — measured at 390 px, the checkout showed a single „1 Pokladňa" and
	   the ✓ of the finished step was nowhere. The badges are the progress; they stay. */
	body .wd-checkout-steps li:not(.step-active) {
		display: flex;
		flex: 1;
	}

	body .wd-checkout-steps li:not(.step-active) :is(a, span) {
		display: none;
	}

	body .wd-checkout-steps .step-active {
		flex: 0 0 auto;
	}
}

/* ===========================================================================
   Product tiles — the name must not sit on the bottle
   ===========================================================================
   The loop item („Product loop item - Perfumes") lays the name OVER the photograph: an
   absolute layer 25 px in, 18 px Satoshi, with 60 px kept free on the right for the cart
   button — which sits at the BOTTOM right, not beside the name. The client sent a screenshot
   of „The Final Chapter" and „Wind of Change" written across the caps (2026-09-23). Measured
   on /parfumy/, gap from the name's bottom edge to the first dark row of the rendered photo:

     1. the catalogue crops the portrait packshot to a SQUARE, so the cap starts 13.5 % from
        the top — above the name on every tile narrower than ~370 px: −5 px at 1440, −10 px
        at 1280 (the client's tile, 296 px), −16 px at 1100;
     2. „The Final Chapter" is 8.0 em wide and the name field was the tile minus 85 px, so
        below a 229 px tile it wrapped and the second line landed on the cap: −37 px at a
        900 px window, −23 px at 390.

   The TILE is the container, so every rule below follows the tile's width, not the window's —
   the same tile is 178 px in the phone grid and 357 px in the 1920 carousel. */
body .wd-loop-prod-thumb {
	container-type: inline-size;
}

/* The name gets the width the cart button never used: 25 px on the right like on the left.
   ⚠️ `.wd-dir-col` is load-bearing. The builder writes the layer's inset as
   `.wd.wd .wd-06832d7b` — specificity 0,3,0 — so a plain `body .x > .y` (0,2,1) was measured
   losing: computed padding stayed 15 / 60 px at 390 px and the name still wrapped. */
body .wd-loop-prod-thumb > .wp-block-wd-container.wd-dir-col {
	padding-right: 25px;
}

/* The bottle a little smaller, standing on its own base, so the cap starts below the name.
   `scale` and not `width`: the tile keeps its size, the price and the cart button their places.
   The square catalogue crop needs it everywhere (cap 13.5 % from the top); the portrait crops
   of the product-page carousel and the front page only in narrow tiles, where they measured
   2 px (1100 px window) and −2 px (390). One step per tile width, so every bottle in a row is
   the same size. */
body .wd-loop-prod-thumb .wd-product-img-link img {
	transform-origin: 50% 100%;
}

/* The photograph shrinks WITH its white ground, which uncovered the tile behind it: a grey
   #f1f1f1 margin with the photo's edge drawn across it. Every packshot is pure #fff to the
   edge (sampled at all four corners), so the link carries the same white and the edge
   disappears. */
body .wd-loop-prod-thumb .wd-product-img-link {
	background-color: #fff;
}

body .wd-loop-prod-thumb img.size-woocommerce_thumbnail {
	scale: 0.9;
}

@container (max-width: 299px) {
	body .wd-loop-prod-thumb .wd-product-img-link img {
		scale: 0.95;
	}

	body .wd-loop-prod-thumb img.size-woocommerce_thumbnail {
		scale: 0.85;
	}
}

/* Narrow tiles — the phone grid, a 900 px window: a smaller inset and a 16 px name, so the
   longest name stays on ONE line down to a 160 px tile. */
@container (max-width: 239px) {
	body .wd-loop-prod-thumb > .wp-block-wd-container.wd-dir-col {
		padding: 16px;
	}

	body .wd-loop-prod-thumb .wd-entities-title.wd-loop-prod-title {
		font-size: 16px;
	}

	body .wd-loop-prod-thumb .wd-product-img-link img {
		scale: 0.9;
	}

	body .wd-loop-prod-thumb img.size-woocommerce_thumbnail {
		scale: 0.8;
	}
}

/* ===========================================================================
   Hero — „Kúpiť teraz" stands on the table, below the bottles
   ===========================================================================
   The slide is one window high and the photograph covers it by HEIGHT, so its bands fall on
   the same fractions of the slide at every size: caps at 35 %, bases at 72 %, the reflection
   ends at 80 % (measured on content/banners/hero-collection.jpg and on the rendered slide,
   1920 × 1080 down to 390 × 844). The button sat in the title's container 217–271 px from
   the top, which clears the caps only in a window taller than ~780 px — the client's
   screenshot (2026-09-23) has it across the middle bottle's cap, and she asked for it lower.

   Anchored to the BOTTOM it lands on the table at every height. The containing block is
   `.wd-slide-container` (relative, z-index 2 above the photograph — so it stays), which ends
   100 px above the slide's edge: that is the slide's `paddingBottom` from
   scripts/build-homepage.php, the same at every breakpoint. Hence `6% − 100px`: 6 % of the
   container up from the slide's own bottom. Measured with it, the button's top below the end
   of the reflection: 49 px in a 1280 × 680 window, 85 px in 1440 × 900, 110 px in
   1920 × 1080, 57 px on a 390 × 664 phone — and 28–52 px above the slide's bottom edge.
   Change that padding and this number moves with it. The title keeps its place; `translate`,
   not `transform`, so the theme's slide-in animation (a transform) still composes. */
body .wp-block-wd-slider .wd-slide-container > .wp-block-wd-button {
	position: absolute;
	bottom: calc(6% - 100px);
	left: 50%;
	translate: -50% 0;
}

/* „Signature Collection“ in the client's script — her own example of where the typeface goes
   („napríklad na hlavnom baneri“), and the same hand as the labels on the five bottles below it.

   Larger than the 56 / 48 / 32 px the block sets for Satoshi: a script's x-height is a fraction
   of a grotesque's, and at 56 px the heading read as a caption, its hairlines lost in the
   wallpaper's engraving (screenshot 1280 × 680). `clamp` instead of three breakpoints, so it
   never wraps inside the block's 660 / 506 / 310 px box: 48 px on a phone is 300 px of text.
   The shadow is for the hairlines, not decoration — white strokes one pixel wide over a
   pink-and-red engraving. Specificity 0,3,1 against the builder's `.wd.wd .wd-<id>` (0,3,0). */
body .wp-block-wd-slider .wd-slide-container > .wp-block-wd-title {
	font-family: var(--bookarazzi-font-script);
	font-weight: 500;
	font-size: clamp(48px, 6.2vw, 88px);
	line-height: 1.15;
	text-shadow: 0 1px 14px rgb(0 0 0 / 35%);
}

/* ===========================================================================
   Yournal — the head of an article
   ===========================================================================
   The client's byline („Monika Balga | 11. 1. 2026 | Čas čítania: 10 min“) is split three
   ways: the author and the date are WordPress fields the theme prints in its own meta row
   (inc/yournal.php makes the author the article's, not the admin account), and the reading
   time and the subtitle open the content — build-yournal.php writes them as the first two
   paragraphs. #767676 on white measures 4.54 : 1, which clears AA for 14 px text. */
body.single-post .wd-entry-content > .bookarazzi-reading-time {
	margin-bottom: 0.5em;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: #767676;
}

body.single-post .wd-entry-content > .bookarazzi-lead {
	margin-bottom: 1.6em;
	font-size: 1.3em;
	line-height: 1.45;
	color: var(--wd-entities-title-color, #242424);
}

/* Blog 16 came without a byline. No author at all, rather than the admin account. */
body.bookarazzi-no-byline .wd-single-post-author {
	display: none;
}

/* ===========================================================================
   Collections — a category that is still coming (inc/collections.php)
   ===========================================================================
   Vonné sviečky and Bytové vône before their first product: the owner's „Už čoskoro" text in
   the text column and the newsletter band under it. The kicker is the same small red caps
   voice as nothing else on the page, on purpose — it is the one line that says why the page
   has no products. #ab0f19 on white measures 7.46 : 1. */
body .bookarazzi-coming-soon {
	max-width: var(--bookarazzi-measure);
	margin-block: clamp(1rem, 2vw, 1.5rem) 0;
}

body .bookarazzi-coming-soon__kicker {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bookarazzi-red);
}

body .bookarazzi-coming-soon__body p {
	margin: 0 0 1em;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wd-entities-title-color, #242424);
}

/* The archive layout's product section is a #f1f1f1 band: its 1 px gaps are the grid lines
   between product cards. With no cards it was an empty grey slab, and the announcement sat at
   x = 0 while the category name above it sat on the gutter. The column comes from the archive rule in „The shop grid inside the gutter"; here
   the band only loses its grey. `.wd-content-area` is in the selector for weight alone: the
   layout's own rule is `.wd.wd .wd-<id>` (0,3,0). */
body.bookarazzi-coming-soon-page .wd-content-area .wp-block-wd-section {
	background: none;
}

/* „Filtre" opens the price and stock filters, and there is nothing to filter. A button that
   opens an empty drawer is the empty-archive notice again, only one click later. */
body.bookarazzi-coming-soon-page .wp-block-wd-off-canvas-button,
body.bookarazzi-coming-soon-page .wp-block-wd-off-sidebar {
	display: none;
}

/* ===========================================================================
   Pickup — place and opening hours under the option (inc/shipping.php)
   ===========================================================================
   On its own line under „Osobný odber – LaLa Space, Bratislava", in the muted grey the
   checkout uses for secondary text. #767676 on white measures 4.54 : 1, which clears AA for
   text of this size. */
body .bookarazzi-pickup-note {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.875em;
	line-height: 1.45;
	color: #767676;
}