/**
 * Cataleya Product Options — frontend styles
 * Aligned cu prototype-ul v07 (frozen contract).
 * Brand: #c61932, font Albert Sans, BEM cu prefix ct-options__
 */

.ct-options {
	/* Design tokens — synced cu prototype-ul */
	--ct-brand:         #c61932;
	--ct-brand-hover:   #a51428;
	--ct-brand-tint:    rgba(198, 25, 50, 0.10);
	--ct-brand-soft:    rgba(198, 25, 50, 0.05);
	--ct-brand-ghost:   rgba(198, 25, 50, 0.20);
	--ct-text:          #1e2327;
	--ct-text-muted:    #6b7280;
	--ct-text-subtle:   #9ca3af;
	--ct-border:        #e0e0e0;
	--ct-border-hover:  #c9ccd1;
	--ct-bg:            #ffffff;
	--ct-bg-muted:      #f3f4f6;
	--ct-error:         #c61932;
	--ct-warning:       #d97706;
	--ct-radius:        4px;
	--ct-space-2:       8px;
	--ct-space-3:       12px;
	--ct-space-4:       16px;
	--ct-ease:          cubic-bezier(0.4, 0, 0.2, 1);
	--ct-base:          180ms;
	--ct-fast:          120ms;
	--ct-slow:          200ms;

	margin: var(--ct-space-2) 0 var(--ct-space-4);
	font-family: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--ct-text);
}

.ct-options__group {
	margin-bottom: var(--ct-space-4);
}

.ct-options__group:last-child {
	margin-bottom: 0;
}

/* Outer field wrapper */
.ct-options__field {
	margin-bottom: var(--ct-space-4);
}

.ct-options__field:last-child {
	margin-bottom: 0;
}

/* ============================================================
 * FLOATING LABEL PATTERN (synced cu proto v07)
 *
 * Selectoarele sunt prefixate cu .ct-options pentru specificity boost
 * (0,2,0) care bate Shoptimizer's input[type="text"] (0,1,1).
 *
 * Resetăm explicit min-height/max-height/box-shadow/margin/appearance
 * ca să neutralizăm complet stilul parent theme-ului în scope-ul plugin-ului.
 * ============================================================ */

.ct-options__floating {
	position: relative;
}

.ct-options .ct-options__floating-input,
.ct-options .ct-options__floating-textarea {
	width: 100%;
	margin: 0;
	padding: 24px var(--ct-space-4) 6px;
	border: 1px solid var(--ct-border)!important;
	border-radius: var(--ct-radius)!important;
	background: var(--ct-bg)!important;
	box-shadow: none!important;
	font-size: 16px!important;
	font-family: inherit;
	color: var(--ct-text);
	line-height: 1.4;
	box-sizing: border-box;
	-webkit-appearance: none!important;
	appearance: none;
	transition:
		border-color var(--ct-base) var(--ct-ease),
		box-shadow var(--ct-base) var(--ct-ease);
}

.ct-options .ct-options__floating-input {
	height: 56px;
	min-height: 0;
	max-height: none;
}

.ct-options .ct-options__floating-textarea {
	min-height: 56px;
	max-height: none;
	padding: 26px var(--ct-space-4) var(--ct-space-3);
	resize: vertical;
	line-height: 1.5;
}

.ct-options .ct-options__floating-input:hover,
.ct-options .ct-options__floating-textarea:hover {
	border-color: var(--ct-border-hover);
}

.ct-options .ct-options__floating-input:focus,
.ct-options .ct-options__floating-textarea:focus {
	outline: none!important;
	border-color: var(--ct-brand)!important;
	box-shadow: 0 0 0 3px var(--ct-brand-tint)!important;
}

/* Empty/default: label centered (input) or near top (textarea), FULL color */
.ct-options .ct-options__floating-label {
	position: absolute;
	left: var(--ct-space-4);
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: var(--ct-text);
	pointer-events: none;
	transition: all var(--ct-base) var(--ct-ease);
	background: transparent;
}

.ct-options .ct-options__floating-textarea ~ .ct-options__floating-label {
	top: 22px;
	transform: none;
}

/* Floated state: focused OR has value */
.ct-options .ct-options__floating-input:focus ~ .ct-options__floating-label,
.ct-options .ct-options__floating-input:not(:placeholder-shown) ~ .ct-options__floating-label,
.ct-options .ct-options__floating-textarea:focus ~ .ct-options__floating-label,
.ct-options .ct-options__floating-textarea:not(:placeholder-shown) ~ .ct-options__floating-label {
	top: 6px;
	transform: none;
	font-size: 13px;
	color: var(--ct-text-muted);
}

/* On focus — brand color pe label */
.ct-options .ct-options__floating-input:focus ~ .ct-options__floating-label,
.ct-options .ct-options__floating-textarea:focus ~ .ct-options__floating-label {
	color: var(--ct-brand);
}



/* ============================================================
 * ERROR STATE — JS adaugă .ct-options__field--error pe outer
 * ============================================================ */

.ct-options__field--error .ct-options__floating-input,
.ct-options__field--error .ct-options__floating-textarea {
	border-color: var(--ct-error);
}

.ct-options__field--error .ct-options__floating-input:focus,
.ct-options__field--error .ct-options__floating-textarea:focus {
	box-shadow: 0 0 0 3px var(--ct-brand-tint);
}

.ct-options__field--shake .ct-options__floating-input,
.ct-options__field--shake .ct-options__floating-textarea {
	animation: ct-options-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes ct-options-shake {
	10%, 90%      { transform: translateX(-2px); }
	20%, 80%      { transform: translateX(3px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60%      { transform: translateX(5px); }
}

/* ============================================================
 * INLINE ERROR (proto-style: cerc roșu cu ! alb)
 * ============================================================ */

.ct-options__error {
	font-size: 13px;
	color: var(--ct-error);
	margin-top: var(--ct-space-2);
	display: flex;
	align-items: center;
	gap: 6px;
	animation: ct-options-error-fade-in 0.2s ease;
}

.ct-options__error[hidden] {
	display: none;
}

.ct-options__error::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ct-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 4v3M7 9.5v.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

@keyframes ct-options-error-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * COUNTER (proto-aligned)
 * ============================================================ */

.ct-options__counter {
	display: flex;
	justify-content: flex-end;
	font-size: 12px;
	color: var(--ct-text-subtle);
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
	transition: color var(--ct-base) var(--ct-ease);
}

.ct-options__counter-current {
	font-variant-numeric: tabular-nums;
}

.ct-options__counter--warning {
	color: var(--ct-warning);
}

.ct-options__counter--exceeded {
	color: var(--ct-error);
	font-weight: 500;
}

/* ============================================================
 * HELPER TEXT
 * ============================================================ */

.ct-options__helper {
	font-size: 13px;
	color: var(--ct-text-muted);
	margin-top: var(--ct-space-2);
	line-height: 1.4;
}

/* ============================================================
 * ACCESSIBILITY
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.ct-options__field--shake .ct-options__floating-input,
	.ct-options__field--shake .ct-options__floating-textarea,
	.ct-options__error,
	.ct-options__floating-input,
	.ct-options__floating-textarea,
	.ct-options__floating-label,
	.ct-options__counter {
		animation: none;
		transition: none;
	}
}


/* ============================================================
  * COMMON — Label + required marker (shared across field types)
  * ============================================================ */
.ct-options__label {
	display: block;
	margin-bottom: var(--ct-space-2);
	font-weight: 600;
	font-size: 17px;
	color: var(--ct-text);
}

/* Required marker `*` — două variante semantice cu același rendering:
 * - .ct-options__floating-required → inline în floating label (Field\Text, Field\Number)
 * - .ct-options__required          → în label normal deasupra grid-ului (Field\Choices,
 *                                    Field\ColorSwatches, Field\ImageSwatches, Field\Upload)
 * Clasele rămân disjoint în PHP ca să poată fi styling-uite distinct în viitor
 * dacă apare nevoia (ex: dimensiune redusă pe floating ca să încapă în label 13px).
 * Deocamdată au exact aceleași reguli, deci combinator selector. */
.ct-options__floating-required,
.ct-options__required {
	color: var(--ct-brand);
	margin-left: 0;
}

/* ============================================================
 * CHOICES — Pattern 2 (size cards, proto-aligned)
 * ============================================================ */


.ct-options__sizes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}

.ct-options__size {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: var(--ct-space-3) var(--ct-space-2);
	background: var(--ct-bg);
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	cursor: pointer;
	transition:
		border-color var(--ct-base) var(--ct-ease),
		background-color var(--ct-base) var(--ct-ease);
	font-family: inherit;
	text-align: center;
}

.ct-options__size:hover {
	border-color: var(--ct-border-hover);
}

.ct-options__size:focus-visible {
	outline: none;
	border-color: var(--ct-brand);
	box-shadow: 0 0 0 3px var(--ct-brand-tint);
}

.ct-options__size--selected {
	border-color: var(--ct-brand);
	border-width: 2px;
	/* Compensate border-width 1→2 ca să nu shifte content-ul */
	padding: calc(var(--ct-space-3) - 1px) calc(var(--ct-space-2) - 1px);
	background: var(--ct-brand-soft);
}

.ct-options__size-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ct-text);
	line-height: 1.2;
}

.ct-options__size--selected .ct-options__size-name {
	color: var(--ct-brand);
}

.ct-options__size-price {
	font-size: 13px;
	color: var(--ct-text-muted);
	line-height: 1.6;
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.ct-options__size-strike {
	text-decoration: line-through;
	color: var(--ct-text-subtle);
	font-size: 11px;
}

.ct-options__size-popular {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 14px;
	height: 14px;
	color: var(--ct-brand);
	z-index: 1;
	pointer-events: none;
}

/* Hidden choices — display none până se face expand via toggle.
   Convenția: server-side render aplică class --hidden pe choices cu flag
   hidden:true în profile config. Pe expand, JS adaugă class --expanded pe
   container .ct-options__sizes, iar regula a doua le re-arată. */
.ct-options__size--hidden {
	display: none;
}

.ct-options__sizes--expanded .ct-options__size--hidden {
	display: flex;
}

/* Toggle button "Vezi toate dimensiunile" — apare doar dacă există choices ascunse.
   Plasat sibling cu .ct-options__sizes (NU în interior), rupere de ritm vizual
   intenționată ca să separe categoriile cognitive: alegere (grid) vs navigare (link).
   Icon leading (circle-plus pe collapsed, circle-minus pe expanded) — semantic
   mai clar decât chevron + visual anchor cu brand color care contrastează cu
   text-ul muted, atrăgând ochiul instant la zona acțiune.
   Aliniat stânga (justify-content: flex-start) — follows F-pattern reading RO,
   match-uiește cu left-edge al grid-ului deasupra. Full-width păstrat pentru
   click-target generos (entire row e clickable). */
.ct-options__sizes-toggle {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-top: var(--ct-space-3);
	padding: var(--ct-space-2) 0;
	background: transparent;
	border: none;
	color: var(--ct-text-muted);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: color var(--ct-base) var(--ct-ease);
}

.ct-options__sizes-toggle:hover,
.ct-options__sizes-toggle:focus-visible {
	color: var(--ct-text);
	outline: none;
}

.ct-options__sizes-toggle-icon {
	width: 18px;
	height: 18px;
	color: var(--ct-brand);
	flex-shrink: 0;
	transition: color var(--ct-base) var(--ct-ease);
}

/* Toggle icon visibility — circle-plus default visible, circle-minus pe expanded.
   Pure CSS swap pe aria-expanded, zero JS pentru icon toggle.
   !important folosit defensiv vs potențiale override-uri de la theme/plugins
   externe care setează display pe svg.* selector. */
.ct-options__sizes-toggle-icon--minus {
	display: none !important;
}

.ct-options__sizes-toggle[aria-expanded="true"] .ct-options__sizes-toggle-icon--plus {
	display: none !important;
}

.ct-options__sizes-toggle[aria-expanded="true"] .ct-options__sizes-toggle-icon--minus {
	display: inline-block !important;
}

/* Error + shake state — applied prin .ct-options__field--error/--shake din JS */
.ct-options__field--error .ct-options__size {
	border-color: var(--ct-error);
}

.ct-options__field--shake .ct-options__sizes {
	animation: ct-options-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Subtotal global (Issue 3 refactor) — randerat de ProductPage înainte de ATC.
   Era anterior per-field în Choices; acum un singur element care sumează
   cross-field. JS toggle visibility după prima selecție cu pricing.
   Visual hierarchy distinct ca "final price" indicator: border-top separator
   + padding generos + font ușor mai mare decât field labels. */
.ct-options__subtotal {
	margin-top: var(--ct-space-4);
	padding-top: var(--ct-space-4);
	border-top: 1px solid #e0e0e0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 18px;
	font-weight: 600;
}

.ct-options__subtotal-amount {
	color: var(--ct-brand);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}


/* ============================================================
 * FILE UPLOAD — full upload field styling (Pas 3.4a + iterații)
 * ============================================================ */

.ct-options__upload-container {
	display: block;
}

/* Empty upload zone (visible initial) */
.ct-options__upload {
	display: flex;
	align-items: center;
	gap: var(--ct-space-3);
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	background: var(--ct-bg);
	padding: var(--ct-space-4);
	min-height: 83px;
	cursor: pointer;
	transition: all var(--ct-base) var(--ct-ease);
}

.ct-options__upload:hover,
.ct-options__upload:focus-visible {
	border-color: var(--ct-brand);
	background: var(--ct-brand-tint);
	outline: none;
}

.ct-options__upload-icon {
	width: 28px;
	height: 28px;
	color: var(--ct-brand);
	flex-shrink: 0;
}

.ct-options__upload-text {
	flex: 1;
	min-width: 0;
}

.ct-options__upload-title {
	font-size: 15px;
	color: var(--ct-text-muted);
	margin: 0;
	font-weight: 500;
}

.ct-options__upload-hint {
	font-size: 12px;
	color: var(--ct-text-muted);
	margin: 2px 0 0;
}

/* Thumbnails grid */
.ct-options__upload-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: var(--ct-space-2);
}

.ct-options__upload-thumb {
	position: relative;
	aspect-ratio: 1;
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	background: var(--ct-bg-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--ct-text-subtle);
	cursor: pointer;
	overflow: hidden;
	transition: all var(--ct-base) var(--ct-ease);
	padding: 0;
}

.ct-options__upload-thumb:hover {
	border-color: var(--ct-border-hover);
	transform: scale(1.04);
}

.ct-options__upload-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ct-options__upload-thumb--add {
	border-style: dashed;
	background: transparent;
	color: var(--ct-text-muted);
	font-size: 22px;
}

.ct-options__upload-thumb--add:hover {
	border-color: var(--ct-brand);
	color: var(--ct-brand);
	background: var(--ct-brand-tint);
	transform: none;
}

/* × delete button pe thumb */
.ct-options__upload-thumb-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	opacity: 0;
	transition: opacity var(--ct-fast) var(--ct-ease);
	cursor: pointer;
	padding: 0;
}

.ct-options__upload-thumb:hover .ct-options__upload-thumb-remove {
	opacity: 1;
}

/* Mobile: × persistent și mai mare */
@media (hover: none) {
	.ct-options__upload-thumb-remove {
		width: 28px;
		height: 28px;
		font-size: 18px;
		opacity: 1;
	}
}

/* Placeholder uploading state */
.ct-options__upload-thumb--uploading {
	background: var(--ct-bg-muted);
	cursor: default;
	pointer-events: none;
	overflow: hidden;
}

.ct-options__upload-thumb--uploading:hover {
	transform: none;
	border-color: var(--ct-border);
}

.ct-options__upload-thumb--uploading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 2px solid rgba(198, 25, 50, 0.2);
	border-top-color: var(--ct-brand);
	border-radius: 50%;
	animation: ct-options-spin 0.8s linear infinite;
	z-index: 2;
}

@keyframes ct-options-spin {
	to { transform: rotate(360deg); }
}

/* Progress fill water-level din jos */
.ct-options__upload-thumb-progress {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.ct-options__upload-thumb-progress-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0;
	background: rgba(0, 0, 0, 0.08);
	transition: height var(--ct-slow) var(--ct-ease);
}

/* Deleting state */
.ct-options__upload-thumb--deleting {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity var(--ct-fast) var(--ct-ease);
}

/* ============================================================
 * LIGHTBOX — preview + navigation + delete (Pas 3.4b-5)
 * ============================================================ */

.ct-options__lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	z-index: 999999;
	padding: 60px 5vw 80px;
	opacity: 0;
	transition: background var(--ct-slow) var(--ct-ease), opacity var(--ct-slow) var(--ct-ease);
}

.ct-options__lightbox--visible {
	background: rgba(0, 0, 0, 0.88);
	opacity: 1;
}

/* Content container — image takes remaining space */
.ct-options__lightbox-content {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	width: 100%;
	max-width: 100%;
}

.ct-options__lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
	user-select: none;
	-webkit-user-drag: none;
}

/* Close × top-right */
.ct-options__lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ct-text);
	border: 0;
	border-radius: 50%;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background var(--ct-fast) var(--ct-ease), transform var(--ct-fast) var(--ct-ease);
}

.ct-options__lightbox-close:hover,
.ct-options__lightbox-close:focus-visible {
	background: white;
	transform: scale(1.08);
	outline: none;
}

/* Navigation arrows */
.ct-options__lightbox-prev,
.ct-options__lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ct-text);
	border: 0;
	border-radius: 50%;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 4px 0;
	transition: background var(--ct-fast) var(--ct-ease), transform var(--ct-fast) var(--ct-ease);
}

.ct-options__lightbox-prev { left: 16px; }
.ct-options__lightbox-next { right: 16px; }

.ct-options__lightbox-prev:hover,
.ct-options__lightbox-next:hover,
.ct-options__lightbox-prev:focus-visible,
.ct-options__lightbox-next:focus-visible {
	background: white;
	transform: translateY(-50%) scale(1.08);
	outline: none;
}

.ct-options__lightbox-prev[disabled],
.ct-options__lightbox-next[disabled] {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

/* Counter "X / Y" top center */
.ct-options__lightbox-counter {
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	pointer-events: none;
	user-select: none;
}
/* Actions container — Șterge + Închide jos center */
.ct-options__lightbox-actions {
	flex-shrink: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.ct-options__lightbox-delete,
.ct-options__lightbox-dismiss {
	flex-shrink: 0;
	padding: 12px 28px;
	min-width: 140px;
	font-size: 15px;
	font-weight: 500;
	border-radius: 999px;
	cursor: pointer;
	border: 0;
	transition: background var(--ct-fast) var(--ct-ease), transform var(--ct-fast) var(--ct-ease), border-color var(--ct-fast) var(--ct-ease);
}

/* Șterge poza — primary destructive (roșu brand) */
.ct-options__lightbox-delete {
	background: var(--ct-brand);
	color: white;
}

.ct-options__lightbox-delete:hover,
.ct-options__lightbox-delete:focus-visible {
	background: var(--ct-brand-hover);
	transform: scale(1.04);
	outline: none;
}

.ct-options__lightbox-delete:disabled {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* Închide — secondary neutral (outline alb) */
.ct-options__lightbox-dismiss {
	background: rgba(255, 255, 255, 0.12);
	color: white;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.ct-options__lightbox-dismiss:hover,
.ct-options__lightbox-dismiss:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.55);
	transform: scale(1.04);
	outline: none;
}

.ct-options__lightbox-dismiss:disabled {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* ============================================================
 * CART / CHECKOUT — thumbs preview sub line item (Pas 3.7)
 * Mai mici decât thumbs pe product page (50px vs 72px),
 * pentru a se încadra în spațiul cart/checkout line item.
 * ============================================================ */

.ct-cart-thumbs {
	display: grid;
	/* Fix 72px (ca product page) — diferențiate clar de poza de copertă,
	   consistente oriunde. FĂRĂ max-width (forța lățimea în tabelul de cart
	   mobil → spărgea pagina). auto-fill wrappuiește dacă nu încap pe un rând. */
	grid-template-columns: repeat(auto-fill, 72px);
	gap: var(--ct-space-2);
	margin-top: 6px;
}

.ct-cart-thumb {
	display: block;              /* <a> e inline default, avem nevoie de block pentru aspect-ratio */
	position: relative;
	aspect-ratio: 1;
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	background: var(--ct-bg-muted);
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	text-decoration: none;       /* reset <a> underline */
	color: inherit;              /* reset <a> color */
	transition: border-color var(--ct-fast) var(--ct-ease), transform var(--ct-fast) var(--ct-ease);
}

.ct-cart-thumb:hover,
.ct-cart-thumb:focus-visible {
	/* Gri discret ca pe product page (--ct-border-hover), NU brand roșu */
	border-color: var(--ct-border-hover);
	transform: scale(1.04);
	outline: none;
}

.ct-cart-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
 * CONDITIONAL FIELDS (Sprint 2) — Pattern A & similar visible_when
 *
 * Fields cu data-visible-when sunt inițial ascunse până când JS
 * Conditional\Engine evaluează la DOMContentLoaded. Asta previne
 * FOUC (flash of unstyled content) — fields care ar trebui hidden
 * nu apar momentan visible la load.
 *
 * Flow:
 *   1. Render server: field cu data-visible-when (fără data-vw-evaluated)
 *   2. CSS rule de mai jos îl ascunde (display: none)
 *   3. JS evaluate la DOMContentLoaded → setează data-vw-evaluated="1"
 *   4. CSS rule nu mai aplică → field decide vizibilitatea via hidden attribute
 * ============================================================ */

.ct-options__field[data-visible-when]:not([data-vw-evaluated]) {
	display: none;
}

/* ============================================================
 * CHECKBOX — single boolean toggle (Sprint 2)
 *
 * Markup:
 *   <div class="ct-options__field ct-options__field--checkbox">
 *     <label class="ct-options__checkbox-item [--checked]" data-checkbox>
 *       <input type="checkbox" hidden>
 *       <span class="ct-options__checkbox-box">
 *         <svg class="ct-options__checkbox-tick">...</svg>
 *       </span>
 *       <span class="ct-options__checkbox-label">Name</span>
 *     </label>
 *   </div>
 * ============================================================ */

.ct-options__checkbox-item {
	display: inline-flex;
	align-items: center;
	gap: var(--ct-space-2);
	padding: var(--ct-space-2) 0;
	cursor: pointer;
	user-select: none;
	transition: opacity var(--ct-base) var(--ct-ease);
}

.ct-options__checkbox-item:hover {
	opacity: 0.85;
}

.ct-options__checkbox-box {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--ct-border);
	border-radius: var(--ct-radius);
	background: var(--ct-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--ct-base) var(--ct-ease), background-color var(--ct-base) var(--ct-ease);
}

.ct-options__checkbox-item:hover .ct-options__checkbox-box {
	border-color: var(--ct-border-hover);
}

.ct-options__checkbox-item--checked .ct-options__checkbox-box {
	border-color: var(--ct-brand);
	background: var(--ct-brand);
}

.ct-options__checkbox-tick {
	width: 14px;
	height: 14px;
	color: #ffffff;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity var(--ct-base) var(--ct-ease), transform var(--ct-base) var(--ct-ease);
}

.ct-options__checkbox-item--checked .ct-options__checkbox-tick {
	opacity: 1;
	transform: scale(1);
}

.ct-options__checkbox-label {
	color: var(--ct-text);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

/* Price suffix pentru checkbox cu price modifier (e.g. gift wrap +20 lei).
   Inline DUPĂ label name (NU push right) — flow natural cu label. Pe mobile
   permite wrapping dacă space-ul nu ajunge. */
.ct-options__checkbox-price {
	color: var(--ct-text-muted);
	font-size: 14px;
	font-weight: 500;
	margin-left: var(--ct-space-2);
}
/* ============================================================
 * COLOR SWATCHES (Sprint 2 — Pas C, fix 1)
 *
 * 40px squares cu border subtil, hover scale 1.08.
 * Selected: 1.5px brand border + transform scale 1.05 + checkmark inset.
 * Light colors (alb, etc.): checkmark negru via --light modifier
 * (auto-detect din Library\Colors luminance > 200).
 *
 * Choice-level visible_when → JS adaugă hidden attribute pe button individual.
 * Display:none ascunde complet din grid.
 *
 * Hex value injectat via inline style: <button style="--ct-color:#7d9979">
 * ============================================================ */

.ct-options__color-grid {
	 display: grid;
	 grid-template-columns: repeat(auto-fill, 36px);
	 gap: var(--ct-space-3);
 }

/* Light colors: border default mai vizibil pentru contrast cu fundalul alb */
 .ct-options__color-swatch--light {
	 border-color: rgba(0, 0, 0, 0.2)!important;
 }

.ct-options__color-swatch {
	/* Border translucent (rgba black) intenționat — swatch-urile au background variabil
	 * de la culoarea injectată via inline `style="--ct-color:#hex"`. Border solid
	 * (--ct-border #f2f2f4) ar arăta dramatic diferit pe culori dark (foarte vizibil)
	 * vs light (abia perceptibil). Translucent black blendează armonios peste orice
	 * culoare, păstrând contrastul perceptiv constant. */
	position: relative;
	aspect-ratio: 1;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: var(--ct-color, #ccc);
	padding: 0;
	transition:
		transform var(--ct-fast) var(--ct-ease),
		border-color var(--ct-base) var(--ct-ease);
	outline: 0;
}

.ct-options__color-swatch:hover {
	transform: scale(1.08);
	border-color: rgba(0, 0, 0, 0.18);
}

.ct-options__color-swatch:focus-visible {
	outline: 2px solid var(--ct-brand);
	outline-offset: 2px;
}

.ct-options__color-swatch--selected {
	border: 1.5px solid var(--ct-brand);
	transform: scale(1.05);
}

/* Default checkmark — alb (works pe culori dark/medium) */
.ct-options__color-swatch--selected::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4 4 10-10' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
	pointer-events: none;
}

/* Light colors override → checkmark negru pentru contrast */
.ct-options__color-swatch--light.ct-options__color-swatch--selected::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4 4 10-10' stroke='%231e2327' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Hidden via JS choice-level visible_when (Pas E) */
.ct-options__color-swatch[hidden] {
	display: none;
}

/* ============================================================
 * Unavailable swatch (out of stock, fără dată de revenire).
 * Rămâne VIZIBIL (ad-match: clienta din reclamă vede culoarea din poză), dar
 * clar OFF și ne-selectabil. Tap → mesaj (JS), fără selecție. Diferit de
 * preorder (acolo culoarea e comandabilă, doar mai lentă).
 * ============================================================ */
.ct-options__color-swatch--unavailable {
	cursor: not-allowed;
	opacity: 0.4;
}

/* Anulează feedback-ul de hover ca să nu pară clickabil */
.ct-options__color-swatch--unavailable:hover {
	transform: none;
	border-color: rgba(0, 0, 0, 0.06);
}

/* Slash diagonal cu halo alb sub linie întunecată → lizibil pe ORICE culoare,
 * inclusiv swatch-uri dark. ::before e liber (checkmark-ul de selected e pe
 * ::after, iar un swatch indisponibil nu e niciodată selected). */
.ct-options__color-swatch--unavailable::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='3' y1='21' x2='21' y2='3' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='3' y1='21' x2='21' y2='3' stroke='%231e2327' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	pointer-events: none;
}

/* ============================================================
 * Compact size buttons (Pattern 1 — tricouri, căni etc.)
 * Dense grid layout, auto-detect modifier price display.
 * Schema unică cu card mode (data-price absolute), doar UI diferă.
 * ============================================================ */

.ct-options__sizes--compact {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

@media (min-width: 480px) {
	.ct-options__sizes--compact {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (min-width: 720px) {
	.ct-options__sizes--compact {
		grid-template-columns: repeat(7, 1fr);
	}
}

.ct-options__size--compact {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 6px;
	min-height: 60px;
	border: 1.5px solid var(--ct-border);
	border-radius: 6px;
	background: var(--ct-bg);
	cursor: pointer;
	position: relative;
	transition: border-color var(--ct-fast) var(--ct-ease), background-color var(--ct-fast) var(--ct-ease), color var(--ct-fast) var(--ct-ease);
}

.ct-options__size--compact:hover {
	border-color: var(--ct-border-hover);
}

.ct-options__size--compact.ct-options__size--selected {
	border-color: var(--ct-brand);
	border-width: 2px;
	background: var(--ct-brand-soft);
	color: var(--ct-brand);
}

.ct-options__size--compact .ct-options__size-name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

.ct-options__size--compact .ct-options__size-modifier {
	font-size: 11px;
	color: rgba(0, 0, 0, 0.55);
	margin-top: 3px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ct-options__size--compact.ct-options__size--selected .ct-options__size-modifier {
	color: var(--ct-brand);
}


/* ============================================================
 * Preorder helper text (ColorSwatches in-stock mechanism)
 *
 * Append la SFÂRȘITUL fișierului assets/css/ct-options.css
 * (după CSS pentru compact sizes)
 * ============================================================ */

.ct-options__preorder-helper {
	margin-top: 10px;
	margin-left: 2px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.55);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

/* Mesaj la tap pe o culoare indisponibilă. Ton brand (atenție blândă, NU
 * alarmant) ca să se diferențieze de preorder-helper-ul neutru gri. */
.ct-options__unavailable-helper {
	margin-top: 10px;
	margin-left: 2px;
	font-size: 13px;
	color: rgb(0 0 0 / .55);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

/* ============================================================
 * Compact-wide size buttons (Pattern 1 cu secondary label)
 *
 * Auto-activated când orice choice are field `secondary`.
 * Folosit pentru tricouri copii unde label include ani + cm range.
 *
 * Layout: 2 cols mobile, 3 cols tablet+.
 *
 * Append la SFÂRȘITUL fișierului assets/css/ct-options.css
 * (după CSS pentru compact-sizes standard)
 * ============================================================ */

.ct-options__sizes--compact-wide {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 420px) {
	.ct-options__sizes--compact-wide {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Buttons din compact-wide au mai mult padding pentru a încăpea multi-line text */
.ct-options__sizes--compact-wide .ct-options__size--compact {
	min-height: 68px;
	padding: 12px 8px;
}

/* Secondary label — sub label primary, font mic + muted */
.ct-options__size-secondary {
	font-size: 13px;
	color: var(--ct-text-muted);
	margin-top: 3px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}


/* ============================================================
 * IMAGE SWATCHES — densitate compactă (3/4/5/6 cols)
 *
 * Markup expected:
 *   .ct-options__field--image-swatches
 *     .ct-options__image-grid
 *       button.ct-options__image-swatch
 *         .ct-options__image-swatch-img > img
 *         .ct-options__image-swatch-meta
 *           p.ct-options__image-swatch-name  (natural height: 1-2 lines based on text)
 *           p.ct-options__image-swatch-price (always rendered cu preț absolut)
 *
 * Aliniere:
 *   - Cardurile au înălțime uniformă pe rând (grid stretch)
 *   - Name + Price stick together at top of meta zone (lipite)
 *   - Spațiul gol (când există) apare JOS sub price, NU între name și price
 *   - Cu prețuri pe toate cards (inclusiv baseline), structura name+price e identică
 * ============================================================ */
.ct-options__image-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ct-space-3);
}
@media (min-width: 480px) {
	.ct-options__image-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 600px) {
	.ct-options__image-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 768px) {
	.ct-options__image-grid { grid-template-columns: repeat(5, 1fr); }
}

.ct-options__image-swatch {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	background: var(--ct-bg);
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	transition: transform var(--ct-fast) var(--ct-ease), border-color var(--ct-base) var(--ct-ease);
}

.ct-options__image-swatch:hover {
	border-color: var(--ct-border-hover);
	transform: scale(1.02);
}

.ct-options__image-swatch--selected {
	border: 2px solid var(--ct-brand);
	transform: scale(1.02);
}

.ct-options__image-swatch--selected::before {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 18px;
	height: 18px;
	background: var(--ct-brand);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	z-index: 2;
	box-shadow: 0 0 0 1.5px white;
}

/* Image cell — aspect ratio 1:1, contain, fix size */
.ct-options__image-swatch-img {
	aspect-ratio: 1;
	width: 100%;
	flex-shrink: 0;
	background: var(--ct-bg);
	overflow: hidden;
}

.ct-options__image-swatch-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Meta zone — fill card, conținut top-aligned (name+price lipite la top, spațiul gol jos) */
.ct-options__image-swatch-meta {
	flex-grow: 1;
	padding: 6px var(--ct-space-2);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 2px;
}

/* Name — natural height (1 sau 2 lines bazat pe text), fără height fix */
.ct-options__image-swatch-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ct-text);
	margin: 0;
	line-height: 1.2;
}

/* Price — lipit de name (gap-ul de 2px din meta) */
.ct-options__image-swatch-price {
	font-size: 12px;
	font-weight: 500;
	color: var(--ct-text-muted);
	margin: 0;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.ct-options__image-swatch--selected .ct-options__image-swatch-name,
.ct-options__image-swatch--selected .ct-options__image-swatch-price {
	color: var(--ct-brand);
}

/* ============================================================
 * CARD-TABS — append la sfârșitul ct-options.css existent
 * ============================================================
 *
 * Adaugă suport vizual pentru:
 *   .ct-options__tabs                  — bara segmented control
 *   .ct-options__tab                   — button per tab
 *   .ct-options__tab--active           — tab activ (bg + shadow)
 *   .ct-options__tab--has-selection    — dot brand după label
 *   .ct-options__sizes[hidden]         — ascundere container tab inactiv
 *   .ct-options__sizes-toggle[hidden]  — ascundere toggle non-activ
 *
 * Stilurile pentru .ct-options__sizes și .ct-options__size existente
 * (Pattern 2 card) sunt reutilizate fără modificări — card-tabs doar
 * group-uiește multiple containers.
 *
 * ============================================================ */


/* ============================================================
 * CHOICES — Pattern card-tabs (size cards grupate în tab-uri)
 * ============================================================ */

.ct-options__tabs {
	display: flex;
	gap: 2px;
	background: rgba(0, 0, 0, 0.04);
	padding: 3px;
	border-radius: var(--ct-radius);
	margin-bottom: var(--ct-space-3);
}

.ct-options__tab {
	flex: 1;
	padding: var(--ct-space-2) var(--ct-space-3);
	border: 0;
	background: transparent;
	border-radius: calc(var(--ct-radius) - 2px);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ct-text-muted);
	cursor: pointer;
	transition:
		background-color var(--ct-base) var(--ct-ease),
		color var(--ct-base) var(--ct-ease),
		box-shadow var(--ct-base) var(--ct-ease);
}

.ct-options__tab:hover {
	color: var(--ct-text);
}

.ct-options__tab:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ct-brand-tint);
}

.ct-options__tab--active {
	background: var(--ct-bg);
	color: var(--ct-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Tab cu selecție în interior — dot brand mic după label */
.ct-options__tab--has-selection::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ct-brand);
	margin-left: 6px;
	vertical-align: middle;
}

/* Containers per tab — visibility prin HTML hidden attribute (UA default style) */
.ct-options__sizes--card-tabs[hidden] {
	display: none !important;
}

.ct-options__sizes-toggle[hidden] {
	display: none !important;
}

/* ============================================================
 * NUMBER STEPPER — brand-styled increment/decrement control
 *
 * Standalone stepper folosit ca atom în Field\Set (qty per size pe Set
 * Absolvire) și disponibil reutilizabil pentru alte field types viitoare
 * (qty multi-option, count picker etc.).
 *
 * Structura HTML așteptată:
 *   .ct-options__stepper
 *     button.ct-options__stepper-btn[data-step="-1"] (− minus)
 *     input.ct-options__stepper-input[type="number"]
 *     button.ct-options__stepper-btn[data-step="1"]  (+ plus)
 *
 * Buton disabled (la min sau max) primește background muted + cursor not-allowed
 * automat via :disabled pseudo-class. JS toggling: simply add/remove disabled attr.
 * ============================================================ */
.ct-options__stepper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 40px;
}

.ct-options__stepper-btn {
	width: 40px;
	height: 40px;
	border: 0;
	background: var(--ct-brand-tint);
	color: var(--ct-brand);
	border-radius: var(--ct-radius);
	font-size: 18px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--ct-fast) var(--ct-ease);
	cursor: pointer;
}

.ct-options__stepper-btn:hover  { background: var(--ct-brand-soft); }
.ct-options__stepper-btn:active { background: var(--ct-brand-ghost); }

.ct-options__stepper-btn:disabled {
	background: var(--ct-bg-muted);
	color: var(--ct-text-subtle);
	opacity: 1;
	cursor: not-allowed;
}

.ct-options__stepper-input {
	width: 48px;
	height: 40px;
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	background: var(--ct-bg);
	text-align: center;
	font-size: 15px;
	color: var(--ct-text);
	font-variant-numeric: tabular-nums;
	appearance: textfield; 
}


.ct-options__stepper-input:focus {
	outline: none;
	border-color: var(--ct-brand);
	box-shadow: 0 0 0 2px var(--ct-brand-tint);
}

/* ============================================================
 * SET FIELD — multiple stepper rows + aggregate summary
 *
 * Layout per Field\Set: 1 coloană cu stepper LEFT, label RIGHT (match
 * production look — Set Absolvire). Stepper interior e scale-down vs
 * standalone stepper pentru densitate (38px vs 40px).
 *
 * Structura HTML:
 *   .ct-options__set-rows
 *     .ct-options__set-row × N
 *       .ct-options__stepper (38px scaled)
 *       .ct-options__set-row-label (label flex:1)
 *   .ct-options__set-summary
 *     <span>Total {category}</span>
 *     .ct-options__set-summary-value (live updated de JS)
 * ============================================================ */
.ct-options__set-rows {
	display: flex;
	flex-direction: column;
	gap: var(--ct-space-2);
}

.ct-options__set-row {
	display: flex;
	align-items: center;
	gap: var(--ct-space-3);
	padding: 0;
	border: 0;
	background: transparent;
}

/* Stepper inside set-row: scale-down de la 40px la 38px pentru densitate */
.ct-options__set-row .ct-options__stepper {
	height: 38px;
	flex-shrink: 0;
}

.ct-options__set-row .ct-options__stepper-btn {
	width: 38px;
	height: 38px;
}

.ct-options__set-row .ct-options__stepper-input {
	width: 44px;
	height: 38px;
	font-size: 14px;
}

.ct-options__set-row-label {
	font-size: 15px;
	font-weight: 500;
	color: var(--ct-text);
	flex: 1;
	margin-left: 0;
}

/* Aggregate summary — live "Total X tricouri" sub stepper rows.
 * JS recalculează .ct-options__set-summary-value pe orice change stepper. */
.ct-options__set-summary {
	margin-top: var(--ct-space-3);
	padding: var(--ct-space-3) var(--ct-space-4);
	border-radius: var(--ct-radius);
	font-size: 13px;
	color: var(--ct-text-muted);
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--ct-border);
	background: var(--ct-bg);
}

.ct-options__set-summary-value {
	color: var(--ct-text);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 * CART META BLOCK (v0.9) — randare grupată în <dd> (cart + checkout)
 *
 * Blocul .ct-cart-meta e emis de display_in_cart() în <dd>, ÎN AFARA
 * .ct-options (care e doar pe product page). De aceea tokens-urile sunt
 * redefinite local aici — altfel var(--ct-*) ar fi undefined în cart.
 *
 * DORMANT până la Pas 3: markup-ul .ct-cart-meta nu e încă emis, deci
 * aceste reguli nu se aplică pe nimic. Thumbs-urile existente (.ct-cart-thumbs)
 * rămân neatinse până când Pas 3 le mută în interiorul blocului.
 * ============================================================ */

.ct-cart-meta {
	/* Tokens self-contained — cart e în afara .ct-options */
	--ct-brand:        #c61932;
	--ct-text:         #1e2327;
	--ct-text-muted:   #6b7280;
	--ct-text-subtle:  #9ca3af;
	--ct-border:       #f2f2f4;
	--ct-border-hover: #c9ccd1;
	--ct-bg:           #ffffff;
	--ct-bg-muted:     #f3f4f6;
	--ct-bg-warm:      #faf8f5;
	--ct-radius:       4px;
	--ct-radius-pill:  999px;
	--ct-space-1:      4px;
	--ct-space-2:      8px;
	--ct-space-3:      12px;
	--ct-fast:         120ms;
	--ct-ease:         cubic-bezier(0.4, 0, 0.2, 1);

	display: flex;
	flex-direction: column;
	gap: var(--ct-space-2);
	font-family: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--ct-text);
	margin-top: var(--ct-space-2);
}

.ct-cart-meta > * { margin: 0; }

/* Ascunde <dt>-ul gol al blocului (WC randează <dt>:</dt> pentru key gol).
   :has() degradează grațios pe browsere foarte vechi → apare un ":" mic. */
.variation:has(.ct-cart-meta) dt { display: none; }
.variation:has(.ct-cart-meta) dd { margin: 0; width: 100%; }

/* Alegeri scurte — pills */
.ct-cart-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ct-cart-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--ct-bg-muted);
	font-size: 12px;
	padding: 3px 10px;
	border-radius: var(--ct-radius-pill);
	color: var(--ct-text-muted);
	line-height: 1.5;
}
.ct-cart-pill b { font-weight: 500; color: var(--ct-text); }

/* Bloc „Ai ales" — rezumat read-only al textului scris (ton de reafirmare,
   NU verificare: fundal cald calm, label prietenos, fără icon de editare). */
.ct-cart-summary {
	background: var(--ct-bg-muted);
	border: 1px solid #e2e2e2;
	border-radius: var(--ct-radius);
	padding: 8px 11px;
}
.ct-cart-summary__head {
	font-size: 12px;
	color: var(--ct-text-subtle);
	margin: 0 0 var(--ct-space-1);
}
.ct-cart-summary__row { font-size: 14px; color: var(--ct-text); line-height: 1.55; margin: 0; }
.ct-cart-summary__row + .ct-cart-summary__row { margin-top: 3px; }
.ct-cart-summary__row .k { color: var(--ct-text-muted); font-size: 13px; }

/* Stack „+N" — 3 poze vizibile + tile cu restul (pattern WhatsApp/Facebook).
   Tile-ul „+N" NU are clasa .ct-cart-thumb → JS-ul nu îl include în galerie
   ca duplicat; handler-ul prinde separat .ct-cart-thumbs__more și deschide
   lightbox-ul pornind de la primul thumb ascuns (al 4-lea, index 3).

   NU redefinim grid-template-columns aici — stack-ul moștenește
   `repeat(auto-fill, 72px)` de la .ct-cart-thumbs, deci thumb-urile sunt EXACT
   72px ca la non-stack (consistente pe cart ȘI checkout). Pe containere înguste
   (checkout) cele 4 elemente — 3 poze + tile — nu încap pe un rând și tile-ul
   wrappuiește dedesubt; acceptabil. (Alternativa repeat(4, minmax(0,72px))
   forța 4 coloane → le micșora sub 72px pe checkout → inegale cu non-stack.)

   display:none pe pozele 4+ ESTE suprascris de tema Shoptimizer („mobile cart"
   într-un @media) → de-aia apăreau toate pozele pe mobile, dar nu pe checkout.
   Doar regulile de display trebuie forțate cu !important. */
.ct-cart-thumbs--stack .ct-cart-thumb { display: none !important; }
.ct-cart-thumbs--stack .ct-cart-thumb:nth-child(-n+3) { display: block !important; }

.ct-cart-thumbs__more {
	display: flex !important; /* tema face <a> block pe mobile → "+N" necentrat; forțăm flex */
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border: 1px solid #e2e2e2;
	border-radius: var(--ct-radius);
	background: var(--ct-bg-muted);
	color: var(--ct-text-muted);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: border-color var(--ct-fast) var(--ct-ease), color var(--ct-fast) var(--ct-ease);
}
.ct-cart-thumbs__more:hover,
.ct-cart-thumbs__more:focus-visible {
	/* Gri discret ca thumbs, NU brand roșu */
	border-color: var(--ct-border-hover);
	color: var(--ct-text);
	outline: none;
}

/* Thumbs în interiorul blocului — reset margin-top (gap-ul flex îl gestionează) */
.ct-cart-meta .ct-cart-thumbs { margin-top: 0; }