/*
Theme Name: Star Soap
Theme URI: https://starsoap.co.uk
Author: Star Soap
Description: Block theme for Star Soap — organic handmade soap, made in small batches in the UK. Natural botanical palette: cream, sage, lavender and terracotta.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starsoap
Tags: e-commerce, block-theme, full-site-editing
*/

:root {
	--ss-radius: 16px;
	--ss-radius-lg: 24px;
	--ss-radius-pill: 999px;
	--ss-shadow: 0 1px 2px rgba(47, 58, 46, .04), 0 8px 24px rgba(47, 58, 46, .05);
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Images never overflow their column; SVG icons are sized explicitly below,
   so they are deliberately excluded from this rule. */
img {
	max-width: 100%;
	height: auto;
}


/* ---------------------------------------------------------------- HEADER  */

.ss-announce p {
	margin: 0;
}

/* Brand wordmark with a small star, so the site reads as a brand before
   Neva's logo is ready. Swap the site-title block for a site-logo block
   once the artwork lands. */
.ss-brand a,
.ss-brand {
	text-decoration: none;
}

.ss-brand a::before {
	content: "✦";
	color: var(--wp--preset--color--accent);
	margin-right: .45rem;
	font-size: .85em;
	display: inline-block;
	transform: translateY(-.06em);
}

.ss-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ss-radius-pill);
	background: var(--wp--preset--color--surface);
	padding: 0 .25rem 0 .9rem;
	max-width: 230px;
}

.ss-search .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: .9rem;
	padding: .5rem 0;
}

.ss-search .wp-block-search__input:focus {
	outline: none;
}

.ss-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--muted);
	border: 0;
	padding: .35rem .5rem;
	min-width: 0;
}

.ss-search .wp-block-search__button svg {
	width: 22px;
	height: 22px;
}

.ss-icons {
	display: flex;
	gap: 1.1rem;
	align-items: center;
}

.ss-icons a {
	position: relative;
	display: inline-flex;
	color: var(--wp--preset--color--contrast);
	line-height: 0;
}

.ss-icons a:hover {
	color: var(--wp--preset--color--accent);
}

.ss-icons svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ss-cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--ss-radius-pill);
	background: var(--wp--preset--color--terracotta);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.ss-cart-count.is-empty {
	display: none;
}

/* Navigation */
.wp-block-navigation a {
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	border-radius: var(--ss-radius);
	border-color: var(--wp--preset--color--line);
	box-shadow: var(--ss-shadow);
	padding: .4rem 0;
	background: var(--wp--preset--color--surface);
}

.wp-block-navigation .wp-block-navigation__submenu-container a {
	font-weight: 400;
	padding: .5rem 1.1rem;
}


/* ------------------------------------------------------------- SECTIONS  */

.ss-eyebrow {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: .5rem;
}

.ss-hero {
	padding: clamp(3.5rem, 2rem + 7vw, 7rem) 0;
}

.ss-hero h1 {
	margin: 0;
}

.ss-section {
	padding-top: 3.5rem;
	padding-bottom: 1rem;
}

.ss-panel {
	border-radius: var(--ss-radius-lg);
}

/* Two-up banner: equal-height halves. verticalAlignment:center on the columns
   would shrink each column to its content, so alignment is done inside the
   column with flex instead. */
.ss-card {
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
}

.ss-card .wp-block-column {
	border-radius: 0;
}

.ss-card p:last-child,
.ss-card .wp-block-buttons {
	margin-bottom: 0;
}


/* ------------------------------------------------------ CATEGORY TILES   */

.ss-cats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
}

.ss-cat {
	display: block;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.ss-cat-img {
	display: block;
	border-radius: var(--ss-radius);
	overflow: hidden;
	background: var(--wp--preset--color--soft);
	aspect-ratio: 1 / 1;
	margin-bottom: .85rem;
}

.ss-cat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.ss-cat:hover .ss-cat-img img {
	transform: scale(1.04);
}

.ss-cat-name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 500;
}

.ss-cat-count {
	display: block;
	font-size: .82rem;
	color: var(--wp--preset--color--muted);
	margin-top: .15rem;
}


/* --------------------------------------------------- WHY / CARE STRIPS   */

.ss-why {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	text-align: center;
}

.ss-why-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--ss-radius-pill);
	background: var(--wp--preset--color--surface);
	margin-bottom: 1rem;
}

.ss-why-icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ss-why h3 {
	font-size: 1.15rem;
	margin: 0 0 .5rem;
}

.ss-why p {
	color: var(--wp--preset--color--muted);
	font-size: .95rem;
	margin: 0;
}

.ss-care-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	max-width: 980px;
	margin: 0 auto;
}

.ss-care-steps > div {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
}

.ss-care-steps span {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: var(--ss-radius-pill);
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	font-size: .85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ss-care-steps p {
	margin: 0;
	font-size: .95rem;
	color: var(--wp--preset--color--muted);
}


/* ------------------------------------------------------------- BUTTONS   */

.wp-block-button__link {
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: #fff;
}


/* --------------------------------------------------- WOOCOMMERCE GRIDS   */

/* WooCommerce still ships float/inline-block list markup for product loops.
   Forcing a real grid is what keeps the shop tidy at every width — and the
   `max-width:none` on the children is required, otherwise the theme's own
   width rules squeeze the buttons until the label wraps one letter per line. */
.woocommerce ul.products,
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.25rem 1.75rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* WooCommerce clears its old float layout with ::before/::after on the list.
   In a grid container those pseudo-elements become grid items and eat the
   first and last cells, leaving a visible hole at the top-left of the shop. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
	content: none !important;
}

/* Cards are flex columns so the "Add to cart" buttons line up across the row
   even when one product title wraps onto a second line. */
.woocommerce ul.products li.product,
.wc-block-grid__products li.wc-block-grid__product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product a,
.wc-block-grid__product-link {
	text-decoration: none;
}

/* Reserve two lines for the title, then push the button to the card floor. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	min-height: 2.5em;
}

.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart {
	margin-top: auto;
	align-self: flex-start;
}

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	border-radius: var(--ss-radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: .9rem;
	background: var(--wp--preset--color--soft);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem !important;
	font-weight: 500;
	padding: 0 !important;
	margin: 0 0 .2rem !important;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	color: var(--wp--preset--color--muted) !important;
	font-size: .98rem !important;
	display: block;
	margin-bottom: .8rem;
}

.woocommerce ul.products li.product .star-rating {
	font-size: .8em;
	margin: 0 0 .5rem;
	color: var(--wp--preset--color--terracotta);
}

/* Loop buttons: quiet outline that fills on hover, so the grid does not turn
   into a wall of solid green blocks. */
.woocommerce ul.products li.product .button,
.wc-block-grid__product .wp-block-button__link {
	display: inline-block !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: var(--ss-radius-pill) !important;
	padding: .6rem 1.4rem !important;
	font-size: .85rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	white-space: nowrap;
	text-decoration: none;
}

.woocommerce ul.products li.product .button:hover,
.wc-block-grid__product .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
	color: #fff !important;
}

.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	background: var(--wp--preset--color--terracotta) !important;
	color: #fff !important;
	border-radius: var(--ss-radius-pill) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: .75rem !important;
	font-weight: 700;
	padding: .25rem .8rem !important;
	min-height: 0 !important;
	line-height: 1.5 !important;
	min-width: 0 !important;
}

/* Shop header */
.ss-shop .woocommerce-products-header__title,
.ss-shop .page-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
	font-weight: 500;
	text-align: center;
	margin: 0 0 .5rem;
}

.ss-shop .term-description,
.ss-shop .woocommerce-products-header {
	text-align: center;
	color: var(--wp--preset--color--muted);
	max-width: 640px;
	margin-inline: auto;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	color: var(--wp--preset--color--muted);
	font-size: .9rem;
}

.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ss-radius-pill);
	padding: .5rem 1rem;
	background: var(--wp--preset--color--surface);
	font-family: inherit;
	font-size: .9rem;
}

.woocommerce-breadcrumb {
	font-size: .85rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.5rem !important;
}

.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--muted);
}


/* ---------------------------------------------------------- PRODUCT PAGE */

.ss-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.ss-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.ss-product div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* Tabs, related products and reviews span the full width under the two columns. */
.ss-product div.product .woocommerce-tabs,
.ss-product div.product .related,
.ss-product div.product .upsells,
.ss-product div.product .woocommerce-product-gallery + .summary + * {
	grid-column: 1 / -1;
}

.woocommerce-product-gallery__image img {
	border-radius: var(--ss-radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Thumbnails in one tidy row. WooCommerce hard-codes li{width:25%} for these,
   so the override has to be !important. */
.flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: .6rem;
	margin: 1.1rem 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.flex-control-thumbs li {
	width: 78px !important;
	margin: 0 !important;
	float: none !important;
}

.flex-control-thumbs img {
	border-radius: 10px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	opacity: .55;
	cursor: pointer;
	transition: opacity .2s ease;
}

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

/* Gallery arrows */
.woocommerce-product-gallery .flex-direction-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: calc(50% - 48px);
	width: 40px;
	height: 40px;
	border-radius: var(--ss-radius-pill);
	background: rgba(255, 255, 255, .92);
	box-shadow: var(--ss-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	z-index: 5;
	opacity: 0;
	transition: opacity .2s ease;
}

.woocommerce-product-gallery:hover .flex-direction-nav a {
	opacity: 1;
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev {
	left: 12px;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next {
	right: 12px;
}

.woocommerce-product-gallery .flex-direction-nav a::before {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
	transform: rotate(135deg);
	margin-left: 3px;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next::before {
	transform: rotate(-45deg);
	margin-right: 3px;
}

.ss-product .product_title {
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
	margin: 0 0 .6rem;
}

.ss-product .summary .price {
	font-size: 1.4rem !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--heading);
	margin-bottom: 1.2rem !important;
}

.ss-product .summary .woocommerce-product-details__short-description {
	color: var(--wp--preset--color--muted);
}

.ss-product form.cart {
	margin: 1.75rem 0 !important;
	display: flex;
	gap: .75rem;
	align-items: center;
	flex-wrap: wrap;
}

.ss-product form.cart .quantity input {
	width: 72px;
	padding: .85rem .5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ss-radius-pill);
	text-align: center;
	font-family: inherit;
}

.ss-product form.cart button.button {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: var(--ss-radius-pill);
	padding: .95rem 2.1rem;
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
}

.ss-product form.cart button.button:hover {
	background: var(--wp--preset--color--contrast);
}

.ss-product .product_meta {
	font-size: .85rem;
	color: var(--wp--preset--color--muted);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 1.2rem;
}

.woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0 0 1.5rem !important;
	padding: 0 0 .6rem !important;
	border-bottom: 1px solid var(--wp--preset--color--line);
	display: flex;
	gap: 1.75rem;
}

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

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

.woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	color: var(--wp--preset--color--muted) !important;
	text-decoration: none;
	padding: 0 !important;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast) !important;
}

.related > h2,
.upsells > h2 {
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	margin-bottom: 1.75rem;
}


/* -------------------------------------------------- CART / CHECKOUT /ETC */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--accent);
	border-radius: var(--ss-radius);
	background: var(--wp--preset--color--soft);
	font-size: .95rem;
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: var(--ss-radius-pill);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
}

.woocommerce-form input[type="text"],
.woocommerce-form input[type="email"],
.woocommerce-form input[type="password"],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: .75rem .95rem;
	font-family: inherit;
	background: var(--wp--preset--color--surface);
}


/* ------------------------------------------------------------- CONTENT   */

.ss-page .wp-block-post-content h2 {
	margin-top: 2.5rem;
}

.ss-page .wp-block-post-content h3 {
	margin-top: 2rem;
}


/* -------------------------------------------------------------- FOOTER   */

/* Footer link lists sit under their headings, so the browser's default 40px
   list indent and bullets have to go — otherwise the links are visibly
   offset from the column heading. */
.ss-footer ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.ss-footer li {
	margin: 0 0 .55rem;
	padding-left: 0;
}

.ss-footer a {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
}

.ss-footer a:hover {
	color: var(--wp--preset--color--accent);
}

.ss-footer h3 {
	color: var(--wp--preset--color--contrast);
}

.ss-footer-rule {
	margin: 3rem 0 1.5rem;
	opacity: .6;
}


/* ---------------------------------------------------------- RESPONSIVE   */

@media (max-width: 1023px) {
	.ss-cats {
		grid-template-columns: repeat(3, 1fr);
	}

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tablet header: below 1024px the wordmark, full menu, search and icons stop
   fitting on one line and the header wraps to two or three rows. Hand the
   menu to the hamburger early instead. Specificity (not !important) is what
   wins here — WordPress ships the same 0,2,0 rules later in the cascade, so
   the ancestor selector is required. */
@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 781px) {
	.ss-search {
		display: none;
	}

	.ss-cats {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.1rem;
	}

	.ss-why,
	.ss-care-steps {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem 1.1rem;
	}

	.ss-product div.product {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.ss-panel {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	.ss-card .wp-block-column {
		padding-left: 1.75rem !important;
		padding-right: 1.75rem !important;
	}

	.woocommerce-tabs ul.tabs {
		gap: 1.1rem;
		overflow-x: auto;
	}
}