/* Cura Graphic Studio — every rule is scoped to .cgs / .cgs-layer so the theme is untouched. */

.cgs, .cgs-layer {
	--cgs-ink: #111111;
	--cgs-muted: #555555;
	--cgs-line: #E5E5E5;
	--cgs-soft: #F5F5F5;
	--cgs-accent: #C4161C;
	--cgs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	color: var(--cgs-ink);
	font-family: var(--cgs-font, inherit);
	box-sizing: border-box;
}
.cgs *, .cgs *::before, .cgs *::after,
.cgs-layer *, .cgs-layer *::before, .cgs-layer *::after { box-sizing: border-box; }
.cgs [hidden], .cgs-layer[hidden], .cgs-layer [hidden] { display: none !important; }

.cgs {
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 0 32px;
	background: #FFFFFF;
	-webkit-tap-highlight-color: transparent;
}

/* Neutralise theme button/link styling inside the component. */
.cgs button, .cgs-layer button {
	appearance: none; -webkit-appearance: none;
	background: none; border: 0; border-radius: 0; box-shadow: none;
	margin: 0; padding: 0; min-height: 0; width: auto; height: auto;
	font: inherit; color: inherit; letter-spacing: inherit; line-height: 1.2;
	text-transform: none; text-decoration: none; text-shadow: none;
	cursor: pointer;
}
.cgs button:disabled, .cgs-layer button:disabled { cursor: not-allowed; }
.cgs a, .cgs-layer a { color: inherit; text-decoration: none; box-shadow: none; }
.cgs img, .cgs-layer img { max-width: none; border: 0; box-shadow: none; border-radius: 0; }
.cgs h2, .cgs h3, .cgs p, .cgs-layer h2, .cgs-layer h3, .cgs-layer p { margin: 0; padding: 0; color: inherit; }

.cgs :focus-visible, .cgs-layer :focus-visible { outline: 2px solid var(--cgs-ink); outline-offset: 3px; }

/* Intro — a centred hero: eyebrow, big display line, one supporting line */
.cgs-intro { position: relative; display: block; text-align: center; padding: 8px 20px 0; }
.cgs-intro-text { max-width: 680px; margin: 0 auto; }
.cgs-eyebrow { font-size: clamp(10px, 2.6vw, 12px); font-weight: 500; letter-spacing: 0.22em; color: var(--cgs-muted); text-transform: uppercase; }
.cgs-title {
	font-size: clamp(32px, 7.4vw, 58px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02;
	margin-top: 10px !important; text-transform: none; text-wrap: balance;
}
.cgs-sub {
	font-size: clamp(15px, 3.4vw, 18px); line-height: 1.45; color: var(--cgs-muted);
	max-width: 460px; margin: 12px auto 0 !important; text-wrap: balance;
}
.cgs-bag { position: absolute; right: 12px; top: 0; z-index: 5; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.cgs-bag span:first-child { display: flex; }
.cgs-bag .cgs-bag-count { right: -2px; }
.cgs-bag-count {
	position: absolute; top: 6px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
	background: var(--cgs-accent); color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* Filters */
.cgs-tabs, .cgs-vibes { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cgs-tabs::-webkit-scrollbar, .cgs-vibes::-webkit-scrollbar, .cgs-bcards::-webkit-scrollbar { display: none; }
.cgs-tabs { gap: 4px; padding: 10px 12px 0; }
.cgs .cgs-tab {
	flex: none; height: 44px; padding: 0 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: #6b6b6b;
	border-bottom: 2px solid transparent;
}
.cgs .cgs-tab.is-on { color: var(--cgs-ink); font-weight: 700; border-bottom-color: var(--cgs-ink); }
.cgs-vibes { gap: 6px; padding: 6px 20px 12px; }
.cgs .cgs-vibe { flex: none; height: 44px; display: flex; align-items: center; }
.cgs .cgs-vibe span {
	display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; white-space: nowrap;
	font-size: 13px; border: 1px solid #D6D6D6; background: #FFFFFF; transition: background .2s, color .2s, border-color .2s;
}
.cgs .cgs-vibe.is-on span { background: var(--cgs-ink); border-color: var(--cgs-ink); color: #FFFFFF; }

.cgs-empty { margin: 8px 20px 0; padding: 48px 20px; background: var(--cgs-soft); text-align: center; }
.cgs-empty p { font-size: 15px; font-weight: 600; margin-bottom: 12px !important; }

/* Stage — prints hanging in a dark 3D space, receding from the lens */
.cgs-stage-wrap { position: relative; }
.cgs-stage {
	position: relative; width: 100%; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
	outline-offset: -3px; cursor: grab; isolation: isolate;
}
.cgs-stage::before, .cgs-stage::after {
	content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%;
	filter: blur(70px); opacity: var(--cgs-blob-o, .5); pointer-events: none;
}
.cgs-stage::before { left: 0%; top: -20%; background: var(--cgs-blob-a, rgba(196,22,28,.17)); }
.cgs-stage::after { right: -2%; bottom: -26%; background: var(--cgs-blob-b, rgba(104,130,205,.2)); }
.cgs-glow { position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(70% 62% at 50% 48%, var(--cgs-glow-a, rgba(255,255,255,.65)), rgba(255,255,255,0) 72%); }
.cgs-grid { display: none; position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%; z-index: 0; opacity: .45; pointer-events: none;
	background-image: linear-gradient(var(--cgs-grid-c, rgba(255,255,255,.14)) 1px, transparent 1px), linear-gradient(90deg, var(--cgs-grid-c, rgba(255,255,255,.1)) 1px, transparent 1px);
	background-size: 100% 26px, 64px 100%;
	transform: perspective(320px) rotateX(62deg); transform-origin: 50% 100%; }
.cgs-ring { display: none; position: absolute; left: 50%; top: 47%; z-index: 0; width: min(62%, 430px); aspect-ratio: 1; transform: translate(-50%,-50%);
	border: 1px solid var(--cgs-ring-c, rgba(255,255,255,.2)); border-radius: 50%; pointer-events: none; }
.cgs-ring::after { content: ""; position: absolute; inset: -28px; border: 1px solid var(--cgs-ring-c, rgba(255,255,255,.1)); border-radius: 50%; }

.cgs-space { position: absolute; inset: 0; } /* no z-index or filter here: the tees must blend with the stage */
.cgs .cgs-item {
	position: absolute; top: 0; left: 0; display: block; padding: 3%;
	transform-origin: 50% 50%; will-change: transform, opacity;
	border-radius: 26px;
	/* Opaque card: a photo shot on white then has no visible edge inside it.
	   The glass is in the stage behind — soft blurred colour the cards sit on. */
	background: var(--cgs-card, #FFFFFF);
	border: 1px solid var(--cgs-card-edge, rgba(255,255,255,.9));
	box-shadow: 0 16px 36px rgba(0,0,0,.07);
	transition: background 420ms ease, box-shadow 420ms ease;
}
.cgs .cgs-item.is-centre {
	background: var(--cgs-card-on, #FFFFFF);
	box-shadow: 0 28px 68px rgba(0,0,0,.14);
}
.cgs-print { display: block; width: 100%; height: 100%; pointer-events: none; }
/* Tees either side sit back a little; the centre one is full strength */
.cgs-print img { filter: grayscale(.2) brightness(1.04); transition: filter 420ms ease; }
.cgs .cgs-item.is-centre .cgs-print img { filter: none; }
.cgs-print img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.cgs-print img.is-swap { animation: cgs-swap 420ms ease both; }
@keyframes cgs-swap { from { opacity: .25; transform: scale(.97); } to { opacity: 1; transform: none; } }

.cgs-new {
	position: absolute; top: 6%; left: 6%; border-radius: 999px; z-index: 3; padding: 5px 8px; background: var(--cgs-accent); color: #FFFFFF;
	mix-blend-mode: normal;
	font-size: 11px; font-weight: 700; letter-spacing: .14em; pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.cgs .cgs-item.is-centre .cgs-new { opacity: 1; }
.cgs-stage.is-dragging { cursor: grabbing; }

.cgs .cgs-arrow {
	position: absolute; top: 50%; margin-top: -23px; z-index: 400; width: 46px; height: 46px; border-radius: 50%;
	background: var(--cgs-arrow-bg, rgba(255,255,255,.12)); color: var(--cgs-arrow-c, #FFFFFF);
	border: 1px solid var(--cgs-arrow-bd, rgba(255,255,255,.22));
	display: flex; align-items: center; justify-content: center; transition: transform .2s ease, opacity .2s;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cgs .cgs-arrow:hover { transform: scale(1.07); }
.cgs .cgs-arrow:disabled { opacity: .3; transform: none; }
.cgs-arrow--prev { left: 18px; }
.cgs-arrow--next { right: 18px; }
.cgs.is-mobile .cgs-arrow { display: none; }

/* Counter, progress line, play/pause */
.cgs-controls { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 300px; margin: 10px auto 0; padding: 0 20px; }
.cgs-count { flex: none; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--cgs-muted); font-variant-numeric: tabular-nums; }
.cgs-progress { position: relative; flex: 1; height: 1px; background: var(--cgs-track-c, var(--cgs-line)); overflow: hidden; }
.cgs-progress span { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; transition: width 600ms var(--cgs-ease); }
.cgs-progress::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--cgs-accent); opacity: 0; }
.cgs-progress span { transition: width 420ms linear; }
.cgs.is-rolling .cgs-progress span { transition: none; }
@keyframes cgs-tick { from { width: 0; } to { width: 100%; } }
.cgs .cgs-play { flex: none; width: 44px; height: 44px; border: 0; color: var(--cgs-muted); display: flex; align-items: center; justify-content: center; transition: color .2s ease; }
.cgs .cgs-play:hover { color: var(--cgs-ink); }
.cgs .cgs-play svg { width: 12px; height: 12px; }

/* Info */
.cgs-info { padding: 10px 20px 0; max-width: 560px; margin: 0 auto; text-align: center; }
.cgs-info .cgs-row, .cgs-swatches, .cgs-sizes { justify-content: center; }
.cgs.is-mobile .cgs-intro { padding-top: 14px; }
.cgs.is-mobile .cgs-info { padding-top: 4px; }
.cgs.is-mobile .cgs-block { margin-top: 6px; }
.cgs.is-mobile .cgs-cta { margin-top: 12px; }
.cgs.is-mobile .cgs-shopall { margin-top: 4px; }
.cgs-name { font-size: clamp(19px, 4.4vw, 25px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.cgs-name .cgs-price { white-space: nowrap; font-weight: 500; color: var(--cgs-muted); }
.cgs-name .cgs-price.has-sep::before { content: "\00B7\00A0"; color: var(--cgs-muted); }
.cgs-tagline { margin-top: 8px !important; font-size: clamp(14px, 3.2vw, 15px); line-height: 1.5; color: var(--cgs-muted); }
.cgs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cgs-fit { margin-top: 6px !important; font-size: 12px; letter-spacing: .04em; color: var(--cgs-muted); }
.cgs-price { font-size: clamp(16px, 4vw, 19px); font-weight: 500; letter-spacing: -0.01em; }
.cgs-price del { color: #8a8a8a; font-weight: 400; margin-right: 6px; }
.cgs-price ins { text-decoration: none; background: none; }

.cgs .cgs-offer {
	margin: 14px auto 0; width: auto; max-width: 100%; min-height: 46px; padding: 0 8px 0 18px;
	background: transparent; border: 1px solid var(--cgs-accent); border-radius: 999px;
	display: inline-flex; align-items: center; gap: 12px; font-family: inherit; cursor: pointer;
	color: var(--cgs-accent); transition: background .2s ease, color .2s ease;
}
.cgs .cgs-offer:hover { background: var(--cgs-accent); color: #FFFFFF; }
.cgs-offer-text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; }
.cgs-offer-text strong { font-size: 14px; font-weight: 600; }
.cgs-offer-text span { font-size: 12px; opacity: .8; }
.cgs-offer-go { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cgs-accent); color: #FFFFFF; }
.cgs .cgs-offer:hover .cgs-offer-go { background: #FFFFFF; color: var(--cgs-accent); }

.cgs .cgs-link { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.cgs .cgs-idea { margin-top: 4px; }
.cgs .cgs-chart-btn { color: var(--cgs-muted); text-decoration: underline; text-underline-offset: 4px; }
.cgs .cgs-chart-btn:hover { color: var(--cgs-ink); }
.cgs .cgs-details { justify-content: center; text-decoration: underline; text-underline-offset: 4px; margin-top: 4px; }

.cgs-block { margin-top: 10px; }
.cgs-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; }
.cgs-label { flex: none; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--cgs-muted); }
.cgs-label.is-alert { color: var(--cgs-accent); }
.cgs-label-val { font-weight: 500; color: var(--cgs-ink); margin-left: 5px; }

.cgs-swatches { display: flex; flex-wrap: wrap; margin: 0; }
.cgs .cgs-swatch { width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; }
.cgs .cgs-swatch span { display: block; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }
.cgs .cgs-swatch.is-on span { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px var(--cgs-ink); }
.cgs .cgs-swatch.is-out span { opacity: 0.35; }
.cgs .cgs-swatches--sm { margin: 0; padding: 0 2px; }
.cgs .cgs-swatches--sm .cgs-swatch { width: 40px; height: 40px; }
.cgs .cgs-swatches--sm .cgs-swatch span { width: 22px; height: 22px; }

.cgs-sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cgs .cgs-size {
	flex: none; min-width: 46px; height: 40px; padding: 0 10px; font-size: 13px; border: 1px solid #D6D6D6; background: transparent;
}
.cgs .cgs-size.is-alert { border-color: var(--cgs-accent); }
.cgs .cgs-size.is-on { background: var(--cgs-ink); border-color: var(--cgs-ink); color: #FFFFFF; }
.cgs .cgs-size:disabled { color: #A6A6A6; border-color: #EEEEEE; text-decoration: line-through; }

.cgs .cgs-btn, .cgs-layer .cgs-btn {
	display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px;
	font-size: 14px; font-weight: 500; letter-spacing: .12em;
}
.cgs .cgs-btn--dark, .cgs-layer .cgs-btn--dark { background: var(--cgs-ink); color: #FFFFFF; }
.cgs .cgs-btn--dark:disabled { background: #DCDCDC; color: #5E5E5E; }
.cgs .cgs-cta { width: 100%; max-width: 420px; margin: 16px auto 0; }
.cgs-msg { min-height: 20px; margin-top: 8px !important; font-size: 13px; color: var(--cgs-accent); }

.cgs-shopall {
	display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 12px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.cgs-shopall span:last-child { display: flex; }

/* Bundle */
.cgs-bundle { margin-top: 32px; padding: 24px 20px 20px; background: var(--cgs-soft); scroll-margin-top: 80px; }
.cgs-bundle-title { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; }
.cgs-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.cgs .cgs-offer-opt { min-height: 64px; padding: 10px 8px; border: 1px solid #D6D6D6; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.cgs .cgs-offer-opt strong { font-size: 14px; letter-spacing: 0.1em; }
.cgs .cgs-offer-opt span { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--cgs-accent); }
.cgs .cgs-offer-opt.is-on { background: var(--cgs-ink); border-color: var(--cgs-ink); color: #FFFFFF; }
.cgs .cgs-offer-opt.is-on span { color: #FFFFFF; }
.cgs-bundle-status { margin-top: 14px !important; font-size: 13px; color: #4a4a4a; }
.cgs-bundle-status.is-alert { color: var(--cgs-accent); }
.cgs-bcards { display: flex; gap: 10px; overflow-x: auto; margin: 12px -20px 16px; padding: 0 20px; scroll-snap-type: x mandatory; align-items: flex-start; scrollbar-width: none; }
.cgs-bcard { flex: none; width: 156px; background: #FFFFFF; border: 2px solid transparent; scroll-snap-align: start; }
.cgs-bcard.is-picked { border-color: var(--cgs-ink); }
.cgs-bcard.is-out { opacity: 0.5; }
.cgs .cgs-bcard-img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--cgs-soft); }
.cgs-bcard-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cgs-free { position: absolute; top: 8px; right: 8px; padding: 4px 6px; background: var(--cgs-accent); color: #FFFFFF; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.cgs-bcard-name { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px; font-size: 12px; font-weight: 600; }
.cgs-check { flex: none; width: 18px; height: 18px; border: 1px solid var(--cgs-ink); display: flex; align-items: center; justify-content: center; }
.cgs-bcard.is-picked .cgs-check { background: var(--cgs-ink); }
.cgs-select-wrap { display: block; padding: 0 8px 10px; }
.cgs-select-wrap > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--cgs-muted); }
.cgs .cgs-select {
	display: block; width: 100%; height: 44px; margin: 4px 0 0; padding: 0 8px; font: inherit; font-size: 13px; color: var(--cgs-ink);
	background: #FFFFFF; border: 1px solid #D6D6D6; border-radius: 0; box-shadow: none;
}
.cgs .cgs-select.is-alert { border-color: var(--cgs-accent); }
.cgs .cgs-bundle-add { width: 100%; }

/* Layers in <body>: toast, sticky bar, sheets */
.cgs-layer { font-family: inherit; }
.cgs-toast, .cgs-sticky {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; min-height: 64px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 12px 10px 20px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.cgs-toast { background: var(--cgs-ink); color: #FFFFFF; animation: cgs-up .25s ease; }
.cgs-toast-text { min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.cgs-toast-text span { color: #D0D0D0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgs-toast-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.cgs-layer .cgs-toast-btn { height: 44px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid #FFFFFF; color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; }
.cgs-layer .cgs-toast-link { height: 44px; padding: 0 8px; display: inline-flex; align-items: center; color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-decoration: underline; text-underline-offset: 4px; }
.cgs-sticky { background: #FFFFFF; border-top: 1px solid var(--cgs-line); color: var(--cgs-ink); animation: cgs-up .2s ease; }
.cgs-sticky-text { min-width: 0; }
.cgs-sticky-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgs-sticky-meta { font-size: 13px; color: #4a4a4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgs-layer.cgs-sticky .cgs-btn { flex: none; height: 44px; padding: 0 20px; font-size: 13px; letter-spacing: 0.14em; }
@media (min-width: 900px) {
	.cgs-toast { left: auto; right: 24px; bottom: 24px; max-width: 520px; }
}

.cgs-sheet { position: fixed; inset: 0; z-index: 99995; }
.cgs-sheet-scrim { position: absolute; inset: 0; background: rgba(17,17,17,0.45); animation: cgs-fade .2s ease; }
.cgs-sheet-panel {
	position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; background: #FFFFFF; display: flex; flex-direction: column;
	transition: transform .2s ease; animation: cgs-up .25s var(--cgs-ease);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 700px) {
	.cgs-sheet-panel { left: 50%; right: auto; width: 600px; margin-left: -300px; }
}
.cgs-sheet-handle { height: 28px; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.cgs-sheet-handle span { width: 40px; height: 4px; border-radius: 2px; background: #CFCFCF; }
.cgs-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 20px; }
.cgs-sheet-head h2 { font-size: 14px; font-weight: 700; letter-spacing: 0.16em; }
.cgs-layer .cgs-sheet-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.cgs-sheet-body { overflow-y: auto; padding: 4px 20px 32px; -webkit-overflow-scrolling: touch; }
.cgs-sheet-body h3 { margin: 20px 0 6px !important; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; }
.cgs-sheet-body p { font-size: 14px; line-height: 1.6; color: #4a4a4a; }
.cgs-sheet-body p + p { margin-top: 8px !important; }
.cgs-sheet-kicker { font-size: 12px !important; letter-spacing: 0.12em; color: var(--cgs-muted) !important; text-transform: uppercase; }
.cgs-idea-top { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.cgs-idea-top img { width: 88px; height: 110px; object-fit: contain; background: var(--cgs-soft); flex: none; }
.cgs-idea-top p { color: #333333 !important; }
.cgs-fitline { margin-top: 8px !important; font-weight: 600; color: #333333 !important; }
.cgs-chart-img { display: block; width: 100%; height: auto; margin-top: 14px; background: var(--cgs-soft); }
.cgs-table-wrap { margin-top: 16px; overflow-x: auto; }
.cgs-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; margin: 0; border: 0; }
.cgs-table th, .cgs-table td { padding: 10px 6px; border: 0; border-bottom: 1px solid #EEEEEE; background: none; white-space: nowrap; }
.cgs-table thead th { font-weight: 600; border-bottom: 1px solid var(--cgs-ink); }
.cgs-table tbody td { color: var(--cgs-muted); }
.cgs-table tr.is-on th, .cgs-table tr.is-on td { background: var(--cgs-soft); color: var(--cgs-ink); }
.cgs-advice { margin-top: 16px; padding: 14px; background: var(--cgs-soft); }
.cgs-advice strong { font-size: 12px; letter-spacing: 0.14em; }
.cgs-advice p { margin-top: 6px !important; color: #333333 !important; }
html.cgs-lock, html.cgs-lock body { overflow: hidden; }

@keyframes cgs-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cgs-fade { from { opacity: 0; } to { opacity: 1; } }

/* Desktop studio: give the info a little more room */
@media (min-width: 900px) {
	.cgs-tabs, .cgs-vibes { justify-content: center; }
	.cgs-bundle { max-width: 1100px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 899px) {
	.cgs-vibes { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.cgs-float img.is-pop { transition: none !important; animation: none !important; }
	.cgs .cgs-item, .cgs-sheet-panel, .cgs-toast, .cgs-sticky, .cgs-sheet-scrim { transition: none !important; animation: none !important; }
}

/* The section sits on a dark stage colour: flip the text and controls to light */
.cgs--onDark {
	--cgs-ink: #FFFFFF;
	--cgs-muted: rgba(255,255,255,.62);
	--cgs-line: rgba(255,255,255,.26);
	--cgs-soft: rgba(255,255,255,.08);
	--cgs-track-c: rgba(255,255,255,.26);
	color: #FFFFFF;
}
.cgs--onDark .cgs-eyebrow { color: rgba(255,255,255,.6); }
.cgs--onDark .cgs-sub, .cgs--onDark .cgs-tagline { color: rgba(255,255,255,.66); }
.cgs--onDark .cgs-vibe span, .cgs--onDark .cgs-size, .cgs--onDark .cgs-select {
	background: transparent; border-color: rgba(255,255,255,.3); color: #FFFFFF;
}
.cgs--onDark .cgs-vibe.is-on span, .cgs--onDark .cgs-size.is-on { background: #FFFFFF; border-color: #FFFFFF; color: #111111; }
.cgs--onDark .cgs-size:disabled { color: rgba(255,255,255,.35); border-color: rgba(255,255,255,.14); }
.cgs--onDark .cgs-tab { color: rgba(255,255,255,.6); }
.cgs--onDark .cgs-tab.is-on { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.cgs--onDark .cgs-fit { border-color: rgba(255,255,255,.3); color: #FFFFFF; }
.cgs--onDark .cgs-price del { color: rgba(255,255,255,.5); }
.cgs--onDark .cgs-btn--dark, .cgs--onDark .cgs-offer-opt.is-on { background: #FFFFFF; color: #111111; }
.cgs--onDark .cgs-btn--dark:disabled { background: rgba(255,255,255,.22); color: rgba(255,255,255,.55); }
.cgs--onDark .cgs-offer { background: transparent; }
.cgs--onDark .cgs-offer-text span { color: rgba(255,255,255,.8); }
.cgs--onDark .cgs-swatch.is-on span { box-shadow: 0 0 0 3px var(--cgs-stage, #0E0E0F), 0 0 0 4px #FFFFFF; }
.cgs--onDark .cgs-bundle { background: rgba(255,255,255,.06); }
.cgs--onDark .cgs-bcard { background: rgba(255,255,255,.06); border-color: transparent; }
.cgs--onDark .cgs-bcard.is-picked { border-color: #FFFFFF; }
.cgs--onDark .cgs-bcard-img { background: rgba(255,255,255,.06); }
.cgs--onDark .cgs-check { border-color: #FFFFFF; }
.cgs--onDark .cgs-bcard.is-picked .cgs-check { background: #FFFFFF; }
.cgs--onDark .cgs-bcard.is-picked .cgs-check svg path { stroke: #111111; }
.cgs--onDark .cgs-offer-opt { background: transparent; border-color: rgba(255,255,255,.3); color: #FFFFFF; }
.cgs--onDark .cgs-empty { background: rgba(255,255,255,.06); }
.cgs--onDark .cgs-play, .cgs--onDark .cgs-nav { border-color: rgba(255,255,255,.3); }
.cgs--onDark :focus-visible { outline-color: #FFFFFF; }
/* The stage art is tuned for dark; soften it when the stage is light */
.cgs--onLight { --cgs-arrow-bg: rgba(255,255,255,.8); --cgs-arrow-c: #111111; --cgs-arrow-bd: rgba(0,0,0,.06); }
/* A dark stage can't melt the white out of a product photo, so there the tees
   keep a white frame and the blend is switched off. */
.cgs--onDark {
	--cgs-card: #FFFFFF; --cgs-card-on: #FFFFFF; --cgs-card-edge: rgba(255,255,255,.2);
	--cgs-glow-a: rgba(255,255,255,.12); --cgs-blob-o: .45;
}
.cgs--onDark .cgs-item { box-shadow: 0 24px 54px rgba(0,0,0,.5); }

/* No-JavaScript fallback: simple product grid */
.cgs-fallback-grid { list-style: none; margin: 16px 0 0; padding: 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 900px) { .cgs-fallback-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cgs-fallback-grid li { margin: 0; padding: 0; }
.cgs-fallback-grid a { display: block; }
.cgs-fallback-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--cgs-soft); display: block; }
.cgs-fallback-name { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; }
.cgs-fallback-price { display: block; font-size: 14px; }

/* ===================================================================
   Template 2 — the 9:16 tower: a column of tees rolling on for ever,
   the middle one opening into a card. Everything fits one portrait block.
   =================================================================== */
.cgs--tower { max-width: 460px; margin-left: auto; margin-right: auto; }
.cgs--tower .cgs-title { font-size: clamp(26px, 7vw, 34px); }
.cgs--tower .cgs-sub { font-size: 14px; margin-top: 8px !important; }
.cgs--tower .cgs-stage { touch-action: pan-x; cursor: ns-resize; }
.cgs--tower .cgs-stage::before { left: -14%; top: -10%; width: 70%; }
.cgs--tower .cgs-stage::after { right: -14%; bottom: -12%; width: 70%; }
.cgs--tower .cgs-arrow { display: none; }

.cgs .cgs-row {
	position: absolute; left: 10px; right: 10px; top: 0; width: auto;
	display: flex; align-items: center; gap: 12px; padding: 0 8px 0 0;
	border: 0; border-radius: 999px; background: transparent; box-shadow: none;
	transform-origin: 50% 50%; will-change: transform, opacity; text-align: left;
	transition: background 320ms ease, box-shadow 320ms ease;
}
.cgs .cgs-row.is-centre {
	background: var(--cgs-card-on, #FFFFFF);
	box-shadow: 0 14px 34px rgba(0,0,0,.13);
}
.cgs-thumb {
	position: relative; flex: none; width: 19%; min-width: 56px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
	background: #FFFFFF; box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.cgs-thumb img {
	width: 118%; height: 118%; margin: -9%; object-fit: cover; object-position: 50% 38%;
	filter: grayscale(.3); transition: filter 320ms ease;
}
.cgs .cgs-row.is-centre .cgs-thumb img { filter: none; }
.cgs-rnew { position: absolute; right: 8%; top: 8%; width: 9px; height: 9px; border-radius: 50%; background: var(--cgs-accent); box-shadow: 0 0 0 2px #FFFFFF; }
.cgs-rtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cgs-rname {
	font-size: clamp(14px, 3.6vw, 16px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cgs-rsub { font-size: 12px; color: var(--cgs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgs-rgo {
	flex: none; height: 34px; padding: 0 16px; border-radius: 999px; background: var(--cgs-ink); color: #FFFFFF;
	display: flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .04em;
	opacity: 0; transform: scale(.8); transition: opacity 260ms ease, transform 260ms ease;
}
.cgs .cgs-row.is-centre .cgs-rgo { opacity: 1; transform: none; }
.cgs--tower.cgs--onDark .cgs-rgo { background: #FFFFFF; color: #111111; }
/* The rolling column fades out at both ends rather than cutting off. */
.cgs--tower .cgs-space {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.cgs-tower-cta { text-align: center; padding: 0 20px; }
.cgs-tower-cta .cgs-offer { margin-top: 8px; }
.cgs--tower .cgs-shopall { margin-top: 10px; }
/* In the narrow tower the chip row must start at the edge, not centred (it would clip). */
.cgs--tower .cgs-vibes, .cgs--tower .cgs-tabs { justify-content: flex-start; padding-left: 16px; padding-right: 16px; }

/* ===================================================================
   Product-UI pass — the section reads as one finished panel:
   a single radius language, hairline edges, soft depth, real states.
   =================================================================== */
.cgs {
	--cgs-r: 30px;              /* panel */
	--cgs-r-md: 18px;           /* inner blocks */
	--cgs-edge: rgba(0,0,0,.07);
	--cgs-lift: 0 1px 2px rgba(0,0,0,.03), 0 16px 44px rgba(0,0,0,.07);
	border-radius: var(--cgs-r);
	border: 1px solid var(--cgs-edge);
	box-shadow: var(--cgs-lift);
	overflow: hidden;
	padding-bottom: 30px;
}
.cgs--onDark { --cgs-edge: rgba(255,255,255,.12); --cgs-lift: 0 18px 50px rgba(0,0,0,.4); }
.cgs--tower { padding-bottom: 24px; }

/* Filters as one segmented control rather than eight loose outlines */
.cgs-vibes {
	gap: 2px; padding: 12px 16px 16px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.cgs .cgs-vibe span {
	height: 36px; padding: 0 15px; border: 0; border-radius: 999px;
	background: var(--cgs-chip, rgba(17,17,17,.05)); color: var(--cgs-muted);
	font-size: 13px; font-weight: 500;
}
.cgs .cgs-vibe:hover span { background: var(--cgs-chip-h, rgba(17,17,17,.09)); color: var(--cgs-ink); }
.cgs .cgs-vibe.is-on span { background: var(--cgs-ink); color: var(--cgs-stage, #FFFFFF); font-weight: 600; }
.cgs--onDark { --cgs-chip: rgba(255,255,255,.1); --cgs-chip-h: rgba(255,255,255,.18); }
.cgs--onDark .cgs-vibe.is-on span { background: #FFFFFF; color: #111111; }
.cgs .cgs-tab { font-size: 12px; letter-spacing: .1em; }

/* One radius language across every control */
.cgs .cgs-btn, .cgs-layer .cgs-btn { border-radius: 999px; letter-spacing: .08em; font-weight: 600; }
.cgs .cgs-cta { box-shadow: 0 6px 18px rgba(0,0,0,.16); transition: transform .18s ease, box-shadow .18s ease; }
.cgs .cgs-cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.cgs .cgs-cta:active:not(:disabled) { transform: translateY(0); }
.cgs .cgs-size { border-radius: 999px; border-color: var(--cgs-edge); min-width: 44px; font-weight: 500; }
.cgs .cgs-size:hover:not(:disabled):not(.is-on) { border-color: var(--cgs-ink); }
.cgs .cgs-arrow { border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.cgs .cgs-select { border-radius: 999px; padding-inline: 14px; }
.cgs-bundle { border-radius: var(--cgs-r-md); margin-inline: 16px; }
.cgs-bcard { border-radius: var(--cgs-r-md); overflow: hidden; }
.cgs .cgs-bcard-img { border-radius: 0; }
.cgs .cgs-offer-opt { border-radius: 999px; }
.cgs-empty { border-radius: var(--cgs-r-md); margin-inline: 16px; }

/* Cards lift a touch under the pointer, the way a product UI responds */
.cgs .cgs-item { cursor: pointer; }
.cgs:not(.cgs--tower) .cgs-item:not(.is-centre):hover { filter: brightness(1.03); }
.cgs .cgs-row:not(.is-centre):hover { background: var(--cgs-chip, rgba(17,17,17,.05)); }
.cgs .cgs-swatch span { transition: box-shadow .18s ease, transform .18s ease; }
.cgs .cgs-swatch:hover:not(.is-on) span { transform: scale(1.08); }

/* Quieter, more deliberate meta type */
.cgs-fit { font-size: 12px; letter-spacing: .02em; opacity: .85; }
.cgs-count { letter-spacing: .06em; }
.cgs-progress { border-radius: 999px; }
.cgs-progress span, .cgs-progress::after { border-radius: 999px; }

/* The stage is the panel's inset surface, not a separate block */
.cgs-stage { border-radius: 0; }
.cgs-info { padding-inline: 24px; }
.cgs-controls { margin-top: 14px; }

@media (max-width: 600px) {
	.cgs { --cgs-r: 24px; padding-bottom: 24px; }
	.cgs-info { padding-inline: 18px; }
}

/* ===================================================================
   Campaign pass — the brief: pure white, no glassmorphism, restrained
   radii, very soft shadows, and a section that sits inside the homepage
   rather than looking like a separate site embedded in it.
   =================================================================== */
.cgs {
	border: 0; box-shadow: none; border-radius: 0; overflow: visible;
	padding-bottom: 34px;
	--cgs-blob-o: 0;                       /* no colour wash behind the cards */
	--cgs-glow-a: rgba(0,0,0,.025);        /* a whisper of depth, nothing more */
	--cgs-edge: rgba(0,0,0,.08);
}
.cgs-stage::before, .cgs-stage::after { display: none; }

/* The heading: one word in Cura red */
.cgs-hl { color: var(--cgs-accent); }
.cgs-eyebrow { letter-spacing: .26em; font-weight: 500; }

/* Restrained corner radii, very soft shadows */
.cgs .cgs-item {
	border-radius: 14px;
	border-color: rgba(0,0,0,.05);
	box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.cgs .cgs-item.is-centre { box-shadow: 0 10px 30px rgba(0,0,0,.09); }
.cgs--onDark .cgs-item { box-shadow: 0 12px 34px rgba(0,0,0,.45); }

/* Filters: white, thin grey border, black text; active is solid black */
.cgs-vibes { gap: 8px; padding: 14px 16px 18px; }
.cgs .cgs-vibe span {
	height: 36px; padding: 0 16px; border-radius: 999px;
	background: transparent; border: 1px solid var(--cgs-edge); color: var(--cgs-ink);
	font-size: 13px; font-weight: 500;
}
.cgs .cgs-vibe:hover span { border-color: var(--cgs-ink); background: transparent; }
.cgs .cgs-vibe.is-on span { background: var(--cgs-ink); border-color: var(--cgs-ink); color: var(--cgs-stage, #FFFFFF); font-weight: 600; }
.cgs--onDark .cgs-vibe.is-on span { background: #FFFFFF; border-color: #FFFFFF; color: #111111; }

/* Add to Bag: black, white, uppercase, minimal radius */
.cgs .cgs-btn, .cgs-layer .cgs-btn { border-radius: 4px; letter-spacing: .14em; font-weight: 600; }
.cgs .cgs-cta { box-shadow: none; transition: opacity .18s ease, transform .18s ease; }
.cgs .cgs-cta:hover:not(:disabled) { transform: none; opacity: .88; box-shadow: none; }
.cgs .cgs-cta.is-added { opacity: 1; }

/* Sizes: simple rectangles */
.cgs .cgs-size { border-radius: 4px; border-color: var(--cgs-edge); }
.cgs .cgs-select { border-radius: 4px; }
.cgs-bundle, .cgs-bcard, .cgs-empty { border-radius: 10px; }
.cgs .cgs-offer-opt { border-radius: 4px; }

/* No unnecessarily tall empty space under the garments */
.cgs.is-mobile .cgs-info { padding-top: 2px; }
.cgs-controls { margin-top: 10px; }

/* ===================================================================
   Mockup pass — matches the approved visual: seven tilted cards on the
   rail, name over "price · TAGLINE", a bag icon and the price inside
   the button, an AUTOPLAY label beside the pause control, uppercase
   chips — and a smaller type scale throughout.
   =================================================================== */

/* Depth, so the cards' rotateY reads as a turn rather than a squash */
.cgs-space { perspective: 950px; perspective-origin: 50% 50%; transform-style: preserve-3d; }
.cgs.is-mobile .cgs-space { perspective: 760px; }
.cgs .cgs-item { transform-style: preserve-3d; backface-visibility: hidden; }

/* Type scale — smaller than before across the whole section */
.cgs-eyebrow { font-size: clamp(9px, 2.2vw, 11px); letter-spacing: .3em; }
.cgs-title { font-size: clamp(26px, 5vw, 46px); letter-spacing: -0.03em; line-height: 1.04; margin-top: 8px !important; }
.cgs-sub { font-size: clamp(13px, 2.6vw, 15px); max-width: 420px; margin-top: 10px !important; }
.cgs-name { font-size: clamp(18px, 3.4vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.cgs-info { max-width: 520px; padding-top: 6px; }

/* Chips: uppercase, letterspaced, a touch smaller */
.cgs .cgs-vibe span {
	height: 32px; padding: 0 14px; font-size: 11px; font-weight: 500;
	text-transform: uppercase; letter-spacing: .12em;
}
.cgs-vibes { gap: 7px; padding: 12px 16px 16px; }
.cgs .cgs-vibe { height: 40px; }

/* Price · TAGLINE on one line under the name */
.cgs-name .cgs-price, .cgs-name .cgs-price.has-sep::before { display: none; }
.cgs-meta {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-top: 7px; min-height: 18px; flex-wrap: wrap;
}
.cgs-meta .cgs-price {
	display: inline-block; margin: 0; font-size: clamp(14px, 2.8vw, 16px);
	font-weight: 600; letter-spacing: -0.01em; color: var(--cgs-ink); white-space: nowrap;
}
.cgs-meta .cgs-tagline {
	margin-top: 0 !important; font-size: 11px; font-weight: 500; line-height: 1.4;
	letter-spacing: .13em; text-transform: uppercase; color: var(--cgs-muted);
}
.cgs-meta .cgs-sep { display: none; width: 1px; height: 12px; background: var(--cgs-line); flex: none; }
.cgs-meta.has-both .cgs-sep { display: block; }
.cgs--onDark .cgs-meta .cgs-price { color: #FFFFFF; }
.cgs--onDark .cgs-meta .cgs-sep { background: rgba(255,255,255,.28); }
.cgs-fit { margin-top: 5px !important; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }

/* Add to Bag: [bag] ADD TO BAG — ₦price */
.cgs .cgs-cta { height: 48px; max-width: 360px; margin-top: 14px; gap: 10px; padding: 0 22px; }
.cgs .cgs-cta .cgs-cta-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cgs .cgs-cta .cgs-cta-ico svg { width: 16px; height: 16px; display: block; }
.cgs .cgs-cta .cgs-cta-label { font-size: 12px; font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
.cgs .cgs-cta .cgs-cta-price { font-size: 12px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; opacity: .82; }
.cgs .cgs-cta .cgs-cta-price:empty { display: none; }
.cgs .cgs-cta .cgs-cta-price::before { content: "\2014\00A0"; opacity: .6; }
.cgs .cgs-cta.is-out .cgs-cta-ico, .cgs .cgs-cta.is-out .cgs-cta-price { display: none; }

/* Counter · progress · AUTOPLAY */
.cgs-controls { gap: 14px; max-width: 360px; margin-top: 12px; }
.cgs-count { font-size: 10px; letter-spacing: .14em; }
.cgs-playwrap { flex: none; display: inline-flex; align-items: center; gap: 7px; color: var(--cgs-muted); }
.cgs .cgs-playwrap .cgs-play { width: 22px; height: 22px; }
.cgs .cgs-playwrap .cgs-play svg { width: 9px; height: 9px; }
.cgs-playlabel { font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.cgs--onDark .cgs-playwrap { color: rgba(255,255,255,.66); }

/* Labels and buttons below, trimmed to match */
.cgs-label { font-size: 11px !important; letter-spacing: .1em; }
.cgs .cgs-size { height: 40px; font-size: 12px; }
.cgs-shopall { font-size: 11px; letter-spacing: .18em; margin-top: 10px; }
.cgs .cgs-offer { min-height: 40px; font-size: 11px; letter-spacing: .12em; }

@media (max-width: 719px) {
	.cgs-meta { gap: 8px; }
	.cgs-meta .cgs-tagline { font-size: 10px; letter-spacing: .11em; }
	.cgs .cgs-cta { max-width: 100%; }
}

/* The row runs off both edges rather than being cut square */
.cgs--tower .cgs-space { perspective: none; transform-style: flat; }

/* ===================================================================
   Folding-screen rail — the panels meet edge to edge and the ones
   either side are turned towards the middle, so the row reads as one
   continuous wall rather than separate floating cards. Only the middle
   panel faces front, and it steps forward out of the wall.
   =================================================================== */
.cgs:not(.cgs--tower) .cgs-stage {
	background:
		radial-gradient(120% 90% at 50% 42%, #FFFFFF 0%, #FBFBFB 52%, #F1F1F1 100%);
}
.cgs:not(.cgs--tower) .cgs-space { perspective: 880px; }

.cgs:not(.cgs--tower) .cgs-item {
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: #FFFFFF;
	box-shadow: none;
	transition: border-radius 420ms var(--cgs-ease), box-shadow 420ms var(--cgs-ease);
}
/* A faint veil keeps the folded panels behind the hero without dimming
   the photograph itself. */
.cgs:not(.cgs--tower) .cgs-item::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: rgba(18,18,20,.028);
	transition: opacity 420ms var(--cgs-ease); opacity: 1;
}
.cgs:not(.cgs--tower) .cgs-item.is-centre::after { opacity: 0; }
.cgs:not(.cgs--tower) .cgs-item.is-centre {
	border-radius: 20px;
	box-shadow: 0 26px 60px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.06);
}
/* The photo fills the panel; the hero gets a little breathing room */
.cgs:not(.cgs--tower) .cgs-print { padding: 7%; transition: padding 420ms var(--cgs-ease); }
.cgs:not(.cgs--tower) .cgs-item.is-centre .cgs-print { padding: 9%; }
.cgs:not(.cgs--tower) .cgs-print img { filter: none; }

.cgs--onDark:not(.cgs--tower) .cgs-stage { background: #111113; }
.cgs--onDark:not(.cgs--tower) .cgs-item::after { background: rgba(0,0,0,.3); }

/* ===================================================================
   Glass backdrop, full-bleed rail, a quieter type scale and a button
   that gives a small shake.
   =================================================================== */

/* --- Backdrop ------------------------------------------------------ */
.cgs { background: var(--cgs-stage, #FFFFFF); }
.cgs--glass {
	position: relative;
	background:
		/* the diagonal sheen across the sheet */
		linear-gradient(118deg,
			rgba(255,255,255,0) 14%,
			rgba(255,255,255,.55) 33%,
			rgba(255,255,255,.26) 47%,
			rgba(255,255,255,0) 63%),
		/* light pooling top-left, the tint deepening bottom-right */
		radial-gradient(120% 95% at 22% 8%, rgba(255,255,255,.72), rgba(255,255,255,0) 58%),
		linear-gradient(155deg,
			color-mix(in srgb, var(--cgs-stage) 42%, #FFFFFF) 0%,
			var(--cgs-stage) 52%,
			color-mix(in srgb, var(--cgs-stage) 78%, #6E8FD6) 100%);
}
/* Browsers without color-mix still get the tint, just without the shading. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.cgs--glass { background: linear-gradient(118deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.5) 33%, rgba(255,255,255,0) 63%), var(--cgs-stage); }
}
/* The bright rim that makes it read as a sheet of glass rather than a wash */
.cgs--glass::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.5);
}
.cgs--glass > * { position: relative; z-index: 1; }
.cgs--glass:not(.cgs--tower) .cgs-stage { background: transparent; }
.cgs--glass .cgs-glow { opacity: .4; }

/* --- Full bleed ---------------------------------------------------- */
/* Breaking out of the theme's content width is measured in JS, not with
   100vw: vw includes the scrollbar, so a vw break-out is a few pixels too
   wide and scrolls the whole page sideways. Until that measurement lands
   the section simply stays inside its container — never misaligned. */
.cgs--full {
	padding-left: 0; padding-right: 0;
	overflow-x: clip;
}
@supports not (overflow-x: clip) { .cgs--full { overflow-x: hidden; } }
.cgs--full.is-bleed { max-width: none; }
.cgs--full .cgs-intro, .cgs--full .cgs-vibes, .cgs--full .cgs-tabs,
.cgs--full .cgs-info, .cgs--full .cgs-bundle { max-width: 1240px; margin-left: auto; margin-right: auto; }
.cgs--full .cgs-info { max-width: 520px; }
.cgs--full.cgs--tower { max-width: 460px; margin-left: auto; margin-right: auto; }

/* --- Type, trimmed back --------------------------------------------- */
.cgs-title { font-size: clamp(23px, 3.9vw, 38px); letter-spacing: -0.028em; }
.cgs-name { font-size: clamp(16px, 2.5vw, 20px); }
.cgs-meta .cgs-price { font-size: clamp(13px, 2.3vw, 15px); }
.cgs-sub { font-size: clamp(13px, 2.3vw, 15px); }

/* --- Add to Bag ------------------------------------------------------ */
.cgs .cgs-cta { height: 44px; max-width: 320px; padding: 0 18px; gap: 9px; }
.cgs .cgs-cta .cgs-cta-label { font-size: 11px; letter-spacing: .15em; }
.cgs .cgs-cta .cgs-cta-price { font-size: 11px; }
.cgs .cgs-cta .cgs-cta-ico svg { width: 15px; height: 15px; }
@keyframes cgs-shake {
	0%, 100% { transform: translateX(0) rotate(0); }
	15% { transform: translateX(-5px) rotate(-.7deg); }
	30% { transform: translateX(4px) rotate(.6deg); }
	45% { transform: translateX(-3px) rotate(-.45deg); }
	60% { transform: translateX(2px) rotate(.3deg); }
	78% { transform: translateX(-1px) rotate(-.15deg); }
}
.cgs .cgs-cta.is-shake { animation: cgs-shake 620ms cubic-bezier(.36,.07,.19,.97) both; }
@media (prefers-reduced-motion: reduce) { .cgs .cgs-cta.is-shake { animation: none !important; } }

/* On glass the white cards need a touch more lift to separate from the sheet */
.cgs--glass:not(.cgs--tower) .cgs-item { box-shadow: 0 2px 10px rgba(30,52,100,.10); }
.cgs--glass:not(.cgs--tower) .cgs-item.is-centre { box-shadow: 0 26px 58px rgba(30,52,100,.22), 0 4px 14px rgba(30,52,100,.12); }
.cgs--glass:not(.cgs--tower) .cgs-item::after { background: rgba(28,44,86,.05); }

/* ===================================================================
   The counter / progress / autoplay strip comes off the design, and the
   size buttons become solid white so they read against the glass.
   =================================================================== */

/* The strip goes, but a pause control has to stay reachable: moving
   content needs a way to stop it. It is hidden until it takes keyboard
   focus, then appears in place. Hover, touch and focus already pause the
   rail, and reduced-motion never starts it. */
.cgs-count, .cgs-progress { display: none !important; }
.cgs-controls { min-height: 0; margin: 0; padding: 0; gap: 0; }
.cgs .cgs-playwrap {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; white-space: nowrap; clip-path: inset(50%); border: 0;
}
.cgs .cgs-playwrap:focus-within {
	position: static; width: auto; height: auto; margin: 10px auto 0; padding: 0 10px;
	overflow: visible; clip-path: none;
}
.cgs .cgs-playwrap:focus-within .cgs-playlabel { display: inline; }

/* Size buttons: white, a clear edge, ink-black type */
.cgs .cgs-size {
	background: #FFFFFF;
	border: 1px solid #D9DCE3;
	color: var(--cgs-ink);
	font-size: 13px; font-weight: 600; letter-spacing: .04em;
	min-width: 48px; height: 42px;
	box-shadow: 0 1px 2px rgba(22,36,70,.06);
}
.cgs .cgs-size:hover:not(:disabled):not(.is-on) { border-color: var(--cgs-ink); background: #FFFFFF; }
.cgs .cgs-size.is-on { background: var(--cgs-ink); border-color: var(--cgs-ink); color: #FFFFFF; box-shadow: none; }
.cgs .cgs-size:disabled { background: rgba(255,255,255,.5); color: #A9AEB8; border-color: #E6E8ED; box-shadow: none; }
.cgs-sizes { gap: 7px; }
.cgs .cgs-chart-btn { font-size: 12px; }