/* ==========================================================================
   DOOLASHES — brand layer on top of Blocksy.

   Palette is taken from the logo (#A1DFDD) and checked against WCAG AA:
   mint on ink 12.69:1 · deep teal on white 4.80:1 · ink on white 17.75:1.
   ========================================================================== */

/* Brand note: the packaging is black (#111212) with mint type on it (#86C3BA),
   measured off the product photos — contrast 9.41. Mint is the accent on dark,
   not a surface colour. Buttons are therefore ink with white type; mint marks
   hover and small highlights. */

:root {
	/* Blocksy is a classic theme and declares no spacing presets, so every
	   var(--wp--preset--spacing--*) used by the block editor resolved to
	   nothing and the sections lost all their vertical padding. */
	--wp--preset--spacing--s: 1.5rem;
	--wp--preset--spacing--m: 2.25rem;
	--wp--preset--spacing--l: 3.25rem;
	--wp--preset--spacing--xl: 4.75rem;

	--dl-mint: #a1dfdd;
	--dl-mint-soft: #e8f7f6;
	--dl-mint-dark: #7ec9c6;
	--dl-teal: #1a7f7c;
	--dl-ink: #0f1a1a;
	--dl-ink-soft: #24393a;
	--dl-line: #e4eceb;
	--dl-muted: #5f7070;
	--dl-shadow: 0 1px 2px rgba(15, 26, 26, .04), 0 8px 24px rgba(15, 26, 26, .06);
	--dl-shadow-lift: 0 2px 4px rgba(15, 26, 26, .06), 0 14px 34px rgba(15, 26, 26, .1);
	--dl-radius: 10px;
}

/* --------------------------------------------------------------------------
   Theme palette

   Blocksy paints every accent from --theme-palette-color-1, which ships as
   #2872fa. That single blue is why stray elements kept turning up off-brand:
   the second "view cart" button, notices, pagination, form focus rings.
   Overriding the palette fixes them all at the source instead of one
   selector at a time.
   -------------------------------------------------------------------------- */

html:root {
	--theme-palette-color-1: #1a7f7c;  /* accents, links, secondary buttons */
	--theme-palette-color-2: #12605e;  /* their hover */
	--theme-palette-color-3: #24393a;  /* body text */
	--theme-palette-color-4: #0f1a1a;  /* headings */
	--theme-palette-color-5: #e4eceb;  /* borders */
	--theme-palette-color-6: #f1f7f7;  /* soft background */
	--theme-palette-color-7: #fafcfc;  /* softer background */
	--theme-palette-color-8: #ffffff;

	--theme-link-initial-color: #1a7f7c;
	--theme-link-hover-color: #12605e;
	--theme-border-radius: 6px;

	/* Blocksy prints these two with !important, so a plain rule on the field
	   loses. Setting the variables is the only thing that reaches every
	   input: search, review form, ordering select, block checkout. */
	--theme-form-field-border-radius: 6px;
	--theme-form-border-radius: 6px;
	--theme-button-border-radius: 6px;
}

body {
	color: var(--dl-ink);
}

h1, h2, h3, h4 {
	letter-spacing: -0.02em;
}

.entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--dl-teal);
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.wc-block-components-button {
	background-color: var(--dl-ink);
	color: #fff;
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color .18s ease, transform .18s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.wc-block-components-button:hover {
	background-color: var(--dl-teal);
	color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
.woocommerce a.button:focus-visible {
	outline: 3px solid var(--dl-teal);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* The logo image already carries the brand name in its alt text. */
.site-branding .site-title-container {
	display: none;
}

.site-branding .site-logo-container img {
	max-height: 40px;
	width: auto;
}

/* --------------------------------------------------------------------------
   Page title strip

   Blocksy's default is a tall grey band with a single word in it, which is
   the emptiest part of every inner page. Made compact and given the brand's
   own tint so it reads as a header rather than as a gap.
   -------------------------------------------------------------------------- */

/* Blocksy uses type-1 on pages and type-2 on the shop archive; both arrive
   as a tall grey band with one word in it. */
.hero-section[data-type="type-1"],
.hero-section[data-type="type-2"] {
	background: linear-gradient(180deg, var(--dl-mint-soft) 0%, #fff 100%) !important;
	border-bottom: 1px solid var(--dl-line);
	padding-block: clamp(2rem, 5vw, 3.25rem) !important;
	min-height: 0 !important;
	text-align: center;
}

.hero-section .page-title,
.hero-section .entry-title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.hero-section .ct-breadcrumbs {
	justify-content: center;
	margin-top: 0.75rem;
	font-size: 0.85rem;
}

/* The strip wraps an inner header that carries its own 50px block padding,
   so the two stacked and the band came out over 350px tall for one word. */
.hero-section .entry-header {
	padding-block: 0 !important;
	min-height: 0 !important;
}

.ct-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--dl-teal);
}

.ct-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--dl-ink);
}

/* Front page opens with its own full-width cover. */
.home .site-main > .ct-container-full,
.home article > .entry-content {
	padding-top: 0;
}

/* The cover carries a 24px bottom margin, which showed as a white gap
   between the hero and the strip of facts pinned under it. */
.home .wp-block-cover {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hero cover on the front page
   -------------------------------------------------------------------------- */

.wp-block-cover h1 {
	text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}

.wp-block-cover__inner-container p {
	text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   Product cards

   Blocksy stacks title, price, category, button and three legal lines with
   equal spacing, so a card reads as five unrelated fragments. Here the card
   becomes one object: white panel, image on a fixed square, tight type, and
   the legal notes pinned to the bottom in small print.
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
	gap: 1.5rem;
}

/* The catalogue has three products; a four-column grid leaves a dead column. */
.woocommerce ul.products.columns-4 {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 991.98px) {

	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 575.98px) {

	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4 {
		grid-template-columns: 1fr !important;
	}
}

.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
	box-shadow: var(--dl-shadow);
	padding: 0 0 1.25rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: center;
	transition: box-shadow .2s ease, transform .2s ease;
	margin-bottom: 0;
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--dl-shadow-lift);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product img {
	border-radius: 0;
	margin: 0;
	background: #fff;
}

/* The photos are square after normalising; the theme's container is 4:3 and
   object-fit:cover was cutting the top and bottom off every packshot. */
.woocommerce ul.products li.product .ct-media-container {
	aspect-ratio: 1 / 1;
	height: auto !important;
	padding-bottom: 0 !important;
}

.woocommerce ul.products li.product .ct-media-container img,
.woocommerce ul.products li.product > a img {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
}

.woocommerce ul.products li.product > a:first-child,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-size: 1.02rem;
	line-height: 1.35;
	font-weight: 600;
	margin: 1.1rem 1rem 0.35rem;
	color: var(--dl-ink);
}

.woocommerce ul.products li.product .price {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--dl-ink);
	margin: 0 1rem 0.85rem;
	display: block;
}

/* Blocksy prints the category under the price; with three products in two
   categories it adds a line of shouting caps and no information. */
.woocommerce ul.products li.product .entry-meta {
	display: none;
}

/* Titles vary from one to two lines — reserving the taller of the two keeps
   prices and buttons on one baseline across the row. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.7em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: var(--dl-ink);
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
	color: var(--dl-teal);
}

/* Blocksy wraps the button in its own flex row. */
.woocommerce ul.products li.product .ct-woo-card-actions {
	display: flex;
	justify-content: center;
	margin: 0 1rem 0.9rem;
}

.woocommerce ul.products li.product a.button {
	display: inline-flex;
	margin: 0;
}

/* Legal notes: required on every listing, but they are fine print. */
.woocommerce ul.products li.product .wc-gzd-additional-info {
	font-size: 0.76rem;
	line-height: 1.45;
	color: var(--dl-muted);
	margin: 0 1rem;
}

.woocommerce ul.products li.product .wc-gzd-additional-info + .wc-gzd-additional-info {
	margin-top: 0.1rem;
}

.woocommerce ul.products li.product .wc-gzd-additional-info:last-of-type {
	margin-top: 0.35rem;
}

.wc-gzd-additional-info a {
	color: var(--dl-teal);
}

/* Push the legal block to the bottom so cards line up whatever the title length. */
.woocommerce ul.products li.product .wc-gzd-additional-info.wc-gzd-additional-info-loop:first-of-type {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

.single-product div.product .summary .price {
	font-size: 1.6rem;
	font-weight: 700;
}

.single-product div.product .wc-gzd-additional-info {
	font-size: 0.82rem;
	color: var(--dl-muted);
	margin-bottom: 0.3rem;
}

.single-product .woocommerce-product-gallery img {
	border-radius: var(--dl-radius);
	background: #fff;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.wp-block-details {
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
	background: #fff;
	padding: 1rem 1.15rem;
	margin-bottom: 0.7rem;
	box-shadow: var(--dl-shadow);
}

.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--dl-ink);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font-size: 1.4rem;
	line-height: 1;
	color: var(--dl-teal);
	flex: 0 0 auto;
	transition: transform .2s ease;
}

.wp-block-details[open] summary::after {
	content: "−";
}

.wp-block-details p {
	margin: 0.8rem 0 0;
	color: var(--dl-ink-soft);
}

/* Without this the answer keeps its height while the panel is closed. */
.wp-block-details:not([open]) > *:not(summary) {
	display: none;
}

/* The theme gives summary a 24px bottom margin, which stayed behind as a
   band of empty white under every closed question. */
.wp-block-details summary {
	margin-bottom: 0;
}

.wp-block-details[open] summary {
	margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   Legal placeholder
   -------------------------------------------------------------------------- */

.dl-legal-todo {
	border: 1px dashed var(--dl-teal);
	border-radius: var(--dl-radius);
	padding: 1.25rem 1.5rem;
	background: var(--dl-mint-soft);
}

/* --------------------------------------------------------------------------
   Legal footer
   -------------------------------------------------------------------------- */

.dl-legal-footer {
	border-top: 1px solid var(--dl-line);
	padding: 1.5rem 1rem 0.25rem;
}

.dl-legal-footer__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1.75rem;
	max-width: 1200px;
}

.dl-legal-footer__list a {
	color: var(--dl-ink);
	font-size: 0.9rem;
	text-decoration: none;
	display: inline-block;
	padding: 0.45rem 0;
}

.dl-legal-footer__list a:hover,
.dl-legal-footer__list a:focus-visible {
	color: var(--dl-teal);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Tablet and phone
   -------------------------------------------------------------------------- */

@media (max-width: 999.98px) {

	.woocommerce a.button,
	.woocommerce button.button,
	.wp-block-button__link,
	.wc-block-components-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.woocommerce ul.products li.product a.button {
		display: inline-flex;
	}

	.quantity input.qty {
		min-height: 44px;
	}
}

@media (max-width: 575.98px) {

	.wp-block-cover {
		min-height: 440px !important;
	}

	.woocommerce ul.products {
		gap: 1.1rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 1rem;
		min-height: 0;
	}
}

/* --------------------------------------------------------------------------
   Front page sections
   -------------------------------------------------------------------------- */

.dl-section-lead {
	color: var(--dl-muted);
	margin-top: -0.35rem;
	margin-bottom: 2rem;
}

/* Strip of facts, pinned directly under the hero */
.dl-usp {
	background: var(--dl-mint-soft);
	border-bottom: 1px solid var(--dl-line);
	padding-block: 1.6rem;
}

.dl-usp__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem 2rem;
	max-width: 1000px;
}

.dl-usp__item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.85rem;
	align-items: center;
	text-align: left;
}

.dl-usp__icon {
	grid-row: 1 / 3;
	color: var(--dl-teal);
	flex: 0 0 auto;
}

.dl-usp__title {
	font-weight: 600;
	color: var(--dl-ink);
	line-height: 1.3;
}

.dl-usp__sub {
	font-size: 0.86rem;
	color: var(--dl-muted);
	line-height: 1.35;
}

/* Three application steps */
.dl-steps {
	padding-block: var(--wp--preset--spacing--xl);
}

.dl-steps__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: 1100px;
	counter-reset: none;
}

.dl-steps__card {
	background: #fff;
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
	box-shadow: var(--dl-shadow);
	padding: 1.75rem 1.5rem;
	text-align: center;
}

.dl-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--dl-mint);
	color: var(--dl-ink);
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.dl-steps__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

.dl-steps__text {
	margin: 0;
	color: var(--dl-ink-soft);
	line-height: 1.65;
	font-size: 0.95rem;
}

@media (max-width: 900px) {

	.dl-usp__list {
		grid-template-columns: 1fr;
		gap: 0;
		max-width: 460px;
	}

	.dl-usp__item {
		padding-block: 0.85rem;
	}

	.dl-usp__item + .dl-usp__item {
		border-top: 1px solid rgba(15, 26, 26, .09);
	}

	.dl-steps__list {
		grid-template-columns: 1fr;
		max-width: 460px;
	}
}

/* --------------------------------------------------------------------------
   Footer credit
   -------------------------------------------------------------------------- */

.ct-footer [data-id="copyright"],
.ct-footer .ct-footer-copyright {
	text-align: center !important;
	color: var(--dl-muted);
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Secondary buttons

   After "add to cart" WooCommerce prints a second link (.added_to_cart) next
   to the first. Two buttons of equal weight side by side read as a choice
   between equals, so the follow-up is drawn as an outline button.
   -------------------------------------------------------------------------- */

a.added_to_cart,
.woocommerce a.button.wc-forward:not(.checkout-button),
.wc-block-components-button.outlined,
.wc-block-components-button.is-style-outline {
	/* Blocksy paints its own translucent fill and a lighter label on these,
	   which dropped the text to roughly 3:1 — too low to read comfortably. */
	background-color: #fff !important;
	background-image: none !important;
	color: var(--dl-teal) !important;
	border: 1.5px solid var(--dl-teal) !important;
	border-radius: 6px !important;
	font-weight: 600;
}

a.added_to_cart:hover,
.woocommerce a.button.wc-forward:not(.checkout-button):hover,
.wc-block-components-button.outlined:hover,
.wc-block-components-button.is-style-outline:hover {
	background-color: var(--dl-teal) !important;
	color: #fff !important;
	border-color: var(--dl-teal) !important;
}

/* The cart card stacks both buttons; keep them on one line and centred. */
.woocommerce ul.products li.product .ct-woo-card-actions {
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Checkout is the one place the primary action must dominate.
   The cart and checkout are block-based here, so the classic
   .checkout-button never renders — the block classes are what count. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--dl-ink);
	color: #fff;
	border: 0;
	font-weight: 700;
}

.wc-block-cart__submit-button:hover {
	background-color: var(--dl-teal);
	color: #fff;
}

/* --------------------------------------------------------------------------
   WooCommerce notices
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--dl-radius);
	border-width: 1px;
	border-style: solid;
	font-size: 0.95rem;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	background: var(--dl-mint-soft);
	border-color: var(--dl-mint);
	border-top-color: var(--dl-teal);
	color: var(--dl-ink);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	background: #f1f7f7;
	border-color: var(--dl-line);
	border-top-color: var(--dl-teal);
	color: var(--dl-ink);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: #fdf2f2;
	border-color: #f3c9c9;
	border-top-color: #b3261e;
	color: #5f1a16;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
	background: transparent;
	color: var(--dl-teal);
	border: 1.5px solid var(--dl-teal);
}

/* --------------------------------------------------------------------------
   Badges, forms, quantity
   -------------------------------------------------------------------------- */

.woocommerce span.onsale {
	background: var(--dl-ink);
	color: var(--dl-mint);
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.02em;
	min-height: 0;
	min-width: 0;
	padding: 0.3em 0.85em;
	line-height: 1.4;
}

.woocommerce .quantity input.qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input {
	border-radius: 6px;
	border: 1px solid var(--dl-line);
}

.woocommerce .quantity input.qty:focus,
.woocommerce form .form-row input.input-text:focus {
	border-color: var(--dl-teal);
}


/* --------------------------------------------------------------------------
   My account

   The active navigation item takes its background from palette colour 1 and
   its label from the link colour. Once both were set to the same teal the
   label became invisible — contrast 1.00. Spelled out explicitly here.
   -------------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link.is-active a:hover {
	background-color: var(--dl-mint) !important;
	color: var(--dl-ink) !important;
	font-weight: 600;
}

.woocommerce-MyAccount-navigation-link a {
	color: var(--dl-ink);
}

.woocommerce-MyAccount-navigation-link a:hover {
	color: var(--dl-teal);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.dl-404 {
	text-align: center;
	padding-block: 1rem 3rem;
}

.dl-404__lead {
	color: var(--dl-muted);
	margin-bottom: 1.25rem;
}

.dl-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.dl-404__primary,
.dl-404__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
}

.dl-404__primary {
	background: var(--dl-ink);
	color: #fff;
}

.dl-404__primary:hover {
	background: var(--dl-teal);
	color: #fff;
}

.dl-404__secondary {
	border: 1.5px solid var(--dl-teal);
	color: var(--dl-teal);
}

.dl-404__secondary:hover {
	background: var(--dl-teal);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Search field

   Blocksy makes the submit button transparent through a variable; the blanket
   .wp-element-button rule above painted it mint, which put a solid block
   inside the input. Undone here.
   -------------------------------------------------------------------------- */

.ct-search-form .wp-element-button,
.ct-search-form button[type="submit"] {
	background-color: transparent;
	border-radius: 0;
	color: var(--dl-ink);
}

.ct-search-form .wp-element-button:hover,
.ct-search-form button[type="submit"]:hover {
	background-color: transparent;
	color: var(--dl-teal);
}

.ct-search-results {
	border-radius: var(--dl-radius);
	box-shadow: var(--dl-shadow-lift);
}

/* --------------------------------------------------------------------------
   Off-canvas menu and search modal

   Both ship as near-black overlays, which belong to no part of this brand.
   -------------------------------------------------------------------------- */

#offcanvas .ct-panel-inner,
#search-modal .ct-panel-inner,
#search-modal {
	background: #fff !important;
}

#offcanvas .ct-menu-link,
#offcanvas .ct-toggle-close,
#search-modal .ct-toggle-close {
	color: var(--dl-ink) !important;
}

#offcanvas .ct-menu-link:hover {
	color: var(--dl-teal) !important;
}

#offcanvas .ct-panel-content-inner > * + * {
	border-top: 1px solid var(--dl-line);
}

/* --------------------------------------------------------------------------
   Review form
   -------------------------------------------------------------------------- */

#respond .form-submit button,
#respond input[type="submit"],
#respond button#submit {
	background-color: var(--dl-ink) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 6px !important;
	font-weight: 600;
}

#respond .form-submit button:hover,
#respond input[type="submit"]:hover,
#respond button#submit:hover {
	background-color: var(--dl-teal) !important;
	color: #fff !important;
}

#respond input[type="text"],
#respond input[type="email"],
#respond textarea,
#respond select {
	border: 1px solid var(--dl-line);
}

#respond .required,
.comment-form .required {
	color: #b3261e;
}

/* Stars come in Blocksy's orange by default. */
.comment-form-rating .stars,
.star-rating,
.woocommerce .star-rating {
	--star-rating-initial-color: var(--dl-teal);
	--star-rating-inactive-color: var(--dl-line);
	color: var(--dl-teal);
}

/* --------------------------------------------------------------------------
   Stock badge — the pair to .onsale, which was already branded
   -------------------------------------------------------------------------- */

.out-of-stock-badge,
.woocommerce .out-of-stock-badge {
	--badge-background-color: var(--dl-ink);
	--badge-text-color: #fff;
	--badge-radius: 999px;
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   WooCommerce Blocks: focus ring, notice icons, panels
   -------------------------------------------------------------------------- */

.wc-block-components-button:not(.is-link):focus,
.wc-block-components-button:not(.is-link):focus-visible {
	outline: 3px solid var(--dl-teal) !important;
	outline-offset: 2px;
	box-shadow: none !important;
}

.wc-block-components-notice-banner > svg {
	background-color: var(--dl-ink) !important;
	fill: #fff;
}

.wc-block-components-notice-banner.is-success > svg {
	background-color: var(--dl-teal) !important;
}

.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--dl-teal) !important;
}

.wc-block-components-notice-banner.is-error > svg {
	background-color: #b3261e !important;
}

.wc-block-components-notice-banner.is-warning {
	background: #fdf8ef;
	border-color: #e8d5ae;
	border-top-color: #a8730a;
	color: var(--dl-ink);
}

.wc-block-components-notice-banner.is-warning > svg {
	background-color: #a8730a !important;
}

.wc-block-components-panel__button {
	color: var(--dl-teal);
}

.wc-block-cart-item__remove-link {
	color: var(--dl-teal) !important;
}

.wc-block-components-quantity-selector {
	border-radius: 6px;
	border-color: var(--dl-line);
}

.wc-block-components-address-autocomplete-suggestions li:hover,
.wc-block-components-address-autocomplete-suggestions li:focus,
.wc-block-components-address-autocomplete-suggestions li.active {
	background: var(--dl-mint-soft) !important;
	color: var(--dl-ink) !important;
}

/* --------------------------------------------------------------------------
   Skip link — the first thing a keyboard sees on every page
   -------------------------------------------------------------------------- */

.skip-link.screen-reader-text:focus,
.screen-reader-text:focus {
	background-color: var(--dl-ink) !important;
	color: #fff !important;
	border-radius: 6px !important;
	box-shadow: var(--dl-shadow-lift) !important;
	font-weight: 600;
}

/* Blocksy strips outlines globally; details/summary was left without one. */
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--dl-teal);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Footer seam — the legal strip sat on a slightly different white
   -------------------------------------------------------------------------- */

.dl-legal-footer {
	background: var(--theme-palette-color-6);
}

/* --------------------------------------------------------------------------
   Search results

   Products fall back to the blog card here, which shows an author name and a
   publication date — neither belongs on a shop listing.
   -------------------------------------------------------------------------- */

body.search .entry-card .entry-meta,
body.search .ct-meta-element-author,
body.search .entry-card .post-meta {
	display: none;
}

body.search .entry-card {
	border-radius: var(--dl-radius);
	box-shadow: var(--dl-shadow);
	border: 1px solid var(--dl-line);
}

/* --------------------------------------------------------------------------
   Blog cards

   Blocksy prints category, then title, then image, then excerpt, then meta.
   With titles of one or two lines the images landed at different heights and
   the row looked like it was jumping. Reordered to image → title → text →
   meta, with the title block reserving the taller of the two cases.
   -------------------------------------------------------------------------- */

.entries .entry-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius);
	box-shadow: var(--dl-shadow);
	overflow: hidden;
	padding: 0;
}

.entries .entry-card .ct-media-container,
.entries .entry-card .ct-image-container {
	order: 1;
	margin: 0;
	aspect-ratio: 3 / 2;
}

.entries .entry-card .ct-media-container img,
.entries .entry-card .ct-image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.entries .entry-card .entry-title {
	order: 2;
	margin: 1.15rem 1.25rem 0.5rem;
	font-size: 1.08rem;
	line-height: 1.35;
	min-height: 2.7em; /* two lines — keeps every card aligned */
	display: flex;
	align-items: flex-start;
}

.entries .entry-card .entry-title a {
	color: var(--dl-ink);
	text-decoration: none;
}

.entries .entry-card .entry-title a:hover {
	color: var(--dl-teal);
}

.entries .entry-card .entry-excerpt,
.entries .entry-card .entry-content {
	order: 3;
	margin: 0 1.25rem;
	color: var(--dl-ink-soft);
	font-size: 0.95rem;
	line-height: 1.6;
}

.entries .entry-card .entry-meta {
	order: 4;
	margin: 1.1rem 1.25rem 1.25rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--dl-line);
	color: var(--dl-muted);
	font-size: 0.8rem;
}

/* the category label above the title repeats what the meta row already says */
.entries .entry-card .entry-meta:first-of-type,
.entries .entry-card .ct-meta-categories {
	display: none;
}

/* --------------------------------------------------------------------------
   Page title strip — one shape on every page

   It was rendering differently per template: tall grey on the shop, a tinted
   panel on posts with the heading spilling past it, plain on pages.
   -------------------------------------------------------------------------- */

.hero-section {
	background: linear-gradient(180deg, var(--dl-mint-soft) 0%, #fff 100%) !important;
	border-bottom: 1px solid var(--dl-line);
	padding-block: clamp(2rem, 4.5vw, 3rem) !important;
	margin-block: 0 !important;
	min-height: 0 !important;
	text-align: center;
}

.hero-section > * {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.hero-section .entry-header,
.hero-section .entry-header > * {
	padding-block: 0 !important;
	margin-block: 0 !important;
	min-height: 0 !important;
	background: none !important;
}

.hero-section .page-title,
.hero-section .entry-title {
	margin: 0 !important;
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	line-height: 1.2;
}

.hero-section .entry-meta {
	margin-top: 0.85rem !important;
	color: var(--dl-muted);
	font-size: 0.85rem;
}

/* Titles run one to three lines and excerpts vary, so cards drifted apart.
   Clamping both to a fixed number of lines keeps every card the same height. */

.entries .entry-card .entry-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entries .entry-card .entry-excerpt,
.entries .entry-card .entry-content {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 6.4em;
}

@media (max-width: 575.98px) {

	.entries .entry-card .entry-excerpt,
	.entries .entry-card .entry-content {
		-webkit-line-clamp: 3;
		min-height: 0;
	}

	.entries .entry-card .entry-title {
		min-height: 0;
	}
}

/* ==========================================================================
   Premium layer

   The first pass leaned on pastel fills, rounded cards and drop shadows —
   the visual language of a template, not of a cosmetics brand. Luxury beauty
   does the opposite: restraint, air, hairlines instead of shadows, and type
   doing the work. The typeface pair is the brand's own — the old Shopify
   theme ran Playfair Display over a sans.
   ========================================================================== */

:root {
	--dl-paper: #fbfaf8;   /* warm off-white instead of cold grey */
	--dl-hair: #e7e3dd;    /* hairline */
	--dl-ink: #14100f;
	--dl-ink-soft: #3d3733;
	--dl-muted: #6b625c;
	--dl-radius: 2px;
	--dl-shadow: none;
	--dl-shadow-lift: none;
}

html:root {
	--theme-palette-color-3: #3d3733;
	--theme-palette-color-4: #14100f;
	--theme-palette-color-5: #e7e3dd;
	--theme-palette-color-6: #f5f2ee;
	--theme-palette-color-7: #fbfaf8;
	--theme-border-radius: 2px;
	--theme-form-field-border-radius: 2px;
	--theme-button-border-radius: 2px;
}

body {
	background-color: var(--dl-paper);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--dl-ink-soft);
	font-size: 1rem;
	line-height: 1.7;
}

h1, h2, h3, h4,
.entry-title, .page-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wp-block-heading {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--dl-ink);
}

/* --- Type scale: bigger, quieter ------------------------------------------ */

.wp-block-cover h1 {
	font-size: clamp(2.4rem, 5.5vw, 4rem) !important;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}

.hero-section .page-title,
.hero-section .entry-title {
	font-size: clamp(2.15rem, 4.6vw, 3.5rem);
	font-weight: 500;
}

.entry-content > .wp-block-group h2,
.dl-steps h2 {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	margin-bottom: 0.6rem;
}

.dl-section-lead {
	font-size: 1.02rem;
	color: var(--dl-muted);
	margin-bottom: 3rem !important;
}

/* --- Title strip: full width, no boxed inset ------------------------------ */

.hero-section {
	background: var(--dl-paper) !important;
	border-bottom: 1px solid var(--dl-hair);
	padding-block: clamp(3rem, 7vw, 5.5rem) !important;
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.hero-section > * {
	max-width: 1240px;
}

/* --- Cards: hairline, no shadow, more air --------------------------------- */

.woocommerce ul.products li.product,
.entries .entry-card,
.wp-block-details,
.dl-steps__card {
	background: #fff;
	border: 1px solid var(--dl-hair);
	border-radius: var(--dl-radius);
	box-shadow: none;
	transition: border-color .2s ease;
}

.woocommerce ul.products li.product:hover,
.entries .entry-card:hover {
	border-color: var(--dl-ink);
	box-shadow: none;
	transform: none;
}

.woocommerce ul.products {
	gap: 2.25rem;
}

.woocommerce ul.products li.product {
	padding-bottom: 1.75rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.15rem;
	margin: 1.5rem 1.5rem 0.5rem;
}

.woocommerce ul.products li.product .price {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	margin-bottom: 1.25rem;
}

/* --- Buttons: ink, squared, wide ------------------------------------------ */

.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.wc-block-components-button,
.dl-404__primary {
	border-radius: var(--dl-radius);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-inline: 1.75rem;
}

/* --- Accent strip: paper, not mint ---------------------------------------- */

.dl-usp {
	background: transparent;
	border-top: 1px solid var(--dl-hair);
	border-bottom: 1px solid var(--dl-hair);
	padding-block: 2.25rem;
}

.dl-usp__icon {
	color: var(--dl-ink);
}

.dl-usp__title {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.dl-usp__sub {
	font-size: 0.9rem;
}

/* --- Steps ---------------------------------------------------------------- */

.dl-steps {
	background: transparent;
}

.dl-steps__card {
	padding: 2.5rem 2rem;
}

.dl-steps__num {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 2.25rem;
	font-weight: 500;
	color: var(--dl-hair);
	margin-bottom: 0.5rem;
}

.dl-steps__title {
	font-size: 1.2rem;
}

/* --- FAQ ------------------------------------------------------------------ */

.wp-block-details {
	padding: 1.35rem 1.5rem;
	margin-bottom: 0.5rem;
}

.wp-block-details summary {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 1rem;
}

/* --- Brand block ---------------------------------------------------------- */

.entry-content .has-black-background-color {
	background-color: var(--dl-ink) !important;
}

.entry-content .has-black-background-color h2 {
	font-family: 'Inter', sans-serif;
	font-size: 0.85rem !important;
	font-weight: 500;
	letter-spacing: 0.28em !important;
	color: var(--dl-mint) !important;
}

.entry-content .has-black-background-color p {
	font-size: 1.05rem;
	line-height: 1.85;
}

/* --- Footer --------------------------------------------------------------- */

.dl-legal-footer {
	background: transparent;
	border-top: 1px solid var(--dl-hair);
}

.dl-legal-footer__list a {
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dl-muted);
}

.dl-legal-footer__list a:hover {
	color: var(--dl-ink);
}

.site-branding .site-logo-container img {
	max-height: 34px;
}

@media (max-width: 575.98px) {

	.woocommerce ul.products {
		gap: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Wordmark

   The logo file was a heavy sans in pale mint — it read poorly on paper
   (contrast 1.43) and clashed with the Playfair headings. Set as live text it
   uses the brand's own serif, stays crisp at any size and needs no image.
   -------------------------------------------------------------------------- */

.site-branding .site-title-container {
	display: block;
}

.site-branding .site-title {
	margin: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
}

.site-branding .site-title a {
	color: var(--dl-ink);
	text-decoration: none;
}

.site-branding .site-title a:hover {
	color: var(--dl-teal);
}

.site-branding .site-description {
	display: none;
}

/* --------------------------------------------------------------------------
   Header / title strip seam

   Blocksy puts a spacer row between the header and the first section; with a
   full-width title strip below it showed up as a band of empty paper.
   -------------------------------------------------------------------------- */

.ct-container > .hero-section,
.site-main > .hero-section {
	margin-top: 0 !important;
}

#main > .ct-container-full:first-child,
.site-main > .ct-container-full:first-child {
	padding-top: 0;
}

article > .hero-section:first-child,
.site-main > article > .hero-section:first-child {
	margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Title strip — dark band

   On paper the title floated with nothing holding it, and the content under
   it started immediately. The strip is now the brand's own black with the
   mint as type colour (12.8:1), full width, and it stands clear of the text
   that follows.
   -------------------------------------------------------------------------- */

.hero-section,
.hero-section[data-type="type-1"],
.hero-section[data-type="type-2"] {
	background: var(--dl-ink) !important;
	border-bottom: 0;
	padding-block: clamp(4.5rem, 10vw, 7.5rem) !important;
	/* the band ends here; the gap below it belongs to the page, not to the
	   band, so it is a margin rather than more padding */
	margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

.hero-section .page-title,
.hero-section .entry-title {
	color: var(--dl-mint);
}

/* Everything else inside the band — breadcrumbs, post date, category — was
   coloured for paper and disappeared on black. */
.hero-section .ct-breadcrumbs,
.hero-section .ct-breadcrumbs *,
.hero-section .entry-meta,
.hero-section .entry-meta * {
	color: rgba(255, 255, 255, .66);
}

.hero-section .ct-breadcrumbs a,
.hero-section .entry-meta a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}

.hero-section .ct-breadcrumbs a:hover,
.hero-section .entry-meta a:hover {
	color: var(--dl-mint);
}

/* The archive description sits in the same band on the shop page. */
.hero-section .page-description,
.hero-section .term-description,
.hero-section p {
	color: rgba(255, 255, 255, .78);
}

/* Blocksy's own top padding on the first container doubled the gap the band
   already carries. */
.hero-section + .ct-container,
.hero-section + .ct-container-full {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   Footer — dark

   A shop that sells black packaging should not end on grey paper. The footer
   closes the page in the brand's own colour.
   -------------------------------------------------------------------------- */

.site-footer,
#footer,
.ct-footer {
	background-color: var(--dl-ink) !important;
	border-top: 0;
	color: #b9b2ac;
}

/* The legal strip is printed on blocksy:footer:before, i.e. outside #footer,
   so it needs the dark ground itself — otherwise its light links sat on paper
   and became unreadable. */
.dl-legal-footer {
	background: var(--dl-ink);
	border-top: 0;
	padding: 3.5rem 1rem 0;
	margin-top: 0;
}

.dl-legal-footer__list {
	gap: 0.5rem 2.5rem;
}

.dl-legal-footer__list a {
	color: #d8d2cc;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
}

.dl-legal-footer__list a:hover,
.dl-legal-footer__list a:focus-visible {
	color: var(--dl-mint);
	text-decoration: none;
}

.ct-footer [data-id="copyright"],
.ct-footer .ct-footer-copyright,
#footer [data-id="copyright"] {
	background: transparent !important;
	color: #948d86 !important;
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-block: 2.25rem 3rem !important;
}

.ct-footer a,
#footer a {
	color: #d8d2cc;
}

.ct-footer a:hover,
#footer a:hover {
	color: var(--dl-mint);
}

/* the theme paints its own rows inside the footer */
.ct-footer [data-row],
.ct-footer [data-column],
#footer [data-row] {
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, .1) !important;
}

/* --------------------------------------------------------------------------
   Footer rhythm

   The copyright floated in the middle of a large empty block. A hairline now
   separates the legal links from it, and the line sits close to the bottom.
   -------------------------------------------------------------------------- */

.dl-legal-footer {
	padding: 3.25rem 1rem 1.75rem;
}

.ct-footer [data-id="copyright"],
.ct-footer .ct-footer-copyright,
#footer [data-id="copyright"] {
	position: relative;
	padding-block: 1.5rem 1.75rem !important;
	margin-top: 0 !important;
}

.ct-footer [data-id="copyright"]::before,
.ct-footer .ct-footer-copyright::before,
#footer [data-id="copyright"]::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: rgba(255, 255, 255, .12);
	max-width: 1200px;
	margin-inline: auto;
}

/* the theme leaves an empty row under the copyright on some layouts */
.ct-footer [data-row]:empty,
#footer [data-row]:empty {
	display: none;
}

/* On the product page the band carries only the breadcrumb — the product name
   lives in the summary column — so the same height read as a black slab with
   one line in it. */
.single-product .hero-section,
.hero-section:not(:has(.page-title, .entry-title)) {
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

/* Search results and the 404 screen are the two templates Blocksy renders in a
   boxed container, so the band stopped short of the page edges and the
   container's own top padding opened a strip of paper above it — on every other
   template the band runs edge to edge. The container is let out to full width
   and everything that is not the band goes back onto the page grid. Guarded
   against a sidebar layout, where the container is a two-column grid. */
.site-main > .ct-container:has(.hero-section):not(:has(aside)) {
	/* Blocksy sizes the container with width, not max-width, so both go. */
	width: 100% !important;
	max-width: none !important;
	padding-top: 0 !important;
}

.site-main > .ct-container:has(.hero-section):not(:has(aside)) > *:not(.hero-section):not(:has(.hero-section)),
.site-main > .ct-container:has(.hero-section):not(:has(aside)) > *:has(.hero-section) > *:not(.hero-section) {
	/* the same measure Blocksy gives the container itself */
	width: min(100%, 90vw);
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin-inline: auto;
}