/* Look and feel: colors, type, borders, shadows. Layout lives in layout.css.
   Change the variables below to re-theme the whole site. */
:root{
	--bg: #fff;
	--fg: #000;
	--muted: #6f6f6f;
	--line: #e7e7e7;
	--soft: #f5f5f4;
	--danger: #b42318;
	--success: #157f3c;

	--shadow: 0 2px 8px #0002;
	--shadow-lg: 0 16px 40px -12px #0000003d;

	--radius-pill: 64px;
	--radius-lg: 32px;
	--radius: 20px;
	--radius-sm: 14px;

	--font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	/* Orpheus Pro is used where it's installed; Cormorant Garamond (loaded in base.html) is the
	   look-alike everyone else sees, e.g. on phones. */
	--font-display: "Orpheus Pro", "Orpheus pro", "Cormorant Garamond", Georgia, serif;
}

/* ---------- Base ---------- */
*{
	transition: 0.3s;
}
body{
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
button, input, select, textarea{
	font: inherit;
	color: inherit;
}
h1, h2, h3, h4, h5, h6{
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
}
h1{ font-size: clamp(2.5rem, 9vw, 4rem); }
h2{ font-size: clamp(1.75rem, 6vw, 2.5rem); }
h3{ font-size: 1.4rem; }
p{ margin: 0; }
a{
	color: var(--fg);
	text-decoration: none;
}
p a, .text-link{
	text-decoration: underline;
	text-underline-offset: 3px;
}
:focus-visible{
	outline: 2px solid var(--fg);
	outline-offset: 3px;
}
[hidden]{ display: none !important; }

.muted{ color: var(--muted); }
.small{ font-size: 0.875rem; }
.eyebrow{
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.lead{
	font-size: 1.05rem;
	color: var(--muted);
	max-width: 42ch;
}
.price{
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.back-link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	color: var(--muted);
}
.back-link:hover{ color: var(--fg); }
.visually-hidden{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link{
	position: absolute;
	left: -999px;
	top: 16px;
	z-index: 100;
	background: var(--fg);
	color: var(--bg);
	padding: 10px 18px;
	border-radius: var(--radius-pill);
}
.skip-link:focus{ left: 16px; }

/* ---------- Header ---------- */
.site-header{
	background: var(--bg);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow);
}
.logo{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.logo img{
	height: 20px;
	width: auto;
}
.logo-text{
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
}
.site-header nav a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	font-size: 0.95rem;
	font-weight: 500;
}
.site-header nav a:hover{ scale: 1.05 }
.site-header nav a ion-icon{ font-size: 1.15rem; }
.menu-toggle{
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
	border-radius: 50%;
	color: var(--fg);
	font-size: 1.75rem;
}
.menu-toggle:hover{ background: var(--soft); opacity: 1; }
.menu-icon,
.menu-icon::before,
.menu-icon::after{
	background: currentColor;
	border-radius: 2px;
}
@media (max-width: 767px){
	.site-header nav{
		background: var(--bg);
		border-radius: 24px;
		box-shadow: var(--shadow-lg);
	}
	.site-header nav a{
		border-radius: 16px;
		font-size: 1rem;
	}
	.site-header nav a:active{ background: var(--soft); }
}

/* ---------- Buttons ---------- */
button, .btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 22px;
	border: 1px solid var(--fg);
	border-radius: var(--radius-pill);
	background: var(--fg);
	color: var(--bg);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
}
button:hover, .btn:hover{ opacity: 0.85; }
button:active, .btn:active{ transform: scale(0.98); }
button:disabled{
	opacity: 0.3;
	cursor: not-allowed;
	transform: none;
}
.btn-outline{
	background: transparent;
	color: var(--fg);
}
.btn-outline:hover{
	background: var(--soft);
	opacity: 1;
}
.btn-link{
	background: none;
	border: 0;
	min-height: 0;
	padding: 6px 2px;
	color: var(--fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.btn-link:hover{ color: var(--muted); opacity: 1; }
.btn-sm{
	min-height: 38px;
	padding: 6px 14px;
	font-size: 0.875rem;
}
.btn-lg{
	min-height: 56px;
	font-size: 1rem;
}
.btn-block{ width: 100%; }

/* ---------- Forms ---------- */
label{
	font-size: 0.875rem;
	font-weight: 500;
}
input[type=text], input[type=email], input[type=tel], input[type=search],
input[type=number], input[type=password], textarea, select{
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--bg);
	font-size: 16px;            /* 16px stops iPhones zooming in on focus */
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
}
input::placeholder, textarea::placeholder{ color: #a3a3a3; }
input:focus, textarea:focus, select:focus{
	outline: none;
	border-color: var(--fg);
	box-shadow: 0 0 0 3px #0000000d;
}
textarea{
	resize: vertical;
	min-height: 96px;
}
.field{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.field.has-error input, .field.has-error textarea{ border-color: var(--danger); }
.errorlist{
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--danger);
	font-size: 0.85rem;
}
.errorlist.nonfield{
	background: #fdecea;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
}

/* ---------- Panels ---------- */
.card-panel{
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.panel-title{
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.6rem;
}
.step{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--fg);
	color: var(--bg);
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
}

/* ---------- Home: hero ---------- */
#hero{ color: var(--bg); }
#hero::before{
	background: linear-gradient(90deg, #00000073 0%, #0000 70%);
}
.outline{
	border: 1px solid #fff;
	border-radius: 36px;
}
#hero h1{
	color: var(--bg);
	font-size: clamp(3.5rem, 15vw, 5.5rem);
	line-height: 0.92;
}
.content a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bg);
	color: var(--fg);
	padding: 12px 26px;
	border-radius: var(--radius-pill);
	font-weight: 500;
}
.content a:hover ion-icon{ margin-left: 12px; }
.insta{
	background: #fff5;
	color: #fff;
	border-radius: 50%;
	font-size: 1.3rem;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
@media (min-width: 768px){
	.outline{ border-radius: 48px; }
}

/* ---------- Cards ---------- */
.card{
	border: 1px solid #0005;
	border-radius: 24px;
}
.image{
	background: var(--soft);
	border-radius: var(--radius);
}
.image ion-icon{
	font-size: 2rem;
	color: #0003;
}
.card .image img{ transition: transform 0.5s ease; }
.card:hover .image img{ transform: scale(1.05); }
.card h3{ font-size: 1.45rem; }
.card-cta{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.9rem;
	font-weight: 500;
	background: var(--fg);
	color: var(--bg);
	width: fit-content;
	padding: 8px 12px;
	border-radius: var(--radius-pill);
}
.card:hover .card-cta ion-icon{ margin-left: 8px; }
.clamp-2{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.add-form .qty input{
	padding: 10px 6px;
	text-align: center;
	border-radius: var(--radius-pill);
}

/* ---------- Bead designer ---------- */
.designer-preview{
	background: var(--soft);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 24px -18px #0006;
}
.preview-bar{
	background: var(--bg);
	border-radius: var(--radius-pill);
}
.preview-count{
	font-size: 0.8rem;
	color: var(--muted);
}
.bead-chip{
	background: var(--bg);
	color: var(--fg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	min-height: 0;
	font-weight: 400;
}
.bead-chip:hover{
	border-color: var(--fg);
	opacity: 1;
}
.bead-name{
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}
.bead-price{
	font-size: 0.75rem;
	color: var(--muted);
	white-space: nowrap;
}
.bead-pill{
	min-height: 36px;
	padding: 6px 10px 6px 8px;
	gap: 6px;
	background: var(--soft);
	color: var(--fg);
	border: 1px solid transparent;
	font-size: 0.85rem;
	font-weight: 400;
}
.bead-pill:hover{
	border-color: var(--fg);
	opacity: 1;
}
.bead-pill ion-icon{ color: var(--muted); }

/* ---------- Cart & summaries ---------- */
.cart-line + .cart-line{ border-top: 1px solid var(--line); }
.cart-line h3{ font-size: 1.3rem; }
.thumb{
	background: var(--soft);
	border-radius: var(--radius-sm);
}
.thumb ion-icon{
	font-size: 1.5rem;
	color: #0003;
}
.stepper{
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
}
.stepper button{
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--fg);
}
.stepper button:hover{
	background: var(--soft);
	opacity: 1;
}
.qty-value{
	min-width: 28px;
	text-align: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.summary-total{
	border-top: 1px solid var(--line);
	font-size: 1.05rem;
}
.summary-total strong{
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
}
.summary-lines .name{
	font-weight: 500;
	line-height: 1.3;
}
.empty-state .status-icon{ margin-bottom: 4px; }

/* ---------- Checkout ---------- */
.results button{
	min-height: 0;
	padding: 10px 14px;
	background: var(--bg);
	color: var(--fg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	font-weight: 400;
}
.results button:hover{
	border-color: var(--fg);
	opacity: 1;
}
.search-input ion-icon{
	color: var(--muted);
	font-size: 1.1rem;
}
.map-status{
	font-size: 0.875rem;
	color: var(--muted);
}
[data-map]{
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.leaflet-container{ font: inherit; }
.leaflet-bar{
	border: 0 !important;
	border-radius: 12px !important;
	overflow: hidden;
	box-shadow: var(--shadow) !important;
}
.leaflet-bar a{ color: var(--fg) !important; }

/* ---------- Payment & thank you ---------- */
.amount{
	font-size: clamp(2.75rem, 12vw, 4rem);
	font-variant-numeric: tabular-nums;
}
.brand{
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.code-input input{
	text-align: center;
	font-size: 1.6rem;
	letter-spacing: 0.4em;
	font-variant-numeric: tabular-nums;
}
.status-icon{
	border-radius: 50%;
	background: var(--fg);
	color: var(--bg);
	font-size: 2.2rem;
}
.status-icon.error{ background: var(--danger); }
.status-icon.soft{
	background: var(--soft);
	color: var(--fg);
}
.secure-note{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--muted);
}
.test-mode{
	background: var(--soft);
	border-radius: var(--radius);
	padding: 16px 20px;
	font-size: 0.9rem;
}
.test-mode summary{
	cursor: pointer;
	font-weight: 600;
}
.test-mode p{ margin-top: 8px; }
.test-cards code{
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 0.85rem;
}
.details dt{ color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer{
	border-top: 1px solid var(--line);
	font-size: 0.875rem;
	color: var(--muted);
	background: var(--fg);
}
.site-footer a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bg);
	font-weight: 500;
}
.site-footer .logo-text{
	color: var(--bg);
	font-size: 1.25rem;
}

/* ---------- Toast messages ---------- */
.message{
	list-style: none;
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	background: var(--fg);
	color: var(--bg);
	font-size: 0.9rem;
	box-shadow: var(--shadow-lg);
	animation: toast 5s ease forwards;
}
.message.error{ background: var(--danger); }
@keyframes toast{
	0%   { opacity: 0; transform: translateY(10px); }
	6%   { opacity: 1; transform: none; }
	85%  { opacity: 1; transform: none; }
	100% { opacity: 0; transform: translateY(10px); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*, *::before, *::after{ transition: none !important; }
}

/* ---------- Beads ----------
   A seed bead seen from the side: 12x16 with 4px corners, the string running left to right.
   The color comes from --bead (set per bead in the template); the layered gradients add the
   band of light, darker edges and ends, and a small glint, the same as the SVG drawing in
   rendering.py. .bead-md / .bead-lg are the same bead, scaled up for tapping. */
.bead{
	--s: 1;
	display: inline-block;
	flex-shrink: 0;
	width: calc(12px * var(--s));
	height: calc(16px * var(--s));
	border-radius: calc(4px * var(--s));
	background-color: var(--bead, #ccc);
	background-image:
		radial-gradient(circle at 32% 30%, rgba(255,255,255,.85) 0, rgba(255,255,255,0) 22%),
		linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 20%, rgba(255,255,255,.6) 30%, rgba(255,255,255,0) 42%, rgba(0,0,0,0) 75%, rgba(0,0,0,.38) 100%),
		linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,.2) 100%);
	box-shadow:
		0 1px 1.5px rgba(0,0,0,.35),
		0 2px 5px rgba(0,0,0,.12),
		inset 0 0 0 .6px rgba(0,0,0,.22);
}
.bead-md{ --s: 1.5; }
.bead-lg{ --s: 2; }

/* "Add one / Fill all" segmented switch */
.mode-switch{
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--soft);
}
.mode-switch span{
	border-radius: var(--radius-pill);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--muted);
	cursor: pointer;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.mode-switch input:checked + span{
	background: var(--bg);
	color: var(--fg);
	box-shadow: var(--shadow);
}
.mode-switch input:focus-visible + span{ outline: 2px solid var(--fg); outline-offset: 2px; }

/* The strand: every bead in order; tap to select. */
.slot{ cursor: pointer; }
.slot .bead{ transition: transform 0.15s var(--ease-out, ease), outline-color 0.15s; outline: 2px solid transparent; outline-offset: 2px; }
.slot:hover .bead{ transform: translateY(-2px); }
.slot input:checked + .bead{
	outline-color: var(--fg);
	transform: translateY(-3px);
}
.slot input:focus-visible + .bead{ outline-color: var(--muted); }
/* The same beads highlighted on the drawing */
.preview-stage .bead{ cursor: pointer; }
.preview-stage .bead.is-selected rect:first-child{
	stroke: var(--fg);
	stroke-width: 3;
	paint-order: stroke;
}
.has-selection .hint{ color: var(--fg); font-weight: 500; }

/* Language switcher */
.lang-switch{
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
}
.lang-switch button{
	--spin-color: var(--fg);
	background: none;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.lang-switch button:hover{
	color: var(--fg);
	opacity: 1;
}
.lang-switch button[aria-current="true"]{
	background: var(--fg);
	color: var(--bg);
}