/*
Theme Name: Amna Omar Clothing
Theme URI: https://amnaomarclothing.com/
Description: Child theme of Astra carrying the Amna Omar Clothing design system: warm editorial palette, a two-role type scale, and editorial product cards.
Author: Amna Omar Clothing
Template: astra
Version: 1.0.0
Text Domain: amna-omar
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Warm neutral ground. Colour lives in the photography, not the interface. */
	--aoc-ivory:      #FAF7F2;
	--aoc-cream:      #F2EBE3;
	--aoc-blush:      #E8D5D0;
	--aoc-ink:        #241F1B;
	--aoc-ink-soft:   #4A423B;
	--aoc-muted:      #8A7E73;
	--aoc-line:       #E5DCD2;
	--aoc-white:      #FFFFFF;
	--aoc-footer:     #2F241C;   /* design 1A ground */
	--aoc-tan:        #C7A583;   /* design 1A accent: column labels and hover */   /* warmer than the ink, so it reads as brown, not a black slab */

	/* Italiana has one weight and very fine hairlines, so it is display only:
	   hero and section titles. Everything that must stay legible small is Jost. */
	--aoc-display: "Italiana", "Times New Roman", Georgia, serif;
	--aoc-ui: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Type scale. Fluid between mobile and desktop, so nothing is set twice. */
	--aoc-t-hero:    clamp(2.75rem, 5.6vw, 5.25rem);
	--aoc-t-h1:      clamp(2.5rem, 5vw, 4.25rem);
	--aoc-t-h2:      clamp(2rem, 3.4vw, 3rem);
	--aoc-t-h3:      clamp(1.375rem, 2vw, 1.75rem);
	--aoc-t-body:    0.9375rem;
	--aoc-t-small:   0.8125rem;
	--aoc-t-label:   0.6875rem;

	--aoc-track-label: 0.24em;
	--aoc-track-display: 0.06em;
	--aoc-track-btn:   0.16em;

	/* Vertical rhythm. One scale, used everywhere. */
	--aoc-space-xs: 1.5rem;
	--aoc-space-s:  1.5rem;
	--aoc-space-m:  3rem;
	--aoc-space-l:  7.5rem;
	--aoc-space-xl: 11rem;

	/* Astra reads these for most of its own chrome, so remapping them here
	   warms the header, footer, buttons and links in one move. */
	--ast-global-color-0: #241F1B;
	--ast-global-color-1: #7A6A5E;
	--ast-global-color-2: #241F1B;
	--ast-global-color-3: #4A423B;
	--ast-global-color-4: #F2EBE3;
	--ast-global-color-5: #FFFFFF;
	--ast-global-color-6: #FAF7F2;
	--ast-global-color-7: #241F1B;
	--ast-global-color-8: #241F1B;
}

/* ==========================================================================
   2. Foundations
   ========================================================================== */

body,
body.woocommerce,
.ast-container,
.entry-content {
	font-family: var(--aoc-ui);
	font-size: var(--aoc-t-body);
	line-height: 1.8;
	letter-spacing: 0.012em;
	color: var(--aoc-ink-soft);
	background-color: var(--aoc-ivory);
	-webkit-font-smoothing: antialiased;
}

/* One display face for every heading. The old build used three. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.product_title {
	font-family: var(--aoc-display) !important;
	color: var(--aoc-ink);
	font-weight: 400;
	letter-spacing: var(--aoc-track-display);
	line-height: 1.18;
	text-transform: uppercase;
}

/* Product names stay in the sans: Italiana's hairlines break down at the
   size a card title runs at. */
.woocommerce-loop-product__title {
	font-family: var(--aoc-ui) !important;
	text-transform: uppercase;
}

h1, .entry-title { font-size: var(--aoc-t-h1); }
h2 { font-size: var(--aoc-t-h2); }
h3 { font-size: var(--aoc-t-h3); }

p { margin-bottom: 1.25em; }

a { color: var(--aoc-ink); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover, a:focus { color: var(--aoc-muted); }

::selection { background: var(--aoc-blush); color: var(--aoc-ink); }

/* The small tracked uppercase label that carries the editorial tone. */
.aoc-label,
.uagb-ifb-title-prefix,
.woocommerce-breadcrumb {
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-label) !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase;
	color: var(--aoc-muted) !important;
	line-height: 1.6 !important;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

/* Deliberately no bare `button` here: Astra's mobile menu toggle, search
   toggle and cart trigger are all <button>, and a blanket rule turned the
   hamburger into an ink slab with 2.5em of padding. */
.ast-button,
.ast-custom-button,
a.button,
button.button,
.srfm-button,
.srfm-submit-button,
input[type="submit"],
.wp-block-button__link,
.uagb-infobox-cta-link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-label) !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-btn) !important;
	text-transform: uppercase;
	line-height: 1 !important;
	padding: 1.15em 2.5em !important;
	border-radius: 0 !important;
	border: 1px solid var(--aoc-ink) !important;
	background-color: var(--aoc-ink) !important;
	color: var(--aoc-white) !important;
	transition: background-color .25s ease, color .25s ease;
	white-space: nowrap;
}

.ast-button:hover,
.ast-custom-button:hover,
a.button:hover,
button.button:hover,
.srfm-button:hover,
.srfm-submit-button:hover,
.wp-block-button__link:hover,
.uagb-infobox-cta-link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: transparent !important;
	color: var(--aoc-ink) !important;
}

.aoc-btn-ghost,
.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--aoc-ink) !important;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.site-header,
.ast-primary-header-bar {
	background-color: var(--aoc-ivory) !important;
	border-bottom: 1px solid var(--aoc-line);
}

.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
	font-family: var(--aoc-ui);
	font-size: var(--aoc-t-label);
	font-weight: 500;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-ink);
}

.main-header-menu .menu-item > .menu-link { position: relative; }

/* Underline grows from the left rather than appearing all at once. */
.main-header-menu .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0.55em;
	width: 0; height: 1px;
	background: var(--aoc-ink);
	transition: width .3s ease;
}
.main-header-menu .menu-item:hover > .menu-link::after { width: 100%; }

.ast-above-header-bar,
.ast-builder-html-element {
	font-size: var(--aoc-t-label);
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
}

/* ==========================================================================
   5. Info boxes
   ========================================================================== */

/* Spectra info boxes are used twice on the home page: once for the hero and
   once for the small trust row. They share a class, so the hero treatment is
   scoped to the hero block and everything else gets the quiet default. */

.uagb-ifb-title,
.uagb-ifb-title strong {
	font-family: var(--aoc-ui) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	color: var(--aoc-ink) !important;
	text-transform: none !important;
	margin: 0 0 0.5rem !important;
}

.uagb-ifb-desc,
.uagb-ifb-desc strong {
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-small) !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	color: var(--aoc-muted) !important;
}

/* --- Hero only --- */

.uagb-block-971abf49 .uagb-ifb-content { max-width: 46rem; }

/* Keep the year with the word it belongs to rather than orphaning it. */
.uagb-block-971abf49 .uagb-ifb-title { text-wrap: balance; }

.uagb-block-971abf49 .uagb-ifb-title-prefix {
	display: block;
	margin-bottom: 1.5rem !important;
}

.uagb-block-971abf49 .uagb-ifb-title,
.uagb-block-971abf49 .uagb-ifb-title strong {
	margin: 0 0 0.15em !important;
}

.uagb-block-971abf49 .uagb-ifb-desc,
.uagb-block-971abf49 .uagb-ifb-desc strong {
	font-size: 1rem !important;
	letter-spacing: 0.04em !important;
	line-height: 1.7 !important;
	color: var(--aoc-ink-soft) !important;
	margin-bottom: 2.25rem !important;
}

.uagb-block-971abf49 .uagb-infobox-cta-link {
	font-size: var(--aoc-t-label) !important;
	padding: 1.15em 2.75em !important;
}

/* Never let a heading push past its column on a narrow grid cell. */
.uagb-ifb-title,
.woocommerce-loop-product__title {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ==========================================================================
   6. Product cards
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
	gap: 2.5rem 1.75rem;
}

.woocommerce ul.products li.product {
	background: transparent;
	box-shadow: none;
	border: 0;
	padding: 0;
	text-align: left;
}

/* Fashion photography wants a tall frame, not a square one. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product .woocommerce-loop-product__link > img {
	display: block;
	overflow: hidden;
	background: var(--aoc-cream);
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
	display: block;   /* inline images leave a descender gap below the frame */
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	transition: transform 1.2s cubic-bezier(.2,.6,.2,1), opacity .4s ease;
}

.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img {
	transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .ast-woo-product-category {
	margin: 1.25rem 0 0.4rem !important;
	padding: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--aoc-ui) !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--aoc-ink) !important;
}

.woocommerce ul.products li.product .price {
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-small) !important;
	font-weight: 400 !important;
	letter-spacing: 0.08em !important;
	color: var(--aoc-muted) !important;
}

/* The chat slab that used to dominate every card. Removed at the plugin
   level too; this is the belt to that braces. */
.woocommerce ul.products li.product .ctc_woo_place,
.woocommerce ul.products li.product .ht-ctc-chat {
	display: none !important;
}

/* Add to cart stays quiet until the card is hovered. */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
	background: transparent !important;
	color: var(--aoc-ink) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--aoc-ink) !important;
	padding: 0 0 0.35em !important;
	margin-top: 0.9rem !important;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .3s ease, transform .3s ease;
}

.woocommerce ul.products li.product:hover .button.add_to_cart_button,
.woocommerce ul.products li.product:focus-within .button.add_to_cart_button {
	opacity: 1;
	transform: none;
}

/* Touch devices have no hover, so never hide the only way to buy. */
@media (hover: none) {
	.woocommerce ul.products li.product .button.add_to_cart_button {
		opacity: 1;
		transform: none;
	}
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--aoc-ink) !important;
	color: var(--aoc-white) !important;
	border-radius: 0 !important;
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-label) !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase;
	padding: 0.6em 1em !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1 !important;
}

/* ==========================================================================
   7. Sections and rhythm
   ========================================================================== */

.wp-block-uagb-container { padding-left: 0; padding-right: 0; }

.aoc-section { padding-block: var(--aoc-space-l); }

.aoc-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--aoc-space-s);
	margin-bottom: var(--aoc-space-m);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--aoc-line);
}

/* ==========================================================================
   8. Newsletter
   ========================================================================== */

/* The old build wrapped the word across two lines as "SUBSCRIB E". */
.wp-block-search__button,
input[type="submit"][value*="SUBSCRIB"],
.aoc-newsletter button {
	white-space: nowrap !important;
	width: auto !important;
	min-width: max-content;
	flex: 0 0 auto;
}

input[type="email"],
input[type="text"],
input[type="search"],
textarea {
	font-family: var(--aoc-ui);
	font-size: var(--aoc-t-body);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--aoc-line);
	border-radius: 0;
	padding: 0.9em 0;
	color: var(--aoc-ink);
}

input[type="email"]:focus,
input[type="text"]:focus,
textarea:focus {
	outline: none;
	border-bottom-color: var(--aoc-ink);
}

::placeholder {
	color: var(--aoc-muted);
	font-size: var(--aoc-t-small);
	letter-spacing: 0.06em;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.site-footer,
.ast-footer-copyright,
.site-below-footer-wrap,
.site-primary-footer-wrap {
	background-color: var(--aoc-ink) !important;
	color: var(--aoc-cream);
}

.site-footer a,
.site-footer .widget a { color: var(--aoc-cream); opacity: 0.78; }
.site-footer a:hover { opacity: 1; color: var(--aoc-white); }

.site-footer .widget-title,
.site-footer h2, .site-footer h3 {
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-label) !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase;
	color: var(--aoc-white) !important;
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   10. Chat widget
   ========================================================================== */

/* Sits above the fold on every scroll position in the old build. Keep it
   small and out of the way; the greetings dialog no longer auto-opens. */
.ht-ctc.ht-ctc-chat { transform: scale(0.82); transform-origin: bottom right; }

/* ==========================================================================
   11. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   12. Footer refinements
   ========================================================================== */

/* A reversed logo now exists as a real asset: cream artwork on transparency,
   so no filter is needed. The earlier invert() stopgap has to go, or it turns
   the light mark dark again. */
.site-footer img[src*="logo"],
.site-primary-footer-wrap .custom-logo,
.site-primary-footer-wrap img {
	max-width: 170px;
	height: auto;
}

/* Astra keeps its own link colour inside footer widgets. */
.site-footer a,
.site-primary-footer-wrap a,
.ast-builder-html-element a,
.site-footer .widget a {
	color: var(--aoc-cream) !important;
	opacity: 0.75;
	text-decoration: none;
	transition: opacity .2s ease;
}

.site-footer a:hover,
.site-primary-footer-wrap a:hover {
	opacity: 1;
	color: var(--aoc-white) !important;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.site-footer,
.site-primary-footer-wrap,
.ast-footer-copyright {
	font-size: var(--aoc-t-small);
	letter-spacing: 0.03em;
}

.ast-footer-copyright {
	border-top: 1px solid rgba(242, 235, 227, 0.14);
	color: var(--aoc-muted);
}

/* ==========================================================================
   13. Trust row
   ========================================================================== */

/* Scope by the info box itself, not its wrapper: the hero box sits inside a
   container too, so a :not() on the container matched the hero as well. */

/* Short factual promises read better as labels than as display headings. */
.wp-block-uagb-info-box:not(.uagb-block-971abf49) .uagb-ifb-title,
.wp-block-uagb-info-box:not(.uagb-block-971abf49) .uagb-ifb-title strong {
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-label) !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase !important;
	color: var(--aoc-ink) !important;
	line-height: 1.6 !important;
	margin-bottom: 0.9rem !important;
}

/* Hero, stated last and one level more specific so nothing above can win. */
body .wp-block-uagb-info-box.uagb-block-971abf49 .uagb-ifb-title,
body .wp-block-uagb-info-box.uagb-block-971abf49 .uagb-ifb-title strong {
	font-family: var(--aoc-display) !important;
	font-size: var(--aoc-t-hero) !important;
	font-weight: 400 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	line-height: 1.08 !important;
	color: var(--aoc-ink) !important;
	margin: 0 0 0.15em !important;
}

body .wp-block-uagb-info-box.uagb-block-971abf49 .uagb-ifb-desc,
body .wp-block-uagb-info-box.uagb-block-971abf49 .uagb-ifb-desc strong {
	font-size: 1rem !important;
	color: var(--aoc-ink-soft) !important;
	letter-spacing: 0.04em !important;
	margin-bottom: 2.25rem !important;
}

/* ==========================================================================
   12. Narrow screens

   The desktop layout puts the hero copy on the pink left third of the
   photograph. Below the Astra tablet breakpoint the background is centred,
   so the model's face ends up behind the headline. These rules move the
   crop and lay a soft cream wash over the top of the frame, which is where
   the words sit, while leaving the embroidery at the bottom untouched.
   ========================================================================== */

@media (max-width: 921px) {
	:root {
		--aoc-space-l:  4.5rem;
		--aoc-space-xl: 6rem;
	}

	/* The photograph lives on the container, not on the info box, and it is
	   set to background-size: contain. At phone widths the image's ratio no
	   longer matches the box, so it letterboxed with cream bars down both
	   sides. cover fills the frame; the offset keeps the model off-centre so
	   the copy lands on the pink rather than on her face. */
	.wp-block-uagb-container.uagb-block-c2c81d86 {
		background-size: cover !important;
		background-position: 72% center !important;
		min-height: 30rem;
	}

	/* The wash goes on the inner wrapper rather than a pseudo-element, since
	   Spectra uses ::before on its containers for its own overlay. */
	.wp-block-uagb-container.uagb-block-c2c81d86 > .uagb-container-inner-blocks-wrap {
		background: linear-gradient(
			to bottom,
			rgba(250, 247, 242, 0.82) 0%,
			rgba(250, 247, 242, 0.64) 40%,
			rgba(250, 247, 242, 0.12) 74%,
			rgba(250, 247, 242, 0) 100%
		);
	}
}

@media (max-width: 767px) {
	:root {
		--aoc-t-hero: clamp(2.125rem, 10.5vw, 3.25rem);
	}

	body .wp-block-uagb-info-box.uagb-block-971abf49 .uagb-ifb-title,
	body .wp-block-uagb-info-box.uagb-block-971abf49 .uagb-ifb-title strong {
		letter-spacing: 0.03em !important;   /* Italiana is already wide; less at small sizes */
	}

	.uagb-block-971abf49 .uagb-ifb-title-prefix { margin-bottom: 1rem !important; }

	.uagb-block-971abf49 .uagb-ifb-desc,
	.uagb-block-971abf49 .uagb-ifb-desc strong {
		font-size: 0.9375rem !important;
		line-height: 1.6 !important;
		margin-bottom: 1.75rem !important;
	}

	/* Two columns of cards need a tighter rhythm than the desktop four. */
	.woocommerce ul.products li.product {
		margin-bottom: 2.25rem !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.75rem !important;
		letter-spacing: 0.08em !important;
		line-height: 1.5 !important;
		margin-top: 0.875rem !important;
	}

	.woocommerce ul.products li.product .price {
		font-size: 0.8125rem !important;
	}

	/* Buttons run edge to edge rather than sitting in a narrow slab. */
	.uagb-block-971abf49 .uagb-infobox-cta-link {
		padding: 1.1em 2em !important;
	}
}

@media (max-width: 767px) {
	/* The hero's Spectra container carries 18px of side padding, which left the
	   photograph floating as an inset card. Drop it so the image runs edge to
	   edge, and put the inset back on the copy instead. */
	.wp-block-uagb-container.uagb-block-c2c81d86 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body .wp-block-uagb-info-box.uagb-block-971abf49 .uagb-ifb-content {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

/* ==========================================================================
   13. Long-form pages

   Policies and the size guide. The display type that carries a hero is wrong
   for a page with twenty headings: at h2 scale, uppercase Italiana shouts and
   the section heads end up louder than the page title. Here the hierarchy is
   carried by weight, spacing and rules instead of size, and the column is cut
   to a reading measure.
   ========================================================================== */

/* The page header runs the full container width, matching Contact and About,
   so a policy page does not read as a different site. Capping the whole
   content column instead left a narrow strip floating in dead space with a
   title two thirds the size of every other page's. The reading measure moves
   onto the text elements themselves, which lets the contents band stay wide. */
.aoc-prose .entry-header {
	max-width: none;
	text-align: center;
	padding-bottom: var(--aoc-space-s);
	margin-bottom: var(--aoc-space-m);
	border-bottom: 1px solid var(--aoc-rule);
}

.aoc-prose .entry-title {
	font-size: clamp(2.25rem, 5.4vw, 4.25rem) !important;
	letter-spacing: 0.08em !important;
	line-height: 1.1 !important;
	margin: 0 !important;
}

.aoc-prose .entry-content {
	max-width: none;
}

/* Reading measure, applied per element rather than to the column. */
.aoc-prose .entry-content > p,
.aoc-prose .entry-content > h2,
.aoc-prose .entry-content > h3,
.aoc-prose .entry-content > h4,
.aoc-prose .entry-content > h5,
.aoc-prose .entry-content > h6,
.aoc-prose .entry-content > ul,
.aoc-prose .entry-content > ol,
.aoc-prose .entry-content > figure,
.aoc-prose .entry-content > .wp-block-table,
/* Some headings on these pages are Spectra blocks, so the heading sits inside
   a wrapper div and never matches a direct-child element selector. Without
   this the section heads sit hard left while the prose is centred. */
.aoc-prose .entry-content > .wp-block-uagb-advanced-heading,
.aoc-prose .entry-content > .wp-block-uagb-info-box {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

/* Section heads. Smaller than the page title on purpose, and separated by a
   rule rather than by scale. */
.aoc-longform .entry-content h2 {
	font-size: 1.375rem !important;
	letter-spacing: 0.14em !important;
	line-height: 1.4 !important;
	margin-block: var(--aoc-space-m) 1.25rem !important;
	padding-top: 2rem;
	border-top: 1px solid var(--aoc-rule);
}

.aoc-longform .entry-content h2:first-of-type {
	border-top: 0;
	padding-top: 0;
}

/* Sub-heads drop out of the display face entirely. Italiana has one weight,
   so at this size it cannot signal a level below h2 without simply looking
   like smaller h2s. The sans label does that job cleanly. */
.aoc-longform .entry-content h3,
.aoc-longform .entry-content h4,
.aoc-longform .entry-content h5,
.aoc-longform .entry-content h6 {
	font-family: var(--aoc-ui) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase !important;
	color: var(--aoc-ink) !important;
	margin-block: 2.5rem 0.875rem !important;
}

.aoc-longform .entry-content p {
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--aoc-ink-soft);
	margin-block: 0 1.35rem;
}

.aoc-longform .entry-content p strong { color: var(--aoc-ink); font-weight: 500; }

.aoc-longform .entry-content a {
	color: var(--aoc-ink);
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--aoc-rule-strong);
}

.aoc-longform .entry-content a:hover { text-decoration-color: var(--aoc-ink); }

.aoc-longform .entry-content ul,
.aoc-longform .entry-content ol {
	margin-block: 0 1.5rem;
	padding-left: 1.25rem;
	color: var(--aoc-ink-soft);
}

.aoc-longform .entry-content li {
	font-size: 1.0625rem;
	line-height: 1.8;
	margin-bottom: 0.5rem;
	padding-left: 0.4rem;
}

.aoc-longform .entry-content ul li::marker { color: var(--aoc-rule-strong); }
.aoc-longform .entry-content ol li::marker { color: var(--aoc-ink-soft); font-size: 0.875em; }

.aoc-longform .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 0 2rem;
	font-size: 0.9375rem;
}

.aoc-longform .entry-content th,
.aoc-longform .entry-content td {
	border-bottom: 1px solid var(--aoc-rule);
	padding: 0.85rem 0.75rem;
	text-align: left;
}

.aoc-longform .entry-content th {
	font-family: var(--aoc-ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-ink);
}

/* Contents list, built server-side from the section heads. */
.aoc-toc {
	background: var(--aoc-cream);
	padding: 2.25rem 2.5rem;
	margin: 0 0 var(--aoc-space-l);
}

.aoc-toc__label {
	font-family: var(--aoc-ui) !important;
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase;
	color: var(--aoc-ink-soft) !important;
	margin: 0 0 1.25rem !important;
}

.aoc-toc ol {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	columns: 3;
	column-gap: 3rem;
}

.aoc-toc li {
	font-size: 0.9375rem !important;
	line-height: 1.5 !important;
	margin: 0 0 0.7rem !important;
	padding: 0 !important;
	break-inside: avoid;
}

.aoc-toc a {
	color: var(--aoc-ink-soft) !important;
	text-decoration: none !important;
	transition: color .2s ease;
}

.aoc-toc a:hover { color: var(--aoc-ink) !important; }

/* Anchored headings should not land under the sticky header. */
.aoc-longform .entry-content h2[id] { scroll-margin-top: 7rem; }

@media (max-width: 767px) {
	.aoc-toc { padding: 1.5rem 1.25rem; }
	.aoc-toc ol { columns: 1; }

	.aoc-longform .entry-content h2 {
		font-size: 1.125rem !important;
		letter-spacing: 0.1em !important;
		padding-top: 1.5rem;
	}

	.aoc-longform .entry-content p,
	.aoc-longform .entry-content li { font-size: 1rem; line-height: 1.75; }
}

/* ==========================================================================
   14. Size chart

   Replaces a raster chart that could not be read on a phone, searched, or
   corrected. Eight columns will not fit a 375px screen at a legible size, so
   the table scrolls inside its own frame rather than forcing the page to.
   ========================================================================== */

.aoc-sizechart {
	margin: 0 0 var(--aoc-space-m);
}

.aoc-sizechart__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--aoc-rule);
}

.aoc-longform .entry-content .aoc-sizechart table {
	margin: 0;
	min-width: 34rem;   /* below this the columns collapse into each other */
	font-variant-numeric: tabular-nums;
}

.aoc-longform .entry-content .aoc-sizechart thead th {
	background: var(--aoc-cream);
	border-bottom: 1px solid var(--aoc-rule-strong);
	text-align: center;
	white-space: nowrap;
}

.aoc-longform .entry-content .aoc-sizechart thead th[rowspan] {
	text-align: left;
	vertical-align: bottom;
}

/* Garment dividers: Shirt, Trouser. */
.aoc-longform .entry-content .aoc-sizechart__group th {
	background: var(--aoc-ink);
	color: var(--aoc-white);
	font-family: var(--aoc-ui);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	padding: 0.7rem 0.75rem;
}

.aoc-longform .entry-content .aoc-sizechart tbody th[scope="row"] {
	font-family: var(--aoc-ui);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--aoc-ink);
	text-transform: none;
	white-space: nowrap;
}

.aoc-longform .entry-content .aoc-sizechart td {
	text-align: center;
	color: var(--aoc-ink-soft);
}

.aoc-longform .entry-content .aoc-sizechart__note {
	font-style: italic;
	text-align: center;
}

.aoc-sizechart figcaption {
	font-family: var(--aoc-ui);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--aoc-ink-soft);
	margin-top: 0.9rem;
	text-align: center;
}

/* ==========================================================================
   15. About

   The page opens with a two-column introduction, the founder's portrait
   beside the brand statement, then runs as single-column prose. It keeps the
   full container width so the opening still works, and the reading measure is
   applied to the text itself instead. Inside the 462px column that cap never
   bites; across the full-width sections below it does the work.
   ========================================================================== */

.aoc-about .entry-content h2,
.aoc-about .entry-content h3,
.aoc-about .entry-content p,
.aoc-about .entry-content ul,
.aoc-about .entry-content ol {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

/* The portrait is a photograph with its own background, not a cut-out, so no
   blending: multiply was left over from the transparent version and tinted
   the whole picture against the cream page. It fills its column instead of
   floating at 430px inside 590. */
.aoc-about .entry-content .wp-block-uagb-image,
.aoc-about .entry-content .wp-block-uagb-image__figure {
	width: 100%;
	max-width: 100%;
}

.aoc-about .entry-content .wp-block-uagb-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* The five promises read as a list, so let them look like one. */
.aoc-about .entry-content ul li strong {
	display: block;
	font-family: var(--aoc-ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-ink);
	margin-bottom: 0.15rem;
}

.aoc-about .entry-content ul li {
	margin-bottom: 1.1rem;
}

@media (max-width: 921px) {
	/* Portrait above the words rather than beside them. */
	.aoc-about .entry-content .uagb-block-6702ae20 > .uagb-container-inner-blocks-wrap {
		flex-direction: column !important;
	}

	.aoc-about .entry-content .uagb-block-c09b5596,
	.aoc-about .entry-content .uagb-block-64b599c0 {
		width: 100% !important;
		max-width: 100% !important;
	}

	.aoc-about .entry-content .wp-block-uagb-image img {
		max-width: 20rem;
		margin-inline: auto;
	}
}

/* ==========================================================================
   16. Contact map

   A plain iframe against Google's /maps?output=embed endpoint. The Spectra
   map block renders an <embed> pointing at maps.google.com, which Google no
   longer serves, so it drew an empty frame whatever address it was given.
   ========================================================================== */

.aoc-map {
	margin: 0 0 var(--aoc-space-m);
}

.aoc-map iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 1px solid var(--aoc-rule);
	/* The default map is brighter than the rest of the page; this settles it
	   into the warm palette without making the labels hard to read. */
	filter: grayscale(0.35) contrast(0.94) sepia(0.08);
}

.aoc-map figcaption {
	font-family: var(--aoc-ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-ink-soft);
	margin-top: 0.85rem;
}

@media (max-width: 767px) {
	.aoc-map iframe { height: 260px; }
}

/* ==========================================================================
   17. Social links

   Replaces Spectra's Social Share block, which shared the current page
   instead of linking to the profiles, and rendered spans rather than
   anchors. These are real links, so they open, copy and read correctly.
   ========================================================================== */

.aoc-social {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 var(--aoc-space-s);
	padding: 0;
}

.aoc-social li { margin: 0; }

.aoc-social a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--aoc-rule-strong);
	border-radius: 50%;
	color: var(--aoc-ink);
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.aoc-social a:hover,
.aoc-social a:focus-visible {
	background: var(--aoc-ink);
	border-color: var(--aoc-ink);
	color: var(--aoc-white);
}

.aoc-social svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Two shapes read better filled than stroked at this size. */
.aoc-social .aoc-social__dot,
.aoc-social .aoc-social__fill {
	fill: currentColor;
	stroke: none;
}

/* The label stays for screen readers without showing on the page. */
.aoc-social a > span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Spectra sets its own width on these wrappers, at a specificity the grouped
   measure rule above does not beat, so the section heads stayed full width
   while the prose was centred. */
body.aoc-prose .entry-content > .wp-block-uagb-advanced-heading,
body.aoc-prose .entry-content > .wp-block-uagb-info-box,
body.aoc-about .entry-content > .wp-block-uagb-advanced-heading {
	max-width: 44rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ==========================================================================
   18. Long-form: two-column reading layout

   These documents run long: the privacy policy is over six thousand pixels
   tall. A single centred column leaves the page feeling endless and wastes
   the width. Above the tablet breakpoint the contents list becomes a sticky
   rail beside the text, so a reader can move between sections without
   scrolling the whole thing, and the page uses its width for something.
   ========================================================================== */

@media (min-width: 1024px) {
	.aoc-prose .entry-content {
		display: grid;
		grid-template-columns: 14rem minmax(0, 44rem);
		column-gap: 4.5rem;
		justify-content: center;
		align-items: start;
	}

	/* Everything that is not the contents list goes in the reading column. */
	.aoc-prose .entry-content > * {
		grid-column: 2;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.aoc-prose .entry-content > .aoc-toc {
		grid-column: 1;
		grid-row: 1 / 200;      /* span the document so sticky has room to travel */
		position: sticky;
		top: 6rem;
		align-self: start;
		background: none;
		padding: 0;
		margin: 0;
		border-right: 1px solid var(--aoc-rule);
		padding-right: 1.75rem;
	}

	.aoc-toc ol {
		columns: 1;
	}

	.aoc-toc li {
		font-size: 0.8125rem !important;
		line-height: 1.45 !important;
		margin-bottom: 0.85rem !important;
	}

	/* The first heading should align with the top of the rail, not sit below
	   the space a band used to occupy. */
	.aoc-prose .entry-content > *:first-of-type {
		margin-top: 0 !important;
	}

	/* Spectra's heading wrappers size to their text and centre themselves in
	   the grid cell, so section heads floated mid-column while the prose ran
	   flush left. Make them fill the reading column like everything else. */
	.aoc-prose .entry-content > .wp-block-uagb-advanced-heading,
	.aoc-prose .entry-content > .wp-block-uagb-info-box {
		justify-self: stretch;
		width: 100%;
	}
}

/* ==========================================================================
   19. One page surface

   The page was stacking four tones: Astra painted the body #F2EBE3 from its
   own palette, my rule painted the container #FAF7F2, Astra then painted the
   post article pure white on top of that, and the content block went back to
   #FAF7F2 inside it. Four grounds, none of them deliberate.

   There is one ground now. The only surfaces that differ are the ones meant
   to: the announcement bar, the contents band, and the footer.
   ========================================================================== */

html,
body,
body.woocommerce {
	background-color: var(--aoc-ivory) !important;
}

/* Astra's separate-container layout paints the article as a white card. On a
   warm ground that reads as a sheet of paper dropped on the page. */
.ast-container,
.site-content,
.content-area,
.site-main,
.ast-article-single,
.ast-article-post,
article.page,
article.post,
.entry-content,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container #primary {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Kept deliberately distinct. */
.ast-above-header,
.ast-above-header-wrap {
	background-color: var(--aoc-cream) !important;
}

.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap {
	background-color: var(--aoc-ink) !important;
}

/* ==========================================================================
   20. Footer

   Three problems. The colour was the same near-black as body text, which on
   a warm cream page lands as a slab rather than a close. The grid gave four
   equal 199px columns, so a 170px logo filled one entirely while the link
   lists had room to spare. And the social icons filled with
   --ast-global-color-0 on hover, which maps to the footer's own background:
   the icon did not dim, it disappeared.
   ========================================================================== */

.site-footer,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap {
	/* The above row defaults to Astra's #EEEEEE. Without it here the
	   newsletter band rendered as light text on a light grey ground. */
	background-color: var(--aoc-footer) !important;
}

.site-footer {
	border-top: 1px solid var(--aoc-cream);
}

.site-primary-footer-wrap {
	padding-block: 5.5rem 3.5rem !important;
}

/* The brand column earns more room than a link list. */
@media (min-width: 922px) {
	.site-primary-footer-wrap .ast-builder-grid-row-4-equal {
		grid-template-columns: 1.5fr 1fr 1fr 1.15fr !important;
		gap: 3.5rem !important;
	}
}

.site-footer .site-footer-section {
	align-content: start;
}

/* Column headings, matched to the labels used elsewhere on the site. */
.site-footer h2,
.site-footer h3,
.site-footer .widget-title,
.site-footer .ast-builder-menu-mobile .menu-item > a {
	font-family: var(--aoc-ui) !important;
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase !important;
	color: var(--aoc-cream) !important;
	margin-bottom: 1.5rem !important;
}

.site-footer a,
.site-footer p,
.site-footer li {
	font-family: var(--aoc-ui);
	font-size: 0.875rem;
	line-height: 2.1;
	color: var(--aoc-cream);
}

.site-footer a {
	text-decoration: none;
	opacity: 0.78;
	transition: opacity .2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

/* The hover bug: filling with global-color-0 painted the icon in the
   footer's own colour. They lift instead. */
.site-footer .ast-builder-social-element,
.site-footer .ast-builder-social-element svg {
	fill: var(--aoc-cream) !important;
	color: var(--aoc-cream) !important;
	opacity: 0.78;
	transition: opacity .2s ease, transform .2s ease;
}

.site-footer .ast-builder-social-element:hover,
.site-footer .ast-builder-social-element:hover svg,
.site-footer .ast-builder-social-element:focus-visible,
.site-footer .ast-builder-social-element:focus-visible svg {
	fill: var(--aoc-white) !important;
	color: var(--aoc-white) !important;
	opacity: 1;
}

.site-footer .ast-builder-social-element:hover {
	transform: translateY(-2px);
}

/* The bottom bar carries one line in the middle of three sections, two of
   them empty. Let it centre on its own terms. */
.site-below-footer-wrap {
	/* No rule above the copyright: the footer is one block, and a divider
	   inside it only cuts it in half. */
	padding-block: 1.75rem !important;
}

.site-below-footer-wrap .site-footer-section:empty {
	display: none;
}

.site-below-footer-wrap p {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	opacity: 0.6;
	margin: 0;
}

@media (max-width: 921px) {
	.site-primary-footer-wrap { padding-block: 3.5rem 2.5rem !important; }
	.site-footer .site-footer-section { margin-bottom: 2.25rem; }
}

/* ==========================================================================
   21. Shop archive and single product

   The archive ran a left sidebar with a category list, a price slider and a
   stock filter, for five products at two price points. That is gone at the
   theme level; what is left here is the WooCommerce furniture around the
   grid, which still announces itself more loudly than the garments.
   ========================================================================== */

.woocommerce .woocommerce-result-count {
	font-family: var(--aoc-ui);
	font-size: 0.75rem;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-muted);
	margin-bottom: 0;
}

/* The sorting control is a browser select dropped into an editorial page.
   Strip it back to a quiet line of type. */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	font-family: var(--aoc-ui);
	font-size: 0.75rem;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--aoc-line);
	border-radius: 0;
	padding: 0.4rem 1.5rem 0.4rem 0;
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:focus-visible {
	outline: 1px solid var(--aoc-ink);
	outline-offset: 3px;
}

/* Archive header: give the row air and sit it on a hairline. */
.woocommerce .products ~ * ,
.woocommerce-notices-wrapper + .woocommerce-result-count {
	margin-top: 0;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	padding-bottom: 1.25rem;
}

/* The Click to Chat button on a product page arrives in WhatsApp green,
   which is the one saturated colour on an otherwise warm neutral page. */
.woocommerce div.product .summary .ht-ctc-chat,
.woocommerce div.product form.cart .ht-ctc-chat,
.woocommerce div.product .entry-summary .ht-ctc-chat {
	background: transparent !important;
	border: 1px solid var(--aoc-ink) !important;
	color: var(--aoc-ink) !important;
	border-radius: 0 !important;
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-label) !important;
	letter-spacing: var(--aoc-track-btn) !important;
	text-transform: uppercase;
	transition: background-color .25s ease, color .25s ease;
}

.woocommerce div.product .summary .ht-ctc-chat:hover,
.woocommerce div.product form.cart .ht-ctc-chat:hover,
.woocommerce div.product .entry-summary .ht-ctc-chat:hover {
	background: var(--aoc-ink) !important;
	color: var(--aoc-white) !important;
}

/* The plugin paints the glyph light grey inline, which disappeared once the
   button stopped being solid green. Scoped to the summary: the floating
   launcher in the corner keeps its own green circle, which is what makes it
   recognisable at a glance. */
.woocommerce div.product .summary .ht-ctc-chat svg,
.woocommerce div.product .summary .ht-ctc-chat svg *,
.woocommerce div.product form.cart .ht-ctc-chat svg,
.woocommerce div.product form.cart .ht-ctc-chat svg * {
	fill: currentColor !important;
	color: inherit !important;
}

/* Product meta is WooCommerce furniture: SKU, category and a tag list that
   repeats the title. Quiet it rather than remove it, since the tags carry
   some search value. */
.woocommerce div.product .product_meta {
	font-size: 0.75rem;
	color: var(--aoc-muted);
	border-top: 1px solid var(--aoc-line);
	padding-top: 1.25rem;
	margin-top: 1.75rem;
}

.woocommerce div.product .product_meta a {
	color: var(--aoc-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--aoc-line);
}

.woocommerce div.product .product_meta a:hover {
	color: var(--aoc-ink);
}

/* ==========================================================================
   22. WooCommerce archives: the surfaces the page fix missed

   Collapsing the page to one ground covered posts and pages but not the shop
   archives, which have wrappers of their own: a grey #EEEEEE banner behind
   the category title and a white #FFFFFF content card. So a category page
   still stacked cream, grey, white and cream.
   ========================================================================== */

.ast-woocommerce-container,
.ast-archive-entry-banner,
.ast-archive-description,
.woocommerce-products-header,
.ast-separate-container .ast-woocommerce-container,
body.archive .site-content > .ast-container,
body.woocommerce .site-content > .ast-container {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* The banner is a band of dead height around one line of type. */
.ast-archive-entry-banner {
	padding-block: var(--aoc-space-m) var(--aoc-space-s) !important;
	min-height: 0 !important;
}

.ast-archive-entry-banner .ast-container {
	padding-inline: 0 !important;
}

/* ==========================================================================
   23. Archive toolbar, at a readable size

   The count and the sort control were set as wide-tracked caps, which at
   100% reads as shouting across the top of the grid. The reference stores
   keep this line small and quiet: it is chrome, not a heading.
   ========================================================================== */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	font-size: 0.8125rem !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
}

.woocommerce .woocommerce-result-count {
	color: var(--aoc-muted) !important;
}

.woocommerce .woocommerce-ordering select {
	color: var(--aoc-ink-soft) !important;
	padding-bottom: 0.3rem !important;
}

/* The category title carried the same clamp as a page hero, which on an
   archive competes with the garments it is introducing. */
.ast-archive-entry-banner .ast-archive-title,
.ast-archive-entry-banner h1 {
	font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
	letter-spacing: 0.1em !important;
	margin: 0 !important;
}

/* ==========================================================================
   24. Footer, direction 1A "Signature"

   From the design project. The structural move is folding the newsletter
   into the footer: it used to sit above on the light ground, so every page
   ended twice. It is now the footer's own top band, above a rule.
   ========================================================================== */

/* --- the newsletter band --- */

.aoc-fnews {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4rem;
	padding-block: 1rem 3rem;
	border-bottom: 1px solid rgba(242, 235, 227, 0.14);
}

.aoc-fnews__say { max-width: 32rem; }

.aoc-fnews__head {
	font-family: var(--aoc-display) !important;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.15 !important;
	color: #F1EAE1 !important;
	margin: 0 0 0.75rem !important;
	text-transform: none !important;
}

.aoc-fnews__sub {
	font-size: 0.8125rem !important;
	line-height: 1.7 !important;
	color: rgba(242, 235, 227, 0.68) !important;
	margin: 0 !important;
}

.aoc-fnews__form { min-width: 20rem; }

/* The signup form arrives from the plugin on a light ground. */
.aoc-fnews__form .srfm-input-common,
.aoc-fnews__form input[type="email"],
.aoc-fnews__form input[type="text"] {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(242, 235, 227, 0.35) !important;
	border-radius: 0 !important;
	color: #F1EAE1 !important;
	padding: 0 0 0.75rem !important;
	font-size: 0.9375rem !important;
}

.aoc-fnews__form input::placeholder { color: rgba(242, 235, 227, 0.45) !important; }

.aoc-fnews__form .srfm-button,
.aoc-fnews__form button {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--aoc-tan) !important;
	border-radius: 0 !important;
	color: #F1EAE1 !important;
	padding: 0 0 0.75rem !important;
	transition: color .2s ease;
}

.aoc-fnews__form .srfm-button:hover { color: var(--aoc-tan) !important; }
.aoc-fnews__form .srfm-label, .aoc-fnews__form .srfm-description { display: none !important; }

/* --- brand column --- */

.aoc-fbrand__line {
	font-size: 0.8125rem !important;
	line-height: 1.8 !important;
	color: rgba(242, 235, 227, 0.7) !important;
	max-width: 17rem;
	margin: 1.5rem 0 0 !important;
}

/* --- column labels take the tan accent --- */

.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
	color: var(--aoc-tan) !important;
}

.site-footer a:hover { color: var(--aoc-tan) !important; }

/* --- bottom bar --- */

.aoc-fmeta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.75rem;
}

.aoc-fmeta a,
.aoc-fmeta__sign {
	font-size: 0.6875rem !important;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
}

.aoc-fmeta__sign { color: rgba(242, 235, 227, 0.6); }

.aoc-fmeta__rule {
	width: 1px;
	height: 12px;
	background: rgba(242, 235, 227, 0.25);
}

@media (max-width: 921px) {
	.aoc-fnews {
		flex-direction: column;
		align-items: stretch;
		gap: 2rem;
		padding-bottom: 2.5rem;
	}
	.aoc-fnews__form { min-width: 0; }
	.aoc-fmeta { justify-content: flex-start; flex-wrap: wrap; gap: 1.25rem; }
	/* 11px type on a 1.0 line height gives an 11px tap target. */
	.aoc-fmeta a { padding-block: 1rem; }
}

/* Astra applies its footer label typography to everything inside an HTML
   widget, so the newsletter sub-line and the brand strapline came out
   uppercase and tracked like column headings. They are sentences. */
.site-footer .aoc-fnews__sub,
.site-footer .aoc-fbrand__line,
.site-footer .aoc-fnews__head {
	text-transform: none !important;
}

.site-footer .aoc-fnews__sub,
.site-footer .aoc-fbrand__line {
	letter-spacing: 0.01em !important;
	font-size: 0.8125rem !important;
}

/* The sign-off rides with the copyright, since Astra renders the copyright
   component in that row but leaves a spare HTML slot empty. */
.aoc-fbottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
}

.aoc-fbottom__c {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: rgba(242, 235, 227, 0.6);
}

.ast-footer-copyright,
.ast-footer-copyright p {
	width: 100%;
	margin: 0 !important;
	text-align: left !important;
}

@media (max-width: 921px) {
	.aoc-fbottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}

/* SureForms ships its container on white, which on the footer's dark ground
   drew a white card around the signup. */
.site-footer .srfm-form-container,
.site-footer .srfm-form-container *,
.aoc-fnews__form .srfm-form-container {
	background: transparent !important;
	box-shadow: none !important;
	border-color: rgba(242, 235, 227, 0.35) !important;
}

.site-footer .srfm-form-container { padding: 0 !important; }

.site-footer .srfm-input-common,
.site-footer input[type="email"] {
	color: #F1EAE1 !important;
}

.site-footer .srfm-submit-richtext,
.site-footer .srfm-button span { color: inherit !important; }

/* ==========================================================================
   25. Archive spacing

   129px sat between the category title and the toolbar, from three paddings
   stacked with nothing between them: 24px under the banner, 60px of content
   area margin, then 45px of WooCommerce container padding. None of them knew
   about the others. Measured, not guessed.
   ========================================================================== */

body.archive .content-area,
body.woocommerce-page .content-area,
body.post-type-archive-product .content-area {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

body.archive .ast-woocommerce-container,
body.woocommerce-page .ast-woocommerce-container {
	padding-top: var(--aoc-space-s) !important;
	padding-bottom: var(--aoc-space-l) !important;
}

.ast-archive-entry-banner {
	padding-block: var(--aoc-space-m) var(--aoc-space-xs) !important;
}

/* The toolbar sits closer to the grid it labels. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	padding-bottom: 0.75rem !important;
	margin-bottom: 1.25rem !important;
}

/* The footer Shop column is two links now, so the column no longer needs to
   reserve the height of seven. */
.site-footer .menu-item { margin-bottom: 0 !important; }

/* ==========================================================================
   26. Single product

   The page was WooCommerce's default shape: gallery floated left, summary
   floated right, thumbnails in a strip underneath, and a main image 794px
   tall in a 768px viewport, so one photograph was taller than the screen and
   the summary scrolled away behind it.

   Floats become a flex row so the summary can stay with the reader, the
   thumbnails move to a column beside the image, and the image is capped to
   the viewport. FlexSlider sizes its own track, so nothing here touches the
   slider's widths — only the rendered image's height.
   ========================================================================== */

@media (min-width: 922px) {
	/* The flex row is the wrapper, not the whole product, so the sticky
	   summary cannot travel down over the tabs. */
	.woocommerce div.product .aoc-product-top {
		display: flex;
		align-items: flex-start;
		gap: 4rem;
	}

	.woocommerce div.product .woocommerce-product-gallery {
		float: none !important;
		width: 56% !important;
		margin: 0 !important;
		display: flex;
		flex-direction: row-reverse;   /* image right, thumbnails left */
		gap: 1rem;
		align-items: flex-start;
	}

	.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
		flex: 1 1 auto;
		min-width: 0;
	}

	.woocommerce div.product .summary {
		float: none !important;
		width: calc(44% - 4rem) !important;
		margin: 0 !important;
	}

	/* The gallery is the shorter column, so it is the one that sticks. With
	   the summary pinned instead, the image scrolled away and left the left
	   half of the page empty for the rest of the panel.

	   Astra's grid stylesheet sets the gallery to position: relative with a
	   longer selector, which won. The top offset below then applied to a
	   relative box, so every gallery sat 104px lower than the text beside it
	   and never stuck; on a product with a short summary it ran down into
	   the tabs. */
	.woocommerce div.product .woocommerce-product-gallery {
		position: sticky !important;
		top: 6.5rem;
		align-self: flex-start;
	}

}

/* Thumbnails: a column of frames rather than a strip of squares. */
.woocommerce div.product .flex-control-thumbs {
	display: flex !important;
	flex-direction: column;
	gap: 0.65rem;
	width: 4.75rem;
	flex: 0 0 4.75rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs li {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	opacity: 0.5;
	border: 1px solid transparent;
	transition: opacity .2s ease, border-color .2s ease;
	cursor: pointer;
}

.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--aoc-ink);
}

/* A garment photograph should not be taller than the screen it is viewed on. */
.woocommerce div.product .woocommerce-product-gallery__image img {
	max-height: 74vh;
	width: auto !important;
	max-width: 100%;
	margin-inline: auto;
	display: block;
}

/* The zoom trigger sat over the top-left corner of the photograph. */
.woocommerce div.product .woocommerce-product-gallery__trigger {
	top: 1rem;
	right: 1rem;
	left: auto;
}

@media (max-width: 921px) {
	.woocommerce div.product .flex-control-thumbs {
		flex-direction: row;
		width: 100%;
		flex: 1 1 100%;
		margin-top: 0.85rem !important;
	}
	.woocommerce div.product .flex-control-thumbs li { width: 4.5rem !important; }
	.woocommerce div.product .woocommerce-product-gallery__image img { max-height: 60vh; }
}

/* The bottom bar ran into the sides of the window while the columns above
   were inset. Both rows carry zero padding themselves; the difference came
   from their wrappers, 40px on the primary against 32px below. Pinning both
   wrappers to one value makes the alignment true by construction rather than
   by a number that happens to match at one width. */
.site-primary-footer-wrap,
.site-below-footer-wrap,
.site-above-footer-wrap {
	padding-inline: 40px !important;
}

.site-below-footer-wrap .site-footer-section {
	padding-inline: 0 !important;
}

@media (max-width: 921px) {
	.site-primary-footer-wrap,
	.site-below-footer-wrap,
	.site-above-footer-wrap {
		padding-inline: 20px !important;
	}
}

/* ==========================================================================
   27. Home page sections

   The page ran hero, one product row, trust icons. The reference stores fill
   that space with collection after collection, which five garments in one
   category cannot do without showing the same pieces three times. These two
   sections go for depth instead: the made-to-measure process, which is the
   real difference and needs no photography, and the atelier.
   ========================================================================== */

.aoc-process,
.aoc-atelier {
	padding-inline: max(40px, calc((100% - 1200px) / 2));
}

/* --- made to measure --- */

/* 11rem above and below each of these left the page with more empty cream
   than content. */
.aoc-process {
	padding-block: 6rem;
	background: var(--aoc-cream);
	text-align: center;
}

.aoc-process__label,
.aoc-atelier__label {
	font-family: var(--aoc-ui) !important;
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase;
	color: var(--aoc-muted) !important;
	margin: 0 0 1.25rem !important;
}

.aoc-process__head {
	font-size: clamp(1.75rem, 3.4vw, 3rem) !important;
	letter-spacing: 0.06em !important;
	margin: 0 auto var(--aoc-space-m) !important;
	max-width: 22ch;
}

.aoc-process__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.5rem;
	list-style: none;
	margin: 0 0 var(--aoc-space-m);
	padding: 0;
	text-align: left;
}

.aoc-process__steps li { margin: 0; }

.aoc-process__n {
	display: block;
	font-family: var(--aoc-display);
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	color: var(--aoc-muted);
	padding-bottom: 1rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--aoc-rule-strong, var(--aoc-line));
}

.aoc-process__steps h3 {
	font-family: var(--aoc-ui) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase !important;
	color: var(--aoc-ink) !important;
	margin: 0 0 0.75rem !important;
}

.aoc-process__steps p {
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--aoc-ink-soft);
	margin: 0;
}

.aoc-process__foot { margin: 0 !important; }

.aoc-process__foot a,
.aoc-atelier__more a {
	font-family: var(--aoc-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--aoc-ink);
	padding-bottom: 0.4rem;
	transition: opacity .2s ease;
}

.aoc-process__foot a:hover,
.aoc-atelier__more a:hover { opacity: 0.6; }

/* --- the atelier --- */

.aoc-atelier {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
	gap: 4.5rem;
	align-items: center;
	padding-block: 6rem;
}

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

.aoc-atelier__say h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.75rem) !important;
	letter-spacing: 0.06em !important;
	margin: 0 0 1.5rem !important;
	max-width: 18ch;
}

.aoc-atelier__say p {
	font-size: 1rem;
	line-height: 1.9;
	color: var(--aoc-ink-soft);
	max-width: 44ch;
	margin: 0 0 1.5rem;
}

.aoc-atelier__more { margin: 0.5rem 0 0 !important; }

@media (max-width: 921px) {
	.aoc-process { padding-block: 3.5rem; }
	.aoc-process__steps { grid-template-columns: 1fr; gap: 2.5rem; }
	.aoc-atelier {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding-block: 3.5rem;
	}
	.aoc-atelier__img img { aspect-ratio: 3 / 4; }
	.aoc-atelier__say h2, .aoc-atelier__say p { max-width: none; }
}

/* ==========================================================================
   28. Product title and price

   The title ran at 64px with 0.06em tracking, so a name like "Beige Pearl
   Chikankari Embroidered Lawn Kurta Set" took six lines and pushed the price
   and the buy button below the fold. A product name is a label, not a page
   heading. The price block follows the pattern the client asked for: the
   figure on its own line, the shipping promise quietly beneath it.
   ========================================================================== */

.woocommerce div.product .product_title,
.woocommerce div.product h1.entry-title {
	font-size: clamp(1.5rem, 2.4vw, 2.125rem) !important;
	line-height: 1.25 !important;
	letter-spacing: 0.04em !important;
	margin: 0 0 1.25rem !important;
	text-wrap: balance;
}

.woocommerce div.product .summary > .price,
.woocommerce div.product p.price {
	display: block;
	font-family: var(--aoc-ui) !important;
	font-size: 1.375rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
	color: var(--aoc-ink) !important;
	margin: 0 0 0.35rem !important;
}

.woocommerce div.product .price .woocommerce-Price-currencySymbol {
	font-size: 0.8em;
	margin-right: 0.15em;
}

/* Astra prints the shipping note inline after the figure. It belongs on its
   own line underneath, the way the reference store does it. */
.woocommerce div.product .ast-shipping-text {
	display: block;
	font-size: 0.8125rem !important;
	letter-spacing: 0.02em !important;
	color: var(--aoc-muted) !important;
	margin-top: 0.35rem;
}

/* The short description sits between the price and the options. */
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--aoc-ink-soft);
	margin: 1.5rem 0 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--aoc-line);
}

/* ==========================================================================
   29. Product page: tighten the buy panel

   Still reading heavy and dated. Three causes, measured:

   1. The title used the display serif while the product cards on the archive
      use the sans. Two names for the same garment in two different faces. On
      a long name like "Beige Pearl Chikankari Embroidered Lawn Kurta Set",
      uppercase Italiana with wide tracking reads decorative rather than
      functional. A product name is a label; it matches the cards now.
   2. The variation labels ran at 15px on their own lines above the choices,
      so Size, Piece and Fabric took 336px between them.
   3. The choices themselves were full-size bordered buttons at body scale.
   ========================================================================== */

.woocommerce div.product .product_title,
.woocommerce div.product h1.entry-title {
	font-family: var(--aoc-ui) !important;
	font-size: 1.375rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	margin: 0 0 1rem !important;
}

/* Price leads the panel now that the name is a label. */
.woocommerce div.product .summary > .price,
.woocommerce div.product p.price {
	font-size: 1.625rem !important;
	margin-bottom: 0.3rem !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 0.875rem;
	line-height: 1.75;
	margin: 1.25rem 0 1.5rem;
	padding-top: 1.25rem;
}

/* --- variations --- */

.woocommerce div.product .variations {
	margin: 0 0 1.25rem !important;
	border: 0;
}

.woocommerce div.product .variations tr,
.woocommerce div.product .variations td,
.woocommerce div.product .variations th {
	display: block;
	padding: 0 !important;
	border: 0 !important;
}

.woocommerce div.product .variations tr + tr { margin-top: 1.1rem; }

.woocommerce div.product .variations .label,
.woocommerce div.product .variations th label {
	font-family: var(--aoc-ui) !important;
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase !important;
	color: var(--aoc-muted) !important;
	margin: 0 0 0.55rem !important;
	display: block;
}

/* The chosen value is printed beside the label; keep it quiet. */
.woocommerce div.product .variations .label .variation-selected-value,
.woocommerce div.product .variations .label span {
	color: var(--aoc-ink);
	letter-spacing: 0.06em;
}

.woocommerce div.product .reset_variations {
	font-size: 0.6875rem !important;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-muted) !important;
}

/* --- buy row --- */

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

.woocommerce div.product .quantity input.qty {
	height: 3rem;
	width: 4rem;
	border: 1px solid var(--aoc-line);
	border-radius: 0;
	font-family: var(--aoc-ui);
	font-size: 0.875rem;
	text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	height: 3rem;
	padding-inline: 2.5em !important;
}

.woocommerce div.product .stock {
	font-size: 0.75rem !important;
	letter-spacing: 0.04em;
	color: var(--aoc-muted) !important;
}

/* The bottom bar looked darker than the rest of the footer. All three rows
   are the same colour; the band came from inside — Astra's copyright
   component and its layout wrapper each paint #241F1B, the old ink, over the
   row's ground. */
.site-footer .ast-builder-layout-element,
.site-footer .ast-footer-copyright,
.site-below-footer-wrap .ast-builder-layout-element,
.site-below-footer-wrap .ast-footer-copyright {
	background-color: transparent !important;
}

/* Swatches. The plugin is Variation Swatches for WooCommerce, which renders
   cfvsw-* elements and hides the real select; an earlier attempt styled
   .variable-item and matched nothing. Its own default sets the swatch text at
   24px, which is why the choices read as oversized buttons. */
.woocommerce div.product .cfvsw-swatches-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem !important;
}

.woocommerce div.product .cfvsw-swatches-option {
	min-width: 2.5rem !important;
	height: 2.25rem !important;
	padding: 0 0.7rem !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--aoc-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	transition: border-color .2s ease, background-color .2s ease;
}

.woocommerce div.product .cfvsw-swatches-option .cfvsw-swatch-inner {
	font-family: var(--aoc-ui) !important;
	font-size: 0.75rem !important;
	line-height: 1 !important;
	letter-spacing: 0.06em !important;
	color: var(--aoc-ink-soft) !important;
	padding: 0 !important;
	white-space: nowrap;
}

.woocommerce div.product .cfvsw-swatches-option:hover {
	border-color: var(--aoc-ink) !important;
}

.woocommerce div.product .cfvsw-swatches-option.cfvsw-selected-swatch {
	background: var(--aoc-ink) !important;
	border-color: var(--aoc-ink) !important;
}

.woocommerce div.product .cfvsw-selected-swatch .cfvsw-swatch-inner {
	color: var(--aoc-white) !important;
}

/* The chosen value printed beside the attribute name. */
.woocommerce div.product .cfvsw-selected-label {
	font-size: 0.6875rem !important;
	letter-spacing: 0.06em !important;
	color: var(--aoc-ink) !important;
	margin-left: 0.5rem;
	text-transform: none;
}

/* Astra draws its own 1px rule on the bottom row and on the copyright
   component inside it, in a colour that belongs to neither palette. Removing
   mine left those behind. */
.site-below-footer-wrap,
.site-below-footer-wrap .ast-builder-layout-element,
.site-below-footer-wrap .ast-footer-copyright,
.site-footer .ast-footer-copyright {
	border-top: 0 !important;
	border-bottom: 0 !important;
}

/* ==========================================================================
   30. The buy row

   The WhatsApp button is Click to Chat's style 8, whose colour, radius and
   height live in inline styles on an inner span, so earlier rules aimed at
   the outer element changed nothing. These have to beat inline, which is
   what !important is actually for.
   ========================================================================== */

/* Direct child only: the button holds an icon span and a text span, and a
   descendant selector gave each of them its own border and split the button
   into two boxes with the label wrapping. */
.woocommerce div.product .ht-ctc-style-8 > span {
	background: transparent !important;
	border: 1px solid var(--aoc-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--aoc-ink) !important;
	height: 3rem !important;
	line-height: 3rem !important;
	padding: 0 1.75rem !important;
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-label) !important;
	letter-spacing: var(--aoc-track-btn) !important;
	text-transform: uppercase !important;
	transition: background-color .25s ease, color .25s ease;
}

.woocommerce div.product .ht-ctc-style-8 > span:hover {
	background: var(--aoc-ink) !important;
	color: var(--aoc-white) !important;
}

.woocommerce div.product .ht-ctc-style-8 svg,
.woocommerce div.product .ht-ctc-style-8 svg * {
	fill: currentColor !important;
	width: 1.05rem !important;
	height: 1.05rem !important;
}

/* Quantity: it arrived white on a cream page, the only white box on it. */
.woocommerce div.product .quantity input.qty {
	background: transparent !important;
	color: var(--aoc-ink) !important;
	height: 3rem;
}

/* Add to cart while no size is chosen. WooCommerce greys it out, which on
   this palette reads as broken rather than as waiting. */
.woocommerce div.product .single_add_to_cart_button.disabled,
.woocommerce div.product .single_add_to_cart_button:disabled {
	background: transparent !important;
	border: 1px solid var(--aoc-line) !important;
	color: var(--aoc-muted) !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

.woocommerce div.product .ht-ctc-style-8 {
	display: block;
	margin-top: 0.75rem;
}

.woocommerce div.product .ht-ctc-style-8 > span {
	width: auto;
	white-space: nowrap;
	gap: 0.6rem;
}

/* The inner icon and label are blocks at a fixed width by default. */
.woocommerce div.product .ht-ctc-style-8 .s_8_icon,
.woocommerce div.product .ht-ctc-style-8 .ht-ctc-s8-text {
	width: auto !important;
	height: auto !important;
	display: inline-flex !important;
	align-items: center;
	border: 0 !important;
	background: none !important;
	padding: 0 !important;
	line-height: 1 !important;
}

/* The label carries its own inline colour, white, chosen for the teal ground
   the button used to have. With the ground transparent it disappeared. */
.woocommerce div.product .ht-ctc-style-8 .ht-ctc-s8-text,
.woocommerce div.product .ht-ctc-style-8 .s8_span {
	color: var(--aoc-ink) !important;
}

.woocommerce div.product .ht-ctc-style-8 > span:hover .ht-ctc-s8-text,
.woocommerce div.product .ht-ctc-style-8 > span:hover .s8_span {
	color: var(--aoc-white) !important;
}

/* --- buy row: one width for both rows ---

   The grid belongs on the element that actually holds the quantity and the
   button. On a variable product that is .woocommerce-variation-add-to-cart,
   not the form: the form's own children are the attribute table and the
   variation wrapper, so gridding the form put the stock line, the quantity
   and both buttons inside one 4.5rem track. */

.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 0.75rem;
	align-items: stretch;
	max-width: 26rem;
	margin-bottom: 0 !important;
}

.woocommerce div.product form.cart {
	margin-bottom: 0.75rem !important;
}

.woocommerce div.product form.cart .quantity {
	margin: 0 !important;
	width: 100%;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	width: 100%;
	min-width: 0;
	margin: 0 !important;
}

/* WhatsApp is the second row of the same grid, across both tracks. */
.woocommerce div.product .ctc_chat.ctc_woo_place,
.woocommerce div.product form.cart > .ht-ctc-chat {
	grid-column: 1 / -1;
}

/* The variation panel is the full column, and its stock line reads as one
   sentence rather than a stack of fragments. */
.woocommerce div.product .single_variation_wrap {
	width: 100%;
}

.woocommerce div.product .woocommerce-variation-availability p {
	margin-bottom: 0.9rem;
}

/* The WhatsApp row spans the same 26rem, so the two rows line up. */
.woocommerce div.product .ht-ctc-style-8 {
	display: block;
	max-width: 26rem;
	margin-top: 0 !important;
}

.woocommerce div.product .ht-ctc-style-8 > span {
	width: 100% !important;
	box-sizing: border-box;
}

/* --- the quantity control --- */

.woocommerce div.product .quantity {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--aoc-line);
	background: transparent;
}

.woocommerce div.product .quantity input.qty {
	border: 0 !important;
	width: 100% !important;
	height: 3rem !important;
	padding: 0 !important;
	text-align: center;
	font-family: var(--aoc-ui);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	background: transparent !important;
	color: var(--aoc-ink) !important;
	appearance: textfield;
	-moz-appearance: textfield;
}

/* The browser's own spinners are the ugliest part of the control. */
.woocommerce div.product .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce div.product .quantity:focus-within {
	border-color: var(--aoc-ink);
}

/* ==========================================================================
   31. Trust row

   Two short promises sat in a row built for four, on a white band with 80px
   of padding around them, so the section read as unfinished. The band and
   the padding are fixed in the block attributes; this holds the two items to
   a sensible measure so they read as a pair rather than as two items in an
   empty grid.
   ========================================================================== */

/* Editing the block attributes was not enough: Spectra compiles its own
   stylesheet per page and kept serving the old white ground and 80px
   padding from cache. Both are set here instead, where they are visible in
   this file and cannot be regenerated away. */
.uagb-block-47723009 {
	background-color: transparent !important;
	padding-block: var(--aoc-space-m) var(--aoc-space-m) !important;
}

/* Grid rather than flex: Spectra writes a width onto its own two boxes, so
   flex-basis never equalised them against the hand-written third. Grid
   controls the tracks, and the items are told to fill them. */
.uagb-block-47723009 > .uagb-container-inner-blocks-wrap {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 3.5rem !important;
	max-width: 68rem;
	align-items: start;
}

/* Spectra's own boxes carry a width from the plugin, so flex-basis 0 alone
   left the hand-written third item wider than its two siblings. */
.uagb-block-47723009 .wp-block-uagb-info-box {
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
}

/* The third promise is hand-written HTML rather than a Spectra block, so it
   needs the parts the plugin would have styled: the icon colour and the
   heading treatment its own two siblings get. */
.aoc-promise .uagb-ifb-icon-wrap {
	color: var(--aoc-ink);
	margin-bottom: 0.65rem;
}

.aoc-promise .uagb-ifb-icon-wrap svg {
	width: 1.15rem;
	height: 1.15rem;
	display: block;
}

.aoc-promise .uagb-ifb-title {
	font-family: var(--aoc-ui) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--aoc-ink) !important;
	margin: 0 0 0.5rem !important;
}

.aoc-promise .uagb-ifb-desc {
	font-size: 0.875rem !important;
	line-height: 1.75 !important;
	color: var(--aoc-ink-soft) !important;
	margin: 0 !important;
	max-width: 30ch;
}

@media (max-width: 921px) {
	.uagb-block-47723009 > .uagb-container-inner-blocks-wrap {
		grid-template-columns: 1fr !important;
		gap: 2.25rem !important;
	}
	.uagb-block-47723009 .wp-block-uagb-info-box { max-width: none; }
}

/* The two trust icons render at body scale, larger than the labels they
   introduce. */
.uagb-block-47723009 .uagb-ifb-icon-wrap svg {
	width: 1.15rem !important;
	height: 1.15rem !important;
}

.uagb-block-47723009 .uagb-ifb-desc {
	font-size: 0.875rem !important;
	line-height: 1.75 !important;
	max-width: 30ch;
}

@media (max-width: 921px) {
	.uagb-block-47723009 > .uagb-container-inner-blocks-wrap {
		gap: 2.25rem !important;
	}
}

/* ==========================================================================
   32. Mobile: tap targets

   Measured on a 375px viewport. The search button rendered 18x28, the menu
   toggle 41x41 and the header logo link 40x22, all under the 44px a finger
   needs. The search icon in particular was close to unhittable.
   ========================================================================== */

@media (max-width: 921px) {
	.ast-header-search .slide-search,
	.ast-header-search .astra-search-icon,
	.ast-search-menu-icon .slide-search,
	.site-header .ast-search-menu-icon > a,
	.site-header .astra-search-icon {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.site-header .menu-toggle,
	.site-header .ast-mobile-menu-trigger-fill,
	.site-header .ast-mobile-menu-trigger-minimal {
		min-width: 44px !important;
		min-height: 44px !important;
	}

	/* The logo link was 40x22. The mark can stay its size; the target grows
	   around it. */
	.site-header .custom-logo-link,
	.site-header .site-branding a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* 92px was too greedy: it squeezed the header row until the cart total
	   wrapped onto two lines. The mark keeps its own size; only the tappable
	   area around it grows. */
	.site-header .custom-logo-link img {
		min-width: 72px;
	}

	/* The cart total is a price. It should never break mid-figure. */
	.site-header .ast-cart-menu-wrap,
	.site-header .ast-site-header-cart .ast-woo-header-cart-info-wrap,
	.site-header .ast-cart-total-label-wrap,
	.site-header .ast-woo-header-cart-info-wrap * {
		white-space: nowrap;
	}

	/* The floating chat button drew at 41px, under the 44px a finger needs.
	   The plugin sizes it through the icon, not the box, so the icon is what
	   has to grow. */
	#ht-ctc-chat {
		/* The plugin shrinks the whole button to 82% on phones, so a 50px
		   icon draws at 41. The scale goes, the size stands. */
		transform: none !important;
	}

	#ht-ctc-chat .ht_ctc_chat_style svg {
		width: 50px !important;
		height: 50px !important;
	}

	/* It is fixed to the bottom right corner, so the last field of a form
	   ends up underneath it. Give the long forms room to scroll past. */
	.woocommerce-checkout .site-content,
	.woocommerce-cart .site-content {
		padding-bottom: 4.5rem;
	}

	/* The one button the whole checkout exists for drew at 39px tall. */
	.woocommerce #place_order,
	.woocommerce .checkout-button,
	.woocommerce button.button.alt {
		min-height: 52px;
	}

	/* The newsletter submit was 24px. */
	.site-footer .srfm-submit-button,
	.site-footer button[type="submit"] {
		min-height: 46px;
	}

	/* Footer links are 21px of text stacked 21px apart, so the neighbour is
	   as easy to hit as the link. Each one takes its own row. */
	.site-footer .menu-item > a,
	.site-footer .footer-widget-area a,
	.site-footer .ast-builder-html-element a {
		display: inline-block;
		padding-block: 0.45rem;
	}

	/* Astra's on-card bag icon is a 30x32 target in the corner of every
	   product card. The box grows; the icon stays where it was. */
	.astra-shop-thumbnail-wrap .ast-on-card-button {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		top: 8px !important;
		right: 8px !important;
	}

	/* The hero call to action drew 37px tall. */
	.uagb-infobox-cta-link.wp-block-button__link,
	.entry-content .wp-block-button__link {
		min-height: 46px;
		display: inline-flex;
		align-items: center;
	}

	/* The only control that reorders the shop. */
	.woocommerce-ordering select.orderby {
		min-height: 44px;
	}

	/* Choosing size and fabric is the whole job of the product page, and the
	   swatches drew 40x36. */
	.woocommerce div.product .cfvsw-swatches-option {
		min-width: 44px !important;
		min-height: 44px !important;
		height: 44px !important;
	}

	.woocommerce div.product .woocommerce-product-gallery__trigger {
		width: 44px !important;
		height: 44px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	/* Each of these is the whole of its own paragraph, so it is a call to
	   action rather than a word inside a sentence. */
	.aoc-process__foot a,
	.aoc-atelier__more a {
		display: inline-block;
		padding-block: 0.55rem;
	}
}

/* ==========================================================================
   33. Collection lookbook

   The page ran three season names over the same five pieces: a hero of
   mismatched cut-outs, then two product grids that shuffled on every load,
   on three different grounds, with a button that linked to "#". It is now
   one collection. A header, each piece once in a row of its own with two
   photographs and what it is made of, then the promises.
   ========================================================================== */

.aoc-collection-head,
.aoc-page-head,
.aoc-lookbook,
.aoc-page-grid {
	padding-inline: max(40px, calc((100% - 1200px) / 2));
}

/* --- header --- */

/* Astra pads every group block 3em on all sides, ahead of this file, which
   pulled the header 75px left of the looks below it. */
.entry-content .aoc-collection-head,
.entry-content .aoc-page-head {
	margin: 0 !important;
	padding: 4.5rem max(40px, calc((100% - 1200px) / 2)) 0.5rem !important;
}

.aoc-collection-head__label,
.aoc-page-head__label,
.aoc-page-grid__label {
	font-family: var(--aoc-ui) !important;
	font-size: var(--aoc-t-label) !important;
	font-weight: 500 !important;
	letter-spacing: var(--aoc-track-label) !important;
	text-transform: uppercase;
	color: var(--aoc-muted) !important;
	margin: 0 0 1.25rem !important;
}

.aoc-collection-head__title,
.aoc-page-head__title {
	font-size: var(--aoc-t-h1) !important;
	margin: 0 0 1.25rem !important;
}

.aoc-collection-head__intro,
.aoc-page-head__intro {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--aoc-ink-soft);
	max-width: 46ch;
	margin: 0 !important;
}

/* --- the looks --- */

.aoc-lookbook {
	display: grid;
	gap: 6.5rem;
	padding-block: 3.5rem var(--aoc-space-l);
}

/* Two photographs and the text, in thirds. The images fill the height of the
   row between them, so there are no empty corners around a smaller second
   picture. Every other row mirrors. */
.aoc-look {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: center;
}

.aoc-look:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.aoc-look:nth-child(even) .aoc-look__media { order: 2; }

.aoc-look__media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.aoc-look__main,
.aoc-look__second {
	display: block;
	overflow: hidden;
	background: var(--aoc-cream);
}

.aoc-look__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: 50% 30%;
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.aoc-look__main:hover .aoc-look__img,
.aoc-look__second:hover .aoc-look__img {
	transform: scale(1.03);
}

/* --- text --- */

.aoc-look__index {
	font-family: var(--aoc-display);
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	color: var(--aoc-ink);
	margin: 0 0 1.5rem !important;
}

.aoc-look__index span { color: var(--aoc-muted); }

.aoc-look__name {
	font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
	line-height: 1.1 !important;
	margin: 0 0 0.6rem !important;
}

.aoc-look__name a {
	color: inherit;
	text-decoration: none;
}

.aoc-look__name a:hover { color: var(--aoc-muted); }

.aoc-look__kind {
	font-family: var(--aoc-ui);
	font-size: var(--aoc-t-label);
	font-weight: 500;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-muted);
	margin: 0 0 1.5rem !important;
}

.aoc-look__desc {
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--aoc-ink-soft);
	max-width: 40ch;
	margin: 0 0 1.75rem !important;
}

/* Label and value in two columns. No rules between them: spacing does the
   separating. */
.aoc-look__specs {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.6rem 1.75rem;
	margin: 0 0 1.75rem;
	padding: 0;
}

.aoc-look__specs > div { display: contents; }

.aoc-look__specs dt {
	font-family: var(--aoc-ui);
	font-size: var(--aoc-t-label);
	font-weight: 500;
	letter-spacing: var(--aoc-track-label);
	text-transform: uppercase;
	color: var(--aoc-muted);
	line-height: 1.9;
}

.aoc-look__specs dd {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--aoc-ink);
}

.aoc-look__price {
	font-family: var(--aoc-ui);
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	color: var(--aoc-ink);
	margin: 0 0 1.75rem !important;
}

.aoc-look__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 2.25rem;
	border: 1px solid var(--aoc-ink);
	font-family: var(--aoc-ui);
	font-size: var(--aoc-t-label);
	font-weight: 500;
	letter-spacing: var(--aoc-track-btn);
	text-transform: uppercase;
	color: var(--aoc-ink);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.aoc-look__cta:hover,
.aoc-look__cta:focus-visible {
	background: var(--aoc-ink);
	color: var(--aoc-ivory);
}

/* --- phones and small tablets --- */

@media (max-width: 921px) {
	.aoc-collection-head,
	.aoc-page-head,
	.aoc-lookbook,
	.aoc-page-grid {
		padding-inline: 20px;
	}

	.entry-content .aoc-collection-head,
	.entry-content .aoc-page-head { padding: 2.75rem 20px 0 !important; }

	.aoc-lookbook {
		gap: 4rem;
		padding-block: 2.25rem var(--aoc-space-m);
	}

	.aoc-look,
	.aoc-look:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.aoc-look:nth-child(even) .aoc-look__media { order: 0; }

	/* The two photographs become a strip you swipe, with the second one
	   showing at the edge so it is obvious there is more. */
	.aoc-look__media {
		display: flex;
		gap: 0.75rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: -20px;
		padding-inline: 20px;
		scroll-padding-inline: 20px;
	}

	.aoc-look__media::-webkit-scrollbar { display: none; }

	.aoc-look__main,
	.aoc-look__second {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	/* The text stack ran about 500px under each photograph. Tighter here,
	   where every look already costs a full screen of scrolling. */
	.aoc-look,
	.aoc-look:nth-child(even) { gap: 1.25rem; }
	.aoc-look__index { margin-bottom: 0.75rem !important; }
	.aoc-look__kind { margin-bottom: 1rem !important; }
	.aoc-look__desc { max-width: none; margin-bottom: 1.25rem !important; }
	.aoc-look__specs { gap: 0.35rem 1.5rem; margin-bottom: 1.25rem; }
	.aoc-look__price { margin-bottom: 1.25rem !important; }
}

/* On a tablet the swipe strip made each photograph 630px wide and 945px
   tall. From 600px up there is room for both side by side. */
@media (min-width: 600px) and (max-width: 921px) {
	.aoc-look__media {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* ==========================================================================
   34. New arrivals

   The page was the theme's starter template, untouched: a stock photograph
   of hangers, placeholder Latin under the title and under both promises,
   and a "60 days return" badge on a shop whose policy is 48 hours. It now
   opens on the latest piece in full, then the ones before it.
   ========================================================================== */

/* One look opens the page, and the grid follows closely behind it. */
.aoc-lookbook--single {
	padding-bottom: 5rem;
}

.aoc-page-grid {
	padding-bottom: var(--aoc-space-m);
}

/* A section label, not a heading in the display face. */
.aoc-page-grid__label {
	line-height: 1.6 !important;
	margin-bottom: 2rem !important;
}

.aoc-page-grid .woocommerce {
	margin: 0;
}

@media (max-width: 921px) {
	.aoc-lookbook--single { padding-bottom: 3rem; }
	.aoc-page-grid__label { margin-bottom: 1.5rem !important; }
}

/* ==========================================================================
   35. Home: motion and the product slider

   The page was entirely still. Three kinds of movement, each small:
   the hero photograph settles and its words arrive one after another, the
   sections below rise into place as they reach the screen, and The Edit is
   a row that moves on its own. Everything here switches off for anyone whose
   system asks for reduced motion, and nothing is hidden unless the script
   that reveals it has run.
   ========================================================================== */

:root {
	--aoc-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --- hero --- */

@media (prefers-reduced-motion: no-preference) {

	/* The photograph is a background on the container, so it cannot be scaled
	   without scaling the words on top of it. A copy on a pseudo-element can:
	   it inherits the image, size and position, whatever the breakpoint sets,
	   and sits under the content. ::before belongs to Spectra's overlay, so
	   this uses ::after. */
	.wp-block-uagb-container.uagb-block-c2c81d86 {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.wp-block-uagb-container.uagb-block-c2c81d86::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: inherit;
		background-size: inherit;
		background-position: inherit;
		background-repeat: no-repeat;
		transform-origin: 65% 40%;
		animation: aoc-hero-settle 7s var(--aoc-ease) both;
		pointer-events: none;
	}

	.uagb-block-971abf49 .uagb-ifb-title-prefix {
		animation: aoc-rise 1s var(--aoc-ease) 0.2s both;
	}

	.uagb-block-971abf49 .uagb-ifb-title {
		animation: aoc-focus 1.5s var(--aoc-ease) 0.35s both;
	}

	.uagb-block-971abf49 .uagb-ifb-desc {
		animation: aoc-rise 1s var(--aoc-ease) 0.75s both;
	}

	.uagb-block-971abf49 .uagb-ifb-button-wrapper {
		animation: aoc-rise 1s var(--aoc-ease) 0.95s both;
	}

	/* The button fills from the left on hover rather than switching colour. */
	.uagb-block-971abf49 .uagb-infobox-cta-link {
		background-image: linear-gradient(var(--aoc-ivory), var(--aoc-ivory)) !important;
		background-repeat: no-repeat !important;
		background-size: 0% 100% !important;
		transition: background-size .55s var(--aoc-ease), color .35s ease !important;
	}

	.uagb-block-971abf49 .uagb-infobox-cta-link:hover,
	.uagb-block-971abf49 .uagb-infobox-cta-link:focus-visible {
		background-size: 100% 100% !important;
		color: var(--aoc-ink) !important;
	}
}

@keyframes aoc-hero-settle {
	from { transform: scale(1.09); }
	to   { transform: scale(1); }
}

@keyframes aoc-rise {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: none; }
}

/* The title comes into focus rather than sliding: a blur is the one entrance
   that does not move a line of display type around the screen. */
@keyframes aoc-focus {
	from { opacity: 0; filter: blur(10px); transform: scale(1.02); }
	to   { opacity: 1; filter: none; transform: none; }
}

/* --- reveal on scroll --- */

.aoc-motion .aoc-reveal:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
}

.aoc-motion .aoc-reveal.is-in {
	transition:
		opacity 1s var(--aoc-ease) calc(var(--aoc-i, 0) * 110ms),
		transform 1s var(--aoc-ease) calc(var(--aoc-i, 0) * 110ms);
}


/* --- the slider --- */

.aoc-slider {
	position: relative;
	width: 100%;
	margin-top: 0.5rem;
}

.aoc-slider__track {
	position: relative;
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Room for the lift and shadow on hover, which overflow would clip. */
	padding-block: 0.75rem 1.5rem;
	margin-block: -0.75rem -1.5rem;
}

.aoc-slider__track::-webkit-scrollbar { display: none; }

.aoc-slide {
	flex: 0 0 calc((100% - 3 * 1.5rem) / 4);
	min-width: 0;
	scroll-snap-align: start;
}

.aoc-slider.is-static .aoc-slide[data-clone] { display: none; }

.aoc-slide__link {
	display: block;
	color: var(--aoc-ink) !important;
	text-decoration: none !important;
}

/* A cream mat around each photograph, like a print in a frame. Square, to
   match every other image and button on the site. */
.aoc-slide__frame {
	position: relative;
	display: block;
	padding: 0.5rem;
	background: var(--aoc-cream);
	border: 1px solid var(--aoc-line);
	transition: transform .6s var(--aoc-ease), box-shadow .6s var(--aoc-ease);
}

.aoc-slide__imgs {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--aoc-line);
}

.aoc-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .8s ease, transform 2.4s var(--aoc-ease);
}

.aoc-slide__img.is-active { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
	.aoc-slide__link:hover .aoc-slide__frame,
	.aoc-slide__link:focus-visible .aoc-slide__frame {
		transform: translateY(-6px);
		box-shadow: 0 22px 40px -26px rgba(36, 31, 27, 0.45);
	}

	.aoc-slide__link:hover .aoc-slide__img.is-active {
		transform: scale(1.04);
	}
}

/* Which photograph of how many, while they change. */
.aoc-slide__bars {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.25rem;
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.aoc-slide__link:hover .aoc-slide__bars,
.aoc-slide__link:focus-visible .aoc-slide__bars {
	opacity: 1;
}

.aoc-slide__bars i {
	position: relative;
	flex: 1;
	height: 2px;
	border-radius: 2px;
	overflow: hidden;
	background: rgba(250, 247, 242, 0.45);
}

.aoc-slide__bars i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--aoc-ivory);
	transform: scaleX(0);
	transform-origin: left center;
}

.aoc-slide__bars i.is-done::after { transform: scaleX(1); }

.aoc-slide__bars i.is-running::after {
	transform: scaleX(1);
	transition: transform 2s linear;
}

.aoc-slide__name {
	display: block;
	margin-top: 1.1rem;
	font-family: var(--aoc-ui);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

.aoc-slide__kind {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--aoc-muted);
}

.aoc-slide__price {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--aoc-ui);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--aoc-ink);
}

/* --- controls --- */

.aoc-slider__controls {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1.75rem;
}

/* Without the script the buttons would do nothing, so they wait for it. */
.aoc-slider:not(.is-ready) .aoc-slider__controls,
.aoc-slider.is-static .aoc-slider__controls {
	display: none;
}

/* Astra styles every button as a filled, padded block; these are round
   outlines, so each of those properties is set back. */
.aoc-slider .aoc-slider__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	padding: 0 !important;
	border: 1px solid var(--aoc-line) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--aoc-ink) !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.aoc-slider .aoc-slider__btn:hover,
.aoc-slider .aoc-slider__btn:focus-visible {
	background: var(--aoc-ink) !important;
	border-color: var(--aoc-ink) !important;
	color: var(--aoc-ivory) !important;
}

.aoc-slider__btn svg { display: block; }

.aoc-slider__play { display: none; }
.aoc-slider__btn--toggle[aria-pressed="true"] .aoc-slider__pause { display: none; }
.aoc-slider__btn--toggle[aria-pressed="true"] .aoc-slider__play { display: block; }

@media (max-width: 921px) {
	.aoc-slider__track { gap: 1rem; }
	.aoc-slide { flex-basis: calc((100% - 1rem) / 2.35); }
}

@media (max-width: 599px) {
	.aoc-slider__track { gap: 0.85rem; }
	.aoc-slide { flex-basis: 70%; }
	.aoc-slide__frame { padding: 0.4rem; }
	.aoc-slider__controls { margin-top: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.aoc-slide__img,
	.aoc-slide__frame { transition: none; }
}

/* ==========================================================================
   36. The shop on a phone

   Measured at 375px wide. Long names ran to four lines of tracked capitals,
   so no two cards in a row were the same height. The rows sat 76px apart.
   A 12px band of cream showed under every photograph. The count and the sort
   control sat on two different lines, the sort control underlined across
   half the screen. And five pieces in two columns left the last one alone.
   ========================================================================== */

/* WooCommerce gives every card image a 12px bottom margin, meant to space
   it from a title directly under it. Inside Astra's frame that margin shows
   as a band of the frame's cream under each photograph. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
	margin: 0 !important;
}

/* The look name, then what the piece is. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-bottom: 0.2rem !important;
}

.woocommerce ul.products li.product .aoc-loop-kind {
	margin: 0 0 0.5rem !important;
	font-family: var(--aoc-ui);
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--aoc-muted);
}

@media (max-width: 767px) {

	.ast-archive-entry-banner {
		padding-block: 2rem 0.25rem !important;
	}

	/* Count on the left, sort on the right, one line. */
	.woocommerce .woocommerce-result-count {
		float: left;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 0.75rem !important;
		line-height: 44px;
	}

	.woocommerce .woocommerce-ordering {
		float: right;
		width: auto;
		margin: 0 0 1rem !important;
		padding: 0 !important;
	}

	.woocommerce .woocommerce-ordering select.orderby {
		-webkit-appearance: none;
		appearance: none;
		width: auto !important;
		max-width: 11rem;
		min-height: 44px;
		padding: 0 1.1rem 0 0 !important;
		border: 0 !important;
		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23241F1B' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center / 9px auto !important;
		font-size: 0.75rem !important;
		color: var(--aoc-ink) !important;
		text-align: right;
		text-align-last: right;
	}

	.woocommerce ul.products {
		clear: both;
		gap: 2rem 0.75rem !important;
	}

	.woocommerce ul.products li.product {
		margin-bottom: 0 !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		margin-top: 0.75rem !important;
	}

	/* With an odd number of pieces, the first one takes the whole row, so
	   the last is never left on its own. */
	.woocommerce ul.products li.product:first-child:nth-last-child(odd) {
		grid-column: 1 / -1;
	}
}

/* A single photograph fills both frames: the whole garment, then a closer
   view of the same picture. The closer view comes from scaling, so it stops
   well short of the point where the photograph would turn soft. */
.aoc-look__second--detail .aoc-look__img {
	transform: scale(1.65);
	transform-origin: var(--aoc-focus, 50% 34%);
	object-position: var(--aoc-focus, 50% 34%);
}

.aoc-look__second--detail:hover .aoc-look__img {
	transform: scale(1.72);
}