/*
Theme Name: Slope
Theme URI: https://theupline.co/themes/slope
Template: upline-bones
Author: BFD Creative Co.
Author URI: https://bfdcreative.co
Description: Slope — an Upline-approved skin for a ski and alpine shop. A child of Upline Bones: the chassis holds behaviour, this theme holds only the look. Rounded surfaces, one teal accent, a dark footer, and a hero that goes 4:5 on a phone and 16:9 on a desk.
Version: 0.1.8
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: slope
Tags: full-site-editing, block-patterns, style-variations, e-commerce, wide-blocks

Built on Upline Bones 2.3.11 against Upline for WooCommerce 1.27.1. Class prefix
is `sl-`; private tokens live in settings.custom.sl.*. This file is LOOK only.
Every rule that is structure rather than taste is marked `CHASSIS-GAP` and is
listed in CHASSIS-GAPS.md with the rest of the hand-back.

House rules held here: no selector into `.upline-*` markup, no `!important`,
no `@layer`, mobile-first (`min-width` queries only), every colour from a token.
The plugin's own boundaries are cited where a rule is scoped to one of its
surfaces: menu 760/761, rail 782/783 — tokens doc stamped 1.27.1.
*/

/* -------------------------------------------------------------------------
   1. Type utilities
   ------------------------------------------------------------------------- */

/* The mono signature: uppercase, tracked, small. One voice for section
   eyebrows, image captions, and the plugin/Woo labels that inherit it. */
.sl-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono-sm);
	letter-spacing: var(--wp--custom--sl--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.sl-eyebrow--accent {
	color: var(--wp--custom--sl--accent-ink);
	font-family: var(--wp--preset--font-family--sans);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* Section header row: heading left, "View all →" right, baseline aligned. */
.sl-section-head {
	align-items: flex-end;
}

.sl-section-head .sl-more {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.sl-section-head .sl-more:hover {
	color: var(--wp--custom--sl--accent-ink);
}

/* Arrow links: the "→" is typed in the content so it survives without CSS. */
.sl-arrow {
	font-weight: 500;
	color: var(--wp--custom--sl--accent-ink);
}

/* -------------------------------------------------------------------------
   2. Surfaces
   ------------------------------------------------------------------------- */

/* Card: outlined, radius from the contract, never shadowed (rule 8.4). */
.sl-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--upline--radius);
	background: var(--wp--preset--color--base);
}

/* Soft panel: the surface tint, no outline — spec tiles, review cards,
   newsletter band, FAQ cards, the order summary. */
.sl-panel {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--upline--radius);
}

.sl-panel--lg {
	border-radius: var(--wp--custom--sl--radius-lg);
}

/* Image placeholder ground: the sage gradient every empty image slot wears. */
.sl-tile {
	background: var(--wp--preset--gradient--tile);
	border-radius: var(--wp--custom--upline--radius);
	overflow: hidden;
}

/* Media boxes carry their ratio from a token, never from the block attribute
   (§9.8): the attribute emits an inline style no token can reach. */
.sl-ratio-product { aspect-ratio: var(--wp--custom--sl--ratio-product); }
.sl-ratio-category { aspect-ratio: var(--wp--custom--upline--tile-ratio-category); }
.sl-ratio-featured { aspect-ratio: var(--wp--custom--upline--tile-ratio-featured); }
.sl-ratio-brand { aspect-ratio: var(--wp--custom--upline--tile-ratio-brand); }
.sl-ratio-editorial { aspect-ratio: var(--wp--custom--sl--ratio-editorial); }
.sl-ratio-portrait { aspect-ratio: var(--wp--custom--sl--ratio-portrait); }

.sl-ratio-product img,
.sl-ratio-category img,
.sl-ratio-featured img,
.sl-ratio-brand img,
.sl-ratio-editorial img,
.sl-ratio-portrait img,
.sl-tile img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------------------
   3. Controls
   ------------------------------------------------------------------------- */

/* Secondary button: outlined pill. Applied as a block style on core/button. */
.wp-block-button.is-style-sl-outline .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid var(--wp--preset--color--line);
}

.wp-block-button.is-style-sl-outline .wp-block-button__link:hover {
	border-color: currentColor;
	background: transparent;
	color: currentColor;
}

/* Accent button: the teal fill with an ink label — the only accent-filled
   control class on the site (mockup 09: "the only accent-filled button in
   checkout"). Label is contrast, never white: 7.6:1 on the accent. */
.wp-block-button.is-style-sl-accent .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
}

.wp-block-button.is-style-sl-accent .wp-block-button__link:hover {
	background: var(--wp--custom--sl--accent-ink);
	color: var(--wp--preset--color--base);
}

/* Soft button: surface pill (Search / Account in the header, "Next →" in
   pagination, filter toggles). */
.wp-block-button.is-style-sl-soft .wp-block-button__link {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-sl-soft .wp-block-button__link:hover {
	background: var(--wp--preset--color--tile);
	color: var(--wp--preset--color--contrast);
}

/* Small pill chip: the quick-filter row, post tags, category filters. Height
   is 36px by rule 8.6 (chips stay 36); the plugin's own chips take their
   height from the plugin, this is for chips the theme renders. */
.sl-chips {
	gap: var(--wp--preset--spacing--20);
}

.sl-chips .wp-block-button__link,
.sl-chip {
	min-block-size: 36px;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	line-height: 36px;
	border-radius: var(--wp--custom--sl--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.sl-chips .wp-block-button__link:hover,
.sl-chip:hover {
	background: var(--wp--preset--color--tile);
	color: var(--wp--preset--color--contrast);
}

.sl-chips .is-active .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Category chips on the blog index: core/categories renders a list. */
.sl-cat-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	padding: 0;
	margin: 0;
}

.sl-cat-list li a {
	display: inline-flex;
	align-items: center;
	min-block-size: 36px;
	padding-inline: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--sl--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.sl-cat-list li.current-cat a {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* The accent badge — "New", "Winter 26 is live", "-40%". Ink label on the
   accent fill, pill, small. */
.sl-badge {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
	border-radius: var(--wp--custom--sl--pill);
	padding: 0.35em 0.9em;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.4;
}

/* Forms: Bones normalises the element; Slope rounds it and tints it. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
	background-color: var(--wp--preset--color--surface);
	border-color: transparent;
	border-radius: var(--wp--custom--sl--pill);
}

:where(textarea) {
	border-radius: var(--wp--custom--upline--radius);
}

:where(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--contrast);
}

/* Core search block (404, search template): pill field with inside button. */
.wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--wp--custom--sl--pill);
	padding: var(--wp--preset--spacing--10);
}

.wp-block-search__inside-wrapper .wp-block-search__input {
	background: transparent;
	border: 0;
}

.wp-block-search__inside-wrapper .wp-block-search__button {
	border-radius: var(--wp--custom--sl--pill);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0;
	padding-inline: var(--wp--preset--spacing--60);
}

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */

.sl-header {
	background: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* A definite height, not a minimum: Bones' inline-menu stretch resolves
   `block-size: 100%` against this box, and a min-height is indefinite —
   measured: the nav sat at 46px inside a 72px row until this was `block-size`. */
.sl-header__row {
	block-size: var(--wp--custom--sl--header-height);
	gap: var(--wp--preset--spacing--30);
}

.sl-wordmark {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	flex: 0 1 auto;
	min-inline-size: 0;
}

/* The wordmark yields before the controls do: a long site name truncates
   rather than pushing the bag off the right edge (measured at 390 with an
   18-character site name). */
.sl-wordmark a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Mobile order: menu toggle, wordmark, actions. The menu block is first in
   the markup so the drawer control lands hard left; the wordmark follows. */
.sl-header__row > .sl-nav { order: 1; flex: 0 0 auto; }
.sl-header__row > .sl-wordmark { order: 2; }
.sl-header__row > .sl-actions { order: 3; margin-inline-start: auto; flex: 0 0 auto; }

/* Action pills: the wrappers core generates for the three header controls
   (search block, customer account, mini-cart) become surface pills. The
   controls inside stay the vendors' — glyphs come from the ub icon slots. */
.sl-actions {
	gap: var(--wp--preset--spacing--20);
}

.sl-actions > * {
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--wp--custom--upline--tap);
	min-block-size: var(--wp--custom--upline--tap);
	padding-inline: 0;
	border-radius: var(--wp--custom--sl--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.sl-actions > .wp-block-woocommerce-mini-cart {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sl-actions > * a,
.sl-actions > * button {
	color: inherit;
}

/* Desktop: the menu goes inline between wordmark and actions. Boundary is
   the PLUGIN's menu boundary (min-width: 761px, tokens doc 1.27.1), because
   the surface changing shape at this width is the plugin's menu. */
@media (min-width: 761px) {
	.sl-header__row > .sl-wordmark { order: 1; }
	/* Bones' inline-menu stretch runs the list to the row's bottom so the
	   hover bridge works, which leaves the 44px link at the TOP of a 72px
	   row (measured). Padding the wrapper by half the difference centres the
	   link and keeps the bridge below it. Written in the tokens it depends
	   on: the link's height is the plugin's tap floor, the row's is the
	   skin's header height. */
	.sl-header__row > .sl-nav {
		order: 2;
		flex: 1 1 auto;
		min-inline-size: 0;
		--sl-nav-offset: calc((var(--wp--custom--sl--header-height) - var(--wp--custom--upline--tap)) / 2);
		padding-block-start: var(--sl-nav-offset);
		block-size: calc(100% - var(--sl-nav-offset));
	}
	.sl-header__row > .sl-actions { order: 3; }
	.sl-header__row { gap: var(--wp--preset--spacing--70); }
	.sl-wordmark { font-size: 26px; }
	.sl-actions > * { padding-inline: var(--wp--preset--spacing--30); }
}

/* -------------------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------------------- */

.sl-footer {
	background: var(--wp--preset--color--inverse);
	color: var(--wp--preset--color--inverse-text);
	border-radius: var(--wp--custom--sl--radius-lg) var(--wp--custom--sl--radius-lg) 0 0;
}

.sl-footer a {
	color: var(--wp--preset--color--inverse-text);
}

.sl-footer a:hover {
	color: var(--wp--custom--sl--accent-ink-dark);
}

.sl-footer .sl-wordmark {
	color: var(--wp--preset--color--inverse-text);
}

.sl-footer__blurb,
.sl-footer__legal,
.sl-footer .sl-eyebrow {
	color: var(--wp--preset--color--inverse-muted);
}

.sl-footer__col-title {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--inverse-muted);
	font-weight: 400;
	margin-block-end: var(--wp--preset--spacing--30);
}

.sl-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sl-footer__links li {
	margin-block-end: var(--wp--preset--spacing--30);
}

.sl-footer__legal {
	border-block-start: 1px solid var(--wp--preset--color--inverse-muted);
	padding-block-start: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Footer hairline: inverse-muted is a text colour; at 1px on ink it reads
   as a faint rule. Decorative hairline inside an identified panel — excluded
   from the 3:1 audit by design (skill §8). */

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */

/* Full-bleed cover with rounded corners, 4:5 on a phone, 16:9 from the
   plugin's rail boundary up — the hero is a design surface, so the design
   breakpoint is its own (783 is borrowed as the point where the page stops
   being a phone column; it is written here, not cited, because the hero is
   not a plugin surface). Ratio lives in tokens, applied as min-height so
   long copy can still grow the box. */
.sl-hero {
	border-radius: var(--wp--custom--sl--radius-lg);
	overflow: hidden;
	aspect-ratio: var(--wp--custom--sl--ratio-hero-mobile);
	min-block-size: 0;
	background: var(--wp--preset--gradient--tile);
}

.wp-block-cover.sl-hero,
.wp-block-cover.sl-hero .wp-block-cover__inner-container {
	color: var(--wp--preset--color--contrast);
}

.sl-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	block-size: 100%;
}

/* Core paints the overlay span black at 50%; two classes deep beats core's
   `.wp-block-cover .wp-block-cover__background` (0,2,0) by specificity. */
.wp-block-cover.sl-hero .wp-block-cover__background {
	background: transparent;
	opacity: 0;
}

.sl-hero h1 {
	max-inline-size: 12ch;
}

.sl-hero__lede {
	max-inline-size: 42ch;
}

@media (min-width: 783px) {
	.sl-hero {
		aspect-ratio: var(--wp--custom--sl--ratio-hero-desktop);
	}
}

/* Page hero variant (about): same box, shorter. */
.sl-hero--page {
	aspect-ratio: auto;
	min-block-size: 360px;
}

@media (min-width: 783px) {
	.sl-hero--page {
		min-block-size: 480px;
	}
}

/* -------------------------------------------------------------------------
   7. Home sections
   ------------------------------------------------------------------------- */

/* Horizontal scroller: activity tiles run off the right edge and scroll in
   their own container (rule 8.11). Bones supplies .ub-scroll-x. */
.sl-scroller {
	display: flex;
	gap: var(--wp--custom--upline--gap);
	scroll-snap-type: x mandatory;
	padding-block-end: var(--wp--preset--spacing--40);
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--muted) transparent;
}

.sl-scroller > * {
	flex: 0 0 min(78vw, 320px);
	scroll-snap-align: start;
	margin: 0;
}

/* Activity tile: image ground, title + line at the foot, count top right. */
.sl-activity {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--50);
	aspect-ratio: var(--wp--custom--sl--ratio-portrait);
	color: var(--wp--preset--color--contrast);
}

.sl-activity h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.sl-activity p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Product tile — the archive card and the home shelf share it. Markup is
   Woo's product-template; the class sits on the template so nothing inside
   the plugin's or Woo's tree is named below its published wrapper. */
.sl-product-grid {
	gap: var(--wp--custom--upline--gap);
}

.sl-product-grid .wc-block-components-product-image,
.sl-product-grid .wp-block-woocommerce-product-image {
	background: var(--wp--preset--gradient--tile);
	border-radius: var(--wp--custom--upline--radius);
	aspect-ratio: var(--wp--custom--sl--ratio-product);
	overflow: hidden;
	position: relative;
}

/* Product photos are cut-outs on a plain ground (skis are 1:3, boots 4:5),
   and Woo's image block pins the <img> to 1:1 with an inline style, so
   `cover` cropped a ski to its blank middle (measured: 600×1838 source in a
   243×243 box). The image fills the 4:5 box in both axes — explicit width
   and height override the inline aspect-ratio — and `contain` keeps the
   whole product visible on the tile ground, with a little air around it. */
.sl-product-grid .wc-block-components-product-image > a {
	block-size: 100%;
}

.sl-product-grid .wp-block-woocommerce-product-image img {
	inline-size: 100%;
	block-size: 100%;
	padding: var(--wp--preset--spacing--50);
	box-sizing: border-box;
}

/* `object-fit` is NOT set here on purpose: Woo emits it as an inline style
   on the <img> (measured: `object-fit:cover;aspect-ratio:1/1;`), which no
   stylesheet rule can reach. The block's `scale:"contain"` attribute in the
   templates is what changes it (§4 — change the attribute, never write the
   losing rule). */

.sl-product-grid .wp-block-woocommerce-product-image:hover {
	background: var(--wp--custom--upline--tile-bg);
}

.sl-product-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 0;
}

.sl-product-grid .wp-block-post-title a:hover {
	color: var(--wp--custom--sl--accent-ink);
}

/* Brand line above the title: Woo's product-meta? No — the brand taxonomy
   is rendered through core/post-terms with term "product_brand". */
.sl-product-grid .sl-tile-brand {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin: 0;
	font-weight: 400;
}

/* Title left, price right on one row. */
.sl-product-grid .sl-tile-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
}

.sl-product-grid .sl-tile-meta .wp-block-woocommerce-product-price {
	margin: 0;
	white-space: nowrap;
}

.sl-product-grid .wc-block-components-product-price__regular {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	text-align: end;
}

/* Sale badge sits top-left on the image, as a pill. */
.sl-product-grid .wc-block-components-product-sale-badge,
.sl-product-grid .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-start: var(--wp--preset--spacing--40);
	border: 0;
	text-transform: none;
	letter-spacing: 0;
}

/* Two-up editorial + outlet band. */
.sl-duo {
	gap: var(--wp--custom--upline--gap);
}

.sl-duo > .wp-block-column {
	border-radius: var(--wp--custom--sl--radius-lg);
	padding: var(--wp--preset--spacing--70);
	min-block-size: 320px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.sl-duo__editorial {
	background: var(--wp--preset--gradient--tile);
}

.sl-duo__outlet {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
}

.sl-duo__outlet .sl-eyebrow,
.sl-duo__outlet a,
.sl-duo__outlet h2,
.sl-duo__outlet .sl-arrow {
	color: var(--wp--preset--color--accent-text);
}

/* From the field: a 6-column gallery where the 1st and 4th items span two
   rows. Photos are content; the shape is the theme's. */
.sl-field {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--custom--upline--gap);
}

.sl-field > * {
	margin: 0;
	aspect-ratio: var(--wp--custom--upline--tile-ratio-brand);
	position: relative;
}

.sl-field > *:nth-child(1),
.sl-field > *:nth-child(4) {
	aspect-ratio: var(--wp--custom--sl--ratio-portrait);
	grid-row: span 2;
}

.sl-field figcaption,
.sl-field .sl-caption {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--40);
	inset-inline-start: var(--wp--preset--spacing--40);
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

@media (min-width: 783px) {
	.sl-field {
		grid-template-columns: repeat(6, 1fr);
	}

	.sl-field > *:nth-child(1),
	.sl-field > *:nth-child(4) {
		grid-column: span 2;
	}
}

/* Brands we back: the plugin's brand tiles render the text fallback (rule
   8.9). Look only — surface tile, bold wordmark, 1:1 ratio from the token.
   The plugin owns the markup; this styles the block wrapper it publishes. */
.sl-brands {
	gap: var(--wp--custom--upline--gap-sm);
}

/* Journal 3-up: featured image 3:2, category in accent ink, title. */
.sl-journal .wp-block-post-featured-image {
	border-radius: var(--wp--custom--upline--radius);
	overflow: hidden;
	background: var(--wp--preset--gradient--tile);
	aspect-ratio: var(--wp--custom--sl--ratio-editorial);
	margin-block-end: var(--wp--preset--spacing--40);
}

.sl-journal .wp-block-post-featured-image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.sl-journal .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin-block: var(--wp--preset--spacing--20) 0;
}

/* Newsletter band: an honest slot. Heading and copy in a surface panel with
   a named empty zone a form plugin drops into. No fake form (§6). */
.sl-newsletter {
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--70);
}

.sl-newsletter__form {
	min-block-size: var(--wp--custom--upline--tap);
}

.sl-newsletter__form form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.sl-newsletter__form input[type="email"] {
	flex: 1 1 240px;
	background: var(--wp--preset--color--base);
}

/* Trust strip: four short claims above the footer, muted second lines. */
.sl-trust {
	gap: var(--wp--preset--spacing--60);
}

.sl-trust h3 {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--10);
}

.sl-trust p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
   8. Archive (shop, category, brand, collection, search results)
   ------------------------------------------------------------------------- */

/* Bones' rail-and-grid shell, dressed. The rail is the plugin's filters
   block; its interior restyles from theme.json tokens only. */
.sl-archive__head h1 {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.sl-archive__head .wp-block-term-description,
.sl-archive__intro {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	max-inline-size: 60ch;
}

.sl-archive__toolbar {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* The plugin's rail title inherits the h2 scale; the rail wants the h3 scale. */
.ub-archive__rail h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* Woo's sorting select as a plain label-style control. */
.sl-archive__toolbar .wc-block-catalog-sorting select,
.sl-archive__toolbar select {
	background-color: transparent;
	border: 0;
	padding-inline-start: 0;
	font-weight: 500;
}

/* Pagination pills. */
.sl-pagination {
	margin-block-start: var(--wp--preset--spacing--90);
	gap: var(--wp--preset--spacing--20);
}

.sl-pagination .page-numbers,
.sl-pagination a,
.sl-pagination .wp-block-query-pagination-next,
.sl-pagination .wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--wp--custom--upline--tap);
	min-block-size: var(--wp--custom--upline--tap);
	padding-inline: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--sl--pill);
	background: var(--wp--preset--color--surface);
	text-decoration: none;
}

.sl-pagination .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sl-pagination .page-numbers.dots {
	background: transparent;
	min-inline-size: 0;
}

/* Brand banner: the term image behind the name (mockup 04). The plugin's
   collection-intro block renders the image; this rounds and grounds it. */
.sl-brand-banner {
	border-radius: var(--wp--custom--sl--radius-lg);
	overflow: hidden;
	background: var(--wp--preset--gradient--tile);
	min-block-size: 240px;
}

@media (min-width: 783px) {
	.sl-brand-banner {
		min-block-size: 380px;
	}
}

/* Empty state: the no-results panel reads as designed, not as an error. */
.sl-empty {
	text-align: center;
}

.sl-empty h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-end: var(--wp--preset--spacing--20);
}

.sl-empty p {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* -------------------------------------------------------------------------
   9. Product page
   ------------------------------------------------------------------------- */

.sl-pdp {
	gap: var(--wp--preset--spacing--80);
}

/* Gallery column: rounded, tile-grounded images. The Woo gallery block's
   internals are its own; the wrapper takes the look. */
/* Woo's layout sheet floats the gallery at 48% via
   `.woocommerce div.product div.images` (0,3,2) — the element-count trap in
   §6. This selector is (0,4,2) so it wins by specificity, in the text. */
.sl-pdp .sl-pdp__gallery div.images.woocommerce-product-gallery {
	inline-size: 100%;
	max-inline-size: none;
	float: none;
	margin: 0;
}

/* Woo caps the gallery block wrapper at 512px one level up (measured: the
   second constraint, §6). Lift it, then cap at 720px so a 600px source is
   never stretched far past itself (rule 8.15); raise Woo's single image
   size to go wider. */
.sl-pdp__gallery .wp-block-woocommerce-product-image-gallery {
	max-inline-size: 720px;
}

.sl-pdp__gallery .woocommerce-product-gallery__wrapper {
	border-radius: var(--wp--custom--upline--radius);
	overflow: hidden;
	background: var(--wp--preset--gradient--tile);
	margin: 0;
}

.sl-pdp__gallery .woocommerce-product-gallery__image img {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

.sl-pdp__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--30) 0 0;
}

.sl-pdp__gallery .flex-control-thumbs li {
	inline-size: calc((100% - 5 * var(--wp--preset--spacing--20)) / 6);
	margin: 0;
	float: none;
}

.sl-pdp__gallery .flex-control-thumbs img {
	border-radius: var(--wp--custom--upline--radius);
	opacity: 0.6;
	cursor: pointer;
}

.sl-pdp__gallery .flex-control-thumbs img.flex-active,
.sl-pdp__gallery .flex-control-thumbs img:hover {
	opacity: 1;
}

.sl-pdp__gallery .woocommerce-product-gallery__trigger {
	display: none;
}

/* Buy column: sticky on desktop so the price and add-to-bag stay in view
   while the gallery scrolls. Sticky is a look here (the column scrolls with
   the page otherwise), and it is bounded by the column's own height. */
@media (min-width: 783px) {
	.sl-pdp__buy > .wp-block-group {
		position: sticky;
		top: calc(var(--ub-sticky-top, 0px) + var(--wp--custom--sl--header-height) + var(--wp--preset--spacing--50));
	}
}

.sl-pdp__buy h1 {
	font-size: var(--wp--preset--font-size--display);
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.sl-pdp__buy .wp-block-woocommerce-product-price {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	letter-spacing: var(--wp--custom--sl--heading-tracking);
}

.sl-pdp__buy .wc-block-components-product-price__regular {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	margin-inline-start: var(--wp--preset--spacing--20);
}

/* Woo's classic add-to-cart chrome (variations table, quantity, submit).
   Classic published classes are fair game (§6). Mono treatment on the
   variation label `th` per rule 8.7 — one voice with details summaries. */
.sl-pdp__buy form.cart .variations th,
.sl-pdp__buy form.cart .variations td.label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono-sm);
	letter-spacing: var(--wp--custom--sl--tracking);
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-align: start;
	padding: var(--wp--preset--spacing--30) 0;
	vertical-align: middle;
}

.sl-pdp__buy form.cart .variations td.value select {
	inline-size: 100%;
	border-radius: var(--wp--custom--sl--pill);
	background-color: var(--wp--preset--color--surface);
}

.sl-pdp__buy form.cart .reset_variations {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.sl-pdp__buy form.cart .woocommerce-variation-price {
	margin-block: var(--wp--preset--spacing--30);
}

/* Quantity + add-to-bag row. The stepper is a surface pill, the button is
   the ink pill filling the rest of the row. */
.sl-pdp__buy form.cart .quantity {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--sl--pill);
	padding-inline: var(--wp--preset--spacing--30);
	min-block-size: var(--wp--custom--upline--tap);
}

.sl-pdp__buy form.cart .quantity input.qty {
	background: transparent;
	border: 0;
	inline-size: 3.5em;
	text-align: center;
	padding-inline: 0;
	min-block-size: auto;
}

.sl-pdp__buy form.cart .single_add_to_cart_button {
	border-radius: var(--wp--custom--sl--pill);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0;
	padding-inline: var(--wp--preset--spacing--80);
	min-block-size: var(--wp--custom--upline--tap);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	flex: 1 1 auto;
}

.sl-pdp__buy form.cart .single_add_to_cart_button:hover {
	background: var(--wp--custom--sl--accent-ink);
}

.sl-pdp__buy form.cart .woocommerce-variation-add-to-cart,
.sl-pdp__buy form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

/* Contract note on the rule above (§2): setting `display` on `form.cart` is
   the exact hazard the skill names. Scoped to the SIMPLE form only
   (`:not(.variations_form)`) so the variation picker's no-JS fallback, which
   hides the variable form, is never argued with by this sheet. */

/* Availability / service panel: surface panel with bold leads. Woo's
   stock indicator supplies the first line. */
.sl-pdp__assure {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}

.sl-pdp__assure p {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.sl-pdp__assure p strong {
	color: var(--wp--preset--color--contrast);
}

.sl-pdp__assure .wp-block-woocommerce-product-stock-indicator {
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* Disclosures: core/details as the native mechanism (rule 8.14). Summary in
   the mono voice, +/- drawn with CSS from the open state, hairline between. */
.sl-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: -0.01em;
	min-block-size: var(--wp--custom--upline--tap);
}

.sl-details summary::-webkit-details-marker {
	display: none;
}

.sl-details summary::after {
	content: "+";
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
}

.sl-details[open] summary::after {
	content: "\2212";
}

.sl-details > :not(summary) {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* Spec tiles: the product attributes table re-read as a wrap of panels.
   Woo's product-details block renders the attributes table; each row
   becomes a tile. Classic published table classes only. */
.sl-specs {
	gap: var(--wp--preset--spacing--30);
}

.sl-specs .wp-block-woocommerce-product-specifications {
	margin: 0;
}

.sl-specs .wp-block-woocommerce-product-specifications table {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	border: 0;
	inline-size: 100%;
}

.sl-specs .wp-block-woocommerce-product-specifications tbody {
	display: contents;
}

.sl-specs .wp-block-product-specifications-item {
	display: block;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--upline--radius);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	flex: 1 1 140px;
}

.sl-specs .wp-block-product-specifications-item__label,
.sl-specs .wp-block-product-specifications-item__value {
	display: block;
	border: 0;
	padding: 0;
	font-style: normal;
	text-align: start;
}

.sl-specs .wp-block-product-specifications-item__label {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	margin-block-end: var(--wp--preset--spacing--10);
}

.sl-specs .wp-block-product-specifications-item__value {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
}

.sl-specs .wp-block-product-specifications-item__value p {
	margin: 0;
}

/* Reviews: rating number large, review cards as panels. Woo's review list
   classes are classic-published. */
.sl-reviews__score {
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--wp--custom--sl--heading-tracking);
}

.sl-reviews .wp-block-woocommerce-product-reviews-title,
.sl-reviews h2 {
	font-size: var(--wp--preset--font-size--x-large);
	text-align: start;
	margin-block: 0 var(--wp--preset--spacing--40);
}

.sl-reviews .commentlist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--custom--upline--gap);
}

.sl-reviews .commentlist .comment_container {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--upline--radius);
	padding: var(--wp--preset--spacing--60);
}

.sl-reviews .commentlist .avatar {
	display: none;
}

.sl-reviews .commentlist .meta {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin-block-end: var(--wp--preset--spacing--20);
}

.sl-reviews .commentlist .description p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

@media (min-width: 783px) {
	.sl-reviews .wp-block-woocommerce-product-reviews-title,
.sl-reviews h2 {
	font-size: var(--wp--preset--font-size--x-large);
	text-align: start;
	margin-block: 0 var(--wp--preset--spacing--40);
}

.sl-reviews .commentlist {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------------
   10. Pages, blog, post
   ------------------------------------------------------------------------- */

.sl-page-title {
	margin-block-end: var(--wp--preset--spacing--30);
}

.sl-lede {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	max-inline-size: 60ch;
}

/* Featured post band on the blog index: image left, panel right. */
.sl-featured-post {
	border-radius: var(--wp--custom--sl--radius-lg);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	gap: 0;
}

.sl-featured-post .wp-block-post-featured-image {
	background: var(--wp--preset--gradient--tile);
	aspect-ratio: var(--wp--custom--sl--ratio-editorial);
	margin: 0;
}

.sl-featured-post .wp-block-post-featured-image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.sl-featured-post__copy {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}

.sl-featured-post__copy .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

/* Post grid on the blog index: 4-up capped by Bones, journal card look. */
.sl-post-grid .wp-block-post-date {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Single post: eyebrow, title, author row, full-bleed image, measured body. */
.sl-post__head {
	max-inline-size: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.sl-post__author {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.sl-post__author .wp-block-avatar img {
	border-radius: 50%;
}

.sl-post__hero {
	border-radius: var(--wp--custom--sl--radius-lg);
	overflow: hidden;
	background: var(--wp--preset--gradient--tile);
	aspect-ratio: var(--wp--custom--sl--ratio-editorial);
	margin-block: var(--wp--preset--spacing--80);
}

.sl-post__hero img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.sl-post__body > p:first-child {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.5;
	letter-spacing: -0.01em;
}

.sl-post__body {
	color: var(--wp--preset--color--contrast);
}

.sl-post__body p,
.sl-post__body li {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.sl-post__body h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-start: var(--wp--preset--spacing--80);
}

.sl-post__tags {
	gap: var(--wp--preset--spacing--20);
}

.sl-post__tags a {
	display: inline-flex;
	align-items: center;
	min-block-size: 36px;
	padding-inline: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--sl--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* Author card at the foot of a post. */
.sl-author-card {
	padding: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.sl-author-card .wp-block-avatar img {
	border-radius: 50%;
}

.sl-author-card .wp-block-post-author-biography {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* Stat tiles (about page): big number, muted line. */
.sl-stats {
	gap: var(--wp--preset--spacing--40);
}

.sl-stat {
	padding: var(--wp--preset--spacing--60);
}

.sl-stat__n {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	letter-spacing: var(--wp--custom--sl--heading-tracking);
	line-height: 1;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.sl-stat p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Accent CTA band (about): teal ground, ink copy, ink button. */
.sl-cta-band {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
	border-radius: var(--wp--custom--sl--radius-lg);
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
}

.sl-cta-band h2 {
	margin: 0;
	max-inline-size: 20ch;
	color: var(--wp--preset--color--accent-text);
}

.sl-cta-band .wp-block-button__link {
	background: var(--wp--preset--color--accent-text);
	color: var(--wp--preset--color--accent);
}

/* Contact: form panel + info cards. */
.sl-contact__info .sl-card {
	padding: var(--wp--preset--spacing--60);
}

.sl-contact__info .sl-card p {
	margin: 0;
}

.sl-contact__map {
	min-block-size: 220px;
}

/* FAQ cards. */
.sl-faq .sl-panel {
	padding: var(--wp--preset--spacing--60);
}

.sl-faq h3 {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 var(--wp--preset--spacing--20);
	letter-spacing: -0.01em;
}

.sl-faq p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Team grid (about). */
.sl-team figure {
	margin: 0;
}

.sl-team h3 {
	font-size: var(--wp--preset--font-size--medium);
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--10);
	letter-spacing: -0.01em;
}

.sl-team p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
   11. WooCommerce chrome: cart, checkout, account, confirmation
   ------------------------------------------------------------------------- */

/* Cart line items: Woo renders a table (rows cannot carry a card outline),
   so the rows keep the hairline and take room. Header row in the mono voice. */
.wc-block-cart .wc-block-cart-items__header {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono-sm);
	letter-spacing: var(--wp--custom--sl--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wc-block-cart .wc-block-cart-item__image,
.wc-block-cart .wc-block-cart-item__product,
.wc-block-cart .wc-block-cart-item__total {
	padding-block: var(--wp--preset--spacing--60);
}

/* The stepper is a surface pill and the remove control sits beside it, not
   on top of the plus. Woo sizes the selector to a fixed width; the tap floor
   Bones puts on each button overflows it. */
.wc-block-cart .wc-block-components-quantity-selector {
	inline-size: auto;
	display: inline-flex;
	background: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--wp--custom--sl--pill);
	margin: 0;
}

.wc-block-cart .wc-block-components-quantity-selector__input {
	inline-size: 3em;
	background: transparent;
	min-block-size: auto;
}

.wc-block-cart .wc-block-cart-item__remove-link {
	margin-inline-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

.wc-block-cart .wc-block-cart-item__image img {
	border-radius: var(--wp--custom--upline--radius);
	background: var(--wp--preset--gradient--tile);
}

.wc-block-cart .wc-block-cart-item__product .wc-block-components-product-name {
	font-weight: 600;
	text-decoration: none;
}

/* Sidebar totals as a panel. */
.wc-block-cart .wc-block-cart__sidebar .wc-block-cart__totals-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	text-align: start;
}

.wc-block-cart .wc-block-cart__sidebar {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--upline--radius);
	padding: var(--wp--preset--spacing--60);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: var(--wp--custom--sl--heading-tracking);
}

/* Woo's primary buttons (cart, checkout, account) take the ink pill. The
   "Place order" control takes the accent fill: the one accent-filled button in
   checkout (mockup 09). */
.wc-block-components-button:not(.is-link) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--sl--pill);
	font-weight: 500;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--custom--sl--accent-ink);
	color: var(--wp--preset--color--base);
}

.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
}

.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--custom--sl--accent-ink);
	color: var(--wp--preset--color--base);
}

/* Woo notice banners ship green/red grounds; the ground goes neutral and the
   icon keeps the meaning. Bones already re-points the border. */
.wc-block-components-notice-banner {
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	color: var(--wp--preset--color--contrast);
}

/* Woo's newer select (note the class is `wc-blocks-…`, not `wc-block-…`;
   measured on the checkout country field, Woo 11.1). Doubled like Bones
   doubles the text-input class, for the same specificity reason. */
.wc-blocks-components-select__select.wc-blocks-components-select__select {
	background-color: var(--wp--preset--color--surface);
	border-color: transparent;
	border-radius: var(--wp--custom--sl--pill);
	color: inherit;
}

.wc-blocks-components-select .wc-blocks-components-select__label {
	color: var(--wp--preset--color--muted);
}

/* Checkout: step titles bold-tight, fields as surface pills, order summary
   as a panel. Radio options (shipping methods) as outlined cards. */
.wc-block-components-checkout-step__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.wc-block-components-text-input.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input.wc-block-components-text-input input[type="number"],
.wc-block-components-select__select.wc-block-components-select__select,
.wc-block-components-textarea.wc-block-components-textarea {
	background-color: var(--wp--preset--color--surface);
	border-color: transparent;
	border-radius: var(--wp--custom--sl--pill);
}

.wc-block-components-textarea.wc-block-components-textarea {
	border-radius: var(--wp--custom--upline--radius);
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: var(--wp--custom--upline--radius);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--contrast);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--contrast);
}

.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
	background: var(--wp--preset--color--surface);
}

.wc-block-checkout__sidebar {
	border-radius: var(--wp--custom--upline--radius);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

/* Checkout header (Woo's part): the wordmark inherits the theme's look. Bones
   un-sticks it; Slope only sets the ground.
   ASSUMES: the checkout FORM step, where Woo renders its own checkout-header
   part inside the template-part wrapper; the order-received endpoint renders
   the site header and is excluded by the same Woo body class Bones uses. */
.woocommerce-checkout:not(.woocommerce-order-received) header.wp-block-template-part {
	background: var(--wp--preset--color--base);
}

/* ASSUMES: the same checkout form step as the rule above. */
.woocommerce-checkout:not(.woocommerce-order-received) header.wp-block-template-part .wp-block-site-title {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.04em;
}

/* Mini-cart drawer: Woo's published drawer classes. */
.wc-block-mini-cart__drawer {
	border-radius: var(--wp--custom--sl--radius-lg) 0 0 var(--wp--custom--sl--radius-lg);
}

.wc-block-mini-cart__title {
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Account navigation as pills (mockup 10). Woo publishes the classic
   `woocommerce-MyAccount-navigation` classes. */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--70);
}

.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--upline--tap);
	padding-inline: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--sl--pill);
	background: var(--wp--preset--color--surface);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Orders table rows as outlined cards on narrow screens, table on wide. */
.woocommerce-orders-table {
	border-collapse: separate;
	border-spacing: 0 var(--wp--preset--spacing--30);
}

.woocommerce-orders-table__cell,
.woocommerce-orders-table__header {
	border: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

.woocommerce-orders-table__row {
	outline: 1px solid var(--wp--preset--color--line);
	outline-offset: -1px;
	border-radius: var(--wp--custom--upline--radius);
}

.woocommerce-orders-table .woocommerce-button {
	border-radius: var(--wp--custom--sl--pill);
}

/* Woo's classic buttons anywhere (account, classic notices) match the pill.
   ASSUMES: a classic-rendered Woo page (my-account endpoints, legacy
   notices) where Woo puts `woocommerce` on the body and its buttons carry
   `.button`; block pages never match because their buttons are
   `wc-block-components-button`, styled above. */
.woocommerce .button:not(.wp-block-button__link),
.woocommerce button.button,
.woocommerce a.button {
	border-radius: var(--wp--custom--sl--pill);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 500;
}

/* Classic Woo notices: no colour bar, surface panel. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--wp--custom--upline--radius);
	color: var(--wp--preset--color--contrast);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
   11b. Classic-call canvas (header.php / footer.php shim)
   -------------------------------------------------------------------------
   A plugin route that calls get_header() lands between the two shim files
   with no block layout around it. This box gives it the wide measure and the
   root padding the block templates get from `layout: constrained`, so the
   plugin's `main.alignwide` reads at the same width as every other page.
   Temporary with the shim — see header.php for the expiry. */
.sl-classic-canvas {
	max-inline-size: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--60));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--100);
	box-sizing: border-box;
}

.sl-classic-canvas > main {
	max-inline-size: none;
}

/* -------------------------------------------------------------------------
   12. Motion opt-ins
   ------------------------------------------------------------------------- */

/* Bones owns the mechanism; Slope opts sections in by class in the markup
   (ub-reveal, ub-reveal-items) and sets the feel through ub.motion tokens in
   theme.json. Nothing here. */

/* -------------------------------------------------------------------------
   13. Skin-side structural rules — CHASSIS-GAP list
   -------------------------------------------------------------------------
   Everything below is structure a drastically different retailer would also
   need. Each is listed in CHASSIS-GAPS.md with a proposed Bones home.
   ------------------------------------------------------------------------- */

/* CHASSIS-GAP 1: the header's flex order at the plugin's menu boundary
   (drawer toggle first on a phone, menu inline on a desk) is arrangement,
   not look — see section 4 above. Proposed: ub-header-row primitive. */

/* CHASSIS-GAP 2: a page template with no title and no constraint (page-canvas)
   is a route every skin needs. Shipped here as templates/page-canvas.html. */

/* CHASSIS-GAP 3: the product-tile meta row (title left / price right, brand
   above) is arrangement of Woo's own blocks. Proposed: ub-tile__meta. */

/* CHASSIS-GAP 4: the spec table re-read as tiles (section 9, .sl-specs)
   walks Woo's classic attributes table. Proposed: a Bones ub-specs primitive,
   or a plugin/Woo block that renders attributes as a list. */