/**
 * Promotional products store.
 *
 * Loaded only on WooCommerce pages. Inherits the tokens from style.css.
 */

/* -------------------------------------------------------------------------
 * Verification banner
 * ---------------------------------------------------------------------- */

.sl-verify-banner {
	background: var(--sl-brand);
	color: var(--sl-ink);
	font-size: .93rem;
}

.sl-verify-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: .7rem;
}

.sl-verify-banner__text { margin: 0; }
.sl-verify-banner__form { margin: 0; }

.sl-verify-banner .btn {
	background: var(--sl-ink);
	color: #fff;
	padding: .45rem 1rem;
	font-size: .85rem;
}

.sl-verify-banner .btn:hover { background: var(--sl-ink-soft); color: #fff; }

/* -------------------------------------------------------------------------
 * Shop layout
 * ---------------------------------------------------------------------- */

.shop { padding-block: clamp(2rem, 5vw, 3.5rem); }

.shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1.25rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--sl-line-soft);
}

.woocommerce-result-count {
	margin: 0 !important;
	font-size: .88rem;
	color: var(--sl-text-mute);
}

.woocommerce-ordering { margin: 0 !important; }

.woocommerce-ordering select {
	padding: .5rem .75rem;
	font-family: inherit;
	font-size: .9rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius-sm);
	background: var(--sl-bg);
	color: var(--sl-text);
}

/* -------------------------------------------------------------------------
 * Product grid
 * ---------------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid !important;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	padding: 0;
	background: var(--sl-bg);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius-lg);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--sl-shadow);
	transform: translateY(-2px);
	border-color: var(--sl-line);
}

.woocommerce ul.products li.product a img {
	margin: 0 !important;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--sl-surface);
	padding: 1rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sl-font-head);
	font-size: .98rem !important;
	line-height: 1.35;
	font-weight: 600;
	color: var(--sl-ink);
	padding: .9rem 1rem .25rem !important;
	margin: 0;
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 1rem;
	margin: 0 0 .4rem;
	font-family: var(--sl-font-head);
	font-size: 1.15rem !important;
	font-weight: 700;
	color: var(--sl-ink) !important;
}

.woocommerce ul.products li.product .price del { opacity: .5; font-weight: 400; }

.sl-loop-min {
	padding: 0 1rem;
	margin: 0 0 .9rem;
	font-size: .78rem;
	color: var(--sl-text-mute);
}

.woocommerce ul.products li.product .button {
	margin: auto 1rem 1rem !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .6rem 1.1rem;
	font-family: var(--sl-font-head);
	font-size: .88rem;
	font-weight: 600;
	background: var(--sl-brand-deep);
	color: #fff;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
}

.woocommerce ul.products li.product .button:hover { background: var(--sl-brand-dark); color: #fff; }

.woocommerce ul.products li.product .onsale {
	top: .75rem;
	right: .75rem;
	left: auto;
	margin: 0;
	padding: .25rem .7rem;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
	font-size: .72rem;
	font-weight: 700;
	background: var(--sl-brand);
	color: var(--sl-ink);
	border-radius: 999px;
}

/* -------------------------------------------------------------------------
 * Price gate
 * ---------------------------------------------------------------------- */

.sl-price-gate { display: block; font-family: var(--sl-font); }

.sl-price-gate a {
	font-family: var(--sl-font-head);
	font-size: .95rem;
	font-weight: 600;
	color: var(--sl-brand-deep);
	text-decoration: none;
}

.sl-price-gate a:hover { text-decoration: underline; }

.sl-price-gate__sub {
	display: block;
	font-size: .74rem;
	font-weight: 400;
	color: var(--sl-text-mute);
}

.sl-gate {
	padding: 1.5rem;
	margin-block: 1.5rem;
	background: var(--sl-surface);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius-lg);
}

.sl-gate__title { font-size: 1.15rem; margin-bottom: .5rem; }
.sl-gate__body { font-size: .93rem; color: var(--sl-text-soft); margin-bottom: 1.25rem; }
.sl-gate__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sl-gate__alt { font-size: .87rem; color: var(--sl-text-mute); margin: 0; }

/* -------------------------------------------------------------------------
 * Single product
 * ---------------------------------------------------------------------- */

.woocommerce div.product { margin-top: 0; }

.woocommerce div.product .product_title {
	font-size: clamp(1.5rem, 3.4vw, 2.2rem);
	margin-bottom: .5rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--sl-font-head);
	font-size: 1.9rem !important;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--sl-ink) !important;
	margin-bottom: .35rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--sl-text-soft);
	margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart { margin-bottom: 1.5rem; }

.woocommerce div.product form.cart .button {
	padding: .8rem 1.6rem;
	font-family: var(--sl-font-head);
	font-size: .98rem;
	font-weight: 600;
	background: var(--sl-brand-deep);
	color: #fff;
	border: 0;
	border-radius: 999px;
}

.woocommerce div.product form.cart .button:hover { background: var(--sl-brand-dark); }

.woocommerce .quantity .qty {
	padding: .7rem .5rem;
	width: 5rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius-sm);
	font-family: inherit;
}

/* Quantity break table */

.sl-breaks {
	margin-block: 1.5rem;
	padding: 1.25rem;
	background: var(--sl-surface);
	border-radius: var(--sl-radius);
}

.sl-breaks__title {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sl-text-mute);
	margin-bottom: .8rem;
}

.sl-breaks__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

.sl-breaks__table th {
	font-family: var(--sl-font-head);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sl-text-mute);
	text-align: left;
	padding-bottom: .5rem;
}

.sl-breaks__table td {
	padding: .5rem 0;
	border-top: 1px solid var(--sl-line);
	color: var(--sl-text-soft);
}

.sl-breaks__table td strong { color: var(--sl-ink); }

.sl-breaks__note {
	margin: .85rem 0 0;
	font-size: .8rem;
	color: var(--sl-text-mute);
}

/* Branding panel */

.sl-branding {
	margin-block: 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
}

.sl-branding__title { font-size: 1rem; margin-bottom: .5rem; }

.sl-branding__intro {
	font-size: .88rem;
	color: var(--sl-text-soft);
	margin-bottom: 1rem;
}

.sl-branding__field { display: grid; gap: .3rem; margin-bottom: 1rem; }
.sl-branding__field:last-child { margin-bottom: 0; }

.sl-branding__field label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--sl-ink);
}

.sl-branding__toggle {
	display: flex;
	align-items: center;
	gap: .55rem;
	cursor: pointer;
}

.sl-branding__toggle input { width: 1rem; height: 1rem; accent-color: var(--sl-ink); }

.sl-branding__field select,
.sl-branding__field input[type="text"] {
	padding: .6rem .75rem;
	font-family: inherit;
	font-size: .92rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius-sm);
	background: var(--sl-bg);
	color: var(--sl-text);
	width: 100%;
}

.sl-branding__hint,
.sl-branding__note {
	font-size: .79rem;
	color: var(--sl-text-mute);
	font-weight: 400;
}

.sl-branding__note { color: var(--sl-brand-deep); }

.sl-branding__options[hidden] { display: none; }

.sl-branding__artwork {
	margin: 1rem 0 0;
	padding: .7rem .85rem;
	font-size: .85rem;
	background: var(--sl-surface);
	border-radius: var(--sl-radius-sm);
	color: var(--sl-text-soft);
}

.sl-branding__artwork--missing {
	background: rgba(255,182,39,.12);
	color: var(--sl-warn);
}

/* Reassurance strip */

.sl-reassure {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.sl-reassure li {
	display: flex;
	gap: .5rem;
	font-size: .87rem;
	color: var(--sl-text-soft);
}

.sl-reassure .icon { color: var(--sl-ok); margin-top: .18rem; }

/* -------------------------------------------------------------------------
 * Category cards on shop archives
 * ---------------------------------------------------------------------- */

.woocommerce ul.products li.product-category a {
	display: block;
	text-decoration: none;
	text-align: center;
}

.woocommerce ul.products li.product-category h2 {
	font-family: var(--sl-font-head);
	font-size: 1rem !important;
	font-weight: 600;
	color: var(--sl-ink);
	padding: 1rem !important;
	margin: 0;
}

.woocommerce ul.products li.product-category .count {
	display: block;
	font-size: .78rem;
	font-weight: 400;
	color: var(--sl-text-mute);
	background: none;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Cart, checkout, account
 * ---------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table th {
	font-family: var(--sl-font-head);
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sl-text-mute);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: 1.15rem; }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order {
	padding: .7rem 1.4rem;
	font-family: var(--sl-font-head);
	font-size: .92rem;
	font-weight: 600;
	background: var(--sl-brand-deep);
	color: #fff;
	border: 0;
	border-radius: 999px;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover { background: var(--sl-brand-dark); color: #fff; }

.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--sl-brand); color: var(--sl-ink); }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: #ffc44d; color: var(--sl-ink); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: .7rem .85rem;
	font-family: inherit;
	font-size: .95rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius-sm);
	background: var(--sl-bg);
	color: var(--sl-text);
}

.woocommerce form .form-row label { font-size: .85rem; font-weight: 600; color: var(--sl-ink); }

.sl-register-note {
	font-size: .82rem;
	color: var(--sl-text-mute);
	margin-top: .5rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--sl-ink);
	background: var(--sl-surface);
	border-radius: var(--sl-radius-sm);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--sl-ink); }

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .25rem;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: .6rem .85rem;
	font-size: .93rem;
	color: var(--sl-text-soft);
	text-decoration: none;
	border-radius: var(--sl-radius-sm);
}

.woocommerce-MyAccount-navigation a:hover { background: var(--sl-surface); color: var(--sl-ink); }

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--sl-brand-deep);
	color: #fff;
	font-weight: 600;
}

/* Artwork page */

.sl-artwork__current {
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	background: var(--sl-surface);
	border-radius: var(--sl-radius);
	text-align: center;
}

.sl-artwork__current img { max-height: 12rem; width: auto; }

.sl-artwork__name {
	margin: .75rem 0 0;
	font-family: var(--sl-font-mono);
	font-size: .82rem;
	color: var(--sl-text-mute);
}

.sl-artwork__form .field { max-width: 30rem; }