/* ==========================================================================
   Visual system layer — loaded last, overrides WebSite X5's generated
   per-block styles without touching the underlying markup or engine.
   ========================================================================== */

/* Self-hosted Bricolage Grotesque (variable) — GDPR-friendly, no Google Fonts
   request. Files in /fonts, downloaded from the same Google Fonts source. */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 100%;
	font-display: swap;
	src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 100%;
	font-display: swap;
	src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--ink: #17191c;
	--ink-muted: #55585d;
	--paper: #ffffff;
	--brand: #1f59aa;
	--brand-ink: #123362;
	--hairline: rgba(23, 25, 28, 0.1);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- New product placeholder cards: every existing product card's
   text block (e.g. #imTextObject_30 for IGUZZINI) gets a per-ID rule
   from the page builder's own generated CSS setting line-height: 20px,
   plus per-ID rules scoping .fs16/.fs14/.fs12 to an actual font-size
   (the page builder never emits those as plain global classes). The
   9 placeholder cards added later use IDs the page builder never
   generated CSS for, so .fs16/.fs14/.fs12 silently did nothing on
   them — text fell back to the ~13px base size instead of 16pt/14pt/
   12pt, reading as a smaller, denser font with tighter row spacing
   than every real product card. Replicating both rule sets for the
   new IDs makes them indistinguishable. ---- */
#imTextObject_40, #imTextObject_41, #imTextObject_42, #imTextObject_43,
#imTextObject_44, #imTextObject_45, #imTextObject_46, #imTextObject_47,
#imTextObject_48, #imTextObject_49,
#imTextObject_10_27, #imTextObject_10_29, #imTextObject_10_31, #imTextObject_10_33,
#imTextObject_10_35, #imTextObject_10_37, #imTextObject_10_39, #imTextObject_10_41,
#imTextObject_10_43 {
	font-style: normal;
	font-weight: normal;
	line-height: 20px;
}

#imTextObject_41_tab0 .fs16, #imTextObject_42_tab0 .fs16, #imTextObject_43_tab0 .fs16,
#imTextObject_44_tab0 .fs16, #imTextObject_45_tab0 .fs16, #imTextObject_46_tab0 .fs16,
#imTextObject_47_tab0 .fs16, #imTextObject_48_tab0 .fs16, #imTextObject_49_tab0 .fs16 {
	vertical-align: baseline;
	font-size: 16pt;
	line-height: 28px;
}

#imTextObject_41_tab0 .fs14, #imTextObject_42_tab0 .fs14, #imTextObject_43_tab0 .fs14,
#imTextObject_44_tab0 .fs14, #imTextObject_45_tab0 .fs14, #imTextObject_46_tab0 .fs14,
#imTextObject_47_tab0 .fs14, #imTextObject_48_tab0 .fs14, #imTextObject_49_tab0 .fs14,
#imTextObject_10_27_tab0 .fs14, #imTextObject_10_29_tab0 .fs14, #imTextObject_10_31_tab0 .fs14,
#imTextObject_10_33_tab0 .fs14, #imTextObject_10_35_tab0 .fs14, #imTextObject_10_37_tab0 .fs14,
#imTextObject_10_39_tab0 .fs14, #imTextObject_10_41_tab0 .fs14, #imTextObject_10_43_tab0 .fs14 {
	vertical-align: baseline;
	font-size: 14pt;
	line-height: 25px;
}

#imTextObject_41_tab0 .fs12, #imTextObject_42_tab0 .fs12, #imTextObject_43_tab0 .fs12,
#imTextObject_44_tab0 .fs12, #imTextObject_45_tab0 .fs12, #imTextObject_46_tab0 .fs12,
#imTextObject_47_tab0 .fs12, #imTextObject_48_tab0 .fs12, #imTextObject_49_tab0 .fs12 {
	vertical-align: baseline;
	font-size: 12pt;
	line-height: 23px;
}

/* Same per-ID scoping gap for .cf1 — the light-gray color real
   product cards' divider line ("__________") is set with. Without
   it here the divider inherited the default text color and rendered
   solid black instead of matching the light gray hairline every real
   product card uses. */
#imTextObject_41_tab0 .cf1, #imTextObject_42_tab0 .cf1, #imTextObject_43_tab0 .cf1,
#imTextObject_44_tab0 .cf1, #imTextObject_45_tab0 .cf1, #imTextObject_46_tab0 .cf1,
#imTextObject_47_tab0 .cf1, #imTextObject_48_tab0 .cf1, #imTextObject_49_tab0 .cf1 {
	color: rgb(224, 224, 224);
}

/* Every real product card also gets padding on both its
   #imCellStyle_XX and #imCell_XX from the page builder's CSS: 3px
   top/bottom plus 3px left/right on the cell style (constant across
   every breakpoint), and 3px/2px/1px/5px left/right on the cell
   itself depending on breakpoint (desktop/tablet/small/mobile — top/
   bottom is always 3px there too). Without any of it here, two
   adjacent cards lost 12px of breathing room between the divider
   line and the next photo, and on mobile the placeholder image/text
   sat flush against the left edge instead of the ~8px every real
   product card gets (5px cell + 3px cell style). */
#imCellStyle_41, #imCellStyle_42, #imCellStyle_43, #imCellStyle_44, #imCellStyle_45,
#imCellStyle_46, #imCellStyle_47, #imCellStyle_48, #imCellStyle_49 {
	padding: 3px;
}

#imCell_41, #imCell_42, #imCell_43, #imCell_44, #imCell_45,
#imCell_46, #imCell_47, #imCell_48, #imCell_49 {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-right: 3px;
}

@media (max-width: 959px) and (min-width: 720px) {
	#imCell_41, #imCell_42, #imCell_43, #imCell_44, #imCell_45,
	#imCell_46, #imCell_47, #imCell_48, #imCell_49 {
		padding-left: 2px;
		padding-right: 2px;
	}
}

@media (max-width: 719px) and (min-width: 480px) {
	#imCell_41, #imCell_42, #imCell_43, #imCell_44, #imCell_45,
	#imCell_46, #imCell_47, #imCell_48, #imCell_49 {
		padding-left: 1px;
		padding-right: 1px;
	}
}

@media (max-width: 479px) {
	#imCell_41, #imCell_42, #imCell_43, #imCell_44, #imCell_45,
	#imCell_46, #imCell_47, #imCell_48, #imCell_49 {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* Every real product photo (.image-0/.image-1) also gets a per-ID,
   per-breakpoint pixel width from the page builder's CSS, shrinking
   it to fit its column (864px desktop → 710px → 463px → 100% on
   mobile). The 9 placeholder photos have no such rule, so the <img>
   rendered at its native pixel size — 864px wide regardless of
   viewport — overflowing its column at every breakpoint narrower
   than the photo itself. width: 100% achieves the same fit at every
   breakpoint in one rule instead of four, and adapts automatically
   if a future photo isn't exactly the same aspect ratio. */
#imCellStyle_41 .image-0, #imCellStyle_42 .image-0, #imCellStyle_43 .image-0,
#imCellStyle_44 .image-0, #imCellStyle_45 .image-0, #imCellStyle_46 .image-0,
#imCellStyle_47 .image-0, #imCellStyle_48 .image-0, #imCellStyle_49 .image-0,
#imCellStyle_41 .image-1, #imCellStyle_42 .image-1, #imCellStyle_43 .image-1,
#imCellStyle_44 .image-1, #imCellStyle_45 .image-1, #imCellStyle_46 .image-1,
#imCellStyle_47 .image-1, #imCellStyle_48 .image-1, #imCellStyle_49 .image-1 {
	width: 100%;
	height: auto;
}

/* ---- Breathing room between the nav bar and the first thing on the
   page — the page builder set #imContent's top padding to 0, so the
   first image/heading sat flush against the menu row. ---- */

#imContent {
	padding-top: clamp(20px, 4vw, 32px);
}

/* ---- Internal navigation: the 12 product entries on the home page
   were plain images/text with nothing to click — a dead end for
   anyone who landed on a product they wanted to know more about.
   Each photo and title now links to that product's section on the
   Products page (a few products don't have a dedicated section
   there yet, so they link to the page itself). Reset link defaults
   since these wrap an image and a heading, not a text sentence. ---- */

.product-card-link {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* Wraps just the <img>: block-level so it doesn't disturb the
   surrounding layout, with a hover cue on the photo itself. */
.product-card-link:has(img) {
	display: block;
	transition: opacity 0.2s var(--ease-out);
}

.product-card-link:has(img):hover {
	opacity: 0.85;
}

/* Wraps just the <h2>: the title text gets the brand-blue hover
   treatment every other text link on the site already has. */
.product-card-link:has(h2) {
	display: block;
}

.product-card-link:has(h2):hover span {
	color: var(--brand);
}

/* Home page product cards: pull the title back up close to its own
   photo (80% closer than the previous doubled gap), since with the
   card now split into "photo group" + "title/body" it read like too
   much dead space between the two. */
a.product-card-link h2.section-title {
	margin-top: -24px;
}

/* Anchors on the Products page land a little below the very top
   edge of the viewport instead of flush against it. */
.product-gallery {
	scroll-margin-top: 20px;
}

/* Products page: each title sat flush against both its own photo
   above and the next product's photo below, with no way to tell
   which one it named. Keeping it close above but doubling the gap
   below groups [photo + name] as one visual unit, separated from
   the next. */
.page-products h2.section-title {
	margin-top: 10px;
	margin-bottom: 20px;
	/* Lines up the title's left edge with the "L" of the header
	   logo — measured as a constant 13px offset from the product
	   column's own left edge at every breakpoint. */
	margin-left: 13px;
	font-weight: bold;
	color: #808080;
}

/* Products page titles use the page builder's .fs14 class (14pt),
   while the Home page cards use .fs16 (16pt) for the equivalent
   name — same role, different size. Matching Products to Home's
   16pt/28px here (same !important-over-ID-scoped-rule reasoning as
   the mobile rule below). */
.page-products h2.section-title .fs14 {
	font-size: 21.333px !important;
	line-height: 28px !important;
}

/* Mobile: 15% smaller than the 16pt used everywhere above (matches
   the ratio the Home page cards use at this breakpoint). The .fs14
   rule that actually sets the visible size is scoped to each
   product's own text-object ID (page builder convention) and
   outranks a plain class selector on specificity, so !important is
   the only way to reach it from one shared rule instead of
   duplicating this per product ID. */
@media (max-width: 719px) {
	.page-products h2.section-title .fs14 {
		font-size: 18.13px !important;
	}
}

/* The header wordmark now links home like any sane site header;
   give it the same subtle hover feedback as other header links. */
#imHeader a {
	transition: opacity 0.2s var(--ease-out);
}

#imHeader a:hover {
	opacity: 0.8;
}

/* The header logo box was sized (per breakpoint) for the old compact
   JPG mark. The current SVG wordmark has a wider, shorter aspect
   ratio, so at its natural width it doesn't fill the box's fixed
   height — it was sitting flush at the top with empty space below.
   Centering it vertically keeps it looking intentional at every
   breakpoint without having to hand-tune the box height per size. */
#imHeader_imObjectImage_12_wrapper {
	display: flex;
	align-items: center;
}

/* Mobile: logo 50% bigger. The image scales via width: 100% of this
   wrapper, so widening the wrapper alone grows it proportionally —
   at the larger size it's still well under the wrapper's own 58px
   height (the logo's wide, short aspect ratio means width is always
   the binding dimension here), so this can't collide with the
   hamburger button or push into the content below. */
@media (max-width: 479px) {
	#imHeader_imObjectImage_12_wrapper {
		width: 229.5px !important;
	}
}

/* #imHeaderObjects is a full content-width box (960px on desktop) that
   the page builder uses purely to position the logo within — the logo
   itself only occupies its own small corner of it, the rest of the box
   is empty/transparent. But an empty block box still captures clicks
   across its whole rectangle, and on desktop that rectangle overlaps
   the nav menu next to it (#imMnMn, positioned separately but visually
   alongside), silently swallowing clicks meant for HOME/PRODUCTS/PRESS/
   ABOUT/CONTACTS anywhere they happen to sit under this invisible box.
   Making the empty box click-through and re-enabling clicks only on
   the actual logo link fixes it without touching the legacy layout. */
#imHeaderObjects {
	pointer-events: none;
}

#imHeaderObjects a {
	pointer-events: auto;
}

/* ---- Semantic headings: the visual "titles" across the site (product
   names, section labels like BOOKS/MAGAZINES, page headings) were
   plain <div>/<span> with no heading tag at all — real content
   structure for screen readers and search engines, invisible to
   sighted users. Converted the wrapping element to <h2> without
   touching any inline class/style, so the look is unchanged; the
   reset.css already zeroes h1-h6 margin/padding/font-size, this
   just adds back the one thing it doesn't touch (heading elements
   render bold by default; several of these were regular-weight). ---- */

.section-title {
	font-weight: inherit;
}

/* ---- Header, mobile: the hamburger button sits at `right: 0` of
   #imMnMn, but #imMnMn has a hardcoded width (290px / 450px per
   breakpoint in template.css) sized for one reference device — on
   any wider phone that leaves a ~70px dead gap before the true edge,
   and the button's fixed 44px height also runs a few px below the
   logo's vertical center. Let the nav span the real width so
   `right: 0` lands at the actual edge, then nudge the button to
   align with the logo instead of nav's box. ---- */

@media (max-width: 719px) {
	#imMnMn.main-menu {
		width: 100% !important;
		/* template.css gives #imMnMn a permanent 15px left margin,
		   sized for the old hardcoded (narrower) width above. Once the
		   nav is stretched to width: 100%, that same 15px margin pushes
		   the whole box 15px past the right edge of the viewport —
		   the page's actual scrollable width grows by 15px, so the
		   whole layout can be dragged sideways on a real touchscreen.
		   Zeroing it here keeps the full-width nav flush with the
		   viewport instead of overhanging it. */
		margin-left: 0 !important;
	}

	#imMnMn.main-menu .hamburger-button {
		top: -9px;
		right: 12px;
	}
}

/* At ≤479px the logo is 50% bigger (see the width: 229.5px rule
   above), which moved its own top edge down without the hamburger
   button following — re-aligning the two here, after the broader
   719px rule above so it wins at this narrower range. */
@media (max-width: 479px) {
	#imMnMn.main-menu .hamburger-button {
		top: 6.45px;
	}
}

/* ---- Press page, mobile: the first three book covers (cells 1-3)
   carry a stray padding-top: 70px in pcss/press.css, vs 3px on every
   other cover. Invisible on desktop (that padding just nudges a whole
   3-column row down together), but stacked into a single mobile
   column it opens a ~76px gap after covers 1 and 2 while the rest sit
   at the normal ~12px — exactly the uneven spacing being fixed here. ---- */

@media (max-width: 719px) {
	.page-press #imCell_1,
	.page-press #imCell_2,
	.page-press #imCell_3 {
		padding-top: 3px !important;
		min-height: 12px !important;
	}
}

/* ---- Contacts page, small tablet (480-719px): at this breakpoint the
   page builder still runs the address text and the map side by side,
   but only gives the text column 131px (vs. 100% width, stacked, one
   breakpoint down at <480px). That's too narrow for the address/phone/
   email lines, which wrap into a near-unreadable single-word column
   and get clipped. Stacking here too — same layout the next breakpoint
   down already uses — fixes it instead of trying to shoehorn two
   columns into a width that was never wide enough for both.

   Each cell is actually two nested boxes (#imCell_X wraps
   #imCellStyle_X) and both carry their own fixed width at this
   breakpoint, so the outer wrapper alone isn't enough — the inner
   #imCellStyle_5 was still 131px wide even after #imCell_5 went to
   100%. #imCellStyle_5 also carries a leftover 87px bottom padding
   plus a 375px min-height (a relic of the old side-by-side layout,
   sized to match the map's height) that the <480px breakpoint doesn't
   have — collapsing those closes the dead gap between the address and
   the map. ---- */

@media (max-width: 719px) and (min-width: 480px) {
	.contacts-info-group #imCell_5,
	.contacts-info-group #imCell_9,
	.contacts-info-group #imCellStyle_5,
	.contacts-info-group #imCellStyle_9 {
		width: 100% !important;
		clear: left;
		padding-left: 5px !important;
		padding-right: 5px !important;
		box-sizing: border-box;
	}

	.contacts-info-group #imCellStyle_5 {
		min-height: 0 !important;
		padding-bottom: 3px !important;
	}
}

/* ---- Typography: swap the studio's default system fonts for one
   deliberate family, used at weight/size contrast instead of pairing. ---- */

html, body,
#imContent, #imContent *:not(script):not(style),
#imFooter, #imFooter *:not(script):not(style),
#imMnMn, #imMnMn *:not(script):not(style),
[class*="ff"] {
	font-family: 'Bricolage Grotesque', Arial, sans-serif !important;
}

body {
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

#imContent p, #imContent div, #imContent li {
	color: var(--ink);
}

/* ---- Widows/orphans: every body paragraph on the site sits in a
   `.text-inner` wrapper from the page builder. Balance ragged line
   endings without touching the thousands of purely-structural divs
   elsewhere in the markup. ---- */

.text-inner {
	text-wrap: pretty;
}

/* ---- Contrast fixes: the two real accessibility failures on the
   original site — nav copy at ~1.6:1 and breadcrumb links at ~2.3:1. ---- */

#imMnMn.main-menu > ul > li .imMnMnFirstBg > .imMnMnTxt,
#imMnMn.static-menu > ul > li .imMnMnFirstBg > .imMnMnTxt,
#imMnMn.main-menu li, #imMnMn.main-menu li a,
#imMnMn.static-menu li, #imMnMn.static-menu li a {
	color: var(--ink) !important;
	letter-spacing: 0.01em;
}

#imMnMn.main-menu > ul > li:hover .imMnMnFirstBg > .imMnMnTxt,
#imMnMn.static-menu > ul > li:hover .imMnMnFirstBg > .imMnMnTxt,
#imMnMn .imMnMnCurrent .imMnMnFirstBg > .imMnMnTxt {
	color: var(--brand) !important;
}

.imBreadcrumb a, .imBreadcrumb a:link, .imBreadcrumb a:hover, .imBreadcrumb a:visited, .imBreadcrumb a:active {
	color: var(--ink-muted) !important;
}

#imMnMn.main-menu .hamburger-bar,
#imMnMn.static-menu .hamburger-bar {
	background-color: var(--ink) !important;
	transition: background-color 0.2s var(--ease-out);
}

#imMnMn.main-menu .hamburger-menu-close-button,
#imMnMn.static-menu .hamburger-menu-close-button {
	color: var(--ink) !important;
}

/* ---- Fullscreen mobile nav: the page builder's mobile menu was a
   160px-wide strip sliding in from the right, with 10pt text in
   17px-tall clipped boxes. Replaced with a fullscreen overlay —
   large centered links, no clipping, no slide-in sprite art. ---- */

@media (max-width: 719px) {
	#imMnMn.main-menu .hamburger-menu-background {
		width: 100vw !important;
		/* Transparent: the fullscreen <ul> below supplies the white
		   background. This layer exists only to host the close button
		   and must sit above the <ul>'s own stacking context (z-index
		   11) or the button's own z-index is scoped to this container
		   and can't out-rank a sibling context no matter how high. */
		background-color: transparent !important;
		z-index: 13 !important;
		pointer-events: none;
	}

	#imMnMn.main-menu > ul {
		width: 100vw !important;
		top: 0 !important;
		height: 100dvh !important;
		background-color: rgba(255, 255, 255, 0.7);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: clamp(0.425rem, 2.55vh, 1.0625rem);
		transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
		transform: scale(1);
	}

	#imMnMn.main-menu > ul.menu-mobile-hidden {
		right: 0 !important;
		opacity: 0;
		transform: scale(0.97);
		pointer-events: none;
	}

	#imMnMn.main-menu li {
		width: auto !important;
		margin: 0 !important;
	}

	#imMnMn.main-menu .imMnMnTxt {
		max-height: none !important;
		overflow: visible !important;
		border: none !important;
		padding: 0.5rem 0 !important;
		width: auto !important;
	}

	#imMnMn.main-menu li, #imMnMn.main-menu li a {
		font-size: clamp(1.5rem, 6vw, 2.25rem);
		font-weight: 600;
		text-align: center;
		letter-spacing: -0.01em;
		background-color: transparent !important;
	}

	#imMnMn.main-menu ul li.imPage:hover,
	#imMnMn.main-menu ul li.imPage:hover .imMnMnTxt {
		background-color: transparent !important;
		border-color: transparent !important;
	}

	#imMnMn.main-menu .empty-separator,
	#imMnMn.main-menu li.imMnMnSeparator {
		display: none;
	}

	/* Decoupled from its 160px-wide, 40px-tall container so it stays
	   pinned top-right of the true fullscreen viewport, not just the
	   corner of the old narrow panel. */
	#imMnMn.main-menu .hamburger-menu-close-button {
		position: fixed !important;
		top: 0;
		right: 0;
		z-index: 12;
		width: 105.6px;
		height: 105.6px;
		pointer-events: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
	}

	#imMnMn.main-menu .hamburger-menu-close-button span {
		font-size: 4.2rem;
		font-weight: 300;
		color: #1f59ab;
		line-height: 1;
	}
}

@media (max-width: 719px) and (prefers-reduced-motion: reduce) {
	#imMnMn.main-menu > ul {
		transition: opacity 0.2s linear !important;
		transform: none !important;
	}
	#imMnMn.main-menu > ul.menu-mobile-hidden {
		transform: none !important;
	}
}

/* ---- Links: consistent brand-blue treatment with a real hover state
   instead of the flat, static default. ---- */

#imContent a:not([class*="fs"]):not(.imMnMnTxt):not(.product-card-link) {
	color: var(--brand);
	transition: color 0.2s var(--ease-out);
}

#imContent a:not([class*="fs"]):not(.imMnMnTxt):not(.product-card-link):hover {
	color: var(--brand-ink);
}

/* ---- Focus: the site's own reset.css sets `:focus { outline: 0; }`
   globally with nothing to replace it — every link, button and the
   hamburger menu were completely invisible to keyboard navigation.
   This restores a visible indicator everywhere, using :focus-visible
   so it only shows for keyboard/assistive-tech focus, not mouse
   clicks. More specific component rules below (gallery arrows) win
   over this on their own elements. ---- */

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: 2px;
}

#imMnMn .hamburger-button:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -4px;
	border-radius: 4px;
}

/* ---- Motion: purposeful, restrained micro-interactions on the
   interactive surfaces that had none — gallery arrows, product imagery. ---- */

#imContent img {
	transition: filter 0.35s var(--ease-out);
}

@media (hover: hover) {
	#imGallery img:not([src*="b12_"]):hover,
	#imCell_3 img:not([src*="b12_"]):hover {
		filter: brightness(1.10) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.22));
	}
}

/* ---- Product gallery: replaces the old WebSite X5 slideshow widget.
   Crossfade between real <img> slides; prev/next are real <button>s
   (keyboard-focusable, unlike the old plain <img> click targets). ---- */

.product-gallery {
	position: relative;
}

.product-gallery__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: #f4f4f4;
}

/* #imContent img (below) sets its own `transition: filter ...` at
   higher specificity (id + type vs. this rule's single class) — a
   shorthand collision where the more specific rule wins outright
   rather than merging, which was silently swallowing this opacity
   transition and making every slide change an instant cut instead of
   a crossfade. #imContent scopes this rule to the same specificity
   tier so both transitions actually apply. */
#imContent .product-gallery__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.1s ease-in-out;
}

#imContent .product-gallery__slide.is-active {
	opacity: 1;
}

.product-gallery__prev, .product-gallery__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
	/* Soft shadow instead of a solid backing shape, so a white chevron
	   stays legible on both light and dark product photos without a
	   circle (or any other shape) behind it. */
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

/* Inset within the image, not protruding past its edge — a parent
   .imPageRow (page-builder base CSS) has overflow: hidden, which
   clipped the old -22px protruding position into a thin sliver. */
.product-gallery__prev { left: 16px; }
.product-gallery__next { right: 16px; }

/* Chevron drawn in CSS — the old gallery/b12_l.png and b12_r.png
   assets baked a dark circular backing directly into the icon
   artwork itself, so removing the button's own background (done
   earlier) couldn't remove it. This replaces the images entirely. */
.product-gallery__prev::before, .product-gallery__next::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-style: solid;
	border-color: #fff;
	border-width: 0 3px 3px 0;
}

.product-gallery__prev::before {
	transform: translate(-20%, -50%) rotate(135deg);
}

.product-gallery__next::before {
	transform: translate(-70%, -50%) rotate(-45deg);
}

.product-gallery__prev:hover, .product-gallery__next:hover {
	transform: translateY(-50%) scale(1.08);
}

.product-gallery__prev:focus-visible, .product-gallery__next:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: 50%;
}

@media (max-width: 767px) {
	.product-gallery__prev, .product-gallery__next {
		/* Just the chevron — no circle, no backing shape. Padding keeps
		   a 44px touch target (WCAG 2.5.5) invisibly. */
		width: 24px;
		height: 24px;
		top: auto;
		bottom: 6px;
		padding: 10px;
		box-sizing: content-box;
		background-color: transparent;
	}
	.product-gallery__prev { left: 4px; }
	.product-gallery__next { right: 4px; }

	.product-gallery__prev::before, .product-gallery__next::before {
		width: 8px;
		height: 8px;
		border-width: 0 2.5px 2.5px 0;
	}
}

/* ---- Footer polish: legible copy, hover feedback on social icons. ---- */

#imFooter a {
	transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
	display: inline-block;
}

#imFooter a:hover {
	opacity: 0.72;
}

/* ---- Fixed-width legacy title boxes: WebSite X5 sizes these to the
   exact pixel width of the original font. Bricolage Grotesque runs
   slightly wider at the same point size, so the copyright/VAT line
   was clipping ("All rights reserve|d" lost its last letter). Let
   these specific short one-line labels overflow their box instead of
   clipping it — they sit in open footer space with room to spare. ---- */

[id^="imFooter_imObjectTitle_"] {
	overflow: visible !important;
}

/* Center on the viewport at every width instead of the page builder's
   fixed per-breakpoint left/width pixel values, which only lined up
   at its reference widths and drifted off-center everywhere else
   (18px off on a 375px phone). */
[id^="imFooter_imObjectTitle_"][id$="_wrapper"] {
	overflow: visible !important;
	left: 50% !important;
	right: auto !important;
	width: max-content !important;
	max-width: 90vw;
	transform: translateX(-50%);
	text-align: center;
}

/* The source text has a trailing space baked in ("...reserved. ",
   "...IT12384830159 ") and the page builder sets white-space: pre on
   it, which preserves that space as real width — the box was ~7px
   wider than the visible text, throwing the visual center off by
   half that. white-space: normal lets it collapse like any other
   HTML whitespace. */
[id^="imFooter_imObjectTitle_"][id$="_text"] {
	white-space: normal !important;
}

/* ---- Footer: everything (social icons, copyright, VAT, the new
   Privacy Policy link) centered as one column, at every breakpoint.
   The page builder positioned each piece with its own fixed-pixel
   absolute coordinates — workable for two lines of text, but adding
   a third line and keeping the icon row aligned with it needs a real
   layout instead of more one-off pixel math per breakpoint. Flex
   column replaces the absolute positioning entirely; it matches what
   the fixed coordinates were already approximating on desktop, so
   the visual result there is unchanged. ---- */

/* #imFooterBg is a separate, independently absolute-positioned
   layer (bottom: 0, no top) meant to back the footer with gray —
   its height can't auto-track a sibling's height via CSS alone, so
   once the footer grew past its old fixed 100px it stopped covering
   the icon row (icons rendered above the gray, not inside it). Paint
   the background on #imFooter itself instead, which already sizes
   correctly to its real content, and retire the now-redundant layer. */
#imFooterBg {
	display: none !important;
}

#imFooter {
	background-color: #E0E0E0;
}

#imFooter, #imFooterObjects {
	height: auto !important;
	min-height: 100px;
}

#imFooterObjects {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px 16px;
	box-sizing: border-box;
}

.footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

#imFooter_imObjectImage_12_wrapper,
#imFooter_imObjectImage_13_wrapper,
#imFooter_imObjectImage_14_wrapper {
	position: static !important;
}
/* DOM order is Instagram, Facebook, LinkedIn; restore the original
   visual order (Facebook, LinkedIn, Instagram). */
#imFooter_imObjectImage_13_wrapper { order: 1; }
#imFooter_imObjectImage_14_wrapper { order: 2; }
#imFooter_imObjectImage_12_wrapper { order: 3; }

#imFooter #imFooter_imCell_18,
#imFooter #imFooter_imCellStyle_18,
#imFooter #imFooter_imCell_19,
#imFooter #imFooter_imCellStyle_19 {
	/* These footer cells (copyright, VAT) carry a fixed per-breakpoint
	   width (e.g. 211px) from the page builder, sized for the original
	   short single-line text. That width forced "All rights reserved"
	   onto its own line. width: auto lets the cell size to its content
	   so the copyright line stays on one line like every other footer
	   line. */
	width: auto !important;
	max-width: 90vw;
}

[id^="imFooter_imObjectTitle_"][id$="_wrapper"] {
	position: static !important;
	left: auto !important;
	transform: none !important;
	width: auto !important;
	max-width: none;
	/* The page builder's fixed height (13-22px depending on breakpoint)
	   was sized for one line. The copyright text now wraps to two
	   lines via <br>, so the second line overflowed past this box's
	   bottom edge — eating into the flex gap below it and making that
	   gap look smaller than the gap before/after every other footer
	   line. height: auto lets the box size to its real content so the
	   flex `gap` on #imFooterObjects reads identically everywhere. */
	height: auto !important;
}

.footer-legal-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.footer-privacy-trigger,
.footer-disclaimer-trigger {
	color: var(--ink-muted);
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.footer-privacy-trigger:hover,
.footer-disclaimer-trigger:hover {
	color: var(--brand);
}

/* ---- Privacy Policy popup: a native <dialog>, so focus trapping,
   Escape-to-close and top-layer stacking come for free. ---- */

.privacy-dialog {
	border: none;
	border-radius: 12px;
	padding: 0;
	width: min(90vw, 560px);
	max-height: 80vh;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	color: var(--ink);
}

.privacy-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.privacy-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--hairline);
	position: sticky;
	top: 0;
	background: var(--paper);
}

.privacy-dialog__header h2 {
	margin: 0;
	font-size: 1.25rem;
}

.privacy-dialog__close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--ink);
	font-size: 1.75rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	flex-shrink: 0;
}

.privacy-dialog__close:hover {
	color: var(--brand);
}

.privacy-dialog__body {
	padding: 0.5rem 1.5rem 1.5rem;
	overflow-y: auto;
	max-height: calc(80vh - 68px);
}

.privacy-dialog__body h3 {
	font-size: 1.05rem;
	line-height: 1.35;
	margin: 1.25rem 0 0.4rem;
	color: var(--brand);
}

.privacy-dialog__body p {
	margin: 0.4rem 0;
	line-height: 1.6;
}

@media (max-width: 719px) {
	.privacy-dialog {
		width: min(94vw, 560px);
	}
}

/* ---- Reduced motion: every added transition/transform gets a
   crossfade-or-nothing fallback. ---- */

@media (prefers-reduced-motion: reduce) {
	.product-gallery__prev:hover, .product-gallery__next:hover {
		transform: translateY(-50%);
	}
	.product-gallery__slide {
		transition: none !important;
	}
	#imContent img, #imFooter a, #imContent a, #imMnMn .hamburger-bar {
		transition: none !important;
	}
}

/* ==========================================================================
   Header logo click target
   The nav container #imMnMn (z-index:10000) overlaps the header logo and was
   intercepting clicks on it, so the logo never linked back home. Let clicks
   pass through the container's empty area while every real control stays live.
   ========================================================================== */
#imMnMn {
	pointer-events: none;
}
#imMnMn a,
#imMnMn button,
#imMnMn li,
#imMnMn .hamburger-button,
#imMnMn .hamburger-menu-close-button,
#imMnMn .hamburger-site-background,
#imMnMn .hamburger-menu-background {
	pointer-events: auto;
}

/* ==========================================================================
   Contacts page — breathing room between the map and the grey footer
   ========================================================================== */
.page-contacts #imFooter {
	margin-top: 48px;
}

/* Mobile: halve the large top padding above the address text (header→text) and
   above the map (text→map) — WebSite X5 uses a fixed 100px at every breakpoint,
   which leaves too much empty space on phones. Desktop keeps the 100px. */
@media (max-width: 719px) {
	.page-contacts #imCell_5 {
		padding-top: 50px;   /* header → text */
	}
	.page-contacts #imCell_9 {
		padding-top: 25px;   /* text → map */
	}
}

/* ==========================================================================
   Back-to-top button (desktop only) — injected by js/back-to-top.js on the
   long Home and Products pages.
   ========================================================================== */
.back-to-top {
	position: fixed;
	right: 28px;
	bottom: 28px;
	width: 48px;
	height: 48px;
	display: none;               /* shown only on desktop, see media query */
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--brand, #1f59aa);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: opacity 0.3s var(--ease-out, ease), transform 0.3s var(--ease-out, ease), background-color 0.2s ease;
	z-index: 9000;
}
.back-to-top svg {
	width: 22px;
	height: 22px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.back-to-top:hover {
	background: var(--brand-ink, #123362);
}
.back-to-top:focus-visible {
	outline: 2px solid var(--brand-ink, #123362);
	outline-offset: 3px;
}
@media (min-width: 720px) {
	.back-to-top {
		display: flex;
	}
}
@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: opacity 0.3s ease;
		transform: none;
	}
	.back-to-top.is-visible {
		transform: none;
	}
}

/* ==========================================================================
   Keep images proportional at every breakpoint
   Images carry width/height attributes (reserve space, fix CLS). Those
   attributes also act as a presentational height hint. At WebSite X5's
   smallest breakpoints the generated CSS sets width:100% but leaves height
   unset, so that fixed hint took over and squashed the picture (product
   covers stretched tall, round social icons turned oval). Forcing height:auto
   lets the width/height aspect-ratio drive a proportional height instead. The
   per-object desktop rules (id-level specificity) still win where they set an
   explicit height, so desktop is unchanged; gallery slides keep their
   object-fit:cover fixed box and are excluded. */
img[width][height]:not(.product-gallery__slide) {
	height: auto;
}

/* ==========================================================================
   About page — portrait fills the screen width on phones
   WebSite X5 caps the portrait at its 279px design width; lift that cap at the
   phone breakpoint so it spans the full content column (~359px). The 1000x1000
   source is high-res, so there's no upscaling blur; height stays auto (square).
   ========================================================================== */
@media (max-width: 479px) {
	#imTextObject_8_16_tab0 .image-0 {
		max-width: 100%;
	}
}