/*
Theme Name: IQEX Theme
Theme URI: https://ultimateimage.co.uk
Description: Standard WordPress block theme by Ultimate Image / IQEX. Site-neutral foundation shared across Ultimate Image internal sites (UIMedia, UIMerch, …). Per-site behaviour lives in that site's own mu-plugin. Built for Gutenberg and WooCommerce.
Author: Ultimate Image
Author URI: https://ultimateimage.co.uk
Version: 1.5.3
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: iqex-theme
License: Proprietary
License URI: https://ultimateimage.co.uk
Tags: block-theme, full-site-editing, custom-colors, custom-fonts, wide-blocks, woocommerce
*/

/* Animated background — large soft radial blobs that drift across
   the viewport slowly, like warm light behind frosted glass. Sits on
   a fixed ::before pseudo so it doesn't push layout around; the
   content above renders on its own z-index. Very low contrast so it
   reads as atmosphere, not decoration. Honours reduced-motion. */
body::before {
	content: "";
	position: fixed;
	inset: -20%;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(233, 69, 96, 0.10) 0, rgba(233, 69, 96, 0) 38%),
		radial-gradient(circle at 80% 20%, rgba(23, 24, 49, 0.08) 0, rgba(23, 24, 49, 0) 42%),
		radial-gradient(circle at 70% 75%, rgba(200, 160, 100, 0.10) 0, rgba(200, 160, 100, 0) 40%),
		radial-gradient(circle at 15% 85%, rgba(23, 24, 49, 0.08) 0, rgba(23, 24, 49, 0) 36%);
	filter: blur(30px);
	animation: iqex-bg-float 36s ease-in-out infinite alternate;
	will-change: transform;
}

body > * {
	position: relative;
	z-index: 1;
}

@keyframes iqex-bg-float {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(-3%, 2%, 0) scale(1.08); }
	100% { transform: translate3d(4%, -2%, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
	body::before {
		animation: none;
	}
}

/* Main header icons (mini-cart, login) need to stay white on the
   dark header bar. The mini-cart SVG uses `fill="currentColor"` so
   colouring the button directly is enough. Login link is a wp:loginout
   anchor — colour it too so it matches the cart icon on any page. */
.wp-block-site-blocks > header .wc-block-mini-cart__button,
header.wp-block-template-part .wc-block-mini-cart__button {
	color: #ffffff !important;
}

.wp-block-site-blocks > header .wp-block-loginout a,
header.wp-block-template-part .wp-block-loginout a {
	color: #ffffff !important;
	text-decoration: none;
}

.wp-block-site-blocks > header .wp-block-loginout a:hover,
header.wp-block-template-part .wp-block-loginout a:hover {
	color: rgba(255, 255, 255, 0.8) !important;
	text-decoration: underline;
}

/* Navigation dropdown styling */
.wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: #ffffff !important;
	border: 1px solid #e5e5e7;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	padding: 8px 0;
	min-width: 220px;
}

.wp-block-navigation__submenu-container a,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #0a0a0a !important;
	padding: 8px 20px;
	font-size: 14px;
	display: block;
}

.wp-block-navigation__submenu-container a:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: #f7f7f8;
	color: #e94560 !important;
}

/* Post-content wrapping — ensure Elementor-rendered content gets a sane
   container width even though it doesn't know about our constrained layout. */
.entry-content > .elementor,
.entry-content > [data-elementor-type],
main .wp-block-post-content > .elementor,
main .wp-block-post-content > [data-elementor-type] {
	max-width: 1260px;
	margin-left: auto;
	margin-right: auto;
}

/* Woo product-template — the grid inside woocommerce/product-collection blocks.
   Woo renders this as <ul class="wp-block-woocommerce-product-template
   is-flex-container columns-N"> using flexbox with Woo-provided column widths.
   Overrides below just fix the mobile break (Woo's defaults go 1-col too early). */
@media (max-width: 1024px) {
	ul.wp-block-woocommerce-product-template.is-flex-container > li {
		flex: 0 0 calc(33.333% - 20px);
		max-width: calc(33.333% - 20px);
	}
}

@media (max-width: 768px) {
	ul.wp-block-woocommerce-product-template.is-flex-container > li {
		flex: 0 0 calc(50% - 15px);
		max-width: calc(50% - 15px);
	}
}

/* Product archive tiles: force square images across every WC
   product-collection grid so natural portrait/landscape shots crop to
   a uniform tile and the rows stop breaking at different heights.
   Matches the aspect the iqex/brand-featured-products block already
   uses, so the brand shopfront's two grids now read as one coherent
   catalog.
   The .aspect-ratio-auto modifier class on the same element has its
   own aspect-ratio declaration, so we need equal specificity + a
   !important override via a compound selector that includes the
   modifier explicitly. */
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image.wc-block-components-product-image--aspect-ratio-auto,
.wp-block-woocommerce-product-template .wc-block-components-product-image {
	aspect-ratio: 1 / 1 !important;
	overflow: hidden;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image__inner-container,
.wp-block-woocommerce-product-template .wc-block-components-product-image__inner-container {
	width: 100%;
	height: 100%;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-product-template .wc-block-components-product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Product archive button: WC product-button renders each card's add-to-
   cart / select-options as an <a> with both wp-block-button__link and
   wc-block-components-product-button__button classes. Its default
   padding inherits from wp-element-button (~1em top/bottom × 1.5em)
   which is way too tall for a compact product-card pill. Constrain. */
.wp-block-woocommerce-product-template .wc-block-components-product-button__button,
.wp-block-woocommerce-product-template a.wp-block-button__link.add_to_cart_button {
	padding: 0.65em 1.25em !important;
	line-height: 1.2 !important;
	font-size: 14px !important;
	min-height: 0 !important;
	height: auto !important;
}

/* Product card alignment: make each <li> a flex column and push the
   add-to-cart / select-options button to the bottom. Without this,
   products whose titles wrap to two lines push their button down and
   the row of cards looks ragged — buttons don't line up horizontally.
   With margin-top: auto on the product-button wrapper, cards stretch
   to equal height and the buttons align on a single baseline. */
.wp-block-woocommerce-product-template > li,
ul.wp-block-woocommerce-product-template > li {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
}

.wp-block-woocommerce-product-template > li > .wp-block-woocommerce-product-button,
.wp-block-woocommerce-product-template > li > .wc-block-components-product-button {
	margin-top: auto !important;
}

/* Mobile: keep 2 columns — single-column product cards waste half the
   viewport and force endless vertical scrolling on long archives. */
@media (max-width: 480px) {
	ul.wp-block-woocommerce-product-template.is-flex-container {
		gap: 16px !important;
	}
	ul.wp-block-woocommerce-product-template.is-flex-container > li {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		min-width: 0 !important;
	}
}

/* Mobile: partner grid (.uimerch-partner-grid on home + /our-partners/)
   goes from whatever grid autoflow picks (typically 1 col at 390px) to
   a fixed 2 cols, matching the shop archive density. */
@media (max-width: 600px) {
	.uimerch-partner-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px !important;
	}
	.uimerch-partner-grid > .wp-block-group {
		min-height: 120px;
	}
	.uimerch-partner-grid .wp-block-image img {
		max-height: 64px;
	}
}

/* Header product search — pill-shaped rounded field. Light background
   so it reads clearly on the dark header without blending in. Rules
   use high-enough specificity to beat WP core's `:where()`-wrapped
   defaults (which have zero specificity) and the inline border-radius
   that the block renderer injects. */
.iqex-header-search.wp-block-search .wp-block-search__inside-wrapper {
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px !important;
	overflow: hidden;
	padding: 2px 4px 2px 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	transition: box-shadow 150ms ease, border-color 150ms ease;
}

.iqex-header-search.wp-block-search .wp-block-search__inside-wrapper:focus-within {
	border-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.iqex-header-search.wp-block-search .wp-block-search__input {
	background: transparent;
	border: none;
	color: #171831;
	font-size: 0.875rem;
	padding: 6px 4px;
	outline: none;
	min-height: 32px;
}

.iqex-header-search.wp-block-search .wp-block-search__input::placeholder {
	color: #6b7280;
}

.iqex-header-search.wp-block-search .wp-block-search__button {
	background: transparent;
	border: none;
	color: #171831;
	padding: 6px 10px;
	border-radius: 999px !important;
	cursor: pointer;
}

.iqex-header-search.wp-block-search .wp-block-search__button:hover {
	background: rgba(0, 0, 0, 0.06);
}

.iqex-header-search.wp-block-search .wp-block-search__button svg {
	fill: currentColor;
}

/* Mobile header — hide the search field so it stops overlapping the
   centered logo at narrow widths, and collapse the 3-column grid (search
   | logo | login+cart) to a 2-column layout (logo | login+cart) so the
   remaining items align properly. The nav block below is already
   responsive via wp:navigation's built-in hamburger. Users can still
   search via the hamburger nav → Shop. */
@media (max-width: 768px) {
	.wp-block-group[class*="grid"] > .wp-block-group:has(> .wp-block-search) {
		display: none;
	}
	/* Fallback for browsers without :has() — hide by direct child search selector.
	   This rule is idempotent with the :has() rule above. */
	.wp-block-group > .wp-block-search {
		display: none;
	}
}

/* Product carousel — applied via the `iqex-carousel` className on a
   Group wrapping a woocommerce/product-collection. Converts the inner
   product-template UL from a wrap-flex grid into a single-row
   horizontally-scrolling scroll-snap carousel. Cards slide on native
   smooth scroll; a small JS module (assets/js/iqex-carousel.js)
   injects prev/next arrow buttons and wires them up. Works without JS
   too — users can drag-scroll or swipe. */
.iqex-carousel {
	position: relative;
}

.iqex-carousel .wp-block-woocommerce-product-template,
.iqex-carousel ul.wp-block-woocommerce-product-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	gap: 20px;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 8px 4px 20px;
	margin: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.iqex-carousel .wp-block-woocommerce-product-template::-webkit-scrollbar {
	height: 6px;
}

.iqex-carousel .wp-block-woocommerce-product-template::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 999px;
}

.iqex-carousel .wp-block-woocommerce-product-template > li {
	flex: 0 0 clamp(220px, 24vw, 280px);
	scroll-snap-align: start;
	min-width: 0;
}

/* Arrow buttons injected by JS — positioned half-over the card row. */
.iqex-carousel__arrow {
	position: absolute;
	top: 40%;
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #171831;
	transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
	padding: 0;
}

.iqex-carousel__arrow:hover {
	background: #171831;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.iqex-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}

.iqex-carousel__arrow svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.iqex-carousel__arrow--prev {
	left: -12px;
}

.iqex-carousel__arrow--next {
	right: -12px;
}

@media (max-width: 600px) {
	.iqex-carousel__arrow {
		display: none;
	}
}

/* Product card brand label — post-terms block rendered inside a
   product-template shows each product's product_brand term above the
   title. Style it as a subtle wordmark. */
.iqex-product-card__brand {
	margin: 12px 0 4px;
}

.iqex-product-card__brand a {
	color: inherit;
	text-decoration: none;
}

.iqex-product-card__brand a:hover {
	text-decoration: underline;
}

/* "RRP" prefix on product-card prices — adds an inline muted label
   so customers understand the number is the recommended retail price.
   Applied via CSS ::before so we don't have to modify each WC
   product-price block render. Scoped to `.iqex-product-card__price`
   (added as className on the price block in product-template) so it
   never leaks onto single-product pages or cart totals. */
.iqex-product-card__price .woocommerce-Price-amount,
.iqex-product-card__price .wc-block-components-product-price__value {
	font-weight: 600;
}

.iqex-product-card__price .wc-block-components-product-price::before,
.iqex-product-card__price > .price::before {
	content: "RRP";
	display: inline-block;
	margin-right: 6px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #6b7280;
	border: 1px solid #d1d5db;
	border-radius: 3px;
	vertical-align: 1px;
}

/* Contact Form 7 polish — default CF7 output is raw browser form
   elements, which on our theme looks like unstyled legacy HTML. Give
   it a modern treatment: rounded inputs, focus ring using the brand
   accent, consistent spacing, large primary submit button, clear
   validation messaging. Applied theme-wide since CF7 is used on both
   Contact us and Become a Partner. */
.wpcf7 form {
	max-width: 100%;
	margin: 0;
}

.wpcf7 form p {
	margin: 0 0 16px;
}

.wpcf7 form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	line-height: 1.4;
	color: #171831;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	outline: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
	font-family: inherit;
	box-sizing: border-box;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border-color: var(--wp--preset--color--accent, #e94560);
	box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

.wpcf7 textarea {
	min-height: 140px;
	resize: vertical;
}

/* Checkbox / acceptance row — keep label inline with the box rather
   than stacked as the default CF7 style does. */
.wpcf7 .wpcf7-acceptance label,
.wpcf7 .wpcf7-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 400;
	color: #4b5563;
	margin: 0;
	cursor: pointer;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"],
.wpcf7 .wpcf7-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--wp--preset--color--accent, #e94560);
}

/* Submit button — large primary call-to-action, full-width on mobile. */
.wpcf7 input[type="submit"] {
	display: inline-block;
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--wp--preset--color--accent, #e94560);
	color: #ffffff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 120ms ease, transform 120ms ease;
	min-width: 200px;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--primary, #171831);
	transform: translateY(-1px);
}

.wpcf7 input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Spinner + reCAPTCHA badge area */
.wpcf7 .wpcf7-spinner {
	margin-left: 12px;
	vertical-align: middle;
}

/* Validation messaging */
.wpcf7 .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 14px;
	border-width: 1px;
	border-style: solid;
}

.wpcf7-form.sent .wpcf7-response-output {
	background: #ecfdf5;
	border-color: #10b981;
	color: #065f46;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	background: #fef2f2;
	border-color: #ef4444;
	color: #991b1b;
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #991b1b;
	font-size: 13px;
}

.wpcf7 .wpcf7-not-valid {
	border-color: #ef4444 !important;
}

/* Mobile — stack submit button full-width so it's easy to tap. */
@media (max-width: 600px) {
	.wpcf7 input[type="submit"] {
		display: block;
		width: 100%;
		min-width: 0;
	}
}

/* Mobile — centre-justify all block button rows regardless of how they
   were configured in the editor. On narrow screens a left-aligned button
   row looks stranded; centring it matches the rest of the mobile layout
   and ensures dual-CTA groups wrap nicely. */
@media (max-width: 600px) {
	.wp-block-buttons {
		justify-content: center !important;
	}
	.wp-block-columns .wp-block-buttons {
		justify-content: center !important;
	}
}

/* Brand shopfront "All products" layout — sidebar + main grid.
   The template wraps the sidebar + product collection in a flex
   container so we can size the sidebar fixed-width and let the grid
   consume the remaining space. On mobile the flex-wrap default stacks
   the sidebar above the grid. */
.iqex-brand-shop-layout {
	align-items: flex-start;
}

.iqex-brand-shop-sidebar {
	flex: 0 0 260px;
	max-width: 260px;
	padding: 20px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	position: sticky;
	top: 20px;
}

.iqex-brand-shop-main {
	flex: 1 1 400px;
	min-width: 0;
}

.iqex-brand-shop-sidebar .wp-block-woocommerce-product-filters > * {
	margin-block: 14px 14px;
}

.iqex-brand-shop-sidebar h3.wp-block-heading {
	color: #171831;
}

/* WC filter blocks: tighter spacing + accent colour from the brand */
.iqex-brand-shop-sidebar .wc-block-product-filter-checkbox-list__label,
.iqex-brand-shop-sidebar .wc-block-components-checkbox__label {
	font-size: 0.875rem;
}

.iqex-brand-shop-sidebar .wc-block-components-filter-submit-button,
.iqex-brand-shop-sidebar .wp-block-woocommerce-product-filter-clear-button button {
	background: var(--brand-accent, var(--wp--preset--color--accent, #e94560));
	color: var(--brand-accent-text, #ffffff);
	border: none;
	padding: 0.65em 1.25em;
	border-radius: 4px;
	cursor: pointer;
}

/* Mobile — sidebar stacks above the grid. The flex container's
   flex-wrap:wrap already does this once the sidebar's min-width
   exceeds the viewport; this rule also unsticks it so it doesn't
   follow the scroll on short phones. */
@media (max-width: 900px) {
	.iqex-brand-shop-sidebar {
		flex: 1 1 100%;
		max-width: 100%;
		position: static;
	}
}

/* Brand shopfront — dedicated header.
   On a product_brand archive the template uses parts/header-brand.html
   instead of the default header. Goal: the page reads as the brand's
   own shop (e.g. "SBDA shop") while keeping a small UIMerch mark so
   the white-label relationship is still visible. Key changes vs the
   main header: smaller site-logo, single-row layout, a slim 4-item
   nav with no cross-brand browsing, and a "Brand shop" wordmark next
   to the UIMerch logo for context. */
.iqex-brand-header .wp-block-site-logo img {
	max-width: 34px;
	height: auto;
	display: block;
}

.iqex-brand-header__mark {
	align-items: flex-start;
}

.iqex-brand-header__badge {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1;
}

.iqex-brand-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}

/* Mobile — badge collapses, nav shifts to overlay (built-in WP nav
   overlay triggers on narrow widths since overlayMenu:"mobile"). */
@media (max-width: 768px) {
	.iqex-brand-header__badge {
		display: none;
	}
	.iqex-brand-header .wp-block-site-logo img {
		max-width: 28px;
	}
}

/* Brand shopfront — accent colour wiring.
   --brand-accent and --brand-accent-text are both injected by
   inc/brand-shopfront.php as an inline <style> on product_brand
   archives. The text colour is YIQ-computed from the accent so
   buttons stay legible whether the brand picked a light or dark
   accent (e.g. Western Beat's dark purple gets white text, a pale
   pink gets near-black). Falls back to theme accent + white when
   absent. */
.tax-product_brand .wp-block-button__link,
.tax-product_brand .wp-element-button,
.tax-product_brand .iqex-hero-media__cta.is-style-primary {
	background-color: var(--brand-accent, var(--wp--preset--color--accent, #e94560));
	color: var(--brand-accent-text, #ffffff);
}

.tax-product_brand a {
	color: inherit;
}

.tax-product_brand h1,
.tax-product_brand h2 {
	color: inherit;
}

/* Product image gallery — ensure it has visible width on single-product.html */
.wp-block-woocommerce-product-image-gallery {
	display: block;
	width: 100%;
	max-width: 100%;
}

.wp-block-woocommerce-product-image-gallery img {
	max-width: 100%;
	height: auto;
}

/* Product page styling */
.single-product .site-main,
.single-product .entry-content,
.single-product .woocommerce-tabs {
	margin-bottom: 60px;
}

/* Hide product meta and duplicate category block (category shown in breadcrumb) */
.single-product .product .product_meta,
.single-product .product_meta,
.woocommerce div.product .product_meta,
.taxonomy-product_cat,
.wp-block-post-terms.taxonomy-product_cat,
.single-product .taxonomy-product_cat,
div.taxonomy-product_cat.wp-block-post-terms,
.wp-block-post-terms[class*="taxonomy-product_cat"] {
	display: none !important;
}

/* Product page container */
.single-product .woocommerce {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 30px;
}

/* Product title sizing */
.single-product .product_title {
	font-size: 32px;
}

/* Breadcrumb spacing */
.woocommerce-breadcrumb {
	padding: 12px 30px;
	font-size: 13px;
	color: #6b6b6b;
	max-width: 1200px;
	margin: 0 auto;
}

/* Related products grid */
.single-product .related.products {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 30px;
}

/* Hide supplier tags from public product pages */
.woocommerce-product-details__short-description + .tagged_as,
.product_meta .tagged_as,
.tagged_as {
	display: none !important;
}

/* Woo product-image-gallery — fix broken state when flexslider/zoom JS can't init.
   The legacy gallery markup includes a zoomImg overlay rendered at natural image
   size (often 1440x2160). jquery.zoom.js normally hides it until hover; if its
   init fails (e.g. an inline script throws "jQuery is not defined" before jquery
   loads, or on variable products) the zoomImg stays visible at full size and
   covers the main image. Belt-and-braces: force gallery visible, hide the zoom
   overlay, clamp the main image to the column width. */
.woocommerce-product-gallery {
	opacity: 1 !important;
	overflow: hidden;
}
.woocommerce-product-gallery img.zoomImg,
.woocommerce-product-gallery .zoomImg {
	display: none !important;
}
.woocommerce-product-gallery img.wp-post-image,
.woocommerce-product-gallery .woocommerce-product-gallery__image > a > img {
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
	width: 100%;
}
.woocommerce-product-gallery__trigger {
	display: none !important;
}

/* ShareThis sticky left-rail — only show on single-product pages. On archives and
   landing pages it overlaps the left 48px of the main content, chopping breadcrumbs
   and archive titles. Inline share buttons on product pages still work. */
body:not(.single-product) #st-2.st-sticky-share-buttons,
body:not(.single-product) .st-sticky-share-buttons.st-left {
	display: none !important;
}

/* Partner grid — normalise logo heights so mixed-aspect logos sit on a common baseline */
.uimerch-partner-grid > .wp-block-group {
	min-height: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.uimerch-partner-grid .wp-block-image {
	margin: 0;
	width: 100%;
	display: flex;
	justify-content: center;
}

.uimerch-partner-grid .wp-block-image img {
	max-height: 80px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.uimerch-partner-grid p {
	margin: 0;
}

.uimerch-partner-grid p a {
	color: inherit;
	text-decoration: none;
}

.uimerch-partner-grid p a:hover {
	color: #e94560;
}