/* =========================================================================
   iSupply Displays — single product

   Loaded only on product screens, after style.css (and therefore after
   kadence-global and Kadence's Customizer CSS), so plain selectors here beat
   theme defaults. The few !important marks are annotated with the rule they
   are fighting.

   The screen runs edge to edge: ISD_Single::full_width_layout() asks Kadence
   for `fullwidth` + `unboxed` + no vertical padding, which removes the 1290px
   container, the white card and the wrapper margins. Width is therefore owned
   here, and owned fluidly — a fixed inner maximum would just be the same
   visible container at a different number.
   ====================================================================== */

/*
 * Tokens are scoped to the body, not to .isd-single, because two things that
 * need them sit outside that element: Kadence's breadcrumb, which is printed
 * on woocommerce_before_single_product and so lands before .product, and the
 * full screen viewer, which isd-single.js appends to <body>. Scoped to
 * .isd-single both would resolve every var() to nothing.
 */
body.single-product {
	--isd-navy: #0a315f;
	--isd-gold: #f5a524;
	--isd-gold-deep: #e8930a;
	--isd-band: #ececec;
	--isd-ink: #1a2a4a;
	--isd-muted: #5c6b81;
	--isd-line: #e2e6ec;
	--isd-tile: #f4f5f7;

	--isd-gutter: clamp(20px, 3vw, 64px);
	--isd-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--isd-prose: 78ch;

	--isd-sticky-top: 24px;
	--isd-rail-w: 112px;

	/*
	 * The spotlight is square, so its height is its width. Capping both to the
	 * usable viewport height is what lets the media column be sticky without
	 * any part of it becoming unreachable, and it is why the stage no longer
	 * stretches to whatever the column happens to be.
	 */
	--isd-stage-max: calc(100vh - (var(--isd-sticky-top) * 2) - 40px);
}

@media (max-width: 1024px) {
	body.single-product {
		/* Stacked layout: nothing is sticky, so the square can simply fill
		   the column. */
		--isd-stage-max: none;
		--isd-rail-w: 88px;
	}
}

/* -------------------------------------------------------------------------
   Bands
   Fluid: full bleed with responsive edge padding, no shared max-width.
   ---------------------------------------------------------------------- */

.isd-band,
.isd-section__inner {
	padding-inline: var(--isd-gutter);
}

/*
 * Kadence prints the product breadcrumb from output_product_above(), hooked to
 * woocommerce_before_single_product — which this template fires, so it lands
 * as a sibling before .product rather than inside it. With the container gone
 * it would sit hard against the viewport edge without this.
 */
body.single-product .product-title.product-above {
	padding: 28px var(--isd-gutter) 0;
}

.isd-single__crumbs {
	padding-top: 28px;
}

.isd-single__crumbs:empty {
	display: none;
}

/* -------------------------------------------------------------------------
   Two column body
   ---------------------------------------------------------------------- */

.isd-single__top {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: clamp(32px, 3.5vw, 64px);
	align-items: start;
	padding-block: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px);
}

@media (max-width: 1024px) {
	.isd-single__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

.isd-single__media {
	position: relative;
	min-width: 0;
	/* The column keeps its full height so the inner block has something to
	   stick against; align-items: start would otherwise collapse it. */
	align-self: stretch;
}

.isd-single__summary {
	min-width: 0;
}

/*
 * The gallery holds its place while the summary and the accordion scroll past.
 * The site header is not sticky, so a small offset is all that is needed.
 *
 * Applied only once isd-single.js has measured that the media fits the
 * viewport: a sticky element taller than the viewport pins its top and puts
 * everything below the fold permanently out of reach. The stage is capped to
 * the viewport below, so in practice it always fits — this is the belt to that
 * pair of braces.
 */
@media (min-width: 1025px) {
	.isd-single__top.is-media-sticky .isd-single__media-inner {
		position: sticky;
		top: var(--isd-sticky-top);
	}
}

/* -------------------------------------------------------------------------
   Kadence WooCommerce reset

   The gallery deliberately carries WooCommerce's own class names — `images`,
   `flex-control-nav` / `flex-control-thumbs`, `woocommerce-product-gallery*`,
   `wp-post-image` — because that is how the variation script finds and swaps
   the product image. See ISD_Gallery for the contract.

   Those are also precisely the names Kadence's 141kb woocommerce.min.css
   styles for the native two-column, flexslider gallery, at specificities this
   sheet cannot beat with plain class selectors. Every rule below neutralises
   one named Kadence rule; the selectors are built to out-specify it rather
   than reaching for !important. Each is annotated with what it is undoing and
   what that rule did to this layout.

   If Kadence's stylesheet changes, re-derive this list rather than adding to
   it blindly: scan woocommerce.min.css for rules whose rightmost compound is
   one of the class names above.
   ---------------------------------------------------------------------- */

/*
 * `.woocommerce div.product div.images { float:left; width:48% }`
 * — the gallery is a grid item here, so 48% simply made the spotlight a bit
 * under half the width it should be. This was the small image.
 * Also `{ margin-bottom:1em; padding-bottom:1em }`.
 */
.woocommerce div.product div.images.isd-gallery {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*
 * `.woocommerce div.product div.images img { height:auto; margin:0 auto }`
 * — forced the spotlight image to its intrinsic height, so it never filled
 * the square stage.
 */
.woocommerce div.product div.images.isd-gallery .isd-gallery__image {
	height: 100%;
	margin: 0;
}

/*
 * `... .woocommerce-product-gallery__wrapper { transition: all … .5s }` plus a
 * clearfix `::after`. The transition on `all` animated our own layout changes;
 * the clearfix added a stray table box inside the stage.
 */
.woocommerce div.product div.images.isd-gallery .isd-gallery__viewport {
	height: 100%;
	transition: none;
}

.woocommerce div.product div.images.isd-gallery .isd-gallery__viewport::after {
	content: none;
}

/*
 * `... .flex-control-thumbs { display:inline-flex; flex-wrap:wrap; width:100%;
 * max-width:94%; position:relative; left:50%; transform:translate(-50%,0);
 * margin-top:-32px; overflow:hidden; justify-content:center }`
 * — this is the native horizontal thumbnail strip. Against a vertical rail it
 * wrapped the thumbnails into extra columns, shifted the whole list sideways
 * by half its width, and pulled it up over the spotlight.
 */
.woocommerce div.product div.images.isd-gallery .isd-gallery__rail {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	transform: none;
	left: auto;
	/*
	 * These three have to live at this specificity, not on the plain
	 * .isd-gallery__rail rule: Kadence sets `position: relative` and
	 * `overflow: hidden` on the same selector. Losing `position` would leave
	 * the rail in flow, so it would size the grid row instead of being sized
	 * by it — the spotlight-height behaviour depends on this. Losing
	 * `overflow` would clip the extra thumbnails instead of scrolling them.
	 */
	position: absolute;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

/*
 * `... .flex-control-thumbs li { width:60px; height:65px; display:inline-flex;
 * background:… }`, plus `:first-child` and `:nth-child(6|7|9)` variants that
 * set `width:65px; padding-left:5px`. The fixed 60/65px box is what pinned the
 * thumbnails to one size, and the nth-child rules are what pushed individual
 * thumbnails out of line with the rest.
 */
.woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.isd-gallery__thumb {
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	background: none;
}

/*
 * `... .flex-control-thumbs li img { opacity:.5; border-top:5px solid;
 * border-right:5px solid }` and its `:hover` / `.flex-active` pair at a
 * specificity above ours — the borders cropped the thumbnails and the opacity
 * fought this sheet's own active state.
 */
.woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.isd-gallery__thumb img {
	border: 0;
	margin: 0;
	opacity: 0.72;
	/*
	 * `.woocommerce div.product div.images img { height: auto }` also wins
	 * against the plain thumbnail rule, which left every rail image at its
	 * intrinsic height instead of filling its square.
	 */
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.isd-gallery__thumb .isd-gallery__thumb-btn:hover img,
.woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.is-active .isd-gallery__thumb-btn img,
.woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.isd-gallery__thumb.is-active img {
	opacity: 1;
}

/*
 * `.woocommerce div.product div.summary { float:right; width:48%; clear:none;
 * margin-bottom:2em }` — the same 48% applied to the summary column, which is
 * what left the empty band down the right of the page.
 */
.woocommerce div.product div.summary.isd-single__summary {
	float: none;
	width: 100%;
	margin-bottom: 0;
}

/*
 * `.entry-summary { margin: var(--global-xs-spacing) 0 0 }` in
 * kadence-content — a top margin that pushed the summary column out of line
 * with the top of the gallery.
 */
.isd-single .entry-summary.isd-single__summary {
	margin-top: 0;
}

/*
 * Kadence styles bare `button` as a filled brand button — background, padding,
 * radius, shadow, transition — and its `:hover`, `:focus` and `:active` rules
 * sit at [0,1,1], which outranks a plain class selector. Every control in this
 * gallery and its viewer is a <button>, so without these the thumbnails turn
 * brand blue with a drop shadow the moment the pointer touches them. Each rule
 * below re-states the component's own resting or hover colours at a
 * specificity that wins.
 */
.isd-gallery__thumb-btn:hover,
.isd-gallery__thumb-btn:focus,
.isd-gallery__thumb-btn:active {
	background: var(--isd-tile);
	box-shadow: none;
}

.isd-gallery__arrow:hover,
.isd-gallery__arrow:focus,
.isd-gallery__arrow:active {
	background: var(--isd-navy);
	color: #fff;
	box-shadow: 0 6px 22px rgba(10, 49, 95, 0.22);
}

.isd-gallery__play:hover,
.isd-gallery__play:focus,
.isd-gallery__play:active {
	background: var(--isd-gold-deep);
	box-shadow: none;
}

.isd-viewer__btn:hover,
.isd-viewer__btn:focus,
.isd-viewer__btn:active {
	background: var(--isd-ink);
	color: #fff;
	box-shadow: 0 2px 10px rgba(10, 49, 95, 0.1);
}

/* -------------------------------------------------------------------------
   Gallery
   ---------------------------------------------------------------------- */

.isd-gallery {
	position: relative;
	/* The coded template omits the stock `style="opacity: 0"`, so the gallery
	   is never waiting on a script to become visible. This holds that true
	   against the inline opacity WooCommerce's ProductGallery still writes on
	   the root when it initialises. */
	opacity: 1 !important;
}

.isd-gallery__layout {
	display: grid;
	grid-template-columns: var(--isd-rail-w) minmax(0, 1fr);
	gap: 16px;
	/* stretch, so the rail wrapper takes the row height the spotlight sets. */
	align-items: stretch;
}

/* Single image or none at all: no rail, so the spotlight takes the full width.
   Keyed off the count the template writes rather than :has(), so a browser
   without :has() support cannot leave an empty 104px column behind. */
.isd-gallery[data-isd-count="0"] .isd-gallery__layout,
.isd-gallery[data-isd-count="1"] .isd-gallery__layout {
	grid-template-columns: minmax(0, 1fr);
}

/* Stacked: the rail becomes a horizontal strip under the spotlight, so it is
   never a tall vertical list on a phone. */
@media (max-width: 782px) {
	.isd-gallery__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.isd-gallery__stage {
		order: 1;
		justify-self: stretch;
	}

	.isd-gallery__rail-wrap {
		order: 2;
		position: static;
		height: auto;
	}

	.isd-gallery__rail {
		position: static;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.isd-gallery__thumb {
		flex: 0 0 var(--isd-rail-w);
	}
}

/* --- Rail --------------------------------------------------------------- */

/*
 * The wrapper holds nothing but the absolutely positioned list, so it adds no
 * height of its own: the grid row is sized by the spotlight, the wrapper
 * stretches to it, and the rail is pinned to the wrapper's edges. The rail is
 * therefore exactly as tall as the spotlight whether the product has two
 * images or nineteen, and the overflow scrolls inside it.
 */
.isd-gallery__rail-wrap {
	position: relative;
	min-height: 0;
}

.isd-gallery__rail {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.isd-gallery__rail::-webkit-scrollbar {
	width: 4px;
}

.isd-gallery__rail::-webkit-scrollbar-thumb {
	background: var(--isd-line);
	border-radius: 4px;
}

.isd-gallery__thumb {
	margin: 0;
	list-style: none;
	flex: 0 0 auto;
}

.isd-gallery__thumb-btn {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--isd-tile);
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	transition: box-shadow 0.24s var(--isd-ease), transform 0.24s var(--isd-ease);
}

.isd-gallery__thumb-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px rgba(10, 49, 95, 0.08);
	transition: box-shadow 0.24s var(--isd-ease);
	pointer-events: none;
}

.isd-gallery__thumb-btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.72;
	transition: opacity 0.24s var(--isd-ease), transform 0.5s var(--isd-ease);
}

.isd-gallery__thumb-btn:hover img {
	opacity: 1;
	transform: scale(1.06);
}

.isd-gallery__thumb.is-active .isd-gallery__thumb-btn img {
	opacity: 1;
}

.isd-gallery__thumb.is-active .isd-gallery__thumb-btn::after {
	box-shadow: inset 0 0 0 2px var(--isd-navy);
}

.isd-gallery__thumb-btn:focus-visible {
	outline: 2px solid var(--isd-navy);
	outline-offset: 2px;
}

/* Marks a thumbnail whose image has a video attached. */
.isd-gallery__thumb-video {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(10, 49, 95, 0.86);
}

.isd-gallery__thumb-video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	transform: translate(-50%, -50%);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #fff;
}

/* --- Spotlight ---------------------------------------------------------- */

.isd-gallery__stage {
	position: relative;
	border-radius: 14px;
	background: var(--isd-tile);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	/* Square, and never taller than the viewport — capping width by the same
	   number is what keeps it square when the height is the binding limit. */
	max-width: var(--isd-stage-max, none);
	max-height: var(--isd-stage-max, none);
	justify-self: start;
	width: 100%;
	/* start, not stretch: the spotlight's own aspect ratio decides the row
	   height, and the rail then follows it. */
	align-self: start;
}

.isd-gallery__viewport {
	margin: 0;
	padding: 0;
	height: 100%;
}

.isd-gallery__slide {
	height: 100%;
}

.isd-gallery__link {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

.isd-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.26s var(--isd-ease), transform 0.26s var(--isd-ease);
}

/* Crossfade while the new source is applied. */
.isd-gallery.is-swapping .isd-gallery__image {
	opacity: 0;
	transform: scale(1.02);
}

/* 48 published products have no image at all; the placeholder has to read as
   deliberate rather than broken. */
.isd-gallery__slide--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.isd-gallery__slide--placeholder img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.5;
}

/* --- Arrows ------------------------------------------------------------- */

.isd-gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--isd-ink);
	box-shadow: 0 4px 18px rgba(10, 49, 95, 0.16);
	cursor: pointer;
	opacity: 0;
	transition:
		opacity 0.3s var(--isd-ease),
		transform 0.3s var(--isd-ease),
		background 0.2s var(--isd-ease);
}

/* Parked outside the frame, so they travel inward rather than just fading. */
.isd-gallery__arrow--prev {
	left: 14px;
	transform: translate(-14px, -50%);
}

.isd-gallery__arrow--next {
	right: 14px;
	transform: translate(14px, -50%);
}

.isd-gallery__stage:hover .isd-gallery__arrow,
.isd-gallery__arrow:focus-visible {
	opacity: 1;
	transform: translate(0, -50%);
}

.isd-gallery__arrow:hover {
	background: var(--isd-navy);
	color: #fff;
}

.isd-gallery__arrow:focus-visible {
	outline: 2px solid var(--isd-navy);
	outline-offset: 2px;
}

/* Touch has no hover state to reveal them with. */
@media (hover: none) {
	.isd-gallery__arrow {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

/* --- Video -------------------------------------------------------------- */

.isd-gallery__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 49, 95, 0.86);
	cursor: pointer;
	transition: background 0.2s var(--isd-ease), transform 0.2s var(--isd-ease);
}

.isd-gallery__play:hover,
.isd-gallery__play:focus-visible {
	background: var(--isd-gold-deep);
	transform: translate(-50%, -50%) scale(1.06);
}

.isd-gallery__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.isd-gallery__play-icon {
	display: block;
	width: 0;
	height: 0;
	margin-left: 5px;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 20px solid #fff;
}

.isd-gallery__stage.is-playing {
	background: #000;
}

.isd-gallery__stage.is-playing .isd-gallery__viewport,
.isd-gallery__stage.is-playing .isd-gallery__arrow,
.isd-gallery__stage.is-playing .isd-gallery__play {
	display: none;
}

.isd-gallery__video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.isd-single .onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--isd-gold-deep);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Full screen viewer
   ---------------------------------------------------------------------- */

.isd-viewer-open {
	overflow: hidden;
}

.isd-viewer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	opacity: 0;
	transition: opacity 0.22s var(--isd-ease);
}

.isd-viewer.is-open {
	opacity: 1;
}

.isd-viewer__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	padding: 4vh 4vw 0;
}

.isd-viewer__image {
	display: block;
	/* Natural dimensions are applied inline as a further cap: most originals
	   in this catalogue are ~1024px square, and scaling past that only makes
	   the image soft. */
	max-width: min(92vw, 1100px);
	max-height: min(84vh, 1100px);
	width: auto;
	height: auto;
	object-fit: contain;
	transform: scale(0.98);
	transition: transform 0.22s var(--isd-ease);
}

.isd-viewer.is-open .isd-viewer__image {
	transform: scale(1);
}

.isd-viewer__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex: 0 0 auto;
	padding: 24px 0 32px;
}

.isd-viewer__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--isd-line);
	border-radius: 50%;
	background: #fff;
	color: var(--isd-ink);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(10, 49, 95, 0.1);
	transition: background 0.2s var(--isd-ease), color 0.2s var(--isd-ease), transform 0.2s var(--isd-ease);
}

.isd-viewer__btn:hover {
	background: var(--isd-ink);
	color: #fff;
	transform: translateY(-2px);
}

.isd-viewer__btn:focus-visible {
	outline: 2px solid var(--isd-navy);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Summary column
   ---------------------------------------------------------------------- */

.isd-single__summary .product_title {
	margin: 0 0 6px;
	font-family: "Public Sans", sans-serif;
	font-size: clamp(1.9rem, 2.4vw, 2.8rem);
	font-weight: 900;
	line-height: 1.08;
	text-wrap: balance;
}

.isd-single__summary .product_meta {
	margin: 0 0 16px;
	color: var(--isd-muted);
	font-size: 14px;
}

.isd-single__summary .product_meta > span {
	display: block;
	margin-bottom: 3px;
}

.isd-single__summary .woocommerce-product-rating {
	margin: 0 0 6px;
}

/* Intro copy: everything above the product's first heading. The rest is in
   the accordion below, so nothing is rendered twice. */
.isd-single__lead {
	margin: 16px 0;
	padding-left: 20px;
	border-left: 4px solid var(--isd-gold);
	max-width: var(--isd-prose);
}

.isd-single__lead > *:first-child {
	margin-top: 0;
}

.isd-single__lead > *:last-child {
	margin-bottom: 0;
}

/* Some leads carry an embedded video; keep it inside the column. */
.isd-single__lead iframe,
.isd-single__lead img {
	max-width: 100%;
}

.isd-single__lead .rte__video-wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.isd-single__lead .rte__video-wrapper iframe {
	width: 100%;
	height: 100%;
}

.isd-single__summary .price {
	display: block;
	margin: 0 0 18px;
	color: var(--isd-gold-deep);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.isd-single__summary .price del {
	opacity: 0.6;
	font-weight: 500;
}

.isd-single__summary .price ins {
	text-decoration: none;
}

.isd-single__summary .isd-quote-price {
	color: var(--isd-navy);
	font-size: 20px;
	font-weight: 700;
}

.isd-single__summary .quantity {
	margin-right: 10px;
}

.isd-single__summary .single_add_to_cart_button {
	padding: 13px 30px;
	border-radius: 8px;
	background: var(--isd-navy);
	color: #fff;
	font-weight: 600;
	transition: background 0.2s var(--isd-ease);
}

.isd-single__summary .single_add_to_cart_button:hover,
.isd-single__summary .single_add_to_cart_button:focus {
	background: #0d3d75;
}

/* --- Quote call to action ---------------------------------------------- */

.isd-single__quote {
	margin: 6px 0 4px;
}

.isd-single__quote-btn {
	display: inline-block;
	padding: 13px 30px;
	border-radius: 8px;
	background: var(--isd-navy);
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.2s var(--isd-ease);
}

.isd-single__quote-btn:hover,
.isd-single__quote-btn:focus {
	background: var(--isd-gold-deep);
	color: #fff;
}

.isd-single__quote-btn:focus-visible {
	outline: 2px solid var(--isd-navy);
	outline-offset: 3px;
}

/* --- Reassurance row ---------------------------------------------------
   Renders nothing unless the site supplies copy through
   `isd_single_assurances`; see ISD_Single::assurances(). */

.isd-single__assurances {
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--isd-line);
	list-style: none;
	display: grid;
	gap: 10px;
}

.isd-single__assurance {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--isd-muted);
	font-size: 15px;
}

.isd-single__assurance-icon {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--isd-gold);
}

/* -------------------------------------------------------------------------
   Bands beneath the summary
   ---------------------------------------------------------------------- */

.isd-section {
	margin: 0 0 clamp(32px, 4vw, 56px);
}

.isd-section__inner {
	padding-block: clamp(28px, 3vw, 44px);
}

.isd-section--upsells,
.isd-section--related {
	background: var(--isd-navy);
}

.isd-section:has(> .isd-section__inner:empty) {
	display: none;
}

/* -------------------------------------------------------------------------
   Sections beside the gallery

   The accordion renders inside the summary column, under the call to action,
   so the product's own copy sits next to the image rather than in a band far
   below it. One flat stack, in the order the copy was written.
   ---------------------------------------------------------------------- */

.isd-single__sections {
	margin-top: clamp(24px, 3vw, 36px);
}

/* -------------------------------------------------------------------------
   Accordion

   <details>/<summary>: works with no JavaScript, and keeps the links inside a
   closed panel out of the tab order — which matters because the Artwork
   sections are mostly link lists. isd-single.js only adds the animation.
   ---------------------------------------------------------------------- */

.isd-accordion {
	max-width: 100%;
}

.isd-accordion__item {
	border-bottom: 1px solid var(--isd-line);
}

.isd-accordion__item:first-child {
	border-top: 1px solid var(--isd-line);
}

.isd-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	list-style: none;
	cursor: pointer;
	color: var(--isd-ink);
	font-family: "Public Sans", sans-serif;
	font-size: clamp(1.1rem, 1.4vw, 1.5rem);
	font-weight: 800;
	line-height: 1.25;
	transition: color 0.2s var(--isd-ease);
}

/* `list-style: none` above covers Firefox; Safari needs the pseudo element. */
.isd-accordion__summary::-webkit-details-marker {
	display: none;
}

.isd-accordion__summary:hover {
	color: var(--isd-navy);
}

.isd-accordion__summary:focus-visible {
	outline: 2px solid var(--isd-navy);
	outline-offset: -2px;
}

/* The + / − mark: two bars, one of which rotates away when the panel opens. */
.isd-accordion__mark {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.isd-accordion__mark::before,
.isd-accordion__mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transition: transform 0.3s var(--isd-ease), opacity 0.3s var(--isd-ease);
}

.isd-accordion__mark::after {
	transform: rotate(90deg);
}

.isd-accordion__item[open] .isd-accordion__mark::after {
	transform: rotate(0deg);
	opacity: 0;
}

.isd-accordion__panel {
	overflow: hidden;
	transition: height 0.32s var(--isd-ease);
}

.isd-accordion__body {
	padding: 0 0 26px;
	max-width: var(--isd-prose);
	color: var(--isd-muted);
}

.isd-accordion__body > *:first-child {
	margin-top: 0;
}

.isd-accordion__body > *:last-child {
	margin-bottom: 0;
}

.isd-accordion__body a {
	color: var(--isd-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Wide content — the specification tables and any embedded frame — scrolls
   inside its own box rather than pushing the page sideways. */
.isd-accordion__body table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.isd-accordion__body iframe {
	max-width: 100%;
}

/* WooCommerce's attribute table, on the one product that has one. */
.isd-accordion__body .woocommerce-product-attributes {
	width: 100%;
}

.isd-accordion__body .woocommerce-product-attributes th,
.isd-accordion__body .woocommerce-product-attributes td {
	padding: 12px 16px;
	border: 0;
	text-align: left;
}

.isd-accordion__body .woocommerce-product-attributes tr:nth-child(odd) th,
.isd-accordion__body .woocommerce-product-attributes tr:nth-child(odd) td {
	background: var(--isd-tile);
}

/* -------------------------------------------------------------------------
   Upsells and related products
   ---------------------------------------------------------------------- */

.isd-section--upsells > .isd-section__inner > h2,
.isd-section--related > .isd-section__inner > h2 {
	margin: 0 0 20px;
	color: #fff;
	font-family: "Public Sans", sans-serif;
	font-size: clamp(1.4rem, 2vw, 1.9rem);
	font-weight: 800;
	line-height: 1.2;
}

/*
 * The site's global Additional CSS styles `ul.products li.product` with a long
 * run of !important declarations written for the archive grid. Those selectors
 * also match the upsell and related grids that this screen introduces, so the
 * cards arrive pre-styled for a context they were never designed for.
 *
 * The rules below re-assert only what the navy bands need, at the same weight,
 * because they cannot win otherwise. This is a counter-measure, not the fix.
 * The real fix is to scope the global rules to the archive, i.e. change
 * `ul.products li.product` to `.isd-shop ul.products li.product` in
 * Appearance > Customize > Additional CSS, after which this whole block can be
 * deleted.
 */
.isd-section--upsells ul.products,
.isd-section--related ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1600px) {
	.isd-section--upsells ul.products,
	.isd-section--related ul.products {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.isd-section--upsells ul.products,
	.isd-section--related ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.isd-section--upsells ul.products,
	.isd-section--related ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

.isd-section--upsells ul.products li.product,
.isd-section--related ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	background: #fff !important;
	border: 0 !important;
	border-radius: 12px !important;
	padding: 12px !important;
}

.isd-section--upsells ul.products li.product a,
.isd-section--related ul.products li.product a {
	text-decoration: none;
}

.isd-section--upsells ul.products li.product .woocommerce-loop-product__title,
.isd-section--related ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	line-height: 1.35;
}

/* -------------------------------------------------------------------------
   Motion
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.isd-gallery__thumb-btn,
	.isd-gallery__thumb-btn img,
	.isd-gallery__image,
	.isd-gallery__arrow,
	.isd-gallery__play,
	.isd-viewer,
	.isd-viewer__image,
	.isd-viewer__btn,
	.isd-accordion__summary,
	.isd-accordion__panel,
	.isd-accordion__mark::before,
	.isd-accordion__mark::after,
	.isd-single__quote-btn,
	.isd-single__summary .single_add_to_cart_button {
		transition: none !important;
		animation: none !important;
	}

	/* Arrows never depend on a transition to become reachable. */
	.isd-gallery__arrow {
		opacity: 1;
		transform: translate(0, -50%);
	}
}