/*
Theme Name: Seda Alma
Theme URI: https://seda-alma.co.uk
Author: Cereris Group
Description: Custom block theme for Seda Alma — an editorial, discreet shop for intimate wellbeing products. No parent theme, no page builder. Design tokens live in theme.json.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: seda-alma
Tags: block-theme, e-commerce, full-site-editing
*/

/* Block styles belong in theme.json. This file carries only what theme.json
   cannot express. Keep it short — if a rule here duplicates a token, fix the
   token instead. */

/* Letterspaced small-caps eyebrow, used for section labels and the
   announcement bar ("SHOP BY MOMENT", "DISCREET DELIVERY ACROSS THE UK"). */
.sa-eyebrow {
	font-family: var(--wp--preset--font-family--eyebrow);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Section headings in the mockup are letterspaced serif caps, not the eyebrow
   sans — a distinct treatment worth its own class. */
.sa-section-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Pull quotes and the "A small selection. A higher standard." style asides. */
.sa-aside {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	color: var(--wp--preset--color--muted);
}

/* Respect a user's reduced-motion preference for any transition we add. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Product thumbnails sit on the linen surface, square, in the mockup. */
.sa-product-thumb img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--wp--preset--color--linen);
}

/* WordPress stacks columns straight from N to 1 below 782px. For the five
   "moment" cards and the six product cards that jumps from a dense row to a
   very long single file. Step them down instead. */
@media (max-width: 1100px) and (min-width: 600px) {
	.wp-block-columns.alignwide:has(> .wp-block-column:nth-child(5)) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.alignwide:has(> .wp-block-column:nth-child(5)) > .wp-block-column {
		flex-basis: calc(33.333% - var(--wp--preset--spacing--30)) !important;
	}
}
@media (max-width: 599px) {
	.wp-block-columns.alignwide:has(> .wp-block-column:nth-child(5)) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.alignwide:has(> .wp-block-column:nth-child(5)) > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--30)) !important;
	}
}

/* The quiz band is three full-bleed columns; its middle image column has no
   intrinsic height once stacked, so give it one. */
@media (max-width: 781px) {
	.wp-block-columns.alignfull > .wp-block-column .wp-block-cover {
		min-height: 320px;
	}
}

/* Visually hidden, but read by screen readers — used for star ratings. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}