/* ==========================================================================
   Rolman fixes — New Arrival highlight, category accordion, mobile layout,
   360 viewer. Scoped so nothing here leaks into unrelated components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NEW ARRIVAL HIGHLIGHT
   -------------------------------------------------------------------------- */
.rolman-new-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	display: inline-block;
	padding: 5px 12px;
	border-radius: 3px;
	background: #16a34a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
	pointer-events: none;
}

/* The loop item needs a positioning context for the badge. */
.products .product.rolman-is-new-arrival,
.product.rolman-is-new-arrival {
	position: relative;
}

/* Lift the whole card so new stock reads at a glance. */
.products .product.rolman-is-new-arrival {
	outline: 2px solid #16a34a;
	outline-offset: 2px;
	border-radius: 4px;
}

/* On the single product page the badge sits in normal flow. */
.rolman-new-badge--single {
	position: static;
	margin-bottom: 10px;
}

/* SOLD: same treatment as New Arrival, in red. */
.rolman-sold-badge {
	background: #dc2626;
}

.products .product.rolman-is-sold,
.product.rolman-is-sold {
	position: relative;
}

.products .product.rolman-is-sold {
	outline: 2px solid #dc2626;
	outline-offset: 2px;
	border-radius: 4px;
}

/* New Arrival entry in the category widget. */
.product-categories .rolman-cat-new-arrival > a {
	color: #16a34a !important;
	font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   2. PRODUCT CATEGORY ACCORDION
   Every row uses the same three-column grid — label | count | caret — so the
   counts line up down the list and the caret always sits on the first line of
   the label, including when the label wraps.
   -------------------------------------------------------------------------- */
/* No flash of an expanded list: collapse sub-lists before the script runs.
   The theme's own CSS forces them open with !important, which is what made the
   list appear expanded and then snap shut once JS initialised. */
.widget_product_categories ul.product-categories:not(.rolman-accordion) ul.children,
.widget-area ul.product-categories:not(.rolman-accordion) ul.children {
	display: none !important;
}

.product-categories.rolman-accordion,
.product-categories.rolman-accordion ul.children {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.product-categories.rolman-accordion > li.cat-item {
	display: grid;
	grid-template-columns: 1fr auto 28px;
	align-items: start;       /* keeps the caret on the first line */
	column-gap: 8px;
	padding: 2px 0;
	border-radius: 4px;
	transition: background-color .12s ease;
}

/* Sub-list spans the whole row, below the label. */
.product-categories.rolman-accordion > li.cat-item > ul.children {
	grid-column: 1 / -1;
}

/* Counts share a column, right-aligned, so the numbers form a clean edge. */
.product-categories.rolman-accordion > li.cat-item > .count {
	justify-self: end;
	align-self: start;
	line-height: 26px;
	opacity: .6;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Main categories bold. Specificity must beat app.css's
   `.widget-area .product-categories li.cat-item a { font-weight: 500 }`. */
.widget-area .product-categories.rolman-accordion > li.cat-item > a,
.wpb_widgetised_column .product-categories.rolman-accordion > li.cat-item > a,
.widget_product_categories .product-categories.rolman-accordion > li.cat-item > a {
	font-weight: 700;
	line-height: 26px;
	display: block;
}

/* Subcategories stay regular weight. */
.widget-area .product-categories.rolman-accordion ul.children li.cat-item a,
.wpb_widgetised_column .product-categories.rolman-accordion ul.children li.cat-item a,
.widget_product_categories .product-categories.rolman-accordion ul.children li.cat-item a {
	font-weight: 400;
}

/* Row hover: one clear signal for the whole row. */
.product-categories.rolman-accordion > li.cat-item:hover {
	background-color: rgba(0, 0, 0, .035);
}

.product-categories.rolman-accordion > li.cat-item:hover > .count {
	opacity: .85;
}

/* Current category. */
.product-categories.rolman-accordion li.current-cat > a {
	color: #16a34a;
}

/* --- caret ------------------------------------------------------------- */
.rolman-cat-toggle {
	position: relative;
	width: 28px;
	height: 26px;            /* matches the label's line-height */
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	color: inherit;
	opacity: .55;
	transition: background-color .12s ease, opacity .12s ease;
}

.rolman-cat-toggle::before,
.rolman-cat-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	border-radius: 1px;
	transition: transform .18s ease, opacity .18s ease;
}

/* Both strokes share one length/weight so + and − read as the same control. */
.rolman-cat-toggle::before {
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	transform: none;
	top: 50%;
	left: 50%;
}

.rolman-cat-toggle::after {
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	transform: rotate(90deg);
	top: 50%;
	left: 50%;
}

/* Open state: the vertical stroke rotates flat onto the horizontal one,
   leaving a clean, evenly weighted minus. */
.cat-parent.open > .rolman-cat-toggle::after {
	transform: rotate(0deg);
	opacity: 0;
}

/* Clear affordance: the caret is the thing you click. */
.rolman-cat-toggle:hover {
	background-color: rgba(0, 0, 0, .1);
	opacity: 1;
}

.cat-parent.open > .rolman-cat-toggle {
	opacity: .9;
}

.rolman-cat-toggle:active {
	background-color: rgba(0, 0, 0, .16);
}

.rolman-cat-toggle:focus-visible {
	outline: 2px solid #16a34a;
	outline-offset: 1px;
	opacity: 1;
}

/* The visible caret is 28x26, which is below the comfortable touch minimum.
   Extend the hit area with an overlay so the target is ~44px without changing
   the layout or the visual size. */
.rolman-cat-toggle > span.rolman-hit,
.rolman-cat-toggle::after {
	pointer-events: none;
}

.product-categories.rolman-accordion li.cat-parent > .rolman-cat-toggle {
	position: relative;
}

.product-categories.rolman-accordion li.cat-parent > .rolman-cat-toggle::before,
.product-categories.rolman-accordion li.cat-parent > .rolman-cat-toggle::after {
	pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
	.product-categories.rolman-accordion > li.cat-item {
		padding: 5px 0;
	}

	.rolman-cat-toggle {
		width: 40px;
		height: 36px;
		margin-right: -6px;
	}

	.product-categories.rolman-accordion > li.cat-item {
		grid-template-columns: 1fr auto 40px;
	}
}

/* Honour reduced-motion: no slide, no transitions. */
@media (prefers-reduced-motion: reduce) {
	.product-categories.rolman-accordion > li.cat-item,
	.rolman-cat-toggle,
	.rolman-cat-toggle::before,
	.rolman-cat-toggle::after {
		transition: none !important;
	}
}

/* --- sub-list ----------------------------------------------------------- */
.product-categories.rolman-accordion ul.children {
	margin: 2px 0 6px;
	padding-left: 12px;
	border-left: 2px solid rgba(0, 0, 0, .09);
}

.product-categories.rolman-accordion ul.children li.cat-item {
	display: grid;
	grid-template-columns: 1fr auto 28px;   /* caret column at every level */
	column-gap: 8px;
	align-items: start;
	padding: 1px 0;
	border-radius: 3px;
}

/* A nested sub-list spans its whole row, like the top level. */
.product-categories.rolman-accordion ul.children li.cat-item > ul.children {
	grid-column: 1 / -1;
}

.product-categories.rolman-accordion ul.children li.cat-item:hover {
	background-color: rgba(0, 0, 0, .03);
}

.product-categories.rolman-accordion ul.children li.cat-item > .count {
	justify-self: end;
	align-self: start;
	line-height: 26px;
	opacity: .55;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Nested labels align to the same line box as their caret. */
.product-categories.rolman-accordion ul.children li.cat-item > a {
	line-height: 26px;
	display: block;
}

/* Collapsed by default.
   `!important` is required here: extra-style.css and the Customizer's
   Additional CSS both force `.children { display: block !important }` as a
   workaround for the old broken accordion, and that beats inline styles. */
.product-categories.rolman-accordion li.cat-parent:not(.open) > ul.children,
.widget-area .product-categories.rolman-accordion li.cat-item.cat-parent:not(.open) > .children,
.widget_product_categories .product-categories.rolman-accordion li.cat-parent:not(.open) > .children {
	display: none !important;
}

/* While sliding open/closed jQuery needs to control display itself. */
.product-categories.rolman-accordion li.cat-parent > ul.children.rolman-animating {
	display: block !important;
}

/* --------------------------------------------------------------------------
   3. MOBILE HEADER — login + wishlist to the right of the logo,
      directly under the social icons.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Hamburger + logo row; the icons are overlaid on its right (rule below). */
	.l-header .site-title-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding-right: 15px;
	}

	.l-header .site-title-bar .title-bar-left {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}
}

/* Icons: the theme renders the account + wishlist icons in a strip BELOW the
   logo bar on every screen that shows the mobile header (< 1024px). They are
   placed with CSS only — no DOM moves — so they paint in the right spot from
   the first frame and survive the wishlist plugin re-rendering its counter.

   `.site-navigation` is made static so `.top-bar-right` is positioned against
   `.top-bar-container`, which is exactly the logo bar once the strip below it
   collapses. `.top-bar-right` then overlays that bar as a right-aligned flex
   row. It stays the positioning context for `.mobile-menu`, which is re-anchored
   to its bottom edge — the same place it opened before. */
@media screen and (max-width: 63.9375em) {
	header.l-header .top-bar-container .site-navigation.top-bar {
		position: static;
	}

	header.l-header .top-bar-container .site-navigation.top-bar .top-bar-right {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 18px;
		width: auto;
		padding: 0 15px;
		pointer-events: none;   /* hamburger + logo underneath stay clickable */
	}

	header.l-header .top-bar-container .site-navigation.top-bar .top-bar-right > .my-account,
	header.l-header .top-bar-container .site-navigation.top-bar .top-bar-right > .wlfmc-counter-wrapper {
		position: relative;
		margin: 0;
		float: none;
		overflow: visible;
		pointer-events: auto;
	}

	header.l-header .top-bar-container .site-navigation.top-bar .top-bar-right .mobile-menu {
		top: 100%;
		pointer-events: auto;
	}
}

/* --------------------------------------------------------------------------
   4. MOBILE — search above the filter
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.widget_product_search.rolman-search-moved {
		display: block;
		margin: 0 0 14px;
		padding: 0 15px;
	}

	.widget_product_search.rolman-search-moved .woocommerce-product-search {
		display: flex;
		gap: 8px;
	}

	.widget_product_search.rolman-search-moved .search-field {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   5. 360 VIEWER — size the frame to the photo instead of a fixed box

   Three separate sources fight over this box and all of them assume a tall
   fixed frame:

     * the plugin's slider config hardcodes `height: 800`;
     * Customizer CSS (`wp-custom-css`) forces
       `.threesixty.threesixty-products { height: 950px !important }`
       and pulls the photo up with
       `.threesixty_content_wrap .threesixty .threesixty_images img { top:-120px }`;
     * the plugin's own `custom.css` adds a stack of breakpoint offsets
       (`.threesixty_images { top: 40/50/60/110/160px }`, `img { top: -40px }`).

   Net result on a 375x812 phone: a 950px box that Magnific centres at
   top = -69, with the photo at top = -149 — i.e. half of it above the screen.

   `wp-custom-css` is printed inline in <head> *after* every enqueued
   stylesheet, so source order cannot beat it. Every rule below is therefore
   raised to `#threesixty_content_wrap …` (id + class) and carries
   `!important`, which outranks the Customizer's (0,2,0)/(0,3,1) rules.

   The frame is sized from `--r360-*` custom properties that `fit360()` sets
   inline on the wrapper. Custom properties are untouched by the plugin's own
   `resize()`/`responsive()` (which write plain inline width/height), so the
   size survives every re-fit the plugin performs.
   -------------------------------------------------------------------------- */
.mfp-wrap .mfp-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.mfp-wrap .mfp-content {
	width: 100vw !important;
	max-width: 100vw !important;
}

/* Hide the viewer until fit360() has measured it, so the unsized box never
   flashes. `watch360()` guarantees the class is added even if sizing fails,
   so this can never leave the popup permanently blank. */
#threesixty_content_wrap {
	visibility: hidden;
}

#threesixty_content_wrap.rolman-360-ready {
	visibility: visible;
}

/* The frame: exactly as wide as the photo, and as tall as the photo plus the
   space reserved for the controls (mobile only — see section 7). */
#threesixty_content_wrap .threesixty.threesixty-products {
	width: var(--r360-w, 100%) !important;
	height: var(--r360-h, auto) !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 auto !important;
	background-color: transparent !important;
}

/* Drop the breakpoint offsets: the list fills the photo area of the frame. */
#threesixty_content_wrap .threesixty .threesixty_images {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: var(--r360-photo-h, auto) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Drop the negative `top` hacks: the photo fills the list box exactly, so
   there is nothing left to nudge. */
#threesixty_content_wrap .threesixty .threesixty_images img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
	object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   6. MOBILE SPACING
   The theme applies its desktop rhythm unchanged on phones: the title bar
   carries a 70px bottom margin and the page title 50px/60px of padding, which
   pushes the product grid well below the fold. Measured and tightened.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.titlebar {
		margin-bottom: 22px;
	}

	#page-title.title,
	.titlebar #page-title {
		padding-top: 26px;
		padding-bottom: 26px;
		font-size: 30px;
		line-height: 1.2;
	}

	/* --- One gutter for everything -------------------------------------
	   Measured on a 390px screen the column had four different left edges:
	   products list 20px, card/search 35px, filter row 45px, search input
	   50px. Align them all to the product-card edge. */

	.widget_product_search.rolman-search-moved {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 12px;
	}

	/* The input carried its own 20px bottom margin, which stacked on top of the
	   widget margin and the filter row's flex gap. */
	.widget_product_search.rolman-search-moved .search-field {
		margin-bottom: 0;
	}

	/* An empty notices wrapper still counted as a flex item, adding the 10px
	   row gap above the result count. */
	.filter-options .woocommerce-notices-wrapper:empty {
		display: none;
	}

	.widget_product_search.rolman-search-moved .woocommerce-product-search {
		margin: 0;                 /* form carried 20px, breaking the rhythm */
	}

	/* Search is the primary action: full width, taller, stronger border. */
	.widget_product_search.rolman-search-moved .search-field {
		height: 52px;
		padding-top: 0;
		padding-bottom: 0;
		font-size: 16px;
		border-width: 2px;
		border-radius: 4px;
	}

	.widget_product_search.rolman-search-moved .search-field:focus {
		border-color: #16a34a;
		outline: none;
	}

	.filter-options {
		padding-top: 0;
		padding-bottom: 0;
		margin-bottom: 16px;
	}

	/* Pull the filter row back onto the shared gutter. */
	.filter-options .filter-flex,
	.filter-options .woocommerce-result-count {
		padding-left: 0;
		padding-right: 0;
		margin-left: -10px;
		margin-right: -10px;
	}

	/* Filter row is secondary: smaller type, muted, less visual weight. */
	.filter-options .woocommerce-result-count {
		margin-bottom: 8px;
		font-size: 13px;
		opacity: .75;
	}

	/* Count on its own line, then sorting and the grid/list toggle share a row. */
	.filter-options .filter-flex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}

	.filter-options .woocommerce-notices-wrapper,
	.filter-options .woocommerce-result-count {
		width: 100%;
		flex: 0 0 100%;
	}

	/* flex-basis 0 + min-width 0 lets the form shrink; with `auto` it claimed
	   the full 320px and pushed the toggle onto its own line. */
	.filter-options .woocommerce-ordering {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		margin: 0;
	}

	.filter-options .gridlist-toggle {
		flex: 0 0 auto;
		margin: 0;
	}

	/* The select declared line-height 38.4px inside a 51px box, so the label
	   sat above centre. Let the box centre it. */
	.filter-options .woocommerce-ordering select,
	.filter-options .woocommerce-ordering .orderby {
		width: 100%;
		max-width: none;
		height: 38px;
		line-height: normal;
		padding: 0 28px 0 10px;
		font-size: 13px;
		box-sizing: border-box;
	}

	/* Even rhythm between cards. */
	ul.products li.product {
		margin-bottom: 16px;
	}
}

/* --------------------------------------------------------------------------
   7. 360 VIEWER CONTROLS
   The close control rendered as a bare glyph that disappeared against light
   frames; the spin controls were easy to miss. Give both a solid chip so they
   read against any photo.
   -------------------------------------------------------------------------- */
.mfp-wrap .mfp-close,
.mfp-wrap button.mfp-close {
	width: 44px;
	height: 44px;
	line-height: 44px;
	top: 10px;
	right: 10px;
	opacity: 1;
	color: #fff;
	font-size: 28px;
	background: rgba(17, 17, 17, .78);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: background .15s ease, transform .15s ease;
}

.mfp-wrap .mfp-close:hover,
.mfp-wrap .mfp-close:focus-visible {
	background: #111;
	transform: scale(1.06);
	opacity: 1;
}

.mfp-wrap .mfp-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Spin controls: centred under (mobile) or over (desktop) the photo.
   The plugin pins this bar with five competing breakpoint rules
   (`top: unset !important`, `bottom: 49/30/20px`, `left: 55/58%`), the tightest
   of which carry `!important`; the id-scoped selector here outranks them all.
   `fit360()` reserves the strip below the photo on mobile — see --r360-h. */
#threesixty_content_wrap .threesixty .nav_bar.top-right {
	top: auto !important;
	right: auto !important;
	bottom: 16px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
}

/* Spin controls: slightly larger, clearer against the photo. */
#threesixty_content_wrap .nav_bar .butn {
	width: 46px;
	height: 46px;
	background-color: rgba(17, 17, 17, .72);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	transition: background-color .15s ease, transform .15s ease;
}

#threesixty_content_wrap .nav_bar .butn:hover {
	background-color: #111;
	transform: scale(1.06);
}

@media (max-width: 767px) {
	.mfp-wrap .mfp-close,
	.mfp-wrap button.mfp-close {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 26px;
	}

	#threesixty_content_wrap .nav_bar .butn {
		width: 42px;
		height: 42px;
	}
}

/* --------------------------------------------------------------------------
   8. PHOTOSWIPE GALLERY LIGHTBOX CONTROLS
   PhotoSwipe ships its buttons as a faint sprite at opacity .75 on a
   semi-transparent bar, so the close control was effectively invisible against
   photographs. Draw a real close affordance and lift the rest.
   -------------------------------------------------------------------------- */
.pswp__top-bar {
	background-color: rgba(0, 0, 0, .45) !important;
}

.pswp__button {
	opacity: .9;
}

.pswp__button:hover,
.pswp__button:focus-visible {
	opacity: 1;
}

/* Close: solid dark chip with a drawn X, so it reads on any image.
   Specificity must beat photoswipe.min.css's
   `button.pswp__button { background-color: transparent !important }` (0,1,1)
   and app.css's `* { background: transparent !important }`. */
.pswp .pswp__top-bar button.pswp__button--close {
	position: relative !important;
	width: 44px;
	height: 44px;
	margin: 4px 6px 0 0;
	border-radius: 50%;
	background-image: none !important;   /* replace the sprite glyph */
	background-position: 0 0 !important;
	background-color: rgba(17, 17, 17, .8) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
	opacity: 1 !important;
	transition: background-color .15s ease, transform .15s ease;
}

.pswp .pswp__top-bar button.pswp__button--close::before,
.pswp .pswp__top-bar button.pswp__button--close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

.pswp .pswp__top-bar button.pswp__button--close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.pswp .pswp__top-bar button.pswp__button--close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.pswp .pswp__top-bar button.pswp__button--close:hover {
	background-color: #111 !important;
	transform: scale(1.06);
}

.pswp .pswp__top-bar button.pswp__button--close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Counter should be legible too. */
.pswp__counter {
	opacity: 1;
	font-size: 15px;
	line-height: 44px;
	padding-left: 14px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

@media (max-width: 767px) {
	.pswp .pswp__top-bar button.pswp__button--close {
		width: 40px;
		height: 40px;
		margin: 3px 4px 0 0;
	}

	.pswp .pswp__top-bar button.pswp__button--close::before,
	.pswp .pswp__top-bar button.pswp__button--close::after {
		width: 16px;
	}
}

/* --------------------------------------------------------------------------
   9. SHOP LIST VIEW
   Measured cause: `.woocommerce ul.products li.product` is `display:flex` with
   `flex-direction: column` (app.css), and nothing switches it to `row` for the
   `.list` variant. So the details wrapper stacked BELOW the image while
   `.product-image-wrapper` (max-width:58%) held the left 58% — leaving ~310px
   of empty space to the right of every row.
   Verified: side-by-side, empty gap 310px -> 1px, row height 487px -> 382px,
   zero horizontal overflow.
   -------------------------------------------------------------------------- */
.woocommerce ul.products.list li.product {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
}

.woocommerce ul.products.list li.product .product-image-wrapper {
	flex: 0 0 300px;
	width: 300px;
	max-width: 300px;
	padding-right: 0 !important;   /* theme adds 40px, shrinking the image */
	overflow: hidden;
}

.woocommerce ul.products.list li.product .product-details-wrapper {
	flex: 1 1 auto;
	min-width: 0;                  /* long titles wrap instead of widening */
	padding: 0 0 0 24px !important;
}

/* Details beside the photo in list view: the product's short description
   (spec table). The theme hides `.description` in every view; grid keeps it
   hidden. */
.woocommerce ul.products.list li.product:not(.product-category) .description {
	display: block !important;
	margin: 8px 0 12px;
	font-size: 14px;
	line-height: 1.4;
}

.woocommerce ul.products.list li.product .description p:empty,
.woocommerce ul.products.list li.product .description > br {
	display: none;
}

.woocommerce ul.products.list li.product .description table {
	width: 100%;
	max-width: 520px;
	margin: 0;
	border-collapse: collapse;
}

.woocommerce ul.products.list li.product .description td {
	padding: 4px 10px;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	vertical-align: top;
}

.woocommerce ul.products.list li.product .description td:first-child {
	width: 40%;
	white-space: nowrap;
}

/* The theme pins "Read more" to the card's bottom-right corner, where it now
   covers the details; put it in flow below them. Keep the title clear of the
   wishlist heart in the top-right corner. */
.woocommerce ul.products.list li.product .product-details-wrapper a.button {
	position: static !important;
	display: inline-block;
	margin-top: 4px;
}

.woocommerce ul.products.list li.product .woocommerce-loop-product__title {
	padding-right: 40px;
}

/* Mobile/tablet search + Categories row (js sections 2a, 2g). Same
   breakpoint the theme uses to drop `.sidebar` below the products (app.css,
   63.9375em). JS moves the sidebar search box to the top of `.content-wrapper`
   and puts the Categories control beside it; both use the search field's own
   size, border and radius so they read as one control. Open state uses the
   theme's active colours (black / #fdb900, as on the active grid-list
   button). The category list opens directly under the row. */
@media screen and (max-width: 63.9375em) {
	/* Before JS runs (first paint) the control sits on its own; keep it quiet. */
	.content-wrapper > .rolman-cats-toggle {
		order: 0;
		margin: 0 15px 14px;
	}

	.content-wrapper > .widget_product_search.rolman-search-row {
		order: 0;
		display: flex;
		align-items: stretch;
		gap: 8px;
		width: 100%;
		margin: 0 0 14px;
		padding: 0 15px;
	}

	.content-wrapper > .widget_product_search.rolman-search-row .woocommerce-product-search {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
	}

	/* Search and Categories use the sort dropdown's exact box (section 9b):
	   51px here, 38px on phones; 1px #c7c7c7 border, square corners. */
	.content-wrapper > .widget_product_search.rolman-search-row .search-field {
		width: 100%;
		height: 51px;
		margin: 0;
		padding: 0 40px 0 15px;
		font-size: 16px;             /* typed text: 16px stops iOS zooming in */
		font-weight: 400;
		color: #202020;
		border: 1px solid #c7c7c7;
		border-radius: 0;
	}

	.content-wrapper > .widget_product_search.rolman-search-row .search-field::placeholder {
		font-size: 16px;
		color: #202020;
		opacity: .6;
	}

	/* The theme's magnifier button, centred in the shorter field. */
	.content-wrapper > .widget_product_search.rolman-search-row button[type="submit"] {
		top: 50%;
		right: 12px;
		width: 20px;
		height: 20px;
		background-size: contain;
		transform: translateY(-50%);
	}

	.content-wrapper .rolman-cats-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		flex: 0 0 auto;
		height: 51px;
		padding: 0 15px;
		border: 1px solid #c7c7c7;
		border-radius: 0;
		background: #fff;
		color: #202020;
		font-size: 16px;
		font-weight: 400;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	}

	.content-wrapper .rolman-cats-toggle::after {
		content: "\f107";                       /* chevron, as on the theme dropdowns */
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 18px;
		color: #928f8f;
		transition: transform .15s ease;
	}

	.content-wrapper .rolman-cats-toggle:hover,
	.content-wrapper .rolman-cats-toggle:focus {
		color: #202020;
		outline: none;
	}

	.content-wrapper.rolman-cats-open .rolman-cats-toggle {
		background: #000;
		border-color: #000;
		color: #fdb900;
	}

	.content-wrapper.rolman-cats-open .rolman-cats-toggle::after {
		color: #fdb900;
		transform: rotate(180deg);
	}

	/* Closed: the long category list no longer sits under all the products. */
	.content-wrapper:not(.rolman-cats-open) > .rolman-cats-toggle ~ .shop-sidebar,
	.content-wrapper:not(.rolman-cats-open) > .rolman-search-row ~ .shop-sidebar {
		display: none;
	}

	/* Open: directly under the search row, above the sort row and products. */
	.content-wrapper.rolman-cats-open > .rolman-search-row ~ .shop-sidebar,
	.content-wrapper.rolman-cats-open > .rolman-cats-toggle ~ .shop-sidebar {
		order: 1;
		margin-top: 0;
		padding-top: 0;
	}

	.content-wrapper > .rolman-cats-toggle ~ .main-content,
	.content-wrapper > .rolman-search-row ~ .main-content {
		order: 2;
	}

	/* Tablets: app.css keeps `.content-wrapper` on one unwrapped line
	   (flex-flow reset), so stack the row, the list and the products. */
	.content-wrapper.rolman-has-cats-row {
		flex-wrap: wrap;
	}

	.content-wrapper.rolman-has-cats-row > .rolman-search-row,
	.content-wrapper.rolman-has-cats-row > .shop-sidebar {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Phones: the sort / grid-list row below sits on a 35px gutter (section 6);
   line the search row up with it. */
@media (max-width: 767px) {
	.content-wrapper > .widget_product_search.rolman-search-row {
		padding: 0 35px;
	}

	/* Same as the phone sort dropdown: 38px, 13px text, 10px inset. */
	.content-wrapper > .widget_product_search.rolman-search-row .search-field {
		height: 38px;
		padding: 0 34px 0 10px;
	}

	.content-wrapper > .widget_product_search.rolman-search-row .search-field::placeholder {
		font-size: 13px;
	}

	.content-wrapper > .widget_product_search.rolman-search-row button[type="submit"] {
		right: 10px;
		width: 17px;
		height: 17px;
	}

	.content-wrapper .rolman-cats-toggle {
		height: 38px;
		padding: 0 10px;
		font-size: 13px;
	}

	.content-wrapper .rolman-cats-toggle::after {
		font-size: 16px;
	}

	/* Grid / list buttons: 38px squares like the sort dropdown beside them
	   (app.css padding `18px 14px 16px` made them 52px tall). */
	.filter-options .gridlist-toggle a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		vertical-align: top;
	}

	/* Start the row on the same 35px edge as the search row (app.css adds
	   15px), and let the sort form take its field's full 38px so both sit
	   on one line. */
	.filter-options .gridlist-toggle {
		padding-left: 0;
	}

	/* The form measured 34px, so the 38px field overflowed it and the row's
	   overflow:hidden (app.css .filter-flex) cut off its bottom border. */
	.filter-options .woocommerce-ordering {
		min-height: 38px;
	}

	.filter-options .woocommerce-ordering .select2-container {
		display: block;
	}
}

/* Less scrolling on phones. Theme small breakpoint (app.css, 39.9375em).
   - Product and category cards: two per row instead of one (shop pages and
     the homepage Categories / Featured Offers blocks). List view untouched.
   - Brand logos: the theme's block grid is `large-up-5 medium-up-2` with no
     small size, so phones got one logo per row. Three per row, the same way
     Foundation's `small-up-3` sizes a block grid column. */
@media screen and (max-width: 39.9375em) {
	.woocommerce ul.products:not(.list) li.product,
	.woocommerce ul.products li.product-category {
		width: calc(50% - 20px) !important;
		margin: 0 10px 20px !important;
	}

	.woocommerce ul.products:not(.list) li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
		font-size: 15px;
		line-height: 1.3;
	}

	.woocommerce ul.products:not(.list) li.product .rolman-new-badge {
		top: 6px;
		left: 6px;
		padding: 3px 7px;
		font-size: 10px;
	}

	.wd-clients-grid ul > li.column {
		width: 33.33333%;
		flex: 0 0 33.33333%;
	}
}

/* Dropdown arrows.
   - Homepage search (theme `.brands_form`, select2): select2.css sizes the
     arrow box for a 28px field (`top:1px; height:26px`). The theme's field is
     57px tall and centres its chevron (app.css `...__arrow b::after`) inside
     that 26px box, so the chevron sat near the top. Let the box fill the
     field height so the theme's own centring works.
   - Sort dropdown: the 360 viewer plugin's reset (threesixty.min.css
     `* { padding: 0 }`, loaded on every page) removed the left padding, so
     the text touched the border. The arrow is anchored to the padding box so
     it always sits inside the field, vertically centred. */
.brands_form form ul li .select2 .select2-selection .select2-selection__arrow {
	top: 0;
	height: 100%;
}

.woocommerce .woocommerce-ordering select {
	padding-left: 15px;
	background-origin: padding-box;
	background-position: right 12px center;
}

/* Sort dropdown as select2 (js section 2h): same look as the theme's
   homepage search dropdowns (`.brands_form` rules in app.css), sized to the
   theme's sort field (51px; 38px in the mobile filter row). */
.woocommerce .filter-options {
	position: relative;   /* the open menu is placed in this row */
}

.woocommerce .woocommerce-ordering .select2-container {
	min-width: 210px;
}

/* app.css pads every WooCommerce select2 field for checkout forms
   (`.woocommerce .select2-container--default .select2-selection--single`). */
.woocommerce .woocommerce-ordering .select2-container .select2-selection--single {
	padding: 0;
	height: 51px;
	border: 1px solid #c7c7c7;
	border-radius: 0;
	background: #fff;
}

.woocommerce .woocommerce-ordering .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 15px;
	line-height: 49px;
	color: inherit;
}

.woocommerce .woocommerce-ordering .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 0;
	width: 40px;
	height: 100%;
}

.woocommerce .woocommerce-ordering .select2-container .select2-selection--single .select2-selection__arrow b {
	border: none;
}

.woocommerce .woocommerce-ordering .select2-container .select2-selection--single .select2-selection__arrow b::after {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 18px;
	color: #928f8f;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.woocommerce .filter-options .select2-dropdown {
	border: 1px solid #c7c7c7;
	border-radius: 0;
	z-index: 50;
}

@media (max-width: 767px) {
	.filter-options .woocommerce-ordering .select2-container {
		min-width: 0;
	}

	.filter-options .woocommerce-ordering .select2-container .select2-selection--single {
		height: 38px;
	}

	.filter-options .woocommerce-ordering .select2-container .select2-selection--single .select2-selection__rendered {
		padding: 0 32px 0 10px;
		line-height: 36px;
		font-size: 13px;
	}
}

/* Placeholder for images missing on the server (js section 2f). */
img.rolman-img-missing {
	object-fit: cover;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	height: auto;
	background: #f1f1f1;
}

/* Stack on phones — a 300px image column leaves no room for the text. */
@media (max-width: 767px) {
	.woocommerce ul.products.list li.product {
		flex-direction: column !important;
		align-items: stretch;
	}

	.woocommerce ul.products.list li.product .product-image-wrapper {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	.woocommerce ul.products.list li.product .product-details-wrapper {
		padding: 12px 0 0 !important;
	}
}

/* --------------------------------------------------------------------------
   10. AJAX CATEGORY BROWSING
   Subtle busy state while the product grid is swapped in place, so the click
   registers without the white flash of a full page load.
   -------------------------------------------------------------------------- */
.main-content {
	transition: opacity .12s ease;
}

.main-content.rolman-loading {
	opacity: .55;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.main-content {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   11. WPBAKERY "STRETCH ROW" — full width from the first paint
   WPBakery stretches these rows with JavaScript (js_composer_front.js,
   vc_rowBehaviour) that runs in the footer, after the page is drawn. Until it
   runs, the row renders at column width with white strips either side, then
   snaps to full width — the homepage banner "flash" (measured ~1s on an
   uncached load).

   These rules apply WPBakery's own geometry in CSS, and only while the row is
   still `data-vc-full-width-init="false"`. WPBakery's script then sets the
   same values inline and flips the attribute, so the hand-over does not move
   anything. Its formula, from vc_rowBehaviour:
     left    = -(column left edge) - margin-left
     width   = window width
     padding = puts the content back on the column (skipped for
               "stretch row and content" rows, which carry
               data-vc-stretch-content)
   The 15px is WPBakery's row gutter (`.vc_row { margin: 0 -15px }` in
   js_composer.min.css). Left-to-right only; WPBakery mirrors the maths for RTL.
   -------------------------------------------------------------------------- */
html:not([dir="rtl"]) .vc_row[data-vc-full-width="true"][data-vc-full-width-init="false"] {
	position: relative;
	left: calc(50% - 50vw + 15px);
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
}

html:not([dir="rtl"]) .vc_row[data-vc-full-width="true"][data-vc-full-width-init="false"]:not([data-vc-stretch-content]) {
	padding-left: max(0px, calc(50vw - 50% - 15px));
	padding-right: max(0px, calc(50vw - 50% - 15px));
}

/* Product card titles: left-aligned for a consistent edge with the
   "Read more" button. app.css centres them in grid view (same selector);
   long titles that fill the line looked left-aligned next to short centred
   ones. */
.woocommerce ul.products.grid li.product:not(.product-category) .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	text-align: left;
}

/* Grid cards: app.css lets the image box grow to fill the card
   (`.product-image-wrapper { flex: 1 1 0% }`). Cards in a row share one
   height, so cards with shorter titles got a taller image box: its 1px
   bottom line dropped below the photo and the title sat lower. Keep the
   image box at the photo's height and give the spare height to the details
   instead, with "Read more" kept at the bottom so buttons still line up. */
.woocommerce ul.products.grid li.product:not(.product-category) .product-image-wrapper {
	flex: 0 0 auto;
}

.woocommerce ul.products.grid li.product:not(.product-category) .product-details-wrapper {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.woocommerce ul.products.grid li.product:not(.product-category) .product-details-wrapper > .woocommerce-loop-product__title {
	align-self: stretch;
}

.woocommerce ul.products.grid li.product:not(.product-category) .product-details-wrapper > .button {
	margin-top: auto;
}