/*
Theme Name:  Wafaa Perfume
Description: Child theme of Twenty Twenty-Five. All custom design for the
             perfume store lives here so the parent theme can update safely.
Author:      Sohel Mahmud
Template:    twentytwentyfive
Version:     3.59.1
Text Domain: perfumestore
*/

/*
 * Prefer theme.json for design decisions (colors, fonts, spacing).
 * Use this file only for CSS that theme.json genuinely cannot express —
 * mainly reskinning WooCommerce's own loop/product markup, which theme.json
 * has no vocabulary for.
 *
 * Card markup lives in woocommerce/content-product.php.
 * Card motion lives in assets/js/wafaa.js.
 */

/* ---------- fixed-header clearance ---------- */

/*
 * The header is position:fixed. Templates that open with the hero pad themselves
 * for it; everything else starts flush at the top and would slide underneath, so
 * those get explicit clearance.
 *
 * Keyed on .wf-has-hero (see wafaa_page_has_hero() in functions.php) rather than
 * on .home. It used to test for the homepage, which was the same thing right up
 * until /attar/ started using the hero too — that page then received both the
 * hero's own 132px and this clearance, leaving a visible band above the hero
 * that the homepage did not have.
 */
body:not(.wf-has-hero) main {
	padding-top: clamp(88px, 7vw, 104px);
}

/*
 * WooCommerce's legacy template renders its own <main class="site-main"> inside
 * the template's <main>, so the rule above matched twice and applied the
 * fixed-header clearance a second time — a ~130px dead band under the header.
 */
body:not(.wf-has-hero) main main {
	padding-top: 0;
}

.wf-archive {
	padding-left: clamp(16px, 3vw, 40px);
	padding-right: clamp(16px, 3vw, 40px);
	padding-bottom: clamp(60px, 7vw, 110px);
}

.wf-archive .woocommerce-products-header__title,
.wf-archive .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
}

.wf-archive .woocommerce-products-header,
.wf-archive .woocommerce-notices-wrapper,
.wf-archive > .woocommerce,
.wf-archive .woocommerce-result-count,
.wf-archive .woocommerce-ordering,
.wf-archive nav.woocommerce-pagination {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- product grid ---------- */

/*
 * Explicit column counts rather than auto-fill. With minmax(250px, 1fr) a
 * 375px phone had room for exactly one track, so the "Popular attars" row
 * showed a single card and everything else was off-screen. Fixed counts give
 * 2 on a phone, 3 on a tablet and 4 on the desktop grid, which is what the
 * layout actually wants at each size.
 */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 2vw, 30px);
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	align-items: start;
}

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

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

	/*
	 * Three across on the catalogue, four everywhere else. The filter sidebar
	 * takes roughly a fifth of the row, which left the cards ~195px wide — narrow
	 * enough that the longer product names wrapped to two lines and the price
	 * range broke across lines too. Without the sidebar (homepage strips) there
	 * is room for four.
	 */
	.wf-catalog ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

ul.products::before,
ul.products::after {
	content: none !important;
}

/* ---------- card shell ---------- */

li.wf-card {
	display: flex;
	flex-direction: column;
	/* Beat WooCommerce's float-grid percentage widths, which fight CSS grid. */
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	/* WooCommerce's own `ul.products li.product` rule outranks `li.wf-card`
	   and zeroes the padding, so this has to be forced like the box metrics
	   above it. */
	padding: 10px !important;
	border-radius: 20px;
	background: var(--wp--preset--color--accent-4);
	border: 1px solid rgba(25, 23, 18, 0.06);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
	transform-style: preserve-3d;
	will-change: transform;
}

li.wf-card:hover {
	box-shadow: 0 34px 60px -34px rgba(25, 23, 18, 0.4);
}

/* ---------- image well ---------- */

.wf-card__media {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: #EDE7DC;
	/*
	 * Square, to match the product photos. The earlier 1/0.8 well cropped the
	 * top and bottom off every square shot; the height it adds back is paid for
	 * by the halved card padding above.
	 */
	aspect-ratio: 1 / 1;
}

.wf-card__media-link {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
}

.wf-card__img {
	position: absolute;
	/*
	 * No overscan: the photos carry text near their edges, so at rest the
	 * whole frame shows. On hover wafaa.js scales to 1.05, which covers its
	 * small parallax shift.
	 */
	inset: 0;
	display: block;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.wf-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wf-card__glow {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.wf-card__flag {
	position: absolute;
	left: 50%;
	top: 12px;
	transform: translateX(-50%);
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(251, 248, 242, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	pointer-events: none;
	white-space: nowrap;
}

.wf-card__wish {
	position: absolute;
	right: 12px;
	top: 12px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: none;
	background: rgba(251, 248, 242, 0.9);
	color: var(--wp--preset--color--accent-1);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(25, 23, 18, 0.5);
	transition: background 0.2s ease, transform 0.2s ease;
}

.wf-card__wish:hover {
	background: var(--wp--preset--color--accent-4);
	transform: scale(1.08);
}

.wf-card__wish[aria-pressed="true"] {
	color: #B4432F;
}

/* ---------- card body ---------- */

.wf-card__body {
	display: flex;
	flex-direction: column;
	/* flex: 1; */
}

/* Combo theme line (product meta _wafaa_tagline), above the family chip. */
.wf-card__tagline {
	display: block;
	margin-top: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wf-card__tagline + .wf-card__meta {
	margin-top: 6px;
}

.wf-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Tightened from 16/10 — the family chip was floating a long way from both
	   the image above it and the title below. */
	margin: 10px 0 5px;
	flex-wrap: wrap;
}

.wf-card__family {
	padding: 5px 11px;
	border-radius: 7px;
	background: var(--wp--preset--color--accent-5);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

/* Combo contents ("Sauvage + Aventus + …") in the family chip's place. Names
   are longer than family words, so the tracking comes in. */
.wf-card__family--items {
	letter-spacing: 0.06em;
	line-height: 1.45;
}

.wf-card__region {
	font-size: 12px;
	color: rgba(25, 23, 18, 0.5);
}

.wf-card__region::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(25, 23, 18, 0.25);
	margin-right: 8px;
	vertical-align: middle;
}

/* Title and note are each clamped to a single line so every card in a row
   keeps the same height regardless of how long the product name or blurb is.
   min-width:0 is required — as a flex child the default min-width:auto refuses
   to shrink below the text's intrinsic width and the ellipsis never appears. */
/* woocommerce.css sets `.woocommerce ul.products li.product h3 { padding: .5em 0 }`
   — specificity (0,3,3), which outranks anything reasonable here and added
   ~25px of dead height to every card. Forced, same as the box metrics above. */
/*
 * The .woocommerce prefix is load-bearing, not decoration. WooCommerce ships
 *   .woocommerce ul.products li.product h3 { font-size: 1em }
 * at specificity (0,3,3); the old `li.wf-card .wf-card__title` was (0,2,1) and
 * quietly lost every time, so the title had been inheriting core's 1em rather
 * than any size set here. It went unnoticed because the inherited value landed
 * near the 25px this rule asked for.
 */
.woocommerce ul.products li.wf-card .wf-card__title {
	margin: 0 0 4px;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	min-width: 0;
	/*
	 * Two lines, not one truncated one. nowrap+ellipsis was fine while every
	 * name was as short as "Baccarat Rouge", but the inspired oils are titles
	 * like "Bleu De Chanel Inspired (Oil Version)" — at card width that cut to
	 * "Bleu De Chan…", which tells a shopper nothing and makes two different
	 * products look identical. The mobile block has clamped to two lines for a
	 * while; this brings the wider layouts in line.
	 */
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* ---- product card title legibility — TUNE THESE ---------------------
	 *
	 * Scoped to the product card title only. The selector above already
	 * out-specifies WooCommerce, so nothing here leaks to other headings.
	 *
	 * letter-spacing: WordPress's generated global styles set
	 *   h1,h2,h3,h4,h5,h6 { letter-spacing: -0.1px }
	 * which this <h3> was inheriting — the title was being pulled TIGHTER than
	 * normal. This overrides it back out to positive.
	 *
	 * word-spacing is deliberately NOT set here — the default is correct.
	 *
	 * Weight: Italiana ships a single 400 face (see theme.json — one woff2, no
	 * 500/600/700). font-weight:600 therefore gets SYNTHESISED by the browser,
	 * which smears a hairline serif like this one. -webkit-text-stroke thickens
	 * the real strokes instead and is far easier to dial. Raise to ~0.5px for
	 * more; set to 0 and uncomment the font-weight line to compare faux bold.
	 */
	letter-spacing: 0.04em;
	-webkit-text-stroke: 0.3px currentColor;
	/* font-weight: 600; */ /* faux bold — only if you prefer it to the stroke */
}

.wf-card__title a {
	color: inherit;
	text-decoration: none;
	/*
	 * inline, not block. The two-line clamp lives on the <h3> as
	 * -webkit-line-clamp, which only ever clamps INLINE line boxes — a
	 * block-level child swallows the whole thing, so long names such as
	 * "Bleu De Chanel Inspired (Oil Version)" quietly ran to three lines and
	 * pushed the Add button past the bottom of the card. The h3 already owns
	 * the overflow and ellipsis; the anchor does not need its own.
	 */
	display: inline;
}

.wf-card__note {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(25, 23, 18, 0.55);
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Price sits on its own row directly under the rule; spec + button share the
   row beneath it. */
.wf-card__foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid rgba(25, 23, 18, 0.09);
}

.wf-card__buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}

.wf-card__price {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

.wf-card__price del {
	opacity: 0.5;
	font-size: 0.75em;
	font-weight: 400;
	margin-right: 4px;
}

.wf-card__price ins {
	text-decoration: none;
}

.wf-card__spec {
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(25, 23, 18, 0.45);
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- in-card size picker ---------- */

.wf-card__picker {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px;
	background: linear-gradient(to top, rgba(251, 248, 242, 0.97) 60%, rgba(251, 248, 242, 0.72));
	backdrop-filter: blur(12px) saturate(150%);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
}

/* `hidden` keeps it out of the a11y tree and out of tab order until opened;
   the class drives the animation. Without [hidden] removal the transition
   cannot run, so JS toggles both. */
.wf-card__picker[hidden] {
	display: none;
}

.wf-card.is-picking .wf-card__picker {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wf-card__picker-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.wf-card__picker-title {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.wf-card__picker-close {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border: none;
	border-radius: 999px;
	background: rgba(25, 23, 18, 0.06);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background 0.2s ease;
}

.wf-card__picker-close:hover {
	background: rgba(25, 23, 18, 0.14);
}

.wf-card__picker-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.wf-card__size {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(25, 23, 18, 0.12);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.86);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.wf-card__size:hover:not(:disabled) {
	background: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
	transform: translateX(2px);
}

.wf-card__size:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.wf-card__size-label {
	font-weight: 500;
	letter-spacing: 0.02em;
}

.wf-card__size-price {
	font-size: 12px;
	white-space: nowrap;
}

/* wc_price() emits its own markup; keep it inheriting the row's colours so the
   hover state inverts cleanly. */
.wf-card__size-price .woocommerce-Price-amount,
.wf-card__size-price bdi {
	color: inherit;
}

.wf-card__size.is-adding {
	opacity: 0.6;
	pointer-events: none;
}

.wf-card__size.is-added {
	background: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
}

@media (prefers-reduced-motion: reduce) {
	.wf-card__picker,
	.wf-card__size {
		transition: none;
	}
}

/* Core add-to-cart link, restyled as the design's outlined pill. */
li.wf-card .wf-card__foot a.button,
li.wf-card .wf-card__foot a.add_to_cart_button,
li.wf-card .wf-card__foot button.wf-card__cta {
	/* core's .wp-element-button sets display:block, which kills the gap between
	   the label and the "+" pseudo-element. */
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	margin: 0;
	padding: 11px 18px;
	border-radius: 999px;
	border: 1px solid rgba(27, 51, 39, 0.18);
	background: transparent;
	color: var(--wp--preset--color--accent-2);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

li.wf-card .wf-card__foot a.button::after,
li.wf-card .wf-card__foot button.wf-card__cta::after {
	content: "+";
	font-size: 14px;
	line-height: 1;
}

li.wf-card .wf-card__foot a.button:hover,
li.wf-card .wf-card__foot a.add_to_cart_button:hover,
li.wf-card .wf-card__foot button.wf-card__cta:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
	border-color: var(--wp--preset--color--accent-2);
}

li.wf-card .wf-card__foot a.added_to_cart {
	flex-basis: 100%;
	font-size: 11px;
	color: var(--wp--preset--color--accent-1);
	text-align: right;
}

/* WooCommerce injects its own loading/added states; keep them from breaking layout. */
li.wf-card .wf-card__foot a.button.loading::after {
	content: "…";
}

/* ---------- reveal on scroll (driven by wafaa.js) ---------- */

/* Scoped to .wf-js (set by wafaa.js on <html>) so the page stays readable
   if the script fails or is blocked, rather than hiding every section. */
.wf-js [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.wf-js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wf-js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	li.wf-card,
	.wf-card__img {
		transition: none !important;
	}
}

/* ---------- single product ---------- */

.wf-single {
	padding-left: clamp(16px, 3vw, 40px);
	padding-right: clamp(16px, 3vw, 40px);
	padding-bottom: clamp(60px, 7vw, 110px);
}

.wf-single .woocommerce-notices-wrapper,
.wf-product {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.wf-product__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

@media (min-width: 900px) {
	/* Explicit two columns rather than auto-fit: at this container width
	   auto-fit computed room for three tracks and left a collapsed 0px one. */
	.wf-product__top {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

/*
 * WooCommerce's legacy single-product CSS floats the gallery and summary at
 * 48% width each. Inside a grid track that shrank the summary to 274px, so the
 * float layout has to be unwound before the grid can own the columns.
 */
.wf-product > .wf-product__top > .wf-product__gallery,
.wf-product > .wf-product__top > .summary,
.wf-product div.images,
.wf-product div.summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
}

/* ---------- gallery ---------- */

.wf-product__gallery {
	position: relative;
	min-width: 0;
}

.wf-product__gallery .woocommerce-product-gallery__image img {
	border-radius: 20px;
	background: #EDE7DC;
}

.wf-product__gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Core's `.woocommerce div.product div.images .flex-control-thumbs li` sets
 * width: 25% and outranks this selector, which shrank each thumb to a quarter
 * of its grid cell (~22px).
 */
.wf-product__gallery .flex-control-thumbs li {
	margin: 0;
	width: auto !important;
	float: none !important;
}

.wf-product__gallery .flex-control-thumbs img {
	border-radius: 12px;
	border: 1px solid rgba(25, 23, 18, 0.08);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.wf-product__gallery .flex-control-thumbs img.flex-active,
.wf-product__gallery .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--wp--preset--color--accent-1);
}

.wf-product .onsale {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 2;
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(251, 248, 242, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--wp--preset--color--accent-1);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	min-height: 0;
	min-width: 0;
	line-height: 1;
}

/* ---------- summary ---------- */

.wf-product__summary {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.wf-product__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Combo theme line (product meta _wafaa_tagline), above the family chip. */
.wf-product__tagline {
	margin-bottom: -6px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.wf-product__family {
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--wp--preset--color--accent-5);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.wf-product__origin {
	font-size: 13px;
	color: rgba(25, 23, 18, 0.55);
}

.wf-product .wf-product__title {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

.wf-product__short p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(25, 23, 18, 0.62);
}

/* ---------- combo contents, under the subtitle ---------- */

.wf-product__box {
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--wp--preset--color--accent-5);
}

.wf-product__box-label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1);
}

.wf-product__box-list {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-product__box-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	font-size: 14px;
	line-height: 1.45;
}

.wf-product__box-list a {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-bottom: 1px solid rgba(25, 23, 18, 0.25);
}

.wf-product__box-list a:hover {
	border-bottom-color: currentColor;
}

.wf-product__box-list span {
	font-size: 13px;
	color: rgba(25, 23, 18, 0.6);
}

/* ---------- spec strip ---------- */

.wf-product__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1px;
	margin: 4px 0;
	padding: 0;
	background: rgba(25, 23, 18, 0.09);
	border: 1px solid rgba(25, 23, 18, 0.09);
	border-radius: 14px;
	overflow: hidden;
}

.wf-product__spec {
	background: var(--wp--preset--color--accent-4);
	padding: 10px 12px;
}

.wf-product__spec dt {
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(25, 23, 18, 0.45);
	margin-bottom: 4px;
}

.wf-product__spec dd {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

/* ---------- price ---------- */

.wf-product .price {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 24px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	line-height: 1.2;
}

.wf-product .price del {
	opacity: 0.45;
	font-size: 0.6em;
	font-weight: 400;
	margin-right: 6px;
}

.wf-product .price ins {
	text-decoration: none;
}

/* Once a size is chosen, core shows the exact price inside the form, so the
   range above it would be duplicate information.
   Selector follows .wf-buybar__head rather than `.summary > .price`: the price
   is no longer a direct child of .summary now that wafaa_buybar_open() wraps
   it together with the form. */
.wf-product.wf-has-variation .wf-buybar__head > .price {
	display: none;
}

.wf-product .woocommerce-variation-price .price {
	font-size: 24px;
}

/* ---------- size cards ---------- */

.wf-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wf-variation {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wf-variation__label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(25, 23, 18, 0.5);
}

.wf-sizes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
}

.wf-size {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 10px 13px;
	border: 1px solid rgba(25, 23, 18, 0.14);
	border-radius: 14px;
	background: var(--wp--preset--color--accent-4);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.wf-size:hover:not(:disabled) {
	border-color: var(--wp--preset--color--accent-1);
	transform: translateY(-2px);
}

.wf-size[aria-checked="true"] {
	border-color: var(--wp--preset--color--accent-2);
	border-width: 2px;
	padding: 9px 12px;
	background: var(--wp--preset--color--accent-5);
}

.wf-size:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}


.wf-size__label {
	font-size: 15px;
	font-weight: 500;
}

.wf-size__price,
.wf-size__price .price {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: rgba(25, 23, 18, 0.6);
	line-height: 1.3;
}

.wf-size__price del {
	opacity: 0.5;
	margin-right: 4px;
}

.wf-size__price ins {
	text-decoration: none;
}

.wf-reset {
	align-self: flex-start;
	font-size: 12px;
	color: rgba(25, 23, 18, 0.5);
}

/* ---------- quantity + buttons ---------- */

.wf-product form.cart {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.wf-product .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(25, 23, 18, 0.14);
	border-radius: 999px;
	overflow: hidden;
	background: var(--wp--preset--color--accent-4);
}

.wf-product .quantity input.qty {
	width: 64px;
	border: none;
	background: transparent;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	padding: 12px 0;
	color: var(--wp--preset--color--contrast);
}

.wf-product .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.wf-product button.single_add_to_cart_button {
	/* flex-basis stays `auto`: with a basis of 200px this button became 200px
	   TALL whenever its container was flex-direction:column, which is what
	   produced the giant grey slab on phones. min-width keeps the desktop row
	   behaviour without tying the basis to the main axis. */
	flex: 1 1 auto;
	min-width: 180px;
	padding: 14px 30px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.25s ease;
}

.wf-product button.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--accent-6);
}

.wf-product button.single_add_to_cart_button.disabled,
.wf-product button.single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- trust list ---------- */

.wf-product__trust {
	list-style: none;
	margin: 2px 0 0;
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--wp--preset--color--accent-5);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wf-product__trust li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(25, 23, 18, 0.7);
}

.wf-product__trust strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.wf-product__trust-mark {
	color: var(--wp--preset--color--accent-1);
	flex-shrink: 0;
	line-height: 1.4;
}

.wf-product__whatsapp {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- share + meta ---------- */

.wf-share {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 12px;
	border-top: 1px solid rgba(25, 23, 18, 0.1);
}

.wf-share__label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(25, 23, 18, 0.45);
	margin-right: 4px;
}

.wf-share__link {
	padding: 8px 14px;
	border: 1px solid rgba(25, 23, 18, 0.12);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wf-share__link:hover {
	background: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
}

.wf-product .product_meta {
	font-size: 13px;
	color: rgba(25, 23, 18, 0.55);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wf-product .product_meta a {
	color: var(--wp--preset--color--accent-1);
}

/* ---------- tabs ---------- */

.wf-product .woocommerce-tabs {
	margin-top: clamp(48px, 6vw, 90px);
}

/*
 * Underline tabs rather than filled pills. A filled pill relied on this file
 * beating WooCommerce's own `.woocommerce div.product .woocommerce-tabs
 * ul.tabs li.active a { color: inherit }` on specificity — that selector has
 * five classes to this file's four and won, so the active tab rendered as a
 * dark green pill with WooCommerce's default gray text sitting on top,
 * unreadable. An underline needs no background/text color fight to begin
 * with, and every color here still carries !important so a future WooCommerce
 * update can't silently win this again.
 */
.wf-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: clamp(20px, 3vw, 36px);
	flex-wrap: wrap;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid rgba(25, 23, 18, 0.12);
}

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

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

.wf-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 13px;
	border-bottom: 2px solid transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400 !important;
	color: rgba(25, 23, 18, 0.55) !important;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.wf-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--contrast) !important;
	border-bottom-color: rgba(25, 23, 18, 0.25);
}

.wf-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast) !important;
	font-weight: 500 !important;
	border-bottom-color: var(--wp--preset--color--accent-1);
}

/*
 * Twenty Twenty-Five's global `:where(.wp-site-blocks :focus) { outline: 2px
 * solid }` rule has no color of its own, so it inherits the link's own text
 * color — a plain black rectangle boxing in the whole tab on click, on top of
 * the underline that already shows which tab is selected.
 *
 * Rather than delete that rule (it is real keyboard-navigation support, not a
 * bug), scope the override to :focus-visible: browsers already withhold
 * -visible for a mouse click and reserve it for keyboard focus, so Tab-key
 * users keep a clear, on-theme indicator and a click shows none at all.
 */
.wf-product .woocommerce-tabs ul.tabs li a:focus {
	outline: none;
}

.wf-product .woocommerce-tabs ul.tabs li a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
}

.wf-product .woocommerce-Tabs-panel h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(24px, 3vw, 34px);
	margin: 0 0 16px;
}

.wf-product .woocommerce-Tabs-panel h3 {
	font-size: 17px;
	font-weight: 500;
	margin: 24px 0 8px;
}

.wf-product .woocommerce-Tabs-panel p,
.wf-product .woocommerce-Tabs-panel li {
	font-size: 15px;
	line-height: 1.7;
	color: rgba(25, 23, 18, 0.7);
}

.wf-delivery {
	margin: 0 0 16px;
	padding-left: 20px;
}

/* ---------- related products ---------- */

.wf-product .related.products,
.wf-product .up-sells.products {
	margin-top: clamp(48px, 6vw, 90px);
}

.wf-product .related.products > h2,
.wf-product .up-sells.products > h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 44px);
	margin: 0 0 28px;
}

/* The old max-width:640px block that stacked the quantity and button into a
   column lived here. The purchase bar below now owns layout at small sizes and
   keeps them on one row, so the stacked variant was both unused and the thing
   that exposed the flex-basis bug noted above. */


/* ---------- single product: compact hero ---------- */

.wf-product .woocommerce-breadcrumb {
	margin: 0 0 18px !important;
	font-size: 14px;
	color: rgba(25, 23, 18, 0.55);
}

.wf-single .woocommerce-breadcrumb {
	max-width: 1200px;
	margin: 0 auto 18px !important;
}

/* Keep the gallery from driving the row taller than the buy controls need. */
.wf-product__gallery .woocommerce-product-gallery__image img {
	max-height: 560px;
	object-fit: contain;
	width: 100%;
}

@media (min-width: 900px) {
	.wf-product__top {
		align-items: start;
	}
}

/* ---------- single product: vertical rhythm ---------- */

/*
 * Every summary child inherits a 1.2em bottom margin from the theme/WooCommerce
 * defaults. Flex `gap` does not absorb margins — they stack on top of it — so a
 * 14px gap was rendering as 33px between every block. Zero the margins and let
 * gap alone own the rhythm. Forced because the source rules outrank a single
 * class selector.
 */
.wf-product__summary > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.wf-product__summary {
	gap: 12px;
}

/* A little more air before the two blocks that start a new idea. */
.wf-product__specs {
	margin-top: 6px !important;
}

.wf-product__trust {
	margin-top: 4px !important;
}

/* Same margin-vs-gap problem inside the add-to-cart form. */
.wf-variations .variations {
	margin-bottom: 0 !important;
}

.wf-product form.cart {
	gap: 10px;
}

/*
 * "Clear" only means something once a size is chosen. WooCommerce merely sets
 * visibility:hidden, which still reserves a ~30px row above the cart button, so
 * key it off the class wafaa.js already toggles when a variation resolves.
 */
.wf-reset {
	display: none;
}

.wf-product.wf-has-variation .wf-reset {
	display: inline-block;
}

.wf-product .single_variation_wrap {
	margin-top: 2px;
}

/* ---------- search results ---------- */

.wf-refine {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 460px;
	margin: 0 0 clamp(20px, 3vw, 32px);
	padding: 5px;
	border: 1px solid rgba(25, 23, 18, 0.14);
	border-radius: 999px;
	background: var(--wp--preset--color--accent-4);
}

.wf-refine input[type="search"] {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
	outline: none;
}

.wf-refine button {
	flex-shrink: 0;
	padding: 11px 24px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	cursor: pointer;
	transition: background 0.25s ease;
}

.wf-refine button:hover {
	background: var(--wp--preset--color--accent-6);
}

/*
 * Empty search / empty category state.
 *
 * WooCommerce wraps this in .woocommerce-no-products-found and renders the
 * message itself as a wc-block notice banner — a blue info box with a blue
 * icon that has nothing to do with this palette. Restyle the banner and drop
 * its icon rather than styling .woocommerce-info, which is a different element
 * that is not used here.
 */
.wf-search .woocommerce-no-products-found,
.wf-archive .woocommerce-no-products-found {
	max-width: 1200px;
	margin: 0 auto;
}

.wf-search .woocommerce-no-products-found .wc-block-components-notice-banner,
.wf-archive .woocommerce-no-products-found .wc-block-components-notice-banner,
.wf-search .woocommerce-no-products-found .woocommerce-info,
.wf-archive .woocommerce-no-products-found .woocommerce-info {
	margin: 0;
	padding: 22px 26px !important;
	border: 1px solid rgba(25, 23, 18, 0.1) !important;
	border-top: 2px solid var(--wp--preset--color--accent-1) !important;
	border-radius: 14px !important;
	background: var(--wp--preset--color--accent-4) !important;
	color: rgba(25, 23, 18, 0.72) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
}

/* Both the block banner's SVG and the legacy notice's ::before glyph. */
.wf-search .woocommerce-no-products-found .wc-block-components-notice-banner > svg,
.wf-archive .woocommerce-no-products-found .wc-block-components-notice-banner > svg {
	display: none !important;
}

.wf-search .woocommerce-no-products-found .woocommerce-info::before,
.wf-archive .woocommerce-no-products-found .woocommerce-info::before {
	content: none;
}

/* ---------- cart & checkout ---------- */

.wf-shop-page {
	padding-left: clamp(16px, 3vw, 40px);
	padding-right: clamp(16px, 3vw, 40px);
	padding-bottom: clamp(60px, 7vw, 110px);
}

.wf-shop-page > *,
.wf-shop-page .woocommerce {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.wf-shop-page .wf-page-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 46px);
	margin: 0 0 clamp(20px, 3vw, 32px);
	padding: 0;
}

/* ---------- free shipping progress ---------- */

.wf-freeship {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid rgba(165, 122, 52, 0.35);
	border-radius: 14px;
	background: var(--wp--preset--color--accent-5);
}

.wf-freeship.is-qualified {
	border-color: rgba(27, 51, 39, 0.3);
	background: rgba(27, 51, 39, 0.06);
}

.wf-freeship__msg {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(25, 23, 18, 0.75);
}

.wf-freeship__msg strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wf-freeship__track {
	height: 7px;
	border-radius: 999px;
	background: rgba(25, 23, 18, 0.1);
	overflow: hidden;
}

.wf-freeship__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-3));
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wf-freeship.is-qualified .wf-freeship__fill {
	background: var(--wp--preset--color--accent-2);
}

.wf-freeship__browse {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The checkout review table needs the bar to sit flush inside its row. */
.wf-freeship-row td {
	padding: 0 0 12px !important;
	border: none !important;
}

.wf-continue {
	display: inline-block;
	margin-top: 18px;
	padding: 13px 26px;
	border-radius: 999px;
	border: 1px solid rgba(27, 51, 39, 0.2);
	color: var(--wp--preset--color--accent-2);
	font-size: 14px;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
}

.wf-continue:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
}

/* ---------- checkout form ---------- */

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

/*
 * WooCommerce's own woocommerce-layout.css still ships .col2-set .col-1 /
 * .col-2 at width: 48% — leftover sizing for its float-based two-column
 * billing/shipping layout. Turning .col2-set into a single-column stack above
 * didn't remove that rule, so the billing column (col-1) rendered at roughly
 * half of the grid track it was actually given, leaving a wide dead gap
 * before the order summary rather than a wide billing form. Each column here
 * is meant to be full width of its own single-column stack, not half of it.
 */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}

/*
 * Headings, at a fixed size rather than the previous clamp(22px, 2.6vw, 30px):
 * the vw component scaled past the cart's "Cart totals" heading (a plain
 * 24px) on anything wider than a small laptop, which is most of why checkout
 * read as oversized next to the cart.
 */
.woocommerce-checkout h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 24px;
	margin: 0 0 14px;
}

.woocommerce-checkout .form-row {
	margin: 0 0 12px;
	padding: 0;
}

.woocommerce-checkout label {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	color: rgba(25, 23, 18, 0.7);
}

.woocommerce-checkout .required {
	color: #B4432F;
	text-decoration: none;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(25, 23, 18, 0.16);
	border-radius: 10px;
	background: var(--wp--preset--color--accent-4);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
	height: auto;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
	border-color: transparent;
}

.woocommerce-checkout #order_review_heading {
	margin-top: clamp(32px, 4vw, 52px);
}

/*
 * Order review table, brought down to the cart's scale. Unstyled, this table
 * inherits the theme's base table typography (cells rendered at ~25px here —
 * nearly double the cart's own totals table), which is the main reason
 * checkout read as oversized next to the cart page.
 */
/*
 * Presented as a card, matching the cart's totals panel — but there is no
 * separate wrapper div to hang padding/border/background on here (the table
 * is review-order.php's outermost element), and table padding is ignored
 * under border-collapse: collapse regardless. So the "card" look comes from
 * border + border-radius + background on the table itself (those DO render
 * under collapse), and the "all-round padding" comes from giving every edge
 * cell its own inset instead: 18px left on the first column, 18px right on
 * the second, extra top padding on the header row, extra bottom padding on
 * the last footer row.
 */
.woocommerce-checkout #order_review table.shop_table {
	border-collapse: collapse;
	font-size: 15px;
	border: 1px solid rgba(25, 23, 18, 0.1);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.5);
}

.woocommerce-checkout #order_review table.shop_table thead th {
	padding: 18px 18px 10px !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(25, 23, 18, 0.5);
	border: none !important;
}

.woocommerce-checkout #order_review table.shop_table thead th:last-child,
.woocommerce-checkout #order_review table.shop_table tbody td:last-child,
.woocommerce-checkout #order_review table.shop_table tfoot th:last-child,
.woocommerce-checkout #order_review table.shop_table tfoot td:last-child {
	text-align: right;
}

.woocommerce-checkout #order_review table.shop_table tbody td {
	padding: 12px 18px !important;
	border-top: 1px solid rgba(25, 23, 18, 0.08);
}

.woocommerce-checkout #order_review table.shop_table td.product-name {
	font-size: 14.5px;
	font-weight: 500;
}

.woocommerce-checkout #order_review table.shop_table td.product-name .product-quantity {
	font-weight: 400;
	color: rgba(25, 23, 18, 0.55);
}

.woocommerce-checkout #order_review table.shop_table td.product-total {
	font-size: 14.5px;
	white-space: nowrap;
}

.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td {
	padding: 12px 18px !important;
	font-size: 14.5px;
	font-weight: 400;
	border-top: 1px solid rgba(25, 23, 18, 0.08);
}

.woocommerce-checkout #order_review table.shop_table tfoot tr:first-child th,
.woocommerce-checkout #order_review table.shop_table tfoot tr:first-child td {
	border-top: none;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child th,
.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child td {
	padding-bottom: 18px !important;
}

.woocommerce-checkout #order_review table.shop_table .order-total th,
.woocommerce-checkout #order_review table.shop_table .order-total td {
	font-size: 17px;
	font-weight: 600;
}

/* The free-shipping progress row renders inside this table (see
   wafaa_free_shipping_progress_row in inc/checkout.php); its own box already
   carries top/bottom padding, so the cell only needs to mirror the other
   rows' left/right inset and add clearance below before the total. */
.woocommerce-checkout #order_review table.shop_table .wf-freeship-row td {
	padding: 0 18px 12px !important;
	border-top: none !important;
}

.woocommerce-checkout #payment {
	border-radius: 16px !important;
	background: var(--wp--preset--color--accent-5) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid rgba(25, 23, 18, 0.1) !important;
}

/*
 * The generic `.woocommerce-checkout label` rule above is sized for compact
 * form fields and shrank the payment method's own choice label ("Cash on
 * delivery") along with it. That label names what the customer is about to
 * pay with, so it needs to read at normal body size, not caption size.
 */
.woocommerce-checkout .payment_methods label {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 0;
	color: var(--wp--preset--color--contrast);
}

/*
 * Payment method descriptions ("Pay with cash upon delivery.") and the
 * privacy-policy paragraph both inherit the same oversized base table/body
 * typography the order review table did (~23–25px here) — bring them down to
 * the same 14–15px scale as the rest of the checkout.
 */
.woocommerce-checkout #payment p,
.woocommerce-checkout #payment .payment_box p {
	font-size: 14px !important;
	line-height: 1.6;
	color: rgba(25, 23, 18, 0.75);
}

.woocommerce-checkout .woocommerce-privacy-policy-link {
	font-size: inherit;
	color: var(--wp--preset--color--accent-1);
}

.woocommerce-checkout #place_order {
	width: 100%;
	padding: 16px 32px !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--accent-2) !important;
	color: var(--wp--preset--color--accent-4) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 15px !important;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.woocommerce-checkout #place_order:hover {
	background: var(--wp--preset--color--accent-6) !important;
}

@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(24px, 3vw, 44px);
		align-items: start;
	}

	/*
	 * .col2-set was placed in row 1 only, with #order_review_heading and
	 * #order_review auto-flowing into column 2. A grid row's height is shared
	 * across every column, so row 1 stretched to match .col2-set's full height
	 * (the entire billing form) — and #order_review, needing its own row,
	 * could only start once that whole row ended. The heading sat pinned at
	 * the top of that tall row (which looked fine), while the order table
	 * itself landed far below the billing form. Spanning both rows lets
	 * .col2-set's height split naturally across the heading + review rows
	 * instead of inflating a single shared one.
	 */
	.woocommerce-checkout form.checkout > .col2-set {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.woocommerce-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
	}
}

/* ---------- catalogue: sidebar + grid ---------- */

.wf-catalog {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 3vw, 40px);
	max-width: 1320px;
	margin: 0 auto;
	align-items: start;
}

@media (min-width: 1025px) {
	.wf-catalog {
		grid-template-columns: 260px minmax(0, 1fr);
	}
}

.wf-catalog__main {
	min-width: 0;
}

/* ---------- sidebar ---------- */

.wf-shop-sidebar {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 22px;
	border-radius: 20px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
}

/*
 * Sticky + capped height only makes sense once the sidebar sits beside a
 * taller product grid (the >=900px layout below) — that's what the cap and
 * inner scrollbar are for. Below that breakpoint .wf-catalog stacks the
 * sidebar above the grid in one column, so the same max-height turned the
 * whole filter panel into a nearly-full-viewport scrollbox: Price and Apply
 * existed but were scrolled out of view inside a box that looked like a
 * fixed card, not an obviously-scrollable one, so it easily read as those
 * controls being missing rather than merely lower on the page.
 */
@media (min-width: 1025px) {
	.wf-shop-sidebar {
		position: sticky;
		top: 110px;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}
}

.wf-shop-search {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px;
	border-radius: 999px;
	background: rgba(251, 248, 242, 0.1);
	border: 1px solid rgba(251, 248, 242, 0.18);
}

.wf-shop-search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 9px 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--accent-4);
	outline: none;
}

.wf-shop-search input::placeholder {
	color: rgba(251, 248, 242, 0.5);
}

.wf-shop-search button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-6);
	cursor: pointer;
}

.wf-facet__title {
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
}

.wf-facet__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wf-facet__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 4px;
	border-radius: 8px;
	color: rgba(251, 248, 242, 0.82);
	font-size: 14px;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.wf-facet__item:hover {
	background: rgba(251, 248, 242, 0.08);
	color: var(--wp--preset--color--accent-4);
}

.wf-facet__box {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	border: 1.5px solid rgba(251, 248, 242, 0.4);
	border-radius: 4px;
	position: relative;
}

.wf-facet__item.is-active .wf-facet__box {
	background: var(--wp--preset--color--accent-3);
	border-color: var(--wp--preset--color--accent-3);
}

.wf-facet__item.is-active .wf-facet__box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--wp--preset--color--accent-6);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wf-facet__item.is-active {
	color: var(--wp--preset--color--accent-4);
}

.wf-facet__label {
	flex: 1;
	min-width: 0;
}

.wf-facet__count {
	font-size: 11px;
	color: rgba(251, 248, 242, 0.45);
}

/* ---------- price ---------- */

.wf-price__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wf-price__row input {
	width: 100%;
	min-width: 0;
	padding: 9px 10px;
	border: 1px solid rgba(251, 248, 242, 0.2);
	border-radius: 10px;
	background: rgba(251, 248, 242, 0.08);
	color: var(--wp--preset--color--accent-4);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
}

.wf-price__sep {
	color: rgba(251, 248, 242, 0.5);
}

.wf-price__apply {
	width: 100%;
	margin-top: 10px;
	padding: 10px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-6);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.wf-price__apply:hover {
	background: var(--wp--preset--color--accent-4);
}

.wf-clear-filters {
	display: block;
	text-align: center;
	padding: 11px;
	border: 1px solid rgba(251, 248, 242, 0.25);
	border-radius: 999px;
	color: var(--wp--preset--color--accent-4);
	font-size: 13px;
	text-decoration: none;
}

.wf-clear-filters:hover {
	background: rgba(251, 248, 242, 0.1);
	color: var(--wp--preset--color--accent-4);
}

/* ---------- pagination ---------- */

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: 6px;
	border: none !important;
	margin: clamp(32px, 4vw, 52px) 0 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: none !important;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-4);
	border: 1px solid rgba(25, 23, 18, 0.1);
	color: var(--wp--preset--color--contrast) !important;
	font-size: 14px;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--wp--preset--color--accent-5);
}

/* ---------- cart: two-column layout ---------- */

/*
 * Items left, summary right. The three siblings WooCommerce prints inside
 * .woocommerce — the cart form, our "Continue shopping" link, and
 * .cart-collaterals — are placed explicitly rather than left to auto-flow,
 * because the link sits between the form and the collaterals in source order
 * and would otherwise land in the right-hand column.
 */
@media (min-width: 900px) {
	.woocommerce-cart .wf-shop-page .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(24px, 3vw, 44px);
		align-items: start;
	}

	.woocommerce-cart .wf-shop-page .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.woocommerce-cart .wf-shop-page .woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
		margin: 0;
	}

	.woocommerce-cart .wf-shop-page .wf-continue {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
		align-self: start;
	}

	/*
	 * WooCommerce floats .cart-collaterals right at 48% width; unwind both or
	 * the grid placement is ignored and the column collapses.
	 */
	.woocommerce-cart .wf-shop-page .cart-collaterals {
		grid-column: 2;
		grid-row: 2 / span 2;
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		position: sticky;
		top: 110px;
	}

	.woocommerce-cart .wf-shop-page .cart-collaterals .cart_totals {
		width: 100% !important;
		float: none !important;
	}
}

/* ---------- cart: compact line items ---------- */

.woocommerce-cart table.cart {
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
}

/* Column heads were rendering at the theme's h-scale, which is louder than
   the data underneath them. */
.woocommerce-cart table.cart thead th {
	padding: 0 12px 12px !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(25, 23, 18, 0.5);
}

.woocommerce-cart table.cart tbody td {
	padding: 14px 12px !important;
	vertical-align: middle;
	border-top: 1px solid rgba(25, 23, 18, 0.08);
}

.woocommerce-cart table.cart td.product-thumbnail {
	width: 72px;
}

.woocommerce-cart table.cart td.product-thumbnail img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.woocommerce-cart table.cart td.product-name a {
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.woocommerce-cart table.cart td.product-name a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
	font-size: 15px;
	white-space: nowrap;
}

.woocommerce-cart table.cart td.product-subtotal {
	font-weight: 600;
}

.woocommerce-cart table.cart td.product-remove {
	width: 32px;
}

/* The core "×" is a red serif glyph at body size; tone it to the palette. */
.woocommerce-cart table.cart td.product-remove a.remove {
	width: 22px;
	height: 22px;
	line-height: 20px;
	font-size: 18px;
	color: rgba(25, 23, 18, 0.35) !important;
	background: transparent !important;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
	color: #b3261e !important;
	background: transparent !important;
}

.woocommerce-cart table.cart td.product-quantity .quantity input.qty {
	width: 56px;
	padding: 7px 4px;
	font-size: 14px;
	text-align: center;
	border: 1px solid rgba(25, 23, 18, 0.18);
	border-radius: 8px;
}

/* Coupon + update row */
.woocommerce-cart table.cart td.actions {
	padding: 16px 12px !important;
}

.woocommerce-cart table.cart td.actions .coupon input.input-text {
	width: 160px;
	padding: 10px 12px;
	font-size: 14px;
	border: 1px solid rgba(25, 23, 18, 0.18);
	border-radius: 8px;
}

.woocommerce-cart table.cart td.actions .button {
	padding: 10px 20px !important;
	font-size: 13px !important;
	border-radius: 999px !important;
}

/* ---------- cart totals panel ---------- */

.woocommerce-cart .cart_totals > h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 24px;
	margin: 0 0 14px;
}

.woocommerce-cart .cart_totals table.shop_table {
	border-collapse: collapse;
	font-size: 15px;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: 12px 0 !important;
	border-top: 1px solid rgba(25, 23, 18, 0.08);
}

.woocommerce-cart .cart_totals table.shop_table th {
	font-size: 14px;
	font-weight: 500;
	width: 42%;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-size: 17px;
	font-weight: 600;
}

/* ---------- shipping calculator ---------- */

.woocommerce-cart .woocommerce-shipping-calculator {
	margin: 6px 0 0;
	font-size: 14px;
}

.woocommerce-cart .shipping-calculator-button {
	font-size: 13px;
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-cart .shipping-calculator-form {
	margin-top: 12px;
}

.woocommerce-cart .shipping-calculator-form .form-row {
	margin: 0 0 12px;
	padding: 0;
}

.woocommerce-cart .shipping-calculator-form label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(25, 23, 18, 0.55);
}

.woocommerce-cart .shipping-calculator-form select,
.woocommerce-cart .shipping-calculator-form input.input-text,
.woocommerce-cart .shipping-calculator-form input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	border: 1px solid rgba(25, 23, 18, 0.18);
	border-radius: 8px;
	background: #fff;
}

.woocommerce-cart .shipping-calculator-form .button {
	padding: 10px 22px !important;
	font-size: 13px !important;
	border-radius: 999px !important;
}

/* The freeship card sits above "Cart totals" inside the same column. */
.woocommerce-cart .cart-collaterals .wf-freeship {
	margin-bottom: 18px;
}

.woocommerce-cart .wf-continue {
	margin-top: 20px;
}

/*
 * Proceed to checkout.
 *
 * WooCommerce's block-theme button styles render this at the theme's h2 scale
 * inside a full-bleed block, which read as a slab rather than a button. Bring
 * it back to the pill used everywhere else in the design.
 */
.woocommerce-cart .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	box-sizing: border-box; /* without this, width:100% + padding overflowed the panel by 2×24px */
	width: 100%;
	padding: 15px 24px !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	background: var(--wp--preset--color--accent-2) !important;
	color: var(--wp--preset--color--accent-4) !important;
	transition: background 0.25s ease, transform 0.25s ease;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--wp--preset--color--accent-1) !important;
	transform: translateY(-1px);
}

/*
 * Bind the summary column into one visual panel.
 *
 * box-sizing is load-bearing here, not tidiness: the grid layout above forces
 * width: 100% !important on this element, and it is content-box by default
 * (WooCommerce never sets it), so the padding and border below rendered on
 * top of that 100% and pushed the panel — and the checkout button inside it,
 * also width: 100% — 46px past the grid column's right edge.
 */
.woocommerce-cart .cart-collaterals .cart_totals {
	box-sizing: border-box;
	padding: 20px 22px;
	border: 1px solid rgba(25, 23, 18, 0.1);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.5);
}

/* Below the grid breakpoint the two columns stack, so the sticky offset and
   the panel's own margins would fight each other. */
@media (max-width: 899px) {
	.woocommerce-cart .cart-collaterals {
		margin-top: 28px;
	}
}

/*
 * Flatten the box-in-box. woocommerce_before_cart_totals fires *inside*
 * .cart_totals, so the free-delivery card and the totals table were each
 * drawing their own border inside the summary panel's border — three nested
 * rectangles. The panel owns the outline; the children only tint.
 */
.woocommerce-cart .cart_totals .wf-freeship {
	border: none;
	border-radius: 10px;
}

.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table tbody,
.woocommerce-cart .cart_totals table.shop_table tr {
	border: none !important;
}

.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td {
	border-top: none !important;
}

/* ---------- cart: mobile line items ---------- */

/*
 * WooCommerce's shop_table_responsive turns each cart row into a stack of
 * full-width label/value rows — six rows and roughly 500px of height per
 * bottle, with the thumbnail hidden entirely. Rebuild the row as a compact
 * card instead: image, name, then price / qty / subtotal on one line.
 */
@media (max-width: 767px) {
	.woocommerce-cart table.cart thead {
		display: none;
	}

	.woocommerce-cart table.cart tbody tr.cart_item {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr) auto auto;
		grid-template-areas:
			"thumb name  name remove"
			"thumb price qty  sub";
		column-gap: 12px;
		row-gap: 8px;
		align-items: center;
		padding: 16px 0;
		border-top: 1px solid rgba(25, 23, 18, 0.08);
	}

	.woocommerce-cart table.cart tbody tr.cart_item td {
		display: block;
		width: auto !important;
		padding: 0 !important;
		border: none !important;
		text-align: left !important;
	}

	.woocommerce-cart table.cart td.product-thumbnail {
		grid-area: thumb;
		display: block !important; /* core hides it at this width */
	}

	.woocommerce-cart table.cart td.product-name     { grid-area: name; }
	.woocommerce-cart table.cart td.product-remove   { grid-area: remove; justify-self: end; }
	.woocommerce-cart table.cart td.product-price    { grid-area: price; }
	.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
	.woocommerce-cart table.cart td.product-subtotal { grid-area: sub; justify-self: end; }

	/*
	 * Core prints the column name through td::before as a bold, floated,
	 * body-size label. Keep it only where the value is ambiguous — two taka
	 * amounts side by side — and render it as a small cap above the figure.
	 */
	.woocommerce-cart table.cart tbody td::before {
		display: none !important;
	}

	.woocommerce-cart table.cart td.product-price::before,
	.woocommerce-cart table.cart td.product-subtotal::before {
		display: block !important;
		float: none !important;
		margin-bottom: 2px;
		font-size: 10px;
		font-weight: 600 !important;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: rgba(25, 23, 18, 0.45);
	}

	.woocommerce-cart table.cart td.product-price,
	.woocommerce-cart table.cart td.product-subtotal {
		font-size: 14px;
	}

	.woocommerce-cart table.cart td.product-quantity .quantity input.qty {
		width: 52px;
	}

	/* The coupon / update row stacks rather than crowding one line. */
	.woocommerce-cart table.cart td.actions {
		display: flex !important;
		flex-wrap: wrap;
		gap: 10px;
		padding: 16px 0 !important;
	}

	.woocommerce-cart table.cart td.actions .coupon {
		display: flex;
		gap: 8px;
		width: 100%;
	}

	.woocommerce-cart table.cart td.actions .coupon input.input-text {
		flex: 1 1 auto;
		width: auto;
	}
}

@media (max-width: 767px) {
	/*
	 * Breathing room inside the table border. This has to go on the rows, not
	 * the table: padding on a table element is ignored under
	 * border-collapse: collapse, so setting it there left the subtotal flush
	 * against the border.
	 */
	.woocommerce-cart table.cart tbody tr.cart_item,
	.woocommerce-cart table.cart td.actions {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	/*
	 * shop_table_responsive stripes alternate rows by painting each <td>. With
	 * the row re-laid-out as a grid the cells no longer tile, so the stripe
	 * showed up as disconnected grey patches behind some values. Drop it — the
	 * top border already separates the items.
	 */
	.woocommerce-cart table.cart tbody tr:nth-child(2n) td {
		background: transparent !important;
	}

	.woocommerce-cart table.cart tbody tr.cart_item:first-child {
		border-top: none;
	}

	/* Coupon input and its button share one line; Update cart takes the next. */
	.woocommerce-cart table.cart td.actions .coupon .button {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.woocommerce-cart table.cart td.actions > .button {
		width: 100%;
	}
}

/* ---------- single product: purchase bar ---------- */

/*
 * wafaa_buybar_open() wraps the price and the add-to-cart form together. On
 * desktop this is an ordinary block and the page reads as before; at 1024px and
 * below it becomes a bar fixed to the bottom of the screen, so the size picker,
 * quantity and both buttons stay reachable however far the shopper has scrolled.
 */
.wf-buybar {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wf-buybar__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Both only earn their place inside the fixed bar. */
.wf-buybar__toggle,
.wf-buybar__live {
	display: none;
}

.wf-buynow {
	flex: 1 1 auto;
	min-width: 150px;
	padding: 14px 30px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-6);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: filter 0.25s ease;
}

.wf-buynow:hover {
	filter: brightness(0.94);
}

.wf-buynow:disabled,
.wf-buynow.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- purchase bar: phones and tablets ---------- */

/*
 * 1024px so iPad landscape is covered too, per the brief. Product pages never
 * show the bottom tab bar (wafaa_is_primary_tab() treats a product as a detail
 * screen, not a tab), so this bar has the bottom of the viewport to itself and
 * the two can never stack.
 *
 * Two rows, kept as short as possible so the bar eats as little of the screen
 * as it can:
 *     [ price ][ size chips, scrolling ]
 *     [ qty ][ Add to cart ][ Buy now  ]
 */
@media (max-width: 1024px) {
	.wf-buybar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 150;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"price sizes"
			"actions actions";
		align-items: center;
		column-gap: 12px;
		row-gap: 8px;
		padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.96));
		backdrop-filter: blur(18px) saturate(170%);
		-webkit-backdrop-filter: blur(18px) saturate(170%);
		border-top: 1px solid rgba(25, 23, 18, 0.1);
		box-shadow: 0 -14px 34px -18px rgba(25, 23, 18, 0.42);
	}

	/*
	 * The price and the chips sit at different DOM depths — the price is a
	 * sibling of the form, the chips are four levels inside it — so they cannot
	 * share a row by ordinary means. display:contents removes the intermediate
	 * wrappers' boxes without touching the markup, which promotes the price,
	 * the chip row and the button row to grid items of the bar itself. The form
	 * still submits and all of WooCommerce's JS still finds its elements; only
	 * the boxes go away, and only below 1025px, so desktop is untouched.
	 */
	.wf-buybar__body,
	.wf-product .wf-buybar form.cart,
	.wf-buybar .variations,
	.wf-buybar .wf-variation,
	.wf-buybar .single_variation_wrap {
		display: contents;
	}

	.wf-buybar__head {
		grid-area: price;
		gap: 0;
	}

	.wf-buybar .wf-sizes {
		grid-area: sizes;
	}

	.wf-product .wf-buybar .woocommerce-variation-add-to-cart {
		grid-area: actions;
	}

	/* Row 1, left — one exact price, because a size is preselected. */
	.wf-buybar .price,
	.wf-buybar__live {
		font-size: 17px;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
	}

	.wf-buybar__live {
		display: block;
	}

	/* Row 1, right — only this scrolls; the price stays put.
	 *
	 * align-items:center and the vertical padding are both about clipping, not
	 * looks. Setting overflow-x also makes the Y axis a scrollport (the spec
	 * computes `visible` to `auto` on the other axis), so anything reaching the
	 * strip's edge gets cut — which is what flattened the top of the selected
	 * chip's ring. Centring stops the chips stretching to the full content box,
	 * and the padding leaves room for the ring. */
	.wf-buybar .wf-sizes {
		display: flex;
		align-items: center;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
		padding: 5px 1px;
	}

	.wf-buybar .wf-sizes::-webkit-scrollbar {
		display: none;
	}

	.wf-buybar .wf-size {
		flex: 0 0 auto;
		align-items: center;
		min-width: 0;
		padding: 7px 14px;
		/* Always 2px, so selecting only changes the border's colour. At 1px the
		   selected chip was 2px taller than the rest, which both nudged it past
		   the scrollport's edge and made the row twitch on every tap. */
		border-width: 2px;
		border-radius: 999px;
		font-size: 13.5px;
	}

	/* The chosen size's price is already the price on the left of this row. */
	.wf-buybar .wf-size__price {
		display: none;
	}


	/*
	 * Everything that only adds height. .wf-reset and .woocommerce-variation are
	 * both revealed by WooCommerce with jQuery .show(), which writes an inline
	 * display that beats a class selector — hence !important on those two.
	 */
	.wf-buybar .wf-variation__label,
	.wf-buybar .woocommerce-variation-description,
	.wf-buybar .woocommerce-variation-availability {
		display: none;
	}

	.wf-buybar .wf-reset,
	.wf-buybar .woocommerce-variation {
		display: none !important;
	}

	/* Row 2 — quantity, Add to cart, Buy now. */
	/* align-items:stretch, not center: it makes the quantity stepper exactly as
	   tall as Add to cart without either being given a hard-coded height. */
	.wf-product .wf-buybar .woocommerce-variation-add-to-cart {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 8px;
	}

	.wf-buybar .wf-qty {
		flex: 0 0 auto;
	}
	/* Size overrides for the stepper live with the base rules at the foot of
	   this file — placed here they sat earlier in the cascade than the base
	   block and silently lost at equal specificity. */

	.wf-product .wf-buybar button.single_add_to_cart_button,
	.wf-product .wf-buybar .wf-buynow {
		flex: 1 1 0;
		min-width: 0;
		padding: 11px 8px;
		font-size: 14px;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	/* No-JS fallback only; wafaa.js measures the rendered bar and overrides it. */
	body.single-product {
		padding-bottom: 130px;
	}

	/* The gallery was running to roughly half the viewport on a phone. */
	.wf-product__gallery .woocommerce-product-gallery__image img {
		max-height: 300px;
	}
}

/*
 * On a tablet the bar spans the full viewport, which stretched a single "Buy
 * now" across ~380px of button. Centre the contents with padding rather than a
 * max-width on the wrappers: those are display:contents above and have no box
 * left to constrain. The bar itself still spans the screen.
 */
@media (min-width: 700px) and (max-width: 1024px) {
	.wf-buybar {
		padding-left: max(14px, calc((100vw - 720px) / 2));
		padding-right: max(14px, calc((100vw - 720px) / 2));
	}
}

/* ---------- quantity stepper ---------- */

/*
 * WooCommerce ships a bare <input type="number">. Its native spinners are ~10px,
 * invisible on touch, and were clipped by the pill around the field, so on a
 * phone there was no visible way to change quantity. These buttons replace them.
 *
 * No border or background: Add to cart and Buy now should dominate this row, and
 * a boxed control next to two solid pills pulled more attention than a quantity
 * field deserves. Keeping it chrome-less also hands its width back to the two
 * buttons that matter.
 */
.wf-qty {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	border: none;
	background: transparent;
}

.wf-qty__btn {
	display: grid;
	place-items: center;
	width: 28px;
	padding: 0;
	border: none;
	background: transparent;
	color: rgba(25, 23, 18, 0.55);
	cursor: pointer;
	transition: color 0.18s ease;
}

.wf-qty__btn:hover {
	color: var(--wp--preset--color--contrast);
}

/* WooCommerce's own wrapper draws a bordered pill; the stepper supplies its own
   (absent) chrome, so flatten it. */
.wf-product .wf-qty .quantity {
	margin: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.wf-product .wf-qty .quantity input.qty {
	/*
	 * box-sizing and padding are forced, and that is load-bearing. The theme's
	 * global form styles leave this input content-box with ~17.6px of padding
	 * either side, so a plain `width: 30px` rendered as 65px — which is how the
	 * stepper ended up 159% the width of Add to cart. Those rules are generated
	 * (theme.json / :where()) and are not beaten by specificity alone.
	 */
	box-sizing: border-box !important;
	width: 26px !important;
	min-width: 0;
	padding: 0 !important;
	border: none;
	background: transparent;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
	/* The buttons replace the native spinners; leaving both gives two competing
	   controls in one field. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.wf-product .wf-qty .quantity input.qty::-webkit-outer-spin-button,
.wf-product .wf-qty .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Tighter still in the purchase bar, where every pixel goes to the buttons. */
@media (max-width: 1024px) {
	.wf-buybar .wf-qty__btn {
		width: 24px;
	}

	.wf-product .wf-buybar .wf-qty .quantity input.qty {
		width: 22px !important;
		font-size: 14px;
	}
}

/* ---------- product card: two-up on phones ---------- */

/*
 * At two cards per row a phone gives each about 160px, so the card's desktop
 * metrics (20px padding, 25px title) no longer fit. These are scoped to the
 * two-column breakpoint only.
 */
@media (max-width: 599px) {
	li.wf-card {
		padding: 7px !important;
		border-radius: 15px;
	}

	.wf-card__media {
		border-radius: 10px;
	}

	.wf-card__meta {
		gap: 5px;
	}

	.wf-card__family {
		padding: 3px 7px;
		font-size: 8.5px;
		letter-spacing: 0.08em;
	}

	.wf-card__tagline {
		margin-top: 9px;
		font-size: 9.5px;
		letter-spacing: 0.08em;
	}

	/* The region sits after the family chip and is the first thing to make the
	   meta row wrap at this width. */
	.wf-card__region {
		display: none;
	}

	/* The base rule truncates the title to a single line with an ellipsis,
	   which is fine on a 250px card but ate the product name at 167px
	   ("Baccarat Rou…"). Two clamped lines instead, with the height reserved so
	   titles of one and two lines still line up across a row. */
	/* No reserved two-line height here. Doing that kept titles aligned but left
	   a visible hole under every one-line name, which made the card read as
	   tall and empty. The footer is pushed down by margin-top:auto below, so the
	   cards still end level without padding out the title. */
	.woocommerce ul.products li.wf-card .wf-card__title {
		margin-bottom: 2px;
		font-size: 14px;
		line-height: 1.15;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.wf-card__note {
		font-size: 11px;
		/* Two lines maximum — past that the cards in a row stop lining up. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.wf-card__foot {
		padding-top: 9px;
		gap: 6px;
	}

	.wf-card__buy {
		gap: 6px;
	}

	.wf-card__price {
		font-size: 11.5px;
		line-height: 1.25;
	}

	/*
	 * Cards in a row were ending at different heights: a two-line price range
	 * ("BDT 290.00 - BDT 1,000.00") made one card taller and `align-items:start`
	 * let each size independently. Stretch them and push the footer down so the
	 * Add buttons sit on one line regardless of how the text above wrapped.
	 */
	ul.products {
		align-items: stretch;
	}

	li.wf-card .wf-card__foot {
		margin-top: auto;
	}

	.wf-card__spec {
		font-size: 9.5px;
	}

	li.wf-card .wf-card__foot a.button,
	li.wf-card .wf-card__foot a.add_to_cart_button,
	li.wf-card .wf-card__foot button.wf-card__cta {
		padding: 8px 12px !important;
		font-size: 11.5px !important;
	}

	.wf-card__wish {
		width: 28px;
		height: 28px;
	}

	/* The in-card size picker has to fit the narrower card too. */
	.wf-card__size {
		padding: 7px 9px;
	}

	.wf-card__size-label {
		font-size: 12px;
	}

	.wf-card__size-price {
		font-size: 11px;
	}
}

/* The tablet-only price override that used to live here is gone: the base size
   above is now the same 15px, so the rule had stopped doing anything. */

/* ---------- catalogue: filter bar + drawer ---------- */

/*
 * Desktop keeps the sidebar on screen, so the bar and the drawer chrome are
 * only ever needed below 1025px.
 */
.wf-catalog__bar,
.wf-catalog__scrim,
.wf-catalog__side-head {
	display: none;
}

@media (max-width: 1024px) {
	/* One row: Filters, then the search taking whatever is left. */
	.wf-catalog__bar {
		display: flex;
		align-items: stretch;
		gap: 10px;
		margin-bottom: 4px;
	}

	.wf-filter-btn {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
		padding: 0 16px;
		border: 1px solid rgba(25, 23, 18, 0.16);
		border-radius: 12px;
		background: var(--wp--preset--color--accent-4);
		color: var(--wp--preset--color--contrast);
		font-family: var(--wp--preset--font-family--body);
		font-size: 14px;
		letter-spacing: 0.02em;
		cursor: pointer;
	}

	.wf-filter-btn__count {
		display: grid;
		place-items: center;
		min-width: 19px;
		height: 19px;
		padding: 0 5px;
		border-radius: 999px;
		background: var(--wp--preset--color--accent-2);
		color: var(--wp--preset--color--accent-4);
		font-size: 11px;
	}

	/* The bar's own search field: light, to sit on the page rather than in the
	   dark sidebar the other one lives in. */
	.wf-shop-search--bar {
		flex: 1 1 auto;
		min-width: 0;
		background: var(--wp--preset--color--accent-4);
		border: 1px solid rgba(25, 23, 18, 0.16);
		border-radius: 12px;
		padding: 4px 4px 4px 6px;
	}

	.wf-shop-search--bar input {
		color: var(--wp--preset--color--contrast);
		font-size: 14px;
	}

	.wf-shop-search--bar input::placeholder {
		color: rgba(25, 23, 18, 0.45);
	}

	.wf-shop-search--bar button {
		width: 34px;
		height: 34px;
		border-radius: 9px;
		background: var(--wp--preset--color--accent-2);
		color: var(--wp--preset--color--accent-4);
	}

	/* ---- the sidebar, as a drawer ---- */

	.wf-catalog__side {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 300;
		width: min(86vw, 340px);
		padding: 16px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--wp--preset--color--accent-2);
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
		box-shadow: 24px 0 60px -30px rgba(25, 23, 18, 0.7);
	}

	body.wf-filters-open .wf-catalog__side {
		transform: translateX(0);
		visibility: visible;
	}

	/* The sidebar draws its own dark panel; inside the drawer that would be a
	   second background on top of the drawer's own. */
	.wf-catalog__side .wf-shop-sidebar {
		padding: 0;
		border-radius: 0;
		background: transparent;
	}

	/* The drawer supplies the search; the sidebar's copy would be a duplicate. */
	.wf-catalog__side .wf-shop-search {
		display: none;
	}

	.wf-catalog__side-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18px;
		color: var(--wp--preset--color--accent-4);
		font-family: var(--wp--preset--font-family--display);
		font-size: 22px;
	}

	.wf-catalog__close {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 1px solid rgba(251, 248, 242, 0.24);
		border-radius: 999px;
		background: transparent;
		color: var(--wp--preset--color--accent-4);
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}

	.wf-catalog__scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 290;
		background: rgba(25, 23, 18, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.28s ease, visibility 0.28s;
	}

	body.wf-filters-open .wf-catalog__scrim {
		opacity: 1;
		visibility: visible;
	}
}

/* ---------- catalogue: reclaim the page-title band ---------- */

/*
 * The big "Products" / "Attar" heading is removed from view, not from the page.
 *
 * It is the catalogue's only <h1>, and this is the page meant to rank for the
 * whole range — deleting it outright would leave the document with no top-level
 * heading for search engines or screen readers. Hiding it visually keeps that
 * signal while giving the ~74px band back to the products, and the breadcrumb
 * directly above still names the page on screen.
 *
 * Same technique as .wf-visually-hidden; spelled out here because the element
 * is WooCommerce's and cannot be given that class without a template override.
 */
.wf-archive .woocommerce-products-header {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- catalogue: result count + sorting toolbar ---------- */

.wf-catalog__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	/* The count and the select carried their own block margins before; with
	   those zeroed below, the row needs its own clearance from the grid. */
	margin-bottom: clamp(14px, 1.6vw, 22px);
}

/* These are centred block elements by default (see the max-width rule near the
   top); inside the toolbar they are flex items and must not re-centre. */
.wf-catalog__toolbar .woocommerce-result-count,
.wf-catalog__toolbar .woocommerce-ordering {
	max-width: none;
	margin: 0;
	float: none;
}

/* Long form on desktop, short form on phones — see loop/result-count.php. */
.wf-count-short {
	display: none;
}

@media (max-width: 599px) {
	.wf-catalog__toolbar {
		/* Never wrap: fitting on one line is the whole point here. */
		flex-wrap: nowrap;
		gap: 10px;
	}

	.wf-count-long {
		display: none;
	}

	.wf-count-short {
		display: inline;
	}

	.wf-catalog__toolbar .woocommerce-result-count {
		flex: 0 0 auto;
		font-size: 13px;
		white-space: nowrap;
	}

	.wf-catalog__toolbar .woocommerce-ordering {
		flex: 1 1 auto;
		min-width: 0;
	}

	.wf-catalog__toolbar .woocommerce-ordering select {
		width: 100%;
		max-width: 100%;
		padding: 8px 10px;
		font-size: 13px;
		border-radius: 10px;
	}
}


/* ==========================================================================
   Homepage collection rows
   Banner poster beside a horizontally scrolling strip of the standard product
   cards. Rendered by [wafaa_collections] in the wafaa-core plugin.
   ========================================================================== */

/*
 * Tighter than a normal .wf-sec: the big heading that justified that padding is
 * gone, and two collections should clear one screen.
 *
 * Written as .wf-sec.wf-coll, not .wf-coll. Both are one class, so they tie on
 * specificity — and .wf-sec is declared in an inline <style> inside <body> on
 * the homepage, which puts it AFTER this stylesheet in document order and wins
 * the tie. The row kept its full 118px padding until this was doubled up.
 */
.wf-sec.wf-coll { padding: clamp(10px, 1.3vw, 18px) clamp(16px, 3vw, 40px); background: var(--wp--preset--color--accent-4); }
.wf-sec.wf-coll + .wf-sec.wf-coll { padding-top: 0; }

/*
 * One grid for the whole row so the eyebrow, the tools and the two halves of
 * the body can be re-ordered together on a phone.
 */
.wf-coll .wf-sec-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 20px;
}

.wf-coll .wf-eyebrow {
	grid-column: 1;
	margin: 0 0 clamp(6px, 0.8vw, 10px);
}

.wf-coll-tools {
	grid-column: 2;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(6px, 0.8vw, 10px);
}

.wf-coll-body { grid-column: 1 / -1; }

.wf-coll-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wf-coll-more:hover { color: var(--wp--preset--color--accent-1); }

.wf-coll-arrows { display: flex; gap: 8px; }

.wf-coll-arrow {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(25, 23, 18, 0.14);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 15px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.wf-coll-arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
}
.wf-coll-arrow:disabled { opacity: 0.3; cursor: default; }

/* Banner column + scroller. */
.wf-coll-body {
	display: grid;
	/* Poster narrower than the cards, matching the reference: it is a label,
	   not the main event. */
	grid-template-columns: clamp(150px, 14vw, 205px) minmax(0, 1fr);
	gap: clamp(14px, 1.6vw, 24px);
	/*
	 * start, not stretch. Stretching made the strip a fixed-height grid item and
	 * the cards were then squeezed into that height — cards with a two-line
	 * title needed 538px, got 512px, and had their Add button clipped off by
	 * the strip's overflow. Letting the strip size to its own content and
	 * stretching only the banner gets equal heights the other way round.
	 */
	align-items: start;
}

.wf-coll-banner {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 18px;
	text-decoration: none;
	background: var(--wp--preset--color--accent-5);
	/*
	 * No aspect-ratio at this width, deliberately. The banner is a stretched
	 * grid item, so its height is definite — and an aspect-ratio would then
	 * derive WIDTH from that height (a ~750px row made a 549px banner) and
	 * blow straight through the 256px column. Letting it fill the row keeps
	 * the poster the same height as the cards beside it, which is the point.
	 */
	min-width: 0;
	min-height: 300px;
	/* Mirrors the strip's bottom allowance so the poster ends level with the
	   cards rather than below them. Keep in step with it. */
	margin-bottom: 16px;
	/*
	 * align-self alone. A percentage height here fed back into sizing the grid
	 * row, capping the row below what the tallest card actually needed — cards
	 * with a two-line title then overflowed their own box and lost their Add
	 * button off the bottom. Stretch fills the row without taking part in
	 * measuring it.
	 *
	 * NOTE: the cards sit ~26px below the top of the strip for a reason I have
	 * not pinned down, so the poster reads as starting slightly higher than
	 * them. align-self:end was tried as a cure and is worse — it drops the
	 * stretch and collapses the poster to its 300px minimum.
	 */
	align-self: stretch;
	/*
	 * This theme has no global border-box, so height:100% was setting the
	 * CONTENT height and the 24px padding was being added on top — the banner
	 * came out 48px taller than the cards beside it and nothing lined up.
	 */
	box-sizing: border-box;
}
.wf-coll-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No banner uploaded yet: a composed panel, so the row still looks intentional
   rather than showing an empty box. */
.wf-coll-banner--blank {
	display: grid;
	place-items: center;
	padding: 24px;
	text-align: center;
	background: linear-gradient(165deg, var(--wp--preset--color--accent-2), var(--wp--preset--color--accent-6));
}
.wf-coll-banner__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.05;
	color: var(--wp--preset--color--accent-4);
}
.wf-coll-banner__note {
	display: block;
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
}

/*
 * The strip. ul.products is a grid everywhere else on the site, so it is
 * re-declared as a flex row here — a grid cannot scroll horizontally with
 * fixed-width children the way this needs to.
 */
.wf-coll-track {
	overflow: hidden;
	/*
	 * A few px of slack below the clip line. Cards stretch to the strip's row
	 * height, but a two-line title leaves their content ~5px taller than that,
	 * and the bottom edge of the Add button was being shaved off. The cards
	 * still all measure the same; this just stops the clip landing on them.
	 * 16px, not 8: desktop needed ~5px of that and the narrower phone cards
	 * needed ~6px, so this covers both with a little to spare.
	 */
	padding-bottom: 16px;
}

.wf-coll-track ul.products {
	/*
	 * Grid, not flex. As a flex row this inherited WooCommerce's float-grid
	 * styling for loop items and roughly half the cards ended up sitting 26px
	 * lower than their neighbours — with no property distinguishing the two
	 * groups, and their Add buttons then clipped by the strip's edge. Resetting
	 * float/clear/margin did not settle it. grid-auto-flow:column gives one
	 * predictable row, equal heights from align-items, and none of that
	 * inheritance applies.
	 */
	display: grid !important;
	grid-auto-flow: column;
	/* Wider cards so a two-line name and the price range breathe, and the
	   product photo gets real width. */
	grid-auto-columns: clamp(205px, 25%, 290px);
	grid-template-columns: none !important;
	align-items: stretch;
	gap: clamp(12px, 1.4vw, 22px);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	/* Explicit. Per spec one non-visible axis forces the other to auto, so
	   overflow-x:auto alone left the strip scrolling vertically and stealing
	   the wheel from the page. Nothing overflows it now — see the note rule
	   below, which is what makes the cards fit. */
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wf-coll-track ul.products::-webkit-scrollbar { display: none; }

/*
 * WooCommerce clearfixes ul.products with ::before/::after for its float grid.
 * In a grid container those stop being invisible table-cells and become real
 * grid items, taking a track of their own and adding height the cards then
 * overflow. They have no job here.
 */
.wf-coll-track ul.products::before,
.wf-coll-track ul.products::after { display: none; }

/*
 * No description line inside a collection strip.
 *
 * The strip gives each card ~206px of width and a fixed row height. The note is
 * a single ellipsised line there — it reads as a fragment, and it was the last
 * ~31px (line + margin) that pushed the taller cards past the row and clipped
 * their Add button. The full description is one tap away on the product page;
 * the grid listings keep it.
 */
.wf-coll-track .wf-card__note { display: none; }

/*
 * The card is content-box by default in this theme, so a stretched height sets
 * its CONTENT box and the 20px padding is then added on top — the border box
 * ends up taller than the row it was stretched into, and the Add button pokes
 * ~5px below the strip's clipped edge. Same trap as the collection banner and
 * the cart totals.
 */
.wf-coll-track li.wf-card { box-sizing: border-box; }

.wf-coll-track ul.products li.product {
	/* Width comes from grid-auto-columns now. WooCommerce's float-grid margins
	   would still offset the tracks, so they stay reset. */
	width: auto;
	min-width: 0;
	margin: 0;
	float: none;
	scroll-snap-align: start;
}


@media (max-width: 1024px) {
	/* Banner goes above the strip and turns landscape — a tall poster beside
	   two cards leaves the cards too narrow to read. */
	/*
	 * display:contents dissolves the body box so the poster and the strip
	 * become items of the row's own grid — which is what lets the View more /
	 * arrows row sit BETWEEN them here while sitting up beside the eyebrow on
	 * desktop, without duplicating the markup.
	 */
	.wf-coll .wf-sec-inner { grid-template-columns: minmax(0, 1fr); }
	.wf-coll-body { display: contents; }
	.wf-coll .wf-eyebrow { grid-row: 1; }
	.wf-coll-banner { grid-row: 2; }
	.wf-coll-tools { grid-row: 3; grid-column: 1; justify-self: start; margin: 14px 0; }
	.wf-coll-track { grid-row: 4; }

	.wf-coll-banner { height: auto; min-height: 0; margin-bottom: 0; aspect-ratio: 16 / 6; border-radius: 14px; }
	.wf-coll-track ul.products { grid-auto-columns: clamp(190px, 36%, 250px); }
}

@media (max-width: 720px) {
	.wf-coll-banner { aspect-ratio: 16 / 7; }
	.wf-coll-head { margin-bottom: 14px; }
	.wf-coll-arrow { width: 32px; height: 32px; font-size: 13px; }
	.wf-coll-track ul.products { grid-auto-columns: 46%; }
}

/* -------------------------------------------------------------------------
 * Combo sets (homepage)
 *
 * Two groups — sprays, then oils — each a two-row grid that scrolls sideways.
 * Reuses the collection strip's card treatment, but lays cards out in two rows
 * instead of one, so eight sit in view on a desktop and four on a phone.
 * ---------------------------------------------------------------------- */

/*
 * .wf-sec is declared in an inline <style> inside <body> on the homepage, which
 * beats style.css on a specificity tie by document order. Doubling the class is
 * what makes this padding actually apply — same trap as .wf-sec.wf-coll.
 */
.wf-sec.wf-csets { background: var(--wp--preset--color--base); }

.wf-cset + .wf-cset { margin-top: clamp(34px, 4vw, 58px); }

.wf-cset-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(16px, 2vw, 26px);
}

.wf-cset-title {
	margin: 6px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.wf-cset-tools {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

/*
 * No overflow clip on the wrapper.
 *
 * The collection strip clips here and pads 16px to keep the Add button clear of
 * the clip line. That works for one row; with two, cards were still overhanging
 * the line by ~10px and losing the bottom of the button. Rather than guess a
 * bigger number, the wrapper simply does not clip — the ul below is the scroll
 * container and its own overflow-x already bounds the shelf horizontally, which
 * is the only axis that needs bounding. Nothing can be vertically clipped now.
 */
.wf-cset-track { padding-bottom: 6px; }

.wf-cset-track ul.products {
	/*
	 * Grid with column flow, two rows deep. Column flow is what allows sideways
	 * scrolling at all — a wrapping row-flow grid can only grow downwards.
	 * Cards therefore fill top-to-bottom then left-to-right, which is the
	 * standard reading order for a scrolling two-row shelf.
	 */
	display: grid !important;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--wf-cset-rows, 2), auto);
	/* Four columns in view, gaps subtracted so the fourth card ends flush with
	   the section rather than half-clipped. */
	grid-auto-columns: calc((100% - 3 * clamp(12px, 1.4vw, 22px)) / 4);
	grid-template-columns: none !important;
	align-items: stretch;
	gap: clamp(12px, 1.4vw, 22px);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	/* Explicit: per spec one non-visible axis forces the other to auto, and
	   overflow-x alone left the shelf stealing the page's mouse wheel. */
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wf-cset-track ul.products::-webkit-scrollbar { display: none; }

/*
 * The clip allowance for the bottom row — and the reason it is !important.
 *
 * With overflow hidden the PADDING box is the clip boundary, so this is not
 * cosmetic spacing: cards are stretched to their grid row but their flex
 * content runs ~26px taller, and without this the Add button on every card in
 * the last row was cut roughly in half.
 *
 * It has to shout because this stylesheet already carries a blanket
 * `ul.products { padding: 0 !important }`, which no amount of specificity can
 * outrank. Scoped to .wf-cset-track so nothing else on the site is affected.
 */
.wf-cset-track ul.products { padding-bottom: 30px !important; }

/* WooCommerce's float-grid clearfix pseudo-elements become real grid items in
   a grid container and claim a track of their own. */
.wf-cset-track ul.products::before,
.wf-cset-track ul.products::after { display: none; }

/* No description line: at this card width it renders as an ellipsised fragment
   and its height is what pushes the Add button past the clip. */
.wf-cset-track .wf-card__note { display: none; }

/* content-box is the theme default, so a stretched height sets the CONTENT box
   and padding is added on top — the border box then overflows its row. */
.wf-cset-track li.wf-card { box-sizing: border-box; }

.wf-cset-track ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	/* Two columns in view. Rows are pinned at two regardless of the desktop
	   count, so a four-card group reads as a 2x2 block rather than one long
	   row the phone would have to scroll through. */
	.wf-cset-track ul.products {
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: calc((100% - clamp(10px, 2vw, 16px)) / 2);
		gap: clamp(10px, 2vw, 16px);
	}
	.wf-cset-head { align-items: flex-start; }
	.wf-cset-tools { margin-left: 0; width: 100%; justify-content: space-between; }

	/* The one-row shelf stays one row here too: it scrolls itself instead. */
	.wf-cset--row .wf-cset-track ul.products { grid-template-rows: auto; }
}

/* -------------------------------------------------------------------------
 * Build your own combo
 * ---------------------------------------------------------------------- */

.wf-sec.wf-byoc { padding-top: 0; }

.wf-byoc-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(200px, 30%, 380px);
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
	overflow: hidden;
	padding: clamp(26px, 3.6vw, 54px);
	border-radius: 18px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wf-byoc-card:hover { transform: translateY(-3px); }

.wf-byoc-copy { display: flex; flex-direction: column; gap: 10px; }
.wf-byoc-card .wf-eyebrow { color: rgba(251, 248, 242, 0.55); }

.wf-byoc-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(28px, 4vw, 54px);
	line-height: 1;
	text-transform: uppercase;
}

.wf-byoc-note {
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(251, 248, 242, 0.68);
}

.wf-byoc-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	align-self: flex-start;
	margin-top: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	border: 1px solid rgba(251, 248, 242, 0.35);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wf-byoc-card:hover .wf-byoc-cta { background: rgba(251, 248, 242, 0.1); }

/* Three bottles fanned out. Decorative only — the copy carries the meaning. */
.wf-byoc-art { position: relative; display: block; height: clamp(150px, 18vw, 240px); }

.wf-byoc-art img {
	position: absolute;
	bottom: 0;
	width: 52%;
	object-fit: contain;
	opacity: 0.85;
	filter: grayscale(0.25);
}

.wf-byoc-art img:nth-child(1) { left: 0; transform: rotate(-8deg); }
.wf-byoc-art img:nth-child(2) { left: 24%; bottom: 8%; z-index: 2; }
.wf-byoc-art img:nth-child(3) { right: 0; transform: rotate(8deg); }

@media (max-width: 900px) {
	.wf-byoc-card { grid-template-columns: minmax(0, 1fr); }
	/* The bottles are decoration and cost a third of the screen on a phone. */
	.wf-byoc-art { display: none; }
}

/* -------------------------------------------------------------------------
 * Load-more grid (attar and inspired landing pages)
 * ---------------------------------------------------------------------- */

.wf-grid-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: clamp(28px, 3.4vw, 48px);
}

.wf-grid-count {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: rgba(25, 23, 18, 0.5);
}

.wf-grid-btn { cursor: pointer; }

/* The label stays put while loading — swapping it for "Loading…" reflows the
   button width and makes the whole row twitch. The arrow carries the state. */
.wf-grid-btn.is-loading { opacity: 0.6; pointer-events: none; }
.wf-grid-btn.is-loading span { animation: wf-grid-bob 0.7s ease-in-out infinite; }

@keyframes wf-grid-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.wf-grid-btn.is-loading span { animation: none; }
}

/* -------------------------------------------------------------------------
 * Shared section shell
 *
 * These were only ever declared in front-page.html's inline <style>, which no
 * other template loads — so the combo shelves and collection rows added to the
 * attar and inspired landing pages rendered with zero horizontal padding and
 * their headings sat flush against the viewport edge.
 *
 * Declared here so any template can use the section shell. The homepage's
 * inline copy still wins on document order (an inline <style> in <body> comes
 * after this stylesheet), so nothing there changes — these are the same values.
 * ---------------------------------------------------------------------- */

.wf-sec {
	position: relative;
	z-index: 6;
	padding: clamp(58px, 8vw, 118px) clamp(16px, 3vw, 40px);
	scroll-margin-top: clamp(88px, 7vw, 104px);
}

.wf-sec-inner { max-width: 1320px; margin: 0 auto; }

.wf-sec-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(24px, 3.4vw, 52px);
}

.wf-sec-head h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(32px, 4.6vw, 66px);
	line-height: 0.98;
	color: var(--wp--preset--color--contrast);
}

.wf-sec-head p {
	margin: 0;
	max-width: 300px;
	font-size: 14px;
	line-height: 1.65;
	color: rgba(25, 23, 18, 0.55);
}

.wf-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: 12px;
}

.wf-sec-cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 3.4vw, 52px);
}

.wf-pill {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 17px 32px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-4);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-decoration: none;
	border: 0;
	box-shadow: 0 24px 46px -24px rgba(27, 51, 39, 0.85);
	transition: background 0.25s ease, color 0.25s ease;
}

.wf-pill:hover {
	background: var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--accent-4);
}

/* ==========================================================================
   Blog — Wafaa Journal (templates/single.html, templates/home.html)
   ========================================================================== */

.wf-post,
.wf-blog {
	padding: 0 16px clamp(60px, 7vw, 110px);
}

.wf-post__inner {
	max-width: 760px;
	margin: 0 auto;
}

.wf-post__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.wf-post__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.wf-post .wf-post__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.12;
	text-wrap: balance;
}

.wf-post__date {
	margin-top: 12px;
	font-size: 13px;
	color: rgba(25, 23, 18, 0.55);
}

.wf-post__cover {
	margin: 26px 0 34px;
}

.wf-post__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.wf-post__content {
	font-size: 17px;
	line-height: 1.8;
	color: rgba(25, 23, 18, 0.86);
}

.wf-post__content > * + * {
	margin-top: 1.1em;
}

.wf-post__content h2 {
	margin-top: 1.9em;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

.wf-post__content h3 {
	margin-top: 1.5em;
	font-size: 19px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.wf-post__content a:not(.button):not(.wf-card__media-link):not(.wf-card a) {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wf-post__content ul,
.wf-post__content ol {
	padding-left: 1.3em;
}

.wf-post__content li + li {
	margin-top: 0.4em;
}

/* The quick-answer box at the top of a post. */
.wf-post__content .wf-tldr {
	padding: 18px 22px;
	border-radius: 12px;
	border-left: 3px solid var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-5);
}

.wf-post__content .wf-tldr p {
	margin: 0;
}

.wf-post__content .wf-tldr p + p {
	margin-top: 0.5em;
}

/* Comparison tables scroll sideways on a phone instead of squeezing. */
.wf-post__content .wp-block-table {
	overflow-x: auto;
}

.wf-post__content table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.55;
}

.wf-post__content th,
.wf-post__content td {
	padding: 11px 12px;
	border: 0;
	border-bottom: 1px solid rgba(25, 23, 18, 0.1);
	text-align: left;
	vertical-align: top;
}

.wf-post__content thead th {
	border-bottom: 2px solid var(--wp--preset--color--accent-1);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.wf-post__content tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/* Product cards inside an article: 2 across on a phone, 3 in the column,
   or kept at 2 when the shortcode asks for columns="2" (attar row + spray row). */
.wf-post__content .woocommerce {
	margin-top: 1.4em;
}

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

	.wf-post__content ul.products.columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wf-post__content .wf-cta {
	padding: 22px 24px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

.wf-post__content .wf-cta p {
	margin: 0;
}

.wf-post__content .wf-cta a {
	color: var(--wp--preset--color--accent-3) !important;
}

/* ---------- blog index ---------- */

.wf-blog__head {
	max-width: 760px;
	margin: 0 auto clamp(28px, 4vw, 48px);
	text-align: center;
}

.wf-blog__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.15;
}

.wf-blog__sub {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(25, 23, 18, 0.62);
}

.wf-blog__list {
	max-width: 1180px;
	margin: 0 auto;
}

.wf-blog .wf-blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(26px, 3vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.wf-blog .wf-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.wf-blog .wf-blog__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wf-blog__cover img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
}

.wf-blog__date {
	margin-top: 14px;
	font-size: 13px;
	color: rgba(25, 23, 18, 0.55);
}

.wf-blog .wf-blog__card-title {
	margin: 6px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.2;
}

.wf-blog__card-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wf-blog__excerpt {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(25, 23, 18, 0.7);
}

.wf-blog__excerpt .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--accent-1);
}

.wf-blog__pages {
	margin-top: 40px;
	justify-content: center;
}