/*
 * Opranic 2027: base styles.
 * Tokens, reset, typography, buttons, header, footer, content wrapper, utilities.
 * Designed at 1440px, fluid down to 360px.
 * Fonts are self-hosted by another component; only family names are used here.
 */

@view-transition { navigation: auto; }

:root {
	--o27-orange: #EE9305;
	--o27-dark: #15181C;
	--o27-offwhite: #FAFAFA;
	--o27-grey: #F2F3F5;
	--o27-text: #3D4147;
	--o27-heading: #15181C;
	--o27-muted: #5E636B;
	--o27-linelabel: #955900;
	--o27-border: #E3E4E6;
	--o27-on-dark: #B8BEC5;
	--o27-on-dark-soft: #C6C8CD;
	--o27-orange-soft: #F5AC35;
	--o27-star: #B26E00;
	/* Keyboard focus ring (0.9.33). Deeper than the brand orange so that it holds at least 3:1 against white, the light
	   grey, the dark header and the mega panel alike. */
	--o27-focus: #B26E00;
	--o27-shadow-header: 0 16px 32px rgba(0, 0, 0, 0.38);
	--o27-radius-card: 24px;
	--o27-radius-panel: 48px;
	--o27-wrap: 1440px;
	--o27-pad: 32px;
	--o27-font-body: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--o27-font-head: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--o27-font-accent: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--o27-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset */
/* WooCommerce's default stylesheets are loaded on the cart, the checkout and the account pages only (0.9.28). Their
   rule ".woocommerce img { height: auto; max-width: 100% }" was kept here for the shop, category and product pages
   until 0.9.37. It was removed because it outranked the theme's own picture sizes there: product card pictures grew
   out of their frame, and the footer logo, the small thumbnails and the model badge in the buy box story took wrong
   sizes. The reset below (img: max-width 100%, height auto) is what keeps proportions, at a rank that theme classes
   can set aside. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: #fff;
	color: var(--o27-text);
	font-family: var(--o27-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
a {
	color: inherit;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--o27-ease);
}
a:hover { color: var(--o27-orange); }
/* WooCommerce prints the current price of a reduced product in <ins>, which browsers underline. No price is underlined. */
ins { text-decoration: none; }

/* Focus */
:focus-visible {
	outline: 3px solid var(--o27-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Utilities */
.o27-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.o27-wrap {
	width: 100%;
	max-width: var(--o27-wrap);
	margin-inline: auto;
	padding-inline: var(--o27-pad);
}
.o27-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--o27-orange);
	color: var(--o27-dark);
	font-weight: 700;
	text-decoration: none;
}
.o27-skip:focus { top: 8px; color: var(--o27-dark); }

/* Typography */
.o27-h2 {
	font-family: var(--o27-font-head);
	font-weight: 300;
	font-size: clamp(2rem, 3.4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--o27-heading);
}
.o27-h2--light { color: #fff; }
.o27-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--o27-linelabel);
}
/* The brand orange is too light for small text on white (2.4:1). It stays on dark surfaces (0.9.33). */
:is(.o27-hero, .o27-cathero) .o27-eyebrow { color: var(--o27-orange); }
.o27-eyebrow--light { font-size: 0.8125rem; color: var(--o27-orange-soft); }
.o27-linelabel {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--o27-linelabel);
}
.o27-accent {
	font-family: var(--o27-font-accent);
	font-style: italic;
	font-weight: 500;
	font-size: 1.875rem;
	line-height: 1.2;
	color: #F0F0F0;
}
.o27-accent--sm { font-size: 1.75rem; color: #E5E1DA; }

/* Buttons */
.o27-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Buttons sink a little when pressed. */
.o27-btn:active { transform: translateY(1px) scale(0.96); }
.o27-btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.875rem; font-weight: 600; }
.o27-btn--md { min-height: 48px; padding: 0 24px; font-weight: 600; }
.o27-btn--primary { background: var(--o27-orange); color: var(--o27-dark); }
.o27-btn--primary:hover { background: var(--o27-orange-soft); color: var(--o27-dark); }
.o27-btn--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; font-weight: 600; }
.o27-btn--ghost:hover { border-color: var(--o27-orange); color: var(--o27-orange); }
.o27-btn--dark { background: var(--o27-dark); color: #fff; }
.o27-btn--dark:hover { background: var(--o27-orange); color: var(--o27-dark); }
.o27-textlink {
	padding: 12px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--o27-heading);
	text-decoration: underline;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.o27-ulink {
	padding: 12px 0;
	color: #fff;
	font-size: 0.9375rem;
	text-decoration: underline;
	text-underline-offset: 5px;
}


/* Cards: soft resting shadow, lift and orange glow on hover, sink when pressed (links only) */
.o27-card{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;box-shadow:0 1px 2px rgba(21,24,28,.06),0 8px 24px rgba(21,24,28,.06)}
.o27-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(238,147,5,.55),0 10px 30px rgba(238,147,5,.28),0 24px 48px rgba(21,24,28,.14)}
a.o27-card:hover{color:inherit}
a.o27-card:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 8px rgba(21,24,28,.22),0 0 0 1px rgba(238,147,5,.5);transition-duration:.08s}
a.o27-card:focus-visible{outline:3px solid var(--o27-focus);outline-offset:3px;box-shadow:0 0 0 1px rgba(238,147,5,.55),0 10px 30px rgba(238,147,5,.28),0 24px 48px rgba(21,24,28,.14)}
@media (prefers-reduced-motion: reduce){.o27-card,.o27-card:hover,a.o27-card:active,.o27-btn:active{transform:none}}

/* Fading divider */
.o27-fadeline {
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, #EE9305 50%, transparent 100%);
}

/* Top strip */
.o27-topbar { background: var(--o27-dark); color: var(--o27-on-dark); font-size: 0.75rem; letter-spacing: 0.02em; }
.o27-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 32px;
	min-height: 44px;
}
.o27-topbar__left { display: flex; align-items: center; gap: 16px; }
.o27-langnav { display: flex; align-items: center; margin-left: auto; font-weight: 700; }
.o27-langnav__link {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	padding: 0 10px;
	text-decoration: none;
}
.o27-langnav__link[aria-current="true"] { color: #fff; box-shadow: inset 0 -2px 0 var(--o27-orange); }
/* The line fades out towards both ends. The dark base keeps the page background from showing through the faded ends. */
.o27-topline { height: 1px; background: linear-gradient(90deg, transparent 0%, #B8BEC5 50%, transparent 100%), var(--o27-dark); }

/* Header */
.o27-header {
	position: relative;
	z-index: 3;
	background: var(--o27-dark);
	color: #fff;
	box-shadow: var(--o27-shadow-header);
}
.o27-header__inner {
	display: flex;
	align-items: center;
	gap: 8px 32px;
	min-height: 72px;
}
.o27-header__logo { display: flex; align-items: center; flex: none; }
.o27-header__logo img { height: 44px; width: auto; }
.o27-header__spacer { flex: 1; }
.o27-header__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.o27-nav { flex: 1; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.o27-nav__list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.o27-nav :is(a, button):not(.o27-mega__feat *),
.o27-nav__text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none;
	cursor: pointer;
}
.o27-nav button:hover { color: var(--o27-orange); }
.o27-nav__list > li:first-child > :is(a, button) { padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.o27-nav .o27-has-mega > :is(a, button)::after {
	content: "";
	flex: none;
	width: 10px;
	height: 6px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23EE9305' stroke-width='1.8'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.25s var(--o27-ease);
}
.o27-nav .o27-has-mega > [aria-expanded="true"]::after { transform: rotate(180deg); }

/* Desktop bar: items stretch to the full header height, so the pointer never
   leaves the item while moving down into the mega panel. */
.o27-nav--desktop { align-self: stretch; min-width: 0; }
.o27-nav--desktop .o27-nav__list { flex-wrap: nowrap; height: 100%; align-items: stretch; }
.o27-nav--desktop .o27-nav__list > li { display: flex; align-items: center; flex: none; }

/* Mega panel ("jumbomeny"): full width, directly under the header (which is position: relative).
   Out of flow, so opening it never shifts the page. */
.o27-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 4;
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	background: var(--o27-dark);
	color: var(--o27-on-dark);
	font-size: 0.9375rem;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: 0;
	border-top: 1px solid #2A2F36;
	border-radius: 0 0 32px 32px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
	transition: opacity 0.25s ease, transform 0.25s var(--o27-ease), visibility 0s linear 0.25s;
}
.o27-nav--desktop .o27-has-mega:hover > .o27-mega,
html:not(.o27-js) .o27-nav--desktop .o27-has-mega:focus-within > .o27-mega,
.o27-nav--desktop .o27-has-mega.is-open > .o27-mega,
.o27-mega.is-forced-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
}
/* Escape closes the panel even while focus is still inside it. */
.o27-nav--desktop .o27-has-mega.is-dismissed > .o27-mega {
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}
.o27-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	grid-auto-columns: auto;
	gap: 40px;
	padding-block: 40px 48px;
}
.o27-mega__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px 40px;
	align-content: start;
}
.o27-mega__col { display: flex; flex-direction: column; gap: 6px; }
.o27-nav .o27-mega .o27-mega__cols a,
.o27-nav .o27-mega .o27-mega__head {
	display: block;
	min-height: 0;
	padding: 8px 0;
	border-radius: 0;
	background: transparent;
	color: var(--o27-on-dark);
	font-weight: 400;
}
.o27-nav .o27-mega .o27-mega__cols a:hover { color: var(--o27-orange); background: transparent; }
.o27-nav .o27-mega .o27-mega__cols .o27-mega__head {
	padding: 4px 0 12px;
	font-family: var(--o27-font-head);
	font-size: 1.5rem;
	line-height: 1.25;
	color: #fff;
}
.o27-mega__links { display: flex; flex-direction: column; gap: 6px; }
.o27-mega__label { padding: 12px 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: #8E959D; }
.o27-mega__feat { width: clamp(240px, 22vw, 320px); }

/* Search */
.o27-search {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #4A515A;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--o27-on-dark);
}
.o27-search:focus-within { border-color: var(--o27-orange); }
.o27-search__label { display: flex; flex: 1; }
.o27-search__input {
	width: 190px;
	max-width: 100%;
	height: 42px;
	flex: 1;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 0.875rem;
	outline: none;
}
.o27-search__input::placeholder { color: var(--o27-on-dark); opacity: 1; }
.o27-search .o27-btn { margin-right: -12px; }

/* Icon buttons and badge */
.o27-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	list-style: none;
	text-decoration: none;
}
.o27-iconbtn::-webkit-details-marker { display: none; }
.o27-iconbtn:hover { color: var(--o27-orange); }
.o27-badge {
	position: absolute;
	top: 4px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--o27-orange);
	color: var(--o27-dark);
	font: 700 0.6875rem/1.125rem var(--o27-font-body);
	text-align: center;
}
.o27-badge[hidden] { display: none; }

/* Mobile panels (details). Hidden on wide screens, where the inline versions show. */
.o27-panelbtn { display: none; }
.o27-drop {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: 16px var(--o27-pad) 24px;
	background: var(--o27-dark);
	box-shadow: var(--o27-shadow-header);
	border-top: 1px solid #2a2f36;
}
.o27-drop .o27-search { max-width: 560px; margin-inline: auto; padding-right: 12px; }
/* The field may shrink, so the form stays inside the panel when the visitor's text size is larger than the default (0.9.36). */
.o27-drop .o27-search__label { min-width: 0; }
.o27-drop .o27-search__input { width: 100%; min-width: 0; }
.o27-nav--mobile .o27-nav__list { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.o27-nav--mobile .o27-nav__list > li:first-child > a { background: transparent; padding: 0 14px; border-radius: 0; }
.o27-nav--mobile a { width: 100%; border-bottom: 1px solid #2a2f36; font-size: 1rem; }
.o27-nav--mobile .sub-menu { display: block; padding: 0 0 0 16px; background: transparent; box-shadow: none; }
.o27-nav--mobile .sub-menu .sub-menu { padding-left: 16px; }
.o27-nav--mobile .sub-menu a { font-size: 0.9375rem; font-weight: 400; color: var(--o27-on-dark); }
/* The short list under the main menu in the mobile panel (call, cart): the previous theme's icon links (0.9.40). */
.o27-nav--mobile .o27-nav__list--extra { margin-top: 12px; }
.o27-nav--mobile .o27-nav__list--extra a { border-bottom: 0; font-size: 0.9375rem; font-weight: 400; color: var(--o27-on-dark); }

/* Medium desktop: tighter gaps and type so the bar stays on one row. The search field shrinks first. */
@media (min-width: 1024px) and (max-width: 1440px) {
	.o27-header__inner { gap: 8px 20px; }
	.o27-nav { font-size: 0.8125rem; letter-spacing: 0.01em; }
	.o27-nav__list { gap: 2px; }
	.o27-nav :is(a, button):not(.o27-mega__feat *), .o27-nav__text { padding: 0 10px; gap: 6px; }
	.o27-nav__list > li:first-child > :is(a, button) { padding: 0 12px; }
}
.o27-search--desktop { flex: 0 1 240px; min-width: 0; }
.o27-search--desktop .o27-search__label { min-width: 0; }
.o27-search--desktop .o27-search__input { width: 100%; min-width: 0; }
@media (min-width: 1024px) and (max-width: 1280px) {
	.o27-search--desktop { flex-basis: 190px; padding: 0 12px; }
}

@media (max-width: 1023px) {
	.o27-nav--desktop,
	.o27-search--desktop { display: none; }
	.o27-panelbtn { display: block; }
	.o27-header__inner { gap: 8px; }
	.o27-header__logo img { height: 36px; }
}
@media (max-width: 640px) {
	:root { --o27-pad: 16px; }
	.o27-topbar__inner { padding-block: 0; }
}

/* Content wrapper (subpages). Typography lives in content.css. */
.o27-main { padding-block: 0 112px; min-height: 50vh; }
.o27-entry__title {
	margin-bottom: 16px;
	font-family: var(--o27-font-head);
	font-weight: 400;
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.2;
	color: var(--o27-heading);
}
.o27-entry__title a { text-decoration: none; }
.o27-main .woocommerce-pagination a,
.o27-main .nav-links a { padding: 8px 12px; }

/* Footer */
.o27-footer {
	position: relative;
	margin-top: -48px;
	overflow: hidden;
	border-radius: var(--o27-radius-panel) var(--o27-radius-panel) 0 0;
	background: var(--o27-dark);
	color: var(--o27-on-dark);
	font-size: 0.9375rem;
}
.o27-footer__line {
	height: 3px;
	margin-top: 48px;
	background: linear-gradient(90deg, transparent 0%, #EE9305 50%, transparent 100%);
}
.o27-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px 56px;
	padding-block: 56px 48px;
}
.o27-footer__collection { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; }
.o27-footer__logo { height: 26px; width: auto; margin-bottom: 18px; }
.o27-footer__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--o27-orange);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.o27-footer__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--o27-orange); }
.o27-footer__heading { font-family: var(--o27-font-head); font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; color: #fff; }
.o27-footer__text { font-size: 0.9375rem; }
.o27-footer__catalogue { min-height: 46px; margin-top: 8px; gap: 14px; }
.o27-footer__badges { display: flex; flex-direction: column; gap: 22px; }
.o27-footer__logos { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.o27-footer .o27-footer__logos img { width: auto; height: 34px; max-width: 100%; object-fit: contain; object-position: left center; }
.o27-footer .o27-footer__logos .o27-footer__logo--wide { height: 21px; }
.o27-footer__rule { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(238, 147, 5, 0.75) 50%, transparent 100%); }
.o27-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 40px 32px;
	padding-block: 48px 48px;
}
.o27-footer__col { display: flex; flex-direction: column; gap: 14px; }
/* Capitals are allowed in the footer (Mats, 15 November 2026), kept small and evenly spaced. */
.o27-footer__title {
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.o27-footer__title--icon { display: flex; align-items: center; gap: 10px; }
.o27-footer__title--icon svg { flex: none; width: 18px; height: 18px; color: var(--o27-orange); }
.o27-footer__list { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.o27-footer__list li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.o27-footer__list a,
.o27-footer__col li a {
	display: block;
	padding: 11px 0;
	color: var(--o27-on-dark);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
}
.o27-footer__list a:hover,
.o27-footer__col li a:hover { color: var(--o27-orange); }
.o27-footer__col .o27-footer__list--lang li a { display: flex; align-items: center; gap: 10px; }
.o27-footer .o27-footer__flag { flex: none; width: 18px; height: 12px; object-fit: cover; border-radius: 1px; }
.o27-footer__col a[aria-current="true"] { color: #fff; }
.o27-footer__rating { display: flex; flex-direction: column; gap: 12px; }
.o27-footer__phone { color: #fff; font-weight: 600; text-decoration: none; }
.o27-footer__phone:hover { color: var(--o27-orange); }
.o27-footer__phonelabel { margin-right: 6px; font-weight: 400; color: var(--o27-on-dark); }
.o27-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 20px;
	padding-bottom: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8125rem;
	color: var(--o27-on-dark);
}
@media (max-width: 900px) {
	.o27-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding-block: 44px 36px; }
	.o27-footer__collection { grid-column: 1 / -1; }
	.o27-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; padding-block: 36px; }
	.o27-footer__title { letter-spacing: 0.04em; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
	.o27-footer .o27-footer__logos img { height: 28px; }
	.o27-footer .o27-footer__logos .o27-footer__logo--wide { height: auto; max-height: 21px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	/* Animations jump to their end state and nothing glides or slides. Colour, opacity and shadow changes keep
	   their short fades, because those are not movement (0.9.33; before, every transition was cut to nothing). */
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* Wide panels and risers may reach past the viewport edge by design; the page never scrolls sideways. */
body.o27 { overflow-x: clip; }

/* Mega panel, adjusted 14 November 2026 on request: lighter surface, smaller headings, glow around the item on hover. */
.o27-mega { background: #2A3038; border-top-color: #3A414B; color: #E3E6EA; }
.o27-nav .o27-mega .o27-mega__cols a, .o27-nav .o27-mega .o27-mega__head { color: #E3E6EA; margin-inline: -12px; padding: 8px 12px; border-radius: 12px; transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; }
.o27-nav .o27-mega .o27-mega__cols .o27-mega__head { padding: 6px 12px; margin-bottom: 6px; font-size: 1.125rem; font-weight: 400; color: #fff; }
.o27-nav .o27-mega .o27-mega__cols a:hover, .o27-nav .o27-mega .o27-mega__cols a:focus-visible { color: #fff; background: rgba(238, 147, 5, 0.10); box-shadow: 0 0 0 1px rgba(238, 147, 5, 0.55), 0 6px 22px rgba(238, 147, 5, 0.22); }
.o27-mega__label { color: #A9B0B9; }

/* Language switcher, adjusted 14 November 2026 on request: the chosen language rests in a soft orange glow, others glow on hover. */
.o27-langnav { gap: 4px; }
.o27-langnav__link { position: relative; display: inline-flex; align-items: center; height: 30px; min-height: 0; padding: 0 10px; margin: 7px 0; border-radius: 10px; transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; }
.o27-langnav__link::after { content: ""; position: absolute; inset: -7px -2px; }
.o27-langnav__link:hover, .o27-langnav__link:focus-visible { color: #fff; background: rgba(238, 147, 5, 0.10); box-shadow: 0 0 0 1px rgba(238, 147, 5, 0.45), 0 4px 16px rgba(238, 147, 5, 0.18); }
.o27-langnav__link[aria-current="true"] { color: #fff; background: rgba(238, 147, 5, 0.14); box-shadow: 0 0 0 1px rgba(238, 147, 5, 0.65), 0 4px 18px rgba(238, 147, 5, 0.32); }
/* Forced colours (Windows high contrast) drop shadows and tints, so the chosen language and the hovered or focused menu
   entries get a real outline there (0.9.33). */
@media (forced-colors: active) {
	.o27-langnav__link[aria-current="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
	.o27-nav .o27-mega .o27-mega__cols a:is(:hover, :focus-visible),
	.o27-langnav__link:is(:hover, :focus-visible) { outline: 2px solid Highlight; }
}

/* Press feel (Mats, 15 November 2026): buttons and clickable cards sink a little when pressed, for more depth across the site.
   Cards that are links press as a whole; cards that contain links press while one of their links is pressed. */
@media (prefers-reduced-motion: no-preference) {
	body.o27 :is(a.o27-card, a.o27-tile, a.o27-promo, a.o27-article-card, a.product-card, a.card, a.ab-card):active,
	body.o27 :is(.o27-card, .o27-tile, .o27-promo, .o27-article-card, .product-card):has(a:active) {
		transform: translateY(1px) scale(0.985);
		box-shadow: inset 0 2px 8px rgba(21, 24, 28, 0.22), 0 0 0 1px rgba(238, 147, 5, 0.5);
		transition-duration: 0.08s;
	}
	/* The details element around a mobile panel is NOT in this list (0.9.41): a press anywhere inside the open panel
	   made it active, the transform turned it into the positioning box of the panel, and the panel collapsed into the
	   button before the tap could land. The button inside it (.o27-iconbtn) carries the press feel. */
	body.o27 :is(.o27-iconbtn, .o27-fchip, .o27-swatch, .o27-psw__pill, .o27-pplan__btn, .o27-langnav__link, .o27-chip, .oprbb-btn, .oprbb-btn-a, .oprbb-chip, .ab-btn, .cta-orange-btn, .opr-product-cta, .modebar__btn, .wp-element-button, .o27-main .button, .o27-content .btn, .o27-nav--desktop > ul > li > a):not(:disabled):active,
	body.o27 .o27-card:has(a:active) .o27-btn {
		transform: translateY(1px) scale(0.96);
		transition-duration: 0.08s;
	}
}

/* Main menu (Mats, 15 November 2026): the top level labels and the column headings of the jumbo menu are set in
   capitals at a balanced size, and a faint line that fades at both ends stands between the top level items. */
.o27-nav--desktop .o27-nav__list > li > :is(a, button) { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.o27-nav--desktop .o27-nav__list > li + li {
	padding-left: 6px;
	border-left: 1px solid transparent;
	border-image: linear-gradient(180deg, transparent 26%, rgba(184, 190, 197, 0.5) 50%, transparent 74%) 1;
}
.o27-nav .o27-mega .o27-mega__cols .o27-mega__head { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* Model badge (the official model logo) in place of the model name on product cards, where the product has one
   (0.9.37, Mats 15 November 2026). The name is then not written as text as well; it is the picture's text
   alternative. The two-class selector keeps the height on the cart, checkout and account pages too, where
   WooCommerce's own picture rule is loaded. */
/* Whole product card clickable (Mats, 15 November 2026: on every page, not only the front page).
   The "View" link's ::after covers the card. On shop cards it covers the text part; the picture there is a link of its own.
   The button gets no transform while pressed: a transform would make the button the positioning box of its ::after,
   the cover would shrink to the button in the middle of the press and the click would not land on the link.
   The card itself sinks instead (press feel above). */
.o27-card--product { position: relative; }
.o27-card--product:has(.o27-card__foot a) { cursor: pointer; }
.o27-card--product .o27-card__foot a::after { content: ""; position: absolute; inset: 0; }
body.o27 .o27-card--product .o27-card__foot a.o27-btn:active,
body.o27 .o27-card--product:has(a:active) .o27-card__foot a.o27-btn { transform: none; }

.o27-card__title--badge { display: flex; align-items: center; min-height: 1.25em; line-height: 1; }
.o27-card__title--badge a { display: block; }
.o27-card__title .o27-card__badge { display: block; width: auto; height: 1.625rem; max-width: 100%; }
.o27-card__title a:hover .o27-card__badge { opacity: 0.72; }

/* Mobile navigation drawer (0.9.42, simplified in 0.9.43, Mats 15 November 2026). A dialog that covers the screen
   with a dimmed ground; the panel slides in from the right. From the top: logo and close, the search field, the
   main menu in plain mixed case with groups that open by their arrow, and one quiet row for the language.
   The dialog must never scroll: the panel waits outside the right edge, and a scrollable dialog was moved
   sideways by the browser to show the focused link there (the menu flew off to the left on a telephone).
   Where the browser cannot animate the opening of a dialog, or reduced motion is asked for, the drawer simply
   appears. Without the script the menu button is a link to the drawer, shown through :target with every group open. */
dialog.o27-drawer {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	overflow: clip;
	background: rgba(10, 12, 14, 0);
	color: #fff;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.42s ease, overlay 0.42s allow-discrete, display 0.42s allow-discrete;
}
dialog.o27-drawer::backdrop { background: transparent; }
dialog.o27-drawer[open],
dialog.o27-drawer:target { background: rgba(10, 12, 14, 0.62); }
dialog.o27-drawer:target { display: block; z-index: 60; }
@starting-style {
	dialog.o27-drawer[open] { background: rgba(10, 12, 14, 0); }
}
html:has(dialog.o27-drawer[open]) { overflow: hidden; }

.o27-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	width: min(86vw, 380px);
	padding: 0 24px calc(24px + env(safe-area-inset-bottom));
	background: var(--o27-dark);
	box-shadow: -24px 0 48px rgba(0, 0, 0, 0.4);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #3A4048 transparent;
	transform: translateX(100%);
	transition: transform 0.42s var(--o27-ease);
}
.o27-drawer__panel:focus { outline: none; }
.o27-drawer[open] .o27-drawer__panel,
.o27-drawer:target .o27-drawer__panel { transform: none; }
@starting-style {
	.o27-drawer[open] .o27-drawer__panel { transform: translateX(100%); }
}

.o27-drawer__head { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 72px; margin-right: -12px; }
.o27-drawer__logo { display: block; }
.o27-drawer .o27-drawer__logo img { display: block; width: auto; height: 28px; }
.o27-drawer__close { color: #fff; }

/* Search: one plain line under the head. 1rem type, so that a telephone does not zoom in on the field. */
.o27-drawer__search { display: flex; flex: none; align-items: center; gap: 12px; min-height: 52px; margin: 4px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); color: var(--o27-on-dark); transition: border-color 0.25s ease; }
.o27-drawer__search:focus-within { border-bottom-color: var(--o27-orange); }
.o27-drawer__search svg { flex: none; }
.o27-drawer__searchlabel { display: flex; flex: 1; min-width: 0; }
.o27-drawer__searchinput { flex: 1; width: 100%; min-width: 0; height: 50px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font: inherit; font-size: 1rem; outline: none; -webkit-appearance: none; appearance: none; }
.o27-drawer__searchinput::placeholder { color: var(--o27-on-dark); opacity: 1; }
.o27-drawer__searchinput::-webkit-search-cancel-button { -webkit-appearance: none; }

.o27-drawer__nav { flex: none; }
.o27-dn, .o27-dn ul { margin: 0; padding: 0; list-style: none; }
.o27-dn__row { display: flex; align-items: stretch; }
.o27-dn__link { display: flex; flex: 1; align-items: center; min-width: 0; min-height: 56px; color: #fff; text-decoration: none; }
.o27-dn__item--0 > .o27-dn__link,
.o27-dn__item--0 > .o27-dn__row > .o27-dn__link { font-size: 1.25rem; font-weight: 500; line-height: 1.25; }
.o27-dn__link:active,
.o27-dn__link[aria-current="page"] { color: var(--o27-orange-soft); }
@media (hover: hover) {
	.o27-dn a.o27-dn__link:hover { color: var(--o27-orange-soft); }
}
.o27-dn__toggle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	min-height: 56px;
	margin-right: -19px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--o27-on-dark);
	cursor: pointer;
}
.o27-dn__toggle svg,
.o27-drawer__langbtn > svg:last-child { transition: transform 0.3s var(--o27-ease); }
.o27-dn__toggle[aria-expanded="true"] { color: #fff; }
.o27-dn__toggle[aria-expanded="true"] svg,
.o27-drawer__langbtn[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.o27-dn__sub[hidden] { display: none; }
html:not(.o27-js) .o27-dn__sub[hidden] { display: block; }
/* Two classes on purpose: the list reset above (.o27-dn ul) would otherwise win over the paddings here. */
.o27-dn .o27-dn__sub--1 { padding: 0 0 14px; }
.o27-dn__sub .o27-dn__link { min-height: 44px; font-size: 1rem; font-weight: 400; color: #DDE1E5; }
.o27-dn__sub .o27-dn__toggle { min-height: 44px; }
.o27-dn .o27-dn__sub--2 { margin: 2px 0 8px 2px; padding: 0 0 0 16px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.o27-dn__sub--2 .o27-dn__link { min-height: 40px; font-size: 0.9375rem; color: var(--o27-on-dark); }
.o27-dn__sub .o27-dn__link:active,
.o27-dn__sub .o27-dn__link[aria-current="page"] { color: var(--o27-orange-soft); }

/* Language: one quiet row at the foot; it opens the list of languages. */
.o27-drawer__lang { flex: none; margin-top: auto; padding-top: 28px; }
.o27-drawer__langbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: var(--o27-on-dark); font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer; }
.o27-drawer__langbtn > svg { flex: none; }
.o27-drawer__langname { flex: 1; min-width: 0; color: #fff; }
.o27-drawer__langs { margin: 0; padding: 0 0 4px 28px; list-style: none; }
.o27-drawer__langs li { margin: 0; }
.o27-drawer__langlink { display: flex; align-items: center; min-height: 44px; font-size: 0.9375rem; color: var(--o27-on-dark); text-decoration: none; }
.o27-drawer__langlink:active { color: var(--o27-orange-soft); }
.o27-drawer__langlink[aria-current="true"] { color: #fff; }
.o27-drawer__langlink[aria-current="true"]::after { content: ""; width: 6px; height: 6px; margin-left: 10px; border-radius: 50%; background: var(--o27-orange); }
@media (hover: hover) {
	.o27-drawer__langlink:hover { color: #fff; }
}

/* On a telephone the language links leave the top strip (they pushed the page down, Mats 15 November 2026);
   the language is chosen in the menu there. With nothing else in it the strip closes up. */
@media (max-width: 767px) {
	.o27-topbar .o27-langnav { display: none; }
	.o27-topbar__inner { min-height: 0; }
}

@media (forced-colors: active) {
	.o27-drawer__panel { border-left: 1px solid CanvasText; }
	.o27-drawer__langlink[aria-current="true"] { text-decoration: underline; }
}