/*
 * Fit & Flare — site styles on top of Astra.
 *
 * Brand: ivory page, near-black ink, one muted gold accent; Cormorant
 * Garamond for headings, Jost for text (both set in Astra and served locally).
 * Text colours here are chosen for ≥ 4.5:1 on their background (WCAG AA).
 */

:root {
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Jost', system-ui, sans-serif;
	--ff-ink: #161412;
	--ff-text: #3a3530;
	--ff-muted: #5c5752;
	--ff-gold: #7a5c22;        /* text-safe gold: 5.9:1 on ivory, 5.2:1 on sand */
	--ff-champagne: #d8c7a8;   /* decorative only */
	--ff-ivory: #faf8f5;
	--ff-sand: #f1ebe2;
	--ff-line: #e8e1d6;
	--ff-section-gap: clamp(64px, 8vw, 104px);
}

body {
	font-family: var(--font-body);
	color: var(--ff-text);
}

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

.ff-button,
.ast-button,
.button,
.wp-block-button__link,
.ast-outline-button {
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ff-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 32px;
	background: var(--ff-ink);
	color: var(--ff-ivory);
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.ff-button:hover,
.ff-button:focus-visible {
	background: var(--ff-gold);
	color: #fff;
}

.ff-link {
	padding-bottom: 3px;
	border-bottom: 1px solid currentColor;
	color: var(--ff-ink);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.ff-link:hover,
.ff-link:focus-visible {
	color: var(--ff-gold);
}

/* ------------------------------------------------------ Announcement bar */

/* Astra paints this row with the page background at higher specificity. */
.site-header .ast-above-header-bar.ast-above-header {
	background: var(--ff-ink) !important;
	border: 0;
}

.ast-above-header-bar .ast-builder-html-element p.ff-announce {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	color: var(--ff-ivory);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ff-announce span + span::before {
	content: "·";
	margin: 0 14px;
	color: var(--ff-champagne);
}

@media (max-width: 767px) {
	.ff-announce .ff-announce__extra {
		display: none;
	}

	.ast-above-header-bar .ast-builder-html-element p.ff-announce {
		font-size: 11px;
		letter-spacing: 0.12em;
	}
}

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

.ast-primary-header-bar {
	border-bottom: 1px solid var(--ff-line);
}

/* Uppercase links run wider; keep them on one line next to the search icon. */
.ast-desktop .main-header-menu {
	flex-wrap: nowrap;
}

.main-header-menu > .menu-item > .menu-link {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.main-header-menu .sub-menu .menu-link {
	font-size: 14px;
}

/* Icon links were 18×18px; make them comfortable tap targets. */
.ast-header-social-wrap .ast-builder-social-element,
.ast-search-menu-icon .slide-search,
.ast-mobile-menu-trigger-minimal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* Social icons in ink, not Instagram purple / Facebook blue. */
.ast-header-social-wrap .ast-builder-social-element {
	--color: var(--ff-ink) !important;
	color: var(--ff-ink);
}

.ast-header-social-wrap .ast-builder-social-element:hover {
	--color: var(--ff-gold) !important;
}

/* "Shop By Category" lists every category in stock: two columns so it fits the screen. */
@media (min-width: 922px) {
	.main-header-menu .menu-item.ff-auto-categories > .sub-menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 520px;
	}
}

/* -------------------------------------------------------------------- Hero */

/* Header + announcement bar height, so the hero's button and arrows sit above the fold. */
@media (min-width: 922px) {
	.csl {
		--csl-viewport-offset: 143px;
	}

	/* Keep the arrows clear of the floating WhatsApp button. */
	.csl__nav {
		margin-right: 72px;
	}
}

/* ------------------------------------------------------- WhatsApp widget */

/* Icon only: the "Need Help? Chat with us" label covered hero arrows and product details. */
.wa__btn_popup .wa__btn_popup_txt {
	display: none !important;
}

@media (max-width: 921px) {
	.wa__btn_popup {
		right: 16px !important;
		bottom: 16px !important;
	}

	/* Product pages already have "Order on WhatsApp"; the bubble covered the colour options. */
	.single-product #wa {
		display: none;
	}
}

/* -------------------------------------------------------- Section system */

.ff-section {
	padding-top: var(--ff-section-gap);
}

.ff-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
}

.ff-section__head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ff-eyebrow,
.entry-content p.ff-eyebrow {
	margin: 0 0 10px;
	color: var(--ff-gold);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.ff-section__title,
.entry-content .ff-section__title {
	margin: 0;
	color: var(--ff-ink);
	font-size: clamp(32px, 3.4vw, 46px);
	font-weight: 600;
	line-height: 1.1;
}

/* --------------------------------------------------------- Category tiles */

.ff-cats__grid {
	display: grid;
	grid-template-columns: repeat(var(--ff-cols, 6), minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff-cats__link {
	display: block;
	color: var(--ff-ink);
	text-decoration: none;
}

.ff-cats__img {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--ff-sand);
}

.ff-cats__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.ff-cats__link:hover img,
.ff-cats__link:focus-visible img {
	transform: scale(1.04);
}

.ff-cats__name {
	display: block;
	margin-top: 14px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

/* Phones and tablets: a swipeable row. */
@media (max-width: 921px) {
	.ff-cats__grid {
		display: flex;
		gap: 12px;
		margin: 0 -16px;
		padding: 0 16px 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ff-cats__grid li {
		flex: 0 0 42%;
		scroll-snap-align: start;
	}
}

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

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	margin: 14px 0 4px;
	color: var(--ff-ink);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	color: var(--ff-ink);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
}

.woocommerce ul.products li.product .price del,
.single-product div.product p.price del {
	margin-right: 6px;
	color: var(--ff-muted);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins,
.single-product div.product p.price ins {
	text-decoration: none;
}

/* Portrait product photos (WooCommerce crops them 3:4). */
.woocommerce ul.products li.product a img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* One quiet sale badge. */
.woocommerce ul.products li.product .ast-onsale-card,
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.woocommerce div.product span.onsale,
.woocommerce-page div.product span.onsale,
.woocommerce div.product .ast-onsale-card {
	top: 10px;
	left: 10px;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 5px 9px;
	border-radius: 0;
	background: var(--ff-ink);
	box-shadow: none;
	color: var(--ff-ivory);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- Homepage */

.ff-products ul.products {
	margin-bottom: 0;
}

/* "Shop all products" under the grid, so shoppers need not scroll back up. */
.entry-content .ff-section__more {
	margin: clamp(32px, 4vw, 48px) 0 0;
	text-align: center;
}

.ff-story,
.entry-content .ff-story {
	margin-top: var(--ff-section-gap);
	padding: clamp(64px, 9vw, 120px) 20px;
	background: var(--ff-sand);
	text-align: center;
}

.ff-story > * {
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
}

.entry-content .ff-story .ff-story__title {
	margin-bottom: 20px;
	color: var(--ff-ink);
	font-size: clamp(36px, 4.6vw, 60px);
	font-style: italic;
	font-weight: 500;
	line-height: 1.1;
}

.ff-story .ff-story__text {
	max-width: 620px;
	color: var(--ff-text);
	font-size: 17px;
	line-height: 1.75;
}

.ff-story .ff-story__link {
	margin: 28px auto 0;
}

.ff-promises {
	padding: clamp(56px, 7vw, 88px) 20px;
	border-bottom: 1px solid var(--ff-line);
}

.ff-promises__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
}

.ff-promises svg {
	fill: none;
	stroke: var(--ff-gold);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ff-promises h3 {
	margin: 14px 0 6px;
	color: var(--ff-ink);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ff-promises p {
	margin: 0 auto;
	max-width: 240px;
	color: var(--ff-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

@media (max-width: 921px) {
	.ff-section__head {
		margin-bottom: 24px;
	}

	.ff-promises__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 20px;
	}
}

/* Join the WhatsApp list (every page, above the footer). */
.ff-join {
	padding: clamp(56px, 7vw, 88px) 20px;
	background: var(--ff-sand);
	text-align: center;
}

.ff-join__inner {
	max-width: 620px;
	margin: 0 auto;
}

.ff-join .ff-join__title {
	margin: 0 0 12px;
	color: var(--ff-ink);
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 600;
	line-height: 1.15;
}

.ff-join__text {
	margin: 0 0 28px;
	color: var(--ff-text);
}

/* The homepage story band is sand too; a line keeps the two apart there. */
.home .ff-join {
	background: var(--ff-ivory);
}

/* ------------------------------------------------------- Shop and archive */

.woocommerce-js .woocommerce-breadcrumb,
.woocommerce-js .woocommerce-breadcrumb a {
	color: var(--ff-muted);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ff-cat-chips {
	margin: 0 0 24px;
}

.ff-cat-chips ul {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0 0 6px;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}

.ff-cat-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--ff-line);
	background: #fff;
	color: var(--ff-ink);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
}

.ff-cat-chips a[aria-current] {
	border-color: var(--ff-ink);
	background: var(--ff-ink);
	color: var(--ff-ivory);
}

/* Desktop has the category list in the sidebar. */
@media (min-width: 922px) {
	.ff-cat-chips {
		display: none;
	}
}

.widget-title,
.widget .wp-block-heading {
	font-size: 24px;
	font-weight: 600;
}

/* Link lists (sidebar categories, deals) in ink; gold only on hover. */
#secondary .widget a {
	color: var(--ff-ink);
}

#secondary .widget a:hover,
#secondary .widget a:focus-visible {
	color: var(--ff-gold);
}

/* -------------------------------------------------------- Product page */

.single-product div.product .product_title {
	color: var(--ff-ink);
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 600;
	line-height: 1.1;
}

.single-product div.product p.price,
.single-product div.product span.price {
	color: var(--ff-ink);
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 500;
}

.single-product .single-product-category a,
.single-product .ast-woo-product-category {
	color: var(--ff-gold);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* "Order on WhatsApp": brand ink instead of WhatsApp green, square like the other buttons. */
.wwa-button-container .wwa-whatsapp-btn {
	min-height: 52px;
	max-width: none;
	padding: 0 32px !important;
	border-radius: 0 !important;
	background: var(--ff-ink) !important;
	color: var(--ff-ivory) !important;
	font-family: var(--font-body);
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wwa-button-container .wwa-whatsapp-btn:hover,
.wwa-button-container .wwa-whatsapp-btn:focus-visible {
	transform: none;
	background: var(--ff-gold) !important;
	box-shadow: none;
}

/* Before a colour is chosen. */
.wwa-button-container .wwa-whatsapp-btn.wwa-disabled {
	background: var(--ff-sand) !important;
	color: var(--ff-muted) !important;
	opacity: 1;
}

.wwa-icon {
	flex: none;
}

.ff-order-info {
	margin: 24px 0 8px;
	padding: 20px 22px;
	background: var(--ff-sand);
	font-size: 14px;
	line-height: 1.65;
}

.ff-order-info__title {
	margin: 0 0 8px;
	color: var(--ff-ink);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ff-order-info ul {
	margin: 0 0 0 1.1em;
}

.ff-order-info li + li {
	margin-top: 4px;
}

.ff-order-info__more {
	display: inline-block;
	margin-top: 10px;
	color: var(--ff-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Description in the summary, below Order on WhatsApp and "How ordering works". */
.ff-product-description {
	margin: 32px 0 0;
	font-size: 15px;
}

.entry-content .ff-product-description__title {
	margin: 0 0 12px;
	color: var(--ff-ink);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ff-product-description p:last-child {
	margin-bottom: 0;
}

/* Urdu order policy in descriptions. */
.ff-product-description [dir="rtl"] {
	text-align: right;
	line-height: 2;
}

.single-product .related.products > h2,
.single-product .up-sells > h2 {
	font-size: clamp(30px, 3vw, 40px);
	text-align: center;
}

/* ------------------------------------------- About, Contact, Collections… */

/* Astra caps page-builder blocks at the 1200px content width; text reads better narrower. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .ff-page {
	max-width: 860px;
	margin: 0 auto;
	padding: 56px 20px 72px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .ff-page--wide {
	max-width: 1240px;
}

.ff-page h1 {
	margin-bottom: 16px;
}

.ff-page h2 {
	margin: 44px 0 14px;
	font-size: 32px;
}

.ff-page .ff-lead {
	max-width: 680px;
	color: var(--ff-text);
	font-size: 1.15em;
}

.ff-steps li {
	margin-bottom: 10px;
}

.ff-buttons {
	gap: 12px;
	margin-top: 36px;
}

/* Two by two: four columns left the email address breaking mid-word. */
.ff-cards.wp-block-columns {
	flex-wrap: wrap !important;
	gap: 16px;
	margin-top: 32px;
}

.ff-cards.wp-block-columns > .wp-block-column {
	flex: 1 1 calc(50% - 8px) !important;
}

@media (max-width: 600px) {
	.ff-cards.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.ff-cards .ff-card {
	padding: 22px 24px;
	background: var(--ff-sand);
}

.ff-page .ff-card h2 {
	margin: 0 0 8px;
	font-size: 22px;
}

.ff-card p {
	margin: 0;
	overflow-wrap: anywhere;
}

.ff-collection {
	margin-top: 56px;
}

.ff-page .ff-collection h2 {
	margin: 0 0 4px;
}

.ff-collection__link {
	margin-bottom: 20px;
}

.ff-collection__link a {
	color: var(--ff-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

[dir="rtl"][lang="ur"] {
	text-align: right;
	line-height: 2;
}

@media (max-width: 921px) {
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .ff-page {
		padding: 32px 16px 48px;
	}

	.ff-page h2 {
		margin-top: 32px;
		font-size: 28px;
	}
}

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

.site-primary-footer-wrap {
	padding-top: 72px;
	padding-bottom: 56px;
}

.site-footer .widget-title {
	color: var(--ff-ivory);
	font-size: 24px;
}

.site-footer .ast-builder-html-element img {
	max-width: 160px;
	height: auto;
}

/* Social links under the logo, aligned with it, in ivory. */
.site-footer [data-section="section-fb-social-icons-1"] {
	justify-content: flex-start;
	margin-top: 12px;
}

.site-footer .footer-social-inner-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-align: left;
}

.site-footer .footer-social-item {
	--color: var(--ff-ivory) !important;
	min-height: 32px;
	margin: 0 !important;
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] {
	border-top-color: #34302b;
}

@media (max-width: 921px) {
	.site-footer [data-section="section-fb-social-icons-1"] {
		justify-content: center;
	}

	.site-footer .footer-social-inner-wrap {
		align-items: center;
	}
}