/* ==========================================================================
   Oops, Mine Co. — the theme's own screens (shop, product, blog, cart, account,
   Elementor pages) restyled to the home page's rhythm: contained widths, the
   serif rose-gold titles, the sand product cards. Loaded after omc.css.
   Pairs with two Customizer values set by publish-site.php:
   product_grid_width = boxed, product_page_layout = layout-4.
   ========================================================================== */

/* ─── Page title band (breadcrumbs row + title) ─── */
.c-page-header { background: #fff; }
.c-page-header__row-2 { padding-top: clamp(14px, 1.6vw, 22px); padding-bottom: clamp(14px, 1.6vw, 22px); }
.c-page-header__title,
.c-page-header__title--center {
	font-family: var(--omc-serif);
	font-weight: 500;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--omc-rose-dark);
	min-height: 0;
	padding-top: 6px;
	padding-bottom: 6px;
}
.c-breadcrumbs, .c-breadcrumbs a, .c-breadcrumbs span { font: 500 10px/1.6 var(--omc-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--omc-muted); }
.c-breadcrumbs a:hover { color: var(--omc-rose-dark); }

/* shop / category pages: drop the demo's line-art category strip, centre the title like every other page */
.c-page-header__row-2-col--categories { display: none; }
.c-page-header__row-2--2-columns { justify-content: center; }
.c-page-header__row-2--2-columns .c-page-header__row-2-col--title-breadcrumbs { width: 100% !important; }
.c-page-header__title { justify-content: center; text-align: center; width: 100%; }
.c-page-header .c-page-header__title { min-height: 0 !important; } /* the theme reserves the category-strip height here */
.c-page-header__row-2, .c-page-header__row-2-col { min-height: 0; }
.c-page-header__row-2-col--title-breadcrumbs { width: 100% !important; }
.c-page-header__row-1 { border-bottom: 1px solid var(--omc-line); }
.woocommerce-result-count, .woocommerce-ordering select { font: 500 10px/1.6 var(--omc-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--omc-muted); }

/* ─── Product grids everywhere (shop, categories, related, search): the home page card ─── */
.c-product-grid__wrap--fullwidth, .c-product-grid__wrap--boxed { margin-right: 0; }
.c-product-grid__list:not(.owl-carousel):not(.c-product-grid__list--carousel) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 28px);
	margin: 0;
}
.c-product-grid__list--5-per-row:not(.owl-carousel):not(.c-product-grid__list--carousel) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.c-product-grid__list--3-per-row:not(.owl-carousel):not(.c-product-grid__list--carousel) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-product-grid__item,
.c-product-grid__item--background {
	padding: clamp(10px, 1vw, 14px);
	border: 1px solid var(--omc-line);
	background: #f3eae2;
	transition: border-color .3s var(--omc-ease), box-shadow .3s var(--omc-ease), transform .3s var(--omc-ease);
}
.c-product-grid__list:not(.owl-carousel) .c-product-grid__item { width: auto; }
.c-product-grid__item::after { display: none; }
.c-product-grid__item:hover { border-color: var(--omc-rose); box-shadow: 0 24px 48px -30px rgba(58, 43, 38, .35); transform: translateY(-3px); }
/* carousels (related / recently viewed) keep the theme's slider; just space the cards */
.c-product-grid__list.owl-carousel .owl-item > .c-product-grid__item { margin: 0 clamp(6px, .8vw, 12px); }
.c-product-grid__list.owl-carousel .owl-stage-outer { padding: 4px 0 30px; }
.c-product-grid__thumb-wrap { padding-bottom: 100%; border: 1px solid var(--omc-line); background: #fff; }
.c-product-grid__item:hover .c-product-grid__thumb-wrap { background: #fff; }
.c-product-grid__thumb { object-fit: contain; padding: 6%; box-sizing: border-box; }
.c-product-grid__details { padding: 14px 4px 4px; }
.c-product-grid__short-desc { display: none; }
.c-product-grid__category-list { font: 500 10px/1.4 var(--omc-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--omc-muted); }
.c-product-grid__category-item { color: inherit; }
.c-product-grid__item .woocommerce-loop-product__title {
	font-family: var(--omc-serif);
	font-size: clamp(19px, 1.5vw, 23px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--omc-ink);
	margin: 6px 0 0;
	/* Two lines whether the name needs them or not. The price then sits at the same height on
	   every card, which is the whole reason a row of them looks level. */
	min-height: 2.3em;
	align-items: flex-start;
}
/* The name is one flex child and the rating badge the other; min-width lets the name wrap
   instead of pushing the badge out, and the clamp keeps a third line from moving the price. */
.c-product-grid__item .c-product-grid__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-width: 0;
}
.c-product-grid__item .c-product-grid__rating { flex: 0 0 auto; }
.c-product-grid__price-wrap { margin-top: 8px; font: 500 13px/1.4 var(--omc-sans); letter-spacing: .02em; color: var(--omc-ink); }
.c-product-grid__price-wrap ins { color: var(--omc-rose-dark); }
.woocommerce-pagination { padding-top: clamp(24px, 3vw, 44px); }

/* ─── Product page (layout-4: gallery + summary inside the 1170px container) ─── */
.c-product__wrap--layout-4 { column-gap: clamp(32px, 5vw, 72px); padding-top: clamp(12px, 1.6vw, 24px); }
.c-product .c-product__title, .c-product .product_title {
	font-family: var(--omc-serif);
	font-weight: 500;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--omc-ink);
}
.c-product .c-product__col-2 .price { font: 500 18px/1.4 var(--omc-sans); letter-spacing: .02em; color: var(--omc-ink); }
.c-product .c-product__col-2 .price ins { color: var(--omc-rose-dark); text-decoration: none; }
.c-product .woocommerce-product-details__short-description { font: 400 15px/1.7 var(--omc-sans); color: var(--omc-text); }
.c-product__products-title, .c-product__products-title > * {
	font-family: var(--omc-serif);
	font-weight: 500;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--omc-rose-dark);
}
.c-product__products-title { margin-bottom: clamp(18px, 2vw, 28px); }
/* related products use the wide container so five cards have room */
.c-product__after-summary--boxed .c-product__products--boxed { width: var(--fullwidth-limit, 1920px); max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }

/* ─── Blog grid: the journal cards ─── */
.c-blog-wrap--grid { margin-right: 0; }
.c-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 32px);
	width: var(--fullwidth-limit, 1920px);
	max-width: 100%;
	margin: clamp(12px, 1.6vw, 24px) auto 0;
	padding: 0 30px;
	box-sizing: border-box;
	align-items: start;
}
.c-post-list--grid, .c-post-list--grid .c-post-list__wrap { width: auto; border: 0 !important; box-shadow: none; }
.c-post-list--grid::before, .c-post-list--grid::after { display: none; }
.c-post-list__thumb--grid .c-post-list__carousel-list, .c-post-list__thumb--grid .c-post-list__carousel-item,
.c-post-list__thumb--grid .owl-stage-outer, .c-post-list__thumb--grid .owl-stage, .c-post-list__thumb--grid .owl-item { height: 100%; }
.c-post-list__thumb--grid { aspect-ratio: 4 / 3; overflow: hidden; background: var(--omc-sand); }
.c-post-list__thumb--grid img { width: 100%; height: 100%; object-fit: cover; }
.c-post-list__wrap--grid { padding: 16px 2px 0; }
.c-post-list__meta-date { display: inline-block; margin: 0 0 10px; padding: 0; border: 0; background: none; font: 500 11px/1 var(--omc-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--omc-muted); }
.c-post-list__header { font-family: var(--omc-serif); font-size: clamp(22px, 1.8vw, 26px); font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--omc-ink); }
.c-post-list__header-link:hover .c-post-list__header { color: var(--omc-rose-dark); }

/* ─── Cart / checkout / account / static pages ─── */
.c-cart-empty__header, .woocommerce-account .c-account h2, .entry-content h2 { font-family: var(--omc-serif); font-weight: 500; letter-spacing: 0; text-transform: none; }
.c-cart-empty__header { font-size: clamp(26px, 2.6vw, 34px); color: var(--omc-ink); }

/* ─── Responsive ─── */
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only — phones get the 2-column rules below */
	body:not(.omc-home-page) .c-product-grid__list:not(.owl-carousel):not(.c-product-grid__list--carousel) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.c-product-grid__list--5-per-row:not(.owl-carousel):not(.c-product-grid__list--carousel) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
	.c-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.c-product-grid__list:not(.owl-carousel):not(.c-product-grid__list--carousel),
	.c-product-grid__list--5-per-row:not(.owl-carousel):not(.c-product-grid__list--carousel) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.c-product-grid__item, .c-product-grid__item--background { padding: 8px; }
	.c-product-grid__details { padding: 10px 2px 2px; }
	.c-product-grid__item .woocommerce-loop-product__title { font-size: 17px; }
	/* the star rating sits beside the title and squeezes it to one word per line in a 2-up card: drop it below */
	.c-product-grid__item .woocommerce-loop-product__title--left { flex-wrap: wrap; }
	.c-product-grid__item .c-product-grid__rating { flex-basis: 100%; margin-top: 4px; }
	.c-product-grid__price-wrap { font-size: 12px; margin-top: 6px; }
	.c-blog__grid { grid-template-columns: 1fr; padding: 0 var(--omc-gutter); }
	.c-product__after-summary--boxed .c-product__products--boxed { padding-left: var(--omc-gutter); padding-right: var(--omc-gutter); }
	.c-page-header__title, .c-page-header__title--center { font-size: 28px; }
}


/* ==========================================================================
   One width system, every page
   --------------------------------------------------------------------------
   The home page sets the rule the rest of the site follows:
     card rows and grids  ->  full width inside a 30px gutter (20px on phones)
     reading columns      ->  760px, centred
   Landing, FAQ, contact, policy and video pages already do this. Two places did
   not, and the jump was visible when moving between them.
   ========================================================================== */

/* 1. Shop, category and tag archives.
   product_grid_width is "boxed", which wraps the archive in the theme's 1170px
   container. The same product card measured 273px here against 326px on the home
   page and the landing pages that link straight to it. */
.woocommerce-shop .l-section--container,
.post-type-archive-product .l-section--container,
.tax-product_cat .l-section--container,
.tax-product_tag .l-section--container {
	width: auto;
	max-width: none;
	padding-left: 30px;
	padding-right: 30px;
	/* The theme runs the grid straight into the title band's divider, so the first row of cards sits
	   on the line with nothing between them. Same breathing room the landing pages give their
	   product section. */
	padding-top: clamp(28px, 3.4vw, 48px);
}

/* 2. Single journal posts.
   The theme puts the post in a 740px column pinned left with a demo widget
   sidebar beside it, so the text started at x136 while every other page on the
   site starts at x340. Same column width as the landing pages, centred, and the
   sidebar goes: it holds the demo category list, not anything curated. */
.single-post .l-section__sidebar,
.single-post .c-post-sidebar__wrap { display: none; }

.single-post .l-section--with-sidebar { display: block; }

/* Those side borders drew the frame between post and sidebar. With the sidebar gone they
   were two stray hairlines down an otherwise open page. */
.single-post .c-post__container { border-left: 0; border-right: 0; }

.single-post .l-section__content,
.single-post .l-section__content--with-sidebar {
	width: auto;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.single-post .c-page-header__title {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Same reading measure as the landing and policy pages, so text sits in the same place
   whichever page you land on. Headings are capped with the copy, otherwise a heading
   starts 20px left of the paragraph under it. Media keeps the full column. */
.single-post .c-post__content > * {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.single-post .c-post__content > figure,
.single-post .c-post__content > img,
.single-post .c-post__content > .wp-block-image,
.single-post .c-post__content > .wp-block-embed,
.single-post .c-post__content > iframe,
.single-post .c-post__content > table {
	max-width: 100%;
}

@media (max-width: 767px) {
	.woocommerce-shop .l-section--container,
	.post-type-archive-product .l-section--container,
	.tax-product_cat .l-section--container,
	.tax-product_tag .l-section--container {
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* ==========================================================================
   One header band, every page
   --------------------------------------------------------------------------
   Three different headers used to greet people depending on where they landed:
   the landing pages had a photo washed out under a cream veil, the FAQ and
   policy pages a plain cream strip, and the shop, blog and cart the theme's
   thin white line. They now share one treatment — the page's own photograph,
   darkened enough to carry light text.

   The photograph arrives as --omc-head-bg, set per page by
   omc_page_header_bg() (a featured image when the page has one, otherwise a
   picture chosen for that kind of page).

   Contrast: the overlay bottoms out at .78 alpha over the deep brown ink, which
   keeps white body copy above 7:1 even over a pale photograph. Never lighten it
   past .62 without re-checking the copy on the lightest image in the set.
   ========================================================================== */

.c-page-header {
	position: relative;
	isolation: isolate;
	background-color: var(--omc-ink);
	background-image: var(--omc-head-bg, none);
	background-size: cover;
	background-position: 50% 42%;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* The scrim. A touch darker at the foot so the divider and any breadcrumbs stay legible. */
.c-page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(38, 28, 24, .62) 0%, rgba(38, 28, 24, .78) 100%),
		rgba(38, 28, 24, .12);
}

.c-page-header > * { position: relative; }

/* Type and furniture on the dark band. */
.c-page-header__title,
.c-page-header__title--center { color: #fff; }



.c-page-header .omc-eyebrow { color: var(--omc-rose-light, #e9d3ca); }

.c-page-header .c-breadcrumbs,
.c-page-header .c-breadcrumbs a,
.c-page-header .c-page-header__count,
.c-page-header .woocommerce-result-count,
.c-page-header .c-page-header__row-1,
.c-page-header .c-page-header__row-1 a { color: rgba(255, 255, 255, .78); }
.c-page-header .c-breadcrumbs a:hover,
.c-page-header .c-page-header__row-1 a:hover { color: #fff; }

/* The breadcrumb row sits on the photograph, and a light busy image swallowed it. Give that strip
   its own darker backing so it reads over anything, and lift the text off half-opacity. */
.c-page-header__row-1 {
	border-bottom-color: rgba(255, 255, 255, .16);
	background: rgba(28, 20, 17, .58);
	backdrop-filter: saturate(.9) blur(2px);
}
.c-page-header .c-breadcrumbs,
.c-page-header .c-breadcrumbs a,
.c-page-header .c-breadcrumbs span { color: rgba(255, 255, 255, .92); }
.c-page-header .c-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.c-page-header__line { background: rgba(255, 255, 255, .18); }

/* The sorting select and filter button sit in the band on shop screens. */
.c-page-header .c-sorting__current,
.c-page-header .c-sorting__label,
.c-page-header .ip-icon-filter { color: rgba(255, 255, 255, .88); }

/* Give the band some height: a title alone on a photograph needs room to breathe. */
.c-page-header__row-2 { padding-top: clamp(30px, 4.5vw, 62px); padding-bottom: clamp(30px, 4.5vw, 62px); }



/* Buttons sitting on the dark band. */


/* The bare band rendered for an empty cart or a logged-out account. */
.omc-head-bare .c-page-header__row-2 { padding-top: clamp(34px, 5vw, 70px); padding-bottom: clamp(34px, 5vw, 70px); }

@media (prefers-reduced-motion: no-preference) {
	.c-page-header { background-attachment: scroll; }
}


/* ─── Single journal post: a wider column, and no byline ───
   The article was a 640px measure on an otherwise empty page, which read as cramped next to the
   landing pages and their full-width bands. 760 is still a comfortable line length and fills the
   page properly.

   The byline strip said "by gowebdevhero@gmail.com" with a posted date — an admin address and a
   timestamp, neither of which a shopper reading a style guide needs. */
.single-post .l-section__content,
.single-post .l-section__content--with-sidebar { max-width: 900px; }

/* The theme caps the article itself at 768px, which overrode the column above it. */
.single-post .c-post,
.single-post .c-post--sidebar { max-width: none; }

/* One column, and everything sits in it.
   The copy was capped per child at 760 while pictures were left the whole 820, so a photograph
   began 30px left of the paragraph above it and ended 30px right of it — which reads as a mistake
   rather than as emphasis. Capping each kind of child instead meant fighting the parent theme for
   it: :is(.entry-content, …) figure:not():not():not() is five classes deep and wins on specificity
   against anything readable written here. Narrowing the box itself needs no such argument — the
   measure is stated once, and copy, pictures, tables and embeds all take it by being inside. */
.single-post .c-post__content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.single-post .c-post__content > * { max-width: 760px; }

.single-post .c-page__meta { display: none; }


/* ─── Recently viewed and You might also like ───
   The theme gave these two rows different widths and different left edges on the same screen —
   1104 starting at 168 against 1380 starting at 30. Both are now the full section width.

   No gutter here: .c-product__products--boxed already carries one, and adding a second pushed the
   cards 30px in on each side while the carousel stage kept the outer width, which is what put the
   right-hand card against the container edge. The row's own negative margin then does what it does
   on the shop archive and the first and last cards sit flush with the heading above them. */
.c-product__products--recently .c-product-grid__wrap {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* ─── Both rows are the shop grid, not a carousel ───
   The theme ships these as an owl carousel that puts each card in a fixed-width slot and then lets
   the card's own 11.5px margin push it 23px past that slot — so cards overlapped their neighbour
   and the last one was clipped by the end of the row. That is the card "sticking to the right
   container".

   Rather than argue with the carousel's arithmetic, the rows become what every other product
   listing on this site already is: a four-column grid, flush with the heading above it, same card
   width as the shop and the home page. display:contents lifts the owl wrappers out of the way so
   the slides themselves are the grid cells — which also makes the transform and the inline widths
   owl keeps writing irrelevant, including after a resize. */
.c-product__products--related .c-product-grid__list.owl-loaded,
.c-product__products--recently .c-product-grid__list.owl-loaded {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: clamp(28px, 3vw, 44px);
	width: auto;
	margin: 0;
}
.c-product__products--related .owl-stage-outer,
.c-product__products--related .owl-stage,
.c-product__products--recently .owl-stage-outer,
.c-product__products--recently .owl-stage {
	display: contents;
}
.c-product__products--related .owl-item,
.c-product__products--recently .owl-item {
	width: auto !important;
	max-width: none;
}
/* The theme's per-row selector out-ranks a plain descendant rule, so this has to beat it.
   100%, not auto: the card is an inline-block, and `auto` makes it shrink to its own content —
   which left one card in four narrower than its column, with a smaller photograph than its
   neighbours and its text starting higher. */
.c-product__products--related .c-product-grid__list .c-product-grid__item,
.c-product__products--recently .c-product-grid__list .c-product-grid__item {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* A grid has no slides to page through. */
.c-product__products--related .owl-nav,
.c-product__products--related .owl-dots,
.c-product__products--recently .owl-nav,
.c-product__products--recently .owl-dots,
.c-product__products--related .owl-item.cloned,
.c-product__products--recently .owl-item.cloned {
	display: none;
}
/* One clean row. The related query is capped at four in inc/pdp.php; recently viewed is filled by
   the theme's own AJAX, so this is the backstop that keeps it from spilling into a ragged second
   row of one. */
.c-product__products--related .owl-item:nth-child(n+5),
.c-product__products--recently .owl-item:nth-child(n+5) {
	display: none;
}

/* A range, not a ceiling: an open-ended max-width here would keep hiding the fourth card on
   phones, where two columns want four of them. */
@media (min-width: 768px) and (max-width: 1024px) {
	.c-product__products--related .c-product-grid__list.owl-loaded,
	.c-product__products--recently .c-product-grid__list.owl-loaded {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.c-product__products--related .owl-item:nth-child(n+4),
	.c-product__products--recently .owl-item:nth-child(n+4) { display: none; }
}
@media (max-width: 767px) {
	.c-product__products--related .c-product-grid__list.owl-loaded,
	.c-product__products--recently .c-product-grid__list.owl-loaded {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
	}
	/* Two columns, so four cards is two full rows. Three would leave one card alone on the second. */
	.c-product__products--related .owl-item:nth-child(n+5),
	.c-product__products--recently .owl-item:nth-child(n+5) { display: none; }
}

/* Its heading was set apart from "You might also like" for no reason. */
.c-product__products--recently .c-product__products-title {
	font-family: var(--omc-serif);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--omc-ink);
}


.c-product__products--related .c-product-grid__wrap {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}
.c-product__products--related .c-product__products-title {
	font-family: var(--omc-serif);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--omc-ink);
}


/* ─── Phones: reach and legibility ─────────────────────────────────────────
   Measured rather than guessed: at 390px the site had 43–79 controls smaller
   than 32px and 22–35 runs of text under 12px on each page.

   The controls keep their drawn size — an 18px dot that becomes a 40px button
   looks wrong — and gain the reach through a pseudo-element. Nothing moves;
   the finger just stops missing. ───────────────────────────────────────── */
@media (max-width: 767px) {

	/* The tagline under the logo was 8px, which is decoration rather than text. */
	.omc-tagline { font-size: 10px; letter-spacing: .12em; text-indent: .12em; }

	/* The journal list's date and category line. */
	.c-post-list__meta-date,
	.c-post-list__categories-item-link,
	.c-post-list__continue { font-size: 12px; }

	/* Hit areas. inset is negative, so the box grows outwards from the control.
	   Horizontal growth is kept smaller than vertical: these sit in rows, and a
	   target that swallows its neighbour is worse than one that is small. */
	.c-product-grid__thumb-button,
	.js-wishlist-btn,
	.c-header__button-link,
	.js-search-clear,
	.h-cb--svg,
	.c-post-list__continue,
	.c-post-list__categories-item-link {
		position: relative;
	}
	.c-product-grid__thumb-button::after,
	.js-wishlist-btn::after,
	.c-header__button-link::after,
	.js-search-clear::after,
	.h-cb--svg::after,
	.c-post-list__continue::after,
	.c-post-list__categories-item-link::after {
		content: "";
		position: absolute;
		inset: -11px -6px;
		/* Behind the control's own content, in front of nothing else. */
		z-index: 0;
	}
	/* The header icons have room around them, so they can grow both ways. */
	.c-header__button-link::after { inset: -8px; }

	/* An 18px dot on a photograph is hard to see before it is hard to press. */
	.c-product-grid__thumb-button,
	.js-wishlist-btn { opacity: 1; }
}

/* ─── The recently-viewed row with one product in it ──────────────────────
   That row is laid out with flex-wrap: nowrap, and Moderno gives a grid
   holding one product `width: 100%` - so the single thing a shopper has looked
   at becomes a card 1379px wide and taller than the viewport. Centred, because
   a card pinned to the left of 1400px of nothing reads as a mistake, and
   centring is what the theme does for a one-item grid elsewhere.

   A width rather than a ceiling: the items are flex: 0 0 auto, so a bare
   max-width makes the browser fall back to the content's own width, which for a
   product card is nothing at all. !important because the theme's rule is inside
   a media query that three classes still lost to. And scoped by --cnt-1, or a
   shopper with five recently-viewed products would get five quarter-width cards
   overflowing a row that cannot wrap. ───────────────────────────────────────── */
.c-product__products--recently .c-product-grid__wrap--cnt-1 .c-product-grid__item {
	flex: 0 0 auto !important;
	width: 25% !important;
	/* auto margins rather than justify-content: the carousel sets its own alignment on the list. */
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 1199px) {
	.c-product__products--recently .c-product-grid__wrap--cnt-1 .c-product-grid__item { width: 33.333% !important; }
}
@media (max-width: 899px) {
	.c-product__products--recently .c-product-grid__wrap--cnt-1 .c-product-grid__item { width: 50% !important; }
}
@media (max-width: 599px) {
	/* On a phone one column is the card width anyway. */
	.c-product__products--recently .c-product-grid__wrap--cnt-1 .c-product-grid__item { width: 100% !important; }
}

/* ─── The description, now that it has sections in it ─────────────────────── */
.c-product__tabs-panel h3,
#tab-description h3 {
	margin: 26px 0 8px;
	font: 400 20px/1.25 var(--omc-serif);
	letter-spacing: .01em;
	color: var(--omc-rose-dark);
}
.c-product__tabs-panel h3:first-child,
#tab-description h3:first-child { margin-top: 0; }
.c-product__tabs-panel p,
#tab-description p {
	margin: 0 0 12px;
	text-wrap: pretty;
}
.c-product__tabs-panel p:last-child,
#tab-description p:last-child { margin-bottom: 0; }