/*
 * OC Theme — front end.
 *
 * Logical properties only (inset-inline, margin-inline, padding-inline) so RTL
 * and LTR come from this one file (DECISIONS.md #11). No physical left/right.
 *
 * Colours, spacing and type come from theme.json presets and from the tokens
 * printed by class-oc-assets.php, never hardcoded here.
 */

:root {
	--oc-ink: var(--wp--preset--color--text, #151a21);
	--oc-ink-2: var(--wp--preset--color--text-muted, #6b7482);
	--oc-bg: var(--wp--preset--color--background, #f2f4f7);
	--oc-surface: var(--wp--preset--color--surface, #fff);
	--oc-primary: var(--oc-primary-user, var(--wp--preset--color--primary, #2f4e7a));
	--oc-secondary: var(--oc-secondary-user, var(--wp--preset--color--secondary, #d9a441));
	--oc-sale: var(--wp--preset--color--sale, #b4453c);
	--oc-line: color-mix(in srgb, var(--oc-ink) 12%, transparent);
	--oc-gap: calc(clamp(12px, 2vw, 24px) * var(--oc-density, 1));
	/* --oc-header-h comes from the settings tokens; theme.css must not
	 * redefine it — stylesheets print after the token block and would win. */
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--oc-bg-user, var(--oc-surface));
	color: var(--oc-ink);
	font-family: var(--oc-font-body, system-ui, sans-serif);
	/* Density scales spacing only — typography stays put (QA round 4). */
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--oc-font-display, inherit);
	line-height: 1.2;
	text-wrap: balance;
	margin-block: 0 0.5em;
}

img { max-inline-size: 100%; block-size: auto; }
a { color: inherit; }

.oc-container {
	inline-size: 100%;
	max-inline-size: var(--oc-content-width, 1280px);
	margin-inline: auto;
	padding-inline: var(--oc-gap);
}

.oc-container--narrow { max-inline-size: 760px; }

/* Keyboard users get to the content without tabbing the whole menu. */
.oc-skip {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: var(--oc-gap);
	z-index: 100;
	padding: 10px 16px;
	background: var(--oc-primary);
	color: #fff;
	border-radius: 0 0 6px 6px;
	text-decoration: none;
}
.oc-skip:focus { inset-block-start: 0; }

.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- header ---------- */

.oc-header {
	background: var(--oc-header-bg, var(--oc-surface));
	color: var(--oc-header-tx, var(--oc-ink));
	border-block-end: 1px solid var(--oc-line);
}

.oc-header--noline { border-block-end: 0; }

/* menu-center preset: the nav floats to the middle of the bar */
.oc-header--menu-center .oc-nav { margin-inline: auto; }
.oc-header--menu-center .oc-header__end { margin-inline-start: 0; }

/* header end icons */
.oc-hicon {
	display: grid;
	place-items: center;
	padding: 6px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	position: relative;
	text-decoration: none;
	transition: color .12s ease;
}

.oc-hicon svg {
	inline-size: var(--oc-hicon, 20px);
	block-size: var(--oc-hicon, 20px);
	stroke-width: var(--oc-hicon-sw, 1.8);
}

.oc-hicon:hover { color: var(--oc-primary); }

/* burger inherits the header text colour too */
.oc-burger span,
.oc-burger span::before,
.oc-burger span::after { background: currentColor; }
.oc-burger { color: var(--oc-header-tx, var(--oc-ink)); }

/* lanvin-style text links replacing the icons on desktop */
.oc-htext { display: flex; align-items: center; gap: 20px; }

.oc-htext__link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .9rem;
	font-weight: 500;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.oc-htext__link:hover { color: var(--oc-primary); }

.oc-htext .oc-cart-count {
	position: static;
	padding: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	min-inline-size: 0;
}

.oc-htext .oc-cart-count::before { content: "("; }
.oc-htext .oc-cart-count::after { content: ")"; }

@media (min-width: 901px) {
	.oc-icons-text .oc-hicon { display: none; }
}

@media (max-width: 900px) {
	.oc-htext { display: none; }
}

/* secondary menu beside the icons (desktop) */
.oc-nav2__list {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.oc-nav2__list a {
	text-decoration: none;
	font-size: .9rem;
	font-weight: 500;
	white-space: nowrap;
}
.oc-nav2__list a:hover { color: var(--oc-primary); }
@media (max-width: 900px) { .oc-nav2 { display: none; } }

.oc-cart-count {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-end: -4px;
	min-inline-size: 17px;
	padding: 1px 5px;
	border-radius: 10px;
	background: var(--oc-primary);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

/* inline search field in the header (snocks-style) */
.oc-hsearch {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--oc-line);
	border-radius: 999px;
	background: transparent;
}

.oc-hsearch input[type="search"] {
	inline-size: clamp(120px, 14vw, 190px);
	border: 0;
	background: none;
	font: inherit;
	font-size: .9rem;
	color: inherit;
	outline: none;
}

.oc-hsearch button {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

@media (min-width: 901px) {
	.oc-search-field .oc-hicon.oc-search-toggle,
	.oc-search-field .oc-htext .oc-search-toggle { display: none; }
}

@media (max-width: 900px) {
	.oc-hsearch { display: none; }
}

/* expanding search bar under the header */
.oc-header-search {
	padding: 12px var(--oc-gap);
	background: var(--oc-header-bg, var(--oc-surface));
	border-block-end: 1px solid var(--oc-line);
}

.oc-header-search .oc-search {
	max-inline-size: 560px;
	margin-inline: auto;
}

.oc-header.is-sticky {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
}

.oc-header__inner {
	max-inline-size: var(--oc-content-width, 1280px);
	margin-inline: auto;
	padding-inline: var(--oc-gap);
	min-block-size: var(--oc-header-h, 72px);
	display: flex;
	align-items: center;
	gap: var(--oc-gap);
}

.oc-header__start { display: flex; align-items: center; gap: 12px; }
.oc-header__end { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }

/* centred: logo on top row (icons stay beside it), menu on its own row */
.oc-header--centred .oc-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: var(--oc-header-h, 72px) auto;
	align-items: center;
	min-block-size: 0;
}
.oc-header--centred .oc-header__start { display: contents; }
.oc-header--centred .oc-burger { grid-column: 1; grid-row: 1; justify-self: start; }
.oc-header--centred .oc-logo,
.oc-header--centred .custom-logo-link { grid-column: 2; grid-row: 1; }
.oc-header--centred .oc-header__end { grid-column: 3; grid-row: 1; justify-self: end; margin-inline-start: 0; }
.oc-header--centred .oc-nav {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	justify-content: center;
	padding-block-end: 6px;
}

/* split: menu at the start, logo centred, icons at the end */
.oc-header--split .oc-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.oc-header--split .oc-header__start { display: contents; }
.oc-header--split .oc-nav { grid-column: 1; grid-row: 1; justify-self: start; }
.oc-header--split .oc-burger { grid-column: 1; grid-row: 1; justify-self: start; }
.oc-header--split .oc-logo,
.oc-header--split .custom-logo-link { grid-column: 2; grid-row: 1; }
.oc-header--split .oc-header__end { grid-column: 3; grid-row: 1; justify-self: end; margin-inline-start: 0; }

/* burger: hamburger replaces the open menu at every width */
.oc-header--burger .oc-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.oc-header--burger .oc-header__start { display: contents; }
.oc-header--burger .oc-burger { display: block; grid-column: 1; grid-row: 1; justify-self: start; }
.oc-header--burger .oc-nav { display: none; }
.oc-header--burger .oc-logo,
.oc-header--burger .custom-logo-link { grid-column: 2; grid-row: 1; }
.oc-header--burger .oc-header__end { grid-column: 3; grid-row: 1; justify-self: end; margin-inline-start: 0; }

@media (min-width: 901px) {
	.oc-header--burger ~ .oc-mobile-menu[data-open="true"] { display: block; }
}

.oc-logo--text { font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { max-block-size: 48px; inline-size: auto; }

.oc-burger {
	display: none;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}
.oc-burger span,
.oc-burger span::before,
.oc-burger span::after {
	content: "";
	position: absolute;
	inset-inline: 8px;
	block-size: 2px;
	background: var(--oc-ink);
}
.oc-burger span { inset-block-start: 19px; }
.oc-burger span::before { inset-block-start: -7px; inset-inline: 0; }
.oc-burger span::after { inset-block-start: 7px; inset-inline: 0; }

/* ---------- navigation ---------- */

.oc-nav__list,
.oc-mobile-menu__list,
.oc-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oc-nav__list { display: flex; gap: clamp(10px, 1.6vw, 22px); }
.oc-nav__list li { position: relative; }

.oc-nav__list a {
	display: block;
	padding-block: 10px;
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}

.oc-nav__list a:hover { color: var(--oc-primary); }

/* Sub-menus open on hover and on keyboard focus. */
.oc-nav__list .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-inline-size: 200px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--oc-surface);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius, 8px);
	box-shadow: 0 8px 28px rgb(0 0 0 / 10%);
	opacity: 0;
	visibility: hidden;
	transition: opacity .14s ease;
	z-index: 20;
}

.oc-nav__list .sub-menu .sub-menu {
	inset-block-start: 0;
	inset-inline-start: 100%;
}

.oc-nav__list li:hover > .sub-menu,
.oc-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.oc-nav__list .sub-menu a { padding: 8px 16px; }

.oc-mobile-menu {
	display: none;
	padding: var(--oc-gap);
	border-block-end: 1px solid var(--oc-line);
}
.oc-mobile-menu__list a { display: block; padding-block: 10px; text-decoration: none; }
.oc-mobile-menu .sub-menu { list-style: none; padding-inline-start: 16px; }

/* ---------- shop ---------- */

.shop-main,
.site-main { min-block-size: 40vh; padding-block: var(--oc-gap); }

.shop-main {
	inline-size: 100%;
	max-inline-size: var(--oc-content-width, 1280px);
	margin-inline: auto;
	padding-inline: var(--oc-gap);
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(var(--oc-grid-cols, 4), minmax(0, 1fr));
	gap: calc(var(--oc-grid-gap, 20px) * var(--oc-density, 1));
	margin: 0;
	padding: 0;
	list-style: none;
}

.oc-cols-2 { --oc-grid-cols: 2; }
.oc-cols-3 { --oc-grid-cols: 3; }
.oc-cols-4 { --oc-grid-cols: 4; }
.oc-cols-5 { --oc-grid-cols: 5; }

.woocommerce ul.products li.product { margin: 0; text-align: center; }
.woocommerce ul.products li.product img { inline-size: 100%; }
.woocommerce ul.products li.product .price { color: var(--oc-ink); font-weight: 600; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; }

.oc-breadcrumb { color: var(--oc-ink-2); font-size: .875rem; margin-block-end: 12px; }
.oc-breadcrumb .sep { margin-inline: 6px; }

.oc-page-title { margin-block-start: 0; }

/* ---------- footer ---------- */

.oc-footer {
	margin-block-start: calc(var(--oc-gap) * 2);
	border-block-start: 1px solid var(--oc-line);
	background: var(--oc-footer-bg, var(--oc-bg));
}

/* widget columns above the bottom bar */
.oc-footer__widgets {
	max-inline-size: var(--oc-content-width, 1280px);
	margin-inline: auto;
	padding: calc(var(--oc-gap) * 1.5) var(--oc-gap) 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: calc(var(--oc-gap) * 1.5);
}

.oc-footer__widget-title {
	margin-block: 0 10px;
	font-size: 1rem;
}

.oc-footer__widget { font-size: .92rem; color: var(--oc-ink-2); }
.oc-footer__widget a { color: var(--oc-ink); }

/* centred footer bar */
.oc-footer--centered .oc-footer__inner {
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 10px;
}
.oc-footer--centered .oc-footer__list { justify-content: center; }

.oc-footer__inner {
	max-inline-size: var(--oc-content-width, 1280px);
	margin-inline: auto;
	padding: calc(var(--oc-gap) * 1.5) var(--oc-gap);
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-gap);
	align-items: center;
	justify-content: space-between;
}

.oc-footer__list { display: flex; gap: 18px; flex-wrap: wrap; }
.oc-footer__list a { text-decoration: none; }
.oc-footer__credit { margin: 0; color: var(--oc-ink-2); font-size: .875rem; }

/* ---------- search ---------- */

.oc-search { display: flex; gap: 8px; }
.oc-search input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius, 8px);
	font: inherit;
}
.oc-search button {
	padding: 10px 18px;
	border: 0;
	border-radius: var(--oc-radius, 8px);
	background: var(--oc-primary);
	color: #fff;
	font: inherit;
	cursor: pointer;
}

/* ---------- mobile ---------- */

@media (max-width: 900px) {
	.oc-burger { display: block; }
	.oc-nav { display: none; }
	.oc-mobile-menu[data-open="true"] { display: block; }

	/* mobile centred: hamburger at the start with search beside it, logo in
	 * the centre, the remaining icons at the end */
	.oc-header--m-centered .oc-header__start,
	.oc-header--m-centered .oc-header__end { display: contents; }
	.oc-header--m-centered .oc-header__inner { display: flex; }
	.oc-header--m-centered .oc-burger { order: 1; }
	.oc-header--m-centered .oc-search-toggle { order: 2; }
	.oc-header--m-centered .oc-logo,
	.oc-header--m-centered .custom-logo-link { order: 3; margin-inline: auto; }
	.oc-header--m-centered .oc-nav2 { order: 4; }
	.oc-header--m-centered .oc-account-link { order: 5; }
	.oc-header--m-centered .oc-cart-link { order: 6; }

	.woocommerce ul.products { grid-template-columns: repeat(var(--oc-grid-cols-m, 2), minmax(0, 1fr)); }
	.oc-cols-m-1 { --oc-grid-cols-m: 1; }
	.oc-cols-m-2 { --oc-grid-cols-m: 2; }
	.oc-cols-m-3 { --oc-grid-cols-m: 3; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- product card presets ---------- */

.woocommerce ul.products li.product .oc-card-media__item img,
.woocommerce ul.products li.product img.wp-post-image {
	inline-size: 100%;
	aspect-ratio: var(--oc-card-ratio, 1 / 1);
	object-fit: cover;
	border-radius: var(--oc-radius, 8px);
}

/* classic: bordered box, centred info (default rules above already centre) */
.oc-card-classic ul.products li.product {
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius, 8px);
	padding: calc(10px * var(--oc-density, 1));
}

/* minimal: no chrome, start-aligned text */
.oc-card-minimal ul.products li.product { text-align: start; }

/* minimal centred: no chrome, centred text (the loop default already centres) */
.oc-card-minimal-center ul.products li.product { text-align: center; }

/* card: surface + shadow */
.oc-card-card ul.products li.product {
	background: var(--oc-surface);
	border-radius: var(--oc-radius, 8px);
	box-shadow: 0 1px 3px rgb(0 0 0 / 7%), 0 6px 18px rgb(0 0 0 / 6%);
	padding: calc(12px * var(--oc-density, 1));
}

/* add-to-cart behaviour */
.oc-atc-none ul.products li.product .button { display: none; }

@media (hover: hover) {
	.oc-atc-hover ul.products li.product .button {
		opacity: 0;
		transition: opacity .15s ease;
	}
	.oc-atc-hover ul.products li.product:hover .button,
	.oc-atc-hover ul.products li.product:focus-within .button {
		opacity: 1;
	}
}

/* sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	inset-inline-end: auto;
	margin: 0;
	min-block-size: 0;
	min-inline-size: 0;
	inline-size: fit-content;
	padding: 3px 10px;
	border-radius: 6px;
	background: var(--oc-sale, #b4453c);
	color: #fff;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.5;
	box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
	z-index: 2;
}
.woocommerce ul.products li.product { position: relative; }

.oc-card-excerpt {
	margin-block: 4px 0;
	font-size: .85rem;
	color: var(--oc-ink-2);
}

/* catalogue header options */
.oc-title-center .oc-page-title,
.oc-title-center .woocommerce-products-header { text-align: center; }
.oc-crumbs-hidden .oc-breadcrumb { display: none; }

/* ---------- neutralise WooCommerce's float-era layout ----------
 * woocommerce.css gives li.product width:22.05% and floats, which shrinks
 * every card inside our grid cells. Same specificity, theme loads later. */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	float: none;
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	clear: none;
}

/* woocommerce-smallscreen.css sets 48% under 768px — the "half width on
 * mobile" bug. Same selectors, later in the cascade. */
@media (max-width: 768px) {
	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product {
		inline-size: 100%;
		float: none;
		margin: 0;
	}
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* result count + ordering sit on one line above the grid */
.woocommerce .woocommerce-result-count { margin-block: 0 14px; color: var(--oc-ink-2); font-size: .875rem; }
.woocommerce .woocommerce-ordering { margin-block: 0 14px; }
.woocommerce .woocommerce-ordering select {
	padding: 7px 10px;
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius, 8px);
	font: inherit;
	background: var(--oc-surface);
}

/* buttons everywhere inherit the brand and the radius token */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button[name="add-to-cart"],
.woocommerce .single_add_to_cart_button,
.oc-search button,
.wp-element-button {
	background: var(--oc-primary);
	color: #fff;
	border: 1.5px solid var(--oc-primary);
	border-radius: var(--oc-radius, 8px);
	font-weight: 600;
	transition: filter .12s ease, background-color .12s ease, color .12s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: var(--oc-primary);
	color: #fff;
	filter: brightness(1.08);
}

.woocommerce.oc-btn-outline a.button,
.woocommerce.oc-btn-outline button.button,
.woocommerce.oc-btn-outline input.button,
.woocommerce.oc-btn-outline .single_add_to_cart_button {
	background: transparent;
	color: var(--oc-primary);
}

.woocommerce.oc-btn-outline a.button:hover,
.woocommerce.oc-btn-outline button.button:hover,
.woocommerce.oc-btn-outline .single_add_to_cart_button:hover {
	background: var(--oc-primary);
	color: #fff;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea { border-radius: var(--oc-radius, 8px); }

/* prices keep the text colour; only the sale price carries the sale colour
 * (QA round 4: prices must not follow the secondary colour) */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--oc-ink); }

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	color: var(--oc-sale, #b4453c);
	text-decoration: none;
}

/* the secondary colour carries small accents */
.star-rating,
.woocommerce p.stars a { color: var(--oc-secondary); }

/* card buttons inherit the brand, not Woo grey */
.woocommerce ul.products li.product .button {
	background: var(--oc-primary);
	color: #fff;
	border-radius: var(--oc-radius, 8px);
	padding: 9px 16px;
	font-weight: 600;
	margin-block-start: 8px;
}
.woocommerce ul.products li.product .button:hover { filter: brightness(1.08); }

.woocommerce ul.products li.product .price {
	display: block;
	margin-block: 6px 0;
}
.woocommerce ul.products li.product .price del { color: var(--oc-ink-2); opacity: .8; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* ---------- card media: hover swap + scroll-snap gallery ---------- */

.oc-card-media { position: relative; }

/* snocks-style: a round white button fully on the image, bottom corner,
 * sliding up as the card is hovered; spinner while adding, check when added */
.oc-card-atc {
	position: absolute;
	inset-inline-start: 12px;
	inset-block-end: 12px;
	inline-size: 42px;
	block-size: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--oc-ink);
	box-shadow: 0 2px 10px rgb(0 0 0 / 14%);
	z-index: 3;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, background-color .15s ease, color .15s ease;
}

.oc-card-atc:hover { background: var(--oc-primary); color: #fff; }

.oc-card-atc svg { grid-area: 1 / 1; }
.oc-card-atc .oc-card-atc__check { display: none; }

.oc-card-atc.loading { pointer-events: none; }
.oc-card-atc.loading .oc-card-atc__cart { visibility: hidden; }
.oc-card-atc.loading::after {
	content: "";
	grid-area: 1 / 1;
	inline-size: 18px;
	block-size: 18px;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: oc-spin .6s linear infinite;
}

@keyframes oc-spin { to { transform: rotate(360deg); } }

.oc-card-atc.added { background: var(--oc-primary); color: #fff; }
.oc-card-atc.added .oc-card-atc__cart { display: none; }
.oc-card-atc.added .oc-card-atc__check { display: block; }

li.product:hover .oc-card-atc,
li.product:focus-within .oc-card-atc,
.oc-atc-always li.product .oc-card-atc { opacity: 1; transform: translateY(0); }

/* "always" shows it without hover; "hover" reveals; "none" handled in PHP */
.oc-atc-hover li.product .oc-card-atc { opacity: 0; transform: translateY(8px); }
.oc-atc-hover li.product:hover .oc-card-atc,
.oc-atc-hover li.product:focus-within .oc-card-atc { opacity: 1; transform: translateY(0); }

@media (hover: none) {
	.oc-card-atc { opacity: 1; transform: none; }
}

/* card gallery arrows: furniture-style — bare thin chevron SVG, no disc,
 * fading in with the card hover. The SVGs are drawn pointing left/right in
 * the markup (physical), so RTL flips both together to match their sides. */
.oc-card-media__nav {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	inline-size: 34px;
	block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--oc-ink);
	cursor: pointer;
	z-index: 3;
	opacity: 0;
	transition: opacity .15s ease;
	display: grid;
	place-items: center;
}

.oc-card-media__nav svg {
	inline-size: 15px;
	block-size: 15px;
	fill: currentColor;
	filter: drop-shadow(0 0 2px rgb(255 255 255 / 85%));
}

[dir="rtl"] .oc-card-media__nav svg { transform: scaleX(-1); }

.oc-card-media__nav--prev { inset-inline-start: 2px; }
.oc-card-media__nav--next { inset-inline-end: 2px; }

@media (hover: hover) {
	li.product:hover .oc-card-media--gallery .oc-card-media__nav { opacity: .75; }
	.oc-card-media--gallery .oc-card-media__nav:hover { opacity: 1; }
}

.oc-card-media__strip { display: grid; }

.oc-card-media__item {
	margin: 0;
	grid-area: 1 / 1;
}

.oc-card-media__item img {
	inline-size: 100%;
	aspect-ratio: var(--oc-card-ratio, 1 / 1);
	object-fit: cover;
	border-radius: var(--oc-radius, 8px);
	display: block;
}

/* hover: second image sits on top, fades in */
.oc-card-media--hover .oc-card-media__item:not(.is-first) {
	opacity: 0;
	transition: opacity .18s ease;
}

@media (hover: hover) {
	li.product:hover .oc-card-media--hover .oc-card-media__item:not(.is-first),
	li.product:focus-within .oc-card-media--hover .oc-card-media__item:not(.is-first) {
		opacity: 1;
	}
}

/* gallery: native scroll-snap strip — no carousel library.
 * aspect-ratio locks the strip to the image box, so an OS that reserves
 * scrollbar space cannot make the strip taller than the image (which pushed
 * the cart icon half off the image). */
.oc-card-media--gallery .oc-card-media__strip {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	aspect-ratio: var(--oc-card-ratio, 1 / 1);
	border-radius: var(--oc-radius, 8px);
}
.oc-card-media--gallery .oc-card-media__strip::-webkit-scrollbar { display: none; }

.oc-card-media--gallery .oc-card-media__item {
	flex: 0 0 100%;
	block-size: 100%;
	scroll-snap-align: start;
}

.oc-card-media--gallery .oc-card-media__item img { block-size: 100%; }



/* ---------- single product layout ---------- */

.single-product div.product {
	display: grid;
	grid-template-columns: var(--oc-col-a, minmax(0, 1fr)) var(--oc-col-b, minmax(0, 1fr));
	gap: calc(var(--oc-gap) * 1.5);
	/* columns stretch to the full row so the sticky inner wrapper is clamped
	 * by its column box, which ends exactly where the row does */
}

.oc-stick-inner { position: relative; }

.oc-ratio-60-40.single-product div.product { --oc-col-a: minmax(0, 1.5fr); --oc-col-b: minmax(0, 1fr); }
.oc-ratio-40-60.single-product div.product { --oc-col-a: minmax(0, 1fr); --oc-col-b: minmax(0, 1.5fr); }
.oc-side-gallery-end.oc-ratio-60-40.single-product div.product { --oc-col-a: minmax(0, 1fr); --oc-col-b: minmax(0, 1.5fr); }
.oc-side-gallery-end.oc-ratio-40-60.single-product div.product { --oc-col-a: minmax(0, 1.5fr); --oc-col-b: minmax(0, 1fr); }

/* Woo's float-era 48% split, neutralised */
.single-product div.product div.images,
.single-product div.product div.summary {
	float: none;
	inline-size: 100%;
	margin: 0;
}

.single-product div.product div.images { grid-column: 1; grid-row: 1; }
.single-product div.product div.summary { grid-column: 2; grid-row: 1; }

/* everything after the two columns spans the full width */
.single-product div.product > *:not(.images):not(.summary):not(.onsale) {
	grid-column: 1 / -1;
}

/* gallery side: in RTL "start" is the right side automatically */
.oc-side-gallery-end.single-product div.product div.images { grid-column: 2; }
.oc-side-gallery-end.single-product div.product div.summary { grid-column: 1; }

@media (max-width: 900px) {
	.single-product div.product { grid-template-columns: 1fr; }
	.single-product div.product div.images,
	.single-product div.product div.summary,
	.oc-side-gallery-end.single-product div.product div.images,
	.oc-side-gallery-end.single-product div.product div.summary {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ---------- native gallery (no flexslider) ---------- */

/* thumbnail presets: one active image; the rest hide until picked.
 * Specificity matched against woo's nth-child(n+2){display:inline-block}.
 * Desktop only — on mobile the gallery becomes a swipe strip. */
@media (min-width: 901px) {
	.woocommerce.oc-gallery-thumbs-side div.product div.images .woocommerce-product-gallery__image:not(.is-active),
	.woocommerce.oc-gallery-thumbs-under div.product div.images .woocommerce-product-gallery__image:not(.is-active) {
		display: none;
	}

	.woocommerce.oc-gallery-thumbs-side div.product div.images .woocommerce-product-gallery__image.is-active,
	.woocommerce.oc-gallery-thumbs-under div.product div.images .woocommerce-product-gallery__image.is-active {
		display: block;
		width: 100%;
	}
}

.woocommerce.oc-gallery-thumbs-side div.product div.images .woocommerce-product-gallery__image,
.woocommerce.oc-gallery-thumbs-under div.product div.images .woocommerce-product-gallery__image {
	float: none;
	width: 100%;
	margin: 0;
}

.oc-thumbs {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oc-thumbs button {
	display: block;
	inline-size: var(--oc-thumbs-w, 80px);
	padding: 0;
	border: 2px solid transparent;
	border-radius: calc(var(--oc-radius, 8px) * 0.75 + 2px);
	background: none;
	cursor: pointer;
	overflow: hidden;
}

.oc-thumbs button img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: calc(var(--oc-radius, 8px) * 0.75);
	opacity: .65;
	transition: opacity .15s ease;
}

.oc-thumbs button:hover img { opacity: 1; }
.oc-thumbs button[aria-current="true"] { border-color: var(--oc-primary); }
.oc-thumbs button[aria-current="true"] img { opacity: 1; }

/* side rail (desktop layouts; the rail hides on mobile) */
@media (min-width: 901px) {
	.oc-gallery-thumbs-side .woocommerce-product-gallery .oc-stick-inner {
		display: grid;
		grid-template-columns: var(--oc-thumbs-w, 80px) minmax(0, 1fr);
		gap: 12px;
		align-items: start;
	}
	.oc-gallery-thumbs-side .woocommerce-product-gallery__wrapper { grid-column: 2; grid-row: 1; }
	.oc-gallery-thumbs-side .oc-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; }

	/* under: rail below the main image, with breathing room */
	.oc-gallery-thumbs-under .oc-thumbs { margin-block-start: 14px; flex-wrap: wrap; }

	.oc-gallery-grid .woocommerce-product-gallery__wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* stacked: full-width images, one under another, scrolling with the page */
	.oc-gallery-stacked .woocommerce-product-gallery__wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

/* beat woocommerce.css's 25%/33% float widths on gallery images */
.woocommerce.oc-gallery-grid div.product div.images .woocommerce-product-gallery__image,
.woocommerce.oc-gallery-stacked div.product div.images .woocommerce-product-gallery__image {
	float: none;
	width: 100%;
	margin: 0;
}
/* the corner-rounding token reaches every gallery image, in every preset */
.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg) {
	border-radius: var(--oc-radius, 8px);
}

/* native hover zoom: the image scales inside its clipped, rounded box */
.oc-zoom .woocommerce-product-gallery__image {
	overflow: hidden;
	border-radius: var(--oc-radius, 8px);
}

.oc-zoom .woocommerce-product-gallery__image img:not(.zoomImg) {
	transition: transform .12s ease-out;
	will-change: transform;
}

.oc-gallery-grid .woocommerce-product-gallery__image img,
.oc-gallery-stacked .woocommerce-product-gallery__image img {
	inline-size: 100%;
	border-radius: var(--oc-radius, 8px);
}

/* uniform gallery image height (optional): centre-crop before the lightbox.
 * Desktop only — the mobile swipe strip keeps natural ratios. */
@media (min-width: 901px) {
	.oc-gimg-fixed .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img:not(.zoomImg) {
		block-size: var(--oc-gimg-h, 600px);
		inline-size: 100%;
		object-fit: cover;
		object-position: center;
	}
}

/* lightbox affordance: the plus follows the cursor (asceno-style) */
.woocommerce-product-gallery__trigger { display: none !important; }

body:not(.oc-no-lightbox) .woocommerce-product-gallery__image a { cursor: none; }

/* Physical left/top on purpose: the element follows clientX/clientY, which
 * are physical coordinates. Logical insets mirrored it away from the cursor
 * in RTL, and mis-centred the plus bars (QA round 4). */
.oc-cursor-plus {
	position: fixed;
	top: 0;
	left: 0;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
	z-index: 90;
	pointer-events: none;
	display: none;
	transform: translate(-50%, -50%);
}

.oc-cursor-plus::before,
.oc-cursor-plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--oc-ink);
	transform: translate(-50%, -50%);
}

.oc-cursor-plus::before { inline-size: 16px; block-size: 1.6px; }
.oc-cursor-plus::after { inline-size: 1.6px; block-size: 16px; }

.oc-cursor-plus.is-on { display: block; }

/* white lightbox, like furniture: light backdrop, dark UI, arrows at the bottom */
.pswp__bg { background: #fff !important; }
.pswp__button { filter: invert(1); }
.pswp__counter { color: #333; filter: none; }
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	inset-block-start: auto !important;
	top: auto !important;
	bottom: 18px;
	background: none;
}
.pswp__button--arrow--left { left: calc(50% - 60px); }
.pswp__button--arrow--right { right: calc(50% - 60px); }
.pswp__ui--fit .pswp__top-bar { background: transparent; }

/* product info beside the gallery instead of full width */
@media (min-width: 901px) {
	.oc-tabspos-side.single-product div.product .woocommerce-tabs { grid-column: 2; }
	.oc-side-gallery-end.oc-tabspos-side.single-product div.product .woocommerce-tabs { grid-column: 1; }
}

/* similar/complementary headings alignment */
.related.products > h2,
.up-sells.products > h2,
.upsells.products > h2 { text-align: start; }
.oc-headings-center .related.products > h2,
.oc-headings-center .up-sells.products > h2,
.oc-headings-center .upsells.products > h2 { text-align: center; }

/* ---------- tabs / accordion ---------- */

.oc-tabs-accordion .woocommerce-tabs ul.tabs { display: none; }

.oc-tabs-accordion .woocommerce-tabs .woocommerce-Tabs-panel {
	display: block !important;
	border-block-start: 1px solid var(--oc-line);
	padding-block: 4px 16px;
}

.oc-tabs-accordion .oc-acc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
	padding-block: 14px;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--oc-ink);
	cursor: pointer;
}

.oc-tabs-accordion .oc-acc-head::after {
	content: "";
	inline-size: 9px;
	block-size: 9px;
	border-block-end: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
	flex: none;
}

.oc-tabs-accordion .oc-acc-head[aria-expanded="true"]::after { transform: rotate(225deg); }

.oc-tabs-accordion .woocommerce-Tabs-panel > h2:first-child { display: none; }
.oc-tabs-accordion .woocommerce-Tabs-panel[data-oc-closed] > *:not(.oc-acc-head) { display: none; }

/* tabs mode: brand styling over Woo defaults */
.oc-tabs-tabs .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 16px;
	padding: 0;
	border-block-end: 1px solid var(--oc-line);
	list-style: none;
}
.oc-tabs-tabs .woocommerce-tabs ul.tabs li {
	border: 0;
	background: none;
	margin: 0;
	padding: 0;
}
.oc-tabs-tabs .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 16px;
	font-weight: 600;
	text-decoration: none;
	border-block-end: 2px solid transparent;
}
.oc-tabs-tabs .woocommerce-tabs ul.tabs li.active a {
	color: var(--oc-secondary);
	border-block-end-color: var(--oc-secondary);
}

/* ---------- sticky add-to-cart bar ---------- */

.oc-sticky-atc {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	background: var(--oc-surface);
	border-block-start: 1px solid var(--oc-line);
	box-shadow: 0 -4px 18px rgb(0 0 0 / 8%);
	transform: translateY(100%);
	transition: transform .2s ease;
}

.oc-sticky-atc.is-visible { transform: translateY(0); }

.oc-sticky-atc__inner {
	max-inline-size: var(--oc-content-width, 1280px);
	margin-inline: auto;
	padding: 10px var(--oc-gap);
	display: flex;
	align-items: center;
	gap: 14px;
}

.oc-sticky-atc__thumb {
	inline-size: 44px;
	block-size: 44px;
	object-fit: cover;
	border-radius: calc(var(--oc-radius, 8px) / 2);
	flex: none;
}

.oc-sticky-atc__title {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oc-sticky-atc__price { flex: none; font-weight: 700; }

.oc-sticky-atc__btn {
	flex: none;
	margin-inline-start: auto;
	background: var(--oc-primary);
	color: #fff;
	border: 0;
	border-radius: var(--oc-radius, 8px);
	padding: 10px 22px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 640px) {
	.oc-sticky-atc__title { display: none; }
}

/* ---------- cart drawer ---------- */

.oc-drawer { position: fixed; inset: 0; z-index: 120; }

.oc-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 35%);
	opacity: 0;
	transition: opacity .2s ease;
}

.oc-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(420px, 92vw);
	background: var(--oc-surface);
	box-shadow: 0 0 40px rgb(0 0 0 / 18%);
	display: flex;
	flex-direction: column;
	transform: translateX(calc(var(--oc-drawer-dir, 1) * 100%));
	transition: transform .22s ease;
}

[dir="rtl"] .oc-drawer__panel { --oc-drawer-dir: -1; }

.oc-drawer.is-open .oc-drawer__overlay { opacity: 1; }
.oc-drawer.is-open .oc-drawer__panel { transform: translateX(0); }

.oc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px var(--oc-gap);
	border-block-end: 1px solid var(--oc-line);
}

.oc-drawer__head h2 { margin: 0; font-size: 1.1rem; }

.oc-drawer__close {
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--oc-ink-2);
	padding: 4px 8px;
}

.oc-drawer .widget_shopping_cart_content {
	flex: 1;
	overflow-y: auto;
	padding: var(--oc-gap);
}

.oc-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.oc-drawer .woocommerce-mini-cart-item {
	display: flex;
	gap: 10px;
	align-items: center;
	padding-block: 10px;
	border-block-end: 1px solid var(--oc-line);
}
.oc-drawer .woocommerce-mini-cart-item img {
	inline-size: 56px;
	block-size: 56px;
	object-fit: cover;
	border-radius: 6px;
}
.oc-drawer .woocommerce-mini-cart__total { padding-block: 12px; font-weight: 700; }
.oc-drawer .woocommerce-mini-cart__buttons { display: flex; gap: 8px; }
.oc-drawer .woocommerce-mini-cart__buttons a { flex: 1; text-align: center; }

/* ---------- QA round-3 browser findings ---------- */

/* Woo's .alt button (single product add-to-cart) outranked the brand rules —
 * match it at its own specificity, purple be gone. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce div.product form.cart .button {
	background: var(--oc-primary);
	color: #fff;
	border: 1.5px solid var(--oc-primary);
	border-radius: var(--oc-radius, 8px);
	font-weight: 600;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce div.product form.cart .button:hover {
	background: var(--oc-primary);
	color: #fff;
	filter: brightness(1.08);
}

.woocommerce.oc-btn-outline a.button.alt,
.woocommerce.oc-btn-outline button.button.alt,
.woocommerce.oc-btn-outline div.product form.cart .button {
	background: transparent;
	color: var(--oc-primary);
}

/* ---------- QA round-4 ---------- */

/* single product: the sale mark moves off the image, next to the price */
.single-product div.product > span.onsale { display: none; }

.woocommerce div.product p.price { display: inline-block; }

.oc-price-badge {
	display: inline-block;
	margin-inline-start: 10px;
	padding: 3px 10px;
	border-radius: 6px;
	background: var(--oc-sale, #b4453c);
	color: #fff;
	font-size: .78rem;
	font-weight: 600;
	vertical-align: middle;
}

/* ---------- top bar ---------- */

.oc-topbar {
	background: var(--oc-topbar-bg, var(--oc-ink));
	color: var(--oc-topbar-tx, #fff);
	font-size: .85rem;
}

.oc-topbar__inner {
	max-inline-size: var(--oc-content-width, 1280px);
	margin-inline: auto;
	padding: 7px var(--oc-gap);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}

.oc-topbar__menu { grid-column: 1; justify-self: start; }
.oc-topbar__rotator { grid-column: 2; display: flex; align-items: center; gap: 10px; }
.oc-topbar__spacer { grid-column: 3; }

@media (max-width: 900px) {
	.oc-topbar__menu { display: none; }
}

.oc-topbar__list {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.oc-topbar__list a { text-decoration: none; opacity: .85; }
.oc-topbar__list a:hover { opacity: 1; }

.oc-topbar__msgs {
	position: relative;
	min-inline-size: 200px;
	text-align: center;
	overflow: hidden;
	block-size: 1.5em;
}

.oc-topbar__msg {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	opacity: 0;
	pointer-events: none;
}

.oc-topbar--fade .oc-topbar__msg { transition: opacity .35s ease; }

.oc-topbar--slide .oc-topbar__msg {
	transition: opacity .3s ease, translate .3s ease;
	translate: 0 100%;
}

.oc-topbar__msg.is-current { opacity: 1; pointer-events: auto; translate: 0 0; }

.oc-topbar__nav {
	inline-size: 22px;
	block-size: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	display: grid;
	place-items: center;
	opacity: .8;
}
.oc-topbar__nav:hover { opacity: 1; }
.oc-topbar__nav svg { inline-size: 10px; block-size: 10px; fill: currentColor; }
[dir="rtl"] .oc-topbar__nav svg { transform: scaleX(-1); }

/* ---------- transparent header ---------- */

.oc-htrans .oc-header {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 60;
	background: transparent;
	border-block-end-color: transparent;
	transition: background-color .2s ease, border-color .2s ease;
}

.oc-htrans .oc-header.is-scrolled {
	background: var(--oc-header-bg, var(--oc-surface));
	border-block-end-color: var(--oc-line);
}

.oc-htrans.admin-bar .oc-header { inset-block-start: 32px; }

/* ---------- load more / infinite ---------- */

.oc-load-more {
	display: block;
	margin: 28px auto 0;
	padding: 11px 34px;
	cursor: pointer;
}

.oc-load-more.loading { opacity: .6; pointer-events: none; }

/* ---------- QA round-5 ---------- */

/* sticky product columns: whichever column is shorter pins while the other
 * scrolls. A column taller than the viewport simply cannot pin, so applying
 * sticky to both picks the short one by itself; the grid row ends where the
 * tabs/related begin, so the pin releases before the next section. */
@media (min-width: 901px) {
	/* The pin sits on the inner wrapper: Chromium clamps a sticky grid item
	 * to the whole grid, letting it slide over the related products; the
	 * wrapper is clamped by its column, which ends at the row. theme.js sets
	 * the per-column inset — a column that fits pins under the header, a
	 * taller one pins by its bottom edge. */
	.woocommerce.single-product div.product .oc-col-stick > .oc-stick-inner {
		position: sticky;
		inset-block-start: 24px;
	}
}

/* mobile gallery: a swipe strip instead of the desktop presets */
.oc-gdots,
.oc-gnav { display: none; }

@media (max-width: 900px) {
	.oc-thumbs { display: none; }

	.oc-gm-dots .woocommerce-product-gallery__wrapper,
	.oc-gm-peek .woocommerce-product-gallery__wrapper {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.oc-gm-dots .woocommerce-product-gallery__wrapper::-webkit-scrollbar,
	.oc-gm-peek .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }

	.woocommerce.oc-gm-dots div.product div.images .woocommerce-product-gallery__image,
	.woocommerce.oc-gm-peek div.product div.images .woocommerce-product-gallery__image {
		display: block;
		float: none;
		margin: 0;
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	/* peek: ~75% wide slides, the next one showing at the edge */
	.woocommerce.oc-gm-peek div.product div.images .woocommerce-product-gallery__image {
		flex-basis: 78%;
	}
	.oc-gm-peek .woocommerce-product-gallery__wrapper { gap: 8px; }

	/* the classic mobile gallery runs edge to edge, no gaps, square corners.
	 * inline-size:auto lets the negative margins actually widen the box —
	 * with the inherited 100% it only shifted sideways. */
	.oc-gm-dots.single-product div.product div.images {
		inline-size: auto;
		margin-inline: calc(-1 * var(--oc-gap));
	}
	.woocommerce.oc-gm-dots div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg) {
		border-radius: 0;
	}

	/* pager dots */
	.oc-gm-dots .oc-gdots {
		display: flex;
		justify-content: center;
		gap: 7px;
		margin: 0;
		padding: 10px 0 0;
		list-style: none;
	}

	.oc-gdots button {
		inline-size: 7px;
		block-size: 7px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: color-mix(in srgb, var(--oc-ink) 25%, transparent);
		cursor: pointer;
	}

	.oc-gdots button[aria-current="true"] { background: var(--oc-ink); }

	/* optional arrows, same bare chevrons as the cards */
	.oc-gm-arrows .woocommerce-product-gallery { position: relative; }

	.oc-gm-arrows .oc-gnav {
		display: grid;
		place-items: center;
		position: absolute;
		inset-block-start: 50%;
		translate: 0 -50%;
		inline-size: 38px;
		block-size: 48px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--oc-ink);
		z-index: 3;
	}

	.oc-gnav svg {
		inline-size: 16px;
		block-size: 16px;
		fill: currentColor;
		filter: drop-shadow(0 0 2px rgb(255 255 255 / 85%));
	}

	[dir="rtl"] .oc-gnav svg { transform: scaleX(-1); }

	.oc-gnav--prev { inset-inline-start: 6px; }
	.oc-gnav--next { inset-inline-end: 6px; }
}