/*
Theme Name: Corporate Catwalk
Theme URI: http://corporate-catwalk.local/
Author: Corporate Catwalk
Description: A full-site-editing block theme with a runway-inspired editorial look. Every colour, font, spacing step and layout width lives in theme.json, so the whole design is editable from the Site Editor with no code.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: corporate-catwalk
Tags: full-site-editing, block-patterns, block-styles, editor-style, wide-blocks, custom-colors, custom-logo, blog, portfolio, one-column
*/

/*
 * Only what theme.json cannot express. Colours, fonts, spacing and layout
 * widths come from theme.json presets (var(--wp--preset--...)).
 *
 * Contents
 *   1. Base
 *   2. Block styles
 *   3. Global components (navigation, post images)
 *   4. Header (c-header-section, c-header, c-nav)
 *   5. Page layout
 *   6. c-button, c-link
 *   7. c-cover   (front-page hero)
 *   8. c-story   (image + content split)
 *   9. c-row     (campaign row: title + image cards)
 *  10. c-pair    (two photos + caption bar)
 *  11. c-spread  (photo, big title, product image)
 *  12. c-statement (full-bleed photo + statement)
 *  13. c-collection-head (page hero: photo + title)
 *  14. c-contact (details + contact form)
 *  15. c-page, c-about (page title, photo row, text)
 *  16. c-footer (signup, follow row, bottom row)
 *  17. c-collection-head-section (gallery product grid, load more)
 *
 * Naming: c-{component} for the block, c-{component}_{part} for its parts.
 */


/* ==========================================================================
   1. Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* c-section: default type for every page section. One class of specificity
   and declared before the components, so any component class that sets its
   own value (e.g. .c-story_text, .c-cover_title) overrides it. */
.c-section {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--wp--preset--color--primary);
}

/* Images in any section fill their container. */
.c-section img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}


/* ==========================================================================
   2. Block styles (registered in functions.php)
   ========================================================================== */

.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.is-style-script {
	font-family: var(--wp--preset--font-family--accent);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.is-style-runway-number {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1;
	opacity: 0.35;
}

.wp-block-group.is-style-framed {
	border: 1px solid currentColor;
	padding: var(--wp--preset--spacing--40);
}


/* ==========================================================================
   3. Global components
   ========================================================================== */

/* Navigation: underline grows on hover / current item */
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 0.25s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background-size: 100% 1px;
}

/* Post featured images: slow zoom on hover */
.wp-block-post-featured-image {
	overflow: hidden;
}

.wp-block-post-featured-image img {
	transition: transform 0.6s ease;
}

.wp-block-post-featured-image:hover img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content,
	.wp-block-post-featured-image img {
		transition: none;
	}

	.wp-block-post-featured-image:hover img {
		transform: none;
	}
}


/* ==========================================================================
   4. Header
   c-header-section (sticky wrapper = the template part's <header>)
   > c-header (--transparent, c-header-overlay on the front page)
     > c-header_solid > c-header_main
         > c-header_side--start (c-nav) | c-header_logo | c-header_side--end (c-nav + c-button)
   ========================================================================== */

.c-header-section {
	position: sticky;
	top: 0;
	z-index: 5;
}

.admin-bar .c-header-section {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .c-header-section {
		top: 46px;
	}
}

.c-header {
	display: block;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0;
	color: #161514;
}

/* Overlay: takes no space, sits on top of the cover */
.c-header-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.c-header_solid {
	position: relative;
	z-index: 0;
	transition: color 0.2s ease;
}

/* Frosted background (a pseudo-element, so the mobile menu overlay keeps
   covering the whole screen). Always on for the solid header; on the
   transparent one it fades in once the page is scrolled (see assets/js/header.js). */
.c-header_solid::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: rgba(247, 244, 238, 0.72);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	transition: opacity 0.2s ease;
}

.c-header--transparent .c-header_solid {
	color: #fff;
}

.c-header--transparent .c-header_solid::before {
	opacity: 0;
}

.c-header--transparent.is-scrolled .c-header_solid {
	color: #161514;
}

.c-header--transparent.is-scrolled .c-header_solid::before {
	opacity: 1;
}

.c-header_main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 40px;
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * clamp(20px, 4.5vw, 64px));
	margin-inline: auto;
	padding: 22px clamp(20px, 4.5vw, 64px);
	border-bottom: 1px solid rgba(22, 21, 20, 0.1);
}

.c-header--transparent .c-header_main {
	border-bottom-color: transparent;
}

.c-header--transparent.is-scrolled .c-header_main {
	border-bottom-color: rgba(22, 21, 20, 0.1);
}

.c-header_main > *,
.c-header_side > * {
	margin: 0;
}

/* Left and right groups */
.c-header_side {
	display: flex;
	flex: 1 1 300px;
	align-items: center;
	width: auto;
	gap: 4px 34px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.c-header_side--end {
	justify-content: flex-end;
}

/* Book Consultation button: sits on the same centre line as the menu text */
.c-header_side .wp-block-buttons {
	align-items: center;
}

.c-header_btn {
	margin: 0;
}

/* Menus */
.c-nav.c-nav {
	display: flex;
	align-items: center;
	gap: 4px 34px;
}

.c-nav .wp-block-navigation__container {
	gap: inherit;
}

.c-nav_link .wp-block-navigation-item__content {
	padding: 12px 0;
}

.c-nav_shop .wp-block-navigation-item__content {
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.c-nav_link .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

/* Logo (keeps its own colours) */
.c-header_logo {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.c-header_logo img {
	display: block;
	width: 88px;
	height: auto;
}

/* Mobile menu button: core's own hamburger, styled as c-header_icon.
   Core shows it only below its breakpoint, so display is left alone. */
.c-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.c-header .wp-block-navigation__responsive-container-open svg {
	width: 22px;
	height: 22px;
}

/* The overlay takes no space, so drop the block gap it would leave above the cover */
.wp-site-blocks > header:has(.c-header-overlay) {
	margin: 0;
}

.wp-site-blocks > header:has(.c-header-overlay) + * {
	margin-block-start: 0;
}

@media (max-width: 599px) {
	.c-header_main {
		gap: 8px 16px;
		padding-block: 14px;
	}

	.c-header_side {
		flex: 0 1 auto;
	}

	.c-header_side--end .c-nav {
		display: none;
	}

	.c-header_logo img {
		width: 72px;
	}

	.c-header .c-button .wp-block-button__link {
		height: 40px;
		padding: 0 12px;
		letter-spacing: 0.1em;
	}
}


/* ==========================================================================
   5. Page layout
   ========================================================================== */

/* Front page and wide pages: no gap between full-width sections */
.home .wp-block-post-content > .alignfull,
.page-template-page-wide .wp-block-post-content > .alignfull,
.page-template-page-hero .wp-block-post-content > .alignfull {
	margin-block: 0;
}

.page-template-page-wide .wp-site-blocks > main,
.page-template-page-hero .wp-site-blocks > main {
	margin-block-start: 0;
}


/* ==========================================================================
   6. c-button
   ========================================================================== */

.c-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 28px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* !important: the preset colour classes set on the button block use it too. */
.c-button .wp-block-button__link:hover {
	background-color: #161514 !important;
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.c-button .wp-block-button__link {
		transition: none;
	}
}


/* c-link: underlined text link. --ink sets the text to the dark colour. */
.c-link a {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	height: 44px;
	border-bottom: 1px solid #fff;
	color: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.c-link--ink a {
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.22em;
}

/* Arrow after the link text: only the story link has it (the .k-arrow SVG
   path drawn as a mask). */
.c-story .c-link a::after {
	content: "";
	flex: none;
	width: 24px;
	height: 10px;
	background: currentColor;
	-webkit-mask: var(--c-arrow) no-repeat center / contain;
	mask: var(--c-arrow) no-repeat center / contain;
	transition: transform 0.2s ease;

	--c-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 5h22M18 1l4 4-4 4'/%3E%3C/svg%3E");
}

.c-story .c-link a:hover::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.c-story .c-link a::after {
		transition: none;
	}

	.c-story .c-link a:hover::after {
		transform: none;
	}
}


/* ==========================================================================
   7. c-cover: full-screen photo, text bottom-left, aligned with the header
   Parts: c-cover_media, c-cover-shade, c-cover_content > c-cover_lead (title) + c-cover_aside (tagline, button)
   ========================================================================== */

.c-cover {
	--c-cover-gutter: clamp(20px, 4.5vw, 64px);
	position: relative;
	display: flex;
	flex-direction: column;
	height: clamp(560px, 100vh, 1080px);
	min-height: 0;
	padding: 0;
	overflow: hidden;
	color: #fff;
}

/* Photo: fills the cover. .c-cover_media is the Cover block's own image. */
.c-cover_media,
.c-cover .wp-block-cover__image-background {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-cover_media--standing,
.c-cover .wp-block-cover__image-background[style*="62%"] {
	object-position: 50% 62%;
}

/* Shade: gradient over the photo, under the content. An empty Group is the
   first block in the cover; the inner container is static so it positions
   against .c-cover, and .c-cover_content (relative, later) stacks above it. */
.c-cover .c-cover-shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	margin: 0;
	background: linear-gradient(180deg, #161514a6, #1615145c 16%, #1615140d 34%, #16151400 50%, #1615149e);
	pointer-events: none;
}

/* Inner container: fills the cover and keeps the content on the same grid as
   the header. The long selector beats core's content-position margin reset. */
.wp-block-cover.c-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--c-cover-gutter));
	position: static;
	margin: 0 auto;
	padding: 0;
}

.c-cover .c-cover_content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	margin: auto 0 0;
	padding: 0 var(--c-cover-gutter) 56px;
}

.c-cover .c-cover_lead {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0;
}

.c-cover .c-cover_aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin: 0;
	padding-top: 6px;
}

.c-cover .c-cover_content > *,
.c-cover .c-cover_lead > *,
.c-cover .c-cover_aside > * {
	margin-block: 0;
}

.c-cover .c-cover_title {
	max-width: none;
	font-family: var(--wp--preset--font-family--primary);
	font-size: clamp(2.75rem, 8vw, 84px);
	font-weight: 300;
	line-height: 0.84;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.c-cover .c-cover_tagline {
	max-width: 52ch;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 28px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.2;
}


/* ==========================================================================
   8. c-story: two equal columns, image left, coloured panel right
   Parts: c-story_media, c-story_content, c-story_text; the link is a c-link
   ========================================================================== */

.wp-block-columns.c-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-block: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.c-story > .wp-block-column {
	min-width: 0;
}

/* Left column: image (display, width and object-fit come from .c-section img) */
.c-story_media {
	height: clamp(480px, 60vw, 720px);
}

.c-story_media .wp-block-image {
	height: 100%;
	margin: 0;
}

.c-story_media .wp-block-image img {
	height: 100%;
	object-position: 72% 50%;
}

/* Right column: content container */
.wp-block-columns.c-story > .wp-block-column.c-story_content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	align-self: stretch;
	gap: 36px;
	padding: 48px 24px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0;
}

.c-story_content.c-story_content > * {
	max-width: none;
	margin: 0;
}

/* Text */
.c-story_content .c-story_text {
	max-width: 440px;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 34px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.28;
}

@media (min-width: 750px) {
	.wp-block-columns.c-story {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-columns.c-story > .wp-block-column.c-story_content {
		padding: 64px clamp(32px, 9vw, 136px);
	}
}

/* ==========================================================================
   9. c-row: campaign row (title row, then a grid of image cards)
   Parts: c-row_head, c-row_title, c-row_grid > c-card
          > c-card_frame > c-card_media (image zooms on hover)
   ========================================================================== */

.c-row {
	padding: 104px clamp(20px, 4.5vw, 64px) 112px;
}

.c-row--campaign {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--accent);
}

.c-row_head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
	margin-bottom: 40px;
}

.c-row_head > * {
	margin: 0;
}

.c-row .c-row_title {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 38px;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.wp-block-columns.c-row_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px 20px;
	margin-block: 0;
}

.c-row_grid > .wp-block-column {
	flex-basis: auto;
	min-width: 0;
}

.c-row_grid .c-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.c-card_frame {
	position: relative;
}

.c-card_media {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: #edebe7;
}

.c-card_media .wp-block-image {
	height: 100%;
	margin: 0;
}

.c-section .c-card_media img {
	height: 100%;
	transform: scale(1);
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.c-card_media:hover img {
	transform: scale(1.08);
}

@media (min-width: 750px) {
	.wp-block-columns.c-row_grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-section .c-card_media img {
		transition: none;
	}

	.c-card_media:hover img {
		transform: none;
	}
}


/* ==========================================================================
   10. c-pair: two photos side by side, then a caption bar
   Parts: c-pair_photos, c-pair_caption (--dark)
   ========================================================================== */

.c-pair_photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
}

.c-pair_photos .wp-block-image {
	margin: 0;
}

.c-section .c-pair_photos img {
	height: clamp(420px, 63vw, 900px);
	aspect-ratio: auto;
	object-position: 50% 12%;
}

.c-pair .c-pair_caption {
	margin: 0;
	padding: 22px clamp(20px, 4.5vw, 64px);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.c-pair .c-pair_caption--dark {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--accent);
}


/* ==========================================================================
   11. c-spread: 12-column row, photo (5) + title (4) + product image (3)
   Parts: c-spread_photo, c-spread_title, c-spread_product. --dark = colours.
   ========================================================================== */

.c-spread {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	gap: 20px;
	padding: 96px clamp(20px, 4.5vw, 64px);
}

.c-spread--dark {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--accent);
}

.c-spread > * {
	margin: 0;
}

.c-spread .c-spread_photo {
	grid-column: span 5;
}

.c-section .c-spread_photo img {
	aspect-ratio: 4 / 5;
	object-position: 50% 50%;
}

.c-spread .c-spread_title {
	grid-column: span 4;
	align-self: center;
	padding: 0 6%;
	font-family: var(--wp--preset--font-family--primary);
	font-size: clamp(2rem, 4.7vw, 5rem);
	font-weight: 300;
	line-height: 0.94;
	letter-spacing: 0;
	overflow-wrap: normal;
	word-break: normal;
}

.c-spread .c-spread_product {
	display: flex;
	flex-direction: column;
	grid-column: span 3;
	align-self: end;
	gap: 16px;
	width: auto;
}

.c-spread_product .wp-block-image {
	margin: 0;
}

.c-section .c-spread_product img {
	aspect-ratio: 2 / 3;
}

@media (max-width: 749px) {
	.c-spread .c-spread_photo,
	.c-spread .c-spread_title,
	.c-spread .c-spread_product {
		grid-column: 1 / -1;
	}

	.c-spread .c-spread_title {
		padding: 0;
	}
}


/* ==========================================================================
   12. c-statement: full-bleed photo with a short statement bottom-left
   Parts: c-statement_media, c-statement_shade, c-statement_content
          > c-statement_text + c-link
   ========================================================================== */

.c-statement {
	position: relative;
	height: clamp(560px, 60vw, 860px);
	overflow: hidden;
	color: #fff;
}

.c-statement > * {
	margin: 0;
}

.c-statement .c-statement_media,
.c-statement .c-statement_shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.c-statement .c-statement_media {
	height: 100%;
}

.c-section .c-statement_media img {
	height: 100%;
	object-position: 68% 50%;
}

.c-statement .c-statement_shade {
	display: block;
	background: linear-gradient(90deg, #16151480, #16151429 24%, #16151400 40%);
	pointer-events: none;
}

.c-statement .c-statement_content {
	position: absolute;
	right: auto;
	bottom: 56px;
	left: clamp(20px, 4.5vw, 64px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	max-width: 300px;
}

.c-statement_content > * {
	margin: 0;
}

.c-statement .c-statement_text {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 44px;
	font-weight: 300;
	line-height: 1.04;
}


/* ==========================================================================
   13. c-collection-head: page hero (used on Contact, Gallery)
   Parts: c-collection-head_photo, _shade, _text > _title. --hero = full hero.
   ========================================================================== */

.c-collection-head {
	position: relative;
	padding: 40px clamp(20px, 4.5vw, 64px);
	border-bottom: 1px solid rgba(22, 21, 20, 0.14);
	background: rgb(248, 247, 245);
	color: rgb(22, 21, 20);
}

.c-collection-head--hero {
	display: flex;
	flex-direction: column;
	padding: 0 clamp(20px, 4.5vw, 64px) 52px;
	border-bottom: 0;
	overflow: hidden;
	background: #edebe7;
	color: #fff;
}

.c-contact_hero,
.c-gallery_hero {
	height: min(640px, 80vh);
}

.c-collection-head > * {
	margin: 0;
}

.c-collection-head .c-collection-head_photo,
.c-collection-head .c-collection-head_shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
}

.c-section .c-collection-head_photo img {
	height: 100%;
	object-position: 50% 20%;
}

.c-collection-head .c-collection-head_shade {
	display: block;
	background: linear-gradient(180deg, #1615149e, #16151414 24%, #16151400 44%, #161514b3);
	pointer-events: none;
}

/* Capped to the page grid and centred, so it lines up with the header on wide screens */
.c-collection-head .c-collection-head_text {
	position: relative;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin: auto auto 0;
}

/* Breadcrumbs above the title. On a plain heading they take its dark text colour,
   muted for Home and the separator; on a --hero photo they are white. */
.c-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	font-size: 12px;
}

.c-collection-head .c-crumbs {
	padding: 0 0 6px;
}

.c-crumbs > * {
	padding: 12px 0;
	opacity: 0.6;
}

.c-crumbs a {
	color: inherit;
	text-decoration: none;
}

.c-collection-head .c-crumbs [aria-current] {
	opacity: 1;
}

.c-collection-head--hero .c-crumbs,
.c-collection-head--hero .c-crumbs a,
.c-collection-head--hero .c-crumbs [aria-current] {
	color: #fff;
}

.c-collection-head--hero .c-crumbs > * {
	opacity: 1;
}

.c-crumbs__collection {
	text-transform: capitalize;
}

.c-section .c-collection-head_title {
	margin: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: clamp(40px, 4.6vw, 64px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: capitalize;
}

.c-collection-head_description {
	max-width: 640px;
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.7;
	opacity: 0.85;
}


/* ==========================================================================
   14. c-contact: details on the left, form on the right
   Parts: c-contact_details > c-contact_group > c-contact_label + c-contact_value
          c-contact_form > c-contact_label, c-contact_pair, c-contact_field, c-contact_send
   ========================================================================== */

.c-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px 96px;
	padding: 88px clamp(20px, 4.5vw, 64px) 128px;
	color: #161514;
}

.c-contact_details {
	display: flex;
	flex: 1 1 280px;
	flex-direction: column;
	gap: 28px;
}

.c-contact_group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.c-contact .c-contact_label {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.c-contact_form .c-contact_label {
	padding-bottom: 4px;
}

.c-contact_value {
	font-size: 17px;
	line-height: 1.6;
}

.c-contact_value p {
	margin: 0;
}

.c-contact_value a {
	color: inherit;
}

.c-contact_form {
	display: flex;
	flex: 1.4 1 340px;
	flex-direction: column;
	gap: 18px;
	max-width: 640px;
}

.c-contact_pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px 12px;
}

.c-contact_field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
}

.c-contact_field input,
.c-contact_field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0 16px;
	border: 1px solid rgba(22, 21, 20, 0.15);
	border-radius: 0;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 15px;
}

.c-contact_field input {
	height: 64px;
}

.c-contact_field textarea {
	min-height: 200px;
	padding-block: 16px;
	resize: vertical;
}

.c-contact_field input:focus,
.c-contact_field textarea:focus {
	border-color: #161514;
	outline: 0;
}

.c-contact_send {
	align-self: flex-start;
	height: 58px;
	padding: 0 56px;
	border: 0;
	background: #161514;
	color: #fff;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Spam trap: off-screen, not display:none, so simple bots still fill it */
.c-contact_trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.c-contact_notice {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid rgba(22, 21, 20, 0.15);
	background: #fff;
	font-size: 13px;
}

.c-contact_notice--invalid,
.c-contact_notice--error {
	border-color: #a33;
	color: #a33;
}


/* ==========================================================================
   15. c-page + c-about: page title, scrolling photo row, text, closing line
   Parts: c-page_title, c-page_content; c-about_title, c-about_photos >
          c-about_photo, c-about_dots > c-about_dot, c-about_text, c-about_closing
   ========================================================================== */

.c-page {
	box-sizing: content-box;
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 880px;
	margin: 0 auto;
	padding: 88px clamp(20px, 4.5vw, 64px) 128px;
}

.c-page > * {
	margin: 0;
}

.c-section .c-page_title {
	margin: 0;
	color: #161514;
	font-family: var(--wp--preset--font-family--primary);
	font-size: clamp(36px, 3.6vw, 52px);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.c-page_content {
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 0;
	color: #2e2b28;
}

.c-about {
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding: 88px 0 128px;
	color: #161514;
}

.c-about > * {
	margin: 0;
}

.c-about .c-about_title {
	padding-right: clamp(20px, 4.5vw, 64px);
	padding-left: clamp(20px, 4.5vw, 64px);
}

.c-about .c-about_photos {
	display: flex;
	gap: 20px;
	overflow: visible;
	padding-right: clamp(20px, 4.5vw, 64px);
	padding-left: clamp(20px, 4.5vw, 64px);
	overscroll-behavior-x: contain;
	scroll-padding-left: 20px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.c-about_photos::-webkit-scrollbar {
	display: none;
}

.c-about .c-about_photo {
	flex: 1 1 0;
	margin: 0;
	aspect-ratio: 2 / 3;
	background: #edebe7;
	scroll-snap-align: start;
}

.c-section .c-about_photo img {
	height: 100%;
}

.c-about_dots {
	display: none;
	justify-content: center;
	gap: 8px;
	margin-top: -28px;
}

.c-about_dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #161514;
	opacity: 0.2;
	transition: opacity 0.2s ease;
}

.c-about_dot.is-current {
	opacity: 1;
}

.c-about .c-about_text {
	box-sizing: content-box;
	max-width: 720px;
	margin: 0 auto;
	padding-right: clamp(20px, 4.5vw, 64px);
	padding-left: clamp(20px, 4.5vw, 64px);
}

.c-about_text > * {
	margin-block: 0 1em;
}

.c-about_text > :last-child {
	margin-bottom: 0;
}

.c-about .c-about_closing {
	box-sizing: content-box;
	max-width: 860px;
	margin: 0 auto;
	padding-right: clamp(20px, 4.5vw, 64px);
	padding-left: clamp(20px, 4.5vw, 64px);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-align: center;
	text-wrap: balance;
}

/* Mobile: photos scroll sideways, with dots underneath */
@media (max-width: 749px) {
	.c-about .c-about_title,
	.c-about .c-about_photos {
		padding: 0 20px;
	}

	.c-about .c-about_photos {
		overflow-x: auto;
	}

	.c-about .c-about_photo {
		flex: 0 0 78%;
	}

	.c-about_dots {
		display: flex;
	}

	.c-about .c-about_text,
	.c-about .c-about_closing {
		padding: 0 20px;
	}
}


/* ==========================================================================
   16. c-footer: newsletter row, follow row, bottom row
   Parts: c-footer_signup (c-footer_heading, c-footer_text, c-footer_form, c-footer_consent), c-footer_follow (c-footer_follow-text, c-footer_icon), c-footer_bottom (c-footer_legal > c-footer_link, c-footer_copy)
   ========================================================================== */

.c-footer {
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding: 80px clamp(20px, 4.5vw, 64px) 36px;
	color: #f1efec;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0;
}

.c-footer--campaign {
	background: var(--wp--preset--color--primary);
	--c-footer-muted: rgba(241, 239, 236, 0.82);
}

.c-footer > * {
	margin: 0;
}

.c-footer a {
	color: #f1efec;
	text-decoration: none;
}

.c-footer_signup {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	text-align: center;
}

.c-footer .c-footer_heading {
	max-width: 480px;
	margin: 0;
	font-family: var(--wp--preset--font-family--accent);
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.c-footer .c-footer_text {
	max-width: 480px;
	margin: 0;
	color: var(--c-footer-muted);
	font-size: 14px;
	line-height: 1.6;
}

.c-footer_form {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	width: 100%;
	align-items: flex-end;
	gap: 12px 24px;
	max-width: 520px;
}

.c-footer_form input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	height: 48px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--c-footer-muted);
	border-radius: 0;
	background: transparent;
	color: #f1efec;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 14px;
}

.c-footer_form input[type="email"]::placeholder {
	color: var(--c-footer-muted);
	opacity: 1;
}

.c-footer_form button {
	height: 48px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #f1efec;
	background: none;
	color: #f1efec;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.c-footer_form input:focus-visible,
.c-footer_form button:focus-visible {
	outline: 1px solid #f1efec;
	outline-offset: 4px;
}

.c-footer .c-footer_consent {
	max-width: 520px;
	margin: 0;
	color: var(--c-footer-muted);
	font-size: 11px;
	line-height: 1.6;
}

.c-footer_consent a {
	text-decoration: underline;
}

.visually-hidden {
	position: absolute !important;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	word-wrap: normal !important;
}

.c-footer_notice {
	flex: 1 1 100%;
	margin: 0;
	font-size: 13px;
}

.c-footer_signup > * {
	margin: 0;
}

.c-footer_follow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.c-footer_follow > * {
	margin: 0;
}

.c-footer .c-footer_follow-text {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.c-footer_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: inherit;
}

.c-footer_icon svg {
	display: block;
	width: 28px;
	height: 28px;
}

.c-footer_bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	padding-top: 28px;
	border-top: 1px solid rgba(241, 239, 236, 0.2);
	color: var(--c-footer-muted);
	font-size: 11px;
}

.c-footer_bottom > * {
	margin: 0;
}

.c-footer_legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 32px;
}

.c-footer_legal > * {
	margin: 0;
}

.c-footer_copy {
	margin: 0;
}

.c-footer_link a {
	color: inherit;
}

.c-footer_link a:hover {
	text-decoration: underline;
}


/* ==========================================================================
   17. c-collection-head-section: gallery product grid
   Parts: c-collection > product-grid-container > collection.page-width >
          loading-overlay, c-collection-grid, c-load-more (_status, _bar, _button)
   ========================================================================== */

.c-collection-head-section {
	--color-background: 168, 71, 42;
	--gradient-background: #a8472a;
	--color-foreground: 239, 227, 211;
	--color-link: 239, 227, 211;
	--color-secondary-button-text: 239, 227, 211;
	--color-secondary-button: 168, 71, 42;
	--color-button: 239, 227, 211;
	--color-button-text: 168, 71, 42;
	--color-shadow: 239, 227, 211;
	padding: 0;
	background: var(--gradient-background);
	color: rgb(var(--color-foreground));
}

.c-collection-head-section--light {
	--gradient-background: #f8f7f5;
	--color-foreground: 22, 21, 20;
}

.gradient {
	background: var(--gradient-background);
	background-attachment: fixed;
}

.product-grid-container {
	--animation-order: 0;
}

@keyframes cc-slide-in {
	from {
		opacity: 0;
		transform: translateY(2rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.scroll-trigger.animate--slide-in {
		animation: cc-slide-in 0.6s ease both;
		animation-delay: calc(var(--animation-order) * 75ms);
	}
}

.c-collection .collection.page-width {
	position: relative;
	max-width: none;
	padding: 48px clamp(20px, 4.5vw, 64px) 96px;
}

.page-width {
	margin: 0 auto;
}

.collection > * {
	margin: 0;
}

.collection .loading-overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	width: 100%;
	padding: 0 1.5rem;
	opacity: 0.7;
}

@media screen and (min-width: 750px) {
	.collection .loading-overlay {
		padding-left: 5rem;
		padding-right: 5rem;
	}
}

.c-collection-grid.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
	gap: 56px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: rgb(var(--color-foreground));
}

.c-collection-grid > * {
	margin: 0;
	overflow: hidden;
}

.c-collection-grid > [hidden] {
	display: none;
}

.c-collection-grid img {
	aspect-ratio: 3 / 4;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.c-collection-grid img {
		transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
	}

	.c-collection-grid > *:hover img {
		transform: scale(1.06);
	}
}

.c-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 56px 20px 0;
	font-family: var(--wp--preset--font-family--primary);
	letter-spacing: 0;
	color: rgb(var(--color-foreground));
}

.c-load-more > * {
	margin: 0;
}

.c-load-more_status {
	margin: 0;
	font-size: 13px;
	opacity: 0.72;
}

.c-load-more_bar {
	width: 220px;
	height: 2px;
	background: rgba(var(--color-foreground), 0.18);
}

.c-load-more_bar > div {
	height: 2px;
	background: rgb(var(--color-foreground));
}

.c-section .c-load-more_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	margin-top: 10px;
	padding: 0 48px;
	border: 1px solid currentColor;
	color: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	text-decoration: none;
}

.c-section .c-load-more_button[hidden] {
	display: none;
}