/* =========================================================================
   Cinematic Armor Showcase for Elementor
   All rules are scoped under .cas-widget — nothing leaks into the theme.
   ========================================================================= */

.cas-widget {
	/* ---- Design tokens (all editable through Elementor) ---- */
	--cas-bg: #040606;
	--cas-bg-2: #0b0c0d;
	--cas-panel: #070909;
	--cas-expanded-bg: #050707;
	--cas-gold: #c78a28;
	--cas-gold-bright: #e3a33a;
	--cas-gold-muted: #8a5d22;
	--cas-text: #e8d9ba;
	--cas-text-2: #b9a886;
	--cas-text-muted: #8f8067;
	--cas-border: rgba(199, 138, 40, 0.55);
	--cas-glow: rgba(227, 163, 58, 0.28);
	--cas-overlay: rgba(0, 0, 0, 0.84);
	--cas-overlay-opacity: 1;
	--cas-backdrop-blur: 6px;
	--cas-radius: 10px;
	--cas-divider-color: var(--cas-gold-muted);

	--cas-ornament-color: var(--cas-gold);
	--cas-ornament-size: 22px;
	--cas-ornament-thickness: 1px;
	--cas-ornament-opacity: 0.9;
	--cas-ornament-inset: 7px;

	--cas-cols: 4;
	--cas-gap-x: 0px;
	--cas-gap-y: 28px;
	--cas-card-min-w: 180px;
	--cas-card-space: 11px;
	--cas-card-img-hover-scale: 1.05;
	--cas-card-hover-translate: -4px;

	--cas-col-media: 50fr;
	--cas-col-info: 32fr;
	--cas-col-side: 18fr;
	--cas-thumb-w: 124px;
	--cas-thumb-h: 110px;
	--cas-arrow-w: 53px;

	--cas-viewer-glow: rgba(199, 138, 40, 0.22);
	--cas-btn-hover-translate: -2px;
	--cas-ambient-color: rgba(199, 138, 40, 0.16);
	--cas-ambient-opacity: 0.6;

	position: relative;
	color: var(--cas-text);
	background-color: var(--cas-bg);
	font-kerning: normal;
	box-sizing: border-box;
}

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

/* The hidden attribute is the widget's single source of truth for
   visibility. Component display rules must never override it. */
.cas-widget [hidden] {
	display: none !important;
}

/* Every scrollable area keeps the same quiet gold scrollbar. */
.cas-widget * {
	scrollbar-width: thin;
	scrollbar-color: var(--cas-gold-muted) transparent;
}

.cas-widget *::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.cas-widget *::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 3px;
}

.cas-widget *::-webkit-scrollbar-thumb {
	background: var(--cas-gold-muted);
	border-radius: 3px;
}

/* Screen-reader-only text */
.cas-widget .cas-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cas-widget button {
	font: inherit;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* Cards, thumbnails, selector tiles, arrows and the two secondary buttons are
   all real <button> elements, so the reset above was quietly erasing the frame
   each of them defines. These rules outrank it while leaving every Elementor
   border control free to win, since those generate a more specific selector. */
.cas-widget .cas-card,
.cas-widget .cas-thumb,
.cas-widget .cas-side-item,
.cas-widget .cas-arrow,
.cas-widget .cas-loadmore,
.cas-widget .cas-viewer__fs {
	border-style: solid;
	border-width: 1px;
}

.cas-widget .cas-card {
	border-color: var(--cas-card-border, rgba(199, 138, 40, 0.42));
}

.cas-widget .cas-card:hover {
	border-color: var(--cas-card-hover-border, rgba(227, 163, 58, 0.68));
}

.cas-widget .cas-card.is-selected,
.cas-widget .cas-card.is-selected:hover {
	border-color: var(--cas-card-selected-border, var(--cas-gold-bright));
}

.cas-widget .cas-thumb,
.cas-widget .cas-arrow,
.cas-widget .cas-viewer__fs {
	border-color: var(--cas-border);
}

.cas-widget .cas-loadmore {
	border-color: var(--cas-loadmore-border, var(--cas-border));
}

.cas-widget .cas-side-item {
	border-color: transparent;
}

.cas-widget :focus-visible {
	outline: 2px solid var(--cas-gold-bright);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Ambient glow */
.cas-widget.cas-has-ambient::before {
	content: "";
	position: absolute;
	inset: -8%;
	pointer-events: none;
	background:
		radial-gradient(58% 42% at 50% 0%, var(--cas-ambient-color), transparent 70%),
		radial-gradient(40% 34% at 12% 92%, var(--cas-ambient-color), transparent 72%);
	opacity: var(--cas-ambient-opacity);
	z-index: 0;
}

.cas-widget > * {
	position: relative;
	z-index: 1;
}

/* Particle canvas (created by JS only when enabled) */
.cas-widget .cas-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* =========================================================================
   COLLECTION GRID
   ========================================================================= */

.cas-collection {
	padding: clamp(10px, 1.6vw, 26px);
	background-color: transparent;
	transition: opacity 0.35s ease, transform 0.35s ease;
	transform-origin: 50% 40%;
}

.cas-collection.is-exiting {
	opacity: 0;
	transform: scale(0.985);
	pointer-events: none;
}

.cas-collection[hidden] {
	display: none;
}

.cas-grid {
	display: grid;
	grid-template-columns: repeat(var(--cas-cols), minmax(min(var(--cas-card-min-w), 100%), 1fr));
	column-gap: var(--cas-gap-x);
	row-gap: var(--cas-gap-y);
}

.cas-card-cell {
	min-width: 0;
	display: flex;
}

/* ---- Card ---- */

.cas-card {
	--cas-accent: var(--cas-item-accent, var(--cas-gold));
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--cas-card-space);
	width: 100%;
	padding: clamp(10px, 1.1vw, 16px);
	border: 1px solid var(--cas-card-border, rgba(199, 138, 40, 0.38));
	border-radius: var(--cas-radius);
	text-align: center;
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s ease,
		box-shadow 0.45s ease;
	overflow: hidden;
	isolation: isolate;
}

.cas-card:hover {
	transform: translateY(var(--cas-card-hover-translate));
	border-color: var(--cas-card-hover-border, rgba(227, 163, 58, 0.62));
	box-shadow: 0 14px 44px -18px rgba(0, 0, 0, 0.9), 0 0 26px -12px var(--cas-glow);
}

.cas-card.is-selected {
	border-color: var(--cas-card-selected-border, var(--cas-gold-bright));
	box-shadow: 0 0 26px -8px var(--cas-glow), inset 0 1px 0 rgba(255, 226, 170, 0.14);
}

/* =========================================================================
   ORNAMENTAL CARD FRAME
   Drawn entirely with background layers so the card keeps its markup: a thin
   outer line (the border), a second engraved line set well inside it, short
   bracket extensions at the four corners and a faint aged-metal grain. The
   lines fade towards their ends so the frame never reads as a flat rectangle.
   ========================================================================= */

.cas-card {
	--cas-frame-line: var(--cas-card-border, rgba(199, 138, 40, 0.26));
	--cas-frame-lit: var(--cas-card-border, rgba(199, 138, 40, 0.5));
	--cas-frame-corner: var(--cas-card-border, rgba(199, 138, 40, 0.68));
	--cas-frame-i: 7px;
	--cas-frame-c: 3.5px;
	--cas-frame-l: 22px;
	--cas-frame-grain: rgba(255, 255, 255, 0.016);
	--cas-frame-layers:
		linear-gradient(90deg, transparent, var(--cas-frame-line) 16%, var(--cas-frame-lit) 50%, var(--cas-frame-line) 84%, transparent),
		linear-gradient(90deg, transparent, var(--cas-frame-line) 16%, var(--cas-frame-lit) 50%, var(--cas-frame-line) 84%, transparent),
		linear-gradient(180deg, transparent, var(--cas-frame-line) 16%, var(--cas-frame-lit) 50%, var(--cas-frame-line) 84%, transparent),
		linear-gradient(180deg, transparent, var(--cas-frame-line) 16%, var(--cas-frame-lit) 50%, var(--cas-frame-line) 84%, transparent),
		linear-gradient(90deg, var(--cas-frame-corner), transparent),
		linear-gradient(180deg, var(--cas-frame-corner), transparent),
		linear-gradient(270deg, var(--cas-frame-corner), transparent),
		linear-gradient(180deg, var(--cas-frame-corner), transparent),
		linear-gradient(90deg, var(--cas-frame-corner), transparent),
		linear-gradient(0deg, var(--cas-frame-corner), transparent),
		linear-gradient(270deg, var(--cas-frame-corner), transparent),
		linear-gradient(0deg, var(--cas-frame-corner), transparent),
		repeating-linear-gradient(118deg, var(--cas-frame-grain) 0 2px, rgba(0, 0, 0, 0) 2px 7px);
}

/* The card is a <button>. The reset above clears background-size, and the
   theme paints its own gradient on button:hover, so the frame is declared
   with more weight than both and repeated across every interactive state. */
.cas-widget .cas-card,
.cas-widget .cas-card:hover,
.cas-widget .cas-card:focus,
.cas-widget .cas-card:active,
.cas-widget .cas-card:focus-visible,
.cas-widget .cas-card:focus-within {
	background-color: var(--cas-card-bg, var(--cas-panel));
	background-image: var(--cas-frame-layers);
	background-repeat: no-repeat;
	background-size:
		calc(100% - var(--cas-frame-i) * 2) 1px,
		calc(100% - var(--cas-frame-i) * 2) 1px,
		1px calc(100% - var(--cas-frame-i) * 2),
		1px calc(100% - var(--cas-frame-i) * 2),
		var(--cas-frame-l) 1px,
		1px var(--cas-frame-l),
		var(--cas-frame-l) 1px,
		1px var(--cas-frame-l),
		var(--cas-frame-l) 1px,
		1px var(--cas-frame-l),
		var(--cas-frame-l) 1px,
		1px var(--cas-frame-l),
		auto;
	background-position:
		var(--cas-frame-i) var(--cas-frame-i),
		var(--cas-frame-i) calc(100% - var(--cas-frame-i)),
		var(--cas-frame-i) var(--cas-frame-i),
		calc(100% - var(--cas-frame-i)) var(--cas-frame-i),
		var(--cas-frame-c) var(--cas-frame-c),
		var(--cas-frame-c) var(--cas-frame-c),
		calc(100% - var(--cas-frame-c)) var(--cas-frame-c),
		calc(100% - var(--cas-frame-c)) var(--cas-frame-c),
		var(--cas-frame-c) calc(100% - var(--cas-frame-c)),
		var(--cas-frame-c) calc(100% - var(--cas-frame-c)),
		calc(100% - var(--cas-frame-c)) calc(100% - var(--cas-frame-c)),
		calc(100% - var(--cas-frame-c)) calc(100% - var(--cas-frame-c)),
		0 0;
}

/* Hover lifts the engraving and warms the metal a little. */
.cas-card:hover {
	--cas-frame-line: var(--cas-card-hover-border, rgba(227, 163, 58, 0.4));
	--cas-frame-lit: var(--cas-card-hover-border, rgba(227, 163, 58, 0.68));
	--cas-frame-corner: var(--cas-card-hover-border, rgba(227, 163, 58, 0.82));
	--cas-frame-grain: rgba(255, 255, 255, 0.022);
}

/* The open bundle wears the brightest frame, with longer corner work. */
.cas-card.is-selected {
	--cas-frame-line: var(--cas-card-selected-border, rgba(227, 163, 58, 0.55));
	--cas-frame-lit: var(--cas-card-selected-border, var(--cas-gold-bright));
	--cas-frame-corner: var(--cas-card-selected-border, var(--cas-gold-bright));
	--cas-frame-l: 30px;
	--cas-frame-grain: rgba(255, 216, 150, 0.03);
}

.cas-card.is-transition-source {
	visibility: hidden;
}

/* Spotlight hover (JS feeds --cas-mx / --cas-my) */
.cas-has-spotlight .cas-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	background: radial-gradient(220px circle at var(--cas-mx, 50%) var(--cas-my, 50%), rgba(227, 163, 58, 0.1), transparent 65%);
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.cas-has-spotlight .cas-card:hover::before {
	opacity: 1;
}

/* Border shimmer */
.cas-has-shimmer .cas-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(115deg, transparent 30%, rgba(227, 163, 58, 0.55) 50%, transparent 70%) border-box;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	background-size: 260% 100%;
	background-position: 120% 0;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.cas-has-shimmer .cas-card:hover::after {
	opacity: 1;
	animation: cas-shimmer 1.8s linear infinite;
}

@keyframes cas-shimmer {
	to { background-position: -140% 0; }
}

.cas-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: var(--cas-card-media-max-h, 340px);
	overflow: hidden;
	border-radius: calc(var(--cas-radius) - 4px);
	background: radial-gradient(75% 90% at 50% 20%, #101112, var(--cas-bg));
	z-index: 1;
}

.cas-card__media img {
	width: 100%;
	height: 100%;
	object-fit: var(--cas-card-img-fit, cover);
	object-position: var(--cas-card-img-pos, center top);
	display: block;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.cas-card:hover .cas-card__media img {
	transform: scale(var(--cas-card-img-hover-scale));
}

.cas-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(4, 6, 6, 0.45), transparent 38%);
	pointer-events: none;
}

.cas-card__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(0.82rem, 1vw, 1rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cas-text);
	z-index: 1;
	transition: color 0.3s ease;
}

.cas-card__price {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	color: var(--cas-gold-bright);
	font-size: clamp(0.85rem, 1vw, 1rem);
	letter-spacing: 0.06em;
	z-index: 1;
}

.cas-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 3px 10px;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cas-bg);
	background: var(--cas-gold);
	border-radius: 2px;
}

.cas-card__indicator {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	width: 30px;
	height: 30px;
	display: none;
	align-items: center;
	justify-content: center;
	/* The outer corner follows the frame radius, so the mark reads as part
	   of the border rather than a badge sitting on top of the card. */
	border-radius: 0 calc(var(--cas-radius) - 1px) 0 12px;
	background:
		linear-gradient(140deg, var(--cas-gold-bright), var(--cas-card-selected-border, var(--cas-gold)));
	box-shadow: inset -1px 1px 0 rgba(255, 236, 195, 0.45);
	color: var(--cas-bg);
}

.cas-card__indicator svg {
	width: 60%;
	height: 60%;
	stroke: currentColor;
}

.cas-card.is-selected .cas-card__indicator {
	display: inline-flex;
}

/* =========================================================================
   ORNAMENTAL CORNERS
   ========================================================================= */

.cas-has-ornaments .cas-ornament {
	position: relative;
}

.cas-has-ornaments .cas-ornament::before,
.cas-has-ornaments .cas-ornament::after {
	content: "";
	position: absolute;
	width: var(--cas-ornament-size);
	height: var(--cas-ornament-size);
	opacity: var(--cas-ornament-opacity);
	pointer-events: none;
	z-index: 4;
}

.cas-has-ornaments .cas-ornament::before {
	top: var(--cas-ornament-inset);
	left: var(--cas-ornament-inset);
	border-top: var(--cas-ornament-thickness) solid var(--cas-ornament-color);
	border-left: var(--cas-ornament-thickness) solid var(--cas-ornament-color);
}

.cas-has-ornaments .cas-ornament::after {
	bottom: var(--cas-ornament-inset);
	right: var(--cas-ornament-inset);
	border-bottom: var(--cas-ornament-thickness) solid var(--cas-ornament-color);
	border-right: var(--cas-ornament-thickness) solid var(--cas-ornament-color);
}

/* =========================================================================
   EXPANDED VIEW
   ========================================================================= */

.cas-expanded {
	opacity: 1;
}

.cas-expanded[hidden] {
	display: none;
}

.cas-expanded.is-inline {
	padding: clamp(10px, 1.2vw, 20px);
}

.cas-expanded.is-overlay {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: clamp(12px, 3vh, 44px) clamp(10px, 3vw, 40px);
	background: var(--cas-overlay);
	opacity: var(--cas-overlay-opacity);
	backdrop-filter: blur(var(--cas-backdrop-blur));
	-webkit-backdrop-filter: blur(var(--cas-backdrop-blur));
}

@media (max-width: 767px) {
	.cas-no-backdrop-mobile .cas-expanded.is-overlay {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

.cas-expanded__inner {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding: clamp(14px, 1.6vw, 26px);
	background-color: var(--cas-expanded-bg);
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.95);
}

.cas-expanded.is-anim-in .cas-expanded__inner {
	will-change: transform, opacity;
}

.cas-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	scroll-margin-top: 120px;
	min-height: 44px;
	padding: 8px 12px;
	margin-bottom: clamp(10px, 1.6vw, 20px);
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cas-gold);
	transition: color 0.25s ease, transform 0.25s ease;
}

.cas-back:hover,
.cas-back:focus-visible {
	color: var(--cas-back-hover-color, var(--cas-gold-bright));
	transform: translateX(-3px);
}

.cas-back__icon {
	width: 16px;
	height: 16px;
	flex: none;
}

/* ---- Three column layout ---- */

.cas-expanded__layout {
	display: grid;
	gap: 10px;
	grid-template-columns:
		minmax(0, var(--cas-col-media))
		minmax(min(320px, 100%), var(--cas-col-info))
		minmax(min(186px, 100%), var(--cas-col-side));
	align-items: stretch;
}

.cas-expanded__layout.no-sidebar {
	grid-template-columns:
		minmax(0, var(--cas-col-media))
		minmax(min(320px, 100%), var(--cas-col-info));
}

.cas-sticky-info .cas-info {
	position: sticky;
	top: 24px;
}

/* The information panel is usually taller than the media column. Sticky only
   works when no ancestor clips overflow, so filling the height is the default:
   the viewer grows into the space that would otherwise be an empty black area. */
.cas-sticky-media .cas-media-col {
	position: sticky;
	top: var(--cas-sticky-top, 24px);
	align-self: start;
}

.cas-media-fill .cas-media-col {
	align-self: stretch;
}

.cas-media-fill .cas-viewer {
	flex: 1 1 auto;
	max-height: var(--cas-viewer-fill-max, min(66vh, 660px));
	min-height: var(--cas-viewer-min-h, 320px);
}

.cas-sticky-sidebar .cas-sidebar {
	position: sticky;
	top: 24px;
}

/* ---- Media column ---- */

.cas-media-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.5vw, 22px);
}

/* The information panel defines the row height; the selector keeps to the
   height of the media beside it and scrolls inside itself. */
.cas-info {
	height: 100%;
}

.cas-sidebar {
	align-self: stretch;
	height: 100%;
}

.cas-viewer {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	max-height: var(--cas-viewer-max-h, 46vh);
	overflow: hidden;
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	background: radial-gradient(80% 90% at 50% 30%, #0d0e0f, var(--cas-bg));
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 0 40px -12px var(--cas-viewer-glow);
}

.cas-viewer__stage,
.cas-viewer__stage img,
.cas-viewer__stage video,
.cas-viewer__stage iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cas-viewer__stage img,
.cas-viewer__stage video {
	object-fit: cover;
	object-position: center center;
	display: block;
}

.cas-viewer__stage.is-fading {
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.cas-viewer__error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	color: var(--cas-text-muted);
	background: var(--cas-bg-2);
	font-size: 0.9rem;
	z-index: 2;
}

.cas-viewer__fs {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cas-fs-color, var(--cas-gold));
	background: var(--cas-fs-bg, rgba(4, 6, 6, 0.62));
	border: 1px solid var(--cas-border);
	border-radius: calc(var(--cas-radius) - 4px);
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cas-viewer__fs:hover,
.cas-viewer__fs:focus-visible {
	color: var(--cas-gold-bright);
	border-color: var(--cas-gold-bright);
	background: rgba(4, 6, 6, 0.85);
}

.cas-viewer__fs svg {
	width: 18px;
	height: 18px;
}

/* ---- Thumbnails ---- */

.cas-thumbs-wrap {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	width: 100%;
}

/* The strip keeps the exact width of the viewer above it; the arrows only
   claim space when the strip actually scrolls, and they sit outside the
   thumbnails rather than on top of them. */
.cas-thumbs-wrap.has-arrows {
	padding-inline: calc(var(--cas-arrow-w, 53px) + 4px);
}

.cas-thumbs__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.cas-thumbs__arrow.is-prev {
	inset-inline-start: 0;
}

.cas-thumbs__arrow.is-next {
	inset-inline-end: 0;
}

.cas-thumbs {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 2px;
	min-width: 0;
	flex: 1;
}

.cas-thumbs::-webkit-scrollbar {
	height: 0;
	width: 0;
	display: none;
}

.cas-thumb {
	position: relative;
	/* They grow to fill the row evenly, and never shrink below their size
	   so the strip scrolls once there are too many. */
	flex: 1 1 var(--cas-thumb-w);
	min-width: var(--cas-thumb-w);
	scroll-snap-align: start;
	height: var(--cas-thumb-h);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--cas-border);
	border-radius: calc(var(--cas-radius) - 4px);
	background: var(--cas-thumb-bg, var(--cas-panel));
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.cas-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter 0.25s ease;
}

.cas-thumb:not(.is-active) img {
	filter: brightness(0.62);
}

.cas-thumb:hover {
	border-color: var(--cas-thumb-hover-border, var(--cas-gold-bright));
}

.cas-thumb:hover img {
	filter: brightness(0.9);
}

.cas-thumb.is-active {
	border-color: var(--cas-thumb-active-border, var(--cas-gold-bright));
	box-shadow: 0 0 0 1px var(--cas-thumb-active-border, var(--cas-gold-bright));
}

.cas-thumb.is-active img {
	filter: none;
}

.cas-thumbs__empty {
	margin: 0;
	color: var(--cas-text-muted);
	font-size: 0.85rem;
}

.cas-arrow {
	flex: none;
	width: var(--cas-arrow-w, 53px);
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cas-arrow-color, var(--cas-gold));
	background: var(--cas-arrow-bg, rgba(4, 6, 6, 0.72));
	border: 1px solid var(--cas-border);
	border-radius: calc(var(--cas-radius) - 4px);
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cas-arrow:hover,
.cas-arrow:focus-visible {
	color: var(--cas-arrow-hover-color, var(--cas-gold-bright));
	border-color: var(--cas-gold-bright);
}

.cas-arrow svg {
	width: 20px;
	height: 20px;
}

.cas-arrow[disabled] {
	opacity: 0.3;
	pointer-events: none;
}

/* ---- Information panel ---- */

.cas-info {
	min-width: 0;
	padding: clamp(17px, 2vw, 17px);
	background-color: var(--cas-panel);
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.9vw, 15px);
	text-align: center;
}

/* Details, price and the button each read as their own block. */
.cas-info__details {
	margin-top: 0;
}

.cas-info__price {
	margin-top: 0;
}

.cas-info__cta {
	margin-top: 2px;
}

.cas-info__badge {
	align-self: center;
	padding: 3px 12px;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cas-bg);
	background: var(--cas-gold);
	border-radius: 2px;
}

.cas-info__title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.35rem, 1.9vw, 1.8rem);
	font-weight: 400;
	max-width: 92%;
	margin-inline: auto;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cas-gold-bright);
	line-height: 1.22;
	overflow-wrap: break-word;
}

.cas-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--cas-divider-color);
}

.cas-divider::before,
.cas-divider::after {
	content: "";
	height: 1px;
	width: clamp(28px, 22%, 70px);
	background: linear-gradient(to var(--cas-dir, right), transparent, currentColor);
}

.cas-divider::after {
	--cas-dir: left;
}

.cas-divider span {
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	border: 1px solid currentColor;
	flex: none;
}

.cas-info__short {
	margin: 0;
	color: var(--cas-text);
	font-size: 0.95rem;
	line-height: 1.65;
}

.cas-info__desc {
	color: var(--cas-text);
	font-size: 0.95rem;
	line-height: 1.7;
	text-align: start;
}

.cas-info__desc > :first-child {
	margin-top: 0;
}

.cas-info__desc > :last-child {
	margin-bottom: 0;
}

.cas-heading {
	margin: 0 0 5px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cas-gold);
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
}

.cas-heading::after {
	content: "";
	width: 44px;
	height: 1px;
	background: var(--cas-divider-color);
}

.cas-info__details {
	text-align: start;
}

.cas-info__details .cas-heading {
	display: flex;
	align-items: flex-start;
}

.cas-info__details .cas-heading::after {
	align-self: flex-start;
}

.cas-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	color: var(--cas-text);
	font-size: 0.92rem;
}

.cas-details li {
	position: relative;
	padding-inline-start: 20px;
	line-height: 1.5;
}

.cas-details li::before {
	content: "◆";
	position: absolute;
	inset-inline-start: 0;
	top: 0.18em;
	font-size: 0.6em;
	color: var(--cas-gold);
}

.cas-info__price {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.cas-pricebox {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	padding: 12px 24px;
	border: 1px solid var(--cas-border);
	border-radius: calc(var(--cas-radius) - 4px);
	background: linear-gradient(180deg, rgba(199, 138, 40, 0.07), transparent);
}

.cas-pricebox__value {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 1.35rem;
	letter-spacing: 0.08em;
	color: var(--cas-gold-bright);
}

.cas-pricebox__old {
	color: var(--cas-text-muted);
	text-decoration: line-through;
	font-size: 0.95rem;
}

/* ---- Show More button ---- */

.cas-info__cta {
	display: flex;
	justify-content: center;
}

.cas-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	width: 100%;
	padding: 13px 26px;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cas-btn-color, var(--cas-bg));
	background: var(--cas-btn-bg, linear-gradient(180deg, var(--cas-gold-bright), var(--cas-gold-muted)));
	border: 1px solid var(--cas-btn-border, var(--cas-gold-bright));
	border-radius: calc(var(--cas-radius) - 6px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		inset 0 -1px 0 rgba(0, 0, 0, 0.35),
		0 10px 24px -14px rgba(0, 0, 0, 0.95);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cas-btn:hover,
.cas-btn:focus-visible {
	color: var(--cas-btn-hover-color, var(--cas-bg));
	background: var(--cas-btn-hover-bg, var(--cas-btn-bg, linear-gradient(180deg, var(--cas-gold), var(--cas-gold-muted))));
	border-color: var(--cas-btn-hover-border, var(--cas-btn-border, var(--cas-gold-bright)));
	transform: translateY(var(--cas-btn-hover-translate));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.34),
		0 12px 34px -12px var(--cas-glow),
		0 0 24px -4px var(--cas-glow);
}

.cas-btn__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.cas-btn__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cas-btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: auto;
}

/* Mobile sticky CTA */
@media (max-width: 767px) {
	.cas-mobile-sticky-cta .cas-expanded.is-open .cas-info__cta {
		position: sticky;
		bottom: 10px;
		z-index: 5;
	}
}

/* ---- Sidebar (right armor selector) ---- */

.cas-sidebar {
	min-width: 0;
	padding: clamp(10px, 1.8vw, 10px);
	background-color: var(--cas-panel);
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cas-sidebar__heading {
	flex: none;
	margin: 0;
	text-align: center;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--cas-gold);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cas-border);
}

.cas-sidebar__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	/* Basis zero keeps the cards out of the panel's natural height, so the
	   panel matches the information column and the list scrolls inside it. */
	flex: 1 1 0;
	max-height: var(--cas-side-list-h, none);
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--cas-gold-muted) transparent;
	scrollbar-gutter: stable;
	padding: 2px 16px 12px 3px;
	margin-inline-end: 2px;
	scroll-padding-block-end: 12px;
}

.cas-sidebar__list::-webkit-scrollbar {
	width: 6px;
}

.cas-sidebar__list::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 3px;
}

.cas-sidebar__list::-webkit-scrollbar-thumb {
	background: var(--cas-gold-muted);
	border-radius: 3px;
}

/* Layout A — the name sits over the image, so the image keeps the whole tile. */
.cas-sidebar.is-layout-overlay .cas-side-item {
	display: block;
	padding: 0;
	min-height: 0;
	aspect-ratio: var(--cas-side-img-ratio, 3 / 4);
	overflow: hidden;
}

.cas-sidebar.is-layout-overlay .cas-side-item__img {
	position: absolute;
	inset: 0;
	width: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.cas-sidebar.is-layout-overlay .cas-side-item__text {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 26px 8px 9px;
	gap: 2px;
	align-items: center;
	text-align: center;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.78) 45%, rgba(0, 0, 0, 0));
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.cas-sidebar.is-layout-overlay .cas-side-item__title {
	font-size: var(--cas-side-title-size, 0.68rem);
	color: var(--cas-text);
}

/* Layout B — image above the name. */
.cas-sidebar.is-layout-column .cas-side-item {
	--cas-side-dir: column;
	--cas-side-text-align: center;
	--cas-side-text-items: center;
}

.cas-side-item {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: var(--cas-side-dir, row);
	align-items: center;
	overflow: hidden;
	gap: var(--cas-side-gap, 10px);
	min-height: 52px;
	padding: 4px 2px 3px 4px;
	background: var(--cas-side-bg, var(--cas-bg-2));
	border: 1px solid transparent;
	border-radius: calc(var(--cas-radius) - 4px);
	transition: border-color 0.25s ease, background 0.25s ease;
	text-align: var(--cas-side-text-align, start);
	width: 100%;
}

.cas-side-item:hover {
	border-color: var(--cas-border);
}

.cas-side-item.is-active {
	border-color: var(--cas-side-active-border, var(--cas-gold));
	background: var(--cas-side-active-bg, linear-gradient(180deg, rgba(199, 138, 40, 0.14), rgba(199, 138, 40, 0.03)));
	box-shadow:
		0 0 0 2px var(--cas-side-active-border, var(--cas-gold)),
		0 0 18px -6px var(--cas-glow);
	z-index: 1;
}

.cas-side-item.is-active .cas-side-item__title {
	color: var(--cas-side-active-title, var(--cas-gold-bright));
}

.cas-side-item.is-active::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	border-style: solid;
	border-width: 0 14px 14px 0;
	border-color: transparent var(--cas-gold) transparent transparent;
	border-top-right-radius: calc(var(--cas-radius) - 5px);
}

.cas-side-item__img {
	width: var(--cas-side-img-w, 67px);
	aspect-ratio: var(--cas-side-img-ratio, 3 / 6);
	overflow: hidden;
	border-radius: 4px;
	background: var(--cas-bg);
	flex: none;
}

.cas-side-item__img img {
	width: 100%;
	height: 100%;
	object-fit: var(--cas-side-img-fit, cover);
	object-position: var(--cas-side-img-pos, center);
	display: block;
	filter: brightness(0.75);
	transition: filter 0.25s ease;
}

.cas-side-item.is-active .cas-side-item__img img,
.cas-side-item:hover .cas-side-item__img img {
	filter: none;
}

.cas-side-item__text {
	display: flex;
	flex-direction: column;
	align-items: var(--cas-side-text-items, flex-start);
	justify-content: center;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
	width: auto;
}

/* Stacked variants centre their text across the whole tile. */
.cas-sidebar.is-layout-column .cas-side-item__text,
.cas-sidebar.is-layout-overlay .cas-side-item__text {
	width: 100%;
}

.cas-side-item__title {
	font-size: var(--cas-side-title-size, 0.72rem);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cas-text-2);
	line-height: 1.4;
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
	transition: color 0.25s ease;
}

.cas-side-item.is-active .cas-side-item__title {
	color: var(--cas-gold-bright);
}

.cas-side-item__price {
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--cas-text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* =========================================================================
   ANIMATION HELPERS
   ========================================================================= */

.cas-flip-clone {
	position: fixed;
	z-index: 99999;
	margin: 0;
	object-fit: cover;
	border-radius: var(--cas-radius);
	pointer-events: none;
	will-change: transform;
}

.cas-anim-hidden [data-cas-anim-block],
[data-cas-anim-block].cas-anim-pre {
	opacity: 0;
	transform: translateY(var(--cas-anim-distance, 20px)) scale(var(--cas-anim-scale, 0.98));
}

[data-cas-anim-block] {
	transition:
		opacity var(--cas-anim-entrance, 620ms) var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		transform var(--cas-anim-entrance, 620ms) var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1));
	transition-delay: var(--cas-anim-delay, 0ms);
}

.cas-switch-out {
	opacity: 0 !important;
	transform: translateX(var(--cas-switch-dir, -14px)) !important;
}

/* ---- Expanded panel entrances (one per opening style) ---- */

.cas-expanded__inner {
	transform-origin: 50% 30%;
}

.cas-enter-slot {
	animation: cas-enter-fade var(--cas-anim-entrance, 620ms) var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.cas-enter-fade {
	animation: cas-enter-fade calc(var(--cas-anim-entrance, 620ms) * 1.1) var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.cas-enter-rise {
	animation: cas-enter-rise var(--cas-anim-entrance, 620ms) var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.cas-enter-zoom {
	animation: cas-enter-zoom var(--cas-anim-entrance, 620ms) var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.cas-enter-sweep {
	animation: cas-enter-sweep var(--cas-anim-entrance, 620ms) var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.cas-enter-tilt {
	animation: cas-enter-tilt var(--cas-anim-entrance, 620ms) var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.cas-expanded__inner.cas-leave {
	opacity: 0;
	transition: opacity calc(var(--cas-anim-entrance, 620ms) * 0.45) ease;
}

@keyframes cas-enter-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes cas-enter-rise {
	from { opacity: 0; transform: translateY(38px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes cas-enter-zoom {
	from { opacity: 0; transform: scale(0.93); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes cas-enter-sweep {
	from { opacity: 0.25; clip-path: inset(0 100% 0 0); }
	60% { opacity: 1; }
	to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes cas-enter-tilt {
	from { opacity: 0; transform: perspective(1400px) rotateX(8deg) translateY(30px); }
	to { opacity: 1; transform: perspective(1400px) rotateX(0) translateY(0); }
}

/* The set-list row the card lands on gives a short golden acknowledgement. */
.cas-side-item.is-landing {
	animation: cas-landing 760ms var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes cas-landing {
	0% { transform: scale(1.06); box-shadow: 0 0 0 1px var(--cas-gold), 0 0 26px -4px var(--cas-glow); }
	60% { transform: scale(1); box-shadow: 0 0 0 1px var(--cas-gold), 0 0 18px -6px var(--cas-glow); }
	100% { transform: scale(1); box-shadow: none; }
}

.cas-empty-notice {
	padding: 24px;
	text-align: center;
	border: 1px dashed rgba(199, 138, 40, 0.5);
	color: #b9a886;
	background: #070909;
	border-radius: 8px;
}

/* Scroll lock applied by JS in overlay mode */
body.cas-scroll-locked {
	overflow: hidden;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* When the widget itself is narrow (not only at page breakpoints),
   collapse the expanded layout gracefully. */
@media (max-width: 1024px) {
	/* 1fr against 42fr left the media column as a sliver; the range block at
	   the end of this file now owns the tablet template. */
	.cas-expanded__layout,
	.cas-expanded__layout.no-sidebar {
		grid-template-columns: minmax(0, 52fr) minmax(min(280px, 100%), 48fr);
	}

	.cas-sidebar {
		grid-column: 1 / -1;
	}

	.cas-sidebar__list {
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		overflow: visible;
		max-height: none;
		padding-bottom: 0;
	}

	.cas-sidebar {
		height: auto;
		align-self: start;
	}

	.cas-side-item {
		flex: 0 1 118px;
		width: auto;
		max-width: 160px;
		--cas-side-dir: column;
		--cas-side-text-align: center;
		--cas-side-text-items: center;
	}

	.cas-side-item__text {
		flex: none;
	}

	.cas-sticky-info .cas-info,
	.cas-sticky-sidebar .cas-sidebar,
	.cas-sticky-media .cas-media-col {
		position: static;
	}

	.cas-media-fill .cas-viewer {
		flex: none;
		max-height: var(--cas-viewer-max-h, 46vh);
	}
}

@media (max-width: 767px) {
	.cas-expanded__layout,
	.cas-expanded__layout.no-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.cas-expanded.is-overlay {
		padding: 10px;
		align-items: stretch;
	}

	.cas-expanded__inner {
		padding: 14px 12px;
	}

	.cas-thumbs {
		gap: 8px;
	}

	.cas-arrow {
		--cas-arrow-w: 40px;
	}

	.cas-thumbs-wrap.has-arrows {
		padding-inline: 44px;
	}

	/* One category per row once the panel is too narrow to split it. */
	.cas-included__row {
		flex-basis: 100%;
	}

	.cas-info {
		padding: 20px 16px;
	}

	.cas-widget {
		--cas-thumb-w: 78px;
		--cas-thumb-h: 70px;
		--cas-card-media-max-h: 260px;
	}
}

@media (max-width: 380px) {
	.cas-collection {
		padding: 12px;
	}

	.cas-pricebox {
		min-width: 100%;
		padding: 10px 14px;
	}

	.cas-btn {
		min-width: 100%;
		padding-inline: 16px;
	}
}

/* =========================================================================
   REDUCED MOTION — functionality kept, motion minimized
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.cas-widget *,
	.cas-widget *::before,
	.cas-widget *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 120ms !important;
	}

	.cas-card:hover,
	.cas-btn:hover,
	.cas-back:hover {
		transform: none;
	}

	.cas-card:hover .cas-card__media img {
		transform: none;
	}

	[data-cas-anim-block],
	.cas-anim-hidden [data-cas-anim-block] {
		transform: none;
	}
}

/* Performance mode: strip decorative effects */
.cas-performance .cas-card::before,
.cas-performance .cas-card::after,
.cas-performance .cas-particles,
.cas-performance.cas-has-ambient::before {
	display: none !important;
	animation: none !important;
}

/* =========================================================================
   CARD CALL TO ACTION
   A visual affordance inside the card button (a <span>, never a nested
   button) so visitors understand the card is clickable.
   ========================================================================= */

.cas-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	align-self: center;
	margin-top: 2px;
	padding: 9px 18px;
	min-height: 34px;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--cas-card-cta-color, var(--cas-gold-bright));
	background: var(--cas-card-cta-bg, transparent);
	border: 1px solid var(--cas-card-cta-border, var(--cas-border));
	border-radius: calc(var(--cas-radius) - 6px);
	transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
	z-index: 1;
}

.cas-card__cta svg {
	width: 0.9em;
	height: 0.9em;
	flex: none;
}

.cas-card:hover .cas-card__cta,
.cas-card:focus-visible .cas-card__cta,
.cas-card.is-selected .cas-card__cta {
	color: var(--cas-card-cta-hover-color, var(--cas-bg));
	background: var(--cas-card-cta-hover-bg, var(--cas-gold));
	border-color: var(--cas-card-cta-hover-border, var(--cas-gold-bright));
}

/* =========================================================================
   VIDEO THUMBNAIL
   ========================================================================= */

.cas-thumb.is-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	pointer-events: none;
	z-index: 1;
}

.cas-thumb__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cas-bg);
	background: var(--cas-gold);
	border-radius: 50%;
	pointer-events: none;
	z-index: 2;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.cas-thumb__play svg {
	width: 52%;
	height: 52%;
	fill: currentColor;
}

/* =========================================================================
   THEME-PROOFING
   Many themes style every <button> and <a> globally — including :hover,
   :focus and :active states — and those rules can bleed into the widget
   (typically as an unexpected accent-colored background). Everything below
   re-asserts the widget's own values with higher specificity. All values
   come from the same CSS variables the Elementor controls write to, so
   user styling still wins.
   ========================================================================= */

.cas-widget button,
.cas-widget .cas-btn {
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	text-shadow: none;
	text-decoration: none;
	font-family: inherit;
	text-transform: inherit;
}

.cas-widget .cas-card,
.cas-widget .cas-thumb,
.cas-widget .cas-side-item,
.cas-widget .cas-arrow,
.cas-widget .cas-back,
.cas-widget .cas-viewer__fs,
.cas-widget .cas-btn {
	-webkit-user-select: none;
	user-select: none;
}

.cas-widget ::selection {
	background: var(--cas-gold);
	color: var(--cas-bg);
}

/* Pointer interaction never draws a focus ring; keyboard focus always does. */
.cas-widget :focus:not(:focus-visible) {
	outline: none;
}

/* ---- Cards ---- */
.cas-widget .cas-card:hover,
.cas-widget .cas-card:focus,
.cas-widget .cas-card:active,
.cas-widget .cas-card:focus-visible,
.cas-widget .cas-card:focus-within {
	background-color: var(--cas-card-bg, var(--cas-panel));
	color: var(--cas-text);
}

.cas-widget .cas-card:focus,
.cas-widget .cas-card:active,
.cas-widget .cas-card:focus-visible {
	border-color: var(--cas-card-hover-border, rgba(227, 163, 58, 0.62));
}

.cas-widget .cas-card.is-selected,
.cas-widget .cas-card.is-selected:hover,
.cas-widget .cas-card.is-selected:focus,
.cas-widget .cas-card.is-selected:active,
.cas-widget .cas-card.is-selected:focus-visible {
	border-color: var(--cas-card-selected-border, var(--cas-gold-bright));
}

/* ---- Thumbnails ---- */
.cas-widget .cas-thumb,
.cas-widget .cas-thumb:hover,
.cas-widget .cas-thumb:focus,
.cas-widget .cas-thumb:active,
.cas-widget .cas-thumb:focus-visible,
.cas-widget .cas-thumb.is-active {
	background-color: var(--cas-thumb-bg, var(--cas-panel));
	background-image: none;
}

.cas-widget .cas-thumb:focus,
.cas-widget .cas-thumb:active,
.cas-widget .cas-thumb:focus-visible {
	border-color: var(--cas-thumb-hover-border, var(--cas-gold-bright));
}

/* ---- Gallery arrows ---- */
.cas-widget .cas-arrow,
.cas-widget .cas-arrow:hover,
.cas-widget .cas-arrow:focus,
.cas-widget .cas-arrow:active,
.cas-widget .cas-arrow:focus-visible {
	background: var(--cas-arrow-bg, rgba(4, 6, 6, 0.72));
}

.cas-widget .cas-arrow:focus,
.cas-widget .cas-arrow:active,
.cas-widget .cas-arrow:focus-visible {
	color: var(--cas-arrow-hover-color, var(--cas-gold-bright));
	border-color: var(--cas-gold-bright);
}

/* ---- Back button ---- */
.cas-widget .cas-back,
.cas-widget .cas-back:hover,
.cas-widget .cas-back:focus,
.cas-widget .cas-back:active,
.cas-widget .cas-back:focus-visible {
	background: var(--cas-back-bg, transparent);
}

.cas-widget .cas-back:focus,
.cas-widget .cas-back:active,
.cas-widget .cas-back:focus-visible {
	color: var(--cas-back-hover-color, var(--cas-gold-bright));
}

/* ---- Fullscreen toggle ---- */
.cas-widget .cas-viewer__fs,
.cas-widget .cas-viewer__fs:hover,
.cas-widget .cas-viewer__fs:focus,
.cas-widget .cas-viewer__fs:active,
.cas-widget .cas-viewer__fs:focus-visible {
	background: var(--cas-fs-bg, rgba(4, 6, 6, 0.62));
}

.cas-widget .cas-viewer__fs:focus,
.cas-widget .cas-viewer__fs:active,
.cas-widget .cas-viewer__fs:focus-visible {
	color: var(--cas-fs-hover-color, var(--cas-gold-bright));
}

/* ---- Sidebar items ---- */
.cas-widget .cas-side-item,
.cas-widget .cas-side-item:hover,
.cas-widget .cas-side-item:focus,
.cas-widget .cas-side-item:active,
.cas-widget .cas-side-item:focus-visible {
	background: var(--cas-side-bg, var(--cas-bg-2));
}

.cas-widget .cas-side-item.is-active,
.cas-widget .cas-side-item.is-active:hover,
.cas-widget .cas-side-item.is-active:focus,
.cas-widget .cas-side-item.is-active:active,
.cas-widget .cas-side-item.is-active:focus-visible {
	background: var(--cas-side-active-bg, linear-gradient(180deg, rgba(199, 138, 40, 0.1), rgba(199, 138, 40, 0.02)));
	border-color: var(--cas-side-active-border, var(--cas-gold));
}

/* ---- Show More / details link ---- */
.cas-widget .cas-btn:link,
.cas-widget .cas-btn:visited {
	color: var(--cas-btn-color, var(--cas-bg));
	background: var(--cas-btn-bg, linear-gradient(180deg, var(--cas-gold-bright), var(--cas-gold)));
	text-decoration: none;
}

.cas-widget .cas-btn:focus,
.cas-widget .cas-btn:active {
	color: var(--cas-btn-hover-color, var(--cas-bg));
	background: var(--cas-btn-hover-bg, var(--cas-btn-bg, linear-gradient(180deg, var(--cas-gold-bright), var(--cas-gold))));
	border-color: var(--cas-btn-hover-border, var(--cas-btn-border, var(--cas-gold-bright)));
	text-decoration: none;
}

/* A button with no URL stays visible but inert. */
.cas-widget .cas-btn.is-disabled,
.cas-widget .cas-btn.is-disabled:hover,
.cas-widget .cas-btn.is-disabled:focus,
.cas-widget .cas-btn.is-disabled:active {
	cursor: default;
	opacity: 1;
	color: var(--cas-btn-color, var(--cas-bg));
	transform: none;
	box-shadow: none;
}

/* =========================================================================
   BATCHED GRID
   Cards past the first batch stay hidden until the visitor asks for them,
   so their lazy images never load with the page.
   ========================================================================= */

.cas-collection__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(18px, 2.2vw, 32px);
}

.cas-loadmore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 48px;
	min-width: min(240px, 100%);
	padding: 13px 32px;
	font-family: inherit;
	font-size: var(--cas-loadmore-size, 0.74rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cas-loadmore-color, var(--cas-gold-bright));
	background: var(--cas-loadmore-bg, transparent);
	border: 1px solid var(--cas-loadmore-border, var(--cas-border));
	border-radius: calc(var(--cas-radius) - 4px);
	cursor: pointer;
	transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cas-loadmore svg {
	width: 1em;
	height: 1em;
	flex: none;
}

.cas-loadmore:hover,
.cas-loadmore:focus-visible {
	color: var(--cas-loadmore-hover-color, var(--cas-bg));
	background: var(--cas-loadmore-hover-bg, var(--cas-gold));
	border-color: var(--cas-loadmore-hover-border, var(--cas-gold-bright));
	transform: translateY(-2px);
}

.cas-widget .cas-loadmore,
.cas-widget .cas-loadmore:hover,
.cas-widget .cas-loadmore:focus,
.cas-widget .cas-loadmore:active,
.cas-widget .cas-loadmore:focus-visible {
	background: var(--cas-loadmore-bg, transparent);
	background-image: none;
}

.cas-widget .cas-loadmore:hover,
.cas-widget .cas-loadmore:focus-visible {
	background: var(--cas-loadmore-hover-bg, var(--cas-gold));
}

/* Newly revealed cards fade up instead of snapping in. */
.cas-cell-reveal {
	animation: cas-cell-in var(--cas-anim-entrance, 620ms) var(--cas-anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes cas-cell-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   WIDGET WIDTH
   Elementor containers force every child widget to 100%; the widget's own
   Maximum Width control writes a higher-specificity rule, and this is the
   fallback for the default 90% when that rule is not present.
   ========================================================================= */

.e-con > .elementor-widget-cas-armor-showcase,
.elementor-widget-cas-armor-showcase {
	margin-inline: auto;
}

/* =========================================================================
   BUNDLES
   Category chips on the cards, and the included list inside the panel.
   ========================================================================= */

.cas-card__cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cas-cat-gap, 5px);
	width: 100%;
	z-index: 1;
}

.cas-cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 32px;
	padding: 2px 6px;
	border: 1px solid var(--cas-cat-border, var(--cas-border));
	border-radius: calc(var(--cas-radius) - 8px);
	background: var(--cas-cat-bg, rgba(199, 138, 40, 0.06));
	color: var(--cas-cat-color, var(--cas-text));
	font-size: var(--cas-cat-size, 0.62rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.cas-cat__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cas-cat-icon-color, var(--cas-gold));
	flex: none;
	width: var(--cas-cat-icon-size, 28px);
	height: var(--cas-cat-icon-size, 28px);
}

/* The label sits on the icon's optical centre, not on its box edge. */
.cas-cat__label {
	display: inline-block;
	line-height: 1;
	padding-top: 1px;
}

.cas-cat__icon svg,
.cas-cat__icon img,
.cas-cat__icon .cas-cat__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.cas-card:hover .cas-cat,
.cas-card.is-selected .cas-cat {
	border-color: var(--cas-gold-muted);
}

/* The chips that did not fit collapse into one counter. */
.cas-cat--more {
	color: var(--cas-cat-color, var(--cas-text));
	letter-spacing: 0.06em;
	cursor: help;
	min-width: 32px;
	padding-inline: 7px;
}

/* Icon-only chips fit every category on one line. */
.cas-card__cats.is-icons-only .cas-cat__label {
	display: none;
}

.cas-card__cats.is-icons-only .cas-cat {
	padding: 6px;
}

.cas-card__cats {
	row-gap: var(--cas-cat-gap, 6px);
}

/* ---- Included list in the expanded panel ---- */

.cas-included {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	/* Flex wrapping keeps every row on the same left edge as the details
	   list beneath it; the flex basis does the spacing, not the gap. */
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	gap: 3px 4px;
	text-align: start;
	max-width: 100%;
}

.cas-included__row {
	display: flex;
	align-items: center;
	gap: 0;
	min-width: 0;
	flex: 0 1 var(--cas-included-col, 150px);
	color: var(--cas-text);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}

.cas-included__label {
	min-width: 0;
	overflow-wrap: break-word;
}

.cas-included__row .cas-cat__icon {
	width: var(--cas-included-icon-box, 62px);
	height: var(--cas-included-icon-box, 62px);
	flex: none;
	border: 1px solid var(--cas-border);
	border-radius: 50%;
	background: var(--cas-bg-2);
}

.cas-included__row .cas-cat__icon svg {
	width: 55%;
	height: 55%;
}

/* The details artwork is a framed medallion, so it fills the circle: the
   plate around it would only draw a second frame. */
.cas-cat__icon.is-image {
	border: 0;
	background: none;
}

.cas-included__row .cas-cat__icon.is-image .cas-cat__img {
	width: 100%;
	height: 100%;
}

/* The count rides on the icon as a small gold badge. */
.cas-cat__count {
	position: absolute;
	top: -4px;
	inset-inline-end: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--cas-gold);
	color: var(--cas-bg);
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	box-shadow: 0 0 0 1px var(--cas-panel);
}

/* ---- Bundle selector tiles ---- */

.cas-sidebar.is-bundle .cas-side-item {
	--cas-side-gap: 8px;
	--cas-side-img-ratio: 305 / 195;
	padding: 0;
	max-width: var(--cas-side-tile-w, 280px);
	margin-inline: auto;
	width: 100%;
}

.cas-sidebar.is-bundle .cas-side-item__img {
	width: 100%;
	border-radius: calc(var(--cas-radius) - 6px);
}

.cas-sidebar.is-bundle .cas-side-item__title {
	font-size: var(--cas-side-title-size, 0.8rem);
	color: var(--cas-text);
}

.cas-sidebar.is-bundle .cas-side-item__price {
	font-size: 0.76rem;
	color: var(--cas-gold-bright);
}

.cas-sidebar.is-bundle.is-layout-overlay .cas-side-item__text {
	padding: 30px 10px 12px;
	gap: 4px;
}

/* The bundle column has to be wide enough for the tile itself. */
.cas-expanded__layout.is-bundle {
	grid-template-columns:
		minmax(0, var(--cas-col-media))
		minmax(min(320px, 100%), var(--cas-col-info))
		minmax(min(300px, 100%), var(--cas-col-side));
}

.cas-expanded__layout.is-bundle.no-sidebar {
	grid-template-columns:
		minmax(0, var(--cas-col-media))
		minmax(min(320px, 100%), var(--cas-col-info));
}

/* =========================================================================
   MOBILE REFINEMENTS
   Declared last on purpose: several bundle rules further up the file carry a
   class more than the base layout selectors, so the phone layout has to be
   able to answer them at the same weight.
   ========================================================================= */

@media (max-width: 767px) {

	/* ---- One column, in DOM order: media, information, selector ---- */
	.cas-expanded__layout,
	.cas-expanded__layout.no-sidebar,
	.cas-expanded__layout.is-bundle,
	.cas-expanded__layout.is-bundle.no-sidebar {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.cas-widget {
		--cas-thumb-w: 88px;
		--cas-thumb-h: 78px;
		--cas-card-media-max-h: 260px;
		--cas-included-icon-box: 44px;
		--cas-side-tile-w: none;
		/* Nothing may spill sideways out of the phone viewport. */
		overflow-x: clip;
	}

	.cas-expanded.is-inline {
		padding: 8px;
	}

	.cas-expanded__inner {
		padding: 14px 12px;
		scroll-margin-top: 90px;
	}

	/* ---- Media column keeps its natural height and never sticks ---- */
	.cas-media-fill .cas-media-col,
	.cas-sticky-media .cas-media-col {
		position: static;
		align-self: start;
	}

	.cas-media-fill .cas-viewer,
	.cas-viewer {
		flex: none;
		max-height: none;
	}

	/* ---- Thumbnails: one scrolling row, fixed cards ---- */
	.cas-thumbs {
		gap: 8px;
	}

	.cas-thumb {
		flex: 0 0 var(--cas-thumb-w);
		min-width: var(--cas-thumb-w);
	}

	.cas-arrow {
		--cas-arrow-w: 40px;
		min-height: 44px;
	}

	.cas-thumbs-wrap.has-arrows {
		padding-inline: 44px;
	}

	/* ---- Information panel ---- */
	.cas-info {
		height: auto;
		padding: 16px 14px;
	}

	.cas-info__title {
		max-width: 100%;
		font-size: clamp(1.15rem, 5.4vw, 1.5rem);
	}

	.cas-included {
		gap: 8px 6px;
		justify-content: start;
	}

	.cas-included__row {
		flex: 0 1 calc(50% - 3px);
		font-size: 0.72rem;
		letter-spacing: 0.05em;
	}

	.cas-pricebox,
	.cas-btn {
		width: 100%;
		max-width: none;
	}

	.cas-btn {
		min-height: 52px;
	}

	/* ---- Other Bundles becomes a snapping carousel ---- */
	.cas-sidebar,
	.cas-sidebar.is-bundle {
		height: auto;
		align-self: start;
		padding: 14px 12px;
	}

	.cas-sidebar__heading {
		white-space: normal;
		overflow-wrap: break-word;
	}

	.cas-sidebar__list {
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 10px;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 2px;
		padding: 3px 3px 10px;
		margin-inline-end: 0;
	}

	/* One card fills the row and the next one peeks in, so the strip
	   reads as swipeable without any extra control. */
	.cas-side-item,
	.cas-sidebar.is-bundle .cas-side-item {
		flex: 0 0 78%;
		width: 78%;
		max-width: 78%;
		min-height: 44px;
		margin-inline: 0;
		scroll-snap-align: start;
		--cas-side-dir: column;
		--cas-side-text-align: center;
		--cas-side-text-items: center;
	}

	.cas-side-item__text {
		flex: none;
	}

	/* ---- Ornaments and touch targets ---- */
	.cas-has-ornaments .cas-ornament::before,
	.cas-has-ornaments .cas-ornament::after {
		width: 14px;
		height: 14px;
	}

	.cas-back,
	.cas-loadmore,
	.cas-viewer__fs {
		min-height: 44px;
	}
}

@media (max-width: 420px) {
	.cas-included__row {
		flex-basis: 100%;
	}

	.cas-side-item,
	.cas-sidebar.is-bundle .cas-side-item {
		flex-basis: 84%;
		width: 84%;
		max-width: 84%;
	}
}

/* =========================================================================
   TABLET AND FOLDABLE REFINEMENTS
   Bound to a range so the phone block above keeps the last word under 768px.
   The bundle grid rule carries an extra class, so these have to answer it at
   the same weight or the three desktop columns survive on a 900px screen.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

	/* ---- Two columns, with the selector on its own row underneath ---- */
	.cas-expanded__layout,
	.cas-expanded__layout.no-sidebar,
	.cas-expanded__layout.is-bundle,
	.cas-expanded__layout.is-bundle.no-sidebar {
		grid-template-columns:
			minmax(0, 52fr)
			minmax(min(280px, 100%), 48fr);
		gap: clamp(14px, 1.8vw, 22px);
	}

	.cas-sidebar,
	.cas-sidebar.is-bundle {
		grid-column: 1 / -1;
		height: auto;
		align-self: start;
		max-height: none;
		padding: 14px;
	}

	/* ---- The selector reads as a swipeable strip rather than a cramped grid ---- */
	.cas-sidebar__list {
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 12px;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		padding: 3px 3px 10px;
		margin-inline-end: 0;
	}

	.cas-side-item,
	.cas-sidebar.is-bundle .cas-side-item {
		flex: 0 0 clamp(190px, 30%, 280px);
		width: auto;
		max-width: 280px;
		min-height: 44px;
		margin-inline: 0;
		scroll-snap-align: start;
		--cas-side-dir: column;
		--cas-side-text-align: center;
		--cas-side-text-items: center;
	}

	.cas-side-item__text {
		flex: none;
	}

	/* ---- The media column keeps a sensible share of the row ---- */
	.cas-media-fill .cas-media-col,
	.cas-sticky-media .cas-media-col {
		position: static;
		align-self: start;
	}

	.cas-media-fill .cas-viewer {
		flex: none;
		max-height: var(--cas-viewer-max-h, 46vh);
	}

	.cas-info {
		height: auto;
		padding: clamp(16px, 2vw, 22px);
	}

	.cas-included__row {
		flex: 0 1 calc(50% - 3px);
	}

	/* Short screens such as a smart display need the panel to stay compact. */
	.cas-expanded__inner {
		padding: clamp(12px, 1.4vw, 20px);
	}
}

@media (min-width: 768px) and (max-width: 1024px) and (max-height: 700px) {
	.cas-widget {
		--cas-viewer-max-h: 52vh;
	}

	.cas-info {
		padding: 14px 16px;
	}
}