/* =============================================================
   common.css  -  Minisites shared component styles
   Loaded on all sites BEFORE the site-specific CSS file.
   Site CSS (gadgets.css / wetyourwhistle.css) supplies all
   colours, backgrounds, gradients and brand-specific overrides.
   =============================================================

   SECTIONS:
     1.  Typography reset
     2.  Layout containers
     3.  Breadcrumbs
     4.  Primary navigation
     5.  Search bar  (desktop + collapsible mobile)
     6.  Category pills (.cats)
     7.  Pager / picker / sort-picker
     8.  Filter bar  (.ms-filters / .ms-filter)
     9.  Price slider
    10.  Product gallery (.ms-product-gallery)
    11.  Lightbox  (.ms-lightbox)
    12.  Pager row
    13.  Admin utilities
    14.  Offers table (shared structure)
    15.  FAQ  (.faq-grid / .faq-item)
    16.  Miscellaneous shared utilities
    17.  Account widget & header actions
   ============================================================= */


/* ============================================================
   1.  Typography reset
   ============================================================ */

/* Prevent layout shift when modal/overlay opens and scrollbar disappears */
html {
	scrollbar-gutter: stable;
}

h1 {
	margin: 0;
}


/* ============================================================
   2.  Layout containers
   ============================================================ */

/* Convenience class used on static/admin pages */
.admin-page-with-margin {
	margin-left: 20px;
}


/* ============================================================
   3.  Breadcrumbs
   Site CSS supplies: max-width padding, font-size, colour.
   ============================================================ */

.breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

.breadcrumb__item {
	display: inline-flex;
	align-items: center;
}

/* Separator - appended after each item except the last */
.breadcrumb__item:not(:last-child)::after {
	content: ">";
	margin-left: 0.35rem;
	opacity: 0.6;
}


/* ============================================================
   4.  Primary navigation
   Site CSS supplies: padding, link colours/backgrounds/borders.
   ============================================================ */

.primary-nav__list,
.primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.primary-nav__list li,
.primary-nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav__link,
.primary-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.14s ease, transform 0.14s ease,
	            box-shadow 0.14s ease, border-color 0.14s ease;
}

.primary-nav__link:hover,
.primary-nav a:hover {
	transform: translateY(-1px);
}


/* ============================================================
   5.  Search bar
   Site CSS supplies: max-width, margin, padding, flex direction,
   input/button colours, border colours.
   ============================================================ */

.search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.search input[type="search"] {
	flex: 1 1 auto;
	padding: 0.55rem 0.9rem;
	border-radius: 999px;
	font-size: 0.9rem;
	outline: none;
}

/* Search toggle button - hidden on desktop, shown on mobile */
.search__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	cursor: pointer;
	font-size: 1.1rem;
	transition: background 0.15s ease, border-color 0.15s ease;
}

/* Search form wrapper */
.search__form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

/* --- Mobile: collapsible search --- */
@media (max-width: 640px) {

	/* Show the toggle button */
	.search__toggle {
		display: inline-flex;
	}

	/* Hide the form by default */
	.search__form {
		display: none;
		position: absolute;
		top: 2.5rem;
		right: 0;
		width: 280px;
		max-width: calc(100vw - 2rem);
		padding: 0.75rem;
		border-radius: 1rem;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
		z-index: 100;
	}

	/* Expanded state */
	.search.is-open .search__form {
		display: flex;
	}

	.search.is-open input[type="search"] {
		flex: 1;
		min-width: 0;
	}
}


/* ============================================================
   6.  Category pills (.cats)
   Site CSS supplies: margin, padding, pill colours/borders.
   ============================================================ */

.cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.cats .pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	height: 2.0rem;
	min-height: 2.0rem;
	padding: 0 1.0rem;
	border-radius: 999px;
	text-decoration: none;
	transition:
		background-color 0.16s ease,
		border-color 0.16s ease,
		color 0.16s ease,
		box-shadow 0.16s ease,
		transform 0.16s ease;
}

.cats .pill:hover {
	transform: translateY(-1px);
}


/* ============================================================
   7.  Pager / picker / sort-picker
   Site CSS supplies: colours, backgrounds, borders.
   ============================================================ */

.pager_container {
	max-width: 1120px;
	margin: 0.75rem auto;
	padding: 0 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.pager,
.picker,
.sort-picker {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	height: 2.0rem;
	min-height: 2.0rem;
	padding: 0 0.9rem;
	border-radius: 999px;
	font-size: 0.85rem;
}

.pager .muted {
	opacity: 0.55;
}

.pager span {
	white-space: nowrap;
}

/* Prev / Next link */
.pager a.btn-link,
a.pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.5rem;
	min-height: 1.5rem;
	line-height: 1;
	padding: 0 0.9rem;
	border-radius: 999px;
	text-decoration: none;
	transition:
		background-color 0.16s ease,
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		transform 0.16s ease;
}

.pager a.btn-link:hover,
a.pager__link:hover {
	transform: translateY(-1px);
}

.picker form {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.picker label {
	display: inline-flex;
	align-items: center;
}

.picker select {
	height: 1.3rem;
	padding: 0 0.6rem;
	border-radius: 999px;
	font-size: 0.8rem;
	cursor: pointer;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	line-height: 1.0rem;
}

.picker {
	position: relative;
}

.picker::after {
	content: "\25BE";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 0.75rem;
}

/* Pager row: picker + pager on one line */
.pager-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0.5rem 0;
}

.picker,
.sort-picker {
	flex: 0 0 auto;
}

.pager {
	flex: 0 0 auto;
	margin: 0;
}

.pager-row--bottom {
	justify-content: center;
	margin-top: 1rem;
}

@media (max-width: 640px) {
	.pager-row {
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.pager,
	.picker,
	.sort-picker {
		font-size: 0.7rem;
	}
}

/* Ensure pager, filters and grid each occupy a full row inside flex parents */
.pager_container,
.ms-filters,
.wyw-grid {
	flex: 0 0 100%;
}

/* Sort-picker dropdown panel (structural; colours in site CSS) */
.sort-picker {
	position: relative;
}

.sort-picker__btn {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0;
	cursor: pointer;
	border: none;
	background: transparent;
	font-size: inherit;
	font-family: inherit;
	white-space: nowrap;
	color: inherit;
}

.sort-picker__label {
	display: none;
}

@media (min-width: 600px) {
	.sort-picker__label {
		display: inline;
	}
}

.sort-picker__panel {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	min-width: 175px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5em;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	z-index: 200;
}

.sort-picker__panel.is-open {
	display: block;
}

.sort-opt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5em 0.9em;
	color: inherit;
	text-decoration: none;
	font-size: 0.85rem;
	font-family: inherit;
	white-space: nowrap;
}

.sort-opt:hover {
	background: #f4f4f4;
}

.sort-opt--active::after {
	content: '\2713';
	margin-left: 0.75em;
	color: #0077cc;
}

/* Hide pager result range on small screens */
@media (max-width: 600px) {
	.pager__summary {
		display: none;
	}
}


/* ============================================================
   8.  Filter bar  (.ms-filters / .ms-filter)
   Site CSS supplies: pill background/border colours,
   submit button gradient colours.
   ============================================================ */

.ms-filters {
	max-width: 1120px;
	margin: 0.75rem auto;
	padding: 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

/* Shared height for label pseudo-element, filter pills and submit button */
.ms-filters::before,
.ms-filter,
.ms-filters button[type="submit"] {
	height: 2.0rem;
	min-height: 2.0rem;
}

/* "Filters" label pill */
.ms-filters::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.85rem;
	border-radius: 999px;
	background-color: #111827;
	color: #f9fafb;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* Inner form row */
.ms-filters form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

/* Individual filter pill */
.ms-filter {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	font-size: 0.9rem;
	box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
}

.ms-filter label {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
}

.ms-filter input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
	accent-color: #ff7f00;
}

.ms-filter input[type="text"],
.ms-filter input[type="number"] {
	width: 4.0rem;
	height: 1.3rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	border: 1px solid #d1d5db;
	font-size: 0.9rem;
	outline: none;
	line-height: 1;
}

.ms-filter input[type="text"]:focus,
.ms-filter input[type="number"]:focus {
	border-color: #f97316;
	box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.45);
}

/* Submit button */
.ms-filters button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.0rem;
	padding: 0 1.0rem;
	line-height: 1;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	font-size: 0.9rem;
	white-space: nowrap;
	transition:
		transform 0.12s ease,
		box-shadow 0.12s ease,
		filter 0.12s ease;
}

.ms-filters button[type="submit"]:hover {
	transform: translateY(-1px);
	filter: brightness(1.03);
}

@media (max-width: 640px) {
	.ms-filters {
		padding: 0 1.0rem;
		gap: 0.3rem;
		margin: 0.5rem auto;
		justify-content: center;
	}

	.ms-filters::before {
		height: 1.5rem;
		min-height: 1.5rem;
		padding: 0 0.6rem;
		font-size: 0.65rem;
	}

	.ms-filter {
		height: 1.5rem;
		min-height: 1.5rem;
		padding: 0 0.5rem;
		font-size: 0.7rem;
		gap: 0.2rem;
	}

	.ms-filter input[type="text"],
	.ms-filter input[type="number"] {
		width: 3rem;
		height: 1.1rem;
		font-size: 0.7rem;
	}

	.ms-filters button[type="submit"] {
		height: 1.5rem;
		min-height: 1.5rem;
		padding: 0 0.7rem;
		font-size: 0.7rem;
	}

	.ms-filters form,
	.ms-filters__form {
		justify-content: center;
		width: 100%;
	}
}


/* ============================================================
   9.  Price slider
   Site CSS supplies: range/thumb accent colours.
   ============================================================ */

.ms-filter__label {
	margin-right: 5px;
}

.ms-filter__price {
	min-width: 280px;
	height: auto !important;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	overflow: visible !important;
}

.ms-price-slider {
	position: relative;
	flex: 1;
	padding: 0;
	box-sizing: border-box;
}

.ms-price-slider__track {
	position: relative;
	height: 4px;
	background: #ccc;
	border-radius: 2px;
	margin: 0 45px 0 25px;
}

.ms-price-slider__range {
	position: absolute;
	height: 4px;
	border-radius: 2px;
	pointer-events: none;
}

.ms-price-slider__thumb {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #ccc;   /* colour overridden per-site */
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
    z-index: 2;
}

.ms-price-slider__thumb:focus {
	outline-offset: 2px;
}

.ms-price-slider__thumb:active {
	cursor: grabbing;
}

.ms-price-slider__lo-lbl,
.ms-price-slider__hi-lbl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.85rem;
	white-space: nowrap;
}

.ms-price-slider__lo-lbl {
	left: -10px;
}

.ms-price-slider__hi-lbl {
	right: -10px;
	left: auto;
}


/* ============================================================
   10. Product gallery  (.ms-product-gallery)
   Site CSS supplies: border colours, active-thumb highlight colour.
   ============================================================ */

.ms-product-gallery {
	display: flex;
	max-width: 100%;
	flex-direction: column;
	align-items: center;
}

.ms-product-gallery__main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 1rem;
	overflow: hidden;
	cursor: zoom-in;
	padding: 0;
	/* width and height are set by site CSS to match each site's design */
}

/* Lifestyle images: natural aspect ratio, full width, no letterboxing */
.ms-product-gallery__main-img--lifestyle {
	object-fit: fill;
	height: auto;
	max-height: none;
}

/* .ms-product-gallery__main-img is absent from common.css intentionally.
   The container's border-radius + overflow:hidden clips image corners cleanly.
   Adding border-radius to the image itself causes white-corner artifacts.
   WYW (fixed 360x360) and Gadgets (fluid) need different sizing - each site
   CSS owns width/height/object-fit for the main image. */

.ms-product-gallery__thumbs {
	margin-top: 0.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ms-product-gallery__thumb {
	border-radius: 0.75rem;
	background: #ffffff;
	padding: 0.25rem;
	cursor: pointer;
	width: 66px;
	height: 66px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.08s ease;
}

.ms-product-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0.5rem;
}

.ms-product-gallery__thumb img.ms-gallery-thumb-img--lifestyle {
	object-fit: contain;
	position: relative;
	z-index: 1;
}

.ms-product-gallery__thumb.ms-thumb--lifestyle {
	position: relative;
}

.ms-product-gallery__thumb.ms-thumb--lifestyle::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	filter: blur(4px);
	transform: scale(1.1);
}

@media (max-width: 640px) {
	.ms-product-gallery__thumb {
		width: 58px;
		height: 58px;
	}
}


/* ============================================================
   11. Lightbox  (.ms-lightbox)
   Site CSS supplies: backdrop opacity, dialog/close/nav colours.
   ============================================================ */

.ms-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: none;
	align-items: center;
	justify-content: center;
}

.ms-lightbox.is-open {
	display: flex;
}

.ms-lightbox__backdrop {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.ms-lightbox__dialog {
	position: relative;
	z-index: 1;
	border-radius: 1.25rem;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
	padding: 3rem 1rem 0.75rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	box-sizing: border-box;
}

.ms-lightbox__dialog.is-large {
	width: 96vw;
	max-width: 96vw;
	height: 94vh;
	max-height: 94vh;
}

.ms-lightbox__dialog.is-small {
	width: auto;
	max-width: 90vw;
	height: auto;
	max-height: 90vh;
}

.ms-lightbox__dialog.is-small .ms-lightbox__stage {
	flex: 0 0 auto;
	max-width: 80vw;
	max-height: 80vh;
}

.ms-lightbox__dialog.is-small .ms-lightbox__img {
	max-width: 80vw;
	max-height: 80vh;
}

.ms-lightbox__stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 0;
	position: relative;
	z-index: 1;
}

.ms-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0.75rem;
	opacity: 1;
	filter: none;
	mix-blend-mode: normal;
}

.ms-lightbox__close {
	position: absolute;
	top: 0.6rem;
	right: 0.75rem;
	z-index: 5;
	border-radius: 999px;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ms-lightbox__nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9001;
	border-radius: 999px;
	width: 2.5rem;
	height: 2.5rem;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.3rem;
	line-height: 1;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ms-lightbox.is-open .ms-lightbox__nav {
	display: inline-flex;
}

.ms-lightbox__nav--prev {
	left: 0.75rem;
}

.ms-lightbox__nav--next {
	right: 0.75rem;
}

.ms-lightbox__meta {
	flex: 0 0 auto;
	padding: 0.4rem 0.5rem;
	font-size: 0.82rem;
	text-align: center;
	min-height: 2rem;
}

.ms-lightbox__caption {
	font-weight: 600;
	margin-bottom: 0.1rem;
}

.ms-lightbox__copyright {
	font-size: 0.75rem;
	opacity: 0.8;
}

@media (max-width: 640px) {
	.ms-lightbox__dialog,
	.ms-lightbox__dialog.is-small,
	.ms-lightbox__dialog.is-large {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
		padding: 3rem 0.5rem 0.5rem 0.5rem;
	}

	.ms-lightbox__dialog.is-small .ms-lightbox__stage,
	.ms-lightbox__dialog.is-small .ms-lightbox__img {
		max-width: 100vw;
		max-height: 85vh;
	}

	.ms-lightbox__nav {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.1rem;
	}

	.ms-lightbox__nav--prev { left: 0.3rem; }
	.ms-lightbox__nav--next { right: 0.3rem; }

	.ms-lightbox__meta {
		padding: 0.35rem 0.5rem;
		font-size: 0.78rem;
	}
}


/* ============================================================
   13. Offers table (shared structure)
   Site CSS supplies: colours, backgrounds, hover row colours.
   ============================================================ */

/* Scroll container so offers table never breaks page width on narrow viewports */
.offers-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1.5rem;
}

table.offers {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-top: 0;          /* margin now on wrapper */
}

table.offers th,
table.offers td {
	padding: 0.75rem 0.85rem;
	text-align: left;
	vertical-align: middle;
}

table.offers th {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 1px solid;
}

table.offers thead th.condition {
	text-align: center;
}

table.offers td.delivery,
table.offers td.condition {
	text-align: center;
}

/* Shorter button text on mobile (shared across both sites) */
.btn__short { display: none; }

/* Shorter button text on mobile (shared across both sites) */
@media (max-width: 720px) {
	table.offers th,
	table.offers td {
		padding: 0.6rem 0.45rem;
	}

	/* Hide availability, delivery and condition columns on mobile -
	   OOS state is already conveyed by the btn--oos style on the button */
	table.offers th.availability,
	table.offers td.avail,
	table.offers th.condition,
	table.offers td.condition {
		display: none;
	}

	table.offers td.go .btn__long {
		display: none;
	}

	table.offers td.go .btn__short {
		display: inline;
	}

	.merchant__seller {
		display: none;
	}
}

/* ============================================================
   14. FAQ  (.faq-grid / .faq-item)
   Site CSS supplies: item background, border, text colours.
   ============================================================ */

.faq-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
	margin-top: 12px;
}

@media (min-width: 700px) {
	.faq-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.faq-item {
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
	break-inside: avoid;
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0.9rem 1rem;
	cursor: pointer;
	list-style: none;
	font-size: 1rem;
	line-height: 1.45;
	gap: 0.75rem;
}

.faq-item__question::-webkit-details-marker {
	display: none;
}

.faq-item__question::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

.faq-item[open] .faq-item__question::after {
	content: "-";
}

.faq-item__answer {
	text-align: left; 
	padding: 0.85rem 0.85rem 0.9rem 0.85rem;
	font-size: 0.90rem;
	line-height: 1.7;
	border-top: 1px solid;
}

.faq-item__answer p:last-child {
	margin-bottom: 0;
}

/* FAQ block wrapper (used by FAQs.pm render_faq_block) */
.faq-block {
	margin: 2em 0;
}

.faq-block__heading {
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 0 0.6em;
}

/* Collapsible group block (product pages: "More questions about X") */
/* Collapsible group block (product pages: "More questions about X") */
.faq-group-block {
    margin-top: 1.25em;
}

.faq-group-block__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.45em 0.9em;
    font-size: 0.875em;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid;          /* colour supplied by site CSS */
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    line-height: 1.4;
}

.faq-group-block__toggle::before {
    content: "+ ";
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1;
}

.faq-group-block__toggle[aria-expanded="true"]::before {
    content: "- ";
}

.faq-group-block__inner {
    display: none;
    margin-top: 0.75em;
}

.faq-group-block__inner.is-open {
    display: block;
}

/* FAQ index page: named group sections (faqs.cgi main index) */
.faq-group {
	margin-top: 28px;
}

.faq-group h2 {
	margin-bottom: 8px;
}

/* Single FAQ full page (faqs.cgi ?faq= route) */
.faq-single {
	max-width: 720px;
}

.faq-single h1 {
	font-size: 1.3em;
	margin-top: 0;
}


/* ============================================================
   15. Miscellaneous shared utilities
   ============================================================ */

/* Visually hidden (accessibility) */
.wyw-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Breadcrumb + navigation arrows row */
.bc-nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bc-nav-row__left {
	min-width: 0;
}

.bc-nav-row__right {
	flex: 0 0 auto;
}

/* eBay excellent feedback colour */
.ebay-feedback-excellent {
	color: #0a8f08;
	font-weight: 500;
}


/* ============================================================
   18. Account widget & header actions
   Site CSS supplies: background colours, box-shadow colours.
   ============================================================ */

/* Account widget circle button */
.ms-account-widget {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	text-decoration: none;
	transition: background 0.15s, transform 0.12s;
}

.ms-account-widget--in {
	background: rgba(255,255,255,0.88);
	box-shadow: 0 1px 4px rgba(0,0,0,0.18);
	color: #333;
}

.ms-account-widget--in:hover {
	background: #fff;
	transform: scale(1.08);
}

.ms-account-avatar {
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #333;
	pointer-events: none;
	user-select: none;
}

.ms-account-widget--out {
	background: rgba(255,255,255,0.72);
	box-shadow: 0 1px 4px rgba(0,0,0,0.13);
	color: #555;
}

.ms-account-widget--out:hover {
	background: #fff;
	transform: scale(1.08);
	color: #333;
}

.ms-account-icon {
	display: block;
	pointer-events: none;
}

/* Wrapper for sites where {{ACCOUNT_WIDGET}}{{SEARCH_BOX}} are bare
   siblings in the header. The DB template wraps them in
   <div class="ms-header-actions"> - see site_layouts table. */
.ms-header-actions,
.wyw-header-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* .search is a full-width block in site stylesheets; override it
   inside header action containers so it sits inline with the widget. */
.ms-header-actions .search,
.wyw-header-meta .search {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

/* Mobile: keep account widget + search on one row.
   WYW stylesheet has two conflicting @media (max-width:640px) blocks;
   the second absolutely-positions .search inside .wyw-header-top which
   yanks it out of the flex container. We undo that here. */
@media (max-width: 768px) {
	/* Keep the widget+search container on one non-wrapping row */
	.ms-header-actions,
	.wyw-header-meta {
		flex-wrap: nowrap;
		flex-shrink: 0;
		gap: 6px;
	}

	/* WYW switches .wyw-header-top to flex-direction:column on mobile.
	   Override to keep logo and meta on one row. */
	.wyw-header-top {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
		padding-right: 1rem !important;
	}

	/* Undo absolute positioning of .search so it stays in flex flow */
	.wyw-header-meta .search {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		transform: none !important;
		margin: 0 !important;
		flex-shrink: 0;
		width: auto !important;
		max-width: none !important;
		padding: 0 !important;
	}

	/* Account widget must not shrink */
	.ms-account-widget {
		flex-shrink: 0;
	}

	/* Ensure expanded search dropdown clears the category nav below */
	.wyw-header-meta .search__form,
	.ms-header-actions .search__form {
		z-index: 200 !important;
	}

	/* .wyw-header needs a stacking context so its dropdown sits
	   above .wyw-main-nav which follows in normal flow */
	.wyw-header {
		z-index: 50;
		overflow: visible !important;
	}
}
.filter-notice {
    text-align: center;
    font-size: 0.9em;
    padding: 0.75em 1em;
}
.filter-notice a { text-decoration: underline; }

/* New search results include other media */
.content-results { margin-top: 2rem; }
.content-results__heading { font-size: 1.1rem; margin-bottom: 1rem; }
.content-results__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .content-results__grid { grid-template-columns: 1fr 1fr; } }

.content-result { border: 1px solid #e0e0e0; border-radius: 6px; padding: 1rem; }
.content-result__type { display: inline-block; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-bottom: 0.4rem; }
.content-result__type--guide  { background: #e8f4e8; color: #2a6b2a; }
.content-result__type--review { background: #e8eef8; color: #2a4a8a; }
.content-result__type--faq    { background: #f8f0e8; color: #8a5a2a; }
.content-result__title { font-size: 1rem; margin: 0.25rem 0; }
.content-result__snippet { font-size: 0.9rem; color: #555; margin: 0.25rem 0; }
.content-result__meta { font-size: 0.8rem; color: #888; margin: 0.25rem 0 0; }