/*
Theme Name: Corduroy Club
Theme URI: https://corduroyclub.com/
Author: TMBR
Author URI: https://wearetmbr.com/
Description: Child theme of Kiosko for the Corduroy Club WooCommerce storefront. Brand design lives in theme.json; this file carries only what theme.json cannot express.
Template: kiosko
Version: 0.2.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: corduroy-club
Tags: e-commerce, block-patterns, block-styles, full-site-editing, wide-blocks
*/

/*
 * ---------------------------------------------------------------------------
 * BEFORE ADDING CSS
 * ---------------------------------------------------------------------------
 * This is a block theme. Colour, type, spacing and block defaults belong in
 * theme.json, because those values also drive the block editor's own controls.
 * What lives here is what theme.json has no vocabulary for: pseudo-elements,
 * :has()/:not() selectors, grid templates, keyframes, and markup emitted by
 * core blocks that exposes no style surface.
 *
 * Always reference the generated custom properties rather than literals, so a
 * token change in theme.json reaches this file too.
 *
 * See docs/customization-guide.md.
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   1. Primitives
   =========================================================================== */

/* Kiosko underlines every link via text-decoration-color. Ours are handled
   per-component, so reset the inherited rule rather than fight it downstream. */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.2em;
}

/* The brand's mark is script lettering; it should never pick up the site's
   own letter-spacing or be squashed by a container. */
.wp-block-site-logo img {
	height: auto;
	max-width: 100%;
}

/* ---- Arrow link -----------------------------------------------------------
   "Shop all →" style. The arrow is an ::after so it is not read aloud and
   cannot be selected as text. */
.cc-link-arrow a,
a.cc-link-arrow {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.35em;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.cc-link-arrow a::after,
a.cc-link-arrow::after {
	content: "";
	width: 1.1em;
	height: 0.6em;
	background-color: currentColor;
	/* Arrow drawn as a mask so it inherits the link colour in every state. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 5h19M15 1l4.5 4L15 9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 5h19M15 1l4.5 4L15 9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.2s ease;
}

.cc-link-arrow a:hover::after,
a.cc-link-arrow:hover::after {
	transform: translateX(0.25em);
}

.cc-link-arrow.is-light a {
	color: var(--wp--preset--color--base);
}

/* ---- Outline button on dark imagery --------------------------------------
   Kiosko's outline style assumes a light page. Over a hero photo it needs the
   cream border and cream label instead. */
.cc-button-light .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
	background-color: transparent;
}

.cc-button-light .wp-block-button__link:hover,
.cc-button-light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
}

/* Buttons carry an arrow to match the mockup's primary call to action. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: " →";
	white-space: nowrap;
}

/* ===========================================================================
   2. Header
   =========================================================================== */

.wp-block-navigation a {
	text-decoration: none;
}

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

/* Search collapses to its icon in the header; the field only appears on
   interaction, which keeps the top row quiet. */
.cc-header-search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
	padding: 0;
	min-width: 0;
}

.cc-header-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--primary);
}

.cc-header-search .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Woo's account + cart blocks sit in the announcement bar and must inherit
   its cream-on-spruce colours rather than Woo's defaults. */
.wc-block-customer-account,
.wc-block-mini-cart__button {
	color: inherit !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
}

.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border: 0 !important;
}

/* ===========================================================================
   3. Hero
   =========================================================================== */

.cc-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

.cc-hero h1 {
	/* The display face has generous sidebearings; pull the first line flush
	   with the copy beneath it. */
	margin-left: -0.04em;
}

.cc-editorial .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

/* ===========================================================================
   4. Value row
   =========================================================================== */

.cc-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
}

.cc-values__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	padding: 0 var(--wp--preset--spacing--50);
	text-align: center;
	color: var(--wp--preset--color--contrast);
}

/* Hairlines between, not around — the outer edges stay open so the row reads
   as part of the page rather than a boxed component. */
.cc-values__item + .cc-values__item {
	border-left: 1px solid var(--wp--preset--color--tertiary);
}

.cc-values__icon svg {
	width: 44px;
	height: auto;
	display: block;
}

.cc-values__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.cc-values {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.cc-values__item + .cc-values__item {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--tertiary);
		padding-top: var(--wp--preset--spacing--50);
	}
}

/* ===========================================================================
   5. Product grid
   =========================================================================== */

/* Products are cut-outs on transparent backgrounds, so they need a tile to
   sit on or they float loose against the page. */
.cc-product-grid .wc-block-components-product-image,
.cc-product-grid .wp-block-woocommerce-product-image {
	background-color: var(--wp--preset--color--tile);
	margin-bottom: 0;
}

.cc-product-grid .wc-block-components-product-image img,
.cc-product-grid .wp-block-woocommerce-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	padding: 8%;
	transition: transform 0.35s ease;
}

.cc-product-grid li:hover .wc-block-components-product-image img,
.cc-product-grid li:hover .wp-block-woocommerce-product-image img {
	transform: scale(1.035);
}

.cc-product-grid .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.cc-product-grid .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Woo prints a sale price as <del> + <ins>; keep both on one quiet line. */
.cc-product-grid ins {
	text-decoration: none;
}

.cc-product-grid del {
	opacity: 0.5;
	margin-right: 0.4em;
}

/* ===========================================================================
   6. Destination cards
   =========================================================================== */

.cc-destinations {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
}

.cc-destinations__card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	text-decoration: none;
}

/* Absolutely positioned, not height:100%. A percentage height does not
   resolve against a parent sized by aspect-ratio, so the image kept its own
   12:5 ratio and letterboxed inside the taller landing cards -- which read as
   a grey band, not as a scrim. */
/* Scoped to .cc-destinations so the selector carries two classes. WooCommerce
   ships `.woocommerce img { height: auto }` in woocommerce-layout.css, which at
   one class plus one element outranks a bare single-class rule -- and every
   product archive has .woocommerce on the body. That is why these cards filled
   correctly on the homepage and letterboxed on the category pages. */
.cc-destinations .cc-destinations__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.cc-destinations .cc-destinations__card:hover .cc-destinations__img {
	transform: scale(1.05);
}

/* Scrim lives on the card, not the image, so it does not scale on hover. */
.cc-destinations__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--cc-bottom-scrim);
}

.cc-destinations__name {
	position: absolute;
	inset-inline: 0;
	bottom: 1.1rem;
	z-index: 1;
	text-align: center;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

@media (max-width: 900px) {
	.cc-destinations {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===========================================================================
   7. Newsletter
   =========================================================================== */

.cc-newsletter {
	width: 100%;
}

.cc-newsletter__form {
	display: flex;
	flex: 1 1 380px;
	max-width: 520px;
}

/* The field is filled white and outlined in Sand Line, not left on the band
   colour. This band used to sit on a tan background, where a base-coloured
   input read as a field; once the band became cream the input matched its own
   surroundings exactly and the box disappeared, leaving a placeholder floating
   next to a button with nothing visibly joining them. */
.cc-newsletter__input {
	flex: 1;
	border: 1px solid var(--wp--preset--color--tertiary);
	border-right: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	padding: 1em 1.2em;
	border-radius: 0;
	min-width: 0;
}

.cc-newsletter__input:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.cc-newsletter__button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 1em 1.6em;
	white-space: nowrap;
}

.cc-newsletter__button:hover {
	background: #8E3315;
}

.cc-higher {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	color: var(--wp--preset--color--contrast);
}

.cc-higher svg {
	width: 46px;
	height: auto;
}

.cc-higher span {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.25;
	text-transform: uppercase;
	max-width: 5.5em;
}

/* ===========================================================================
   8. Footer
   ===========================================================================
   One row: wordmark left, inline nav beside it, social + copyright right. */

.cc-footer {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--80);
	flex-wrap: wrap;
}

.cc-footer__brand {
	display: block;
	line-height: 0;
}

/* The compact lockup carries EST. 1970 in spruce beneath a rust script; both
   colours are baked into the artwork and are left alone here. */
.cc-footer__mark {
	width: 150px;
	height: auto;
	display: block;
}

.cc-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--80);
}

.cc-footer__nav a {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.cc-footer__nav a:hover {
	color: var(--wp--preset--color--primary);
}

/* Pulled up onto the same optical line as the wordmark on wide screens. */
.cc-footer__end {
	margin-top: calc(var(--wp--preset--spacing--60) * -1);
}

@media (max-width: 1100px) {
	.cc-footer__end {
		margin-top: var(--wp--preset--spacing--50);
		justify-content: flex-start;
	}
}

@media (max-width: 700px) {
	.cc-footer,
	.cc-footer__nav {
		gap: var(--wp--preset--spacing--50);
	}
}

/* ===========================================================================
   9. Store pages
   =========================================================================== */

/* Same cut-out treatment as the home grid, applied to the shop archive and
   the single product gallery. */
.woocommerce .products-block-post-template .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-image-gallery {
	background-color: var(--wp--preset--color--tile);
}

.woocommerce .products-block-post-template .wp-block-woocommerce-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 8%;
	width: 100%;
	height: auto;
}

.wp-block-woocommerce-product-image-gallery img {
	mix-blend-mode: multiply;
}

/* Woo's bundled twenty-twenty-three.css assumes TT3's tokens; re-point the
   handful of surfaces that leak through on this palette. */
.woocommerce-store-notice,
.woocommerce-message,
.woocommerce-info {
	background-color: var(--wp--preset--color--shell) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 0 !important;
	border-left: 3px solid var(--wp--preset--color--primary) !important;
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover {
	background-color: #8E3315 !important;
}

/* Price formatting: strike-through original, no underline on the new price. */
ins {
	text-decoration: none;
}

/* ===========================================================================
   10. Motion
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.cc-link-arrow a::after,
	.cc-destinations__img,
	.cc-product-grid img {
		transition: none !important;
	}

	.cc-destinations__card:hover .cc-destinations__img,
	.cc-product-grid li:hover img {
		transform: none !important;
	}
}

/* ---------------------------------------------------------------------------
   11. Late adjustments
   --------------------------------------------------------------------------- */

/* The editorial photo is a sunset: the right third is the brightest part of
   the frame and it sits directly behind cream text. The cover block's own dim
   darkens the whole image, which kills the sunset, so add a right-side scrim
   instead and keep the left half untouched. */
.cc-editorial::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(270deg, rgba(26, 26, 23, 0.68) 0%, rgba(26, 26, 23, 0.42) 30%, rgba(26, 26, 23, 0) 62%);
}

.cc-editorial .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* Hero copy sits over a busy photograph; a soft shadow keeps it readable
   without needing more overlay. */
.cc-hero h1,
.cc-hero p,
.cc-editorial h2,
.cc-editorial p {
	text-shadow: 0 1px 18px rgba(26, 26, 23, 0.35);
}

/* Superseded by the rule in section 13, which sets the measure alongside the
   rest of the hero band sizing. Left as a pointer rather than a second,
   silently-losing declaration. */

/* Hero calls to action carry the section; the site-wide button size is right
   for product pages but reads timid at this scale. */
.cc-hero .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 1.35em 2.4em;
}

/* Value-row icons are drawn on different viewBoxes; align them on a shared
   optical baseline so the row does not look ragged. */
.cc-values__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 40px;
}

.cc-values__icon svg {
	/* width:auto collapses an inline SVG to 0 inside a flex container, so the
	   width is explicit and the height follows the viewBox. */
	width: 44px;
	height: auto;
	max-height: 100%;
}

/* ===========================================================================
   12. Store form controls
   ===========================================================================
   Native <select> and quantity inputs are the last visibly un-branded surfaces
   on the store. Woo renders them with browser defaults, and there is no
   theme.json vocabulary for them. */

.woocommerce-ordering select,
.wc-block-components-sort-select__select,
.woocommerce .variations select,
.woocommerce select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--tertiary);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.85em 2.8em 0.85em 1em;
	/* Chevron drawn inline so it inherits the brand palette rather than the OS. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23262925' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 11px;
	cursor: pointer;
}

.woocommerce-ordering select:focus,
.woocommerce .variations select:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Variation table: Woo ships this as a <table>, which fights every layout it
   is put in. Flatten it to a stack. */
.woocommerce .variations,
.woocommerce .variations tbody,
.woocommerce .variations tr,
.woocommerce .variations th,
.woocommerce .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce .variations th.label label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
	display: block;
}

.woocommerce .variations td.value {
	margin-bottom: var(--wp--preset--spacing--50);
}

.woocommerce .variations select {
	width: 100%;
	max-width: 260px;
}

.woocommerce .reset_variations {
	display: inline-block;
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Quantity + add-to-cart share a row and a height. */
.woocommerce .quantity input.qty {
	border: 1px solid var(--wp--preset--color--tertiary);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	height: 3.35em;
	width: 4.5em;
	text-align: center;
}

.woocommerce form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
}

.woocommerce form.cart .quantity {
	margin: 0;
}

.woocommerce form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 180px;
}

/* Woo's variation form is a direct child of form.cart and must not be squeezed
   into the flex row with the quantity box. */
.woocommerce form.cart.variations_form {
	display: block;
}

.woocommerce form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
}

/* Product tabs */
.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wp--preset--color--tertiary);
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--50);
	display: flex;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.woocommerce-tabs ul.tabs li {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding: 0 0 0.9rem;
	display: block;
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

.woocommerce-tabs .panel > h2 {
	/* Woo repeats the tab name as a heading inside the panel. */
	display: none;
}

/* Single product gallery: keep the cut-out centred with room around it. */
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 7%;
}

/* Woo indents the tab panel by 14px to clear a decoration this theme removed. */
.woocommerce-tabs .panel {
	margin-left: 0;
}

/* Variable products render an empty .woocommerce-variation box until a size is
   chosen; without this it reserves a block of dead space under the select. */
.woocommerce-variation:empty,
.woocommerce-variation-description:empty,
.woocommerce-variation-price:empty,
.woocommerce-variation-availability:empty {
	display: none;
}

/* The inset on cut-out product shots is percentage padding, which adds to the
   declared width unless the box model says otherwise. Without this the images
   render ~16% wider than their grid column and push a horizontal scrollbar
   onto narrow viewports. */
.cc-product-grid .wc-block-components-product-image img,
.cc-product-grid .wp-block-woocommerce-product-image img,
.woocommerce .products-block-post-template .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img {
	box-sizing: border-box;
}

/* Woo parks the mini-cart drawer just off the right edge; on small screens that
   is enough to make the document scrollable sideways. */
.wc-block-mini-cart__drawer:not(.is-loading):not([aria-hidden="false"]) {
	visibility: hidden;
}

body {
	overflow-x: clip;
}

/* ===========================================================================
   13. Band proportions
   ===========================================================================
   Heights measured off Rough-moc-1.png and expressed as a share of viewport
   width, so each band keeps the comp's aspect ratio at any screen size.
   Viewport-height units were the original approach and are wrong for this:
   they make a laptop and a tall monitor disagree about the design. */

/* Mockup hero is 40.7% of page width -> 586px at 1440. */
.cc-hero {
	min-height: clamp(24rem, 41vw, 40rem) !important;
}

/* Mockup editorial band is 19.6% -> 282px at 1440. A wide, thin banner, not a
   second hero. */
.cc-editorial {
	min-height: clamp(15rem, 20vw, 22rem) !important;
}

/* Destination cards are 130px tall at 1440 in the comp -- much wider than the
   4:3 they started at. */
.cc-destinations__card {
	aspect-ratio: 12 / 5;
}

@media (max-width: 900px) {
	.cc-destinations__card {
		aspect-ratio: 3 / 2;
	}
}

/* Hats sat small inside their tiles; the comp lets them fill more of it. */
.cc-product-grid .wc-block-components-product-image img,
.cc-product-grid .wp-block-woocommerce-product-image img,
.woocommerce .products-block-post-template .wp-block-woocommerce-product-image img {
	padding: 4%;
}

/* A narrower measure breaks the hero headline over three lines, as drawn. */
.cc-hero .wp-block-cover__inner-container > .wp-block-group {
	max-width: 30rem;
}

/* A ch measure scales with font-size, so dropping the sub-head from 24px to
   17px narrowed the column too. Widened to keep the line breaking where it
   did. */
.cc-hero__sub {
	max-width: 32ch;
	opacity: 0.92;
	/* Let the browser even out the two lines rather than leaving a short
	   second line hanging under a long first one. */
	text-wrap: balance;
}

/* ===========================================================================
   14. Drawn ridgelines
   ===========================================================================
   Line art in the mockup's own visual language, drawn from the profiles in
   brand/Towns rather than traced off them -- a literal photo trace came out
   as a wobble, not a confident line.

   The brand line is the emptiest band on the page; the ridge gives it
   something to hold without introducing another photograph. */

.cc-brandline {
	position: relative;
	overflow: hidden;
}

.cc-brandline__ridge {
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: min(1700px, 124%);
	transform: translateX(-50%);
	color: var(--wp--preset--color--tertiary);
	pointer-events: none;
	line-height: 0;
}

/* Short enough that the summits stay clear of the small-caps line above --
   at the original height the range ran straight through the type. */
.cc-brandline__ridge svg {
	width: 100%;
	height: clamp(52px, 6vw, 84px);
	display: block;
}

/* Keep the copy clear of the drawing. */
.cc-brandline > :not(.cc-brandline__ridge) {
	position: relative;
	z-index: 1;
}

/* The newsletter lockup uses the compact three-peak mark. */
.cc-higher svg {
	width: 52px;
	height: auto;
}

/* Product tiles in the comp are 310x285 at 1440 -- very slightly landscape,
   not square. The difference is small but it removes ~70px from the page. */
.cc-product-grid .wc-block-components-product-image img,
.cc-product-grid .wp-block-woocommerce-product-image img,
.woocommerce .products-block-post-template .wp-block-woocommerce-product-image img {
	aspect-ratio: 31 / 28;
}

/* The value row is a single compact line in the comp, not a padded band. */
.cc-values__icon {
	height: 34px;
}

.cc-values__icon svg {
	width: 38px;
}

.cc-values__item {
	gap: 0.65rem;
}

/* ===========================================================================
   15. Archive banner
   ===========================================================================
   Destination archives lead with a graded photograph of the place; type
   archives (Hats, Tees) fall back to a plain heading in the same position. */

.cc-archive-banner {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--60);
	aspect-ratio: 24 / 7;
	display: flex;
	align-items: flex-end;
}

.cc-archive-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-archive-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--cc-bottom-scrim);
}

.cc-archive-banner__inner {
	position: relative;
	z-index: 1;
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--base);
}

.cc-archive-banner__title {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--base);
	margin: 0;
	text-shadow: 0 1px 18px rgba(26, 26, 23, 0.4);
}

.cc-archive-banner__desc {
	margin: 0.45rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-shadow: 0 1px 14px rgba(26, 26, 23, 0.45);
}

@media (max-width: 700px) {
	.cc-archive-banner {
		aspect-ratio: 16 / 9;
	}
}

/* ===========================================================================
   16. Navigation submenu
   ===========================================================================
   Six flat nav items wrapped the header onto a second row and broke the
   centred logo, so the type categories live under Shop. Core's submenu ships
   as a white box with a default grey border; this brings it onto the palette. */

/* Core sets the background on `.wp-block-navigation .has-child
   .wp-block-navigation__submenu-container` -- three classes. Matching that
   specificity is required or the panel stays browser-white.
   
   `:not(.is-menu-open)` matters: inside the mobile overlay the submenu is a
   plain indented list, and without this exclusion it rendered as a floating
   white dropdown card with a shadow, sitting on top of the items below it. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container,
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--tertiary);
	border-radius: 0;
	padding: 0.4rem 0;
	min-width: 13rem;
	box-shadow: 0 12px 30px -18px rgba(22, 32, 43, 0.35);
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.1rem;
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

/* Core draws the parent's chevron with its own colour; inherit instead. */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	fill: currentColor;
}

/* The open-submenu state should not invert the parent label. */
.wp-block-navigation .has-child:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* ===========================================================================
   17. Studio-shot categories (eyewear, knitwear)
   ===========================================================================
   Hats and tees are cut-outs on transparency, so the theme paints a tile
   behind them and insets them with padding. The sunglasses arrived as studio
   shots with a soft contact shadow, and rather than key that out the backdrop
   was colour-matched to the tile during prep (tools/prepare-sunglasses.php).

   Those images therefore carry their own tile. The padding meant for cut-outs
   leaves a faint rectangle where the photo's backdrop meets the CSS tile, so
   it comes off for this category and the image covers the tile edge to edge. */

.product_cat-sunglasses .wp-block-woocommerce-product-image-gallery img,
.product_cat-sweaters .wp-block-woocommerce-product-image-gallery img,
.cc-product-grid li.product_cat-sunglasses .wc-block-components-product-image img,
.cc-product-grid li.product_cat-sunglasses .wp-block-woocommerce-product-image img,
.cc-product-grid li.product_cat-sweaters .wc-block-components-product-image img,
.cc-product-grid li.product_cat-sweaters .wp-block-woocommerce-product-image img,
.products-block-post-template li.product_cat-sunglasses .wp-block-woocommerce-product-image img,
.products-block-post-template li.product_cat-sweaters .wp-block-woocommerce-product-image img {
	padding: 0;
}

/* The gallery's multiply blend is there to sink cut-outs into the tile; on a
   photograph that already has a background it muddies the shadow. */
.product_cat-sunglasses .wp-block-woocommerce-product-image-gallery img,
.product_cat-sweaters .wp-block-woocommerce-product-image-gallery img {
	mix-blend-mode: normal;
}

/* ===========================================================================
   18. Archive strip
   ===========================================================================
   Real archival photography, set on Shell so the band separates from the
   product sections above and below it without another hairline. */

.cc-archive {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.cc-archive__item {
	margin: 0;
}

.cc-archive__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.cc-archive__cap {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.85rem;
}

.cc-archive__label {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--contrast);
}

/* Source line, not decoration: these are public-archive photographs and the
   section only reads as genuine if the institution is named. */
.cc-archive__credit {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

@media (max-width: 900px) {
	.cc-archive {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===========================================================================
   19. Our Story archive imagery
   =========================================================================== */

/* Breaking out of the constrained post-content width uses core's own
   alignfull class rather than a 100vw negative-margin trick. 100vw includes
   the scrollbar, so that approach overflowed the page by ~24px on every
   desktop browser that shows one. */
.cc-story__wide {
	margin-block: 0;
}

/* Every archive image on this page is fluid. This used to target a
   .cc-story__wide-img class that the rebuilt markup stopped emitting, so the
   full-bleed crowd shot rendered at its natural 2400px and pushed a 960px
   horizontal scroll onto the whole document. A base rule on .cc-story__img
   covers all three placements; the variants below only adjust ratio. */
.cc-story__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.cc-story__wide .cc-story__img {
	aspect-ratio: 24 / 9;
	object-fit: cover;
}

.cc-story__pair {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	max-width: 1280px;
	margin-inline: auto;
}

.cc-story__item {
	margin: 0;
}

/* A portrait and a landscape side by side. Left to their natural heights the
   row reads as a mistake, so both are given one height and cropped to it --
   the climb is centre-weighted enough to survive it. */
.cc-story__pair .cc-story__img {
	display: block;
	width: 100%;
	height: clamp(260px, 33vw, 460px);
	object-fit: cover;
}

.cc-story__cap {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-top: 0.8rem;
	padding-inline: var(--wp--preset--spacing--50);
}

.cc-story__pair .cc-story__cap {
	padding-inline: 0;
}

.cc-story__cap > span:first-child {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--contrast);
}

.cc-story__credit {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

@media (max-width: 780px) {
	.cc-story__pair {
		grid-template-columns: 1fr;
	}

	.cc-story__wide .cc-story__img {
		aspect-ratio: 4 / 3;
	}
}

/* Single archive image inside a constrained block. */
.cc-story__single {
	margin: 0;
}

.cc-story__single .cc-story__img {
	display: block;
	width: 100%;
	height: auto;
}

.cc-story__single .cc-story__cap {
	padding-inline: 0;
}

/* Pull quote sits between two hairlines, so it needs no other decoration. */
.cc-story__quote p {
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

/* ===========================================================================
   20. Category landing tiles
   ===========================================================================
   The homepage shows four towns at 12:5. A landing page shows all of them, so
   the cards are taller — at 12:5 an eight-up grid reads as a stack of letterbox
   slots rather than a set of places. */

.cc-destinations--landing {
	margin-bottom: var(--wp--preset--spacing--70);
}

.cc-destinations--landing .cc-destinations__card {
	aspect-ratio: 4 / 3;
}

.cc-destinations--landing .cc-destinations__name {
	bottom: 1.9rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.cc-destinations__count {
	position: absolute;
	inset-inline: 0;
	bottom: 1rem;
	z-index: 1;
	text-align: center;
	color: var(--wp--preset--color--base);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.82;
}

@media (max-width: 900px) {
	.cc-destinations--landing .cc-destinations__card {
		aspect-ratio: 3 / 2;
	}
}

/* The shared bottom scrim ramps across the full height, which is right for a
   12:5 homepage card but greys out half of a 4:3 landing card. Hold it to the
   lower third here so the photographs stay photographs. */
.cc-destinations--landing .cc-destinations__card::after {
	background: linear-gradient(0deg,
		rgba(26, 26, 23, 0.74) 0%,
		rgba(26, 26, 23, 0.34) 30%,
		rgba(26, 26, 23, 0) 62%);
}

/* ===========================================================================
   21. Shop by Category
   ===========================================================================
   Product-led, so the treatment is the inverse of the destination cards: the
   item sits on its tile and the label goes underneath. White type over a cream
   hat would be illegible, and a scrim dark enough to fix that makes the
   product look grubby. */

.cc-categories {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.cc-categories__card {
	display: block;
	text-decoration: none;
}

.cc-categories__frame {
	display: block;
	overflow: hidden;
	background-color: var(--wp--preset--color--tile);
	aspect-ratio: 1 / 1;
}

/* Two classes, so this outranks WooCommerce's `.woocommerce img { height:auto }`
   on shop pages — the same trap the destination tiles hit. */
.cc-categories .cc-categories__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.cc-categories__card:hover .cc-categories__img {
	transform: scale(1.04);
}

.cc-categories__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.9rem;
}

.cc-categories__name {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.cc-categories__card:hover .cc-categories__name {
	color: var(--wp--preset--color--primary);
}

.cc-categories__count {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.cc-categories {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-categories__img {
		transition: none !important;
	}

	.cc-categories__card:hover .cc-categories__img {
		transform: none !important;
	}
}

/* ===========================================================================
   22. Mobile header
   ===========================================================================
   The announcement bar used to carry the shipping message, the account link
   and the cart. On a phone that wrapped to two lines with the account link and
   cart stranded left, and it cost 92px before the logo even appeared.

   Now: the cart lives in the header row beside search at every width, the
   account link shows in the announcement bar on desktop and in the navigation
   overlay on mobile, and the shipping message centres on its own. */

/* Account link: announcement bar on desktop, navigation overlay below.
   The breakpoint is 900px, not core's 600px -- see the overlay rule below. */
@media (max-width: 1000px) {
	.cc-notice__account {
		display: none;
	}

	.cc-notice__row {
		justify-content: center;
	}

	.cc-notice__text {
		text-align: center;
	}
}

/* The same navigation block is the desktop bar and the mobile overlay, so the
   account item has to be hidden above the overlay breakpoint rather than
   simply not added. */
@media (min-width: 1001px) {
	.wp-block-navigation .cc-nav-account {
		display: none;
	}
}

/* Search and cart are two different components with two different intrinsic
   box sizes. Give them one, so they sit on a shared line rather than
   approximately near one. */
.cc-header-search .wp-block-search__button,
.cc-header-cart .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
}

/* The hamburger is sized only where core already shows it. An unconditional
   `display: flex !important` here forced it visible on desktop too, which put
   it in the left column and pushed the whole nav onto a second row. */
@media (max-width: 1000px) {
	.wp-block-navigation__responsive-container-open {
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		margin: 0;
	}
}

.wp-block-navigation__responsive-container-open svg,
.cc-header-search .wp-block-search__button svg,
.cc-header-cart .wc-block-mini-cart__button svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Woo gives the cart button its own padding and a min-width. */
.cc-header-cart .wc-block-mini-cart__button {
	min-width: 0;
	background: transparent;
}

.cc-header-cart .wc-block-mini-cart__quantity-badge {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1000px) {
	/* Side columns are fixed and equal, so the logo is centred on the page
	   rather than centred in an off-centre column. Equal is the point: the
	   left holds one icon and the right holds two, and percentage columns put
	   the wordmark visibly off to one side.

	   88px is what the right column actually needs: two 40px icons plus an 8px
	   gap. At 80px its contents overflowed the basis and pushed left into the
	   logo, which is why the wordmark ended up touching the search icon with
	   60px of slack on the other side. */
	header .wp-block-columns > .wp-block-column:first-child,
	header .wp-block-columns > .wp-block-column:last-child {
		flex: 0 0 88px !important;
		max-width: 88px;
	}

	/* Tighten the column gutter to buy that width back from somewhere. */
	header .wp-block-columns {
		gap: 8px !important;
	}

	/* And leave the wordmark a little air on both sides rather than letting it
	   run edge to edge in its column. */
	.wp-block-site-logo img {
		max-width: min(92%, 230px) !important;
	}

	.cc-header-search + .cc-header-cart,
	.cc-header-cart {
		margin-left: 0;
	}

	header .wp-block-columns > .wp-block-column:nth-child(2) {
		flex: 1 1 auto !important;
		max-width: none;
		min-width: 0;
	}

	/* Fill the column rather than a fixed px width -- at a fixed 210px the
	   wordmark overflowed its column and sat on top of the search icon. */
	.wp-block-site-logo,
	.wp-block-site-logo a {
		display: block;
		width: 100%;
	}

	.wp-block-site-logo img {
		width: 100% !important;
		max-width: 100%;
		height: auto;
	}

	/* Slightly smaller tap targets to buy the wordmark its width back. Still
	   above the 36px comfortable-target floor. */
	.wp-block-navigation__responsive-container-open,
	.cc-header-search .wp-block-search__button,
	.cc-header-cart .wc-block-mini-cart__button {
		width: 36px;
		height: 36px;
	}

	.cc-header-search,
	.cc-header-cart {
		flex: none;
	}
}


/* ---------------------------------------------------------------------------
   Mobile navigation overlay
   --------------------------------------------------------------------------- */

/* Inside the overlay the submenu is a list, not a dropdown: no card, no
   shadow, no absolute positioning. Core already lays it out; this just undoes
   the desktop treatment. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	/* Core already indents the nested list; this only needs to add a little
	   more, not a second full step. */
	padding-left: var(--wp--preset--spacing--40);
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 0;
	padding-right: 0;
}

/* Give the overlay a proper measure and rhythm. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	align-items: flex-start;
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding-block: 0.7rem;
	font-size: var(--wp--preset--font-size--small);
}

/* The account link closes the list, so it is set apart rather than reading as
   another category. */
.wp-block-navigation__responsive-container.is-menu-open .cc-nav-account {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--tertiary);
}

.wp-block-navigation__responsive-container.is-menu-open .cc-nav-account .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* Close button, aligned to the same inset as the list. */
.wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--50);
	right: var(--wp--preset--spacing--50);
}


/* ---------------------------------------------------------------------------
   Overlay navigation up to 900px
   ---------------------------------------------------------------------------
   Core switches overlayMenu:"mobile" at 600px. Between 600 and 900 this
   header still tried to lay the nav out inline, and "SHOP DESTINATIONS OUR
   STORY" wrapped onto a second line inside a 34% column -- the nav sat in two
   rows beside a centred logo, which looked like a mistake rather than a
   layout. Extending the overlay to 900px is the same trade core makes, just at
   the width this particular nav actually needs.

   These mirror core's own sub-600 rules rather than inventing new behaviour. */
@media (max-width: 1000px) {
	/* Specificity has to match core's exactly. Core hides/shows this with
	   `.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)`
	   -- three selectors. A two-selector rule loses, and the nav rendered as a
	   stacked inline list instead of collapsing to the hamburger. */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

/* The wordmark fills its column on small screens, but the column grows with
   the viewport -- at 599px that produced a 359px logo and a 210px-tall header.
   Cap it. */
@media (max-width: 1000px) {
	.wp-block-site-logo img {
		margin-inline: auto;
	}
}

/* ===========================================================================
   23. Header icon optical sizing
   ===========================================================================
   The three header icons had identical 40px boxes and identical box centres,
   and still did not look aligned. Measuring the rendered ink rather than the
   boxes showed why: search and cart draw 14.25px of glyph, while core's
   hamburger draws two thin bars spanning 8.25px inside the same box. Same
   centre, very different optical weight, so the hamburger read as smaller and
   higher than its neighbours.

   Boxes cannot fix that. The mark itself has to be redrawn at the size the
   others occupy, which is what this does — three bars, 20x14, 1.5px weight,
   matching the 14.25px ink height of the search and cart glyphs. */

.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 20px;
	height: 14px;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 100% 1.5px;
	background-position: left top, left center, left bottom;
	background-repeat: no-repeat;
}

@media (max-width: 1000px) {
	/* Icon boxes come down from 40px to 34px, which buys the wordmark roughly
	   30px of column width back. The glyphs inside are unchanged — only the
	   padding around them shrinks. */
	.wp-block-navigation__responsive-container-open,
	.cc-header-search .wp-block-search__button,
	.cc-header-cart .wc-block-mini-cart__button {
		width: 34px;
		height: 34px;
	}

	/* Side columns sized to the right one's real contents: two 34px icons plus
	   a 6px gap. */
	header .wp-block-columns > .wp-block-column:first-child,
	header .wp-block-columns > .wp-block-column:last-child {
		flex: 0 0 74px !important;
		max-width: 74px;
	}

	header .wp-block-columns {
		gap: 6px !important;
	}

	header .wp-block-columns > .wp-block-column:last-child .wp-block-group {
		gap: 6px !important;
	}

	/* ~25% larger than before, with clearance left on both sides. */
	.wp-block-site-logo img {
		max-width: min(96%, 260px) !important;
	}
}

/* ===========================================================================
   24. Shop mega menu
   ===========================================================================
   The Shop submenu renders category cards instead of text links. Core's
   markup and interactivity are untouched — only the list items are swapped,
   in inc/navigation.php — so this is styling a <ul> that core still opens,
   closes and manages focus for. */

/* !important on display and width is deliberate here. Core styles the open
   submenu through several state rules at (0,5,0) --
   `.wp-block-navigation .has-child:not(.open-on-click):hover > …container`,
   an `[aria-expanded=true] ~ …container` sibling rule, and a separate
   is-menu-open rule -- each setting display:flex and width. Matching every one
   of those selectors would be both unreadable and fragile the next time core
   adds a state. */
.cc-mega {
	display: grid !important;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) !important;
}

.cc-mega .cc-mega__item {
	width: auto;
}

.cc-mega__link {
	display: block !important;
	padding: 0 !important;
	text-decoration: none;
}

/* The product shots are cut-outs or carry their own tile, so the frame paints
   the same tile colour the product grids use and the two read as one system. */
.cc-mega__frame {
	display: block;
	overflow: hidden;
	background-color: var(--wp--preset--color--tile);
	aspect-ratio: 1 / 1;
}

/* Two classes: WooCommerce ships `.woocommerce img { height: auto }`, which
   outranks a single-class rule on every shop page. */
.cc-mega .cc-mega__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cc-mega__link:hover .cc-mega__img {
	transform: scale(1.05);
}

/* Stacked, not side by side. The homepage category row is 300px wide per card
   and fits a name beside its count; these cards are 162px and "Sunglasses"
   broke across two lines next to "3 STYLES". */
.cc-mega__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	margin-top: 0.7rem;
}

.cc-mega__name {
	white-space: nowrap;
}

.cc-mega__name {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
	line-height: 1.1;
}

.cc-mega__link:hover .cc-mega__name {
	color: var(--wp--preset--color--primary);
}

.cc-mega__count {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	white-space: nowrap;
}

/* Full-width footer row inside the panel. */
.cc-mega__all {
	grid-column: 1 / -1;
	border-top: 1px solid var(--wp--preset--color--tertiary);
	padding-top: var(--wp--preset--spacing--40);
	width: auto;
}

.cc-mega__all .wp-block-navigation-item__content {
	padding: 0 !important;
}

/* ---- Desktop panel -------------------------------------------------------- */
@media (min-width: 1001px) {
	.wp-block-navigation .has-child .cc-mega {
		grid-template-columns: repeat(4, 1fr) !important;
		width: 720px !important;
		min-width: 720px !important;
		max-width: calc(100vw - var(--wp--preset--spacing--50) * 2);
		left: 0;
	}
}

/* ---- Mobile overlay ------------------------------------------------------- */
@media (max-width: 1000px) {
	.wp-block-navigation__responsive-container.is-menu-open .cc-mega {
		grid-template-columns: repeat(2, 1fr) !important;
		width: 100% !important;
		min-width: 0 !important;
		/* Core zeroes the gap on the open overlay submenu, so the cards butted
		   straight into each other. */
		gap: var(--wp--preset--spacing--50) !important;
		padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50) !important;
	}

	/* The overlay list is a stack; the card grid is not, so undo the
	   full-width item rule that applies to the text items around it. */
	.wp-block-navigation__responsive-container.is-menu-open .cc-mega .cc-mega__item {
		width: auto;
	}

	.wp-block-navigation__responsive-container.is-menu-open .cc-mega .wp-block-navigation-item__content {
		padding-block: 0;
	}

	.cc-mega__name {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* The footer row stretched its underline across the whole panel. Core makes
   .wp-block-navigation-item a flex container and gives the anchor
   `flex: 1 1 auto`, so the link filled it regardless of its own display value.
   Taking the list item out of flex lets the inline-flex anchor shrink to its
   text. */
.cc-mega__all {
	display: block !important;
}

.cc-mega__all .cc-link-arrow {
	display: inline-flex !important;
	width: auto !important;
	flex: none !important;
}

/* ===========================================================================
   25. Hero buttons on mobile
   ===========================================================================
   At the desktop size the pair measured 358px against a 342px container and
   wrapped onto two rows. Dropping to the small label size and tighter padding
   brings them to roughly 250px, which clears even a 360px viewport. */

@media (max-width: 1000px) {
	.cc-hero .wp-block-buttons {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.cc-hero .wp-block-button {
		flex: 0 1 auto;
		min-width: 0;
	}

	.cc-hero .wp-block-button__link {
		font-size: var(--wp--preset--font-size--x-small);
		padding: 1.2em 1.7em;
		white-space: nowrap;
	}
}

/* The outline button carries a 1px border and the filled one does not, so the
   pair sat 2px different in height and 1px off each other's baseline. A
   transparent border on the filled variant equalises the box without changing
   how it looks. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border: 1px solid transparent;
}