/* ============================================================================
   Mechan brand overrides for the Emporium theme
   ----------------------------------------------------------------------------
   Implements the "Typografie online" page of the Mechan brand guide:

     Titels / kopregels  -> Arial Narrow Bold (uppercase)
     Tussenkoppen        -> Arial Bold
     Bodytekst           -> Arial Regular
     Kleurgebruik        -> black is the base for body text, "krachtig koper"
                            is used for headings and subheadings
     Corpsgrootte        -> fixed ratios for letter spacing / leading, with a
                            minimum size that stays readable on phone + laptop

   This file must be registered LAST (NopHtml.AddCssFileParts in
   Views/Shared/Head.cshtml) so it wins over styles.css and the SevenSpikes
   theme roller preset (theme.custom-1.css).
   ========================================================================== */

/* ============================================================================
   Self-hosted brand webfonts

   Arial and Arial Narrow are proprietary and cannot be shipped, so genuine
   Arial is listed first in the stacks below and these open, metric-compatible
   stand-ins cover hosts that lack it. Files live in ../fonts and are fetched
   by ../fonts/fetch-fonts.sh; see ../fonts/README.md for the licenses.

   Nothing is loaded from fonts.googleapis.com / fonts.gstatic.com, so no
   visitor IP is handed to a third party on page load.

   The unicode-range split mirrors Google's own subsetting: -latin-ext is only
   downloaded when a page actually contains a character from that range.
   ========================================================================== */

@font-face { /* Arimo 400 - stands in for Arial Regular */
	font-family: 'Arimo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Arimo'), url('../fonts/arimo-400-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;
}

@font-face {
	font-family: 'Arimo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Arimo'), url('../fonts/arimo-400-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 { /* Arimo 700 - stands in for Arial Bold */
	font-family: 'Arimo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Arimo Bold'), local('Arimo'), url('../fonts/arimo-700-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;
}

@font-face {
	font-family: 'Arimo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Arimo Bold'), local('Arimo'), url('../fonts/arimo-700-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 { /* Archivo Narrow 700 - stands in for Arial Narrow Bold */
	font-family: 'Archivo Narrow';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Archivo Narrow Bold'), local('ArchivoNarrow-Bold'), url('../fonts/archivo-narrow-700-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;
}

@font-face {
	font-family: 'Archivo Narrow';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Archivo Narrow Bold'), local('ArchivoNarrow-Bold'), url('../fonts/archivo-narrow-700-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;
}

:root {
	/* --- Fonts ------------------------------------------------------------ */
	/* Genuine Arial / Arial Narrow come first: on Windows and macOS they are
	   already installed, so the browser resolves them locally and downloads
	   nothing at all. The self-hosted faces declared above are the open,
	   metric-compatible stand-ins for hosts that lack them (Linux/Docker):
	     Arimo          -> metrically identical to Arial
	     Archivo Narrow -> stand-in for Arial Narrow                            */
	--mechan-font-body: Arial, "Arimo", "Helvetica Neue", Helvetica, sans-serif;
	--mechan-font-heading: "Liberation Sans Narrow", "Nimbus Sans Narrow", "Archivo Narrow", Arial, "Arimo", sans-serif;
	--mechan-font-subheading: Arial, "Arimo", "Helvetica Neue", Helvetica, sans-serif;

	/* Only these weights are shipped as webfonts - keep them in sync with the
	   @font-face blocks above and with ../fonts/fetch-fonts.sh. */
	--mechan-weight-body: 400; /* Arial Regular */
	--mechan-weight-subheading: 700; /* Arial Bold */
	--mechan-weight-heading: 700; /* Arial Narrow Bold */

	/* --- Colors ----------------------------------------------------------- */
	--mechan-copper: #c87a1d; /* "krachtig koper" - headings, accents */
	--mechan-copper-hover: #a46418;
	--mechan-copper-dark: #855113;
	--mechan-black: #000000; /* base color for body text */
	--mechan-text: #000000;
	--mechan-text-muted: #4d4d4d;
	--mechan-rule: #d9d9d9; /* hairline dividers used in the guide */
	--mechan-white: #ffffff;
	--mechan-small-product-accent: var(--mechan-copper);
	--mechan-small-product-border: var(--mechan-rule);
	--mechan-small-product-muted: var(--mechan-text-muted);
	--mechan-small-product-surface: var(--mechan-white);

	/* --- The Mechan hexagon ----------------------------------------------- */
	/* The brand hexagon, as .hexagon draws it: vertices a quarter of the way
	   down the box, which is regular at the ratio below. Used by the contact
	   call-to-action icons and by the photos in the home page highlights band. */
	--mechan-hexagon-ratio: 0.866; /* width / height, i.e. sqrt(3) / 2 */
	--mechan-hexagon-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

	/* --- Corpsgrootte: type scale ----------------------------------------- */
	/* Minimum readable body size on a phone / laptop is 15px. */
	--mechan-size-body: 15px;
	--mechan-size-small: 13px;
	--mechan-size-subheading: 16px;
	--mechan-size-h1: 34px;
	--mechan-size-h2: 28px;
	--mechan-size-h3: 22px;
	--mechan-size-h4: 18px;

	/* Fixed ratios for interlinie (leading) and spatiëring (tracking). */
	--mechan-leading-body: 1.5;
	--mechan-leading-heading: 1.1;
	--mechan-tracking-heading: 0.01em;
	--mechan-tracking-subheading: 0.02em;
}

/* ============================================================================
   Bodytekst - Arial Regular, black
   ========================================================================== */

body,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select,
button,
.mini-shopping-cart .quantity:after,
.login-form-in-header a.facebook-btn:after {
	font-family: var(--mechan-font-body);
  color: var(--mechan-text);
}

body {
	font-size: var(--mechan-size-body);
	font-weight: var(--mechan-weight-body);
	line-height: var(--mechan-leading-body);
	color: var(--mechan-text);
}

p,
li,
td,
th,
label,
.category-description,
.manufacturer-description,
.full-description,
.topic-html-content,
.topic-page,
.post-body,
.custom-tab {
	line-height: var(--mechan-leading-body);
}

.category-description ul,
.manufacturer-description ul,
.full-description ul,
.topic-html-content ul,
.topic-page ul,
.post-body ul,
.custom-tab ul,
.category-description ol,
.manufacturer-description ol,
.full-description ol,
.topic-html-content ol,
.topic-page ol,
.topic-block-body p,
.post-body ol,
.custom-tab ol,
.post-body, .news-body {
	font-size: var(--mechan-size-body);
	color: var(--mechan-text);
}

small,
.short-description,
.tax-shipping-info,
.post-date,
.news-date {
	font-size: var(--mechan-size-small);
}

/* ============================================================================
   Titels / kopregels - Arial Narrow Bold, uppercase, koper
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.page-title h1,
.product-name h1,
.order-details-page .page-title h1,
.ui-dialog-content .page-title h1,
.carousel-title,
.nop-jcarousel .carousel-title,
.spc-categories .category-title,
.category-navigation-title {
	font-family: var(--mechan-font-heading);
	font-weight: var(--mechan-weight-heading);
	font-stretch: condensed;
	line-height: var(--mechan-leading-heading);
	letter-spacing: var(--mechan-tracking-heading);
	text-transform: uppercase;
	color: var(--mechan-copper);
}

h1,
.page-title h1,
.product-name h1 {
	font-size: var(--mechan-size-h1);
}

h2 {
	font-size: var(--mechan-size-h2);
}

h3 {
	font-size: var(--mechan-size-h3);
}

h4,
h5,
h6 {
	font-size: var(--mechan-size-h4);
}

/* Page titles in the theme are grey by default - force the brand copper. */
.page-title h1,
.order-details-page .page-title h1,
.ui-dialog-content .page-title h1 {
	color: var(--mechan-copper);
}


strong {
  font-weight: 700;
}

/* ============================================================================
   Tussenkoppen - Arial Bold, koper
   ========================================================================== */

.block .title,
.block .title strong,
.footer-block .title,
.socials-and-payments .title,
.ui-tabs .ui-tabs-nav li a,
.cart-collaterals > div > .title,
.write-review .title strong,
.product-reviews .title,
.opc > li .step-title .title,
.ropc .section .title,
.order-details-page .section .title,
.advantages-item .title,
.spc-header li,
.filter-block .title,
.product-filters .title {
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-subheading);
  letter-spacing: normal;
	text-transform: none;
}

.block .title,
.block .title strong,
.footer-block .title,
.socials-and-payments .title,
.cart-collaterals > div > .title,
.advantages-item .title,
.filter-block .title,
.product-filters .title {
	color: var(--mechan-copper);
}

/* ============================================================================
   Kleurgebruik - koper accents, black body copy
   ========================================================================== */

.overview .product-price,
.variant-overview .product-price,
.tier-prices .item-price,
.sale-of-the-day-offer .price.actual-price,
.mini-shopping-cart .price,
.mini-shopping-cart .totals strong,
.order-total td label,
.order-total td span,
.cart-total .order-total,
.ropc .cart-total .cart-total-row span,
.quickViewWindow .product-variant .product-price,
.instant-search-item .detail .price {
	color: var(--mechan-copper);
}

.button-1,
.button-2:hover,
.eu-cookie-bar-notification button,
.login-form-in-header .login-button,
.newsletter-email .newsletter-subscribe-button,
.search-box .search-box-button,
.ico-cart .cart-qty,
.shopping-cart-link .cart-qty,
.ico-wishlist .wishlist-qty,
.scroll-back-button {
	background-color: var(--mechan-copper);
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
}

.button-1:hover,
.eu-cookie-bar-notification button:hover,
.login-form-in-header .login-button:hover,
.newsletter-email .newsletter-subscribe-button:hover,
.search-box .search-box-button:hover {
	background-color: var(--mechan-copper-hover);
}

a {
	color: inherit;
}

.header-links a,
.header-menu > ul > li > a,
.header-menu > ul > li > span,
.footer-block a,
.vendor-item .title a,
.manufacturer-item .title a,
.category-grid .item-box .title a,
.block .list a,
.product-selectors,
.product-selectors select,
.pager li a,
.pager li span,
.breadcrumb li,
.product-name .manufacturers,
.overview .manufacturers,
.overview .short-description,
.overview .additional-details div,
.variant-overview .additional-details div {
  color: var(--mechan-text);
}

.pager li.current-page span {
  color: #fff;
}

.category-description a,
.manufacturer-description a,
.full-description a,
.topic-html-content a,
.post-body a {
	color: var(--mechan-copper);
}

.category-description a:hover,
.manufacturer-description a:hover,
.full-description a:hover,
.topic-html-content a:hover,
.post-body a:hover {
	color: var(--mechan-copper-dark);
}

.category-navigation-title {
  line-height: 50px;
}

.header-links span:before,
.header-links a:before,
.social-sharing a:before {
  color: var(--mechan-text);
}

/* Hairline dividers, as used between the blocks of the brand guide. */
.block .title,
.footer-block .title,
.page-title {
	border-color: var(--mechan-rule);
}

.header-upper {
  background-color: var(--mechan-copper);
}

.header-logo a img {
  max-height: 60px;
}

.category-navigation-list-wrapper .category-navigation-title {
  background-color: var(--mechan-copper);
}

.category-navigation-list-wrapper:hover .category-navigation-title {
  background-color: var(--mechan-copper-hover) !important;
}

.category-navigation-title:before {
  content: "\0067"
}

.admin-header-links,
.header-selectors-wrapper select,
.currency-selector.desktop:before,
.language-selector.desktop .select-wrap:before,
.tax-display-type-selector:before,
.category-navigation-list-wrapper .category-navigation-title,
.category-navigation-title:before {
  color: #fff;
}

.header-menu {
  margin: 0;
}

.header-menu > ul > li:hover > a,
.header-menu > ul > li:hover > span {
  color: var(--mechan-copper);
}

.header-menu > ul > li > .sublist-wrap > .sublist > li > a.view-all {
  color: var(--mechan-copper);
}

.mega-menu .sublist li:hover > a {
  background-color:#efedeb;
}

.header-menu > ul > li > .sublist-wrap > .sublist > li > a {
  padding: 0 35px 0 20px;
}

.category-navigation-list-wrapper ul li a,
.category-navigation-list-wrapper ul li > span,
.category-navigation-list .dropdown .box .subcategory-item a,
.mega-menu .manufacturers .title,
.mega-menu .vendors .title,
.category-description p,
.manufacturer-description,
.vendor-description,
.manufacturer-description p,
.vendor-description p,
.full-description p,
.topic-html-content p,
.topic-page p,
.post-body p,
.news-body p,
.custom-tab p,
.ui-dialog-content p {
  color: var(--mechan-text);
}

.item-box .product-title,
.item-box .title {
  font-weight: 700;
  color: var(--mechan-text);
}

.product-name .manufacturers .label,
.overview .manufacturers .label,
.overview .additional-details .label,
.variant-overview .additional-details .label {
  font-weight: 700;
}

.vendor-item .title a,
.manufacturer-item .title a,
.category-grid .item-box .title a {
  letter-spacing: var(--mechan-tracking-subheading);
}

.anywhere-slider .first-slide {
  background-image: url(../img/home-banner.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.custom-slider-content,
.anywhere-slider .first-slide {
  height: 550px;
}

.banner-origineel-agco {
  background: linear-gradient(90deg, #000000c7 0%, #00000040 54%, #0000000d);
  position: absolute;
  inset: 0;
}

.banner-origineel-agco .hero-content {
  position: absolute;
  top: 20%;
  left: 6%;
  display: block;
  color: #fff;
}

.banner-origineel-agco .hero-content h1 {
  color: #fff;
  margin-bottom: 1rem;
}

.banner-origineel-agco .hero-content p {
  font-size: 20px;
}

.post-date,
.news-date {
  font-family: var(--mechan-font-subheading);
  font-weight: var(--mechan-weight-subheading);;
  letter-spacing: normal;
}

.post-title, .news-title {
  font-family: var(--mechan-font-heading);
  font-weight: var(--mechan-weight-heading);
  color: var(--mechan-copper);
}

/* ============================================================================
   Corpsgrootte - keep headings readable on small screens
   ========================================================================== */

@media all and (max-width: 1024px) {
	:root {
		--mechan-size-h1: 28px;
		--mechan-size-h2: 24px;
		--mechan-size-h3: 20px;
	}
}

@media all and (max-width: 480px) {
	:root {
		--mechan-size-h1: 24px;
		--mechan-size-h2: 21px;
		--mechan-size-h3: 18px;
		/* never drop below the readability minimum */
		--mechan-size-body: 15px;
	}
}


/* ============================================================================
   Home page advantages (information boxes) - layout only

   The theme stacks the icon above centred text from 1025px up. The brand
   layout is a single flat strip: icon on the left, title above description on
   the right, items separated by a hairline rule. Colors and type come from the
   Tussenkoppen / Bodytekst rules above; only positioning is set here.
   ========================================================================== */

.home-page-advantages {
	display: flex;
	flex-wrap: wrap;
	background-color: #f6f6f6;
	text-align: left;
}

.advantages-item {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	padding: 18px 20px;
	margin: 0;
	background-color: transparent;
	text-align: left;
}

.advantages-item > div {
	display: block;
}

.advantages-item .picture {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.advantages-item .info {
	flex: 1 1 auto;
	width: auto;
	padding: 0;
}

.advantages-item .title {
	line-height: 1.3;
}

.advantages-item .description {
	display: block;
	margin: 2px 0 0;
	color: var(--mechan-text-muted);
	font-size: var(--mechan-size-small);
}

.advantages-item .description p {
	margin: 0;
	line-height: 1.4;
}

/* Two per row on tablet, four in a row on desktop, with a hairline between
   neighbours instead of the theme's separate grey cards. */
@media all and (min-width: 768px) {
	.advantages-item {
		width: 50%;
	}

	.advantages-item + .advantages-item {
		border-left: 1px solid var(--mechan-rule);
	}

	.advantages-item:nth-child(2n+1) {
		border-left: none;
	}
}

@media all and (min-width: 1025px) {
	.home-page-advantages {
		padding: 20px 7%;
		flex-wrap: nowrap;
	}

	.advantages-item {
		width: 25%;
		padding: 8px 25px;
	}

	.advantages-item:nth-child(2n+1) {
		border-left: 1px solid var(--mechan-rule);
	}

	.advantages-item:first-child {
		border-left: none;
	}
}


/* ============================================================================
   Footer - Kleurgebruik only

   The theme ships a white footer with grey copy and a separate dark grey
   bottom strip. The brand footer is one dark surface: koper subheadings,
   near-white links on black, and a muted bottom line separated by a hairline
   instead of its own background block. Layout is left untouched - only the
   colors below change.
   ========================================================================== */

:root {
	--mechan-footer-bg: #111111; /* dark surface the whole footer sits on */
	--mechan-footer-text: #e8e8e8; /* links and body copy on that surface */
	--mechan-footer-muted: #8a8a8a; /* copyright / disclaimer line */
	--mechan-footer-rule: rgba(255, 255, 255, .12); /* hairline on dark */
}

.footer {
	background-color: var(--mechan-footer-bg);
	border-top-color: var(--mechan-footer-bg);
}

.footer-logo img {
  height: 65px;
}

/* Subheadings keep the brand koper; the theme greys them out per breakpoint. */
.footer .title,
.footer-block .title,
.footer .newsletter .title,
.socials-and-payments .title {
	color: var(--mechan-copper);
}

.footer-block a,
.footer .newsletter,
.footer-block ul li,
.footer-upper,
.footer-middle {
	color: var(--mechan-footer-text);
}

.footer-block a {
	color: var(--mechan-footer-text);
}

.footer-block a:hover {
	color: var(--mechan-copper);
}

/* Accordion panel + block dividers on mobile - grey cards read as light
   patches on the dark surface. */
.footer-block ul {
	background-color: transparent;
}

.footer-block,
.footer-block:first-child {
	border-color: var(--mechan-footer-rule);
}

/* The bottom strip is no longer a block of its own colour, just a rule. */
.footer-lower {
	background-color: transparent;
	border-top: 1px solid var(--mechan-footer-rule);
}

.footer-lower > div {
	color: var(--mechan-footer-muted);
}

.footer-lower > div a {
	color: var(--mechan-footer-text);
}

.footer-lower > div a:hover {
	color: var(--mechan-copper);
}

/* Dot separators between the bottom-line items (1024.css and up). */
.footer-lower > div:before {
	background-color: var(--mechan-footer-muted);
}

/* Accordion chevrons on mobile. */
.footer-block .title:before,
.footer-block .title:after {
	color: var(--mechan-copper);
}

/* Social icons sit on the dark surface too. */
.footer .social-sharing a:before {
	color: var(--mechan-footer-text);
}

.footer .social-sharing a:hover:before {
	color: var(--mechan-copper);
}


/* ============================================================================
   Product boxes (item-box) - equal card heights, black prices, koper button

   The theme lays the grid out with floats, so a card with an extra line - the
   "Replacement article" block from Misc.Mechan.Global, a two-line title - makes
   its neighbours look ragged. Turning .item-grid into a flex row stretches every
   card in a row to the same height and lets the price + add-to-cart block sit on
   the bottom edge of all of them. The widths and margins stay exactly as the
   theme's breakpoints define them; only the layout mode changes.

   Grids that Emporium converts into a slick carousel (the home page
   two-row-carousels) are excluded - slick manages its own track and slides.
   List view (.product-list) is left on its own float layout: there the picture
   floats next to the text inside .product-item, so that box must stay a block.
   ========================================================================== */

.item-grid:not(.slick-initialized) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* The float clearfix would become a stray flex item. */
.item-grid:not(.slick-initialized):after {
	display: none;
}

.item-grid:not(.slick-initialized) > .item-box {
	display: flex;
	flex-direction: column;
	float: none;
}

/* _ProductBox and the category / manufacturer / vendor boxes each wrap their
   content in a single div - it has to pass the stretch on to .details. */
.product-grid .item-grid:not(.slick-initialized) > .item-box > .product-item,
.item-grid:not(.slick-initialized) > .item-box > .sub-category-item,
.item-grid:not(.slick-initialized) > .item-box > .manufacturer-item,
.item-grid:not(.slick-initialized) > .item-box > .vendor-item {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* The square picture keeps its size; .details absorbs the extra height. */
.product-grid .item-grid:not(.slick-initialized) > .item-box .picture,
.category-grid .item-grid > .item-box .picture,
.manufacturer-grid .item-grid > .item-box .picture {
	flex: 0 0 auto;
}

.product-grid .item-grid:not(.slick-initialized) > .item-box .details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* Prices and the add-to-cart row line up along the bottom of every card. */
.product-grid .item-grid:not(.slick-initialized) > .item-box .add-info {
	margin-top: auto;
}

/* --- Prices: black, not koper ------------------------------------------- */
/* Beats .item-box .actual-price in styles.css and in the SevenSpikes theme
   roller preset (theme.custom-1.css) on specificity, whatever the file order. */
.item-box .prices,
.item-box .prices .actual-price,
.item-box .prices .tax-shipping-info,
.item-box .prices .tax-shipping-info a,
.item-box .prices .base-price-pangv {
	color: var(--mechan-text);
}

/* The struck-through old price stays muted so it does not compete. */
.item-box .prices .old-price {
	color: var(--mechan-text-muted);
}

/* --- Add to cart: koper button ------------------------------------------ */
/* Both the plain theme button and the one NopAjaxCart renders next to the
   quantity box carry .button-2.product-box-add-to-cart-button. The .product-list
   pair repeats the rule at a higher specificity than the theme's own
   .center-2 .product-list .item-box .buttons .button-2, so list view matches
   grid view no matter where theme.custom-1.css lands in the head. The circular
   wishlist / compare buttons in .btn-wrapper are deliberately left alone. */
.item-box .buttons .button-2.product-box-add-to-cart-button,
.item-box .ajax-cart-button-wrapper .button-2.product-box-add-to-cart-button,
.product-list .item-box .buttons .button-2.product-box-add-to-cart-button,
.product-list .item-box .ajax-cart-button-wrapper .button-2.product-box-add-to-cart-button {
	background-color: var(--mechan-copper);
	color: var(--mechan-white);
}

.item-box .buttons .button-2.product-box-add-to-cart-button:hover,
.item-box .ajax-cart-button-wrapper .button-2.product-box-add-to-cart-button:hover,
.product-list .item-box .buttons .button-2.product-box-add-to-cart-button:hover,
.product-list .item-box .ajax-cart-button-wrapper .button-2.product-box-add-to-cart-button:hover {
	background-color: var(--mechan-copper-hover);
	color: var(--mechan-white);
}

.product-item .add-info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-grow: 0;
}

.item-box .buttons {
  width: 100%;
}

.category-navigation-list-wrapper {
  border-color: #000000;
}

.header-menu {
  background-color: #000000;
}

.header-menu>ul>li>a {
  color: #fff;
}

.button-2 {
	border: none;
	height: 45px;
	padding: 0 25px;
	border-radius: 3px;
  border: 1px solid #ffffffa6;
	background-color: transparent;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	transition: all .2s ease;
}

.button-2:hover {
  background: #ffffff1f;
}


/* ============================================================================
   Homepage card sections - "Top categories" and "Shop by brand"

   The two blocks are the same object seen twice: a small uppercase header with
   a koper chevron, then a grid of white bordered cards that take a koper edge
   on hover. Everything they share is stated once here; the two sections that
   follow carry only what is genuinely different, which is the inside of a card.

   The theme has nothing to build either on - .category-grid stacks a wide
   picture above an uppercase caption and there is no brand grid at all - so the
   layout is rebuilt here rather than in styles.css. Both hooks stay scoped: the
   sub-category and manufacturer grids keep the stock Emporium look.
   ========================================================================== */

/* The theme gives .home-page-category-grid a 45px gap; the two blocks sit
   directly above one another on the home page, so they share one rhythm. */
.top-category-grid,
.shop-by-brand-grid {
	margin-bottom: 30px;
}

/* --- Section header: "TOP CATEGORIES >" / "SHOP BY BRAND >" -------------- */
/* Tussenkop sizing (Arial Bold), black, with a koper chevron from the theme's
   icon font - not the theme's centred 28px grid title. */
.top-category-grid > .title,
.shop-by-brand-grid > .title {
	margin: 0 0 12px;
	text-align: left;
}

.top-category-grid > .title a,
.shop-by-brand-grid > .title a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.top-category-grid > .title strong,
.shop-by-brand-grid > .title strong {
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: 14px;
	letter-spacing: var(--mechan-tracking-subheading);
	text-transform: uppercase;
	color: var(--mechan-text);
	transition: color .2s ease;
}

.top-category-grid > .title a:after,
.shop-by-brand-grid > .title a:after {
	content: "j";
	font-size: 12px;
	line-height: 1.2;
	color: var(--mechan-copper);
}

.top-category-grid > .title a:hover strong,
.shop-by-brand-grid > .title a:hover strong {
	color: var(--mechan-copper);
}

/* --- The grid and the card chrome ---------------------------------------- */
/* The theme floats .item-box at percentage widths and clears every other one.
   A CSS grid is simpler here and drops the nth-child bookkeeping; the float and
   width resets below beat .item-box in styles.css / 1024.css / 1280.css on
   specificity, so the breakpoints of this file are the only ones that count. */
.top-category-grid .item-grid,
.shop-by-brand-grid .item-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.top-category-grid .item-grid:after,
.shop-by-brand-grid .item-grid:after {
	content: none;
}

.top-category-grid .item-grid > .item-box,
.shop-by-brand-grid .item-grid > .item-box {
	width: auto;
	float: none;
	margin: 0;
	background-color: var(--mechan-white);
	border: 1px solid var(--mechan-rule);
	border-radius: 4px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.top-category-grid .item-grid > .item-box:hover,
.shop-by-brand-grid .item-grid > .item-box:hover {
	border-color: var(--mechan-copper);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* Two across as soon as there is room for two; past that the blocks part
   company, because a category card is a label and a brand card is a poster. */
@media all and (min-width: 481px) {
	.top-category-grid .item-grid,
	.shop-by-brand-grid .item-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================================
   Homepage "Top categories" block

   Views/Shared/Components/HomepageCategories/Default.cshtml renders the theme's
   .category-grid markup with an extra .top-category-grid hook. A card is a
   thumbnail on the left and the category name plus the "N+ parts" line on the
   right; the header, the grid and the card chrome come from the shared section
   above.
   ========================================================================== */

/* --- Card: thumbnail left, name + parts count right ---------------------- */
.top-category-grid .category-item {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 12px 14px;
}

/* The thumbnail is the one piece of the card that carries the catalogue, so it
   takes as much room as the card can spare. The card width swings a long way -
   the content column is 88vw from 1280px up - and a flat size is either mean on
   a wide monitor or crowds the name off a laptop. 42% tracks the card, the floor
   keeps the picture substantial when the row is at its tightest, and the ceiling
   stops it swallowing a card that has room to spare. The column counts below are
   what buy the width for it: a card narrower than ~280px cannot show a picture
   worth looking at and still hold the name. */
.top-category-grid .item-box .picture {
	flex: 0 0 auto;
	width: clamp(104px, 42%, 168px);
	margin: 0;
	border-radius: 3px;
}

.top-category-grid .item-box .picture a:before {
	padding-top: 100%; /* square thumbnail, not the theme's 73.33% banner */
}

/* The theme crops the picture to fill its box (max-width: none; height: 100%).
   These thumbnails are logos and part photos, so fit the whole image instead. */
.top-category-grid .item-box .picture a img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.top-category-grid .item-box .details {
	min-width: 0; /* lets long names wrap instead of stretching the card */
}

.top-category-grid .item-box .details .title {
	margin: 0;
	height: auto;
}

/* Card names are Tussenkop - Arial Bold, black, sentence case. The theme pads
   the link out to a full-width uppercase caption; none of that applies here. */
.top-category-grid .item-box .details .title a {
	display: block;
	padding: 0;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-subheading);
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--mechan-text);
	white-space: normal;
	text-overflow: clip;
}

.top-category-grid .item-grid > .item-box:hover .details .title a {
	color: var(--mechan-copper);
}

/* Filled by CustomProperties["ProductsCount"] - see the view. */
.top-category-grid .item-box .products-count {
	margin-top: 3px;
	font-size: var(--mechan-size-small);
	line-height: 1.3;
	color: var(--mechan-text-muted);
}

/* --- "View all categories" ----------------------------------------------- */
.top-category-grid .view-all {
	margin-top: 20px;
	text-align: center;
}

.top-category-grid .view-all a {
	display: inline-block;
	height: 45px;
	padding: 0 30px;
	border: 1px solid var(--mechan-copper);
	border-radius: 3px;
	background-color: transparent;
	color: var(--mechan-copper);
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: 14px;
	line-height: 43px;
	letter-spacing: var(--mechan-tracking-subheading);
	text-transform: uppercase;
	transition: all .2s ease;
}

.top-category-grid .view-all a:hover {
	background-color: var(--mechan-copper);
	color: var(--mechan-white);
}

/* --- Columns per breakpoint ---------------------------------------------- */
/* Each step waits for the width that keeps a card near 300px, which is what the
   picture above needs to read as a picture. The design's row of five arrives at
   1600px, where the 88vw column is wide enough to carry it. */
@media all and (min-width: 769px) {
	.top-category-grid .item-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media all and (min-width: 1281px) {
	.top-category-grid .item-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media all and (min-width: 1600px) {
	.top-category-grid .item-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ============================================================================
   Homepage "Shop by brand" block

   Views/Home/_ShopByBrand.cshtml renders a row of brand cards: the manufacturer
   logo and a "View parts" affordance on the left, a machine photo filling the
   right half, and a closing "More brands" tile. The header, the grid and the
   card chrome come from the shared section above.

   The machine photo is decorative artwork, not catalogue data - a manufacturer
   only carries its logo. Drop the files in ../img/brands (see the README there)
   and hang each one off the per-brand hook class the view renders from the
   manufacturer's SeName. A brand with no rule of its own shows the logo alone,
   so the block never breaks on an unknown brand.
   ========================================================================== */

/* --- Card: logo + "View parts" left, artwork right ---------------------- */
/* The card is a single anchor, so everything inside it is inline by default.

   The anchor fills the box, so it - not .item-box - is what the eye reads as the
   card, and both the fill and the artwork belong on it: a color here would
   otherwise paint over an image sitting on .item-box beneath. The grey is the
   same #f6f6f6 the advantages strip uses, so the two homepage bands match.
   Keeping the artwork here also lets the per-brand rules below stay a class more
   specific than the position and size set on this shared rule. */
.shop-by-brand-grid .brand-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	min-height: 132px;
	height: 100%;
	background-color: #f6f6f6;
	background-repeat: no-repeat;
	background-position: right 8px bottom 6px;
	background-size: auto 92%;
	/* squared-off corners would show through the rounded ones of .item-box */
	border-radius: inherit;
	/* Room held back for the machine photo behind the copy. It was half the card,
	   which on a logo as wide as Fendt's was the only thing keeping the logo
	   small - the width, not the height cap, is what binds on a wide logo. A
	   photo drawn at 92% of the card height covers about this much of it. */
	padding: 14px 36% 12px 16px;
}

.shop-by-brand-grid .brand-item .picture {
	display: block;
  background-color: transparent;
	line-height: 0;
}

.shop-by-brand-grid .brand-item .picture img {
	max-width: 100%;
	max-height: 70px;
	width: auto;
	height: auto;
}

/* "MORE BRANDS" stands in for the logo on the closing tile. */
.shop-by-brand-grid .brand-item .caption {
	display: block;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: var(--mechan-tracking-subheading);
	text-transform: uppercase;
  text-align: left;
	color: var(--mechan-text);
}

/* --- "View parts >" ------------------------------------------------------ */
.shop-by-brand-grid .brand-item .view-parts {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--mechan-size-small);
	line-height: 1.2;
	color: var(--mechan-text-muted);
	transition: color .2s ease;
}

.shop-by-brand-grid .brand-item .view-parts:after {
	content: "j";
	font-size: 10px;
}

.shop-by-brand-grid .item-box:hover .view-parts,
.shop-by-brand-grid .item-box:hover .caption {
	color: var(--mechan-copper);
}

/* --- Artwork ------------------------------------------------------------- */
/* One rule per brand, keyed on the manufacturer SeName. Add a rule when the
   artwork lands in ../img/brands; nothing else has to change. */
.shop-by-brand-grid .brand-fendt .brand-item {
	background-image: url('../img/brands/fendt.png');
}

.shop-by-brand-grid .brand-massey-ferguson .brand-item {
	background-image: url('../img/brands/massey-ferguson.png');
}

.shop-by-brand-grid .brand-valtra .brand-item {
	background-image: url('../img/brands/valtra.png');
}

/* The closing tile carries the Mechan hexagon mark instead of a brand photo, so
   it lives in ../img with the rest of the house artwork rather than in
   ../img/brands. The file is already a pale copper tint - no dimming needed. */
.shop-by-brand-grid .more-brands .brand-item {
	background-image: url('../img/hexagon-mechan.png');
	background-position: right 14px center;
	background-size: auto 90%;
}

/* --- Columns per breakpoint ---------------------------------------------- */
/* A brand card carries a photo, so it holds at two across until the desktop
   grid, where the row of four is the design. */
@media all and (min-width: 1025px) {
	.shop-by-brand-grid .item-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.hexagon {
  width: min(234px, 100%);
  aspect-ratio: 0.866;
  background: var(--mechan-copper);
  clip-path: polygon(
    50% 0,
    100% 25%,
    100% 75%,
    50% 100%,
    0 75%,
    0 25%
  );
}

.hexagon-outline {
  width: 234px;
  aspect-ratio: 234 / 270;

  background-color: transparent;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234 270'%3E%3Cpolygon points='117,2 232,68.5 232,201.5 117,268 2,201.5 2,68.5' fill='none' stroke='%23c87a1d' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
/* ============================================================================
   Call to action band - "we help you on your way", above the footer

   Views/Shared/_ContactCta.cshtml renders it from _Root.cshtml, so it closes
   every page just before the footer. The theme has nothing like it, so the whole
   band is built here.

   Built to the Mechan design: a dark machine photo and a scrim over it dark
   enough for white copy. Left of the rule is the pitch - koper kicker, a headline
   in Arial Narrow Bold, one line of copy and the two buttons, to the catalogue and
   to the contact page. Right of it are the four promises, each in its own koper
   hexagon outline.

   The photo is ../img/cta-section.png, the field at dusk from the design. It is
   dark to begin with, so the scrim over it is lighter than a daylight shot would
   need, and the crop is positioned to keep the horizon just below the middle of
   the band whatever its height.
   ========================================================================== */

:root {
	--mechan-cta-ink: #16130f; /* the near-black the scrim settles on */
	--mechan-cta-copy: rgba(255, 255, 255, .82); /* body copy on that scrim */
	--mechan-cta-rule: rgba(255, 255, 255, .18); /* the divider and the outlines */
	/* Koper carries the shadows here rather than black: on the dark band a black
	   shadow is invisible, and the white page above only shows a warm halo. */
	--mechan-cta-shadow: rgba(200, 122, 29, .45); /* --mechan-copper */
	--mechan-cta-shadow-deep: rgba(133, 81, 19, .55); /* --mechan-copper-dark */
	/* The hexagon outline drawn around each promise icon. It is a data URI rather
	   than a file because the stroke has to be koper in one place only. */
	--mechan-cta-hexagon-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpolygon points='50,2 98,30 98,86 50,114 2,86 2,30' fill='none' stroke='%23c87a1d' stroke-width='2'/%3E%3C/svg%3E");
}

.contact-cta {
	position: relative;
	background-color: var(--mechan-cta-ink);
	background-image: url('../img/cta-section.png');
	background-repeat: no-repeat;
	background-position: center 57%; /* the horizon of the photo */
	background-size: cover;
	color: var(--mechan-white);
	/* The band only has the white page above it to cast on - below is the dark
	   footer, which would swallow a shadow - so the lower edge is a hairline. */
	box-shadow: 0 -14px 34px var(--mechan-cta-shadow), 0 -3px 8px var(--mechan-cta-shadow-deep), inset 0 -1px 0 var(--mechan-cta-rule);
}

/* The scrim. A photograph is the one place in this file that earns a gradient:
   the copy sits on the left, so that end has to be dark enough to read on while
   the machine stays visible on the right. */
.contact-cta:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, rgba(22, 19, 15, .9) 0%, rgba(22, 19, 15, .78) 45%, rgba(22, 19, 15, .52) 100%);
}

.contact-cta-inner {
	position: relative; /* over the scrim */
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: 44px 10px;
}

/* --- Left of the rule: the pitch ----------------------------------------- */
.contact-cta-eyebrow {
	display: block;
	/* the short koper rule of the design sits under the kicker, not beside it */
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mechan-copper);
	margin-bottom: 16px;
	width: fit-content;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-small);
	letter-spacing: var(--mechan-tracking-subheading);
	text-transform: uppercase;
	color: var(--mechan-copper);
}

.contact-cta-title {
	display: block;
	margin-bottom: 18px;
	font-family: var(--mechan-font-heading);
	font-weight: var(--mechan-weight-heading);
	/* The one headline in this file allowed past the type scale: it is the whole
	   point of the band, and it has a full column to fill. */
	font-size: clamp(30px, 3.2vw, 52px);
	line-height: var(--mechan-leading-heading);
	letter-spacing: var(--mechan-tracking-heading);
	text-transform: uppercase;
	color: var(--mechan-white);
}

.contact-cta-message {
	margin: 0;
	/* a measure that stays readable when the band runs the full window width */
	max-width: 46ch;
	font-family: var(--mechan-font-body);
	font-weight: var(--mechan-weight-body);
	font-size: var(--mechan-size-subheading);
	line-height: var(--mechan-leading-body);
	color: var(--mechan-cta-copy);
}

/* --- The two buttons ------------------------------------------------------ */
.contact-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

/* The pair is the site's own button set seen on the photo band: the primary is
   .button-1 and the secondary is .button-2, so the box - 45px tall, 25px of
   side padding, a 3px radius and an uppercase bold label - is the one stated
   there. It is restated rather than borrowed in the markup because the arrow of
   the design needs a flex box to sit in; keep the two in step. */
.contact-cta-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 45px;
	padding: 0 25px;
	border: none;
	border-radius: 3px;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: 14px;
	line-height: 1.2;
	text-transform: uppercase;
	transition: all .2s ease;
}

/* .button-1: filled koper. */
.contact-cta-button-primary {
	background-color: var(--mechan-copper);
	color: var(--mechan-white);
}

.contact-cta-button-primary:hover {
	background-color: var(--mechan-copper-hover);
	color: var(--mechan-white);
}

/* .button-2: outlined, and it lightens on hover rather than taking a koper edge. */
.contact-cta-button-secondary {
	border: 1px solid #ffffffa6;
	background-color: transparent;
	color: var(--mechan-white);
}

.contact-cta-button-secondary:hover {
	background-color: #ffffff1f;
	color: var(--mechan-white);
}

/* --- Right of the rule: the four promises -------------------------------- */
.contact-cta-promises {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 26px;
}

.contact-cta-promise {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

/* The brand hexagon as an outline around each icon, with the glyph laid inside
   it: one element carries both, and there is no icon font to keep in step.

   The glyph is 32px, not the 26 it started at, and that size is what the stroke
   of ../img/contact-cta-*.svg is set against: 1.65 on their 24 box comes out at
   the 2.2px line the usp-*.png icons of the design are drawn at. At 26px the
   same line would have taken a 2.03 stroke, which is heavy enough to close up
   the check of contact-cta-quality.svg and the ear cups of the headset - so the
   glyph grew instead. 32px still clears the hexagon: it is 58px wide and so
   67px tall, and a square centred in it has room up to 42px. */
.contact-cta-promise-icon {
	flex: none;
	width: 58px;
	aspect-ratio: var(--mechan-hexagon-ratio);
	background-repeat: no-repeat;
	background-position: center, center;
	background-size: 32px 32px, 100% 100%;
}

.contact-cta-promise-delivery .contact-cta-promise-icon {
	background-image: url('../img/contact-cta-delivery.svg'), var(--mechan-cta-hexagon-outline);
}

.contact-cta-promise-advice .contact-cta-promise-icon {
	background-image: url('../img/contact-cta-support.svg'), var(--mechan-cta-hexagon-outline);
}

.contact-cta-promise-quality .contact-cta-promise-icon {
	background-image: url('../img/contact-cta-quality.svg'), var(--mechan-cta-hexagon-outline);
}

.contact-cta-promise-returns .contact-cta-promise-icon {
	background-image: url('../img/contact-cta-returns.svg'), var(--mechan-cta-hexagon-outline);
}

.contact-cta-promise-detail {
	min-width: 0;
}

.contact-cta-promise-detail strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-subheading);
	color: var(--mechan-white);
}

.contact-cta-promise-detail p {
	margin: 0;
	/* two short lines, as in the design, rather than one long one */
	max-width: 24ch;
	font-size: var(--mechan-size-body);
	line-height: 1.45;
	color: var(--mechan-cta-copy);
}

/* --- Two of the promises per row once there is room ---------------------- */
@media all and (min-width: 769px) {
	.contact-cta-promises {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 40px;
	}
}

/* --- Pitch and promises side by side, split by the rule ------------------ */
@media all and (min-width: 1025px) {
	.contact-cta-inner {
		flex-direction: row;
		align-items: center;
		gap: 60px;
		/* the same viewport padding the footer and the page content use */
		padding: 60px 6vw;
	}

	/* The pitch takes what the promises leave: the four of them need a settled
	   width to keep their two lines, the headline is happy with what is left. */
	.contact-cta-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.contact-cta-promises {
		flex: 0 1 46%;
		min-width: 0;
		padding-left: 60px;
		border-left: 1px solid var(--mechan-cta-rule);
	}
}

@media all and (max-width: 480px) {
	.contact-cta-inner {
		padding: 36px 10px;
	}

	.contact-cta-button {
		/* one button per row - side by side the labels wrap inside their own box */
		flex: 1 1 100%;
		justify-content: space-between;
	}

	.contact-cta-promise-icon {
		width: 46px;
		/* Down with the hexagon, and by the same fifth the glyph grew above. The
		   line lands at 1.79px here, which is where the 38px icons of the "Over
		   Mechan" band come out on this breakpoint too. */
		background-size: 26px 26px, 100% 100%;
	}
}

/* ============================================================================
   Home page intro - photo with three hexagons of copy beside it

   Laid out on a grid rather than by absolute positioning: the photo takes the
   left column and spans both rows, the two hexagon panels take the right one.
   That is the fix for the panels running off the right edge - the grid decides
   how wide the right column is, so a panel cannot leave the section however
   long its copy gets.

   The panels are the brand hexagon, cut with --mechan-hexagon-clip and
   proportioned by --mechan-hexagon-ratio, the same two tokens .hexagon uses.
   Two things follow from that shape:

     - it is full width only between a quarter and three quarters of its height,
       tapering to a point above and below, so the block padding has to clear
       that quarter before any copy starts;
     - its honeycomb step is half a width across and three quarters of a height
       down, which is why the right column is one and a half hexagons wide and
       the second panel rides a quarter of a height up into the first.

   All the geometry hangs off --mechan-intro-hex, declared on the section rather
   than on :root so the small-screen override below stays local. Both paddings
   are calc()ed from it instead of written as percentages, because a percentage
   padding resolves against the grid column, not against the panel.

   The markup lives in a topic body, so everything below is driven by classes
   only - no element structure is assumed beyond the nesting documented in the
   markup handed to the store admin.
   ========================================================================== */

/* The theme caps .topic-block at 1000px and centres its text; the section
   brings its own container and reads left-aligned. */
.topic-block:has(.mechan-intro),
.home-page .topic-block:has(.mechan-intro) {
	width: auto;
	max-width: none;
	padding: 0;
	text-align: left;
}

/* The section carries its own heading, so the topic title row is redundant. */
.topic-block:has(.mechan-intro) .topic-block-title {
	display: none;
}

.mechan-intro {
	/* Width of one hexagon of copy. It tracks the viewport between those bounds
	   so the three of them always fit the columns below without the copy getting
	   too narrow to read. Every other measurement in the cluster is derived from
	   it, so this is the one dial for how much room the panels take. */
	--mechan-intro-hex: clamp(220px, 18vw, 280px);
	--mechan-intro-badge: 190px; /* width of the outlined quote hexagon */

	/* Full bleed, so the grey runs edge to edge: a 100vw box centred on the
	   container's own centre line. .master-wrapper-content is overflow: hidden,
	   so the scrollbar's width cannot turn this into a horizontal scrollbar.
	   The block margins are set on their own - a margin shorthand here would
	   overwrite the two that do the breakout. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 28px; /* space between this section and its neighbours */
	margin-bottom: 28px;
	padding: 24px 16px; /* space inside the section */
	background-color: #f6f6f6;
	color: var(--mechan-text);
	text-align: left;
}

.mechan-intro-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto;
}

/* --- The photo, with the quote hexagon on it ---------------------------- */

.mechan-intro-media {
	position: relative;
	z-index: 0; /* below the panels, and a stacking context for the badge */
	width: 100%;
	overflow: hidden;
	background-color: var(--mechan-rule); /* stands in while the photo loads */
}

/* height: 100% resolves once the grid stretches the media on desktop; until
   then min-height gives the crop something to work against. */
/* The whole shot, uncropped: its own aspect ratio decides the height, so
   nothing is cut off. That means the media box is as tall as the photo makes it
   rather than as tall as the hexagon cluster, which is why the media is centred
   beside the cluster on desktop instead of stretched over it. */
.mechan-intro-photo {
	display: block;
	width: 100%;
	height: auto;
}

.mechan-intro-scrim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(16, 27, 34, .25);
}

/* Outline only: transparent inside, white hexagon edge. A border cannot do this
   - a rectangular one ignores the shape, and clip-path would cut the corners off
   it - so the edge is the brand hexagon stroked as an SVG stretched over the box.
   The stroke colour lives inside the data URI, so it cannot come from a token. */
.mechan-intro-badge {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: var(--mechan-intro-badge);
	aspect-ratio: var(--mechan-hexagon-ratio);
	margin: 0;
	padding: 16px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234 270'%3E%3Cpolygon points='117,2 232,68.5 232,201.5 117,268 2,201.5 2,68.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: var(--mechan-white);
	font-family: var(--mechan-font-heading);
	font-weight: var(--mechan-weight-heading);
	font-stretch: condensed;
	font-size: 16px;
	line-height: 1.15;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-align: center;
}

.mechan-intro-badge span {
	display: block;
}

/* --- The two hexagons of copy ------------------------------------------- */

.mechan-intro-panel {
	position: relative;
	z-index: 1; /* over the photo where the two overlap */
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: var(--mechan-intro-hex);
	/* min-height rather than aspect-ratio: a regular hexagon is the floor, and a
	   panel whose copy needs more room can grow past it - and be stretched to
	   match a taller neighbour sharing its grid row. */
	min-height: calc(var(--mechan-intro-hex) / var(--mechan-hexagon-ratio));
	/* .26 clears the tapered quarter; .10 keeps the copy off the side edges.
	   Both are as tight as the shape allows: the taper is a quarter of the
	   height, and what saves the top line is that the facet has narrowed to
	   roughly .08 of the width by the time the padding runs out.
	   Copy longer than the middle band grows the box, and the clip is
	   proportional, so it stays a hexagon when it does. */
	padding: calc(var(--mechan-intro-hex) * .26) calc(var(--mechan-intro-hex) * .1);
	background-color: var(--mechan-white);
	clip-path: var(--mechan-hexagon-clip);
	text-align: center;
}

/* Arial Narrow Bold uppercase koper comes from the heading rules further up this
   file; the panels are narrow, so both run a step down the scale. */
.mechan-intro-title {
	margin: 0 0 6px;
	font-size: var(--mechan-size-h3);
}

.mechan-intro-subtitle {
	margin: 0 0 6px;
	font-size: var(--mechan-size-h4);
}

/* Beats .topic-block-body p, which greys the copy and sets it at 16px. */
.mechan-intro .mechan-intro-panel p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--mechan-text);
}

.mechan-intro .mechan-intro-panel p:last-child {
	margin-bottom: 0;
}

.mechan-intro a {
	color: var(--mechan-copper);
}

.mechan-intro a:hover {
	color: var(--mechan-copper-dark);
}

/* --- Koper panels: the outer two, so the white one between them reads ---- */

.mechan-intro-panel--about,
.mechan-intro-panel--delivery {
	background-color: var(--mechan-copper);
	color: var(--mechan-white);
}

/* The heading rules further up this file colour every h2/h3 koper; on koper it
   has to be white. Two classes, so this wins on specificity wherever it lands. */
.mechan-intro-panel--about .mechan-intro-title,
.mechan-intro-panel--about .mechan-intro-subtitle,
.mechan-intro-panel--delivery .mechan-intro-title,
.mechan-intro-panel--delivery .mechan-intro-subtitle {
	color: var(--mechan-white);
}

.mechan-intro .mechan-intro-panel--about p,
.mechan-intro .mechan-intro-panel--delivery p {
	color: var(--mechan-white);
}

/* Koper on koper would vanish - underlined white instead. */
.mechan-intro .mechan-intro-panel--about a,
.mechan-intro .mechan-intro-panel--delivery a {
	color: var(--mechan-white);
	text-decoration: underline;
}

/* --- Small phones: a narrower hexagon, so it fits the viewport ---------- */

@media all and (max-width: 480px) {
	.mechan-intro {
		--mechan-intro-badge: 150px; /* the clamp above already floors the hexagon */

		/* Block margins only - a shorthand would drop the full-bleed side ones. */
		margin-top: 28px;
		margin-bottom: 28px;
		padding: 24px 12px;
	}

	.mechan-intro-badge {
		left: 14px;
		bottom: 14px;
		font-size: 14px;
	}
}

/* --- Desktop: photo left, the three hexagons clustered on the right ------ */

@media all and (min-width: 1025px) {
	.mechan-intro {
		margin-top: 36px;
		margin-bottom: 36px;
		padding: 32px 32px;
	}

	/* Two hexagon columns beside the photo. Three panels stacked in a single
	   column would make the block two and a half hexagons tall and squeeze the
	   photo into a sliver, so they cluster two over one instead - which is also
	   how this shape tessellates.

	   Each column is an eighth wider than the hexagon in it. That slack is what
	   lets the panels sit at different distances from the left without any of
	   them leaving the section: about pinned to the start of its column, support
	   to the end of its own, and delivery centred across both. */
	.mechan-intro-inner {
		grid-template-columns: minmax(0, 1fr) repeat(2, calc(var(--mechan-intro-hex) * 1.12));
		grid-template-rows: auto auto;
		gap: 0;
	}

	/* Centred, not stretched: the photo is shown whole, so its own aspect ratio
	   sets its height and it sits level with the middle of the cluster. */
	.mechan-intro-media {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: center;
		/* Reaches into the first hexagon column instead of stopping short of it,
		   so the panels overlap the photo. The hexagon's left edge is vertical
		   only across its middle half, so the photo shows through the notches
		   above and below - which is the point. */
		margin-right: calc(var(--mechan-intro-hex) * -.14);
	}

	/* Stretch, not start: the two panels sharing row 1 come out the same height
	   even when one carries more copy than the other. */
	.mechan-intro-panel--about {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
	}

	/* Furthest right of the three - it takes the slack at the end of the last
	   column, while delivery below it stays centred on the pair. */
	.mechan-intro-panel--support {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	/* The third closes the cluster: centred under the pair and a quarter of a
	   hexagon height up into them, which is the tessellation step for this
	   shape. align-self keeps it from being stretched by its own row. */
	.mechan-intro-panel--delivery {
		grid-column: 2 / span 2;
		grid-row: 2;
		align-self: start;
		justify-self: center;
		margin-top: calc(var(--mechan-intro-hex) / var(--mechan-hexagon-ratio) * -.25);
	}
}

.center-1 .breadcrumb {
  text-align: left;
}


/* ============================================================================
   Product page - the parts detail layout

   The design of the parts page, top to bottom of the overview column: the category
   the part sits in as an eyebrow over the name, the identifiers a mechanic orders
   by (SKU, OEM number, brand) as a list under it, the review score, and then
   everything that leads to the cart - stock, shipping, price, quantity - in one
   block. Beside them, in the rail, two panels: the price breakdown and the
   warehouse stock.

   Views/Product/ProductTemplate.Simple.cshtml carries the structure. The rail is
   Emporium's own - the theme floats .gallery and .overview past each other and
   positions .product-prices-box absolutely in the gutter .overview leaves free
   with its padding-right, at 300px from 1281px up and 380px from 1601px - so only
   the look of the panels is set here, never their position.

   Two rows of the design are either mocked or absent because nothing in the
   storefront backs them yet: the customer selector is marked as mock data, while
   the shipping cut-off countdown still needs data the product model does not
   carry.
   ========================================================================== */

:root {
	/* Availability needs a signal colour, and koper is the accent colour: a copper
	   tick beside "in stock" reads as decoration rather than as a state. These two
	   sit outside the brand palette for that reason and are used nowhere else. The
	   tick and cross below are inline SVG, so the same two values are written into
	   those data URIs by hand - change one, change the other. */
	--mechan-in-stock: #4a8b2c;
	--mechan-out-of-stock: #c0392b;

	/* The caption band of a rail panel: a shade off the page, so the card reads as
	   one object without a second border inside it. */
	--mechan-panel-caption-bg: #fbfbfc;
}

/* --- Eyebrow: the category the part belongs to --------------------------- */

/* The breadcrumb above the page already says where the part sits; this repeats
   only the deepest category, tight over the name, because that is the word that
   tells a visitor what kind of part they are looking at. */
.product-details-page .product-category {
	margin: 0 0 6px;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-small);
	line-height: 1.2;
	letter-spacing: var(--mechan-tracking-subheading);
	text-transform: uppercase;
}

.product-details-page .product-category a {
	color: var(--mechan-copper);
	text-decoration: none;
}

.product-details-page .product-category a:hover {
	color: var(--mechan-copper-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Name ---------------------------------------------------------------- */

/* .product-name is addressed without .overview: below 1281px the theme script moves
   the block into .mobile-name-holder above the gallery, out of the overview column. */
.product-details-page .product-name {
	margin: 0 0 14px;
}

/* The one place the brand sheet's koper heading is dropped: the eyebrow directly
   above it is koper already, and two copper lines in a row leave the name - the
   longest, most-read line on the page - competing with a label. Everything else
   about the heading (Arial Narrow Bold, uppercase, the h1 size) stands. */
.product-details-page .product-name h1 {
	margin: 0;
	color: var(--mechan-text);
}

/* --- Identifiers: SKU, OEM number, brand -------------------------------- */

.product-details-page .product-identity {
	margin: 0 0 14px;
}

/* Both partials bring a wrapper of their own - _SKU_Man_GTIN_Ven an
   .additional-details and _ProductManufacturers a .manufacturers - so the rows are
   addressed through those rather than through a class this theme would have to add
   to core markup. */
.product-details-page .overview .product-identity .additional-details {
	margin: 0;
}

.product-details-page .overview .product-identity .additional-details > div,
.product-details-page .overview .product-identity .manufacturers {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: 0 0 2px;
	font-size: var(--mechan-size-body);
	line-height: 1.4;
}

/* The design names the field and then states it: "SKU:" takes the weight and the
   number beside it is set plain. The list reads as four captions with their values
   rather than as four numbers with a note in front of each, which is what a
   mechanic checking one of them against a paper order is looking for.

   No label column either. The four labels are within a few characters of each
   other in length, so a width wide enough for the longest only strands the short
   ones a gap away from their own value; the rows flow, as the design has them. */
.product-details-page .overview .product-identity .label {
	flex: none;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	color: var(--mechan-text);
}

.product-details-page .overview .product-identity .value {
	font-family: var(--mechan-font-body);
	font-weight: var(--mechan-weight-body);
	color: var(--mechan-text);
	/* a part number has no spaces to break on */
	overflow-wrap: anywhere;
}

.product-details-page .overview .product-identity .value a {
	color: var(--mechan-copper);
	text-decoration: none;
}

.product-details-page .overview .product-identity .value a:hover {
	color: var(--mechan-copper-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Review score ------------------------------------------------------- */

.product-details-page .overview .reviews-and-compare {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin: 0 0 18px;
}

.product-details-page .overview .reviews-and-compare .product-reviews-overview,
.product-details-page .overview .reviews-and-compare .compare-products {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/* The design reads the row from both ends: the score - stars, average, how many
   reviews it is out of - against the left edge, and the invitation to write one
   against the right. So the overview takes the width and pushes its last item over.
   The compare button, which the design has no place for, keeps its spot after the
   pair whenever the store leaves it switched on. */
.product-details-page .overview .reviews-and-compare .product-reviews-overview {
	flex: 1 1 auto;
	flex-wrap: wrap;
}

.product-details-page .overview .product-reviews-overview .product-review-add {
	margin-left: auto;
	padding-left: 12px;
}

.product-details-page .overview .product-reviews-overview .product-review-box {
	margin: 0;
}

/* The theme draws the strip from two 13x12 images - rating1 an empty star in grey,
   rating2 a filled one in amber - and fills it by overlaying the second to the
   average's percentage. Amber is the one warm colour on the page that is not the
   brand's: beside a koper eyebrow, a koper price and a koper button it reads as a
   near miss rather than as a second accent. Both tiles are restated here as the
   same star in koper and in the sheet's own hairline grey.

   The two files stay where they are - the star is redrawn, not recoloured, so the
   images are untouched and every other page keeps them. The star shape is a mask
   and the colour is normal CSS, so the filled strip follows --mechan-copper. */
.product-details-page .product-review-box .rating,
.product-details-page .product-review-box .rating div {
	background-image: none;
	background-color: var(--mechan-rule);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath fill='black' d='M6.5.7l1.38 3.7 3.95.17-3.09 2.46 1.05 3.8L6.5 8.65l-3.29 2.18 1.06-3.8L1.17 4.57l3.95-.17z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath fill='black' d='M6.5.7l1.38 3.7 3.95.17-3.09 2.46 1.05 3.8L6.5 8.65l-3.29 2.18 1.06-3.8L1.17 4.57l3.95-.17z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 13px 12px;
	mask-size: 13px 12px;
}

.product-details-page .product-review-box .rating div {
	background-color: var(--mechan-copper);
}

/* The stars are a 65px strip filled to the average. The number beside them is
   what a visitor can actually read back, so it carries the weight. */
.product-details-page .overview .product-reviews-overview .rating-value {
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-body);
	color: var(--mechan-text);
}

.product-details-page .overview .product-reviews-overview .product-review-links,
.product-details-page .overview .product-reviews-overview .product-review-add,
.product-details-page .overview .product-reviews-overview .product-no-reviews {
	font-size: var(--mechan-size-small);
	color: var(--mechan-text-muted);
}

/* The count is a note on the figure beside it, so it is not underlined - the design
   sets it as plain text in brackets, and it links to the list further down only
   because the whole row does. "Write a review" is the one thing here to click. */
.product-details-page .overview .product-reviews-overview .product-review-links a {
	color: var(--mechan-text-muted);
	text-decoration: none;
}

.product-details-page .overview .product-reviews-overview .product-review-add a,
.product-details-page .overview .product-reviews-overview .product-no-reviews a {
	color: var(--mechan-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.product-details-page .overview .product-reviews-overview .product-review-links a:hover,
.product-details-page .overview .product-reviews-overview .product-review-add a:hover,
.product-details-page .overview .product-reviews-overview .product-no-reviews a:hover {
	color: var(--mechan-copper);
}

/* --- Stock line --------------------------------------------------------- */

.product-details-page .overview .availability {
	margin: 0 0 8px;
}

/* The theme draws this as a grey uppercase pill and hides its label. The design has
   it as a tick and a word, so the pill is unwound - background, padding and radius
   all go - rather than restyled. .in-stock / .out-of-stock come from the theme copy
   of _Availability, which reads the state back out of the rendered text. */
.product-details-page .overview .stock {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-subheading);
	text-transform: none;
	color: var(--mechan-in-stock);
}

.product-details-page .overview .out-of-stock .stock {
	color: var(--mechan-out-of-stock);
}

/* "Availability:" - the tick and the value say it between them. */
.product-details-page .overview .stock .label {
	display: none;
}

.product-details-page .overview .stock:before {
	content: "";
	flex: none;
	align-self: center;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8b2c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 13 5.5 5.5L20 6'/%3E%3C/svg%3E");
}

.product-details-page .overview .out-of-stock .stock:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.product-details-page .overview .back-in-stock-subscription {
	margin: 8px 0 0;
}

/* --- Shipping line ------------------------------------------------------ */

/* The truck row of the design. The countdown beside it in the mock - "order within
   6h 23m and we ship today" - needs a cut-off time and a clock the storefront does
   not have, so the delivery date nopCommerce already carries is the whole line.

   A grid rather than a flex row: _DeliveryInfo can emit both a free-shipping notice
   and a delivery date, and they stack in the second column beside one icon. */
.product-details-page .overview .delivery {
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: 10px;
	row-gap: 2px;
	align-items: start;
	margin: 0 0 16px;
}

.product-details-page .overview .delivery:before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	width: 24px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 24px 18px;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none' stroke='%234d4d4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 3h13v11h-13z'/%3E%3Cpath d='M14.8 6.5h4.7l4 4V14h-8.7z'/%3E%3Ccircle cx='7' cy='16.4' r='2'/%3E%3Ccircle cx='19.4' cy='16.4' r='2'/%3E%3C/svg%3E");
}

.product-details-page .overview .delivery > div {
	grid-column: 2;
	font-size: var(--mechan-size-small);
	line-height: 1.4;
	color: var(--mechan-text-muted);
}

.product-details-page .overview .delivery .value {
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	color: var(--mechan-text);
}

/* --- Headline price ----------------------------------------------------- */

/* Closer to the buy row than to the shipping line above it: in the design the
   figure, the quantity and the button are one block, and the small print under the
   price belongs to the price rather than opening a new group. */
.product-details-page .overview .prices {
	margin: 0 0 10px;
	overflow: visible;
}

.product-details-page .overview .prices > div {
	margin: 0;
}

.product-details-page .overview .prices label,
.product-details-page .overview .prices .rental-price > span:first-child,
.product-details-page .overview .prices .old-product-price > span:first-child,
.product-details-page .overview .prices .discounted-price > span:first-child {
	display: none;
}

/* Black, not koper. The koper price on this page is "your price" in the rail - the
   figure this customer is actually charged - and two copper prices a column apart
   read as two offers. The list price above it keeps the theme's strike-through. */
.product-details-page .overview .prices .product-price {
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-h2);
	line-height: 1.2;
	color: var(--mechan-text);
}

.product-details-page .overview .prices .old-product-price,
.product-details-page .overview .prices .old-product-price span,
.product-details-page .overview .prices .old-product-price label,
.product-details-page .overview .prices .non-discounted-price {
	font-size: var(--mechan-size-small);
	color: var(--mechan-text-muted);
}

/* The tax and unit-price notes are the small print under the figure. */
.product-details-page .overview .prices .tax-shipping-info,
.product-details-page .overview .prices .base-price-pangv {
	margin-top: 4px;
	font-size: var(--mechan-size-small);
	color: var(--mechan-text-muted);
}

.product-details-page .overview .prices .tax-shipping-info a {
	color: var(--mechan-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Quantity and add to cart ------------------------------------------- */

.product-details-page .overview .add-to-cart {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 0 12px;
}

.product-details-page .overview .add-to-cart-panel {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

/* The theme stacks the two steppers against the right edge of the input, half a
   line each; the design sets them either side of the number. Both are absolutely
   positioned inside the wrapper, so this is those same two elements moved - the
   emporium-icons glyphs and the increment/decrement wiring in emporium.js, which
   binds .plus and .minus, are untouched. */
.product-details-page .overview .add-to-cart-qty-wrapper {
	flex: none;
	width: 112px;
	height: 45px;
	margin: 0;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px var(--mechan-rule);
}

.product-details-page .overview .add-to-cart-qty-wrapper .qty-input {
	width: 100%;
	height: 45px;
	/* clear of both steppers, so a four-digit quantity does not run under them */
	padding: 0 32px;
	text-align: center;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-subheading);
	color: var(--mechan-text);
}

.product-details-page .overview .add-to-cart-qty-wrapper .plus,
.product-details-page .overview .add-to-cart-qty-wrapper .minus {
	top: 0;
	bottom: 0;
	width: 32px;
	height: auto;
	margin: 0;
	background-color: transparent;
	font-size: 9px;
	line-height: 45px;
	color: var(--mechan-text-muted);
}

.product-details-page .overview .add-to-cart-qty-wrapper .minus {
	right: auto;
	left: 0;
}

.product-details-page .overview .add-to-cart-qty-wrapper .plus {
	left: auto;
	right: 0;
}

.product-details-page .overview .add-to-cart-qty-wrapper .plus:hover,
.product-details-page .overview .add-to-cart-qty-wrapper .minus:hover {
	background-color: transparent;
	color: var(--mechan-copper);
}

/* The button takes whatever the quantity box leaves. It is a .button-1, so the
   koper and the hover come from the brand sheet already; the caption is set in the
   heading face because it is the one command on the page. */
.product-details-page .overview .add-to-cart-qty-wrapper + .add-to-cart-button,
.product-details-page .overview .qty-dropdown + .add-to-cart-button {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	height: 45px;
	font-family: var(--mechan-font-heading);
	font-weight: var(--mechan-weight-heading);
	font-size: var(--mechan-size-subheading);
	letter-spacing: var(--mechan-tracking-heading);
	text-transform: uppercase;
}

.product-details-page .overview .min-qty-notification,
.product-details-page .overview .pre-order-availability-date {
	margin: 0 0 8px;
	font-size: var(--mechan-size-small);
	color: var(--mechan-text-muted);
}

/* --- The quiet button on the line under it ------------------------------- */

/* The design puts a second button below ADD TO CART, the width of the buy row and
   outlined rather than filled. In the mock that button is a quote list with a menu
   on its right end; this store has no quote list, and the secondary action that is
   actually on this line is "add to wishlist" - so the line is shaped as the design
   shapes it and the button the store really has takes the shape.

   The theme has two looks for this button and neither is that one: a 45px grey
   square carrying a heart glyph and no label, sitting in against the right of the
   cart row, and from 1281px up (1280.css) the same square stretched to the full
   width with a 13px label beside the heart. Both are replaced. The glyph goes with
   them - on this line the label is the whole button, as it is on ADD TO CART above
   it, and the theme only hid the label because the square had no room for it. */
.product-details-page .overview .add-to-wishlist {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 0 12px;
}

/* ADD TO CART's box with the fill and the label swapped: same height, same radius,
   same uppercase heading face, so the two read as a primary and a secondary of one
   pair rather than as two different buttons. */
.product-details-page .overview .add-to-wishlist .button-2 {
	display: block;
	width: 100%;
	height: 45px;
	padding: 0 25px;
	background-color: var(--mechan-white);
	border: 1px solid var(--mechan-rule);
	border-radius: 3px;
	font-family: var(--mechan-font-heading);
	font-weight: var(--mechan-weight-heading);
	font-size: var(--mechan-size-subheading);
	line-height: 43px;
	letter-spacing: var(--mechan-tracking-heading);
	text-transform: uppercase;
	color: var(--mechan-text);
}

.product-details-page .overview .add-to-wishlist .button-2:before {
	display: none;
}

.product-details-page .overview .add-to-wishlist .button-2:hover {
	background-color: var(--mechan-white);
	border-color: var(--mechan-copper);
	color: var(--mechan-copper);
}

/* --- The rail: pricing and warehouse panels ----------------------------- */

.product-details-page .product-prices-box {
	text-align: left;
}

/* The theme frames the first child of the box, because that child used to be the
   whole buy column - price, quantity and button together. The panels carry their
   own frame now, and the buy column has moved into the flow of the overview. */
.product-details-page .product-prices-box > div:first-child {
	padding: 0;
	border: 0;
	border-radius: 0;
}

.product-details-page .mechan-pdp-panels {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Three panels share the frame: the pricing panel of this theme, and the warehouse
   stock and replacement panels the Mechan plugin renders into the after-SKU widget
   zone. That markup belongs to the plugin - the Ennery stock script matches on its
   classes and data attributes - so it is dressed from here and never rewritten. */
.product-details-page .mechan-pdp-panels .mechan-panel,
.product-details-page .mechan-pdp-panels .warehouse-stock,
.product-details-page .mechan-pdp-panels .replacement-products {
	display: block;
	margin: 0;
	background-color: var(--mechan-white);
	border: 1px solid var(--mechan-rule);
	border-radius: 3px;
	/* the caption band is painted to the edge, so its corners are cut by the card */
	overflow: hidden;
}

/* The plugin wraps its panel in an .additional-details of its own, which on this
   page is only a list of panels. */
.product-details-page .mechan-pdp-panels .additional-details {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

/* Every panel names itself with a .label as its first child. */
.product-details-page .mechan-pdp-panels .mechan-panel > .label,
.product-details-page .mechan-pdp-panels .warehouse-stock > .label,
.product-details-page .mechan-pdp-panels .replacement-products > .label {
	display: block;
	padding: 10px 14px;
	background-color: var(--mechan-panel-caption-bg);
	border-bottom: 1px solid var(--mechan-rule);
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-small);
	letter-spacing: var(--mechan-tracking-subheading);
	text-transform: uppercase;
	color: var(--mechan-text-muted);
}

.product-details-page .mechan-pdp-panels .panel-rows,
.product-details-page .mechan-pdp-panels .warehouse-stock-items {
	padding: 6px 14px 12px;
}

.product-details-page .mechan-pdp-panels .panel-row,
.product-details-page .mechan-pdp-panels .warehouse-stock-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: var(--mechan-size-body);
	line-height: 1.4;
}

.product-details-page .mechan-pdp-panels .row-label,
.product-details-page .mechan-pdp-panels .warehouse-stock-item .warehouse-name {
	color: var(--mechan-text-muted);
}

.product-details-page .mechan-pdp-panels .row-value,
.product-details-page .mechan-pdp-panels .warehouse-stock-item .value {
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	color: var(--mechan-text);
	text-align: right;
	white-space: nowrap;
}

/* What the customer pays, and the only koper figure on the page. The rule above it
   is there because the rows above are how it was arrived at. */
.product-details-page .mechan-pdp-panels .panel-row.your-price {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--mechan-rule);
}

.product-details-page .mechan-pdp-panels .panel-row.your-price .row-value {
	font-size: var(--mechan-size-h4);
	color: var(--mechan-copper);
}

/* A stock figure is a number scanned down the column, so it takes the same green
   as the in-stock line above. Zero is left green too: whether that reads as "none
   here" is the warehouse name's job, and CSS cannot see the value. */
.product-details-page .mechan-pdp-panels .warehouse-stock-item .value {
	color: var(--mechan-in-stock);
}

/* The replacement panel is a sentence, not a row of figures. */
.product-details-page .mechan-pdp-panels .replacement-products .value {
	display: block;
	padding: 10px 14px 12px;
	font-size: var(--mechan-size-body);
	line-height: var(--mechan-leading-body);
	color: var(--mechan-text);
}

/* --- Desktop: the rail sits beside the overview column ------------------- */

@media all and (min-width: 1281px) {
	/* From here up the theme splits the top of the overview in two, the name at 59%
	   with a fixed minimum height and the reviews floated right against it. The
	   design runs name, identifiers and score down one column instead, so that
	   split is undone rather than worked around. */
	.product-details-page .overview .product-name {
		display: block;
		width: auto;
		min-height: 0;
	}

	.product-details-page .overview .reviews-and-compare {
		float: none;
		width: auto;
		margin: 0 0 18px;
		text-align: left;
	}

	.product-details-page .overview .prices {
		margin: 0 0 10px;
	}

	.product-details-page .overview .add-to-cart {
		width: 100%;
		max-width: 420px;
		margin: 0 0 12px;
	}
}

/* --- Below the desktop rail: the panels fall under the buy column -------- */

@media all and (max-width: 1280px) {
	/* Below the rail breakpoint the theme script rearranges the page: .product-name -
	   the eyebrow with it - and the breadcrumb move up into .mobile-name-holder over
	   the gallery, and .product-prices-box moves into .attributes-wrapper, so the two
	   panels come to sit above the buy block rather than beside it. Everything below is
	   written against classes only, so it holds in both arrangements.

	   The theme centres the overview at these widths; a list of labels and values, and
	   a card of rows, only read ranged left. */
	.product-details-page .product-identity,
	.product-details-page .product-purchase,
	.product-details-page .product-prices-box {
		text-align: left;
	}

	.product-details-page .product-prices-box {
		margin: 24px 0 0;
	}

	.product-details-page .overview .reviews-and-compare,
	.product-details-page .overview .add-to-cart,
	.product-details-page .overview .add-to-wishlist {
		justify-content: flex-start;
		margin-left: 0;
		margin-right: 0;
	}
}

@media all and (max-width: 480px) {
	.product-details-page .overview .add-to-cart,
	.product-details-page .overview .add-to-wishlist {
		max-width: none;
	}

	/* On the narrowest phones the button gives up its share of the row and takes a
	   line of its own under the quantity box. */
	.product-details-page .overview .add-to-cart-panel {
		flex-wrap: wrap;
	}

	.product-details-page .overview .add-to-cart-qty-wrapper + .add-to-cart-button,
	.product-details-page .overview .qty-dropdown + .add-to-cart-button {
		flex: 1 1 100%;
	}

	.product-details-page .overview .prices .product-price {
		font-size: var(--mechan-size-h3);
	}
}


/* ============================================================================
   Product page - the tab block

   DESCRIPTION / SPECIFICATIONS / CROSS REFERENCES / DOCUMENTS / REVIEWS, as the
   design draws them: one white card, the labels ranged left and uppercase across
   the top of it and a hairline the only thing between them and the panel, with the
   tab in view marked by koper text over a koper underline that covers that line.
   The theme ships them centred, green, and full-bleed on a grey band, which is the
   look this section replaces.

   The labels line up with the copy under them at every width: the first tab's own
   side padding is the panel's side padding, which is also what sets the distance
   between one label and the next. Change one of the pair and change the other.

   The markup is the SevenSpikes NopQuickTabs plugin's, enhanced into a jQuery UI
   tabs widget on load: #quickTabs.productTabs picks up .ui-tabs, the list picks up
   .ui-tabs-nav, the open tab's li picks up .ui-tabs-active, and each panel picks up
   .ui-tabs-panel. No jQuery UI stylesheet is loaded - only its script - so nothing
   here is fighting a widget theme.

   Two things decide how these rules are written:

     - The plugin writes its own <link> to Themes/Emporium/Content/QuickTabs.css
       from inside the body, so that file lands after this one and wins every tie.
       Every rule below therefore out-specifies it (it reaches .ui-tabs.productTabs
       .ui-tabs-panel, so these carry .product-details-page as well) rather than
       relying on being loaded last, the way the rest of this sheet does.
     - QuickTabs.css sits under Plugins/ with the rest of the committed SevenSpikes
       suite, which is replaced wholesale when that suite is upgraded. Anything
       written into it is lost at the next upgrade, so the styling lives here.
   ========================================================================== */

/* The block is one card: the strip and the panel share a hairline, and the grey
   band the theme bleeds to the window edge at every breakpoint is undone with it. */
.product-details-page .ui-tabs.productTabs {
	margin: 40px 0 30px;
	background-color: var(--mechan-white);
	border: 1px solid var(--mechan-rule);
	border-radius: 3px;
	overflow: hidden;
}

/* --- The strip ----------------------------------------------------------- */

/* A flex row that scrolls sideways instead of wrapping. Six tabs with counts in
   them do not fit a phone, and the plugin's answer at that width is to stack them
   into six full-width rows, which pushes the panel a screen down; a strip that
   scrolls keeps the shape of the design at every width. */
.product-details-page .ui-tabs.productTabs .ui-tabs-nav {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	background-color: var(--mechan-white);
	border-bottom: 1px solid var(--mechan-rule);
	text-align: left;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.product-details-page .ui-tabs.productTabs .ui-tabs-nav li {
	display: block;
	flex: none;
	margin: 0;
	text-align: left;
}

.product-details-page .ui-tabs.productTabs .ui-tabs-nav li a {
	display: block;
	padding: 14px 16px;
	/* the underline of the open tab covers the strip's own rule rather than sitting
	   above it, so the two never read as a double line */
	margin-bottom: -1px;
	border-bottom: 3px solid transparent;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-small);
	line-height: 1.2;
	letter-spacing: var(--mechan-tracking-subheading);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mechan-text-muted);
	transition: color .15s ease, border-color .15s ease;
}

.product-details-page .ui-tabs.productTabs .ui-tabs-nav li a:hover {
	color: var(--mechan-copper);
}

/* .ui-tabs-selected is the class the older widget set and the theme still lists;
   both are kept so the open tab is marked whichever one the script writes. */
.product-details-page .ui-tabs.productTabs .ui-tabs-nav li.ui-tabs-active a,
.product-details-page .ui-tabs.productTabs .ui-tabs-nav li.ui-tabs-selected a,
.product-details-page .ui-tabs.productTabs .ui-tabs-nav li.ui-state-active a {
	border-bottom-color: var(--mechan-copper);
	color: var(--mechan-copper);
}

/* --- The panel ----------------------------------------------------------- */

.product-details-page .ui-tabs.productTabs .ui-tabs-panel {
	margin: 0;
	padding: 22px 16px;
	background-color: var(--mechan-white);
	text-align: left;
}

@media all and (min-width: 768px) {
	/* Off a phone the card can afford the design's inset, and the tabs take it with
	   the panel: 24px in front of the first label, and twice that between labels. */
	.product-details-page .ui-tabs.productTabs .ui-tabs-nav li a {
		padding: 14px 24px;
	}

	.product-details-page .ui-tabs.productTabs .ui-tabs-panel {
		margin: 0;
		padding: 30px 24px;
	}
}

@media all and (min-width: 1281px) {
	/* The card is a sibling of .product-essential, so left to itself it runs the whole
	   content width and passes under the rail - which is positioned absolutely inside
	   the overview column and hangs below it whenever the panels outrun the buy block.
	   The gutter .overview reserves with its padding-right is reserved here as a
	   margin, so the tabs end where the buy column ends and the panels keep their lane. */
	.product-details-page .ui-tabs.productTabs {
		margin-right: 325px;
	}

	/* QuickTabs.css pulls the panel out to the window edge here and pads it to 22%
	   either side; the card has edges of its own now, so both go. Only the space over
	   and under the copy grows with the card - the side inset is the one the labels
	   are aligned to, and it holds from 768px up. */
	.product-details-page .ui-tabs.productTabs .ui-tabs-panel {
		margin: 0;
		padding: 36px 24px;
	}
}

@media all and (min-width: 1601px) {
	/* the rail widens to 380px here, and the gutter with it */
	.product-details-page .ui-tabs.productTabs {
		margin-right: 415px;
	}
}

/* --- Copy written into the description ----------------------------------- */

/* The description is editor copy, so it can arrive with headings and tables of its
   own. The Titels rules size a heading for a page - h1 at 34px, h2 at 28px - and at
   that size a heading inside the panel reads as a second page title under the tabs.
   The scale is re-declared here two steps down; the brand face, colour and
   uppercase are kept, only the size and the space around the heading change. */
.product-details-page .full-description h1 {
	margin: 22px 0 10px;
	font-size: 22px;
}

.product-details-page .full-description h2 {
	margin: 20px 0 10px;
	font-size: 20px;
}

.product-details-page .full-description h3 {
	margin: 18px 0 8px;
	font-size: 18px;
}

.product-details-page .full-description h4,
.product-details-page .full-description h5,
.product-details-page .full-description h6 {
	margin: 16px 0 6px;
	font-size: var(--mechan-size-subheading);
}

/* whatever the copy opens with sits against the panel padding, not below it */
.product-details-page .full-description > :first-child {
	margin-top: 0;
}

@media all and (max-width: 480px) {
	.product-details-page .full-description h1 {
		font-size: 20px;
	}

	.product-details-page .full-description h2 {
		font-size: 18px;
	}

	.product-details-page .full-description h3 {
		font-size: var(--mechan-size-subheading);
	}
}

/* ============================================================================
   Product page - screenshot overview and tabs

   The PDP reference keeps the page body as two desktop columns: the left two
   thirds hold gallery, overview, tabs and related products; the right third is
   the stacked panel rail.
   These rules intentionally sit after the first PDP pass above so they can undo
   Emporium's absolute price rail and its late breakpoint files without editing
   those vendor theme files.
   ========================================================================== */

.product-details-page {
	--mechan-pdp-border: #e5e8ec;
	--mechan-pdp-muted: #5f6670;
	--mechan-pdp-soft: #f7f8fa;
	--mechan-pdp-gap: 34px;
}

.product-details-page .mechan-pdp-layout,
.product-details-page .mechan-pdp-main {
	min-width: 0;
}

.product-details-page .product-essential {
	margin: 0 0 28px;
}

.product-details-page .product-essential:after {
	content: none;
	display: none;
}

.product-details-page .gallery {
	float: none;
	width: auto;
	max-width: none;
	margin: 0 0 22px;
	padding: 12px;
	background-color: var(--mechan-white);
	border: 1px solid var(--mechan-pdp-border);
	border-radius: 4px;
	overflow: hidden;
}

.product-details-page .picture-gallery > div:first-child,
.product-details-page .picture-gallery ~ .video-gallery {
	float: none;
	width: auto;
}

.product-details-page .gallery .picture {
	aspect-ratio: 16 / 9;
	max-width: none;
	border-radius: 0;
	background-color: var(--mechan-white);
}

.product-details-page .gallery .picture:before {
	content: none;
	display: none;
}

.product-details-page .gallery .picture img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.product-details-page .gallery .picture-thumbs {
	display: flex;
	float: none;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 10px;
	width: auto;
	max-width: none;
	margin: 14px 0 0;
	padding: 0 44px;
	overflow-x: auto;
	overflow-y: hidden;
	text-align: left;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.product-details-page .gallery .thumb-item {
	display: block;
	flex: 0 0 82px;
	width: 82px;
	max-width: none;
	margin: 0;
	border: 1px solid var(--mechan-pdp-border);
	border-radius: 3px;
	background-color: var(--mechan-white);
}

.product-details-page .gallery .thumb-item:hover,
.product-details-page .gallery .thumb-item:focus-visible,
.product-details-page .gallery .thumb-item:first-child {
	border-color: var(--mechan-copper);
}

.product-details-page .overview {
	float: none;
	width: auto;
	margin: 0;
	padding-right: 0;
	text-align: left;
}

.product-details-page .mobile-name-holder {
	text-align: left;
}

.product-details-page .mobile-name-holder .breadcrumb {
	display: none;
}

.product-details-page .product-name {
	margin: 0 0 10px;
}

.product-details-page .product-category {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.25;
}

.product-details-page .product-category a,
.product-details-page .product-category a:hover {
	color: var(--mechan-copper);
}

.product-details-page .product-name h1 {
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: #20242a;
}

.product-details-page .product-identity {
	margin: 0 0 12px;
}

.product-details-page .overview .product-identity .additional-details > div,
.product-details-page .overview .product-identity .manufacturers {
	gap: 0 7px;
	margin: 0 0 3px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--mechan-pdp-muted);
}

.product-details-page .overview .product-identity .label {
	color: #2f3338;
}

.product-details-page .overview .product-identity .value,
.product-details-page .overview .product-identity .value a {
	color: var(--mechan-pdp-muted);
}

.product-details-page .overview .reviews-and-compare {
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 20px;
}

.product-details-page .overview .product-reviews-overview .product-review-box {
	margin: 0;
}

.product-details-page .product-review-box .rating,
.product-details-page .product-review-box .rating div {
	height: 13px;
	background-image: none;
	background-color: var(--mechan-rule);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath fill='black' d='M7 .7l1.49 4 4.27.18-3.34 2.66 1.14 4.11L7 9.29l-3.56 2.36 1.14-4.11L1.24 4.88l4.27-.18z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath fill='black' d='M7 .7l1.49 4 4.27.18-3.34 2.66 1.14 4.11L7 9.29l-3.56 2.36 1.14-4.11L1.24 4.88l4.27-.18z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 14px 13px;
	mask-size: 14px 13px;
}

.product-details-page .product-review-box .rating {
	width: 70px;
}

.product-details-page .product-review-box .rating div {
	background-color: var(--mechan-copper);
}

.product-details-page .overview .product-reviews-overview .rating-value {
	color: var(--mechan-pdp-muted);
}

.product-details-page .overview .product-reviews-overview .product-review-links,
.product-details-page .overview .product-reviews-overview .product-review-add,
.product-details-page .overview .product-reviews-overview .product-no-reviews {
	color: var(--mechan-pdp-muted);
}

.product-details-page .overview .product-reviews-overview .product-review-add a,
.product-details-page .overview .product-reviews-overview .product-no-reviews a {
	text-decoration-thickness: 1px;
}

.product-details-page .product-purchase {
	max-width: 430px;
}

.product-details-page .product-stock-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 30px;
	margin: 0 0 12px;
}

.product-details-page .overview .product-stock-summary .availability {
	margin: 0;
}

.product-details-page .overview .product-stock-summary .stock {
	align-items: center;
	font-size: 15px;
	line-height: 1.3;
}

.product-details-page .stock-available-quantity {
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: 14px;
	line-height: 1.3;
	color: var(--mechan-pdp-muted);
	white-space: nowrap;
}

.product-details-page .overview .delivery {
	margin: 0 0 18px;
}

.product-details-page .overview .delivery > div {
	font-size: 14px;
	color: var(--mechan-pdp-muted);
}

.product-details-page .overview .prices {
	margin: 0 0 10px;
}

.product-details-page .overview .prices .product-price {
	font-size: 24px;
	color: #20242a;
}

.product-details-page .overview .prices .tax-shipping-info,
.product-details-page .overview .prices .base-price-pangv {
	font-size: 12px;
	line-height: 1.35;
}

.product-details-page .overview .add-to-cart,
.product-details-page .overview .add-to-wishlist {
	max-width: 430px;
	margin: 0 0 10px;
}

.product-details-page .overview .add-to-cart-panel {
	gap: 14px;
}

.product-details-page .overview .add-to-cart-qty-wrapper {
	width: 110px;
	overflow: hidden;
	background-color: var(--mechan-white);
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px var(--mechan-pdp-border);
}

.product-details-page .overview .add-to-cart-qty-wrapper .minus,
.product-details-page .overview .add-to-cart-qty-wrapper .plus {
	box-sizing: border-box;
	border: 1px solid var(--mechan-pdp-border);
	background-color: var(--mechan-panel-caption-bg);
}

.product-details-page .overview .add-to-cart-qty-wrapper .minus {
	border-radius: 4px 0 0 4px;
}

.product-details-page .overview .add-to-cart-qty-wrapper .plus {
	border-radius: 0 4px 4px 0;
}

.product-details-page .overview .add-to-cart-qty-wrapper .plus:hover,
.product-details-page .overview .add-to-cart-qty-wrapper .minus:hover {
	background-color: var(--mechan-pdp-soft);
}

.product-details-page .overview .add-to-cart-qty-wrapper + .add-to-cart-button,
.product-details-page .overview .qty-dropdown + .add-to-cart-button {
	height: 45px;
	border-radius: 4px;
	background-color: var(--mechan-copper);
	font-family: var(--mechan-font-subheading);
	font-size: 14px;
	letter-spacing: 0;
}

.product-details-page .overview .add-to-cart-qty-wrapper + .add-to-cart-button:hover,
.product-details-page .overview .qty-dropdown + .add-to-cart-button:hover {
	background-color: var(--mechan-copper-dark);
}

.product-details-page .overview .add-to-wishlist .button-2 {
	height: 38px;
	padding: 0 18px;
	border-color: var(--mechan-pdp-border);
	border-radius: 4px;
	font-family: var(--mechan-font-subheading);
	font-size: 13px;
	line-height: 36px;
	letter-spacing: 0;
}

.product-details-page .overview .attributes-wrapper {
	max-width: none;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.product-details-page .overview .attributes-wrapper > div {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.product-details-page .overview .attributes-wrapper .attributes {
	margin: 0;
	padding: 0;
}

.product-details-page .overview .attributes-wrapper .attributes dl {
	margin: 0;
	overflow: visible;
}

.product-details-page .overview .attributes-wrapper .attributes dt,
.product-details-page .overview .attributes-wrapper .attributes dd {
	text-align: left;
}

.product-details-page .overview .attributes-wrapper .attributes dt {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.35;
	color: #20242a;
}

.product-details-page .overview .attributes-wrapper .attributes dd {
	margin: 0 0 24px;
}

.product-details-page .overview .attributes-wrapper .attributes dd:last-child {
	margin-bottom: 0;
}

.product-details-page .overview .attributes-wrapper .attributes dd input[type="text"],
.product-details-page .overview .attributes-wrapper .attributes dd input[type="password"],
.product-details-page .overview .attributes-wrapper .attributes dd input[type="tel"],
.product-details-page .overview .attributes-wrapper .attributes dd input[type="email"],
.product-details-page .overview .attributes-wrapper .attributes dd select:only-child,
.product-details-page .overview .attributes-wrapper .attributes dd textarea {
	width: 100%;
	max-width: 100%;
	border-color: var(--mechan-pdp-border);
	border-radius: 4px;
	text-align: left;
	font-size: 14px;
	color: #20242a;
}

.product-details-page .overview .attributes-wrapper .attributes dd input[type="text"],
.product-details-page .overview .attributes-wrapper .attributes dd input[type="password"],
.product-details-page .overview .attributes-wrapper .attributes dd input[type="tel"],
.product-details-page .overview .attributes-wrapper .attributes dd input[type="email"],
.product-details-page .overview .attributes-wrapper .attributes dd select:only-child {
	height: 45px;
	padding: 0 18px;
	line-height: 43px;
}

.product-details-page .overview .attributes-wrapper .attributes dd select:only-child {
	padding-right: 44px;
	background-position: right 16px center;
}

.product-details-page .overview .attributes-wrapper .attributes dd textarea {
	min-height: 92px;
	padding: 12px 18px;
	line-height: 1.4;
}

.product-details-page .product-purchase {
	margin: 0;
}

.product-details-page .product-prices-box {
	float: none;
	position: static;
	width: auto;
	max-width: none;
	margin: 22px 0 0;
	padding: 0;
	text-align: left;
}

.product-details-page .product-prices-box > div:first-child {
	padding: 0;
	border: 0;
	border-radius: 0;
}

.product-details-page .mechan-pdp-panels {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.product-details-page .mechan-pdp-panels .mechan-panel,
.product-details-page .mechan-pdp-panels .warehouse-stock,
.product-details-page .mechan-pdp-panels .replacement-products {
	background-color: var(--mechan-white);
	border-color: var(--mechan-pdp-border);
	border-radius: 4px;
	box-shadow: none;
}

.product-details-page .mechan-pdp-panels .mechan-panel > .label,
.product-details-page .mechan-pdp-panels .warehouse-stock > .label,
.product-details-page .mechan-pdp-panels .replacement-products > .label {
	padding: 12px 20px;
	background-color: var(--mechan-panel-caption-bg);
	border-bottom-color: var(--mechan-pdp-border);
	font-size: 13px;
	line-height: 1.25;
	color: #20242a;
}

.product-details-page .mechan-pdp-panels .panel-rows,
.product-details-page .mechan-pdp-panels .warehouse-stock-items {
	padding: 8px 20px 16px;
}

.product-details-page .mechan-pdp-panels .panel-row,
.product-details-page .mechan-pdp-panels .warehouse-stock-item {
	gap: 16px;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.35;
}

.product-details-page .mechan-pdp-panels .row-label,
.product-details-page .mechan-pdp-panels .warehouse-stock-item .warehouse-name {
	color: #2f3338;
}

.product-details-page .mechan-pdp-panels .row-value,
.product-details-page .mechan-pdp-panels .warehouse-stock-item .value {
	color: #20242a;
}

.product-details-page .mechan-pdp-panels .panel-row.your-price {
	margin-top: 7px;
	padding-top: 13px;
	border-top-color: var(--mechan-pdp-border);
}

.product-details-page .mechan-pdp-panels .panel-row.your-price .row-value {
	font-size: 18px;
	color: var(--mechan-copper);
}

.product-details-page .mechan-pdp-panels .panel-note {
	padding: 0 20px 16px;
	color: var(--mechan-pdp-muted);
}

.product-details-page .mechan-pdp-panels .replacement-products .value {
	padding: 12px 20px 16px;
}

.product-details-page .ui-tabs.productTabs {
	clear: both;
	margin: 28px 0 30px;
	background-color: var(--mechan-white);
	border: 1px solid var(--mechan-pdp-border);
	border-radius: 4px;
	height: auto !important;
	max-height: none;
	overflow: hidden;
}

.product-details-page .ui-tabs.productTabs .productTabs-header {
	background-color: var(--mechan-panel-caption-bg);
}

.product-details-page .ui-tabs.productTabs .productTabs-body,
.product-details-page .ui-tabs.productTabs .ui-tabs-panel {
	height: auto !important;
	min-height: 0;
	max-height: none;
}

.product-details-page .ui-tabs.productTabs .ui-tabs-nav {
	background-color: var(--mechan-panel-caption-bg);
	border-bottom-color: var(--mechan-pdp-border);
}

.product-details-page .ui-tabs.productTabs .ui-tabs-nav li a {
	padding: 13px 20px;
	border-bottom-width: 2px;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--mechan-pdp-muted);
}

.product-details-page .ui-tabs.productTabs .ui-tabs-nav li a:hover,
.product-details-page .ui-tabs.productTabs .ui-tabs-nav li.ui-tabs-active a,
.product-details-page .ui-tabs.productTabs .ui-tabs-nav li.ui-tabs-selected a,
.product-details-page .ui-tabs.productTabs .ui-tabs-nav li.ui-state-active a {
	border-bottom-color: var(--mechan-copper);
	color: var(--mechan-copper);
}

.product-details-page .ui-tabs.productTabs .ui-tabs-panel {
	margin: 0;
	padding: 18px 20px 26px;
	background-color: var(--mechan-white);
}

.product-details-page .ui-tabs.productTabs .product-specs-box,
.product-details-page .product-collateral .product-specs-box {
	margin: 0;
	padding: 0;
	background-color: transparent;
}

.product-details-page .file-attachments .title {
	display: none;
}

.product-details-page .ui-tabs.productTabs .product-specs-box .data-table tbody,
.product-details-page .product-collateral .product-specs-box .data-table tbody {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 44px;
	row-gap: 4px;
}

.product-details-page .ui-tabs.productTabs .product-specs-box .data-table tbody,
.product-details-page .product-collateral .product-specs-box .data-table tbody {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-details-page .ui-tabs.productTabs .product-specs-box .data-table tr,
.product-details-page .product-collateral .product-specs-box .data-table tr {
	display: grid;
	grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
	column-gap: 14px;
	align-items: baseline;
}

.product-details-page .ui-tabs.productTabs .product-specs-box .data-table tr.spec-header,
.product-details-page .product-collateral .product-specs-box .data-table tr.spec-header {
	grid-column: 1 / -1;
}

.product-details-page .ui-tabs.productTabs .product-specs-box .data-table td,
.product-details-page .product-collateral .product-specs-box .data-table td {
	display: block;
	padding: 0;
	border: 0;
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
	color: #2f3338;
}

.product-details-page .ui-tabs.productTabs .product-specs-box .data-table td.spec-name,
.product-details-page .product-collateral .product-specs-box .data-table td.spec-name {
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	color: var(--mechan-pdp-muted);
}

.product-details-page .ui-tabs.productTabs .product-specs-box .title,
.product-details-page .product-collateral .product-specs-box .title,
.product-details-page .ui-tabs.productTabs .product-specs-box thead,
.product-details-page .product-collateral .product-specs-box thead,
.product-details-page .ui-tabs.productTabs .product-specs-box .spec-group-name,
.product-details-page .product-collateral .product-specs-box .spec-group-name {
	display: none;
}

.product-details-page .ui-tabs.productTabs .product-specs-box .data-table,
.product-details-page .product-collateral .product-specs-box .data-table {
	display: block;
	margin: 0;
	border: 0;
	border-radius: 0;
}

@media all and (min-width: 768px) {
	.product-details-page .product-essential {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(330px, .95fr);
		grid-template-areas:
			"gallery name"
			"gallery overview";
		column-gap: var(--mechan-pdp-gap);
		align-items: start;
	}

	.product-details-page .product-essential > .mobile-name-holder {
		display: block;
		grid-area: name;
		margin: 6px 0 0;
	}

	.product-details-page .product-essential > .mobile-prev-next-holder {
		grid-column: 1 / -1;
	}

	.product-details-page .product-essential > .gallery {
		grid-area: gallery;
		margin: 0;
	}

	.product-details-page .product-essential > .overview {
		grid-area: overview;
	}

	.product-details-page .ui-tabs.productTabs .ui-tabs-panel {
		padding: 18px 22px 26px;
	}
}

@media all and (min-width: 1281px) {
	.product-details-page {
		--mechan-pdp-gap: 34px;
	}

	.product-details-page .mechan-pdp-layout {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
		column-gap: var(--mechan-pdp-gap);
		align-items: start;
	}

	.product-details-page .product-essential {
		grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
		grid-template-areas: "gallery overview";
		column-gap: var(--mechan-pdp-gap);
	}

	.product-details-page .product-essential > .mobile-name-holder {
		display: none;
	}

	.product-details-page .overview,
	.product-details-page .gallery {
		float: none;
		width: auto;
	}

	.product-details-page .overview {
		padding-right: 0;
	}

	.product-details-page .mechan-pdp-layout > .product-prices-box {
		margin-top: 0;
	}

}

@media all and (min-width: 1601px) {
	.product-details-page {
		--mechan-pdp-gap: 42px;
	}

	.product-details-page .product-essential {
		grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
	}
}

@media all and (max-width: 767px) {
	.product-details-page .gallery {
		padding: 10px;
	}

	.product-details-page .gallery .picture {
		aspect-ratio: 1 / 1;
	}

	.product-details-page .gallery .picture-thumbs {
		justify-content: flex-start;
		padding: 0;
	}

	.product-details-page .gallery .thumb-item {
		flex-basis: 72px;
		width: 72px;
	}

	.product-details-page .product-name h1 {
		font-size: 24px;
	}

	.product-details-page .product-purchase,
	.product-details-page .overview .add-to-cart,
	.product-details-page .overview .add-to-wishlist {
		max-width: none;
	}

	.product-details-page .ui-tabs.productTabs .ui-tabs-nav li a {
		padding: 13px 16px;
	}

	.product-details-page .ui-tabs.productTabs .product-specs-box .data-table tbody,
	.product-details-page .product-collateral .product-specs-box .data-table tbody {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
   "Over Mechan" band - the copy on a cream panel, the machine photo beside it

   The band is full bleed and split in two: the cream panel takes the left three
   fifths and the photo the rest, both running to their own edge of the window.

   The seam between them is not straight: it is the left side of the brand
   hexagon, one cell of it over the whole height of the panel. The panel reaches
   into the photo column by the taper and clips that much back again, so the
   photo shows through where the hexagon narrows towards its top and bottom
   points and the panel closes over it across the flat side between them.

   The vertices are the hexagon's own, 25% and 75% of the height, as
   --mechan-hexagon-clip has them. What the single cell cannot keep is
   --mechan-hexagon-ratio: percentages in a clip-path resolve against the box
   being clipped, so one cell is always as tall as the panel and the shape is the
   hexagon's profile stretched to the band rather than the regular hexagon. That
   leaves the taper as its own dial - --mechan-about-cut, set to the depth the
   design reads at rather than derived from the ratio.

   The USP row under the copy is a grid, and its dividers are the left border of
   each item after the first - which is why the rules stop before the last one
   and run the full height of icon plus caption. The icons are the four
   ../img/about-usp-*.svg, set as backgrounds so the markup stays plain HTML.

   The heading is black here, not koper: on the cream panel the copper is spent
   on the eyebrow and the icons, and the title carries the block on weight alone.

   Like .mechan-intro further up this file, the markup lives in a topic body, so
   everything below is driven by classes only.
   ========================================================================== */

/* The theme caps .topic-block at 1000px and centres its text; the band brings
   its own full-bleed surfaces and reads left-aligned. */
.topic-block:has(.mechan-about),
.home-page .topic-block:has(.mechan-about) {
	width: auto;
	max-width: none;
	padding: 0;
	text-align: left;
}

/* The band carries its own heading, so the topic title row is redundant. */
.topic-block:has(.mechan-about) .topic-block-title {
	display: none;
}

.mechan-about {
	/* The taper of the facet: how far the panel reaches into the photo column, and
	   so how deep the clip cuts back at the hexagon's two points. Tracks the
	   viewport, so the seam keeps its slope from a laptop to a wide monitor. */
	--mechan-about-cut: clamp(36px, 7vw, 120px);
	/* The band is full bleed, so it has to put back the gutter the container took
	   away, or its copy would not line up with the sections above and below it.
	   This is .master-wrapper-content's own side padding, followed step for step:
	   10px from styles.css, 20px from 768.css and 6vw from 1280.css. */
	--mechan-about-gutter: 10px;
	/* Not in the palette: the cream of the brand guide's own page grounds, a
	   warmer off-white than the #f6f6f6 the intro section above uses. */
	--mechan-about-surface: #f4f2ed;

	/* Full bleed, so both surfaces run edge to edge: a 100vw box centred on the
	   container's own centre line. .master-wrapper-content is overflow: hidden,
	   so this cannot turn into a horizontal scrollbar. The block margins are set
	   on their own - a margin shorthand here would overwrite the breakout. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 28px;
	margin-bottom: 28px;
	color: var(--mechan-text);
	text-align: left;
}

/* The two steps .master-wrapper-content takes, on their own breakpoints rather
   than with the layout ones below, so the gutter stays tied to the theme's. */
@media all and (min-width: 768px) {
	.mechan-about {
		--mechan-about-gutter: 20px;
	}
}

@media all and (min-width: 1281px) {
	.mechan-about {
		--mechan-about-gutter: 6vw;
	}
}

.mechan-about-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* --- The cream panel ----------------------------------------------------- */

.mechan-about-panel {
	position: relative;
	z-index: 1; /* over the photo where the two overlap */
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 4vw, 64px) var(--mechan-about-gutter);
	background-color: var(--mechan-about-surface);
}

/* A measure that stays readable when the panel is three fifths of a wide
   window: the copy stops well before the facet does. */
.mechan-about-copy {
	max-width: 620px;
}

/* Arial Bold koper, a step under body copy and widely tracked - the only place
   in the band the tussenkop colour is used. */
.mechan-about-eyebrow {
	display: block;
	margin-bottom: 14px;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-size-small);
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mechan-copper);
}

/* Arial Narrow Bold uppercase comes from the heading rules further up this file.
   Two things are overridden: the colour, black here so the koper stays an
   accent, and the size - this is the largest type on the page, so it runs past
   --mechan-size-h1 and tracks the viewport down to something a phone can hold. */
.mechan-about-title {
	margin: 0 0 18px;
	font-size: clamp(30px, 3.2vw, 52px);
	color: var(--mechan-text);
}

/* Beats .topic-block-body p, which greys the copy and sets it at 16px. */
.mechan-about .mechan-about-text {
	margin: 0;
	font-size: var(--mechan-size-subheading);
	line-height: 1.7;
	color: var(--mechan-text);
}

/* --- The four USPs under the copy ---------------------------------------- */

/* A grid rather than a flex row: equal columns are what keep the dividers evenly
   spaced however uneven the captions are. Two by two here, one row of four on
   desktop below. */
.mechan-about-usps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: clamp(28px, 3.5vw, 48px) 0 0;
	padding: 0;
	list-style: none;
}

.mechan-about-usp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 18px 12px;
	text-align: center;
}

/* The hairline dividers of the design. Borders on the items rather than a rule
   element, so they run the full height of icon plus caption and no divider ever
   lands on an outside edge: the left one only between the columns, the top one
   only under the first row. */
.mechan-about-usp:nth-child(even) {
	border-left: 1px solid var(--mechan-rule);
}

.mechan-about-usp:nth-child(n+3) {
	border-top: 1px solid var(--mechan-rule);
}

/* The koper line art of ../img/about-usp-*.svg, contained so the stroke weight
   stays the one the files were drawn at - and those files are drawn against this
   44px: a 1.2 stroke on their 24 box renders the 2.2px line of the usp-*.png
   icons of the design. Change the size here and the stroke in the four files has
   to follow, or the lines stop matching the rest of the storefront. */
.mechan-about-usp-icon {
	flex: none;
	width: 44px;
	height: 44px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.mechan-about-usp--dealer .mechan-about-usp-icon {
	background-image: url('../img/about-usp-dealer.svg');
}

.mechan-about-usp--advice .mechan-about-usp-icon {
	background-image: url('../img/about-usp-advice.svg');
}

.mechan-about-usp--service .mechan-about-usp-icon {
	background-image: url('../img/about-usp-service.svg');
}

.mechan-about-usp--growth .mechan-about-usp-icon {
	background-image: url('../img/about-usp-growth.svg');
}

/* Two short lines of body copy, black - the caption explains the icon, it does
   not compete with the title. */
.mechan-about-usp-label {
	font-family: var(--mechan-font-body);
	font-weight: var(--mechan-weight-body);
	font-size: 14px;
	line-height: 1.4;
	color: var(--mechan-text);
}

/* --- The photo ----------------------------------------------------------- */

.mechan-about-media {
	position: relative;
	z-index: 0; /* under the panel, so the facet is what cuts the seam */
	overflow: hidden;
	background-color: var(--mechan-rule); /* stands in while the photo loads */
}

/* Cropped, not shown whole: the photo's job here is to fill its half of the band
   to whatever height the copy beside it needs. */
.mechan-about-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stacked, the media has no panel to take its height from, so it brings a crop
   ratio of its own. */
@media all and (max-width: 1024px) {
	.mechan-about-media {
		aspect-ratio: 16 / 9;
	}
}

/* --- Desktop: the two halves side by side, cut by the facet -------------- */

@media all and (min-width: 1025px) {
	.mechan-about {
		margin-top: 36px;
		margin-bottom: 36px;
	}

	/* Three fifths to the copy, two to the photo, as the design has it. */
	.mechan-about-inner {
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	}

	.mechan-about-panel {
		grid-column: 1;
		grid-row: 1;
		/* Reaches past the column boundary by the taper, which is what gives the
		   clip below something to take back. */
		margin-right: calc(var(--mechan-about-cut) * -1);
		/* The left side of --mechan-hexagon-clip, once: pulled back by the taper at
		   the panel's top and bottom, out at its full width across the flat side
		   between the hexagon's two vertices at 25% and 75%. */
		clip-path: polygon(
			0 0,
			calc(100% - var(--mechan-about-cut)) 0,
			100% 25%,
			100% 75%,
			calc(100% - var(--mechan-about-cut)) 100%,
			0 100%
		);
	}

	.mechan-about-media {
		grid-column: 2;
		grid-row: 1;
	}

	/* One row of four, so all three dividers run vertically. */
	.mechan-about-usps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		/* Both paddings are the theme's gutter now, so the panel's content box runs
		   a whole taper past the column boundary - and the row is the one thing wide
		   enough to reach it. The panel's bottom corner is where the hexagon has
		   cut furthest back, so without this the last divider and caption would be
		   clipped. Taking the taper off here rather than off the padding is what
		   keeps the copy above lined up with the rest of the page. */
		max-width: calc(100% - var(--mechan-about-cut));
	}

	.mechan-about-usp + .mechan-about-usp {
		border-left: 1px solid var(--mechan-rule);
	}

	.mechan-about-usp:nth-child(n+3) {
		border-top: 0;
	}
}

/* --- Small phones -------------------------------------------------------- */

@media all and (max-width: 480px) {
	.mechan-about-usp {
		padding: 16px 8px;
	}

	.mechan-about-usp-icon {
		width: 38px;
		height: 38px;
	}
}

.header-links a.ico-cart:before {
  font-size: 24px;
}

.full-description,
.product-specs-box {
  background-color: transparent;
}


/* ============================================================================
   MECHAN SMALL PRODUCT CAROUSELS - "RELATED PRODUCTS" and its siblings

   These rows are not theme markup: they are a custom JCarousel plugin skin.
   Admin should use mechan-small-product instead of Emporium's original
   small-products skin, so the Mechan card treatment is opt-in and does not
   leak into other Emporium carousels.

     .jCarouselMainWrapper.mechan-small-product <- the skin wrapper
       .nop-jcarousel.product-grid
         .title.carousel-title                 <- "RELATED PRODUCTS"
         .slick-carousel.item-grid             <- becomes .slick-list/.slick-track
           .carousel-item                      <- slick puts .slick-slide here
             .item-box > .product-item         <- the shared _ProductBox
         .loading-overlay

   Slick runs with the default rows: 1, so it inserts no wrapper of its own and
   .carousel-item *is* .slick-slide. Its width comes from the slidesToShow of
   the admin's responsive breakpoints, which is why nothing below sets a card
   width: the gutter is padding inside the slide slick has already measured.

   The original small-products skin ships as a horizontal strip - a 120px
   (150px past 1280) square picture on the left, the title and price beside it,
   the whole box capped at that height and every card sharing one border around
   .slick-list. The design is the other object: a plain section title followed
   by separate white cards with a hairline and a radius of their own, a
   contained picture across the top, then the title and a bold black price under
   it.

   Specificity, not order, is what wins here. The plugin's Content/JCarousel.css
   is <link>ed from inside the component in the body - after this file, which is
   added last in the head - so every rule below has to out-specify its
   counterpart there rather than merely follow it. That is what the
   .jCarouselMainWrapper.mechan-small-product .nop-jcarousel prefix buys: one
   more class than the plugin's deepest selectors for the original skin.
   The !important flags mirror ones already set in styles.css, 1280.css or
   JCarousel.css; they are not there by preference.
   ========================================================================== */

.jCarouselMainWrapper.mechan-small-product {
	--mechan-carousel-surface: transparent;
	--mechan-carousel-pad: 0;
	--mechan-carousel-accent: var(--mechan-small-product-accent);

	/* Card chrome. Colours are declared in :root at the top of this file. */
	--mechan-carousel-card-rule: var(--mechan-small-product-border);
	--mechan-carousel-muted: var(--mechan-small-product-muted);
	--mechan-carousel-radius: 3px;
	--mechan-carousel-card-pad: 10px;

	/* Half the gap between two cards - it is applied to both sides of a slide,
	   and taken off .slick-list again so the row still starts and ends flush
	   with the header above it. */
	--mechan-carousel-gutter: 5px;

	/* The picture band inside a card. Fixed, because the theme's 1:1 spacer
	   would make a card as tall as it is wide. In the design it is a little over
	   a third of the card's height - the part is recognisable, and the name and
	   the price still carry the card. */
	--mechan-carousel-picture: 72px;

	/* Two lines of title are reserved whether or not the name needs them. */
	--mechan-carousel-title-size: 13px;
	--mechan-carousel-title-leading: 1.25;
	--mechan-carousel-price-size: 15px;
}

/* --- The section shell --------------------------------------------------- */
.jCarouselMainWrapper.mechan-small-product {
	padding: var(--mechan-carousel-pad);
	background-color: var(--mechan-carousel-surface);
	border: 0;
	border-radius: 0;
}

/* .nop-jcarousel carries an 80px bottom margin in the plugin stylesheet; the
   section spacing here is controlled by the wrapper and title instead. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel {
	margin: 0 !important;
	padding: 0;
}

/* JCarousel.css holds the whole row 50px clear of what is above it. In the
   design the related row follows the tab block at a tighter distance, so it
   closes up. The hook class carries enough specificity to beat the plugin's
   body-loaded stylesheet. */
.carousel-wrapper:has(> .jCarouselMainWrapper.mechan-small-product) {
	margin-top: 18px;
}

.jCarouselMainWrapper.mechan-small-product + .jCarouselMainWrapper.mechan-small-product {
	margin: 20px 0 0 !important;
}

/* --- The header: "RELATED PRODUCTS" -------------------------------------- */
/* A tussenkop (Arial Bold, uppercase, black), left over the row - not the
   theme's centred 30px Arial Narrow title. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .title.carousel-title {
	display: block !important;
	width: auto;
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: var(--mechan-tracking-subheading);
	text-transform: uppercase;
	text-align: left;
	color: var(--mechan-text);
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .carousel-title strong {
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
}

/* --- The row ------------------------------------------------------------- */
/* The plugin draws one border around the whole strip and squares off the cards
   inside it. Here each card is its own object, so the strip has no chrome. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .slick-list {
	margin: 0 calc(var(--mechan-carousel-gutter) * -1);
	border: 0;
	border-radius: 0;
}

/* Cards in a row are as tall as the tallest: a second title line, an old price
   above the current one or a tax notice must not leave the row ragged. Slick
   sets an explicit width on the track and on every slide, so turning the track
   into a flex row changes the heights and nothing else. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .slick-track {
	display: flex;
	align-items: stretch;
}

/* slick.css clears the floated track with a :before / :after pair; in a flex
   row they would be two more items. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .slick-track:before,
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .slick-track:after {
	content: none;
	display: none;
}

/* The gutter, and the slide passing the row height on to the card inside it.
   Both flags are answers to ones already set by the base theme and plugin. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .carousel-item,
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .slick-slide {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 0 !important;
	padding: 0 var(--mechan-carousel-gutter) !important;
}

/* --- The card ------------------------------------------------------------ */

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box {
	flex: 1 1 auto;
	height: 100%;
	max-height: none;
	margin: 0 !important;
	border: 1px solid var(--mechan-carousel-card-rule) !important;
	border-radius: var(--mechan-carousel-radius) !important;
	background-color: var(--mechan-small-product-surface);
	overflow: hidden;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box:hover {
	border-color: var(--mechan-carousel-accent) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* Picture over copy, and the copy takes the height a shorter neighbour leaves
   over so the prices of a row line up along one baseline. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .product-item {
	display: flex;
	flex-direction: column;
	height: 100%;
	font-size: var(--mechan-size-body);
}

/* The strip sized the picture column; in a card it is the full width. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .product-item > div:first-child {
	width: auto;
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .picture {
	flex: 0 0 auto;
	margin: 0;
	padding: var(--mechan-carousel-card-pad) var(--mechan-carousel-card-pad) 0;
	border-radius: 0;
}

/* .picture a:before is the theme's 1:1 spacer - the picture band has its own
   height here, so the spacer goes and the height is stated outright. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .picture a,
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .picture .swiper {
	height: var(--mechan-carousel-picture);
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .picture a:before {
	content: none;
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .picture .swiper-wrapper,
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .picture .swiper-slide {
	height: 100%;
}

/* The theme crops the picture to fill its box (height: 100%; max-width: none).
   A part has to be shown whole, so it is contained instead - the absolute
   centring from styles.css still places it. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .picture a img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* The dark scrim the product grid drops over a hovered picture: the card
   answers a hover with its copper edge, and that is enough. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .picture a:after {
	content: none;
	display: none;
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: auto;
	padding: var(--mechan-carousel-card-pad);
	text-align: left;
}

/* --- Title and price ----------------------------------------------------- */
/* The name is bodytekst, not a kopregel: .product-title is an h2, so the whole
   heading treatment from the top of this file has to be undone. The two lines
   are reserved on the h2 and the clamp sits on the <a> inside it, which is the
   element that actually holds the line boxes. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .product-title {
	height: calc(var(--mechan-carousel-title-size) * var(--mechan-carousel-title-leading) * 2);
	max-height: none;
	margin: 0 0 6px;
	padding: 0;
	overflow: hidden;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-carousel-title-size);
	line-height: var(--mechan-carousel-title-leading);
	letter-spacing: normal;
	text-transform: none;
	color: var(--mechan-text);
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .product-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: inherit;
	transition: color .2s ease;
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .product-title a:hover {
	color: var(--mechan-carousel-accent);
}

/* A compact card in the design is image, name, price. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .sku,
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .description,
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .product-rating-box,
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .buttons,
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .btn-wrapper {
	display: none;
}

/* .add-info is centred for the product grid elsewhere in this file; in a card
   this size everything reads down the left edge. It is pushed to the bottom so
   the prices of a row sit on one line. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .add-info {
	display: block;
	margin-top: auto;
	text-align: left;
}

/* The strip clipped the price block to one line. The card gives the tax and
   unit-price notices - which the store may be obliged to show - their own line
   instead; the flex track above absorbs the difference in height. */
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .prices {
	max-width: 100%;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .prices .actual-price {
	display: block;
	margin: 0;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: var(--mechan-carousel-price-size);
	line-height: 1.3;
	color: var(--mechan-text);
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .prices .old-price {
	display: block;
	margin: 0;
	font-size: var(--mechan-size-small);
	color: var(--mechan-carousel-muted);
}

.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .prices .tax-shipping-info,
.jCarouselMainWrapper.mechan-small-product .nop-jcarousel .item-box .prices .base-price-pangv {
	display: block;
	margin: 2px 0 0;
	font-size: 11px;
	line-height: 1.3;
	color: var(--mechan-carousel-muted);
}

/* --- Arrows, dots, loader ------------------------------------------------ */
/* The plugin's chrome is the theme's green (#97c300 on hover, #eebe00 for the
   active dot, a green loader ring). Same shapes, brand colours. */
.jCarouselMainWrapper.mechan-small-product .slick-prev,
.jCarouselMainWrapper.mechan-small-product .slick-next {
	background-color: var(--mechan-white);
	border: 1px solid var(--mechan-carousel-card-rule);
}

.jCarouselMainWrapper.mechan-small-product .slick-prev:before,
.jCarouselMainWrapper.mechan-small-product .slick-next:before {
	color: var(--mechan-text);
}

.jCarouselMainWrapper.mechan-small-product .slick-prev:hover,
.jCarouselMainWrapper.mechan-small-product .slick-next:hover {
	background-color: var(--mechan-carousel-accent);
	border-color: var(--mechan-carousel-accent);
}

.jCarouselMainWrapper.mechan-small-product .slick-prev:hover:before,
.jCarouselMainWrapper.mechan-small-product .slick-next:hover:before {
	color: var(--mechan-white);
}

.jCarouselMainWrapper.mechan-small-product .slick-dots .slick-active button {
	background-color: var(--mechan-carousel-accent);
}

.jCarouselMainWrapper.mechan-small-product .loading-overlay:before,
.jCarouselMainWrapper.mechan-small-product .loading-overlay:after {
	border-color: var(--mechan-carousel-accent);
}

/* --- Breakpoints --------------------------------------------------------- */
/* Only the dials move. Two cards fit a phone, and the picture and the padding
   grow with the room the row gets. */

@media all and (min-width: 768px) {
	.jCarouselMainWrapper.mechan-small-product {
		--mechan-carousel-card-pad: 12px;
		--mechan-carousel-picture: 78px;
	}
}

@media all and (min-width: 1281px) {
	.jCarouselMainWrapper.mechan-small-product {
		--mechan-carousel-picture: 84px;
	}

	/* Past 1280 the plugin sets the two product-page carousels side by side at
	   47% each, which leaves two or three cards in a row. The design is one
	   full-width row of five per carousel, so they stack instead. */
	.carousel-wrapper .jCarouselMainWrapper.mechan-small-product,
	.carousel-wrapper .jCarouselMainWrapper.mechan-small-product:only-child {
		display: block;
		width: 100%;
		margin: 0 !important;
	}

	.carousel-wrapper .jCarouselMainWrapper.mechan-small-product + .jCarouselMainWrapper.mechan-small-product {
		margin: 30px 0 0 !important;
	}

	.carousel-wrapper .jCarouselMainWrapper.mechan-small-product .nop-jcarousel .slick-carousel {
		display: block;
		width: 100%;
		margin: 0 !important;
	}
}


/* ============================================================================
   Product page - what the rail panels hold

   The rows and lists the design draws inside the three cards of the rail, on top
   of the card frame set further up this sheet: the price tier picker, the note
   under a panel's rows, and the compatible machines panel with a tab per make.

   Views/Product/_ProductPricingPanel.cshtml and
   Views/Shared/_CompatibleMachinesPanel.cshtml carry the markup. Rows the design
   draws but the storefront cannot fill yet are marked data-mechan-mock="true";
   nothing here treats a mock row differently, so the card looks the same the day
   the figures become real.
   ========================================================================== */

/* --- The price tier row -------------------------------------------------- */

/* The design draws the tier as a picker. Until selectable price groups are wired,
   the options are mock data and the control does not post a value. */
.product-details-page .mechan-pdp-panels .panel-row.customer-row .row-value {
	flex: 0 1 190px;
	white-space: normal;
}

.product-details-page .mechan-pdp-panels .pricing-panel .customer-tier-select {
	width: 100%;
	height: 34px;
	padding: 0 34px 0 12px;
	border: 1px solid var(--mechan-pdp-border);
	border-radius: 4px;
	background-color: var(--mechan-panel-caption-bg);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px 7px;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: 13px;
	line-height: 32px;
	color: #20242a;
	cursor: pointer;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234d4d4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
}

.product-details-page .mechan-pdp-panels .pricing-panel .customer-tier-select:hover,
.product-details-page .mechan-pdp-panels .pricing-panel .customer-tier-select:focus {
	border-color: var(--mechan-copper);
	outline: none;
}

/* --- Notes ---------------------------------------------------------------- */

/* The small print under a panel's rows - "Prices excl. VAT". The negative margin
   takes back the padding the row list already carries, so the note sits under the
   last row rather than a line below it. */
.product-details-page .mechan-pdp-panels .panel-note {
	display: block;
	margin-top: -8px;
	padding: 0 20px 16px;
	font-size: var(--mechan-size-small);
	line-height: 1.4;
	color: var(--mechan-pdp-muted);
}

/* --- Compatible machines ------------------------------------------------- */

/* The make strip: the tab block of the page again, at panel scale. It scrolls
   sideways for a part that fits more makes than the rail is wide. */
.product-details-page .mechan-pdp-panels .machines-panel .panel-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	margin: 0;
	padding: 0 20px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	border-bottom: 1px solid var(--mechan-pdp-border);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.product-details-page .mechan-pdp-panels .machines-panel .panel-tabs li {
	flex: none;
	margin: 0;
}

.product-details-page .mechan-pdp-panels .machines-panel .panel-tab {
	display: block;
	padding: 12px 0 10px;
	/* the underline covers the strip's rule instead of sitting above it */
	margin-bottom: -1px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: var(--mechan-font-subheading);
	font-weight: var(--mechan-weight-subheading);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mechan-pdp-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.product-details-page .mechan-pdp-panels .machines-panel .panel-tab:hover {
	color: var(--mechan-copper);
}

.product-details-page .mechan-pdp-panels .machines-panel .panel-tab.active {
	border-bottom-color: var(--mechan-copper);
	color: var(--mechan-copper);
}

/* One group per make. Every group is in the markup and the script only moves the
   active class, so switching makes costs no request. */
.product-details-page .mechan-pdp-panels .machines-panel .panel-machines {
	display: none;
	padding: 9px 20px 15px;
}

.product-details-page .mechan-pdp-panels .machines-panel .panel-machines.active {
	display: block;
}

.product-details-page .mechan-pdp-panels .machines-panel .machine-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-details-page .mechan-pdp-panels .machines-panel .machine-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 2px 0;
	font-size: 13px;
	line-height: 1.35;
	color: #2f3338;
}

/* the ticked bullet of the design, in the availability green */
.product-details-page .mechan-pdp-panels .machines-panel .machine-list li:before {
	content: "";
	flex: none;
	width: 13px;
	height: 13px;
	margin-top: 2px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234a8b2c' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='m4.9 8.3 2.1 2.1 4.1-4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Past the fifth machine the rows are rendered but folded away, so "view all" is a
   class on the group rather than a request for the rest of the list. */
.product-details-page .mechan-pdp-panels .machines-panel .machine-list li.extra {
	display: none;
}

.product-details-page .mechan-pdp-panels .machines-panel .panel-machines.show-all .machine-list li.extra {
	display: flex;
}

.product-details-page .mechan-pdp-panels .machines-panel .machines-view-all {
	display: inline-block;
	margin: 9px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--mechan-font-body);
	font-weight: var(--mechan-weight-body);
	font-size: var(--mechan-size-small);
	color: var(--mechan-copper);
	cursor: pointer;
}

.product-details-page .mechan-pdp-panels .machines-panel .machines-view-all:hover {
	color: var(--mechan-copper-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.html-product-details-page .master-wrapper-content {
  padding: 20px 6vw 70px;
}