/* ============================================================
   Gift Box Configurator — Wizard / steps
   ============================================================ */

.gbc-wizard {
	--gbc-gold:    var(--tl-gold, #c79a55);
	--gbc-gold-lt: var(--tl-gold-lt, #e8d09a);
	--gbc-surface: var(--tl-surface, #1a1710);
	--gbc-bg:      var(--tl-bg, #0c0a07);
	--gbc-text:    var(--tl-text, #f0e6d0);
	--gbc-text-2:  var(--tl-text-2, #bdb09a);
	--gbc-border:  var(--tl-border, rgba(200, 160, 90, 0.16));
	--gbc-serif:   "Fraunces", "Cormorant Garamond", Georgia, serif;
	--gbc-sans:    "Manrope", "Jost", -apple-system, "Segoe UI", sans-serif;
	--gbc-lux:     cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.2rem, 5vw, 3rem) 4rem;
	background: var(--gbc-bg);
	color: var(--gbc-text);
	font-family: var(--gbc-sans);
	scroll-margin-top: 90px;
}

.gbc-wizard *, .gbc-wizard *::before, .gbc-wizard *::after { box-sizing: border-box; }

/* ───────── Stepper ───────── */
.gbc-stepper {
	position: relative;
	display: flex;
	gap: 0.4rem;
	margin-bottom: 3rem;
}
.gbc-stepper-item {
	flex: 1;
	text-align: center;
	color: var(--gbc-text-2);
	font-size: 0.55rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	position: relative;
	cursor: default;
}
.gbc-stepper-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 auto 0.5rem;
	border-radius: 50%;
	border: 1px solid var(--gbc-border);
	font-family: var(--gbc-serif);
	font-size: 0.95rem;
	background: var(--gbc-bg);
	transition: 0.3s var(--gbc-lux);
	position: relative;
	z-index: 1;
}
.gbc-stepper-item.is-active { color: var(--gbc-gold-lt); }
.gbc-stepper-item.is-active .gbc-stepper-dot {
	border-color: var(--gbc-gold-lt);
	color: var(--gbc-gold-lt);
	box-shadow: 0 0 16px rgba(199, 154, 85, 0.3);
}
.gbc-stepper-item.is-done { color: var(--gbc-gold); cursor: pointer; }
.gbc-stepper-item.is-done .gbc-stepper-dot {
	background: var(--gbc-gold);
	border-color: var(--gbc-gold);
	color: #0e0c08;
}
.gbc-stepper-item.is-done .gbc-stepper-dot::after { content: "✓"; }
.gbc-stepper-item.is-done .gbc-stepper-dot { font-size: 0; }
.gbc-stepper-item.is-done .gbc-stepper-dot::after { font-size: 0.9rem; }
.gbc-stepper-label { display: block; }

.gbc-stepper-bar {
	position: absolute;
	top: 17px;
	left: 8%;
	right: 8%;
	height: 1px;
	background: var(--gbc-border);
	z-index: 0;
}
.gbc-stepper-bar-fill {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--gbc-gold), var(--gbc-gold-lt));
	transition: width 0.5s var(--gbc-lux);
}

/* ───────── Steps ───────── */
.gbc-step { animation: gbcStepIn 0.5s var(--gbc-lux); }
.gbc-step[hidden] { display: none; }
@keyframes gbcStepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.gbc-step-head { text-align: center; max-width: 46ch; margin: 0 auto 2.4rem; }
.gbc-step-title {
	font-family: var(--gbc-serif);
	font-weight: 300;
	font-variation-settings: "opsz" 144;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	margin: 0.4rem 0;
	color: var(--gbc-text);
}
.gbc-step-sub { color: var(--gbc-text-2); font-size: 0.9rem; margin: 0; }

/* ───────── Grids & options ───────── */
.gbc-grid { display: grid; gap: 1.2rem; }
.gbc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gbc-grid--3 { grid-template-columns: repeat(3, 1fr); }

.gbc-option {
	appearance: none;
	cursor: pointer;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	padding: 1.8rem 1.2rem;
	border: 1px solid var(--gbc-border);
	border-radius: 16px;
	background: var(--gbc-surface);
	color: var(--gbc-text);
	transition: border-color 0.3s, transform 0.4s var(--gbc-lux), box-shadow 0.4s var(--gbc-lux);
}
.gbc-option:hover { transform: translateY(-4px); border-color: rgba(199, 154, 85, 0.5); }
.gbc-option.is-selected {
	border-color: var(--gbc-gold-lt);
	box-shadow: 0 0 0 1px var(--gbc-gold-lt) inset, 0 0 30px -10px rgba(199, 154, 85, 0.6);
	animation: gbcGlow 0.5s var(--gbc-lux);
}
@keyframes gbcGlow { 0% { box-shadow: 0 0 0 1px var(--gbc-gold-lt) inset, 0 0 0 rgba(199, 154, 85, 0); } 60% { box-shadow: 0 0 0 1px var(--gbc-gold-lt) inset, 0 0 40px 0 rgba(199, 154, 85, 0.5); } }

.gbc-option-icon { font-size: 2.2rem; line-height: 1; }
.gbc-option-name { font-family: var(--gbc-serif); font-size: 1.2rem; color: var(--gbc-text); }
.gbc-option-desc { font-size: 0.74rem; color: var(--gbc-text-2); line-height: 1.4; }
.gbc-option-price { font-family: var(--gbc-serif); font-style: italic; color: var(--gbc-gold-lt); font-size: 1rem; margin-top: 0.2rem; }
.gbc-option-vol { font-size: 0.68rem; color: var(--gbc-text-2); letter-spacing: 0.04em; }
.gbc-option-check {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gbc-gold);
	color: #0e0c08;
	display: grid;
	place-items: center;
	font-size: 0.7rem;
	opacity: 0;
	transform: scale(0.5);
	transition: 0.3s var(--gbc-lux);
}
.gbc-option.is-selected .gbc-option-check { opacity: 1; transform: scale(1); }

/* Shape mini 3D preview */
.gbc-shape-preview {
	width: 76px;
	height: 64px;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.6s var(--gbc-lux);
	margin-bottom: 0.4rem;
}
.gbc-option:hover .gbc-shape-preview { transform: rotateY(-16deg) rotateX(8deg); }
.gbc-shape-preview .sp-base { position: absolute; inset: 16px 0 0 0; background: linear-gradient(160deg, #2a2418, #16120c); border: 1px solid var(--gbc-border); border-radius: 5px; }
.gbc-shape-preview .sp-lid { position: absolute; top: 8px; left: -4px; width: calc(100% + 8px); height: 16px; background: linear-gradient(160deg, #322a1b, #1d1810); border: 1px solid var(--gbc-gold); border-radius: 4px; }
.gbc-shape-preview.shape-circle .sp-base { border-radius: 50%; }
.gbc-shape-preview.shape-heart .sp-base { clip-path: path("M38,58 C10,36 2,22 14,12 C22,4 33,8 38,18 C43,8 54,4 62,12 C74,22 66,36 38,58 Z"); border: none; background: linear-gradient(160deg, #3a2a1a, #1a120b); }
.gbc-shape-preview.shape-heart .sp-lid { display: none; }
.gbc-shape-preview.shape-square .sp-base { aspect-ratio: 1; }

/* Filling preview */
.gbc-filling-preview {
	width: 100%;
	height: 90px;
	border-radius: 12px;
	overflow: hidden;
	display: grid;
	place-items: center;
	margin-bottom: 0.4rem;
	background: #14110a;
	border: 1px solid var(--gbc-border);
}
.gbc-filling-preview img { width: 100%; height: 100%; object-fit: cover; }
.gbc-filling-icon { font-size: 2.4rem; }
.gbc-fill-straw { background: repeating-linear-gradient(58deg, #6b4a26, #6b4a26 3px, #8a6332 3px, #8a6332 7px); }
.gbc-fill-confetti { background: radial-gradient(circle at 20% 30%, #c0506b 0 4px, transparent 5px), radial-gradient(circle at 70% 60%, #5a8a6b 0 4px, transparent 5px), radial-gradient(circle at 45% 80%, var(--gbc-gold) 0 4px, transparent 5px), #14110a; }
.gbc-fill-glitter { background: radial-gradient(circle at 30% 40%, var(--gbc-gold-lt) 0 2px, transparent 3px), radial-gradient(circle at 60% 70%, #fff 0 2px, transparent 3px), radial-gradient(circle at 80% 30%, var(--gbc-gold) 0 2px, transparent 3px), linear-gradient(135deg, #2a2012, #14110a); }

/* Size cards */
.gbc-size-card { padding: 0; overflow: hidden; align-items: stretch; }
.gbc-size-photo { width: 100%; aspect-ratio: 4 / 3; background: #14110a center / cover no-repeat; display: grid; place-items: center; color: var(--gbc-text-2); font-size: 2.6rem; }
.gbc-size-body { padding: 1.1rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; text-align: left; width: 100%; }
.gbc-size-name { font-family: var(--gbc-serif); font-size: 1.25rem; color: var(--gbc-text); }
.gbc-size-row { font-size: 0.76rem; color: var(--gbc-text-2); display: flex; justify-content: space-between; }
.gbc-size-row b { color: var(--gbc-text); font-weight: 500; }
.gbc-size-price { font-family: var(--gbc-serif); font-style: italic; font-size: 1.3rem; color: var(--gbc-gold-lt); margin-top: 0.4rem; }

/* ───────── Fill meter ───────── */
.gbc-fillmeter {
	max-width: 640px;
	margin: 0 auto 2rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--gbc-border);
	border-radius: 14px;
	background: var(--gbc-surface);
	position: sticky;
	top: 80px;
	z-index: 5;
}
.gbc-fillmeter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.gbc-fillmeter-label { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gbc-text-2); }
.gbc-fillmeter-val { font-family: var(--gbc-serif); font-style: italic; font-size: 1.4rem; color: var(--gbc-gold-lt); transition: color 0.3s; }
.gbc-fillmeter-track { position: relative; height: 10px; border-radius: 6px; background: #14110a; overflow: hidden; }
.gbc-fillmeter-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 6px;
	background: var(--gbc-gold);
	transition: width 0.5s var(--gbc-lux), background 0.4s;
}
.gbc-fillmeter-max {
	position: absolute;
	top: -2px;
	bottom: -2px;
	width: 2px;
	background: rgba(255, 255, 255, 0.5);
}
.gbc-fillmeter.level-mid .gbc-fillmeter-fill { background: #d8a13e; }
.gbc-fillmeter.level-high .gbc-fillmeter-fill { background: #e0772e; }
.gbc-fillmeter.level-full .gbc-fillmeter-fill { background: #d6463f; }
.gbc-fillmeter.level-full { animation: gbcPulse 1.4s ease-in-out infinite; }
.gbc-fillmeter.level-full .gbc-fillmeter-val { color: #ef7a72; }
@keyframes gbcPulse { 50% { box-shadow: 0 0 0 3px rgba(214, 70, 63, 0.25); } }
.gbc-fillmeter-warn { margin: 0.7rem 0 0; font-size: 0.8rem; color: #ef7a72; display: flex; align-items: center; gap: 0.4rem; animation: gbcStepIn 0.4s var(--gbc-lux); }

/* ───────── Products ───────── */
.gbc-products-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1.6rem; align-items: start; }
.gbc-search { margin-bottom: 1.2rem; }
.gbc-search-input {
	width: 100%;
	padding: 0.85rem 1.1rem;
	border-radius: 12px;
	border: 1px solid var(--gbc-border);
	background: var(--gbc-surface);
	color: var(--gbc-text);
	font-family: var(--gbc-sans);
	font-size: 0.9rem;
}
.gbc-search-input:focus { outline: none; border-color: var(--gbc-gold-lt); }

.gbc-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--gbc-border);
	border-radius: 14px;
	background: var(--gbc-surface);
	overflow: hidden;
	transition: border-color 0.3s, transform 0.3s var(--gbc-lux);
}
.gbc-product-card:hover { transform: translateY(-3px); border-color: rgba(199, 154, 85, 0.5); }
.gbc-product-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; background: #14110a; }
.gbc-product-body { padding: 0.8rem 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.gbc-product-name { font-family: var(--gbc-serif); font-size: 0.98rem; color: var(--gbc-text); line-height: 1.25; }
.gbc-product-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; color: var(--gbc-text-2); margin-top: auto; }
.gbc-product-price { color: var(--gbc-gold-lt); font-family: var(--gbc-serif); font-style: italic; font-size: 1rem; }
.gbc-product-add {
	appearance: none;
	cursor: pointer;
	margin-top: 0.5rem;
	padding: 0.5rem;
	border-radius: 10px;
	border: 1px solid var(--gbc-border);
	background: transparent;
	color: var(--gbc-gold-lt);
	font-family: var(--gbc-sans);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: 0.3s;
}
.gbc-product-add:hover { border-color: var(--gbc-gold-lt); background: rgba(199, 154, 85, 0.1); }

/* Chosen list */
.gbc-cart-side {
	border: 1px solid var(--gbc-border);
	border-radius: 14px;
	background: var(--gbc-surface);
	padding: 1.2rem;
	position: sticky;
	top: 170px;
}
.gbc-cart-side-title { font-family: var(--gbc-serif); font-size: 1.1rem; margin: 0 0 0.8rem; color: var(--gbc-text); }
.gbc-chosen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.gbc-chosen-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
.gbc-chosen-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: #14110a; flex: none; }
.gbc-chosen-info { flex: 1; min-width: 0; }
.gbc-chosen-name { color: var(--gbc-text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbc-chosen-sub { color: var(--gbc-text-2); font-size: 0.7rem; }
.gbc-chosen-qty { display: flex; align-items: center; gap: 0.3rem; }
.gbc-qty-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gbc-border); background: transparent; color: var(--gbc-gold-lt); cursor: pointer; font-size: 0.9rem; line-height: 1; }
.gbc-chosen-remove { appearance: none; border: none; background: none; color: var(--gbc-text-2); cursor: pointer; font-size: 1rem; padding: 0 0.2rem; transition: color 0.2s; }
.gbc-chosen-remove:hover { color: #ef7a72; }

/* ───────── Postcard ───────── */
.gbc-postcard-thumb { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #14110a; display: grid; place-items: center; margin-bottom: 0.6rem; }
.gbc-postcard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gbc-postcard-icon { font-size: 2.4rem; }
.gbc-postcard-skip { font-size: 1.6rem; color: var(--gbc-text-2); }
.gbc-message-field { max-width: 560px; margin: 2.4rem auto 0; }
.gbc-message-label { display: block; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gbc-text-2); margin-bottom: 0.6rem; }
.gbc-message-input {
	width: 100%;
	padding: 1rem 1.1rem;
	border-radius: 12px;
	border: 1px solid var(--gbc-border);
	background: var(--gbc-surface);
	color: var(--gbc-text);
	font-family: var(--gbc-serif);
	font-size: 1rem;
	resize: vertical;
}
.gbc-message-input:focus { outline: none; border-color: var(--gbc-gold-lt); }
.gbc-message-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; }
.gbc-message-count { font-size: 0.7rem; color: var(--gbc-text-2); }

/* ───────── Review ───────── */
.gbc-review { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 880px; margin: 0 auto; align-items: start; }
.gbc-review-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; background: #14110a center / cover no-repeat; border: 1px solid var(--gbc-border); display: grid; place-items: center; font-size: 4rem; }
.gbc-summary { margin: 0; }
.gbc-summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--gbc-border); font-size: 0.88rem; }
.gbc-summary-row dt { color: var(--gbc-text-2); margin: 0; }
.gbc-summary-row dd { color: var(--gbc-text); margin: 0; text-align: right; }
.gbc-summary-total { display: flex; justify-content: space-between; align-items: baseline; margin: 1.2rem 0; padding-top: 1rem; border-top: 1px solid var(--gbc-gold-lt); }
.gbc-summary-total-lbl { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gbc-text-2); }
.gbc-summary-total-val { font-family: var(--gbc-serif); font-style: italic; font-size: 2rem; color: var(--gbc-gold-lt); }

/* ───────── Nav & total ───────── */
.gbc-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--gbc-border); }
.gbc-nav-total { font-family: var(--gbc-serif); font-style: italic; font-size: 1.3rem; color: var(--gbc-gold-lt); }

/* ───────── Empty & toast ───────── */
.gbc-empty { text-align: center; color: var(--gbc-text-2); padding: 2rem; font-size: 0.9rem; }
.gbc-chosen-empty { padding: 1rem 0; font-size: 0.78rem; }
.gbc-toast {
	position: fixed;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%) translateY(120%);
	background: var(--gbc-gold);
	color: #0e0c08;
	padding: 0.85rem 1.6rem;
	border-radius: 30px;
	font-size: 0.8rem;
	font-weight: 600;
	box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.6);
	z-index: 9999;
	transition: transform 0.5s var(--gbc-lux);
	pointer-events: none;
}
.gbc-toast.is-show { transform: translateX(-50%) translateY(0); }
.gbc-toast.is-error { background: #d6463f; color: #fff; }

/* ───────── Responsive ───────── */
@media (max-width: 860px) {
	.gbc-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.gbc-products-layout { grid-template-columns: 1fr; }
	.gbc-cart-side { position: static; }
	.gbc-review { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.gbc-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.gbc-stepper-label { display: none; }
	.gbc-nav { flex-wrap: wrap; }
	.gbc-nav-total { order: -1; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.gbc-step, .gbc-fillmeter-warn { animation: none; }
	.gbc-option.is-selected { animation: none; }
}

/* ───────── Accessibility & touch targets ───────── */
/* Visible keyboard focus for every interactive control of the wizard. */
.gbc-option:focus-visible,
.gbc-btn:focus-visible,
.gbc-product-add:focus-visible,
.gbc-qty-btn:focus-visible,
.gbc-chosen-remove:focus-visible,
.gbc-stepper-item:focus-visible {
	outline: 2px solid var(--gbc-gold-lt);
	outline-offset: 2px;
}
.gbc-search-input:focus-visible,
.gbc-message-input:focus-visible {
	box-shadow: 0 0 0 2px rgba(232, 208, 154, 0.45);
}

/* Comfortable tap sizes for the quantity controls in the side basket. */
.gbc-qty-btn { width: 30px; height: 30px; }
@media (pointer: coarse) {
	.gbc-qty-btn { width: 38px; height: 38px; }
	.gbc-chosen-remove { padding: 0.4rem 0.6rem; }
}