/*
Theme Name: LockChime Box
Template: kadence
Description: Dark storefront for LockChime Box, built on Kadence.
Version: 1.0.0
Text Domain: lockchimebox
*/

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-latin.woff2") format("woff2-variations"),
		url("assets/fonts/archivo-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	--lcb-slate: #22252a;      /* dashboard: page background */
	--lcb-console: #2a2e34;    /* raised panels, inputs */
	--lcb-trim: #3b4047;       /* hairlines, borders */
	--lcb-ink: #eef0ee;        /* primary text */
	--lcb-fog: #a7adb4;        /* secondary text */
	--lcb-backlight: #d9ddd6;  /* the LCD screen: buttons, focus */
	--lcb-backlight-hi: #f1f3ef;
	--lcb-lcd-ink: #15171a;    /* text on the LCD */
	--lcb-lcd-bar: #2c2f33;    /* LCD title bar, selected row, keys */
	--lcb-device: #000;

	--lcb-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--lcb-wrap: 1180px;
	--lcb-gutter: clamp(16px, 4vw, 40px);

	--global-body-font-family: var(--lcb-sans);
	--global-heading-font-family: var(--lcb-sans);
	--global-fallback-font: var(--lcb-sans);
}

/* ---------- Base ---------- */

body {
	background: var(--lcb-slate);
	color: var(--lcb-ink);
	font-family: var(--lcb-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--lcb-backlight);
	color: var(--lcb-lcd-ink);
}

h1, h2, h3, h4,
.entry-content h1, .entry-content h2, .entry-content h3,
.product_title {
	font-family: var(--lcb-sans);
	color: var(--lcb-ink);
	font-stretch: 112%;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

h1, .product_title { font-weight: 640; line-height: 1.06; }
h2, .entry-content h2 { font-weight: 620; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.15; }
h3, .entry-content h3 { font-weight: 600; font-size: 1.2rem; line-height: 1.3; font-stretch: 106%; }

a { color: var(--lcb-ink); text-underline-offset: 0.18em; }
a:hover { color: var(--lcb-backlight-hi); }

:focus-visible {
	outline: 2px solid var(--lcb-backlight);
	outline-offset: 3px;
}

.entry-content p,
.entry-content li { max-width: 68ch; }

/* ---------- Header ---------- */

#masthead,
#masthead .site-main-header-wrap .site-header-row-container-inner,
#mobile-header .site-main-header-wrap .site-header-row-container-inner {
	background: var(--lcb-slate);
}

#masthead .site-main-header-wrap .site-header-row-container-inner {
	border-bottom: 1px solid var(--lcb-trim);
}

.site-branding .site-title {
	font-family: var(--lcb-sans);
	font-size: 1.2rem;
	font-weight: 680;
	font-stretch: 118%;
	letter-spacing: -0.01em;
	color: var(--lcb-ink);
}

.header-navigation .header-menu-container ul li a,
.mobile-navigation ul li a {
	color: var(--lcb-fog);
	font-size: 0.95rem;
	font-weight: 500;
}

.header-navigation .header-menu-container ul li a:hover,
.header-navigation .header-menu-container ul li.current-menu-item:not(.menu-item-type-custom) > a {
	color: var(--lcb-ink);
}

/* "How it works" is an anchor on the home page, not a page of its own. */
.header-navigation .header-menu-container ul li.menu-item-type-custom.current-menu-item > a,
.mobile-navigation ul li.menu-item-type-custom.current-menu-item > a {
	color: var(--lcb-fog);
}

.header-cart-wrap .header-cart-button,
.header-mobile-cart-wrap .header-cart-button {
	color: var(--lcb-ink);
}

.header-cart-wrap .header-cart-button .header-cart-total,
.header-mobile-cart-wrap .header-cart-button .header-cart-total {
	background: var(--lcb-backlight);
	color: var(--lcb-lcd-ink);
}

#mobile-drawer .drawer-inner {
	background: var(--lcb-console);
}

/* ---------- Buttons ---------- */

.lcb-btn,
.button,
button.button,
.wp-element-button,
.wp-block-button__link,
.single_add_to_cart_button,
.wc-block-components-button:not(.is-link),
.wpcf7-submit {
	background: var(--lcb-backlight);
	color: var(--lcb-lcd-ink);
	border: 0;
	border-radius: 4px;
	font-family: var(--lcb-sans);
	font-weight: 620;
	letter-spacing: 0;
	box-shadow: none;
}

.lcb-btn:hover,
.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover,
.wpcf7-submit:hover {
	background: var(--lcb-backlight-hi);
	color: var(--lcb-lcd-ink);
	box-shadow: none;
}

.lcb-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.9em 1.5em;
	font-size: 1rem;
	text-decoration: none;
}

/* ---------- Forms (contact form, coupon, etc.) ---------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="url"], input[type="password"], textarea, select {
	background: var(--lcb-console);
	color: var(--lcb-ink);
	border: 1px solid var(--lcb-trim);
	border-radius: 4px;
}

input:focus, textarea:focus, select:focus {
	border-color: var(--lcb-backlight);
	outline: none;
	box-shadow: 0 0 0 1px var(--lcb-backlight);
}

::placeholder { color: var(--lcb-fog); opacity: 1; }

/* ---------- Pages: title in content, no white boxes ---------- */

.content-bg,
.site .entry.content-bg,
body.content-style-unboxed .site { background: transparent; }

.entry-content-wrap { padding-left: 0; padding-right: 0; }

.entry-header .entry-title {
	font-size: clamp(2rem, 4vw, 3rem);
}

/* ---------- Home ---------- */

.lcb-home section {
	padding-block: clamp(56px, 8vw, 112px);
}

.lcb-wrap {
	max-width: var(--lcb-wrap);
	margin-inline: auto;
	padding-inline: var(--lcb-gutter);
}

.lcb-hero .lcb-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: center;
}

.lcb-hero h1 {
	font-size: clamp(2.4rem, 5.2vw, 4.1rem);
	margin: 0 0 0.5em;
}

.lcb-lede {
	font-size: 1.15rem;
	color: var(--lcb-fog);
	max-width: 46ch;
	margin: 0 0 2rem;
}

.lcb-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
}

.lcb-price {
	font-size: 2rem;
	font-weight: 640;
	font-stretch: 112%;
	line-height: 1;
}

.lcb-note {
	margin: 1rem 0 0;
	font-size: 0.92rem;
	color: var(--lcb-fog);
}

/* The device: a true-black unit with a working copy of its screen. */

.lcb-demo { margin: 0; }

.lcb-device {
	container-type: inline-size;
	position: relative;
	background: var(--lcb-device);
	border-radius: clamp(18px, 3vw, 36px);
	padding: 8% 11%;
	box-shadow:
		inset 0 0 0 2px #1b1b1b,
		inset 0 1px 0 2px rgba(255, 255, 255, 0.06),
		0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

.lcb-screen {
	display: grid;
	grid-template-rows: auto 1fr auto;
	aspect-ratio: 16 / 10;
	background: var(--lcb-backlight);
	color: var(--lcb-lcd-ink);
	border-radius: 0.8cqw;
	overflow: hidden;
	font-family: var(--lcb-sans);
	font-stretch: 72%;
	font-weight: 520;
	font-size: 4.6cqw;
	line-height: 1;
	box-shadow: inset 0 0 0 0.5cqw rgba(0, 0, 0, 0.25);
}

.lcb-screen__bar {
	display: flex;
	justify-content: space-between;
	gap: 2cqw;
	padding: 1.6cqw 2.4cqw;
	background: var(--lcb-lcd-bar);
	color: #e9ebe8;
	font-weight: 640;
}

.lcb-screen__banner {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lcb-list {
	list-style: none;
	margin: 0;
	padding: 0.6cqw 0;
	display: grid;
	align-content: start;
}

.lcb-list li {
	display: flex;
	justify-content: space-between;
	padding: 0.9cqw 2.4cqw 0.9cqw 4.2cqw;
	white-space: nowrap;
	position: relative;
	max-width: none;
}

.lcb-list li.is-cursor {
	background: var(--lcb-lcd-bar);
	color: #fff;
}

.lcb-list li.is-cursor::before {
	content: ">";
	position: absolute;
	left: 1.6cqw;
}

.lcb-list .lcb-on { visibility: hidden; font-weight: 700; }
.lcb-list li.is-active .lcb-on { visibility: visible; }

.lcb-keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--lcb-lcd-bar);
	gap: 0.4cqw;
	padding-top: 0.4cqw;
}

.lcb-keys button {
	appearance: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 2cqw 0;
	background: var(--lcb-lcd-bar);
	color: #e9ebe8;
	font: inherit;
	font-weight: 680;
	cursor: pointer;
	box-shadow: inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.12);
}

.lcb-keys button:hover { background: #3a3e43; }
.lcb-keys button:active { background: var(--lcb-backlight); color: var(--lcb-lcd-ink); }
.lcb-keys button:focus-visible { outline: 0.6cqw solid var(--lcb-backlight); outline-offset: -0.9cqw; }

.lcb-demo figcaption {
	display: grid;
	gap: 8px;
	margin-top: 22px;
	color: var(--lcb-fog);
	font-size: 0.92rem;
}

.lcb-demo label { color: var(--lcb-ink); font-weight: 560; font-size: 0.95rem; }
.lcb-demo input { width: 100%; max-width: 360px; padding: 0.65em 0.8em; font-size: 1rem; }

/* Steps: a real sequence, so it's numbered. */

.lcb-steps {
	border-top: 1px solid var(--lcb-trim);
}

.lcb-steps ol {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	counter-reset: step;
}

.lcb-steps li {
	counter-increment: step;
	padding: 0 clamp(16px, 3vw, 40px);
	border-left: 1px solid var(--lcb-trim);
}

.lcb-steps li:first-child { padding-left: 0; border-left: 0; }

.lcb-steps li::before {
	content: counter(step);
	display: block;
	font-size: 2.6rem;
	font-weight: 300;
	font-stretch: 125%;
	line-height: 1;
	color: var(--lcb-fog);
	margin-bottom: 1rem;
}

.lcb-steps h3 { margin: 0 0 0.4em; }
.lcb-steps p { margin: 0; color: var(--lcb-fog); }

/* Sound Manager */

.lcb-manager {
	background: var(--lcb-console);
}

.lcb-manager .lcb-wrap {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.lcb-manager img {
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.lcb-manager p { color: var(--lcb-fog); max-width: 52ch; }

.lcb-formats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.lcb-formats li {
	border: 1px solid var(--lcb-trim);
	border-radius: 4px;
	padding: 0.25em 0.6em;
	font-size: 0.9rem;
	font-stretch: 90%;
}

/* Photos */

.lcb-photos .lcb-wrap {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.lcb-photos img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 6px;
}

/* In the box */

.lcb-box {
	border-top: 1px solid var(--lcb-trim);
}

.lcb-box .lcb-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px 64px;
	align-items: end;
}

.lcb-box ul {
	margin: 1.25rem 0 0;
	padding-left: 1.1em;
	color: var(--lcb-fog);
}

.lcb-box li { margin: 0.35em 0; }
.lcb-box li::marker { color: var(--lcb-trim); }

/* ---------- Shop & product ---------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--lcb-ink); font-stretch: 106%; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--lcb-ink); font-weight: 600; }
.woocommerce div.product p.price { font-size: 1.6rem; font-stretch: 112%; }

.woocommerce ul.products li.product .product-details,
.woocommerce ul.products.woo-archive-btn-button li.product .product-details { background: transparent; }

.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: 6px; }

.woocommerce div.product .woocommerce-product-details__short-description { color: var(--lcb-fog); font-size: 1.05rem; }


.woocommerce .quantity input.qty {
	background: var(--lcb-console);
	color: var(--lcb-ink);
	border-color: var(--lcb-trim);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border-color: var(--lcb-trim);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--lcb-console);
	border-bottom-color: var(--lcb-console);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--lcb-fog); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--lcb-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--lcb-trim); }

.product_meta, .woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: var(--lcb-fog); }

.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
	background: var(--lcb-console);
	color: var(--lcb-ink);
	border-color: var(--lcb-trim);
}

.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning,
.woocommerce-error {
	background: #3a2a2c;
	color: var(--lcb-ink);
	border-color: #b85c5c;
}

.wc-block-components-notice-banner > svg { background: transparent; fill: var(--lcb-ink); }

/* ---------- Cart & checkout blocks ---------- */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input {
	background-color: var(--lcb-console) !important;
	color: var(--lcb-ink) !important;
	border-color: var(--lcb-trim) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label,
.wc-block-components-combobox .wc-block-components-combobox-control label {
	color: var(--lcb-fog) !important;
}

.wc-blocks-components-select .wc-blocks-components-select__container { background: var(--lcb-console); }
.wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--lcb-fog); }

.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1px var(--lcb-fog) !important;
	border-color: var(--lcb-trim) !important;
}

.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option {
	border-color: var(--lcb-trim) !important;
}

.wc-block-components-radio-control__input,
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	background: var(--lcb-console);
	border-color: var(--lcb-fog);
}

.wc-block-components-radio-control__input:checked::before { background: var(--lcb-backlight); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--lcb-backlight);
	border-color: var(--lcb-backlight);
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--lcb-lcd-ink); }

.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-totals-wrapper,
.wc-block-cart-items,
.wc-block-cart-items td,
.wc-block-cart-items th {
	border-color: var(--lcb-trim) !important;
}

.wc-block-components-order-summary-item__quantity {
	background: var(--lcb-backlight);
	color: var(--lcb-lcd-ink);
	border-color: var(--lcb-slate);
	box-shadow: none;
}

.wc-block-components-product-metadata,
.wc-block-components-checkout-step__description,
.wc-block-checkout__terms,
.wc-block-components-address-card { color: var(--lcb-fog); }

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	min-height: 3.2em;
	font-size: 1.05rem;
}

/* ---------- Footer ---------- */

#colophon .site-footer-wrap .site-footer-row-container-inner {
	background: var(--lcb-slate);
	border-top: 1px solid var(--lcb-trim);
}

#colophon .footer-html {
	color: var(--lcb-fog);
	font-size: 0.9rem;
}

.lcb-footer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 32px;
	text-align: left;
}

.lcb-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

#colophon .footer-html-inner { width: 100%; }
#colophon .lcb-footer a { color: var(--lcb-fog); text-decoration: none; }
#colophon .lcb-footer a:hover { color: var(--lcb-ink); text-decoration: underline; }
#colophon .footer-html p { margin: 0; }
.lcb-footer__note { flex-basis: 100%; font-size: 0.82rem; }

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
	.lcb-hero .lcb-wrap,
	.lcb-manager .lcb-wrap,
	.lcb-box .lcb-wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.lcb-steps ol { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.lcb-steps li,
	.lcb-steps li:first-child { padding: 0; border-left: 0; }

	.lcb-photos .lcb-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.lcb-manager img { max-width: 300px; }
}

.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}