/* ==========================================================================
   Mushk Scent — quiet luxury layer
   Colours, fonts and spacing come from theme.json (CSS variables below).
   ========================================================================== */

:root {
	--m-base: var(--wp--preset--color--base, #F8F4EC);
	--m-cream: var(--wp--preset--color--cream, #F1EADD);
	--m-sand: var(--wp--preset--color--sand, #E2D6C2);
	--m-taupe: var(--wp--preset--color--taupe, #6F6256);
	--m-stone: var(--wp--preset--color--stone, #A39482);
	--m-espresso: var(--wp--preset--color--espresso, #2B2420);
	--m-charcoal: var(--wp--preset--color--charcoal, #3E3833);
	--m-gold: var(--wp--preset--color--champagne, #B89B6E);
	--m-serif: var(--wp--preset--font-family--serif);
	--m-sans: var(--wp--preset--font-family--sans);
	--m-ease: cubic-bezier(.22, .61, .36, 1);
	--m-slow: 700ms;
	--m-mid: 400ms;
	--m-fast: 250ms;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: var(--m-sand); color: var(--m-espresso); }
p { max-width: 64ch; }
.has-text-align-center p, p.has-text-align-center { margin-inline: auto; }
img { height: auto; }

:focus-visible { outline: 1px solid var(--m-espresso); outline-offset: 4px; }

/* ---------- Small typographic pieces ---------- */

.mushk-eyebrow,
.is-style-mushk-eyebrow {
	font-family: var(--m-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-taupe);
	margin: 0 0 12px;
}
.mushk-eyebrow span { letter-spacing: .08em; text-transform: none; }

.mushk-display { font-size: var(--wp--preset--font-size--display) !important; line-height: 1.05 !important; letter-spacing: -.01em; }
.mushk-italic, em { font-style: italic; }

.mushk-tagline {
	font-family: var(--m-serif);
	font-style: italic;
	font-size: 20px;
	color: var(--m-charcoal);
	margin: 4px 0 20px;
}

/* Underline that grows from the left */
.mushk-link,
.wp-block-navigation-item__content,
.mushk-houses a,
.mushk-card__title a,
.entry-content a:not(.wp-element-button) {
	background-image: linear-gradient(var(--m-gold), var(--m-gold));
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--m-mid) var(--m-ease), color var(--m-fast);
	padding-bottom: 2px;
}
.mushk-link:hover, .mushk-link:focus-visible,
.wp-block-navigation-item__content:hover,
.mushk-houses a:hover,
.mushk-card__title a:hover,
.entry-content a:not(.wp-element-button):hover { background-size: 100% 1px; }

.mushk-link {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--m-espresso);
}
.mushk-link-row { text-align: center; margin: 48px auto 0; }

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

.wp-element-button, .wp-block-button__link {
	transition: background-color var(--m-mid) var(--m-ease), color var(--m-mid) var(--m-ease), border-color var(--m-mid) var(--m-ease);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--m-espresso);
	border: 1px solid currentColor;
	padding: 17px 34px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--m-espresso);
	color: var(--m-base);
	border-color: var(--m-espresso);
}
/* Outline button on dark photography */
.mushk-hero .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--m-base); border-color: rgba(248,244,236,.8); }
.mushk-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--m-base); color: var(--m-espresso); border-color: var(--m-base); }

/* ---------- Announcement & header ---------- */

.mushk-announcement { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--m-charcoal); }
.mushk-announcement p { max-width: none; margin: 0; }

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--m-base);
	transition: box-shadow var(--m-mid) var(--m-ease);
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
body.mushk-scrolled .wp-site-blocks > header.wp-block-template-part { box-shadow: 0 1px 0 var(--m-sand); }

/* ---------- Sections & reveal ---------- */

.mushk-section { padding-block: var(--wp--preset--spacing--60); }
.mushk-section--lg { padding-block: var(--wp--preset--spacing--70); }
.mushk-section-head { text-align: center; margin-bottom: var(--wp--preset--spacing--50); }
.mushk-section-head h2 { margin-top: 0; }

.mushk-js .mushk-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease);
}
.mushk-js .mushk-reveal.is-visible { opacity: 1; transform: none; }

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

.mushk-hero.wp-block-cover { padding: 0 clamp(24px, 6vw, 96px) clamp(48px, 8vh, 96px); }
.mushk-hero .wp-block-cover__image-background { transform: scale(1.03); animation: mushk-settle 2.4s var(--m-ease) forwards; }
.mushk-hero h1, .mushk-hero p { color: var(--m-base); }
.mushk-hero .mushk-eyebrow { color: rgba(248,244,236,.85); }
.mushk-hero p:not(.mushk-eyebrow) { font-size: 17px; max-width: 44ch; }
@keyframes mushk-settle { to { transform: scale(1); } }

/* ---------- Arch mask (signature motif) ---------- */

.mushk-arch, .is-style-mushk-arch img {
	border-radius: 999px 999px 0 0;
	overflow: hidden;
}

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

.mushk-tiles {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 40px) clamp(16px, 3vw, 40px);
}
.mushk-tile a { display: block; text-align: center; color: var(--m-espresso); }
.mushk-tile__media { display: block; aspect-ratio: 4 / 5; background: var(--m-cream); }
.mushk-tile__media img, .mushk-tile__placeholder {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s var(--m-ease);
}
.mushk-tile a:hover img { transform: scale(1.04); }
.mushk-tile__label { display: block; margin-top: 18px; font-family: var(--m-serif); font-size: 24px; }

@media (max-width: 781px) {
	.mushk-tiles {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 68%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		scrollbar-width: none;
	}
	.mushk-tiles::-webkit-scrollbar { display: none; }
	.mushk-tile { scroll-snap-align: start; }
}

/* ---------- Product cards (shortcode grids + WooCommerce blocks) ---------- */

.mushk-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 64px clamp(16px, 3vw, 40px);
}
@media (max-width: 1023px) { .mushk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .mushk-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 16px; } }

.mushk-card { text-align: center; }
.mushk-card__media {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 4 / 5; background: var(--m-cream); margin-bottom: 20px;
}
.mushk-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--m-slow) var(--m-ease), transform 1.2s var(--m-ease); }
.mushk-card__img--hover { opacity: 0; }
.mushk-card:hover .mushk-card__img--hover { opacity: 1; }
.mushk-card:hover .mushk-card__img { transform: scale(1.03); }
.mushk-card__house { margin-bottom: 6px; }
.mushk-card__title { font-family: var(--m-serif); font-size: 22px; font-weight: 400; line-height: 1.25; margin: 0 0 4px; }
.mushk-card__title a { color: var(--m-espresso); }
.mushk-card__family { font-size: 13px; color: var(--m-taupe); margin: 0 auto 6px; }
.mushk-card__price { font-size: 14px; margin: 0 auto; color: var(--m-charcoal); }
.mushk-card__price del { color: var(--m-stone); margin-right: 6px; }
.mushk-card__price ins { text-decoration: none; }

/* WooCommerce Product Collection / All Products blocks */
.wc-block-product-template .wc-block-product,
.wc-block-grid__product { text-align: center; }
.wc-block-components-product-image,
.wc-block-grid__product-image { background: var(--m-cream); overflow: hidden; margin-bottom: 20px !important; }
.wc-block-components-product-image img,
.wc-block-grid__product-image img { aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--m-ease); }
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.03); }
.wc-block-product .wp-block-post-title,
.wc-block-grid__product-title { font-family: var(--m-serif); font-size: 22px !important; font-weight: 400; margin: 0 0 4px; }
.wc-block-product .wp-block-post-title a { color: var(--m-espresso); }
.wc-block-components-product-price, .wc-block-grid__product-price { font-size: 14px !important; color: var(--m-charcoal); }

/* No loud sale badges */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge,
.onsale { display: none !important; }

/* Star ratings in champagne */
.wc-block-components-product-rating__stars span::before,
.star-rating span::before,
.wc-block-components-product-rating-stars__stars span::before { color: var(--m-gold); }
.star-rating::before, .wc-block-components-product-rating__stars::before { color: var(--m-sand); }

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

.mushk-collections__tabs {
	display: flex; justify-content: center; flex-wrap: wrap;
	gap: 8px clamp(20px, 3vw, 40px);
	margin: 0 auto 48px;
}
.mushk-collections__tabs [role="tab"] {
	background: none; border: 0; cursor: pointer; padding: 6px 0;
	font: 500 13px/1 var(--m-sans); letter-spacing: .14em; text-transform: uppercase;
	color: var(--m-taupe);
	border-bottom: 1px solid transparent;
	transition: color var(--m-fast), border-color var(--m-mid) var(--m-ease);
}
.mushk-collections__tabs [role="tab"]:hover { color: var(--m-espresso); }
.mushk-collections__tabs [role="tab"][aria-selected="true"] { color: var(--m-espresso); border-bottom-color: var(--m-gold); }
.mushk-collections__tabs { display: none; }               /* tabs only appear when JS runs */
.mushk-js .mushk-collections__tabs { display: flex; }
.mushk-js .mushk-collections__panel[hidden] { display: none; }
.mushk-collections__panel { animation: mushk-fade var(--m-slow) var(--m-ease); }
.mushk-collections__panel + .mushk-collections__panel { margin-top: 64px; }
.mushk-js .mushk-collections__panel + .mushk-collections__panel { margin-top: 0; }
@keyframes mushk-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 680px) {
	.mushk-collections__tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.mushk-collections__tabs [role="tab"] { white-space: nowrap; }
}

/* ---------- Houses ---------- */

.mushk-houses {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 20px clamp(28px, 5vw, 72px);
}
.mushk-houses a {
	font-family: var(--m-serif); font-variant: small-caps; letter-spacing: .08em;
	font-size: clamp(22px, 2.4vw, 30px); color: var(--m-espresso); opacity: .6;
	transition: opacity var(--m-mid) var(--m-ease), background-size var(--m-mid) var(--m-ease);
}
.mushk-houses a:hover { opacity: 1; }

/* ---------- Signature (editorial split) ---------- */

.mushk-signature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.mushk-signature__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--m-cream); }
.mushk-signature__media img { width: 100%; height: 100%; object-fit: cover; }
.mushk-signature__poem { font-family: var(--m-serif); font-style: italic; font-size: 22px; line-height: 1.5; }
@media (max-width: 781px) { .mushk-signature { grid-template-columns: 1fr; } }

/* ---------- Notes ribbon ---------- */

.mushk-notes { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--m-charcoal); }
.mushk-notes li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--m-gold); margin: 0 12px; vertical-align: middle; }

/* ---------- Scent profile & personality ---------- */

.mushk-profile { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 80px); text-align: center; }
.mushk-profile__col { position: relative; }
.mushk-profile__col + .mushk-profile__col::before {
	content: ""; position: absolute; left: calc(clamp(32px, 5vw, 80px) / -2); top: 10%; bottom: 10%; width: 1px; background: var(--m-sand);
}
.mushk-profile__notes { font-family: var(--m-serif); font-size: 26px; line-height: 1.3; color: var(--m-espresso); margin: 8px auto 12px; }
.mushk-profile__desc { font-size: 15px; color: var(--m-taupe); margin: 0 auto; max-width: 30ch; }
@media (max-width: 781px) {
	.mushk-profile { grid-template-columns: 1fr; gap: 40px; }
	.mushk-profile__col + .mushk-profile__col::before { left: 35%; right: 35%; top: -20px; bottom: auto; width: auto; height: 1px; }
}

.mushk-personality { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.mushk-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 32px; }
.mushk-facts dd, .mushk-facts dt { overflow-wrap: normal; word-break: normal; hyphens: none; }
.mushk-facts dt { margin: 0 0 4px; }
.mushk-facts dd { margin: 0; font-family: var(--m-serif); font-size: 21px; line-height: 1.3; color: var(--m-espresso); }
.mushk-bars { display: grid; gap: 22px; }
.mushk-bar { display: grid; gap: 10px; }
.mushk-bar .mushk-eyebrow { margin: 0; }
.mushk-bar__track { display: block; height: 1px; background: var(--m-sand); position: relative; }
.mushk-bar__fill { position: absolute; left: 0; top: -1px; height: 3px; background: var(--m-gold); transform-origin: left; }
.mushk-js .mushk-reveal .mushk-bar__fill { transform: scaleX(0); transition: transform 1.2s var(--m-ease) .2s; }
.mushk-js .mushk-reveal.is-visible .mushk-bar__fill { transform: scaleX(1); }

.mushk-story p { font-size: 17px; }

/* ---------- Single product page (WooCommerce blocks) ---------- */

.mushk-product-info { position: sticky; top: 110px; align-self: start; }
@media (max-width: 781px) { .mushk-product-info { position: static; } }

.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image,
.wp-block-woocommerce-product-gallery,
.woocommerce-product-gallery { background: var(--m-cream); }
.woocommerce-product-gallery .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px !important; }
.woocommerce-product-gallery .flex-control-thumbs img { opacity: .55; transition: opacity var(--m-mid); }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }

.wp-block-woocommerce-product-price { font-size: 18px !important; margin: 0 0 16px; }
.wp-block-woocommerce-breadcrumbs, .woocommerce-breadcrumb { font-size: 12px; color: var(--m-taupe); letter-spacing: .04em; }

/* Add to bag: full width, quiet quantity */
.wp-block-add-to-cart-form form.cart,
.wp-block-woocommerce-add-to-cart-form form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 24px; }
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button { flex: 1 1 220px; min-height: 54px; }
.quantity .qty, .wc-block-components-quantity-selector {
	border: 1px solid var(--m-sand) !important; background: transparent; border-radius: 0 !important;
	min-height: 54px; width: 72px; text-align: center; font: 400 15px var(--m-sans); color: var(--m-espresso);
}

/* Variation sizes as text buttons (WooCommerce "Add to cart with options" block uses pills) */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill,
.variations select {
	border: 1px solid var(--m-sand) !important; border-radius: 0 !important; background: transparent !important;
	font: 500 13px var(--m-sans); letter-spacing: .08em; color: var(--m-espresso); padding: 12px 18px;
}
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill--selected { border-color: var(--m-espresso) !important; }
.variations th.label { font: 500 12px var(--m-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--m-taupe); }
.stock { font-size: 14px; color: var(--m-taupe) !important; }
.stock.out-of-stock { color: var(--m-charcoal) !important; }

/* Accordions (core Details block) */
.wp-block-details { border-top: 1px solid var(--m-sand); padding: 18px 0; margin: 0 !important; }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--m-sand); }
.wp-block-details summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
	font: 500 12px var(--m-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--m-espresso);
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font: 300 20px var(--m-sans); transition: transform var(--m-mid) var(--m-ease); }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: 14px; font-size: 15px; }

/* Reviews */
.wp-block-woocommerce-product-reviews, #reviews { font-size: 15px; }
#reviews .commentlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; padding: 0; }
#reviews .commentlist li { list-style: none; border-top: 1px solid var(--m-sand); padding-top: 20px; }
#reviews .avatar { display: none; }
@media (max-width: 781px) { #reviews .commentlist { grid-template-columns: 1fr; } }

/* ---------- Shop / archive & filters ---------- */

.wc-block-product-filters, .wp-block-woocommerce-product-filters { font-size: 14px; }
.wc-block-product-filters h3, .wp-block-woocommerce-product-filters h3,
.wp-block-woocommerce-product-filter-attribute .wp-block-heading,
.wp-block-woocommerce-product-filter-price .wp-block-heading {
	font: 500 12px var(--m-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--m-espresso); margin-bottom: 12px;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] { border-color: var(--m-stone); border-radius: 0; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked { background: var(--m-espresso); border-color: var(--m-espresso); }
.wc-block-components-price-slider__range-input-progress { --range-color: var(--m-gold); }
.wc-block-product-filter-removable-chips__item, .wc-block-components-filter-reset-button { border-radius: 0 !important; border-color: var(--m-sand) !important; font-size: 12px; }
.wp-block-query-pagination, .wc-block-pagination { font-size: 13px; letter-spacing: .1em; }
.woocommerce-result-count, .wc-block-product-results-count { font-size: 13px; color: var(--m-taupe); }
.wc-block-catalog-sorting select, .woocommerce-ordering select { border: 0; border-bottom: 1px solid var(--m-sand); background: transparent; font-size: 13px; padding: 6px 0; }

/* ---------- Forms (newsletter, search, checkout) ---------- */

input[type="email"], input[type="search"], input[type="text"], input[type="tel"], textarea, select,
.wc-block-components-text-input input {
	border-radius: 0 !important;
	border-color: var(--m-sand) !important;
	background-color: transparent !important;
	color: var(--m-espresso);
}
input:focus, textarea:focus, select:focus { border-color: var(--m-espresso) !important; outline: none; box-shadow: none !important; }
.mushk-newsletter input[type="email"] { border: 0 !important; border-bottom: 1px solid var(--m-espresso) !important; padding: 14px 0; width: 100%; }

.wc-block-checkout, .wc-block-cart { --wc-radius: 0; }
.wc-block-components-button:not(.is-link) { border-radius: 0 !important; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }

/* Newsletter */
.mushk-newsletter { display: flex; gap: 16px; align-items: flex-end; margin-top: 32px; }
.mushk-newsletter input[type="email"] { flex: 1; font-size: 15px; }
.mushk-newsletter .wp-element-button { background: transparent; color: var(--m-espresso); border: 0; padding: 14px 0; }
.mushk-newsletter .wp-element-button:hover { background: transparent; color: var(--m-gold); }

/* ---------- Promise strip & footer ---------- */

.mushk-plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mushk-promise h3 { font-size: 22px; margin-bottom: 8px; }

.mushk-promise p { font-size: 14px; margin-inline: auto; }
.mushk-promise svg { color: var(--m-gold); }
.mushk-footer { font-size: 14px; }
.mushk-footer a { color: var(--m-charcoal); }
.mushk-footer a:hover { color: var(--m-espresso); }
.mushk-watermark { position: relative; }
.mushk-watermark::after {
	content: "مسك"; position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
	font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: clamp(120px, 18vw, 260px); line-height: 1;
	color: var(--m-espresso); opacity: .04; pointer-events: none; direction: rtl;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.mushk-js .mushk-reveal { opacity: 1; transform: none; }
}

/* Shop layout */
.mushk-shop { gap: clamp(32px, 4vw, 64px); }
.mushk-shop__filters .wp-block-heading { font: 500 12px var(--m-sans) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--m-espresso); margin: 0 0 12px; }
.mushk-shop__filters .wp-block-woocommerce-product-filter-attribute,
.mushk-shop__filters .wp-block-woocommerce-product-filter-taxonomy,
.mushk-shop__filters .wp-block-woocommerce-product-filter-price { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--m-sand); }