/*
Theme Name: Dew Shelf
Theme URI: https://github.com/ericsrna/Maizon-Shop
Description: Child theme of Storefront for The Dew Shelf, a fictional K-beauty skincare shop (concept project).
Author: Eric
Template: storefront
Version: 0.2.0
Text Domain: dew-shelf
*/

/* ==========================================================================
   Contents
   1. Tokens and base
   2. Layout helpers, buttons, tags
   3. Announcement bar and header
   4. Footer
   5. Pages (generic)
   6. Product cards and grids
   7. Shop
   8. Home
   9. Product page
   10. About and Contact
   11. WooCommerce messages and pagination
   12. Cart, Checkout and order confirmation
   ========================================================================== */


/* ==========================================================================
   1. Tokens and base
   Colours and sizes come from the design canvas (design/) and the Figma value sheet.
   ========================================================================== */

:root {
	--mist: #F3F8F6;
	--ink: #1D2B2E;
	--teal: #1F7A72;
	--teal-dark: #19655E;
	--blush: #F5CFCB;
	--white: #FFFFFF;
	--mist-2: #E6F0EC;
	--blush-2: #FBE6E3;
	--line: #D5E3DE;
	--muted: #46595C;
	--foot-text: #C9D8D4;
	--foot-line: #3A4D50;

	--font-head: 'Fraunces', Georgia, serif;
	--font-body: 'DM Sans', system-ui, sans-serif;

	/* Side space of the page: 20px on phones, 120px on a 1440px screen. */
	--gutter: 20px;
}

@media (min-width: 768px) {
	:root { --gutter: 40px; }
}

@media (min-width: 1200px) {
	:root { --gutter: max(40px, min(120px, 8.333vw)); }
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--mist);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
	body { font-size: 17px; line-height: 1.6; }
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 700;
}

p { margin: 0; }

a {
	color: inherit;
	text-decoration: none;
}

img,
svg {
	max-width: 100%;
}

button,
input,
select,
textarea {
	font-family: inherit;
}

:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	clip-path: none;
	background: var(--white);
	color: var(--ink);
	border-radius: 999px;
}


/* ==========================================================================
   2. Layout helpers, buttons, tags
   ========================================================================== */

.dew-wrap {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Pill buttons: WooCommerce's own buttons (.button) get the same look.
   :where() keeps the specificity low, so the rules for single buttons further down still win. */
.dew-btn,
:where(.woocommerce) a.button,
:where(.woocommerce) button.button,
:where(.woocommerce) input.button,
.dew-card .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 32px;
	border: 1.5px solid var(--teal);
	border-radius: 999px;
	background: var(--teal);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.dew-btn:hover,
:where(.woocommerce) a.button:hover,
:where(.woocommerce) button.button:hover,
:where(.woocommerce) input.button:hover,
.dew-card .button:hover {
	background: var(--teal-dark);
	border-color: var(--teal-dark);
	color: var(--white);
}

.dew-btn--ghost {
	background: transparent;
	color: var(--teal);
}

.dew-btn--ghost:hover {
	background: var(--teal);
	border-color: var(--teal);
	color: var(--white);
}

.dew-btn--light {
	height: 52px;
	border-color: var(--white);
	background: var(--white);
	color: var(--teal);
}

.dew-btn--light:hover {
	background: var(--mist-2);
	border-color: var(--mist-2);
	color: var(--teal);
}

@media (min-width: 768px) {
	.dew-btn--light { height: 54px; padding-inline: 36px; }
}

/* Skin-type tag on top of a product picture. */
.dew-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.dew-tag { top: 14px; left: 14px; padding: 4px 12px; font-size: 12px; }
}

/* Breadcrumb: "Home / Shop / Treat / Cica Barrier Serum" */
.dew-breadcrumb {
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

.dew-breadcrumb a {
	color: var(--muted);
	font-weight: 400;
}

.dew-breadcrumb a:hover {
	color: var(--teal);
}

@media (min-width: 768px) {
	.dew-breadcrumb { font-size: 14px; }
}


/* ==========================================================================
   3. Announcement bar and header
   Phones: [menu button] [logo] [cart]. From 1024px: [menu links] [logo] [cart].
   The menu button and its toggled class are handled by Storefront's navigation script.
   ========================================================================== */

.dew-announce {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 16px;
	background: var(--ink);
	color: var(--mist);
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
}

@media (min-width: 768px) {
	.dew-announce { padding-block: 0; font-size: 13px; letter-spacing: .2px; }
}

.dew-header {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid var(--line);
	background: var(--white);
}

.dew-header__inner {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	max-width: 1440px;
	height: 60px;
	margin-inline: auto;
	padding: 0 8px 0 4px;
}

@media (min-width: 768px) {
	.dew-header__inner { padding-inline: var(--gutter); }
}

@media (min-width: 1024px) {
	.dew-header__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		height: 76px;
	}
}

.dew-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.dew-menu,
.dew-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phone and tablet: the links open under the header when the button is pressed. */
.dew-nav .dew-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	flex-direction: column;
	padding: 8px var(--gutter) 16px;
	border-bottom: 1px solid var(--line);
	background: var(--white);
	box-shadow: 0 12px 24px rgba(29, 43, 46, .08);
}

.dew-nav.toggled .dew-menu {
	display: flex;
}

.dew-menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-size: 16px;
	font-weight: 500;
}

.dew-menu a:hover,
.dew-menu .current-menu-item > a {
	color: var(--teal);
}

.dew-menu .current-menu-item > a {
	font-weight: 700;
}

@media (min-width: 1024px) {
	.dew-nav__toggle { display: none; }

	.dew-nav .dew-menu {
		position: static;
		display: flex;
		flex-direction: row;
		gap: 32px;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.dew-menu a {
		display: inline;
		min-height: 0;
		font-size: 15px;
	}
}

.dew-logo {
	justify-self: center;
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.3px;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.dew-logo { font-size: 28px; }
}

.dew-cart {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 4px;
	min-height: 44px;
	padding: 0 8px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.dew-cart:hover {
	color: var(--teal);
}

.dew-cart__label {
	display: none;
}

@media (min-width: 768px) {
	.dew-cart { gap: 8px; padding-right: 0; font-size: 15px; }
	.dew-cart__label { display: inline; margin-right: -4px; }
}


/* ==========================================================================
   4. Footer
   ========================================================================== */

.dew-footer {
	margin-top: auto;
	background: var(--ink);
	color: var(--mist);
}

.dew-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 40px;
	padding-bottom: 28px;
}

.dew-footer__top {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dew-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 420px;
}

.dew-footer__logo {
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 700;
}

.dew-footer__contact {
	color: var(--foot-text);
	font-size: 14px;
	line-height: 1.6;
}

.dew-footer__contact span {
	display: block;
}

.dew-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	font-size: 15px;
	font-weight: 500;
}

.dew-footer__menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.dew-footer__menu a:hover {
	color: var(--blush);
}

.dew-footer__bottom {
	padding-top: 18px;
	border-top: 1px solid var(--foot-line);
	color: var(--foot-text);
	font-size: 13px;
}

@media (min-width: 768px) {
	.dew-footer__inner { gap: 40px; padding-top: 64px; padding-bottom: 40px; }
	.dew-footer__top { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
	.dew-footer__brand { gap: 12px; }
	.dew-footer__logo { font-size: 28px; }
	.dew-footer__contact { font-size: 15px; }
	.dew-footer__contact span { display: inline; }
	.dew-footer__contact span + span::before { content: " \00b7  "; }
	.dew-footer__menu { flex-wrap: nowrap; gap: 28px; align-items: flex-start; }
	.dew-footer__menu a { min-height: 0; }
	.dew-footer__bottom { padding-top: 24px; font-size: 14px; }
}


/* ==========================================================================
   5. Pages (generic): About and Contact have their own templates;
      Cart, Checkout and anything else use page.php.
   ========================================================================== */

.dew-main {
	flex: 1 0 auto;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.dew-page {
	padding-top: 32px;
	padding-bottom: 64px;
}

.dew-page__title {
	margin-bottom: 24px;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -.8px;
}

@media (min-width: 768px) {
	.dew-page { padding-top: 48px; padding-bottom: 88px; }
	.dew-page__title { margin-bottom: 32px; font-size: 60px; letter-spacing: -1px; }
}


/* Rows that scroll sideways on phones (category buttons, picture slots, tabs, related products):
   the scroll bar is hidden, the row still scrolls by swiping. */
.dew-chips,
.dew-gallery__thumbs,
.woocommerce-tabs ul.tabs,
.dew-related ul.products {
	scrollbar-width: none;
}

.dew-chips::-webkit-scrollbar,
.dew-gallery__thumbs::-webkit-scrollbar,
.woocommerce-tabs ul.tabs::-webkit-scrollbar,
.dew-related ul.products::-webkit-scrollbar {
	display: none;
}


/* ==========================================================================
   6. Product cards and grids
   Used in the shop, on Home ("Shelf favourites") and in "You may also like".
   Two columns on phones, three from 768px, four from 1100px.
   ========================================================================== */

ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
}

@media (min-width: 1100px) {
	ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dew-card {
	/* Positioned, so WooCommerce's hidden screen-reader text inside the card stays in the card and
	   does not widen the page when the "You may also like" row scrolls sideways. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dew-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 172px;
	border-radius: 16px;
	background: var(--mist-2);
}

.dew-card__media .dew-art {
	width: min(210px, 80%);
	height: auto;
}

.dew-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
}

.dew-card__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.dew-card__title:hover {
	color: var(--teal);
}

.dew-card__size {
	color: var(--muted);
	font-size: 13px;
}

.dew-card__price {
	color: var(--teal);
	font-size: 16px;
	font-weight: 700;
}

.dew-card .button {
	width: 100%;
	height: 44px;
	padding: 0 16px;
	font-size: 14px;
}

.dew-card .button.loading {
	opacity: .6;
	pointer-events: none;
}

/* Link that WooCommerce adds after a product was added without leaving the page. */
.dew-card .added_to_cart {
	color: var(--teal);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

@media (min-width: 768px) {
	.dew-card { gap: 14px; }
	.dew-card__media { height: 300px; border-radius: 20px; }
	.dew-card__title { font-size: 18px; line-height: 1.35; }
	.dew-card__size { font-size: 14px; }
	.dew-card__price { font-size: 18px; }
	.dew-card .button { height: 48px; font-size: 15px; }
}


/* ==========================================================================
   7. Shop: page heading, category buttons, result count, grid
   ========================================================================== */

.dew-pagehead {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 24px;
	padding-bottom: 16px;
}

.dew-pagehead__title {
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -.8px;
}

.dew-pagehead__lead {
	color: var(--muted);
	font-size: 16px;
}

.dew-toolbar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 16px;
}

/* On phones the buttons run to the screen edge and scroll sideways. */
.dew-chips {
	display: flex;
	gap: 8px;
	margin-inline: calc(var(--gutter) * -1);
	padding: 0 var(--gutter) 4px;
	overflow-x: auto;
}

.dew-chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
}

.dew-chip:hover {
	border-color: var(--teal);
	color: var(--teal);
}

.dew-chip[aria-current="page"] {
	border-color: var(--teal);
	background: var(--teal);
	color: var(--white);
	font-weight: 700;
}

.woocommerce-result-count {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.dew-shelf {
	padding-top: 8px;
	padding-bottom: 48px;
}

@media (min-width: 768px) {
	.dew-pagehead { gap: 8px; padding-top: 48px; padding-bottom: 32px; }
	.dew-pagehead__title { font-size: 60px; letter-spacing: -1px; }
	.dew-pagehead__lead { font-size: 19px; }

	.dew-toolbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 32px; }
	.dew-chips { flex-wrap: wrap; gap: 10px; margin-inline: 0; padding: 0; overflow: visible; }
	.dew-chip { padding: 0 22px; }
	.woocommerce-result-count { font-size: 15px; }

	.dew-shelf { padding-bottom: 88px; }
}


/* ==========================================================================
   8. Home
   ========================================================================== */

.dew-hero {
	display: grid;
	gap: 20px;
	padding-top: 28px;
	padding-bottom: 12px;
}

.dew-hero__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dew-hero__title {
	font-size: 42px;
	line-height: 1.06;
	letter-spacing: -.8px;
	text-wrap: balance;
}

.dew-hero__lead {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.55;
}

.dew-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dew-hero__actions .dew-btn {
	width: 100%;
}

.dew-hero__art {
	height: 300px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--blush);
}

.dew-hero__art svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {
	.dew-hero__title { font-size: 56px; letter-spacing: -1px; }
}

@media (min-width: 900px) {
	.dew-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
	.dew-hero__text { gap: 28px; }
	.dew-hero__lead { max-width: 480px; font-size: 20px; }
	.dew-hero__actions { flex-direction: row; flex-wrap: wrap; gap: 16px; }
	.dew-hero__actions .dew-btn { width: auto; }
	.dew-hero__art { height: 520px; border-radius: 32px; }
}

@media (min-width: 1200px) {
	.dew-hero__title { font-size: 68px; }
}

.dew-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 40px;
	padding-bottom: 40px;
}

.dew-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.dew-section__title {
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -.4px;
}

.dew-link {
	padding-bottom: 2px;
	border-bottom: 2px solid var(--teal);
	color: var(--teal);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.dew-link:hover {
	color: var(--teal-dark);
	border-color: var(--teal-dark);
}

@media (min-width: 768px) {
	.dew-section { gap: 36px; padding-top: 80px; padding-bottom: 80px; }
	.dew-section__head { gap: 24px; }
	.dew-section__title { font-size: 42px; letter-spacing: -.5px; }
	.dew-link { font-size: 16px; }
}

/* Category cards */
.dew-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.dew-cat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 210px;
	padding: 16px;
	border-radius: 20px;
}

.dew-cat--mist { background: var(--mist-2); }
.dew-cat--blush { background: var(--blush-2); }

.dew-cat .dew-art {
	align-self: center;
	width: 112px;
	height: 112px;
}

.dew-cat__text {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

.dew-cat__name {
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.dew-cat__tagline {
	color: var(--muted);
	font-size: 13.5px;
	line-height: 1.4;
}

@media (min-width: 960px) {
	.dew-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
	.dew-cat { gap: 20px; min-height: 330px; padding: 28px; border-radius: 24px; }
	.dew-cat .dew-art { width: 170px; height: 170px; }
	.dew-cat__name { font-size: 26px; }
	.dew-cat__tagline { font-size: 15px; }
}

/* Routine in 3 steps */
.dew-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dew-step {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--white);
}

.dew-step:hover {
	border-color: var(--teal);
}

.dew-step__number {
	min-width: 32px;
	color: var(--teal);
	font-family: var(--font-head);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
}

.dew-step__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dew-step__name {
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.dew-step__line {
	color: var(--muted);
	font-size: 15px;
}

@media (min-width: 768px) {
	.dew-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	.dew-step { flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px; border-radius: 24px; }
	.dew-step__text { gap: 10px; }
	.dew-step__number { font-size: 64px; }
	.dew-step__name { font-size: 28px; }
	.dew-step__line { font-size: 17px; }
}

/* Feature cards */
.dew-features {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.dew-feature {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.dew-feature__icon {
	flex: none;
	width: 40px;
	height: 40px;
}

.dew-feature__title {
	font-size: 20px;
	line-height: 1.25;
}

.dew-feature__text {
	margin-top: 4px;
	color: var(--muted);
	font-size: 15.5px;
}

@media (min-width: 768px) {
	.dew-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
	.dew-feature { flex-direction: column; gap: 14px; }
	.dew-feature__icon { width: 44px; height: 44px; }
	.dew-feature__title { font-size: 24px; }
	.dew-feature__text { margin-top: 14px; font-size: 17px; }
}

/* Closing band */
.dew-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: 56px var(--gutter);
	background: var(--teal);
	color: var(--white);
	text-align: center;
}

.dew-cta__title {
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -.4px;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.dew-cta { gap: 28px; padding-top: 88px; padding-bottom: 88px; }
	.dew-cta__title { font-size: 48px; letter-spacing: -.5px; }
}


/* ==========================================================================
   9. Product page
   Phones: picture, then details, tabs, "You may also like".
   From 900px: picture on the left, details on the right, tabs and the rest below.
   ========================================================================== */

.dew-single {
	padding-top: 16px;
}

.dew-single div.product {
	display: flex;
	flex-direction: column;
}

/* Pictures */
.dew-gallery {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 16px;
	margin-bottom: 14px;
}

.dew-gallery__main {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 320px;
	border-radius: 24px;
	background: var(--mist-2);
}

.dew-gallery__main .dew-art {
	width: min(240px, 75%);
	height: auto;
}

.dew-tag--large {
	top: 14px;
	left: 14px;
	padding: 3px 12px;
	font-size: 12px;
}

.dew-gallery__thumbs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
}

.dew-thumb {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 2px solid transparent;
	border-radius: 14px;
	background: var(--mist-2);
}

.dew-thumb--blush { background: var(--blush-2); }
.dew-thumb--current { border-color: var(--teal); }
.dew-thumb .dew-art { width: 54px; height: 54px; }
.dew-thumb > svg { width: 34px; height: 34px; }

/* Details */
.dew-single .summary {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 32px;
}

.dew-single .product_title {
	margin-top: 10px;
	font-size: 38px;
	line-height: 1.08;
	letter-spacing: -.8px;
}

.dew-price-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.dew-price-row__price {
	color: var(--teal);
	font-size: 28px;
	font-weight: 700;
}

.dew-price-row__size {
	color: var(--muted);
	font-size: 15px;
}

.woocommerce-product-details__short-description {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.55;
}

.dew-pill {
	align-self: flex-start;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--blush);
	font-size: 13px;
	font-weight: 700;
}

.dew-single form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 6px 0 0;
}

.dew-single .quantity {
	display: flex;
	flex: none;
	align-items: center;
	height: 52px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white);
}

.dew-single .quantity .qty {
	width: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.dew-single .quantity .qty::-webkit-inner-spin-button,
.dew-single .quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.dew-stepper__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.dew-stepper__button:hover {
	color: var(--teal);
}

.dew-single .single_add_to_cart_button {
	flex: 1;
	height: 52px;
	font-size: 16px;
}

.dew-ship-note {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 14px;
}

.dew-ship-note svg {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Tabs: Description / Ingredients / How to use */
.woocommerce-tabs {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 40px;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0 0 2px;
	list-style: none;
	overflow-x: auto;
}

.woocommerce-tabs ul.tabs li {
	flex: none;
	margin: 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
}

.woocommerce-tabs ul.tabs li a:hover {
	border-color: var(--teal);
}

.woocommerce-tabs ul.tabs li.active a {
	border-color: var(--teal);
	background: var(--teal);
	color: var(--white);
	font-weight: 700;
}

.woocommerce-Tabs-panel {
	min-height: 140px;
	padding: 22px 20px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--white);
}

.woocommerce-Tabs-panel p {
	font-size: 16px;
	line-height: 1.65;
}

.woocommerce-Tabs-panel p + p {
	margin-top: 12px;
}

/* You may also like: a row you can scroll sideways on phones */
.dew-related {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 48px;
}

.dew-related__title {
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -.4px;
}

.dew-related ul.products {
	display: flex;
	margin-inline: calc(var(--gutter) * -1);
	padding: 0 var(--gutter) 4px;
	gap: 12px;
	overflow-x: auto;
}

.dew-related .dew-card {
	flex: none;
	width: 168px;
}

@media (min-width: 768px) {
	.dew-single { padding-top: 32px; }
	.dew-gallery { gap: 16px; margin-top: 24px; }
	.dew-gallery__main { height: 560px; border-radius: 28px; }
	.dew-gallery__main .dew-art { width: min(400px, 75%); }
	.dew-tag--large { top: 20px; left: 20px; padding: 5px 14px; font-size: 13px; }
	.dew-gallery__thumbs { display: grid; grid-template-columns: repeat(3, 96px); gap: 12px; overflow: visible; }
	.dew-thumb { width: 96px; height: 96px; border-radius: 16px; }
	.dew-thumb .dew-art { width: 72px; height: 72px; }
	.dew-thumb > svg { width: 44px; height: 44px; }

	.dew-single .summary { gap: 20px; padding-top: 8px; }
	.dew-single .product_title { margin-top: 0; font-size: 52px; letter-spacing: -1px; }
	.dew-price-row { gap: 16px; }
	.dew-price-row__price { font-size: 32px; }
	.dew-price-row__size { font-size: 17px; }
	.woocommerce-product-details__short-description { max-width: 520px; font-size: 20px; }
	.dew-pill { padding: 6px 16px; font-size: 14px; }
	.dew-single form.cart { flex-wrap: wrap; gap: 16px; margin-top: 12px; }
	.dew-single .quantity { height: 56px; }
	.dew-single .quantity .qty { width: 32px; font-size: 17px; }
	.dew-stepper__button { width: 52px; height: 52px; }
	.dew-single .single_add_to_cart_button { flex: none; height: 56px; padding: 0 48px; font-size: 17px; }
	.dew-ship-note { margin-top: 4px; font-size: 15px; }
	.dew-ship-note svg { width: 22px; height: 22px; }

	.woocommerce-tabs { gap: 24px; margin-bottom: 80px; }
	.woocommerce-tabs ul.tabs { gap: 10px; }
	.woocommerce-tabs ul.tabs li a { height: 46px; padding: 0 26px; font-size: 16px; }
	.woocommerce-Tabs-panel { min-height: 150px; padding: 40px 44px; border-radius: 24px; }
	.woocommerce-Tabs-panel p { max-width: 760px; font-size: 19px; line-height: 1.7; }
	.woocommerce-Tabs-panel p + p { margin-top: 14px; }

	.dew-related { gap: 32px; margin-bottom: 88px; }
	.dew-related__title { font-size: 42px; letter-spacing: -.5px; }
	.dew-related ul.products { display: grid; margin-inline: 0; padding: 0; gap: 24px; overflow: visible; }
	.dew-related .dew-card { width: auto; }
}

@media (min-width: 900px) {
	.dew-single div.product {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 72px;
		align-items: start;
	}
	.dew-gallery { margin-bottom: 72px; }
	.dew-single .summary { margin-bottom: 72px; }
	.woocommerce-tabs,
	.dew-related { grid-column: 1 / -1; }
}


/* ==========================================================================
   10. About and Contact
   ========================================================================== */

.dew-about__intro {
	display: grid;
	gap: 28px;
	padding-top: 32px;
	padding-bottom: 40px;
}

.dew-about__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dew-about__lead {
	font-size: 19px;
	line-height: 1.5;
}

.dew-about__body {
	color: var(--muted);
	font-size: 17px;
}

.dew-about__pictures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.dew-about__picture {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	border-radius: 20px;
}

.dew-about__picture .dew-art {
	width: min(200px, 80%);
	height: auto;
}

.dew-about__picture--mist { background: var(--mist-2); }
.dew-about__picture--blush { background: var(--blush-2); }

.dew-contact {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 32px;
	padding-bottom: 64px;
}

.dew-contact__grid {
	display: grid;
	gap: 20px;
}

.dew-contact__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--white);
}

.dew-contact__heading {
	margin-bottom: 8px;
	font-size: 22px;
}

.dew-contact__reply {
	margin-top: 8px;
	color: var(--muted);
}

.dew-contact__faq {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dew-faq {
	padding: 20px 24px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--white);
}

.dew-faq__question {
	font-size: 20px;
	line-height: 1.3;
}

.dew-faq__answer {
	margin-top: 6px;
	color: var(--muted);
}

.dew-contact__note {
	padding: 14px 20px;
	border-radius: 16px;
	background: var(--blush-2);
	font-size: 15px;
}

@media (min-width: 900px) {
	.dew-about__intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; padding-top: 48px; padding-bottom: 40px; }
	.dew-about__text { gap: 20px; }
	.dew-about__lead { font-size: 24px; }
	.dew-about__pictures { gap: 24px; }
	.dew-about__picture { height: 360px; border-radius: 28px; }

	.dew-contact { gap: 32px; padding-top: 48px; padding-bottom: 88px; }
	.dew-contact__grid { grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
	.dew-contact__card { padding: 32px; border-radius: 24px; }
	.dew-faq { padding: 24px 32px; border-radius: 24px; }
}


/* ==========================================================================
   11. WooCommerce messages and pagination
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 20px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--white);
	font-size: 15px;
	list-style: none;
}

.woocommerce-error {
	border-color: #B4423B;
}

.woocommerce-message .button {
	height: 40px;
	padding: 0 20px;
	font-size: 14px;
	order: 2;
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white);
}

.woocommerce-pagination .page-numbers .current {
	border-color: var(--teal);
	background: var(--teal);
	color: var(--white);
	font-weight: 700;
}


/* ==========================================================================
   12. Cart, Checkout and order confirmation
   WooCommerce draws these itself (the Cart and Checkout blocks). Only colours, fonts,
   button shape and corner radius are matched to the rest of the site.
   ========================================================================== */

.dew-prose.dew-prose .wc-block-components-button:not(.is-link) {
	min-height: 52px;
	padding: 0 32px;
	border: 1.5px solid var(--teal);
	border-radius: 999px;
	background: var(--teal);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
}

.dew-prose.dew-prose .wc-block-components-button:not(.is-link):hover,
.dew-prose.dew-prose .wc-block-components-button:not(.is-link):focus {
	border-color: var(--teal-dark);
	background: var(--teal-dark);
	color: var(--white);
}

.dew-prose.dew-prose .wc-block-components-button.is-link,
.dew-prose.dew-prose .wc-block-components-checkout-return-to-cart-button {
	color: var(--teal);
}

.dew-prose.dew-prose .wc-block-components-title,
.dew-prose.dew-prose .wc-block-components-checkout-step__title,
.dew-prose.dew-prose .wc-block-cart__totals-title,
.dew-prose.dew-prose .wc-block-cart__empty-cart__title {
	font-family: var(--font-head);
	font-weight: 700;
}

.dew-prose.dew-prose .wc-block-components-product-name {
	color: var(--ink);
	font-weight: 700;
}

.dew-prose.dew-prose .wc-block-components-text-input input[type],
.dew-prose.dew-prose .wc-block-components-combobox .components-combobox-control__suggestions-container,
.dew-prose.dew-prose .wc-blocks-components-select .wc-blocks-components-select__container,
.dew-prose.dew-prose .wc-block-components-textarea {
	border: 1.5px solid var(--line);
	border-radius: 14px;
	background: var(--white);
	color: var(--ink);
}

.dew-prose.dew-prose .wc-block-components-text-input input[type]:focus,
.dew-prose.dew-prose .wc-blocks-components-select__select:focus {
	border-color: var(--teal);
	box-shadow: 0 0 0 2px var(--teal);
}

.dew-prose.dew-prose .wc-block-components-quantity-selector {
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white);
}

.dew-prose.dew-prose .wc-block-components-quantity-selector::after {
	display: none;
}

.dew-prose.dew-prose .wc-block-cart-item__image img,
.dew-prose.dew-prose .wc-block-components-order-summary-item__image img {
	border-radius: 12px;
	background: var(--mist-2);
}

.dew-prose.dew-prose .wc-block-components-radio-control__input:checked,
.dew-prose.dew-prose .wc-block-components-checkbox__input:checked {
	border-color: var(--teal);
}

.dew-prose input[type="radio"],
.dew-prose input[type="checkbox"] {
	accent-color: var(--teal);
}

.dew-prose.dew-prose .wc-block-components-notice-banner {
	border-radius: 16px;
}

/* Empty cart: keep the message and the "Browse store" link, leave out WooCommerce's "New in store" list. */
.wp-block-woocommerce-empty-cart-block > hr,
.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title),
.wp-block-woocommerce-empty-cart-block > .wc-block-grid {
	display: none;
}

.dew-prose p > a {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Order confirmation ("Thank you. Your order has been received.") */
.woocommerce-order {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
}

.woocommerce-order .woocommerce-notice {
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 700;
}

ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
	padding: 20px 24px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--white);
	list-style: none;
}

ul.woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	color: var(--muted);
	font-size: 14px;
}

ul.woocommerce-order-overview li strong {
	color: var(--ink);
	font-size: 17px;
}

table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--white);
}

table.shop_table th,
table.shop_table td {
	padding: 12px 20px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

table.shop_table tr:last-child th,
table.shop_table tr:last-child td {
	border-bottom: 0;
}