/* Scented Mile — clean luxury storefront. Logical properties throughout so RTL works from one file. */

:root {
	--ground: #0e0d0b;
	--ground-2: #1b1915;
	--bone: #f4f1ec;
	--white: #ffffff;
	--ink: #141311;
	--ink-soft: #5f584b;
	--on-dark: #efece6;
	--on-dark-soft: #b9b0a0;
	--gold: #c4ab7c;
	--gold-deep: #8a6f42;
	--line: #e4dfd5;

	--font-display: "Cormorant Garamond", "Amiri", Georgia, serif;
	--font-text: "Inter", "Tajawal", system-ui, sans-serif;

	--step-small: 0.875rem;
	--step-body: 1rem;
	--step-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--step-h2: clamp(1.875rem, 1.3rem + 1.8vw, 3rem);
	--step-h1: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem);

	--margin: clamp(16px, 3vw, 48px);
	--max: 1320px;
	--gap: clamp(64px, 8vw, 120px);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[lang^="ar"] {
	--font-display: "El Messiri", "Amiri", "Cormorant Garamond", serif;
	--font-text: "Tajawal", "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 var(--step-body) / 1.6 var(--font-text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--ground); }
.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus { inset-inline-start: var(--margin); top: 8px; z-index: 100; background: var(--white); padding: 8px 12px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3 { line-height: 1.35; letter-spacing: 0; }
h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }

/* Announcement + header */
/* One line that scrolls sideways; eight copies, the track moves by half its width and loops. */
.ann { background: var(--ground); color: var(--gold); font-size: var(--step-small); padding-block: 10px; overflow: hidden; white-space: nowrap; }
.ann-track { display: inline-flex; animation: ann-scroll 40s linear infinite; will-change: transform; }
.ann-track span { padding-inline: 28px; position: relative; }
.ann-track span::after { content: ""; position: absolute; inset-inline-end: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--gold-deep); }
.ann:hover .ann-track, .ann:focus-within .ann-track, .ann:active .ann-track { animation-play-state: paused; }
@keyframes ann-scroll { to { transform: translateX(-50%); } }
@keyframes ann-scroll-rtl { to { transform: translateX(50%); } }
html[dir="rtl"] .ann-track { animation-name: ann-scroll-rtl; }
/* The ticker keeps scrolling even when the system asks for reduced motion (the owner wants it);
   it pauses on hover, touch and keyboard focus. */
.bar {
	position: sticky; top: 0; z-index: 30;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	height: 68px; padding-inline: var(--margin);
	background: var(--white); border-block-end: 1px solid var(--line);
}
.bar-nav { display: flex; gap: clamp(16px, 2.4vw, 32px); font-size: var(--step-small); font-weight: 500; }
.bar-nav a, .bar-end a { text-decoration: none; padding-block: 8px; transition: color .2s var(--ease); }
.bar-nav a:hover, .bar-lang:hover { color: var(--gold-deep); }
.bar-brand { display: flex; align-items: center; justify-content: center; gap: 14px; text-decoration: none; }
.brand-mark { height: 40px; width: auto; }
.brand-type { height: 13px; width: auto; }
.bar-end { display: flex; justify-content: flex-end; align-items: center; gap: 20px; font-size: var(--step-small); font-weight: 500; }
.bar-cart { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0 !important; background: transparent; color: var(--ink); border-radius: 50%; transition: color .2s var(--ease), transform .2s var(--ease); }
.bar-cart .ico { width: 26px; height: 26px; }
.bar-cart:hover { color: var(--gold-deep) !important; }
.bar-cart:active { transform: scale(.94); }
.bar-cart .badge { position: absolute; top: 0; inset-inline-end: -2px; min-width: 20px; height: 20px; padding-inline: 5px; display: grid; place-items: center; border-radius: 10px; background: var(--gold); color: var(--ground); font-size: .75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bar-cart .badge[data-count="0"] { display: none; }
/* Radiating rings when something is added */
.bar-cart::before, .bar-cart::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.bar-cart.is-added::before { animation: cart-ring 1s var(--ease) 1; }
.bar-cart.is-added::after { animation: cart-ring 1s var(--ease) .18s 1; }
.bar-cart.is-added .ico { animation: cart-pop .5s var(--ease) 1; }
@keyframes cart-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes cart-pop { 0% { transform: scale(1); } 35% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
	/* Still shows that something happened: a gold flash, no travel or scaling. */
	.bar-cart.is-added::before { animation: cart-flash 1.2s ease 1; transform: none; inset: -3px; }
	.bar-cart.is-added::after, .bar-cart.is-added .ico { animation: none; }
}
@keyframes cart-flash { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.bar-menu { display: none; }

/* Buttons */
.btn { display: inline-block; padding: 16px 28px; text-decoration: none; font-weight: 600; text-align: center; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-gold { background: var(--gold); color: var(--ground); }
.btn-gold:hover { background: #c9a96a; }
.btn-line { color: var(--on-dark); box-shadow: inset 0 0 0 1.5px var(--on-dark-soft); }
.btn-line:hover { background: var(--on-dark); color: var(--ground); }
.btn-dark { background: var(--ground); color: var(--on-dark); }
.btn-dark:hover { background: var(--gold-deep); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ground); color: var(--on-dark); min-height: min(78svh, 760px); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: clamp(40px, 6vw, 96px) var(--margin); max-width: 680px; margin-inline-start: auto; }
.lead { font-size: var(--step-lead); line-height: 1.45; color: var(--on-dark-soft); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--step-small); color: var(--on-dark-soft); }
.hero-points li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--gold); margin-inline-end: 8px; vertical-align: middle; }
.hero-photo { position: relative; min-height: 360px; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Sections */
.block { max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding: var(--gap) var(--margin) 0; }
.block:last-of-type { padding-block-end: var(--gap); }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-block-end: clamp(24px, 3vw, 40px); }
.more { font-weight: 600; text-decoration: none; border-block-end: 2px solid var(--gold); padding-block-end: 2px; }
.more:hover { color: var(--gold-deep); }
.block-tint, .block-dark { max-width: none; margin-block-start: var(--gap); padding: var(--gap) var(--margin); }
.block-tint { background: var(--bone); }
.block-tint > *, .block-dark > * { max-width: var(--max); margin-inline: auto; }
.block-dark { background: var(--ground); color: var(--on-dark); }
.block-tint + .block, .block-dark + .block { padding-block-start: var(--gap); }

/* Product cards */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px) clamp(12px, 1.6vw, 24px); }
.card-art { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 5; background: var(--tint, var(--bone)); padding: 8% 12% 0; transition: transform .5s var(--ease); overflow: hidden; }
.card-art .vial { height: 88%; width: auto; transition: transform .5s var(--ease); transform-origin: bottom center; }
.card:hover .card-art .vial { transform: scale(1.04) translateY(-4px); }
.card-body { padding-block: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.card-brand { font-size: var(--step-small); color: var(--ink-soft); }
.card-name { font: 600 1.375rem/1.2 var(--font-display); }
html[lang^="ar"] .card-name { line-height: 1.4; }
.card-name a { text-decoration: none; }
.card-price { font-weight: 600; font-size: var(--step-small); font-variant-numeric: tabular-nums; margin-block-start: 4px; }
.card-add { display: flex; gap: 6px; margin-block-start: 10px; }
.card-add a { flex: 1; text-align: center; padding: 10px 4px; font-size: var(--step-small); font-weight: 600; text-decoration: none; background: var(--bone); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.card-add a:hover { background: var(--ground); color: var(--on-dark); }
.card-add a:active { transform: scale(.96); }

/* Sizes */
.sizes-photo { margin: 0 0 clamp(16px, 2vw, 28px); background: var(--white); display: flex; justify-content: center; }
.sizes-photo img { width: min(100%, 760px); height: auto; max-height: 460px; object-fit: contain; }
.sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.size { display: flex; flex-direction: column; gap: 4px; padding: 24px; background: var(--white); text-decoration: none; transition: transform .3s var(--ease); }
.size:hover { transform: translateY(-4px); }
.size-art { display: flex; justify-content: center; align-items: flex-end; height: 220px; margin-block-end: 12px; }
.size-art .vial { height: 100%; width: auto; }
.size-name { font: 600 1.625rem/1.1 var(--font-display); }
html[lang^="ar"] .size-name { line-height: 1.4; }
.size-meta { color: var(--ink-soft); font-size: var(--step-small); }
.size-price { font-weight: 600; margin-block-start: 8px; }
.size-price small { display: block; font-weight: 400; color: var(--ink-soft); }
.size-bottle { background: var(--ground); color: var(--on-dark); justify-content: flex-end; }
.size-bottle .size-meta { color: var(--gold); }
.size-text { color: var(--on-dark-soft); margin-block: 8px 20px; }

/* Who */
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.who-tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 220px; padding: 24px; background: var(--ground); color: var(--on-dark); text-decoration: none; transition: background .25s var(--ease); }
.who-tile:hover { background: var(--gold-deep); }
.who-name { font: 600 2rem/1.1 var(--font-display); }
.who-count { color: var(--on-dark-soft); font-size: var(--step-small); }

/* How it works */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.how-text { display: flex; flex-direction: column; gap: 32px; }
.how-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 24px; font-size: var(--step-lead); line-height: 1.45; color: var(--on-dark-soft); }
.how-steps strong { color: var(--on-dark); display: block; }
.how-photo { margin: 0; }
.how-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.how-photo figcaption { font-size: var(--step-small); color: var(--on-dark-soft); margin-block-start: 10px; }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding-block: 20px; font-weight: 600; font-size: var(--step-lead); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-deep); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-block-end: 20px; max-width: 62ch; color: var(--ink-soft); }

/* Footer */
.foot { background: var(--ground); color: var(--on-dark); padding: clamp(48px, 6vw, 88px) var(--margin) 24px; }
.foot-grid { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-logo { display: flex; align-items: center; gap: 14px; margin-block-end: 16px; }
.foot-logo .brand-mark { height: 56px; }
.foot-logo .brand-type { height: 14px; }
.foot-brand p:last-child { color: var(--on-dark-soft); max-width: 34ch; }
.foot h3 { font: 600 1rem/1.2 var(--font-text); color: var(--gold); margin-block-end: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--on-dark-soft); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot-legal { max-width: var(--max); margin: 48px auto 0; font-size: var(--step-small); color: var(--on-dark-soft); }

/* Entrance */
.js .reveal:not(.in) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .reveal:not(.in) { opacity: 1; }
	.card-art .vial, .size, .btn { transition: none; }
}

/* Shop */
.woocommerce-products-header, .shop-wrap > .page-title { margin-block-end: 8px; }
.shop-wrap { max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding: clamp(32px, 4vw, 64px) var(--margin) var(--gap); }
.woocommerce-products-header__title, .page-title { font-size: var(--step-h2); margin-block-end: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 32px; }
.chips a { padding: 10px 18px; background: var(--bone); text-decoration: none; font-weight: 500; font-size: var(--step-small); transition: background .2s var(--ease), color .2s var(--ease); }
.chips a:hover { background: var(--line); }
.chips a[aria-current] { background: var(--ground); color: var(--on-dark); }

/* Product page */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding: clamp(24px, 3vw, 48px) var(--margin) 0; }
.pdp-art { display: flex; align-items: flex-end; justify-content: center; background: var(--tint, var(--bone)); aspect-ratio: 1 / 1; padding: 6% 10% 0; position: sticky; top: 92px; align-self: start; }
.pdp-art .vial { height: 94%; width: auto; transition: transform .5s var(--ease); transform-origin: bottom center; }
.pdp-info { display: flex; flex-direction: column; gap: 18px; padding-block: clamp(0px, 2vw, 24px); }
.pdp-brand { color: var(--ink-soft); }
.pdp-info h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); }
.pdp-notes { font-size: var(--step-lead); line-height: 1.45; max-width: 40ch; }
.pdp-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--step-small); color: var(--ink-soft); }
.pdp-points li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--gold); margin-inline-end: 8px; vertical-align: middle; }
.pdp-bottle { font-weight: 600; font-size: var(--step-small); }
.pdp-more { margin-block-start: 8px; }
.pdp-more details { border-block-start: 1px solid var(--line); }
.pdp-more details:last-child { border-block-end: 1px solid var(--line); }
.pdp-more summary { cursor: pointer; padding-block: 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.pdp-more summary::-webkit-details-marker { display: none; }
.pdp-more summary::after { content: "+"; color: var(--gold-deep); }
.pdp-more details[open] summary::after { content: "−"; }
.pdp-more p { padding-block-end: 16px; color: var(--ink-soft); max-width: 52ch; }

.pdp-info table.variations { border: 0; width: 100%; margin: 0; }
.pdp-info table.variations td, .pdp-info table.variations th { display: block; padding: 0; text-align: start; }
.pdp-info table.variations select, .pdp-info table.variations th { display: none; }
.sm-sizes { display: grid; gap: 8px; }
.sm-size { appearance: none; border: 0; cursor: pointer; text-align: start; padding: 16px 18px; background: var(--bone); color: var(--ink); font: inherit; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; box-shadow: inset 0 0 0 1.5px transparent; transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.sm-size:hover { background: #ebe6dd; }
.sm-size:active { transform: scale(.985); }
.sm-size[aria-pressed="true"] { background: var(--white); box-shadow: inset 0 0 0 2px var(--ground); }
.sm-size b { font: 600 1.375rem/1.1 var(--font-display); }
.sm-size span { font-size: var(--step-small); color: var(--ink-soft); }
.sm-size em { font-style: normal; font-weight: 600; grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: end; }
.sm-size small { display: block; font-weight: 400; font-size: var(--step-small); color: var(--ink-soft); }
.reset_variations { display: none !important; }
.single_variation_wrap .woocommerce-variation-price, .single_variation_wrap .woocommerce-variation-description, .single_variation_wrap .woocommerce-variation-availability { display: none; }
.woocommerce-variation-add-to-cart { display: flex; gap: 8px; align-items: stretch; margin-block-start: 8px; }
.single_add_to_cart_button { flex: 1; }
.quantity input { width: 76px; height: 100%; padding: 14px 8px; border: 0; background: var(--bone); font: inherit; text-align: center; }

/* Buttons (WooCommerce) */
.single_add_to_cart_button, button.button, a.button, .button.alt, .checkout-button, #place_order {
	appearance: none; border: 0; cursor: pointer; background: var(--ground); color: var(--on-dark);
	padding: 16px 28px; font: 600 1rem var(--font-text); text-decoration: none; display: inline-block; text-align: center;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.single_add_to_cart_button:hover, button.button:hover, a.button:hover, .checkout-button:hover, #place_order:hover { background: var(--gold-deep); }
.single_add_to_cart_button:active, #place_order:active { transform: scale(.98); }
.single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

/* Cart + checkout */
.woocommerce-cart .shop-wrap, .woocommerce-checkout .shop-wrap, .woocommerce-account .shop-wrap { max-width: 1120px; }
table.shop_table { width: 100%; border-collapse: collapse; }
table.shop_table th, table.shop_table td { padding: 16px 10px; text-align: start; border-block-end: 1px solid var(--line); }
table.shop_table img { width: 72px; }
.cart_totals, .woocommerce-checkout-review-order { background: var(--bone); padding: 24px; }
form.checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
form.checkout #customer_details { grid-column: 1; }
form.checkout #order_review_heading, form.checkout #order_review { grid-column: 2; }
form.checkout h3 { font: 600 1.75rem/1.2 var(--font-display); margin-block-end: 16px; }
.form-row { margin: 0 0 16px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select { width: 100%; padding: 14px; border: 0; background: var(--bone); font: inherit; color: var(--ink); }
label { display: block; margin-block-end: 6px; font-size: var(--step-small); font-weight: 500; }
.woocommerce-checkout-payment { margin-block-start: 16px; }
.wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.wc_payment_methods li { background: var(--white); padding: 14px 16px; }
.wc_payment_methods label { display: inline; font-size: 1rem; font-weight: 600; }
.payment_box { margin-block-start: 10px; color: var(--ink-soft); font-size: var(--step-small); }
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-message { list-style: none; padding: 14px 18px; background: var(--bone); margin: 0 0 20px; border-inline-start: 4px solid var(--gold); }
.woocommerce-message .button { margin-inline-start: 12px; padding: 8px 16px; }

/* Cart table on phones: each row becomes a small card */
td.product-thumbnail, th.product-thumbnail { display: none; }
.woocommerce-cart-form .actions { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 16px; }
.woocommerce-cart-form .coupon { display: flex; gap: 8px; flex: 1 1 260px; }
.woocommerce-cart-form .coupon input { flex: 1; }
.cart_totals h2 { font-size: 1.75rem; margin-block-end: 12px; }
.cart_totals ul#shipping_method { list-style: none; margin: 0; padding: 0; }
@media (max-width: 700px) {
	table.shop_table_responsive thead { display: none; }
	table.shop_table_responsive tr { display: block; padding-block: 12px; border-block-end: 1px solid var(--line); }
	table.shop_table_responsive td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0; border: 0; text-align: end; }
	table.shop_table_responsive td::before { content: attr(data-title); font-weight: 600; text-align: start; }
	table.shop_table_responsive td.product-remove::before, table.shop_table_responsive td.actions::before { content: none; }
	table.shop_table_responsive td.actions { display: block; }
	table.shop_table_responsive td.product-thumbnail { display: none; }
	table.shop_table_responsive td.product-remove { justify-content: flex-end; }
	.woocommerce-cart-form .actions > button, .woocommerce-cart-form .coupon button { width: 100%; }
	.woocommerce-cart-form .coupon { flex-direction: column; }
	.cart_totals table th, .cart_totals table td { display: flex; justify-content: space-between; border: 0; }
}

/* Tablet and phone */
@media (max-width: 1000px) {
	.grid, .sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot-grid { grid-template-columns: 1fr 1fr; }
	.how { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
	.bar { grid-template-columns: 1fr auto 1fr; height: 60px; }
	.bar-nav { display: none; }
	.bar-brand { grid-column: 2; gap: 10px; }
	.brand-mark { height: 34px; }
	.bar-brand .brand-type { display: none; }
	.bar-menu { display: block; grid-column: 1; grid-row: 1; justify-self: start; position: relative; }
	.bar-menu summary { cursor: pointer; list-style: none; display: grid; place-items: center; width: 44px; height: 44px; margin-inline-start: -10px; }
	.bar-menu summary::-webkit-details-marker { display: none; }
	.bar-menu .ico-close, .bar-menu[open] .ico-burger { display: none; }
	.bar-menu[open] .ico-close { display: block; }
	.bar-menu div { position: absolute; top: 48px; inset-inline-start: calc(var(--margin) * -1); background: var(--white); min-width: 220px; padding: 12px var(--margin); display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0,0,0,.14); }
	.bar-menu div a { padding: 12px 0; text-decoration: none; }
	.bar-end { grid-column: 3; }
	.hero { grid-template-columns: 1fr; }
	.hero-copy { max-width: none; padding-block: 40px 32px; }
	.hero-photo { min-height: 280px; order: -1; }
	.hero-photo img { position: static; height: 280px; }
	.who { grid-template-columns: 1fr; }
	.who-tile { min-height: 120px; }
	.pdp { grid-template-columns: minmax(0, 1fr); }
	.pdp > * { min-width: 0; }
	.pdp-art { position: static; aspect-ratio: 4 / 3; }
	form.checkout { grid-template-columns: 1fr; }
	form.checkout #customer_details, form.checkout #order_review_heading, form.checkout #order_review { grid-column: 1; }
}
@media (max-width: 520px) {
	.grid { gap: 20px 10px; }
	.card-add a { padding: 10px 2px; font-size: .8125rem; }
	.foot-grid { grid-template-columns: 1fr; }
	.size-art { height: 160px; }
	.sizes { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   10ML-style layout pass: soft rounded tiles, big heading, scrolling
   product row, simple size list, black full-width actions.
   ===================================================================== */
:root { --r: 12px; --gray: #f3f1ed; }
.btn, .btn-block, .sm-size, .chips a, .card-art, .who-tile, .sizes-photo, .searchrow, .pdp-art, .single_add_to_cart_button, .quantity input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select, .cart_totals, .woocommerce-checkout-review-order, .card-add a, .wc_payment_methods li { border-radius: var(--r); }
.btn-block { display: block; width: 100%; }
.btn-link { display: inline-block; align-self: flex-start; font-weight: 600; text-decoration: none; border-block-end: 2px solid currentColor; padding-block-end: 2px; transition: color .2s var(--ease); }
.btn-link:hover { color: var(--gold-deep); }

.searchrow { display: none; }
.hero-trust { font-size: var(--step-small); color: var(--on-dark-soft); display: flex; align-items: center; gap: 8px; }
.hero-trust::before { content: ""; width: 6px; height: 6px; background: var(--gold); flex: none; }
.hero-copy { order: 1; }
.hero-photo { order: 2; }
.hero .btn-link { color: var(--on-dark); }

.card-art { position: relative; }
.card-plus { position: absolute; inset-inline-end: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; font-size: 1.4rem; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: transform .2s var(--ease); }
.card:hover .card-plus { transform: scale(1.1); }
.card-brand { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }

/* Who is it for: three tiles and one wide tile */
.who { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.who-tile { background: var(--gray); color: var(--ink); min-height: 140px; transition: background .2s var(--ease), color .2s var(--ease); }
.who-tile:hover { background: var(--ground); color: var(--on-dark); }
.who-tile:hover .who-count { color: var(--on-dark-soft); }
.who-name { font-size: 1.5rem; }
.who-count { color: var(--ink-soft); }
.who-all { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; min-height: 96px; }
.who-all .who-name { font-size: 1.625rem; }

/* Sizes: a plain list */
.block-head-stack { flex-direction: column; align-items: flex-start; gap: 8px; }
.block-head-stack p { color: var(--ink-soft); max-width: 40ch; }
.sizes-photo { max-width: 760px; margin-inline: 0; }
.size-list { list-style: none; margin: 8px 0 24px; padding: 0; max-width: 760px; }
.size-list a { display: grid; grid-template-columns: minmax(92px, auto) 1fr auto; gap: 4px 16px; align-items: baseline; padding-block: 18px; text-decoration: none; border-block-end: 1px solid var(--line); transition: padding .2s var(--ease); }
.size-list a:hover { padding-inline: 8px; }
.size-ml { font: 600 1.75rem/1.1 var(--font-display); }
html[lang^="ar"] .size-ml { line-height: 1.4; }
.size-purpose { font-size: var(--step-small); color: var(--ink-soft); font-weight: 600; }
.size-from { color: var(--ink-soft); text-align: end; }
.block-tint .btn-block { max-width: 760px; }

/* Product page extras */
.crumbs { max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding: 16px var(--margin) 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--step-small); color: var(--ink-soft); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); }
.pdp-brand { align-self: flex-start; background: var(--gray); padding: 8px 14px; border-radius: 10px; font-size: var(--step-small); }
.pdp-brand b { font-weight: 600; border-block-end: 1px solid currentColor; }
.pdp-price { font-size: 1.875rem; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.pdp-points li { background: var(--gray); padding: 8px 12px; border-radius: 10px; }
.pdp-points li::before { display: none; }

@media (max-width: 820px) {
	:root { --gap: 56px; }
	h2 { font-size: 1.875rem; }

	.searchrow { display: flex; align-items: center; gap: 10px; margin: 12px var(--margin) 12px; padding-inline: 14px; height: 48px; background: var(--gray); color: var(--ink-soft); }
	.searchrow input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; color: var(--ink); outline: 0; padding: 0; }
	.searchrow:focus-within { box-shadow: inset 0 0 0 2px var(--ground); }

	/* Hero: picture first, then the heading on white */
	.hero { background: var(--white); color: var(--ink); min-height: 0; grid-template-columns: minmax(0, 1fr); }
	.hero-photo { order: 0; min-height: 0; }
	.hero-photo img { position: static; width: 100%; height: min(58vw, 300px); object-fit: cover; object-position: center 38%; }
	.hero-copy { order: 1; max-width: none; padding: 20px var(--margin) 8px; gap: 14px; margin: 0; }
	.hero h1 { font-size: 2.75rem; }
	.hero .lead { color: var(--ink-soft); }
	.hero-trust { color: var(--ink-soft); }
	.hero .btn-gold { background: var(--ground); color: var(--on-dark); }
	.hero .btn-link { color: var(--ink); }
	.hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
	.hero-actions .btn-link { align-self: flex-start; }

	/* Bestsellers: a row you swipe */
	.grid-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); scrollbar-width: none; }
	.grid-scroll::-webkit-scrollbar { display: none; }
	.grid-scroll .card { flex: 0 0 46%; scroll-snap-align: start; }
	.card-add { display: none; }
	.card-art { aspect-ratio: 1 / 1; padding: 8% 14% 0; }
	.card-art .vial { height: 92%; }
	.card-name { font-size: 1.25rem; }
	.block-head { margin-block-end: 16px; }
	.block-head h2 { font-size: 1.875rem; }

	.block-tint { padding-block: 40px; margin-block-start: var(--gap); }
	.sizes-photo { margin-inline: 0; }
	.who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.who-tile { min-height: 120px; padding: 14px; }
	.who-name { font-size: 1.25rem; }
	.who-all { min-height: 88px; padding: 20px; }

	/* Product page */
	.crumbs { padding-block-start: 4px; }
	.pdp { gap: 16px; padding-block-start: 12px; }
	.pdp-art { margin-inline: calc(var(--margin) * -1); border-radius: 0; aspect-ratio: 1 / 1; padding-top: 8%; }
	.pdp-art .vial { height: 90%; }
	.pdp-info h1 { font-size: 2.25rem; }
	.pdp-points { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.single_add_to_cart_button { padding-block: 18px; }

	.foot-grid { grid-template-columns: 1fr 1fr; }
	.foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.grid-scroll .card { flex-basis: 62%; }
	.size-list a { grid-template-columns: auto 1fr; }
	.size-from { grid-column: 1 / -1; text-align: start; }
}
html[dir="rtl"] .arr { display: inline-block; transform: scaleX(-1); }

/* ---- Bottle photos on tinted tiles ----
   No transform on .bottle or its parents' children: a transform would stop the photo
   from blending (multiply) with the tile colour behind it. */
.bottle { position: relative; display: block; aspect-ratio: 2 / 3; line-height: 0; transform: none !important; transition: none; }
.bottle img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bottle-liquid { position: absolute; background: var(--liquid); opacity: .9; border-radius: 4% / 1.5%; }
.bottle-10 .bottle-liquid { left: 40.3%; width: 19.6%; top: 53.5%; height: 41.8%; }
.bottle-5 .bottle-liquid { left: 39.6%; width: 21.6%; top: 56.5%; height: 30%; }
.bottle-3 .bottle-liquid { left: 38.8%; width: 23%; top: 60.3%; height: 24.8%; }
.card:hover .card-art .vial { transform: none !important; }
.pdp-art .bottle { display: none; height: 100%; }
.pdp-art .bottle.is-on { display: block; }
.pdp-art { padding: 2% 10% 0; }

/* Language switch lives in the header on every screen size */
.bar-lang { display: inline-flex; align-items: center; padding: 8px 14px; background: var(--gray); border-radius: 999px; font-weight: 600; font-size: .8125rem; line-height: 1; transition: background .2s var(--ease), color .2s var(--ease); }
.bar-lang:hover { background: var(--ground); color: var(--on-dark); }
.lang-short { display: none; }
@media (max-width: 820px) {
	.bar-lang { display: inline-flex; padding: 9px 12px; min-width: 40px; justify-content: center; }
	.lang-long { display: none; }
	.lang-short { display: inline; }
	.bar-end { gap: 10px; }
}

/* Hero trust line: always one line; the square marker stays centred on it */
.hero-trust { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding-inline-start: 14px; position: relative; font-size: .8125rem; }
.hero-trust::before { position: absolute; inset-inline-start: 0; top: 50%; margin-top: -3px; }
@media (min-width: 821px) { .hero-trust { font-size: var(--step-small); } }

/* Hero button: clear colour change on hover and keyboard focus */
.hero .btn-gold:hover, .hero .btn-gold:focus-visible { background: var(--gold); color: var(--ground); }
.hero .btn-gold { transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); }

/* =====================================================================
   Phone usability pass
   ===================================================================== */
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }
.car-btn { display: none; }
html[dir="rtl"] .arr-back, html[dir="rtl"] .arr-fwd { display: inline-block; transform: scaleX(-1); }

@media (max-width: 820px) {
	/* Carousel: snap the first card to the page margin, add arrow buttons */
	.carousel { position: relative; }
	.grid-scroll { scroll-padding-inline: var(--margin); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
	.grid-scroll:focus-visible { outline-offset: -3px; }
	.car-btn { display: grid; place-items: center; position: absolute; z-index: 5; top: calc(23vw - 20px); width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: opacity .2s var(--ease), transform .2s var(--ease); }
	.car-btn:active { transform: scale(.92); }
	.car-btn[hidden] { display: none; }
	.car-prev { inset-inline-start: 6px; }
	.car-next { inset-inline-end: 6px; }

	/* Bigger touch targets */
	.card-plus { width: 40px; height: 40px; font-size: 1.5rem; }
	.chips a { padding: 13px 20px; }
	.faq summary { padding-block: 22px; }
	.pdp-more summary { padding-block: 20px; }
	.foot ul a { display: block; padding-block: 8px; }
	.foot ul { gap: 0; }
	.bar-cart, .bar-menu summary { width: 44px; height: 44px; }
	.btn, .btn-block, #place_order, .single_add_to_cart_button { min-height: 52px; }

	/* Menu: a full-width panel under the header with big rows */
	.bar-menu { position: static; }
	.bar-menu div { position: absolute; top: 100%; inset-inline: 0; min-width: 0; padding: 4px var(--margin) 12px; background: var(--white); box-shadow: 0 14px 28px rgba(0,0,0,.12); border-block-start: 1px solid var(--line); }
	.bar-menu div a { padding: 0; min-height: 56px; display: flex; align-items: center; font-size: 1.125rem; font-weight: 500; border-block-end: 1px solid var(--line); }
	.bar-menu div a:last-child { border-block-end: 0; }

	/* Product page: the add-to-cart row stays at the bottom of the screen */
	form.variations_form.cart { position: sticky; bottom: 0; z-index: 20; margin-inline: calc(var(--margin) * -1); padding: 12px var(--margin) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--white); box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
	form.variations_form .woocommerce-variation-add-to-cart { margin-block-start: 0; }

	/* Shop: filters scroll sideways instead of wrapping */
	.chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); scrollbar-width: none; }
	.chips::-webkit-scrollbar { display: none; }
	.chips a { flex: none; }
	.shop-wrap { padding-block-start: 16px; }
	.woocommerce-products-header__title, .page-title { font-size: 2rem; margin-block-end: 16px; }

	/* Cart and checkout */
	.woocommerce-checkout .shop-wrap, .woocommerce-cart .shop-wrap { padding-block-start: 12px; }
	#place_order, .checkout-button { display: block; width: 100%; }
	.form-row { margin-block-end: 14px; }
	.woocommerce-checkout-payment .wc_payment_methods li { padding: 16px; }
	.cart_totals, .woocommerce-checkout-review-order { padding: 18px; }
	.woocommerce-message .button { display: block; margin: 10px 0 0; }
}
@media (max-width: 520px) {
	.car-btn { top: calc(31vw - 20px); }
}

/* Numerals: the serif's default figures are old-style (10 reads as "IO", 5 drops below the line).
   Use lining figures everywhere; sizes use the sans face so they stay crisp at any width. */
html, body, h1, h2, h3, .card-name, .size-ml, .sm-size b, .who-name { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "kern" 1; }
.size-ml { font-family: var(--font-text); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; }
.sm-size b { font-family: var(--font-text); font-weight: 600; font-size: 1.125rem; }

/* Sizes on desktop: photo on one side, the list beside it */
@media (min-width: 821px) {
	.sizes-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
	.sizes-layout .sizes-photo, .sizes-layout .size-list, .sizes-layout .btn-block { max-width: none; margin: 0; }
	.sizes-layout .sizes-photo img { width: 100%; max-height: 520px; }
	.sizes-side { display: flex; flex-direction: column; gap: 16px; }
	.sizes-side .size-list { margin: 0; }
	.block-tint .sizes-side .btn-block { max-width: none; }
}

/* =====================================================================
   Hover and focus effects (devices with a pointer)
   ===================================================================== */
/* Hero button: gold on the dark desktop hero turns ivory; the black phone button turns gold */
@media (min-width: 821px) {
	.hero .btn-gold:hover, .hero .btn-gold:focus-visible { background: var(--on-dark); color: var(--ground); }
}
@media all {
	.btn, .btn-block, .single_add_to_cart_button, #place_order, .checkout-button { transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
	.btn:hover, .single_add_to_cart_button:hover, #place_order:hover, .checkout-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
	.btn:active, .single_add_to_cart_button:active { transform: translateY(0) scale(.98); box-shadow: none; }
	.btn-dark:hover { background: var(--gold-deep); color: var(--on-dark); }
	.btn-line:hover { background: var(--on-dark); color: var(--ground); }
	.card-name a { transition: color .2s var(--ease); }
	.card:hover .card-name a { color: var(--gold-deep); }
	.card-art { transition: filter .3s var(--ease); }
	.card:hover .card-art { filter: brightness(.97) saturate(1.08); }
	.more:hover, .btn-link:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
	.more .arr, .btn-link .arr { transition: transform .25s var(--ease); display: inline-block; }
	.more:hover .arr, .btn-link:hover .arr { transform: translateX(4px); }
	html[dir="rtl"] .more:hover .arr, html[dir="rtl"] .btn-link:hover .arr { transform: scaleX(-1) translateX(4px); }
	.size-list a:hover { background: rgba(255,255,255,.6); }
	.sm-size:hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
	.sm-size[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--ground); }
	.chips a:hover { background: var(--ground); color: var(--on-dark); }
	.faq summary:hover { color: var(--gold-deep); }
	.bar-cart:hover .ico { transform: translateY(-1px); }
	.bar-lang:hover { background: var(--ground); color: var(--on-dark); }
	.who-tile:hover { transform: translateY(-3px); }
	.who-tile { transition: background .2s var(--ease), color .2s var(--ease), transform .25s var(--ease); }
}

/* Carousel arrows: transparent with a thin ring, so the bottle stays visible behind them */
.car-btn { background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(20, 19, 17, .55) !important; color: var(--ink); }
.car-btn:active { background: rgba(20, 19, 17, .12) !important; }
@media all { .car-btn:hover { background: var(--ground) !important; color: var(--on-dark); box-shadow: none !important; } }

/* =====================================================================
   Size stage: the three bottles rise one after another and fill with perfume
   ===================================================================== */
.stage3 { direction: ltr; display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 7vw, 64px); padding: clamp(28px, 4vw, 52px) 16px 22px; min-height: 320px; border-radius: var(--r); background: var(--white); overflow: hidden; }
.b3 { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; transform: translateY(80px) scale(.92); }
.b3 .bottle { height: clamp(170px, 40vw, 300px); }
.b3-label { font: 600 .875rem var(--font-text); color: var(--ink-soft); letter-spacing: .02em; }
.stage3 .bottle-liquid { transform: scaleY(0); transform-origin: 50% 100%; }
.stage3.in .b3 { animation: b3-rise 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * .16s); }
.stage3.in .bottle-liquid { animation: b3-fill 2s cubic-bezier(.3, .7, .2, 1) forwards; animation-delay: calc(var(--i) * .16s + .55s); }
@keyframes b3-rise { 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes b3-fill { to { transform: scaleY(1); } }
@keyframes b3-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: no-preference) {
	.stage3.in .b3 { animation: b3-rise 1.1s var(--ease) forwards, b3-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * .16s), calc(var(--i) * .35s + 2.4s); }
}
@media (min-width: 821px) { .sizes-layout .stage3 { min-height: 420px; } .b3 .bottle { height: clamp(220px, 22vw, 340px); } }

/* Cart badge: it pops and gold rings radiate from it when something is added */
.bar-cart.is-added::before, .bar-cart.is-added::after { animation: none !important; }
.bar-cart .badge::before, .bar-cart .badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.bar-cart.is-added .badge { animation: badge-pop .7s var(--ease) 1; }
.bar-cart.is-added .badge::before { animation: badge-ring 1.2s ease-out 1; }
.bar-cart.is-added .badge::after { animation: badge-ring 1.2s ease-out .3s 1; }
.bar-cart.is-added .ico { animation: none; }
@keyframes badge-ring { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* Toast after adding to cart */
.toast { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 80; max-width: 440px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; background: var(--ground); color: var(--on-dark); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,.28); opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .3s var(--ease), transform .35s var(--ease); }
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast-link { color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.toast-link:hover { text-decoration: underline; }
.single-product .toast { bottom: 96px; }
@media (min-width: 821px) { .single-product .toast { bottom: 24px; } .toast { margin-inline-end: 24px; margin-inline-start: auto; } }
.is-busy { opacity: .6; pointer-events: none; }

/* Stronger radiate on the cart badge */
.bar-cart .badge::before, .bar-cart .badge::after { border-width: 3px; }
.bar-cart.is-added .badge { animation: badge-pop .8s var(--ease) 1; }
.bar-cart.is-added .badge::before { animation: badge-ring 1.5s ease-out 1; }
.bar-cart.is-added .badge::after { animation: badge-ring 1.5s ease-out .4s 1; }
@keyframes badge-ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(4); } }

/* Keep radiating while the cart holds something: slow gold rings from the badge, always */
.bar-cart .badge:not([data-count="0"])::before { animation: badge-ring-idle 2.8s ease-out infinite; }
.bar-cart .badge:not([data-count="0"])::after { animation: badge-ring-idle 2.8s ease-out 1.4s infinite; }
@keyframes badge-ring-idle { 0% { opacity: .85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.8); } }
/* The burst when an item is added is faster and bigger than the idle glow */
.bar-cart.is-added .badge:not([data-count="0"])::before { animation: badge-ring 1.2s ease-out 1; }
.bar-cart.is-added .badge:not([data-count="0"])::after { animation: badge-ring 1.2s ease-out .3s 1; }

/* =====================================================================
   Product page refinements
   ===================================================================== */
.pdp-priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.pdp-perml { color: var(--ink-soft); font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.pdp-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--step-small); color: var(--ink-soft); min-height: 1.4em; }
.pdp-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3f8f5b; margin-inline-end: 6px; }
.pdp-stock.is-out::before { background: #b3412f; }

/* Best value tag on the size cards */
.sm-size { position: relative; }
.sm-size .tag { position: absolute; top: -9px; inset-inline-start: 14px; font-style: normal; font-size: .75rem; font-weight: 700; background: var(--gold); color: var(--ground); padding: 3px 10px; border-radius: 999px; }
.sm-sizes { gap: 12px; }

/* Size pills on the picture */
.pdp-art { position: relative; }
.pdp-pills { position: absolute; inset-inline: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
.pdp-pill { appearance: none; border: 0; cursor: pointer; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .72); color: var(--ink); font: 600 .8125rem var(--font-text); transition: background .2s var(--ease), color .2s var(--ease); }
.pdp-pill:hover { background: var(--white); }
.pdp-pill[aria-pressed="true"] { background: var(--ground); color: var(--on-dark); }

/* Quantity stepper */
.quantity { display: flex; align-items: stretch; background: var(--gray); border-radius: var(--r); overflow: hidden; }
.quantity input.qty { width: 44px; background: transparent; border-radius: 0; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { appearance: none; border: 0; background: transparent; width: 44px; font-size: 1.375rem; cursor: pointer; color: var(--ink); transition: background .2s var(--ease); }
.qty-btn:hover { background: rgba(0, 0, 0, .06); }
.qty-btn:active { background: rgba(0, 0, 0, .12); }

/* Related carousel on desktop: a normal grid */
@media (min-width: 821px) { .pdp ~ .block .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) { .pdp-pills { bottom: 10px; } }

/* Buy bar: keep the label on one line */
.single_add_to_cart_button { white-space: nowrap; padding-inline: 14px; }
@media (max-width: 820px) {
	.quantity input.qty { width: 30px; font-size: 1rem; }
	.qty-btn { width: 36px; }
	form.variations_form .woocommerce-variation-add-to-cart { gap: 8px; }
}

/* Safety net: nothing may make the page scroll sideways (clip keeps sticky headers working) */
html, body { overflow-x: clip; }

/* =====================================================================
   Compact footer
   ===================================================================== */
.foot { padding: 32px var(--margin) 20px; }
.foot-main { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; gap: 24px 80px; align-items: start; }
.foot-logo { margin-block-end: 8px; }
.foot-tag { color: var(--on-dark-soft); }
.foot-cols { display: flex; gap: clamp(32px, 6vw, 80px); }
.foot h3 { margin-block-end: 6px; }
.foot ul { gap: 0; }
.foot ul a { display: block; padding-block: 6px; }
.foot-pay { list-style: none; max-width: var(--max); margin: 20px auto 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.foot-pay li { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--on-dark); font-size: var(--step-small); }
.foot-legal { margin-block-start: 18px; }
@media (max-width: 820px) {
	.foot { padding-block: 28px 16px; }
	.foot-main { grid-template-columns: 1fr; gap: 16px; }
	.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
	.foot-pay { margin-block-start: 16px; }
	.foot-legal { margin-block-start: 14px; }
}
.foot .foot-pay { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; }
.foot .foot-pay li { width: auto; }

/* Arabic hero heading: one line on phones (the text is short enough), sized to the screen width */
@media (max-width: 820px) {
	html[lang^="ar"] .hero h1 { white-space: nowrap; font-size: min(2.75rem, 10.2vw); line-height: 1.25; }
}

/* =====================================================================
   Sizes section, phone version: shorter stage and two-line rows
   ===================================================================== */
html[dir="rtl"] .b3-label { direction: rtl; }
@media (max-width: 820px) {
	.block-tint { padding-block: 32px; }
	.block-head-stack { gap: 6px; margin-block-end: 16px; }
	.block-head-stack p { font-size: var(--step-small); }
	.stage3 { min-height: 0; padding: 18px 12px 12px; gap: clamp(14px, 6vw, 36px); }
	.b3 { gap: 8px; }
	.b3 .bottle { height: clamp(120px, 34vw, 170px); }
	.b3-label { font-size: .8125rem; }
	.size-list { margin-block: 4px 18px; }
	.size-list a { grid-template-columns: 1fr auto; gap: 2px 12px; padding-block: 14px; align-items: baseline; }
	.size-ml { grid-column: 1; grid-row: 1; font-size: 1.375rem; }
	.size-from { grid-column: 2; grid-row: 1; text-align: end; font-weight: 600; color: var(--ink); font-size: .9375rem; }
	.size-purpose { grid-column: 1 / -1; grid-row: 2; }
}

/* =====================================================================
   Product cards: the bottle slides up into its tile and fills with perfume
   (same effect as the size stage). The bottle only moves its margin and the liquid scales,
   so the glass keeps blending with the tile colour.
   ===================================================================== */
.js .card:not(.cin) .card-art .bottle { margin-bottom: -150px; }
.js .card:not(.cin) .card-art .bottle-liquid { transform: scaleY(0); transform-origin: 50% 100%; }
.js .card:not(.cin) .card-plus { transform: scale(0); }
.card.cin .card-art .bottle { animation: card-rise 1s var(--ease) both; animation-delay: calc(var(--ci, 0) * 90ms); }
.card.cin .card-art .bottle-liquid { transform-origin: 50% 100%; animation: b3-fill 1.8s cubic-bezier(.3, .7, .2, 1) both; animation-delay: calc(var(--ci, 0) * 90ms + .45s); }
.card.cin .card-plus { animation: plus-pop .55s var(--ease) backwards; animation-delay: calc(var(--ci, 0) * 90ms + 1.1s); }
@keyframes card-rise { from { margin-bottom: -150px; } to { margin-bottom: 0; } }
@keyframes plus-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Hero picture: the wide image on phones (shown whole), the tall image on desktop (bottles kept in view) */
.hero-photo picture { display: contents; }
@media (max-width: 820px) {
	.hero-photo img { height: auto; aspect-ratio: 3 / 2; object-position: 70% 50%; }
}
@media (min-width: 821px) {
	.hero-photo img { object-position: 72% 72%; }
}

/* English hero heading: one line on phones too, so both languages match */
@media (max-width: 820px) {
	html:not([lang^="ar"]) .hero h1 { white-space: nowrap; font-size: min(2.75rem, 10.6vw); line-height: 1.1; }
}

/* Policy pages */
.policy { max-width: 760px; margin-inline: auto; padding: clamp(28px, 4vw, 64px) var(--margin) var(--gap); display: flex; flex-direction: column; gap: 22px; }
.policy h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.policy-intro { font-size: var(--step-lead); line-height: 1.45; color: var(--ink-soft); max-width: 46ch; }
.policy section { display: flex; flex-direction: column; gap: 10px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.policy h2 { font-size: 1.5rem; }
.policy p, .policy li { max-width: 64ch; }
.policy ul { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.policy .btn { align-self: flex-start; margin-block-start: 8px; }
.policy-note { font-size: var(--step-small); color: var(--ink-soft); margin-block: 12px; }
.policy-note a { color: var(--ink); font-weight: 600; }

/* =====================================================================
   Founder video section
   ===================================================================== */
.founder-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.founder-media { position: relative; aspect-ratio: 9 / 14; border-radius: calc(var(--r) * 1.5); overflow: hidden; background: var(--ground); isolation: isolate; }
.founder-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.founder-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border: 0; border-radius: 50%; background: rgba(239, 236, 230, .92); color: var(--ground); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease), background .2s var(--ease), opacity .3s var(--ease); }
.founder-play svg { margin-inline-start: 3px; }
.founder-play::before, .founder-play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: badge-ring-idle 2.8s ease-out infinite; pointer-events: none; }
.founder-play::after { animation-delay: 1.4s; }
.founder-play:hover { transform: scale(1.08); background: var(--white); }
.founder-media.is-playing .founder-play { opacity: 0; pointer-events: none; transform: scale(.8); }
.founder-sound { position: absolute; inset-inline-end: 12px; bottom: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(14, 13, 11, .62); color: var(--on-dark); display: none; place-items: center; cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); }
.founder-media.is-playing .founder-sound { display: grid; }
.founder-sound:hover { background: var(--ground); transform: scale(1.06); }
.founder-sound .snd-on { display: none; }
.founder-sound[aria-pressed="true"] .snd-on { display: block; }
.founder-sound[aria-pressed="true"] .snd-off { display: none; }
.founder-text { display: flex; flex-direction: column; gap: 18px; }
.founder-text h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); max-width: 16ch; }
.founder-text > p { font-size: var(--step-lead); line-height: 1.5; color: var(--ink-soft); max-width: 44ch; }
.founder-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.founder-points li { padding-inline-start: 22px; position: relative; font-weight: 500; }
.founder-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; }
.founder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-block-start: 8px; }
@media (max-width: 820px) {
	.founder-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.founder-media { aspect-ratio: 4 / 5; }
	.founder-text h2 { max-width: none; }
	.founder-actions .btn { width: 100%; }
}

/* =====================================================================
   Motion layer
   ===================================================================== */
/* Header: soft shadow once the page scrolls, and a thin gold reading-progress line */
.bar { transition: box-shadow .3s var(--ease); }
.bar.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.bar-progress { position: absolute; inset-inline-start: 0; bottom: -1px; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
html[dir="rtl"] .bar-progress { transform-origin: 100% 50%; }

/* Hero picture settles in, then follows the mouse slightly on desktop */
.hero-photo { overflow: hidden; }
.hero-photo img { animation: hero-settle 2.4s var(--ease) both; will-change: transform; }
@keyframes hero-settle { from { transform: scale(1.12); } to { transform: scale(1.0); } }
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
	.hero-photo img { animation: hero-settle 2.4s var(--ease) both; transition: transform .5s var(--ease); }
	.hero.pointer-ready .hero-photo img, .hero[style*="--mx"] .hero-photo img { transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0) scale(1.06); animation: none; }
}


/* FAQ answers slide open */
.faq details[open] > p, .pdp-more details[open] > p { animation: faq-open .4s var(--ease) both; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Product page: the bottle slides up and the perfume fills each time the size changes */
.pdp-art { overflow: hidden; }
.pdp-art .bottle.is-on { animation: card-rise .7s var(--ease) both; }
.pdp-art .bottle.is-on .bottle-liquid { transform-origin: 50% 100%; animation: b3-fill 1.1s cubic-bezier(.3, .7, .2, 1) both; }

/* Gold shine passes over the main buttons on hover */
.btn-gold, .btn-dark { position: relative; overflow: hidden; }
.btn-gold::after, .btn-dark::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); pointer-events: none; transition: inset-inline-start .7s var(--ease); }
.btn-gold:hover::after, .btn-dark:hover::after { inset-inline-start: 130%; }

/* =====================================================================
   Footer extras, floating WhatsApp button, 404
   ===================================================================== */
.foot-social { display: flex; gap: 10px; margin-block-start: 10px; }
.foot-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--on-dark); transition: background .2s var(--ease), color .2s var(--ease), transform .25s var(--ease); }
.foot-social a:hover { background: var(--gold); color: var(--ground); transform: translateY(-2px); }
.foot-bottom { max-width: var(--max); margin: 18px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.foot-bottom .foot-legal { margin: 0; }
.foot-top { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--on-dark); transition: background .2s var(--ease), color .2s var(--ease), transform .25s var(--ease); flex: none; }
.foot-top:hover { background: var(--gold); color: var(--ground); transform: translateY(-3px); }
.foot ul a { transition: color .2s var(--ease), padding-inline-start .2s var(--ease); }
.foot ul a:hover { padding-inline-start: 6px; }

.wa-float { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 40; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--ground); color: var(--gold); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); text-decoration: none; transition: transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.wa-float:hover { background: var(--gold); color: var(--ground); transform: translateY(-3px) scale(1.05); }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: badge-ring-idle 3.4s ease-out 2s infinite; pointer-events: none; }
.single-product .wa-float { bottom: 96px; }
@media (min-width: 821px) { .single-product .wa-float { bottom: 24px; } .wa-float { inset-inline-end: 24px; bottom: 24px; } }
.woocommerce-checkout .wa-float, .woocommerce-cart .wa-float { display: none; }

.notfound { max-width: 640px; margin-inline: auto; padding: clamp(48px, 9vw, 120px) var(--margin) var(--gap); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.notfound-code { font: 600 clamp(5rem, 22vw, 11rem)/.9 var(--font-display); color: var(--gold); letter-spacing: -.02em; }
.notfound h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.notfound p { color: var(--ink-soft); font-size: var(--step-lead); max-width: 40ch; }
.notfound-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-block-start: 8px; }
.wa-float.is-away { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }
.wa-float { transition: opacity .3s var(--ease), transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease); }

/* Size stage on desktop: the bottle photos carry wide white margins, so pull the bottles together
   and keep the whole group inside the frame. */
@media (min-width: 821px) {
	.sizes-layout .stage3 { --bh: clamp(230px, 25vw, 380px); gap: clamp(8px, 2vw, 32px); min-height: 0; padding: 40px 16px 20px; }
	.sizes-layout .b3 .bottle { height: var(--bh); margin-inline: calc(var(--bh) * -0.2); }
	.sizes-layout .b3 { gap: 6px; }
}

/* WhatsApp button: lighter ring (it was huge and got cut by the footer), white edge so it reads on dark areas */
.wa-float { box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 8px 24px rgba(0, 0, 0, .28); }
.wa-float::before { inset: -3px; animation: wa-ring 3.6s ease-out 2.5s infinite; }
@keyframes wa-ring { 0% { opacity: .8; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.45); } }

/* =====================================================================
   Footer, redesigned: quiet, small type, a ghost monogram, accordions on phones
   ===================================================================== */
.foot { position: relative; overflow: hidden; padding: 56px var(--margin) 20px; border-block-start: 1px solid rgba(184, 151, 90, .45); }
.foot > * { position: relative; z-index: 1; }
.foot .foot-ghost { position: absolute; z-index: 0; inset-inline-end: clamp(-40px, -2vw, 0px); bottom: -70px; height: clamp(260px, 30vw, 420px); width: auto; opacity: .07; pointer-events: none; user-select: none; }
.foot .foot-main { display: grid; grid-template-columns: 1fr auto; gap: 24px 96px; align-items: start; }
.foot .foot-logo { margin: 0; gap: 12px; }
.foot .foot-logo .brand-mark { height: 46px; }
.foot .foot-logo .brand-type { height: 12px; }
.foot .foot-ig { margin-block-start: 16px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--on-dark); transition: background .2s var(--ease), color .2s var(--ease); }
.foot .foot-ig:hover { background: var(--gold); color: var(--ground); }
.foot .foot-cols { display: flex; gap: clamp(48px, 7vw, 112px); }
.foot .foot-col { min-width: 150px; }
.foot .foot-col summary { list-style: none; cursor: default; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); padding-block: 0 10px; display: flex; justify-content: space-between; align-items: center; }
.foot .foot-col summary::-webkit-details-marker { display: none; }
.foot .foot-col ul { display: block; margin: 0; padding: 0; list-style: none; }
.foot .foot-col ul a { display: inline-block; padding-block: 6px; font-size: .9375rem; color: var(--on-dark-soft); }
.foot .foot-col ul a:hover { color: var(--gold); padding-inline-start: 0; }
.foot .foot-bottom { margin-block-start: 36px; padding-block-start: 16px; border-block-start: 1px solid rgba(255, 255, 255, .09); }
.foot .foot-legal { font-size: .8125rem; color: var(--on-dark-soft); }
.foot .foot-top { width: 38px; height: 38px; }

@media (max-width: 820px) {
	.foot { padding-block: 32px 16px; }
	.foot .foot-ghost { height: 200px; bottom: -40px; opacity: .06; }
	.foot .foot-main { grid-template-columns: 1fr; gap: 18px; }
	.foot .foot-cols { flex-direction: column; gap: 0; }
	.foot .foot-col { border-block-end: 1px solid rgba(255, 255, 255, .1); }
	.foot .foot-col:first-child { border-block-start: 1px solid rgba(255, 255, 255, .1); }
	.foot .foot-col summary { cursor: pointer; min-height: 52px; padding-block: 0; }
	.foot .foot-col summary::after { content: "+"; font-size: 1.375rem; line-height: 1; font-weight: 400; letter-spacing: 0; color: var(--on-dark-soft); }
	.foot .foot-col[open] summary::after { content: "−"; }
	.foot .foot-col ul { padding-block-end: 10px; }
	.foot .foot-col ul a { padding-block: 9px; }
	.foot .foot-bottom { margin-block-start: 22px; padding-block-start: 14px; }
}

/* New arrivals: tabs and badge */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.block-head { flex-wrap: wrap; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; }
.tab { appearance: none; border: 0; background: none; cursor: pointer; padding: 0 0 6px; position: relative; font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem)/1.1 var(--font-display); color: var(--ink-soft); transition: color .2s var(--ease); }
html[lang^="ar"] .tab { line-height: 1.35; }
.tab::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
html[dir="rtl"] .tab::after { transform-origin: 100% 50%; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.card-new { position: absolute; z-index: 2; top: 10px; inset-inline-start: 10px; background: var(--gold); color: var(--ground); font: 700 .6875rem/1 var(--font-text); letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; }
@media (max-width: 820px) { .tab { font-size: 1.5rem; } .block-head .more { margin-inline-start: auto; } }

/* "Who is it for" tiles: picture on top when one exists, label below (text-only tiles keep the old look) */
.who { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.who-tile { justify-content: flex-start; padding: 0; min-height: 0; overflow: hidden; }
.who-tile .who-text { display: flex; flex-direction: column; gap: 2px; padding: 20px 22px; }
.who-tile.has-img .who-text { padding: 14px 16px 16px; }
.who-tile:not(.has-img):not(.who-all) { min-height: 200px; justify-content: flex-end; }
.who-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e6e0; }
.who-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.who-tile:hover .who-img img { transform: scale(1.06); }
.who-name .arr { opacity: 0; display: inline-block; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.who-tile:hover .who-name .arr { opacity: 1; transform: none; }
html[dir="rtl"] .who-name .arr { transform: scaleX(-1) translateX(-6px); }
html[dir="rtl"] .who-tile:hover .who-name .arr { transform: scaleX(-1); }
.who-all { grid-column: auto; flex-direction: column; justify-content: flex-end; min-height: 200px; }
@media (max-width: 820px) {
	.who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.who-tile .who-text { padding: 12px 12px 14px; }
	.who-tile.has-img .who-text { padding: 10px 10px 12px; }
	.who-tile:not(.has-img):not(.who-all) { min-height: 150px; }
	.who-all { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 84px; }
	.who-all .who-text { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 20px; }
	.who-name .arr { opacity: 1; transform: none; }
	html[dir="rtl"] .who-name .arr { transform: scaleX(-1); }
	.who-name { font-size: 1.125rem; }
}
.foot-legalwrap { display: flex; flex-direction: column; gap: 6px; max-width: 70ch; }
.foot .foot-disclaimer { font-size: .75rem; line-height: 1.5; color: var(--on-dark-soft); opacity: .8; }

/* Placeholder pictures for tiles that have no photo yet: our own bottles on a tinted ground */
.who-img { container-type: size; }
.who-fallback { display: flex; align-items: flex-end; justify-content: center; background: var(--tint, #ece8e0); padding-block-start: 10cqh; }
.who-fallback .bottle { height: 78cqh; margin-inline: -15.6cqh; }
.who-all .who-img { width: 100%; }


/* "All perfumes" on phones: wide card, text on one side and a cropped picture on the other */
@media (max-width: 820px) {
	.who-all { flex-direction: row; align-items: stretch; min-height: 0; overflow: hidden; }
	.who-all .who-img { order: 2; flex: 0 0 46%; width: 46%; height: 132px; aspect-ratio: auto; }
	.who-all .who-img img { object-position: 50% 62%; }
	.who-all .who-text { order: 1; flex: 1; width: auto; padding: 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; }
}
@media (max-width: 820px) { .who-all .who-name { font-size: 1.375rem; white-space: nowrap; } }

/* "All perfumes" on phones: back to the plain wide card (text only), as before */
@media (max-width: 820px) {
	.who-all .who-img { display: none; }
	.who-all { align-items: center; min-height: 84px; }
	.who-all .who-text { order: 0; flex: none; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px; gap: 0; }
	.who-all .who-name { font-size: 1.625rem; white-space: normal; }
}

/* "All perfumes" on phones: a banner. The picture fills the card, a flat dark layer keeps the text readable. */
@media (max-width: 820px) {
	.who-all { position: relative; min-height: 138px; color: var(--on-dark); background: var(--ground); }
	.who-all .who-img { display: block; position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; flex: none; }
	.who-all .who-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 66%; }
	.who-all::after { content: ""; position: absolute; inset: 0; background: rgba(14, 13, 11, .5); pointer-events: none; transition: background .3s var(--ease); }
	.who-all:hover::after { background: rgba(14, 13, 11, .36); }
	.who-all .who-text { position: relative; z-index: 2; align-self: stretch; padding: 22px 20px; }
	.who-all .who-count { color: var(--on-dark); opacity: .9; }
	.who-all:hover { background: var(--ground); color: var(--on-dark); }
}
@media (max-width: 820px) {
	.who-all::after { background: rgba(14, 13, 11, .66); }
	.who-all:hover::after { background: rgba(14, 13, 11, .5); }
	.who-all .who-name, .who-all .who-count { text-shadow: 0 1px 14px rgba(0, 0, 0, .55); opacity: 1; }
}

/* "All perfumes" on phones: back to the slim card height, showing only the upper part of the picture (the full bottles) */
@media (max-width: 820px) {
	.who-all { min-height: 84px; height: 84px; }
	.who-all .who-img img { object-position: 50% 36%; }
	.who-all .who-text { padding: 0 20px; align-self: center; }
}

/* Founder section, phone version: shorter picture, tighter text, one row of actions */
@media (max-width: 820px) {
	.founder-grid { gap: 16px; }
	.founder-media { aspect-ratio: 5 / 4; border-radius: var(--r); }
	.founder-video { object-position: 50% 24%; }
	.founder-play { width: 60px; height: 60px; }
	.founder-play svg { width: 22px; height: 22px; }
	.founder-text { gap: 12px; }
	.founder-text h2 { font-size: 1.75rem; line-height: 1.15; }
	html[lang^="ar"] .founder-text h2 { line-height: 1.35; }
	.founder-text > p { font-size: 1rem; line-height: 1.55; }
	.founder-actions { gap: 10px 20px; margin-block-start: 4px; }
	.founder-actions .btn { width: auto; flex: 1 1 auto; min-width: 150px; }
}
.founder-text > p + .founder-actions { margin-block-start: 8px; }

/* Luxury section divider: gold hairline with a small diamond between plain sections */
.block:not(.block-tint):not(.block-dark) + .block:not(.block-tint):not(.block-dark) { position: relative; }
.block:not(.block-tint):not(.block-dark) + .block:not(.block-tint):not(.block-dark)::before {
	content: ""; position: absolute; inset-inline: var(--margin); inset-block-start: calc(var(--gap) / 2); height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold, #b08d57) 20%, var(--gold, #b08d57) 80%, transparent); opacity: .55;
}
.block:not(.block-tint):not(.block-dark) + .block:not(.block-tint):not(.block-dark)::after {
	content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: calc(var(--gap) / 2 - 4px);
	width: 9px; height: 9px; margin-inline-start: -4.5px; transform: rotate(45deg);
	background: var(--white); border: 1px solid var(--gold, #b08d57);
}
html[dir="rtl"] .block:not(.block-tint):not(.block-dark) + .block:not(.block-tint):not(.block-dark)::after { margin-inline-start: -4.5px; }

/* FAQ questions: serif display face, lighter weight, to match the headings */
.faq summary { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.25; align-items: center; }
html[lang^="ar"] .faq summary { font-family: var(--font-text); font-size: 1.05rem; line-height: 1.5; font-weight: 600; }
.faq summary::after { font-family: var(--font-text); font-weight: 300; }

/* Footer logo: plays once when the footer scrolls into view */
.foot-logo.logo-wait .brand-mark { opacity: 0; transform: translateY(10px) scale(.92); }
.foot-logo.logo-wait .brand-type { opacity: 0; clip-path: inset(0 100% 0 0); }
html[dir="rtl"] .foot-logo.logo-wait .brand-type { clip-path: inset(0 0 0 100%); }
.foot-logo.logo-go .brand-mark { animation: logo-mark 1s cubic-bezier(.22, 1, .36, 1) both; }
.foot-logo.logo-go .brand-type { animation: logo-type 1.3s cubic-bezier(.65, 0, .35, 1) .35s both; }
@keyframes logo-mark { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes logo-type { from { opacity: 0; clip-path: inset(0 100% 0 0); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } }
html[dir="rtl"] .foot-logo.logo-go .brand-type { animation-name: logo-type-rtl; }
@keyframes logo-type-rtl { from { opacity: 0; clip-path: inset(0 0 0 100%); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* Header logo: plays once per visit (first page load), not on every page */
html.logo-intro .bar-brand .brand-mark { animation: logo-mark .9s cubic-bezier(.22, 1, .36, 1) .1s both; }
html.logo-intro .bar-brand .brand-type { animation: logo-type 1.1s cubic-bezier(.65, 0, .35, 1) .4s both; }
html[dir="rtl"].logo-intro .bar-brand .brand-type { animation-name: logo-type-rtl; }

/* Shop by house */
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white); }
.brand-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 12px; text-align: center; border: 0 solid var(--line); border-inline-end-width: 1px; border-block-end-width: 1px; transition: background-color .3s var(--ease); }
.brand-tile:hover { background: var(--bone); }
.brand-name { font: 600 1.45rem/1.15 var(--font-display); color: var(--ink); transition: color .3s var(--ease); }
.brand-tile:hover .brand-name { color: var(--gold-deep); }
.brand-count { font-size: var(--step-small); color: var(--ink-soft); }
.brand-tile:nth-child(2n) { border-inline-end-width: 0; }
@media (min-width: 821px) {
	.brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.brand-tile { padding: 44px 16px; }
	.brand-tile:nth-child(2n) { border-inline-end-width: 1px; }
	.brand-tile:nth-child(4n) { border-inline-end-width: 0; }
	.brand-name { font-size: 1.8rem; }
}
.brands { gap: 1px; background: var(--line); }
.brand-tile { background: var(--white); border: 0 !important; text-decoration: none; }
.brand-tile:hover { background: var(--bone); }
.brand-tile span { text-decoration: none; }
/* Shop by house: compact, equal rows on mobile; count only shown when a house has several */
.brands { grid-auto-rows: 1fr; }
.brand-tile { padding: 14px 10px; min-height: 76px; }
.brand-name { font-size: 1.2rem; text-wrap: balance; }
.brand-tile:active { background: var(--bone); }
@media (min-width: 821px) {
	.brand-tile { padding: 36px 16px; min-height: 0; }
	.brand-name { font-size: 1.8rem; }
}

/* Shop filter bar */
.shopfilter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: -12px 0 28px; }
.sf { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 130px; }
.sf-l { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sf select { width: 100%; padding: 11px 36px 11px 14px; border: 1px solid var(--line); border-radius: var(--r); background-color: var(--white); font: inherit; font-size: var(--step-small); color: var(--ink); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%), linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
html[dir="rtl"] .sf select { padding: 11px 14px 11px 36px; background-position: 18px 50%, 13px 50%; }
.sf select:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.sf-clear { padding: 11px 6px; font-size: var(--step-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--gold-deep); }
@media (max-width: 820px) { .sf { flex-basis: calc(50% - 6px); } }

/* Brands page */
.brands-page { padding-block-end: var(--gap); }
.brands-page .eyebrow { font-size: var(--step-small); letter-spacing: .14em; color: var(--gold-deep); margin-block-end: 10px; }
.brands-page h1 { font: 500 clamp(2rem, 5vw, 3.4rem)/1.1 var(--font-display); margin-block-end: 12px; }
.bp-intro { color: var(--ink-soft); max-width: 60ch; margin-block-end: 24px; }
.az { display: flex; flex-wrap: wrap; gap: 4px; margin-block-end: 18px; }
.az a, .az span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: var(--step-small); font-weight: 600; text-decoration: none; }
.az a { background: var(--bone); transition: background .2s var(--ease), color .2s var(--ease); }
.az a:hover { background: var(--ground); color: var(--on-dark); }
.az span { color: var(--line); }
.brands-page .chips { margin-block-end: 28px; }
.brands-page .chip { padding: 10px 18px; background: var(--bone); border: 0; font: inherit; font-size: var(--step-small); font-weight: 500; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.brands-page .chip:hover { background: var(--line); }
.brands-page .chip[aria-pressed="true"] { background: var(--ground); color: var(--on-dark); }
.bp-h { font: 500 1.6rem/1.2 var(--font-display); margin-block: 8px 14px; }
.bp-letter { font: 500 2rem/1 var(--font-display); color: var(--gold-deep); padding-block-end: 8px; margin-block: 28px 14px; border-block-end: 1px solid var(--line); scroll-margin-top: 110px; }
.bh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bh { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); text-decoration: none; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.bh:hover { border-color: var(--gold); background: var(--bone); }
.bh-name { font: 600 1.25rem/1.2 var(--font-display); }
.bh-meta { font-size: .8rem; color: var(--gold-deep); font-weight: 600; }
.bh-ex { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }
.bh[hidden], .bh-group[hidden] { display: none; }
@media (min-width: 821px) { .bh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .bh { padding: 20px; } }

/* Mobile UX: collapsible shop filters, scrollable A-Z and type chips */
.sf-wrap > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--step-small); font-weight: 600; background: var(--white); }
.sf-wrap > summary::-webkit-details-marker { display: none; }
.sf-wrap > summary::after { content: "+"; color: var(--gold-deep); font-size: 1.2rem; line-height: 1; }
.sf-wrap[open] > summary::after { content: "−"; }
.sf-wrap > summary b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--ground); color: var(--on-dark); font-size: .75rem; }
.sf-body { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-block-start: 12px; }
.shopfilter { align-items: flex-start; }
@media (min-width: 821px) { .sf-wrap > summary { display: none; } .sf-wrap { display: contents; } .sf-body { display: contents; margin: 0; } .shopfilter { align-items: flex-end; } }
@media (max-width: 820px) {
	.sf-wrap { flex: 1 1 auto; }
	.sf-body { display: grid; grid-template-columns: 1fr 1fr; }
	.sf select { min-height: 46px; }
	.sf-clear { align-self: center; }
	.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
	.chips::-webkit-scrollbar { display: none; }
	.chips a, .brands-page .chip { flex: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
	.az { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); gap: 6px; }
	.az::-webkit-scrollbar { display: none; }
	.az a, .az span { flex: none; width: 40px; height: 40px; }
	.bp-letter { margin-block-start: 22px; scroll-margin-top: 130px; }
	.bh { padding: 14px; min-height: 92px; }
	.bh-name { font-size: 1.15rem; }
}

/* Mobile: chips sit side by side in a tidy grid instead of scrolling off-screen */
@media (max-width: 820px) {
	.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; margin-inline: 0; padding-inline: 0; }
	.brands-page .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chips a, .brands-page .chip { justify-content: center; text-align: center; padding: 10px 8px; white-space: normal; line-height: 1.2; }
}

/* Brands page: one continuous grid; the letter sits on the first card of each letter */
.bh { position: relative; scroll-margin-top: 130px; }
.bh-letter { display: none; position: absolute; inset-block-start: 10px; inset-inline-end: 12px; font: 500 1.5rem/1 var(--font-display); color: var(--gold); }
.bh.is-first .bh-letter { display: block; }
.bh-all { margin-block-start: 8px; }
@media (min-width: 560px) and (max-width: 820px) { .bh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bh.is-first .bh-name { padding-inline-end: 22px; }

/* Filters stay visible while scrolling (below the 60px header) */
.bp-sticky { position: sticky; top: 59px; z-index: 20; background: var(--white); margin-inline: calc(var(--margin) * -1); padding: 10px var(--margin) 4px; border-block-end: 1px solid var(--line); margin-block-end: 20px; }
.bp-sticky .az { margin-block-end: 8px; }
.bp-sticky .chips { margin-block-end: 8px; }
.shopfilter { position: sticky; top: 59px; z-index: 20; background: var(--white); margin-inline: calc(var(--margin) * -1); padding: 10px var(--margin); border-block-end: 1px solid var(--line); }
@media (max-width: 820px) {
	.bp-sticky .az { margin-inline: 0; padding-inline: 0; }
	.bp-sticky .chips, .brands-page .bp-sticky .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
	.bp-sticky .chips .chip { min-height: 38px; padding: 6px 2px; font-size: .78rem; }
	.az a { width: 36px; height: 36px; }
}

.az a.off { background: transparent; color: #cbc5b8; pointer-events: none; }

/* Mobile A-Z: all letters visible in a grid (no swiping); only the type chips stay sticky */
@media (max-width: 820px) {
	.brands-page .az { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 6px; margin-block-end: 16px; }
	.brands-page .az a { width: calc((100% - 48px) / 9); height: auto; aspect-ratio: 1; font-size: .85rem; }
}

/* PDP trust points: animated line icons */
.pdp-points li { display: flex; align-items: center; gap: 10px; }
.pp-ico { flex: none; color: var(--gold-deep); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pp-ico .pp-w { fill: var(--gray, #f3f1ed); }
.pp-ico .pp-d { stroke-width: 1.4; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
	.pp-orig .pp-s { stroke-dasharray: 60; stroke-dashoffset: 60; animation: pp-draw 1s var(--ease) .15s forwards; }
	.pp-orig .pp-c { stroke-dasharray: 14; stroke-dashoffset: 14; animation: pp-draw .5s var(--ease) 1s forwards; }
	.pp-hand .pp-s { transform-origin: 50% 85%; animation: pp-drop 3.6s var(--ease) .4s infinite; }
	.pp-ship .pp-t { animation: pp-drive 3.2s var(--ease) .8s infinite; }
	.pp-ship .pp-l { opacity: 0; animation: pp-trail 3.2s var(--ease) .8s infinite; }
	.pdp-points li:hover .pp-ico { animation: pp-pop .5s var(--ease); }
}
@keyframes pp-draw { to { stroke-dashoffset: 0; } }
@keyframes pp-drop { 0%, 55%, 100% { transform: scale(1); } 20% { transform: translateY(-2px) scale(.94, 1.06); } 35% { transform: translateY(0) scale(1.06, .94); } }
@keyframes pp-drive { 0%, 60%, 100% { transform: translateX(0); } 25% { transform: translateX(1.5px); } 45% { transform: translateX(-1px); } }
@keyframes pp-trail { 0%, 15% { opacity: 0; } 30% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes pp-pop { 40% { transform: scale(1.18) rotate(-4deg); } }

/* PDP photo gallery */
.pdp-art.has-photos { padding: 0; align-items: stretch; background: var(--bone); }
.pdp-art .pdp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease); }
.pdp-art .pdp-img.is-on { opacity: 1; }
.pdp-thumbs { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.pdp-thumb { width: 44px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--white); cursor: pointer; opacity: .85; transition: border-color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { opacity: 1; transform: translateY(-2px); }
.pdp-thumb.is-on { border-color: var(--gold); opacity: 1; }
.pdp-thumb:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.pdp-art { position: relative; top: auto; }
@media (min-width: 821px) { .pdp-art { position: sticky; top: 92px; } }

/* PDP notes pyramid */
dl.pdp-notes { margin: 0; display: grid; gap: 10px; max-width: none; font-size: var(--step-small); line-height: 1.4; }
.pn-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.pn-row dt { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
html[dir="rtl"] .pn-row dt { letter-spacing: 0; font-size: .82rem; text-transform: none; }
.pn-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pn-row dd span { padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); }

/* PDP notes pyramid, v2: quiet rows, hairline dividers, plain text */
dl.pdp-notes { gap: 0; border-block: 1px solid var(--line); margin-block: 4px; font-size: .95rem; line-height: 1.55; }
.pn-row { grid-template-columns: 4.2rem 1fr; gap: 14px; align-items: start; padding-block: 11px; }
.pn-row + .pn-row { border-block-start: 1px solid var(--line); }
.pn-row dt { padding-block-start: 3px; font-size: .68rem; letter-spacing: .16em; }
html[dir="rtl"] .pn-row dt { padding-block-start: 1px; font-size: .85rem; font-weight: 700; }
.pn-row dd { display: block; color: var(--ink); }
.pn-row dd span { display: inline; padding: 0; border: 0; border-radius: 0; background: none; }
.pn-row dd span:not(:last-child)::after { content: "·"; margin-inline: .5em; color: var(--gold); font-weight: 700; }
.pn-row { grid-template-columns: 4.2rem minmax(0, 1fr); }
.pn-row dd { min-width: 0; overflow-wrap: anywhere; }
dl.pdp-notes { min-width: 0; }
.pn-row dd { overflow-wrap: normal; }
.pn-row dd span { white-space: nowrap; }

/* PDP trust points, v2: three quiet columns, gold ring icons */
.pdp-info .pdp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin-block: 4px; border-block: 1px solid var(--line); }
.pdp-info .pdp-points li { flex-direction: column; justify-content: flex-start; text-align: center; gap: 10px; padding: 16px 8px 14px; background: none; border-radius: 0; font-size: .78rem; line-height: 1.35; letter-spacing: .02em; color: var(--ink-soft); }
.pdp-info .pdp-points li + li { border-inline-start: 1px solid var(--line); }
.pdp-info .pdp-points .pp-ico { box-sizing: content-box; width: 22px; height: 22px; padding: 9px; border: 1px solid var(--gold); border-radius: 50%; background: var(--white); transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.pdp-info .pdp-points li:hover .pp-ico { background: var(--gold); color: var(--white); }
.pdp-info .pdp-points .pp-ico .pp-w { fill: var(--white); }
.pdp-info .pdp-points li:hover .pp-ico .pp-w { fill: var(--gold); }
@media (max-width: 820px) { .pdp-info .pdp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }

/* PDP: brand sits beside the perfume name */
.pdp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pdp-head h1 { margin: 0; }
.pdp-head .pdp-brand { margin: 0; align-self: center; padding: 5px 12px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; background: var(--gray); }
html[dir="rtl"] .pdp-head .pdp-brand { letter-spacing: 0; text-transform: none; font-size: .85rem; }
.pdp-head .pdp-brand b { border: 0; font-weight: 600; }
.pdp-head { align-items: baseline; }
.pdp-head .pdp-brand { align-self: baseline; position: relative; top: -4px; }
html[dir="rtl"] .pdp-head .pdp-brand { top: -5px; }
html[dir="rtl"] .pdp-head .pdp-brand { top: -2px; }

/* PDP trust points, v3: SVG ring + icon that draw themselves, then a slow orbiting glint */
.pdp-info .pdp-points .pp-ico { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; color: var(--gold-deep); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: none; }
.pp-ico .pp-ring { stroke: var(--gold); stroke-width: 1; fill: var(--white); transition: fill .35s var(--ease); }
.pp-ico .pp-glint { stroke: var(--gold); stroke-width: 2.2; stroke-dasharray: .07 .93; opacity: 0; transform-origin: 24px 24px; }
.pp-ico .pp-w { fill: var(--white); transition: fill .35s var(--ease); }
.pp-ico .pp-d { stroke-width: 1.3; opacity: .65; }
.pp-ico .pp-drop { fill: var(--gold); fill-opacity: 0; transition: fill-opacity .6s var(--ease); }
.pdp-info .pdp-points li:hover .pp-ico { color: var(--white); }
.pdp-info .pdp-points li:hover .pp-ring { fill: var(--gold); }
.pdp-info .pdp-points li:hover .pp-w { fill: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
	[data-points] .pp-ring, [data-points] .pp-s, [data-points] .pp-c, [data-points] .pp-d { stroke-dasharray: 1; stroke-dashoffset: 1; }
	[data-points] .pp-t, [data-points] .pp-l, [data-points] .pp-w { opacity: 0; }
	[data-points].in .pp-ring { animation: pp-draw 1.1s var(--ease) calc(var(--i) * .18s) forwards; }
	[data-points].in .pp-s { animation: pp-draw .9s var(--ease) calc(var(--i) * .18s + .55s) forwards; }
	[data-points].in .pp-c { animation: pp-draw .5s var(--ease) calc(var(--i) * .18s + 1.3s) forwards; }
	[data-points].in .pp-d { animation: pp-draw .5s var(--ease) calc(var(--i) * .18s + 1.2s) forwards; }
	[data-points].in .pp-drop { fill-opacity: .14; transition-delay: calc(var(--i) * .18s + 1.2s); }
	[data-points].in .pp-t { animation: pp-in-x .9s var(--ease) calc(var(--i) * .18s + .55s) forwards; }
	[data-points].in .pp-w { animation: pp-fade .4s var(--ease) calc(var(--i) * .18s + 1.2s) forwards; }
	[data-points].in .pp-l { animation: pp-fade .6s var(--ease) calc(var(--i) * .18s + .9s) forwards; }
	[data-points].in .pp-glint { animation: pp-orbit 7s linear calc(var(--i) * .9s + 2.2s) infinite; }
	[data-points].in .pp-hand .pp-g { animation: pp-float 5s ease-in-out calc(var(--i) * .18s + 2s) infinite; }
	[data-points].in .pp-ship .pp-w { transform-box: fill-box; transform-origin: center; }
	[data-points] li span { opacity: 0; transform: translateY(4px); }
	[data-points].in li span { animation: pp-text .7s var(--ease) calc(var(--i) * .18s + .5s) forwards; }
}
@keyframes pp-draw { to { stroke-dashoffset: 0; } }
@keyframes pp-in-x { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
@keyframes pp-fade { to { opacity: 1; } }
@keyframes pp-text { to { opacity: 1; transform: none; } }
@keyframes pp-orbit { 0% { opacity: 0; transform: rotate(0); } 8%, 88% { opacity: .9; } 100% { opacity: 0; transform: rotate(360deg); } }
@keyframes pp-float { 0%, 100% { transform: translate(12px, 12px); } 50% { transform: translate(12px, 10.8px); } }

/* WhatsApp: icon only (no disc, no ring) */
.wa-float, .wa-float:hover { background: none; box-shadow: none; }
.wa-float { color: var(--gold-deep); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 3px 8px rgba(0, 0, 0, .32)); }
.wa-float svg { width: 36px; height: 36px; }
.wa-float::before { display: none; }
.wa-float:hover { color: var(--gold); transform: translateY(-3px) scale(1.1); }

/* Home: top houses only + "All brands" tile */
.brand-tile.brand-all { background: var(--ground); }
.brand-tile.brand-all .brand-name { color: var(--on-dark); }
.brand-tile.brand-all .brand-count { color: var(--gold); }
.brand-tile.brand-all:hover { background: var(--gold-deep); }
.brand-tile.brand-all:hover .brand-name, .brand-tile.brand-all:hover .brand-count { color: var(--white); }
.brand-tile.brand-all .arr { display: inline-block; transition: transform .3s var(--ease); }
.brand-tile.brand-all:hover .arr { transform: translateX(4px); }
html[dir="rtl"] .brand-tile.brand-all:hover .arr { transform: translateX(-4px); }

/* Product tile with a real photo: the photo fills the tile edge to edge */
.card-art.has-photo { padding: 0; background: var(--bone); align-items: stretch; }
.card-art.has-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.card:hover .card-art.has-photo > img { transform: scale(1.04); }

/* Hero: founder photo (landscape 4:3), keep the face and the decant in frame */
.hero-photo img { object-position: 45% 40%; }
@media (max-width: 820px) { .hero-photo img { aspect-ratio: 4 / 3; object-position: 50% 30%; height: auto; } }

/* Desktop filters: newer browsers wrap <details> content in a block box; flatten it so the selects sit in one row */
@media (min-width: 821px) { .sf-wrap::details-content { display: contents; } .sf-wrap { content-visibility: visible; } }

/* Hero v3: one wide photo with the copy laid over its empty right side (desktop); photo crop on phones */
@media (min-width: 821px) {
	.hero { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; background: #8a8d91; color: var(--ink); min-height: 0; }
	.hero-photo, .hero-copy { grid-area: 1 / 1; }
	.hero-photo { order: 0; min-height: 0; }
	.hero-photo img { position: static; width: 100%; height: auto; aspect-ratio: 2 / 1; max-height: 86svh; min-height: 520px; object-fit: cover; object-position: 28% 40%; }
	.hero-copy { order: 0; position: relative; z-index: 1; justify-self: end; align-self: center; width: min(40%, 560px); max-width: none; margin: 0; padding: 40px clamp(32px, 5vw, 96px) 40px 0; }
	html[dir="rtl"] .hero-copy { justify-self: end; padding: 40px clamp(32px, 5vw, 96px) 40px 0; }
	.hero h1, .hero .lead { color: var(--ink); }
	.hero-trust { color: var(--ink); opacity: .75; }
	.hero .btn-link { color: var(--ink); }
	.hero .btn-gold { background: var(--ground); color: var(--on-dark); }
	.hero .btn-gold:hover, .hero .btn-gold:focus-visible { background: var(--gold); color: var(--ground); }
}
@media (max-width: 820px) { .hero-photo img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 24% 40%; } }
@media (min-width: 821px) { html[dir="rtl"] .hero-copy { justify-self: start; } }

/* Hero headline is longer now: let it wrap and balance on phones */
@media (max-width: 820px) {
	html[lang^="ar"] .hero h1, html:not([lang^="ar"]) .hero h1 { white-space: normal; text-wrap: balance; font-size: clamp(1.9rem, 8.4vw, 2.6rem); line-height: 1.15; }
	html[lang^="ar"] .hero h1 { line-height: 1.3; }
}

/* Hero (desktop): the photo always fills the whole hero, whatever height the copy needs */
@media (min-width: 821px) {
	.hero { min-height: clamp(520px, 52vw, 860px); }
	.hero-photo { position: relative; height: 100%; min-height: 0; }
	.hero-photo picture { display: block; position: absolute; inset: 0; }
	.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; min-height: 0; aspect-ratio: auto; object-fit: cover; object-position: 28% 42%; }
}

/* "All perfumes" tile: the photo drifts left and right while you hover */
.who-tile.who-all .who-img img { width: 124%; max-width: none; height: 100%; object-fit: cover; transform: translateX(0); transition: transform .9s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
	.who-tile.who-all:hover .who-img img { animation: who-pan 5.5s ease-in-out infinite alternate; transform: none; }
	html[dir="rtl"] .who-tile.who-all:hover .who-img img { animation-name: who-pan-rtl; }
}
@keyframes who-pan { from { transform: translateX(0); } to { transform: translateX(-19%); } }
@keyframes who-pan-rtl { from { transform: translateX(0); } to { transform: translateX(19%); } }

/* Reduced-motion users still get one calm slide on hover (no looping) */
.who-tile.who-all .who-img img { transition: transform 1.4s var(--ease); }
.who-tile.who-all:hover .who-img img { transform: translateX(-19%); }
html[dir="rtl"] .who-tile.who-all:hover .who-img img { transform: translateX(19%); }
@media (prefers-reduced-motion: no-preference) {
	.who-tile.who-all:hover .who-img img { transform: none; }
	html[dir="rtl"] .who-tile.who-all:hover .who-img img { transform: none; }
}

/* WhatsApp: smaller, no shadow */
.wa-float { filter: none; width: 44px; height: 44px; }
.wa-float svg { width: 28px; height: 28px; }

/* "All perfumes" tile: the photo follows the pointer (JS sets --pan); no looping animation */
.who-tile.who-all { --pan: -9.7%; }
html[dir="rtl"] .who-tile.who-all { --pan: 9.7%; }
.who-tile.who-all .who-img img, .who-tile.who-all:hover .who-img img { animation: none !important; transform: translateX(var(--pan)) !important; transition: transform .3s cubic-bezier(.2, .7, .2, 1) !important; }

/* Footer texture: fine grain + a faint gold glow, no extra image requests */
.foot { position: relative; isolation: isolate; background-image: radial-gradient(ellipse 70% 60% at 85% 0%, rgba(184, 151, 90, .10), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(184, 151, 90, .06), transparent 70%); }
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* Footer (mobile): no double line under the last column */
@media (max-width: 820px) { .foot .foot-col:last-child { border-block-end: 0; } }

/* Footer (mobile), swapped: keep the line under the last column, drop the one above the legal text */
@media (max-width: 820px) {
	.foot .foot-col:last-child { border-block-end: 1px solid rgba(255, 255, 255, .1); }
	.foot .foot-bottom { border-block-start: 0; }
}

/* Hero (phones): the portrait version of the photo, face and bottles both in frame */
@media (max-width: 820px) { .hero-photo img { aspect-ratio: 4 / 5; max-height: 62svh; object-fit: cover; object-position: 50% 22%; } }

/* Gold on dark surfaces: a soft champagne instead of the mustard-looking #b8975a */
:root { --champagne: #d9c6a0; } /* one gold family: --gold #c4ab7c (accents) · --gold-deep #8a6f42 (text on light) · --champagne #d9c6a0 (text on dark) */
.ann, .ann span { color: var(--champagne); }
.foot h3, .foot .foot-col summary, .foot a:hover, .foot .foot-col ul a:hover { color: var(--champagne); }
.foot .foot-col summary { letter-spacing: .12em; font-weight: 500; }
.brand-tile.brand-all .brand-count { color: var(--champagne); }
.size-bottle .size-meta, .toast-link { color: var(--champagne); }
.ann span::before, .ann-dot { background: var(--champagne); }

/* WhatsApp icon: inverts against whatever is behind it (black on light, white on dark) */
.wa-float, .wa-float:hover { color: #fff; mix-blend-mode: difference; }
.wa-float:hover { opacity: .75; }

/* Photo products: the size cards below are the only size picker (the pills only switched the vial drawing) */
.pdp-art.has-photos .pdp-pills { display: none; }

/* Product page order: name + price -> sizes -> add to cart -> notes -> trust points */
.pdp-info { display: flex; flex-direction: column; }
.pdp-info > * { order: 20; }
.pdp-info > .woocommerce-notices-wrapper, .pdp-info > .woocommerce-message, .pdp-info > .woocommerce-error { order: 0; }
.pdp-info > .pdp-head { order: 1; }
.pdp-info > .pdp-priceline { order: 2; }
.pdp-info > .sm-sizes { order: 3; }
.pdp-info > .pdp-meta { order: 4; }
.pdp-info > form.cart { order: 5; }
.pdp-info > .pdp-notes { order: 6; margin-block-start: 8px; }
.pdp-info > .pdp-points { order: 7; }
.pdp-info > .pdp-bottle { order: 8; }
.pdp-info > .pdp-more { order: 9; }

/* Notes now live in the accordion (first item, open by default) */
.pdp-info > .pdp-points { order: 6; }
.pdp-info > .pdp-bottle { order: 7; }
.pdp-info > .pdp-more { order: 8; }
.pdp-more details > dl.pdp-notes { margin: 0; padding-block-end: 16px; border-block: 0; }
.pdp-more details > dl.pdp-notes .pn-row:first-child { padding-block-start: 0; }
.pdp-more details > dl.pdp-notes .pn-row:last-child { padding-block-end: 0; }
.pdp-more details[open] > dl.pdp-notes { animation: faq-open .4s var(--ease) both; }

/* Payment methods row (Fawry first) */
.pay-methods { list-style: none; margin: -4px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pay-methods li { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .8125rem; font-weight: 600; background: var(--white); color: var(--ink); }
.pay-methods li.is-main { border-color: var(--gold); }

/* Founder section: small "Meet Mohamed" label above the headline */
.founder-text > .founder-eyebrow { margin: 0; display: flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.founder-text > .founder-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
html[lang^="ar"] .founder-text > .founder-eyebrow { letter-spacing: 0; font-size: .95rem; text-transform: none; }

/* Sizes stage: soft light, fine grain and a faint surface under the vials */
.sizes-photo.stage3 { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 70% 80% at 50% 25%, #ffffff 0%, #f6f3ee 70%, #efebe3 100%); }
.sizes-photo.stage3::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .33  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.sizes-photo.stage3::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 34%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(190, 180, 160, 0) 0%, rgba(190, 180, 160, .28) 100%); border-block-start: 1px solid rgba(138, 111, 66, .14); }

/* Sizes stage v2: texture only, no surface or vignette */
.sizes-photo.stage3 { background: #fbf9f5; }
.sizes-photo.stage3::after { display: none; }

/* Sizes stage v3: back to clean white (clear glass reads best on white) */
.sizes-photo.stage3 { background: #fff; }
.sizes-photo.stage3::before, .sizes-photo.stage3::after { display: none; }

/* Size rows: the arrow says "tap me", and it nudges on hover */
.size-from .arr { display: inline-block; margin-inline-start: 6px; color: var(--gold-deep); transition: transform .25s var(--ease); }
.size-list a:hover .size-from .arr { transform: translateX(4px); }
html[dir="rtl"] .size-list a:hover .size-from .arr { transform: scaleX(-1) translateX(4px); }

/* Gift offer: PDP line + cart progress */
.pdp-gift { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 10px 14px; border: 1px dashed var(--gold); border-radius: 12px; background: var(--white); color: var(--ink); font-size: .875rem; font-weight: 600; }
.pdp-gift svg { flex: none; color: var(--gold-deep); }
.pdp-info > .pdp-gift { order: 4; }
.sm-gift { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.sm-gift p { margin: 0 0 10px; font-size: .9375rem; font-weight: 600; }
.sm-gift-bar { height: 6px; border-radius: 999px; background: var(--bone); overflow: hidden; }
.sm-gift-bar i { display: block; height: 100%; border-radius: 999px; background: var(--gold); transition: width .6s var(--ease); }
.sm-gift.is-done { border-color: var(--gold); }

/* Cart: show the perfume photo */
td.product-thumbnail, th.product-thumbnail { display: table-cell; width: 92px; }
td.product-thumbnail a { display: block; }
td.product-thumbnail img { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: 12px; background: var(--bone); }
@media (max-width: 700px) {
	table.shop_table_responsive tr.cart_item { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-block: 16px; }
	table.shop_table_responsive td.product-thumbnail { display: block; grid-column: 1; grid-row: 1 / span 4; padding: 0; }
	table.shop_table_responsive td.product-thumbnail::before { content: none; }
	table.shop_table_responsive td.product-thumbnail img { width: 84px; height: 84px; }
	table.shop_table_responsive tr.cart_item td:not(.product-thumbnail):not(.product-remove) { grid-column: 2; padding: 3px 0; }
	table.shop_table_responsive td.product-name { font-weight: 600; font-size: 1.0625rem; }
	table.shop_table_responsive td.product-name::before { content: none; }
	table.shop_table_responsive td.product-name a { text-decoration: none; }
	table.shop_table_responsive td.product-remove { position: absolute; inset-block-start: 10px; inset-inline-end: 0; padding: 0; }
	table.shop_table_responsive td.product-price, table.shop_table_responsive td.product-quantity, table.shop_table_responsive td.product-subtotal { font-size: .9375rem; color: var(--ink-soft); }
	table.shop_table_responsive td.product-price::before, table.shop_table_responsive td.product-quantity::before, table.shop_table_responsive td.product-subtotal::before { font-weight: 400; font-size: .8125rem; }
	table.shop_table_responsive td.product-subtotal { color: var(--ink); font-weight: 600; }
}

/* Cart totals: one clean line per item (label | value), flat-rate Egypt shipping needs no calculator */
.cart_totals .woocommerce-shipping-calculator, .cart_totals .woocommerce-shipping-destination { display: none; }
.cart_totals table.shop_table { width: 100%; border-collapse: collapse; }
.cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-block-end: 1px solid var(--line); }
.cart_totals table.shop_table tr:last-child { border-block-end: 0; }
.cart_totals table.shop_table th, .cart_totals table.shop_table td { display: block; padding: 0; border: 0; width: auto; text-align: start; }
.cart_totals table.shop_table th { font-weight: 600; }
.cart_totals table.shop_table td { text-align: end; }
.cart_totals table.shop_table td::before { content: none; }
.cart_totals table.shop_table ul#shipping_method { margin: 0; padding: 0; list-style: none; }
.cart_totals table.shop_table ul#shipping_method li { margin: 0; }
.cart_totals tr.order-total th, .cart_totals tr.order-total td { font-size: 1.125rem; font-weight: 700; }
.cart_totals tr.fee td, .cart_totals tr.fee th { color: var(--gold-deep); }
.cart_totals .wc-proceed-to-checkout { margin-block-start: 8px; }

/* Size cards: name + size on one line, one price (no per-ml price anywhere on the product page) */
.sm-size { grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 10px; padding-block: 18px; }
.sm-size b { grid-column: 1; grid-row: 1; }
.sm-size span { grid-column: 2; grid-row: 1; }
.sm-size em { grid-column: 3; grid-row: 1; align-self: baseline; font-size: 1.0625rem; }
.sm-size small { display: none; }
.pdp-perml { display: none; }

/* Size cards: a small vial whose fill and height match the size */
.sm-size { grid-template-columns: auto auto 1fr auto; column-gap: 12px; }
.sm-size .sz-vial { grid-column: 1; grid-row: 1; align-self: center; width: auto; overflow: visible; }
.sm-size .sz-vial .sz-cap { fill: var(--ink); }
.sm-size .sz-vial .sz-body { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.sm-size .sz-vial .sz-liq { fill: var(--gold); opacity: .85; }
.sm-size b { grid-column: 2; }
.sm-size span { grid-column: 3; }
.sm-size em { grid-column: 4; }
@media (prefers-reduced-motion: no-preference) { .sm-size .sz-vial .sz-liq { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .5s var(--ease); } .sm-size:hover .sz-vial .sz-liq, .sm-size[aria-pressed="true"] .sz-vial .sz-liq { transform: scaleY(1.06); } }

/* Mini vial v2: shaped like the real decant (square glass body, big matte black cap, visible pump tube) */
.sm-size .sz-vial .sz-cap { fill: #141311; }
.sm-size .sz-vial .sz-body { fill: rgba(255, 255, 255, .55); stroke: #141311; stroke-width: .9; }
.sm-size .sz-vial .sz-tube { stroke: #8d8a84; stroke-width: .6; fill: none; stroke-linecap: round; }
.sm-size .sz-vial .sz-pump { fill: #9a9893; }
.sm-size .sz-vial .sz-liq { fill: var(--gold); opacity: .9; }

/* Size cards: real vial photo (cropped from the product shot), white removed by multiply */
.sm-size img.sz-photo { width: auto; max-width: none; mix-blend-mode: multiply; align-self: center; }
.sm-size[data-ml="10"] img.sz-photo, .sm-size img.sz-photo[height="120"] { height: 40px; }
.sm-size img.sz-photo[height="101"] { height: 34px; }
.sm-size img.sz-photo[height="82"] { height: 27px; }

/* Gift line: the lid lifts and little sparkles pop (once, then every few seconds) */
.pdp-gift .gift-ico { overflow: visible; }
.pdp-gift .gift-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pdp-gift .gift-lid { transform-box: fill-box; transform-origin: 50% 100%; }
.pdp-gift { cursor: default; }
@keyframes gift-lift { 0%, 8% { transform: translateY(0) rotate(0); } 18% { transform: translateY(-3px) rotate(-6deg); } 28% { transform: translateY(-2px) rotate(5deg); } 38% { transform: translateY(0) rotate(0); } 100% { transform: translateY(0); } }
@keyframes gift-spark { 0%, 12% { opacity: 0; transform: scale(.3); } 22% { opacity: 1; transform: scale(1.2); } 40%, 100% { opacity: 0; transform: scale(.6); } }
.pdp-gift .gift-lid { animation: gift-lift 1.4s var(--ease) .8s 1 both; }
.pdp-gift .gift-spark.s1 { animation: gift-spark 1.4s var(--ease) .8s 1 both; }
.pdp-gift .gift-spark.s2 { animation: gift-spark 1.4s var(--ease) 1s 1 both; }
.pdp-gift:hover .gift-lid { animation: gift-lift 1.1s var(--ease) both; }
.pdp-gift:hover .gift-spark.s1 { animation: gift-spark 1.1s var(--ease) both; }
.pdp-gift:hover .gift-spark.s2 { animation: gift-spark 1.1s var(--ease) .15s both; }
@media (prefers-reduced-motion: no-preference) {
	.pdp-gift .gift-lid { animation: gift-lift 6s var(--ease) .8s infinite both; }
	.pdp-gift .gift-spark.s1 { animation: gift-spark 6s var(--ease) .8s infinite both; }
	.pdp-gift .gift-spark.s2 { animation: gift-spark 6s var(--ease) 1s infinite both; }
}

/* Gift icon keeps animating (loop every 5s), also with "reduce motion" on: it is a tiny 3px lid lift */
.pdp-gift .gift-lid { animation: gift-lift 5s var(--ease) .8s infinite both; }
.pdp-gift .gift-spark.s1 { animation: gift-spark 5s var(--ease) .8s infinite both; }
.pdp-gift .gift-spark.s2 { animation: gift-spark 5s var(--ease) 1s infinite both; }

/* Gift icon: snappier (a lift every 2.4s, the motion itself lasts under a second) */
@keyframes gift-lift { 0%, 4% { transform: translateY(0) rotate(0); } 14% { transform: translateY(-3.5px) rotate(-8deg); } 24% { transform: translateY(-2px) rotate(7deg); } 34% { transform: translateY(0) rotate(-3deg); } 42%, 100% { transform: translateY(0) rotate(0); } }
@keyframes gift-spark { 0%, 6% { opacity: 0; transform: scale(.3); } 16% { opacity: 1; transform: scale(1.25); } 34%, 100% { opacity: 0; transform: scale(.6); } }
.pdp-gift .gift-lid { animation: gift-lift 2.4s var(--ease) .4s infinite both; }
.pdp-gift .gift-spark.s1 { animation: gift-spark 2.4s var(--ease) .4s infinite both; }
.pdp-gift .gift-spark.s2 { animation: gift-spark 2.4s var(--ease) .55s infinite both; }

/* Gift icon: one-second loop */
@keyframes gift-lift-1s { 0% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-3.5px) rotate(-8deg); } 40% { transform: translateY(-1.5px) rotate(7deg); } 60% { transform: translateY(0) rotate(-3deg); } 75%, 100% { transform: translateY(0) rotate(0); } }
@keyframes gift-spark-1s { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.25); } 60%, 100% { opacity: 0; transform: scale(.6); } }
.pdp-gift .gift-lid { animation: gift-lift-1s 1s var(--ease) .2s infinite both; }
.pdp-gift .gift-spark.s1 { animation: gift-spark-1s 1s var(--ease) .2s infinite both; }
.pdp-gift .gift-spark.s2 { animation: gift-spark-1s 1s var(--ease) .35s infinite both; }

/* Size cards: dotted leader from the size to the price */
.sm-size > span { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sm-size > span::after { content: ""; flex: 1; min-width: 14px; border-block-end: 1.5px dotted rgba(20, 19, 17, .28); transform: translateY(-4px); }
.sm-size[aria-pressed="true"] > span::after { border-block-end-color: rgba(138, 111, 66, .6); }

/* Reassurance row v2: compact, sits right under "Add to cart" */
.pdp-info .pdp-points { margin-block: 2px 0; border-block: 0; border-block-end: 1px solid var(--line); }
.pdp-info .pdp-points li { flex-direction: row; justify-content: center; align-items: center; text-align: start; gap: 8px; padding: 12px 6px; font-size: .75rem; line-height: 1.25; letter-spacing: 0; }
.pdp-info .pdp-points li + li { border-inline-start: 1px solid var(--line); }
.pdp-info .pdp-points .pp-ico { width: 30px; height: 30px; flex: none; }
.pdp-info .pdp-points .pp-ring { stroke-width: 1.4; }
.pdp-info .pdp-points li span { flex: 0 1 auto; }
.pdp-info > .pdp-assure { order: 6; margin: 10px 0 4px; font-size: .8125rem; color: var(--ink-soft); line-height: 1.5; }
.pdp-info > .pdp-points { order: 6; }
.pdp-info > .pdp-assure { order: 7; }
.pdp-info > .pdp-bottle { order: 8; }
.pdp-info > .pdp-more { order: 9; }
@media (max-width: 420px) { .pdp-info .pdp-points li { flex-direction: column; gap: 6px; padding: 12px 4px; text-align: center; } }

/* Thank-you page */
.sm-thanks { margin: 0 0 32px; padding: 24px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.sm-thanks-eyebrow { margin: 0 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
html[lang^="ar"] .sm-thanks-eyebrow { letter-spacing: 0; font-size: .9rem; text-transform: none; }
.sm-thanks h2 { margin: 0 0 10px; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.15; }
.sm-thanks-lead { margin: 0 0 20px; color: var(--ink-soft); max-width: 52ch; }
.sm-thanks-steps { list-style: none; counter-reset: s; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.sm-thanks-steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.sm-thanks-steps li::before { content: counter(s); grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; font-weight: 600; color: var(--gold-deep); }
.sm-thanks-steps b { font-weight: 600; }
.sm-thanks-steps span { color: var(--ink-soft); font-size: .9375rem; }
.sm-thanks-gift { margin-block-start: 22px; padding: 18px; border: 1px dashed var(--gold); border-radius: 14px; background: var(--bone); text-align: center; }
.sm-thanks-gift p { margin: 0 0 8px; }
.sm-thanks-gift-title { font-weight: 700; }
.sm-thanks-code code { display: inline-block; padding: 8px 18px; border-radius: 10px; background: var(--ground); color: var(--champagne); font-size: 1.25rem; font-weight: 700; letter-spacing: .14em; direction: ltr; }
.sm-thanks-fine { font-size: .875rem; color: var(--ink-soft); margin: 10px 0 0; }



/* Thank-you page: the two standing offers */
.sm-thanks-gift { text-align: start; }
.sm-thanks-gift-title { text-align: start; }
.sm-thanks-offers { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.sm-thanks-offers li { display: flex; gap: 10px; align-items: baseline; font-weight: 600; }
.sm-thanks-offers li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; background: var(--gold); transform: rotate(45deg); }

/* Thank-you page: warmth (heart, a note from Mohamed, tips, share, sign-off) */
.sm-thanks-heart { display: block; margin: 0 0 8px; color: var(--gold-deep); transform-origin: 50% 60%; animation: sm-heart 1.8s ease-in-out infinite; }
@keyframes sm-heart { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } 56% { transform: scale(1); } }
.sm-thanks-note { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; margin-block-start: 22px; padding: 16px; border-radius: 14px; background: var(--bone); }
.sm-thanks-note img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.sm-thanks-note p { margin: 0 0 8px; line-height: 1.6; }
.sm-thanks-sign { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; color: var(--gold-deep); direction: ltr; }
.sm-thanks-tips { margin-block-start: 22px; }
.sm-thanks-tips ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; color: var(--ink-soft); }
.sm-thanks-tips li { display: flex; gap: 10px; align-items: baseline; }
.sm-thanks-tips li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; background: var(--gold); border-radius: 50%; }
.sm-thanks-share { margin-block-start: 22px; text-align: center; }
.sm-thanks-share .sm-thanks-gift-title { text-align: center; }
.sm-thanks-actions { display: grid; gap: 12px; justify-items: center; }
.sm-thanks-actions .btn-block { width: 100%; }
.sm-thanks-tagline { margin: 24px 0 0; text-align: center; font: italic 500 1.25rem/1.3 var(--font-display); color: var(--gold-deep); }
.sm-thanks-actions .btn-block { display: block; text-align: center; padding: 14px 18px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none; transition: background .25s var(--ease), color .25s var(--ease); }
.sm-thanks-actions .btn-block:hover { background: var(--ground); color: var(--on-dark); }

/* ================= Shop: filter sidebar, toolbar, sort, active chips ================= */
.shop-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; }
.shop-main { min-width: 0; }
.shop-main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .shop-main .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.shop-side { position: sticky; top: 78px; max-height: calc(100vh - 98px); overflow-y: auto; scrollbar-width: thin; padding-inline-end: 6px; }
.shop-side-head, .shop-filter-btn, .shop-overlay { display: none; }
.shop-side-foot { margin-top: 14px; }
.shop-side-foot .btn { display: none; }
.sf-clear { display: inline-block; padding: 6px 0; font-size: var(--step-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--gold-deep); }

.fg { border-block-end: 1px solid var(--line); }
.fg:first-of-type { border-block-start: 1px solid var(--line); }
.fg > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 18px 2px; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
html[lang^="ar"] .fg > summary { letter-spacing: 0; text-transform: none; font-size: 1rem; }
.fg > summary::-webkit-details-marker { display: none; }
.fg > summary > span { flex: 1; }
.fg > summary > b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--ground); color: var(--on-dark); font-size: .75rem; letter-spacing: 0; }
.fg > summary::after { content: ""; width: 8px; height: 8px; border-inline-end: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); }
.fg[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.fg-body { padding: 0 2px 16px; }

.fo { display: flex; align-items: center; gap: 12px; padding: 7px 0; cursor: pointer; font-size: .9375rem; }
.fo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fo-box { flex: none; width: 18px; height: 18px; border: 1.5px solid #b9b3a6; border-radius: 4px; background: var(--white); display: grid; place-items: center; transition: background .2s var(--ease), border-color .2s var(--ease); }
.fo-box::after { content: ""; width: 9px; height: 5px; border-inline-start: 2px solid var(--white); border-block-end: 2px solid var(--white); transform: rotate(-45deg) translateY(-1px) scale(0); transition: transform .2s var(--ease); }
.fo input:checked + .fo-box { background: var(--ground); border-color: var(--ground); }
.fo input:checked + .fo-box::after { transform: rotate(-45deg) translateY(-1px) scale(1); }
.fo input:focus-visible + .fo-box { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.fo:hover .fo-box { border-color: var(--ink); }
.fo-t { flex: 1; min-width: 0; }
.fo-n { color: var(--ink-soft); font-size: .8125rem; font-variant-numeric: lining-nums; }
.fo-new { padding: 14px 2px; font-weight: 600; }
.fo-list .fo-row.is-more { display: none; }
.fo-list.is-open .fo-row.is-more { display: block; }
.fo-toggle { appearance: none; border: 0; background: none; padding: 8px 0 0; font: inherit; font-size: var(--step-small); font-weight: 600; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 4px 18px; border-block-end: 1px solid var(--line); margin-block-end: 20px; }
.shop-count { margin: 0; color: var(--ink-soft); }
.shop-sort { position: relative; margin-inline-start: auto; }
.shop-sort > summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: center; padding: 8px 2px; }
.shop-sort > summary::-webkit-details-marker { display: none; }
.shop-sort > summary::after { content: ""; width: 7px; height: 7px; margin-inline-start: 6px; border-inline-end: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
.shop-sort[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.shop-sort .ss-l { color: var(--ink-soft); }
.shop-sort ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(20, 19, 17, .16); }
.shop-sort li a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; text-decoration: none; }
.shop-sort li a:hover { background: var(--bone); }
.shop-sort li a[aria-selected="true"] { font-weight: 600; color: var(--gold-deep); }

.shop-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 20px; }
.shop-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--bone); font-size: .875rem; text-decoration: none; transition: background .2s var(--ease); }
.shop-chip:hover { background: var(--line); }
.shop-chip span { color: var(--ink-soft); font-size: 1.05rem; line-height: 1; }
.shop-chip-clear { padding: 7px 4px; font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--gold-deep); }

@media (max-width: 820px) {
	.shop-layout { display: block; }
	.shop-filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: inherit; font-size: var(--step-small); font-weight: 600; cursor: pointer; }
	.shop-filter-btn b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--ground); color: var(--on-dark); font-size: .75rem; }
	.shop-bar { flex-wrap: wrap; }
	.shop-count { order: 3; flex: 1 1 100%; font-size: .875rem; }
	.shop-side { position: fixed; inset: 0; z-index: 120; max-height: none; overflow: hidden; background: var(--white); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .35s var(--ease); padding: 0; }
	html[dir="rtl"] .shop-side { transform: translateX(100%); }
	html.shop-filters-open .shop-side { transform: none; }
	html.shop-filters-open body { overflow: hidden; }
	.sf-form { display: flex; flex-direction: column; height: 100%; }
	.shop-side-head { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--margin); border-block-end: 1px solid var(--line); font: 600 1.25rem/1 var(--font-display); }
	.shop-side-close { appearance: none; border: 0; background: none; font-size: 2rem; line-height: 1; padding: 0 4px; cursor: pointer; }
	.shop-side-scroll { flex: 1; overflow-y: auto; padding: 0 var(--margin); }
	.shop-side-foot { margin: 0; padding: 14px var(--margin) calc(14px + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--line); display: grid; gap: 4px; justify-items: center; background: var(--white); }
	.shop-side-foot .btn { display: block; width: 100%; }
	.shop-main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* checkbox tick: physical borders so it is never mirrored in RTL */
.fo-box::after { border-inline-start: 0; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); }

/* phones: no result count line under the toolbar */
@media (max-width: 820px) { .shop-count { display: none; } .shop-bar { padding-block-end: 14px; } }

/* Pagination: a centred row of numbered buttons */
.woocommerce-pagination { margin-block: 40px 16px; }
.woocommerce-pagination ul.page-numbers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.woocommerce-pagination ul.page-numbers li { margin: 0; padding: 0; list-style: none; }
.woocommerce-pagination ul.page-numbers li::marker { content: none; }
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span.page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); text-decoration: none; font-weight: 600; font-variant-numeric: lining-nums; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.woocommerce-pagination .page-numbers a:hover { background: var(--bone); border-color: var(--ink-soft); }
.woocommerce-pagination .page-numbers .current { background: var(--ground); border-color: var(--ground); color: var(--on-dark); }
.woocommerce-pagination .page-numbers .dots { border: 0; background: none; min-width: 20px; padding: 0; }
html[dir="rtl"] .woocommerce-pagination .page-numbers a.prev, html[dir="rtl"] .woocommerce-pagination .page-numbers a.next { transform: scaleX(-1); }

/* ================= Footer v2 (.ft): flat deep black, one hairline, centred brand ================= */
.ft { position: relative; background: #0b0a09; color: #ece8df; padding: 56px var(--margin) 28px; }
.ft::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 198, 160, .55), transparent); }
.ft a { text-decoration: none; transition: color .2s var(--ease); }
.ft-brand { display: grid; justify-items: center; gap: 14px; text-align: center; margin-block-end: 36px; }
.ft .foot-logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.ft .foot-logo .brand-mark { height: 40px; width: auto; }
.ft .foot-logo .brand-type { height: 11px; width: auto; }
.ft-tagline { margin: 0; font: italic 500 1.2rem/1.3 var(--font-display); color: var(--champagne); opacity: .9; }
.ft-social { display: flex; gap: 12px; margin-block-start: 4px; }
.ft-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); color: #ece8df; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.ft-social a:hover { border-color: var(--champagne); color: var(--champagne); }

.ft-cols { max-width: var(--max); margin-inline: auto; }
.ft-col { border-block-end: 1px solid rgba(255, 255, 255, .09); }
.ft-col:first-of-type { border-block-start: 1px solid rgba(255, 255, 255, .09); }
.ft-col > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 54px; font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); }
html[lang^="ar"] .ft-col > summary { letter-spacing: 0; text-transform: none; font-size: 1rem; font-weight: 600; }
.ft-col > summary::-webkit-details-marker { display: none; }
.ft-col > summary::after { content: "+"; font-size: 1.3rem; font-weight: 300; line-height: 1; color: rgba(236, 232, 223, .6); }
.ft-col[open] > summary::after { content: "\2212"; }
.ft-col ul { list-style: none; margin: 0; padding: 0 0 14px; display: grid; }
.ft-col li a { display: block; padding: 9px 0; font-size: .9375rem; color: rgba(236, 232, 223, .72); }
.ft-col li a:hover { color: var(--champagne); }

.ft-pay { margin-block-start: 28px; text-align: center; }
.ft-pay-h { margin: 0 0 12px; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(236, 232, 223, .55); }
html[lang^="ar"] .ft-pay-h { letter-spacing: 0; text-transform: none; font-size: .875rem; }
.ft-chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ft-chips li { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: .8125rem; color: #ece8df; }
.ft-ship { margin: 0; font-size: .8125rem; color: rgba(236, 232, 223, .6); }

.ft-bottom { max-width: var(--max); margin: 32px auto 0; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, .09); display: grid; justify-items: center; gap: 10px; text-align: center; }
.ft-legal { margin: 0; font-size: .8125rem; color: rgba(236, 232, 223, .75); }
.ft-disclaimer { margin: 0; max-width: 52ch; font-size: .72rem; line-height: 1.6; color: rgba(236, 232, 223, .45); }
.ft-top { margin-block-start: 6px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); color: #ece8df; transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.ft-top:hover { border-color: var(--champagne); color: var(--champagne); transform: translateY(-3px); }

@media (min-width: 821px) {
	.ft { padding: 72px var(--margin) 32px; }
	.ft-brand { justify-items: start; text-align: start; margin: 0; }
	.ft { display: grid; grid-template-columns: minmax(240px, 1.2fr) 2.4fr; grid-template-areas: "brand cols" "bottom bottom"; gap: 48px 80px; align-items: start; }
	.ft-brand { grid-area: brand; }
	.ft-cols { grid-area: cols; margin: 0; max-width: none; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 40px; }
	.ft-bottom { grid-area: bottom; max-width: none; margin: 0; display: flex; justify-content: space-between; align-items: center; text-align: start; gap: 24px; width: 100%; }
	.ft-bottom .ft-disclaimer { margin-inline: auto; max-width: 70ch; }
	.ft-top { margin: 0; }
	.ft-col { border: 0 !important; }
	.ft-col > summary { cursor: default; pointer-events: none; min-height: 0; padding-block-end: 14px; }
	.ft-col > summary::after { content: none; }
	.ft-pay { margin: 0; text-align: start; }
	.ft-pay-h { margin-block-end: 14px; font-size: .8125rem; letter-spacing: .16em; color: var(--champagne); font-weight: 500; }
	.ft-chips { justify-content: flex-start; }
}

/* Mobile menu v2: grouped serif links, full-width panel under the header */
@media (max-width: 820px) {
	.bar-menu .bar-panel { position: fixed; inset-inline: 0; top: var(--bar-h, 108px); bottom: 0; z-index: 90; min-width: 0; padding: 8px var(--margin) 28px; background: var(--white); border-block-start: 1px solid var(--line); box-shadow: none; overflow-y: auto; display: flex; flex-direction: column; animation: menu-in .3s var(--ease) both; }
	.bar-menu .bar-panel a { min-height: 54px; padding: 0; display: flex; align-items: center; font: 500 1.5rem/1.2 var(--font-display); border-block-end: 1px solid var(--line); color: var(--ink); }
	html[lang^="ar"] .bar-menu .bar-panel a { font-size: 1.35rem; }
	.bar-menu .bar-panel a:last-child { border-block-end: 0; }
	.bar-menu .bp-h { margin: 22px 0 4px; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
	html[lang^="ar"] .bar-menu .bp-h { letter-spacing: 0; text-transform: none; font-size: .9rem; }
	.bar-menu .bp-foot { margin-top: auto; padding-top: 24px; }
	.bar-menu .bp-foot a { justify-content: center; min-height: 52px; border: 1px solid var(--ink); border-radius: var(--r); font: 600 1rem/1 var(--font-text); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) { .bar-menu .bp-foot { position: static; inset: auto; min-width: 0; padding: 24px 0 0; margin-top: auto; background: none; border: 0; box-shadow: none; } }
@media (max-width: 820px) {
	.bar-menu .bp-foot a, .bar-menu .bp-foot a:last-child { border: 1px solid var(--ink); }
	body:has(.bar-menu[open]) .wa-float { opacity: 0; pointer-events: none; }
}


/* tagline stays English in both languages */
.ft-tagline[lang="en"], .sm-thanks-tagline[lang="en"] { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; letter-spacing: .01em; }

/* gift trios */
.trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trio { background: var(--paper, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.trio-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-block-end: 8px; }
.trio-art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.trio-name { font: 600 1.4rem/1.2 var(--font-display); }
.trio-brands { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.trio-price { font-weight: 600; margin: 4px 0 10px; }
.trio .btn { margin-top: auto; }
@media (max-width: 760px) { .trio-grid { grid-template-columns: 1fr; } }

/* shop by occasion */
.occ-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.occ { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 130px; padding: 16px; border-radius: 14px; color: #f3ead8; overflow: hidden; background: var(--occ-bg, #1d1a16); border: 1px solid rgba(196,171,124,.28); transition: transform .25s, border-color .25s; }
.occ::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 0%, rgba(196,171,124,.22), transparent 60%); pointer-events: none; }
.occ:hover { border-color: var(--gold); transform: translateY(-2px); }
.occ-name { position: relative; font: 600 1.15rem/1.2 var(--font-display); }
.occ-sub { position: relative; font-size: .9rem; opacity: .8; max-width: 26ch; }
.occ-go { position: absolute; inset-block-start: 14px; inset-inline-end: 16px; color: var(--gold); }
[dir="rtl"] .occ-go { transform: scaleX(-1); }
.occ-big { grid-column: 1 / -1; min-height: 210px; --occ-bg: linear-gradient(160deg, #5a2a12, #20100a); }
.occ-big .occ-name { font-size: 1.7rem; }
.occ-date { --occ-bg: linear-gradient(160deg, #5c1620, #1e0c10); }
.occ-day { --occ-bg: linear-gradient(160deg, #6b5a3c, #241f16); }
.occ-office { --occ-bg: linear-gradient(160deg, #3b3d40, #17181a); }
.occ-summer { --occ-bg: linear-gradient(160deg, #3e5a46, #14201a); }
.occ-long { --occ-bg: linear-gradient(160deg, #4a3a22, #1a140c); }
.occ-iconic { --occ-bg: linear-gradient(160deg, #143a30, #0b1a15); }
.occ-all { --occ-bg: transparent; border-style: dashed; color: var(--ink); }
@media (min-width: 900px) {
	.occ-grid { grid-template-columns: 1.6fr repeat(4, 1fr); grid-template-rows: repeat(2, 190px); }
	.occ-big { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
	.occ-name { font-size: 1.2rem; }
	.occ-big .occ-name { font-size: 2rem; }
}
.occ, .occ:hover { text-decoration: none; } .occ-all .occ-name { color: var(--ink); }

/* occasions v2: wide banner on top, three cards per row below (mirrors "Who is it for?") */
.occ-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; gap: 12px; }
.occ-big { grid-column: 1 / -1; grid-row: auto; min-height: 150px; }
.occ { min-height: 120px; padding: 14px; }
.occ-name { font-size: 1.05rem; }
.occ-big .occ-name { font-size: 1.7rem; }
@media (min-width: 900px) { .occ-grid { gap: 16px; grid-template-rows: none; } .occ-big { min-height: 220px; } .occ { min-height: 170px; } .occ-name { font-size: 1.3rem; } .occ-big .occ-name { font-size: 2.2rem; } }

/* gift trios v2: unified stage, compact body, swipeable on mobile */
.trio { padding: 0; gap: 0; overflow: hidden; background: #fbf8f2; border-color: rgba(196,171,124,.35); }
.trio-art { gap: 0; margin: 0; padding: 14px 10px 0; background: radial-gradient(90% 80% at 50% 100%, #efe4d1, #f7f1e7); }
.trio-art img { mix-blend-mode: multiply; margin-inline: -6%; width: 112%; max-width: none; }
.trio-art img:nth-child(2) { transform: scale(1.1); position: relative; z-index: 1; }
.trio-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.trio-tag { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.trio-brands { font-size: .85rem; line-height: 1.4; }
.trio-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.trio-price { margin: 0; font: 600 1.25rem/1 var(--font-display); }
.trio-buy .btn { padding: 10px 18px; width: auto; }
@media (max-width: 760px) {
	.trio-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding-inline: 16px; padding-block-end: 6px; scrollbar-width: none; }
	.trio-grid::-webkit-scrollbar { display: none; }
	.trio { flex: 0 0 82%; scroll-snap-align: center; }
}
.trio-art img { -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.trio-art img:nth-child(2) { transform: none; }
.trio-art img { -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 78%, transparent 100%); width: 118%; margin-inline: -9%; }

/* winter banner photo */
.occ-big.occ-winter { background: linear-gradient(to top, rgba(0,0,0,.4), transparent 55%), url("../img/occ/winter.webp") 78% 60% / cover no-repeat, #20100a; border-color: rgba(196,171,124,.4); }
.occ-winter::before { display: none; }
[dir="rtl"] .occ-big.occ-winter { align-items: flex-end; text-align: left; }
[dir="rtl"] .occ-big .occ-sub { text-align: left; direction: rtl; }
@media (min-width: 900px) { .occ-big { min-height: 300px; } .occ-big.occ-winter { background-position: 78% 55%; } }
.occ-big .occ-sub { max-width: 20ch; }
.occ-big.occ-winter { background-position: 78% 0%; }
@media (min-width: 900px) { .occ-big { min-height: 400px; } .occ-big.occ-winter { background-position: 78% 12%; } }
.occ-big.occ-winter { background-position: 78% 14%; }
@media (min-width: 900px) { .occ-big.occ-winter { background-position: 78% 12%; } }

/* occasion photo cards */
.occ-date { background: linear-gradient(to top, rgba(0,0,0,.65), transparent 55%), url("../img/occ/date.webp") 50% 40% / cover no-repeat, #1e0c10; }
.occ-date::before { display: none; }
.occ-day { background: linear-gradient(to top, rgba(20,14,6,.82), rgba(20,14,6,.25) 48%, transparent 70%), url("../img/occ/day.webp") 50% 40% / cover no-repeat, #6b5a3c; }
.occ-day::before { display: none; }
@media (max-width: 899px) { .occ:not(.occ-big) { padding-inline: 10px; } .occ:not(.occ-big) .occ-name { font-size: .9rem; white-space: nowrap; } }
.occ:not(.occ-big) { align-items: center; text-align: center; }
.occ-office { background: linear-gradient(to top, rgba(10,12,16,.8), rgba(10,12,16,.2) 48%, transparent 70%), url("../img/occ/office.webp") 50% 40% / cover no-repeat, #3b3d40; }
.occ-office::before { display: none; }
.trio-buy .btn { padding: 12px 20px; white-space: nowrap; }
.trio-dots { display: none; justify-content: center; gap: 8px; margin-top: 14px; }
.trio-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(20,19,17,.22); transition: width .25s var(--ease), background .25s var(--ease); }
.trio-dots button.on { width: 22px; border-radius: 4px; background: var(--gold-deep); }
@media (max-width: 760px) { .trio-dots { display: flex; } .trio-grid { cursor: grab; } }
.occ-long { background: linear-gradient(to top, rgba(14,9,4,.82), rgba(14,9,4,.2) 48%, transparent 70%), url("../img/occ/long.webp") 50% 40% / cover no-repeat, #4a3a22; }
.occ-long::before { display: none; }
.occ-summer { background: linear-gradient(to top, rgba(8,20,14,.82), rgba(8,20,14,.2) 48%, transparent 70%), url("../img/occ/summer.webp") 50% 40% / cover no-repeat, #3e5a46; }
.occ-summer::before { display: none; }
.occ-iconic { background: linear-gradient(to top, rgba(4,14,10,.82), rgba(4,14,10,.2) 48%, transparent 70%), url("../img/occ/iconic.webp") 50% 40% / cover no-repeat, #143a30; }
.occ-iconic::before { display: none; }
.occ:not(.occ-big) .occ-go { display: none; }

/* Footer tagline: wipes in like the wordmark, a beat after the logo starts */
.foot-logo.logo-wait ~ .ft-tagline { opacity: 0; clip-path: inset(0 100% 0 0); }
.foot-logo.logo-go ~ .ft-tagline { animation: tag-in 1.3s cubic-bezier(.65, 0, .35, 1) .9s both; }
@keyframes tag-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } 25% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* trios v3: three separate rounded tiles instead of one seamed strip */
.trio-art { gap: 6px; padding: 12px 12px 0; background: transparent; }
.trio-art img { width: 100%; margin: 0; max-width: 100%; border-radius: 10px; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }

/* trios scroll polish: one card per swipe, aligned to the page gutter, no page bounce sideways */
@media (max-width: 760px) {
	.trio-grid { scroll-padding-inline: 16px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
	.trio { scroll-snap-align: start; scroll-snap-stop: always; }
}
.trio-price { font-family: var(--font-text); font-weight: 600; font-size: 1.1rem; letter-spacing: 0; font-variant-numeric: lining-nums; }

/* trios: two round arrow buttons instead of dots */
.trio-dots { display: none !important; }
.trio-nav { display: none; justify-content: center; gap: 12px; margin-top: 14px; }
.trio-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(20,19,17,.55); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: opacity .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.trio-nav button:hover:not(:disabled) { background: var(--ground); color: var(--on-dark); box-shadow: none; }
.trio-nav button:disabled { opacity: .3; cursor: default; }
[dir="rtl"] .trio-nav button span { display: inline-block; transform: scaleX(-1); }
@media (max-width: 760px) { .trio-nav { display: flex; } }

/* trios: arrows sit on the card row, vertically centred */
.trio-wrap { position: relative; }
.trio-nav { position: absolute; inset: 0; margin: 0; justify-content: space-between; align-items: center; padding-inline: 4px; pointer-events: none; }
.trio-nav button { pointer-events: auto; width: 38px; height: 38px; background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.trio-nav button:hover:not(:disabled) { background: var(--ground); color: var(--on-dark); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.trio-nav button:disabled { opacity: 0; pointer-events: none; }
.trio-nav { align-items: flex-start; padding-top: 33px; }
.trio-nav { padding-top: 50px; }
.trio-nav { align-items: center; padding-top: 0; padding-inline: 2px; }

/* size rows: dotted leader between the size and its price */
@media (max-width: 820px) {
	.size-ml { display: flex; align-items: baseline; gap: 12px; }
	.size-ml::after { content: ""; flex: 1; min-width: 24px; border-block-end: 2px dotted rgba(138, 111, 66, .55); transform: translateY(-.3em); }
}

/* guides */
.guide, .guide-index { max-width: 820px; margin-inline: auto; padding: clamp(28px, 4vw, 64px) var(--margin) var(--gap); display: flex; flex-direction: column; gap: 18px; }
.guide-index { max-width: 1100px; }
.guide h1, .guide-index h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); line-height: 1.15; }
.guide h2 { font-size: 1.5rem; margin-top: 12px; }
.guide p, .guide li { max-width: 66ch; line-height: 1.7; }
.guide ul { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.guide-back { align-self: flex-start; font-weight: 600; text-decoration: none; color: var(--ink-soft); }
.guide-meta { margin: 0; color: var(--gold-deep); font-size: .85rem; letter-spacing: .06em; }
.guide-hero { width: 100%; height: auto; border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; }
.guide-note { color: var(--ink-soft); font-size: .92rem; border-inline-start: 3px solid var(--gold); padding-inline-start: 12px; }
.guide-pick { list-style: none; padding: 0 !important; }
.guide-pick li { padding: 12px 0; border-block-end: 1px solid var(--line); }
.guide-pick a { font-weight: 700; }
.guide-links { display: flex; flex-wrap: wrap; gap: 10px; }
.guide .btn { align-self: flex-start; }
.gtable-wrap { overflow-x: auto; }
.gtable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gtable th, .gtable td { text-align: start; padding: 12px 10px; border-block-end: 1px solid var(--line); vertical-align: top; }
.gtable thead th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.gtable tbody th a { font-weight: 700; text-decoration: none; }
.gt-brand { display: block; font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
@media (max-width: 700px) {
	.gtable thead { display: none; }
	.gtable, .gtable tbody, .gtable tr, .gtable th, .gtable td { display: block; }
	.gtable tr { padding: 12px 0; border-block-end: 1px solid var(--line); }
	.gtable th, .gtable td { border: 0; padding: 3px 0; }
	.gtable td::before { content: attr(data-label) ": "; color: var(--ink-soft); font-size: .8rem; }
}
.guides-home { display: grid; grid-template-columns: 1fr; gap: 24px; }
.gcard { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.gcard-title { font: 600 1.05rem/1.4 var(--font-text); }
.gcard-excerpt { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.gcard-meta { color: var(--ink-soft); font-size: .8rem; }
.gcard-big img { width: 100%; height: auto; border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; }
.gcard-big .gcard-title { font-family: var(--font-display); font-size: 1.5rem; }
.gcard:hover .gcard-title { color: var(--gold-deep); }
.guides-list { display: flex; flex-direction: column; }
.guides-list .gcard { padding: 14px 0; border-block-end: 1px solid var(--line); }
.guides-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 820px) {
	.guides-home { grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
	.guides-grid { grid-template-columns: repeat(3, 1fr); }
}

/* trio tile for a perfume that has no photo yet */
.trio-ph { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: radial-gradient(80% 80% at 50% 40%, color-mix(in srgb, var(--tint, #b8975a) 35%, #fbf8f2), #efe7da); }
.trio-ph svg, .trio-ph .vial { height: 70%; width: auto; }
/* the no-photo tile must stay one square cell */
.trio-ph { position: relative; overflow: hidden; min-width: 0; }
.trio-ph .vial { height: 80%; width: auto; aspect-ratio: 2 / 3; }
.trio-ph .vial img { height: 100%; width: 100%; object-fit: contain; }
.guides-more { margin-top: 28px; text-align: center; }
.gcard-big img { object-position: 50% 0%; }
/* home guides: six titles beside the picture on desktop, three on phones; the button sits under the list */
.guides-list .guides-more { margin: 22px 0 0; text-align: center; }
@media (max-width: 819px) { .guides-list .gcard:nth-child(n+3) { display: none; } }
@media (min-width: 820px) { .guides-list .guides-more { text-align: start; } }

/* trios on desktop: one swipeable row (ten sets would be four rows of a grid), arrows always available */
@media (min-width: 761px) {
	.trio-grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: 4px; }
	.trio-grid::-webkit-scrollbar { display: none; }
	.trio { flex: 0 0 clamp(270px, 23.5%, 330px); scroll-snap-align: start; }
	.trio-nav { display: flex; padding-inline: 0; }
	.trio-nav button { width: 46px; height: 46px; }
	.trio-prev { margin-inline-start: -23px; }
	.trio-next { margin-inline-end: -23px; }
	.trio-art { gap: 8px; padding: 14px 14px 0; }
	.trio-body { padding: 16px 18px 18px; }
}

/* desktop: larger product thumbnails, easier to hit and to read */
@media (min-width: 900px) {
	.pdp-thumbs { top: 16px; inset-inline-start: 16px; gap: 10px; }
	.pdp-thumb { width: 68px; height: 68px; border-radius: 10px; }
}

/* shop by notes */
.notes-tabs { display: flex; gap: clamp(14px, 2.2vw, 30px); overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 18px; scrollbar-width: none; }
.notes-tabs::-webkit-scrollbar { display: none; }
.note-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; color: var(--ink-soft); font: 600 .95rem/1.2 var(--font-text); }
.note-disc { width: clamp(76px, 8.4vw, 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(80% 80% at 50% 40%, #fbf8f2, #e9e0d0); box-shadow: 0 0 0 2px transparent; transition: box-shadow .25s var(--ease), transform .25s var(--ease); display: grid; place-items: center; }
.note-disc img { width: 100%; height: 100%; object-fit: cover; }
.note-tab:hover .note-disc { transform: translateY(-2px); }
.note-tab.is-on { color: var(--ink); }
.note-tab.is-on .note-disc { box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(196, 171, 124, .25); }
.note-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; border-radius: 12px; }
.notes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.notes-grid .card { min-width: 0; }
.notes-more { margin: 18px 0 0; }
@media (min-width: 820px) { .notes-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } .notes-tabs { justify-content: space-between; overflow-x: auto; padding: 8px 8px 16px; } }

/* guides page */
.guide-index { max-width: 1180px; gap: 28px; }
.gi-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.gi-eyebrow { margin: 0; color: var(--gold-deep); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.gi-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.gi-chip { border: 1.5px solid rgba(20, 19, 17, .25); background: transparent; color: var(--ink); padding: 9px 16px; border-radius: 999px; font: 600 .9rem/1 var(--font-text); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.gi-chip span { opacity: .55; margin-inline-start: 4px; font-weight: 500; }
.gi-chip:hover { border-color: var(--ink); }
.gi-chip.is-on { background: var(--ground); color: var(--on-dark); border-color: var(--ground); }
.gi-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.gc { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fbf8f2; border: 1px solid rgba(196, 171, 124, .35); border-radius: 16px; overflow: hidden; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.gc:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 10px 30px rgba(20, 19, 17, .08); }
.gc[hidden] { display: none; }
.gc-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0%; }
.gc-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.gc-chip { align-self: flex-start; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; border-block-end: 1px solid var(--gold); padding-block-end: 3px; }
.gc-title { font: 600 1.2rem/1.35 var(--font-display); }
.gc-excerpt { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.gc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; color: var(--ink-soft); font-size: .8rem; }
.gc-go { color: var(--gold-deep); font-size: 1.1rem; transition: transform .25s var(--ease); }
[dir="rtl"] .gc-go { transform: scaleX(-1); }
.gc:hover .gc-go { transform: translateX(4px); }
[dir="rtl"] .gc:hover .gc-go { transform: scaleX(-1) translateX(4px); }
@media (min-width: 700px) { .gi-grid { grid-template-columns: repeat(2, 1fr); } .gc-big { grid-column: 1 / -1; flex-direction: row; } .gc-big .gc-img { width: 52%; aspect-ratio: auto; height: 100%; min-height: 320px; } .gc-big .gc-body { padding: 32px; justify-content: center; } .gc-big .gc-title { font-size: 1.9rem; } .gc-big .gc-excerpt { font-size: 1rem; } }
@media (min-width: 1000px) { .gi-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* notes row arrows */
.notes-wrap { position: relative; }
.notes-arrow { display: none; position: absolute; top: 24px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); box-shadow: 0 2px 10px rgba(0,0,0,.2); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; z-index: 3; transition: opacity .2s var(--ease); }
.notes-arrow:disabled { opacity: 0; pointer-events: none; }
.notes-prev { inset-inline-start: 0; }
.notes-next { inset-inline-end: 0; }
[dir="rtl"] .notes-arrow span { display: inline-block; transform: scaleX(-1); }
.notes-wrap.has-overflow .notes-arrow { display: grid; place-items: center; }
@media (min-width: 820px) { .notes-arrow { top: 40px; } }

/* authenticity page */
.auth { max-width: 860px; }
.auth-short { background: #fbf8f2; border: 1px solid rgba(196, 171, 124, .4); border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.auth-short h2 { font-size: 1.25rem; margin: 0; }
.auth-short p { margin: 0; line-height: 1.7; }
.auth-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.auth-steps li { counter-increment: s; display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; row-gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.auth-steps li::before { content: counter(s); grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--ground); color: var(--on-dark); display: grid; place-items: center; font-weight: 600; }
.auth-steps b { font-weight: 700; }
.auth-steps span { color: var(--ink-soft); line-height: 1.6; }
.auth-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.auth-facts div { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.auth-facts b { font: 600 1.25rem/1.2 var(--font-text); }
.auth-facts span { color: var(--ink-soft); font-size: .85rem; }
@media (min-width: 720px) { .auth-facts { grid-template-columns: repeat(4, 1fr); } }

/* price per ml calculator */
.calc { max-width: 1040px; margin-inline: auto; padding: clamp(28px, 4vw, 64px) var(--margin) var(--gap); display: flex; flex-direction: column; gap: 24px; }
.calc h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); line-height: 1.15; }
.calc h2 { font-size: 1.4rem; margin: 0; }
.calc-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 860px) { .calc-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.calc-form, .calc-result, .calc-compare { background: #fbf8f2; border: 1px solid rgba(196, 171, 124, .4); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.calc-field { display: flex; flex-direction: column; gap: 8px; }
.calc-field > span { font-weight: 600; font-size: .9rem; }
.calc-field small { color: var(--ink-soft); }
.calc input[type="number"], .calc select { width: 100%; padding: 13px 14px; border: 1.5px solid rgba(20, 19, 17, .2); border-radius: 10px; background: #fff; font: 500 1rem var(--font-text); color: var(--ink); }
.calc input:focus, .calc select:focus { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.calc-row { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-chips button { border: 1.5px solid rgba(20, 19, 17, .25); background: transparent; color: var(--ink); padding: 8px 14px; border-radius: 999px; font: 600 .85rem/1 var(--font-text); cursor: pointer; }
.calc-chips button i { font-style: normal; opacity: .55; margin-inline-start: 4px; }
.calc-chips button.is-on { background: var(--ground); color: var(--on-dark); border-color: var(--ground); }
.calc-k { margin: 0; color: var(--gold-deep); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.calc-big { margin: 0; font: 600 clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem)/1.1 var(--font-display); }
.calc-big small { font: 500 1rem var(--font-text); color: var(--ink-soft); }
.calc-sub { margin: 0; color: var(--ink-soft); }
.calc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
.calc-stats div { border-block-start: 1px solid var(--line); padding-top: 10px; }
.calc-stats dt { font: 600 1.15rem/1.2 var(--font-text); }
.calc-stats dd { margin: 2px 0 0; color: var(--ink-soft); font-size: .82rem; }
.calc-actions { display: flex; align-items: center; gap: 12px; }
.calc-copied { color: var(--gold-deep); font-weight: 600; }
.cmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cmp-card { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.cmp-card b { font-size: 1.05rem; } .cmp-card span { font-weight: 600; } .cmp-card small { color: var(--ink-soft); }
.cmp-note { margin: 4px 0 0; line-height: 1.6; }
.calc-method ul { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.calc-method p, .calc-faq p { max-width: 70ch; line-height: 1.7; }
.calc-faq details { border-block-end: 1px solid var(--line); padding-block: 12px; }
.calc-faq summary { font-weight: 600; cursor: pointer; }
.calc-foot { color: var(--ink-soft); font-size: .88rem; }

/* welcome offer: scratch card (a bottom sheet on phones, a centred card from 560px up) */
body.wo-open { overflow: hidden; }
.wo { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: end center; background: rgba(8, 7, 6, .66); padding: 0; overscroll-behavior: contain; }
.wo[hidden] { display: none; }
.wo-card { position: relative; box-sizing: border-box; width: 100%; max-width: 440px; max-height: calc(100dvh - 12px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: #0e0d0b; color: #efece6; border: 1px solid rgba(196, 171, 124, .4); border-block-end: 0; border-radius: 16px 16px 0 0; padding: 30px 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; text-align: center; box-shadow: 0 -18px 48px rgba(0, 0, 0, .5); scrollbar-width: thin; scrollbar-color: rgba(196, 171, 124, .5) transparent; animation: wo-rise .42s cubic-bezier(.16, 1, .3, 1) both; }
.wo-card::selection, .wo-card *::selection { background: rgba(196, 171, 124, .4); color: #fff; }
@keyframes wo-rise { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 560px) { .wo { place-items: center; padding: 24px; } .wo-card { border-block-end: 1px solid rgba(196, 171, 124, .4); border-radius: 16px; padding-block: 34px 24px; max-height: calc(100dvh - 48px); box-shadow: 0 24px 64px rgba(0, 0, 0, .55); } }
.wo-close { position: absolute; top: 6px; inset-inline-end: 6px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #cfc8ba; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.wo-close svg { width: 20px; height: 20px; }
.wo-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.wo h2 { font: 600 1.65rem/1.2 var(--font-display); color: #fff; margin: 0; text-wrap: balance; padding-inline: 28px; }
html[lang^="ar"] .wo h2 { line-height: 1.4; }
.wo-scratch { position: relative; height: 124px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(196, 171, 124, .55); background: #1b1813; user-select: none; -webkit-user-select: none; }
.wo-prize { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding-inline: 12px; }
.wo-code { font: 700 1.9rem/1 var(--font-text); letter-spacing: .16em; color: var(--gold); }
.wo-note { font-size: .82rem; line-height: 1.4; color: #d8d1c3; }
#wo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity .5s var(--ease); }
#wo-canvas.is-gone { opacity: 0; pointer-events: none; }
.wo-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #4a3b1f; font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; pointer-events: none; overflow: hidden; }
.wo-hint::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: wo-sheen 2.6s .5s ease-in-out infinite; }
@keyframes wo-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
.wo-hint[hidden] { display: none; }
.wo-reveal { align-self: center; min-height: 44px; padding-inline: 12px; background: none; border: 0; color: #cfc8ba; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: 500 .9rem var(--font-text); }
.wo-reveal:hover { color: #fff; }
.wo-reveal[hidden] { display: none; }
.wo-perks { list-style: none; margin: 0; padding: 14px 0 0; border-block-start: 1px solid rgba(196, 171, 124, .22); display: flex; flex-direction: column; gap: 10px; text-align: start; }
.wo-perks li { position: relative; padding-inline-start: 28px; line-height: 1.5; font-size: .93rem; color: #e6e1d6; }
.wo-perks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .2em; width: 18px; height: 18px; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.wo-actions { display: flex; flex-direction: column; gap: 10px; }
.wo-actions .btn { width: 100%; min-height: 48px; padding-block: 13px; box-sizing: border-box; }
.wo-actions .btn[hidden] { display: none; }
.wo-actions .btn-dark { background: transparent; color: #efece6; box-shadow: inset 0 0 0 1px rgba(196, 171, 124, .6); }
.wo-actions .btn-dark:hover { background: rgba(196, 171, 124, .14); }
.wo-actions .btn-gold:hover { background: #d3b579; }
.wo-close:focus-visible, .wo-reveal:focus-visible, .wo-actions .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wo-fine { margin: 0; color: #b0a999; font-size: .8rem; line-height: 1.5; }
.wo-copied { margin: 0; color: var(--gold); font-weight: 600; }
.wo-copied[hidden] { display: none; }
@media (min-width: 560px) { .wo-actions { flex-direction: row-reverse; } }
@media (prefers-reduced-motion: reduce) { .wo-card, .wo-hint::after { animation: none; } }

/* motion: calculator and authenticity page (the entrance itself comes from the shared .reveal system) */
@keyframes cu-tick { 0% { color: var(--gold-deep); transform: translateY(-2px); } 100% { color: inherit; transform: none; } }
.calc .tick { animation: cu-tick .6s var(--ease) both; display: inline-block; }
.calc-big .tick { display: inline-block; }
.calc-barwrap { display: flex; flex-direction: column; gap: 6px; }
.calc-barwrap span { color: var(--ink-soft); font-size: .78rem; }
.calc-bar { height: 8px; border-radius: 999px; background: rgba(20, 19, 17, .1); overflow: hidden; }
.calc-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .8s cubic-bezier(.22, 1, .36, 1); }
.calc-chips button { transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.calc-chips button:active { transform: scale(.94); }
.calc input[type="number"], .calc select { transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.calc input:focus, .calc select:focus { box-shadow: 0 0 0 4px rgba(196, 171, 124, .25); }
@keyframes cu-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.cmp-card { animation: cu-pop .5s var(--ease) both; }
.cmp-card:nth-child(2) { animation-delay: .08s; }
.cmp-card:nth-child(3) { animation-delay: .16s; }
.cmp-note { animation: cu-pop .5s .3s var(--ease) both; }
.calc-copied { animation: cu-pop .35s var(--ease) both; }
.calc-stats div { transition: border-color .3s var(--ease); }
.calc-stats div:hover { border-color: var(--gold); }
.auth-short { border-inline-start-width: 4px; border-inline-start-color: var(--gold); }
@keyframes au-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.auth-steps li.in::before { animation: au-pop .5s .25s cubic-bezier(.34, 1.56, .64, 1) both; }
.auth-facts div { transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.auth-facts div:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 8px 24px rgba(20, 19, 17, .07); }
@media (prefers-reduced-motion: reduce) { .calc .tick, .cmp-card, .cmp-note, .calc-copied, .auth-steps li.in::before { animation: none; } .calc-bar i { transition: none; } }

/* browser extension page */
.ext { max-width: 1040px; margin-inline: auto; padding: clamp(28px, 4vw, 64px) var(--margin) var(--gap); display: flex; flex-direction: column; gap: 28px; }
.ext h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1.12; }
.ext h2 { font-size: 1.4rem; margin: 0 0 12px; }
.ext-hero { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 860px) { .ext-hero { grid-template-columns: 1.1fr 1fr; gap: 48px; } }
.ext-text { display: flex; flex-direction: column; gap: 14px; }
.ext-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn.is-soon { opacity: .55; cursor: default; pointer-events: none; }
.btn-line-dark { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.ext-wait { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.ext-demo { position: relative; min-height: 340px; border-radius: 18px; background: linear-gradient(160deg, #efe9dd, #e3dac8); padding: 22px; overflow: hidden; }
.ext-fakepage { display: grid; gap: 12px; opacity: .6; }
.ext-fakepage i { display: block; height: 14px; border-radius: 7px; background: rgba(20, 19, 17, .14); }
.ext-fakepage i:nth-child(1) { width: 70%; height: 22px; } .ext-fakepage i:nth-child(2) { width: 90%; } .ext-fakepage i:nth-child(3) { width: 55%; }
.ext-card { position: absolute; inset-inline-end: 18px; bottom: 18px; width: min(310px, calc(100% - 36px)); background: #0e0d0b; color: #efece6; border: 1px solid rgba(196, 171, 124, .5); border-radius: 16px; padding: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); font-size: .88rem; }
.ext-eyebrow { margin: 0 0 10px; color: #c4ab7c; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.ext-top { display: flex; gap: 12px; align-items: center; }
.ext-top img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; background: #f4f1ec; }
.ext-top div { display: flex; flex-direction: column; }
.ext-top b { font-size: .95rem; } .ext-top span { color: #b9b2a3; font-size: .78rem; } .ext-top em { font-style: normal; color: #c4ab7c; font-size: .78rem; }
.ext-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.ext-sizes span { display: flex; flex-direction: column; gap: 2px; text-align: center; border: 1px solid rgba(196, 171, 124, .4); border-radius: 10px; padding: 8px 4px; }
.ext-sizes i { font-style: normal; color: #b9b2a3; font-size: .7rem; } .ext-sizes b { font-size: .78rem; }
.ext-cta { display: block; text-align: center; background: #c4ab7c; color: #0e0d0b; font-weight: 700; border-radius: 10px; padding: 9px; }
.ext-sites { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ext-sites li { border: 1.5px solid rgba(20, 19, 17, .25); border-radius: 999px; padding: 8px 16px; font-weight: 600; }
.policy-updated { color: var(--ink-soft); font-size: .85rem; margin: 6px 0 0; }

/* notes glossary (guide) */
.gl-nav { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 64px; z-index: 5; background: var(--ground-soft, #fff); padding: 10px 0; }
.gl-nav a { border: 1.5px solid rgba(20, 19, 17, .25); border-radius: 999px; padding: 7px 14px; font: 600 .85rem/1 var(--font-text); text-decoration: none; color: var(--ink); }
.gl-nav a:hover { border-color: var(--ink); }
.gl-fam { scroll-margin-top: 130px; }
.gl-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 700px) { .gl-grid { grid-template-columns: repeat(2, 1fr); } }
.gl-note { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fbf8f2; border: 1px solid rgba(196, 171, 124, .35); border-radius: 12px; }
.gl-note b { font: 600 1.05rem/1.2 var(--font-display); }
.gl-note span { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.gl-note a { align-self: flex-start; margin-top: 4px; font-size: .8rem; font-weight: 600; color: var(--gold-deep); text-decoration: none; }

/* guides page: smaller featured picture on desktop, one tidy scrolling row of filters on phones */
@media (min-width: 700px) {
	.gc-big .gc-img { width: 36%; min-height: 240px; max-height: 300px; align-self: center; margin: 24px 0 24px 24px; border-radius: 12px; }
	[dir="rtl"] .gc-big .gc-img { margin: 24px 24px 24px 0; }
	.gc-big .gc-body { padding: 28px 32px; }
	.gc-big .gc-title { font-size: 1.65rem; }
}
@media (max-width: 699px) {
	.gi-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; scroll-snap-type: x proximity; }
	.gi-filters::-webkit-scrollbar { display: none; }
	.gi-chip { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; font-size: .85rem; scroll-snap-align: start; }
}

/* Desktop polish: founder block and occasions grid */
@media (min-width: 1100px) {
	.founder-grid { max-width: 1080px; margin-inline: auto; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 80px; }
	.founder-text { gap: 22px; padding-block: 8px; }
	.founder-text h2 { font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); max-width: 14ch; }
	html[lang^="ar"] .founder-text h2 { line-height: 1.3; }
	.founder-text > p { font-size: 1.2rem; max-width: 40ch; }
	.founder-text > p:not(.founder-eyebrow) { padding-inline-start: 22px; border-inline-start: 2px solid var(--gold); }
	.founder-actions { margin-block-start: 12px; }
	.occ-grid { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 210px); gap: 16px; }
	.occ-big { grid-column: span 2; grid-row: span 2; min-height: 0; }
	.occ { min-height: 0; padding: 18px; }
}

/* Explore: tab bar and index pages (notes, brands, perfumers, years) */
.explore-page { padding-block-end: var(--gap); }
.xp-tabs { display: flex; gap: 6px; padding: 6px; background: var(--gray, #f3f1ed); border-radius: 18px; overflow-x: auto; scrollbar-width: none; margin-block-end: 28px; }
.xp-tabs::-webkit-scrollbar { display: none; }
.xp-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 14px; font-weight: 500; text-decoration: none; color: var(--ink); white-space: nowrap; transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.xp-tab:hover { background: rgba(255,255,255,.6); }
.xp-tab.is-on { background: var(--white); box-shadow: 0 1px 6px rgba(20,19,17,.12); }
.xp-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #8b8fa0; color: #fff; }
.xp-tab.is-on .xp-ico { background: var(--ground); color: var(--gold); }
.xp-h1 { font: 500 clamp(2rem, 5vw, 3.4rem)/1.1 var(--font-display); margin-block-end: 12px; }
html[lang^="ar"] .xp-h1 { line-height: 1.35; }
.xp-search { display: block; max-width: 520px; margin-block-end: 18px; }
.xp-search input { width: 100%; padding: 14px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: inherit; color: var(--ink); }
.xp-search input:focus { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.xp-fams { margin-block-end: 8px; }
.xp-fams small { color: var(--ink-soft); margin-inline-start: 4px; }
.explore-page .bp-h { margin-block: 30px 14px; }
.nt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.nt { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: var(--gray, #f3f1ed); border-radius: 16px; text-decoration: none; color: var(--ink); transition: background .2s var(--ease), transform .2s var(--ease); }
.nt[hidden], .nf[hidden], [data-pop][hidden], .xp-none[hidden] { display: none; }
.nt:hover { background: var(--ground); color: var(--on-dark); transform: translateY(-2px); }
.nt-disc { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #2a2620, var(--ground)); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(196,171,124,.35); }
.nt-disc b { font: 600 1.5rem/1 var(--font-display); }
.nt-disc img { width: 100%; height: 100%; object-fit: cover; }
.nt-txt { display: flex; flex-direction: column; min-width: 0; }
.nt-name { font-weight: 600; }
.nt-n { font-size: var(--step-small); color: var(--ink-soft); }
.nt:hover .nt-n { color: var(--on-dark-soft); }
.yr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.yr { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--gray, #f3f1ed); text-decoration: none; color: var(--ink); transition: background .2s var(--ease), color .2s var(--ease); }
.yr b { font: 600 1.4rem/1.1 var(--font-display); }
.yr span { font-size: var(--step-small); color: var(--ink-soft); }
.yr:hover { background: var(--ground); color: var(--on-dark); }
.yr:hover span { color: var(--on-dark-soft); }
.xp-none { margin-block-start: 24px; color: var(--ink-soft); }
@media (max-width: 520px) { .nt-grid { grid-template-columns: 1fr 1fr; } .nt { padding: 8px; gap: 10px; } .nt-disc { width: 44px; height: 44px; } .nt-name { font-size: .95rem; } }

/* product page: notes as small pictures, the name shows on hover, focus or tap */
dl.pdp-notes .pn-row dd:has(.pn-chip) { display: flex; flex-wrap: wrap; gap: 10px; }
.pn-row dd .pn-chip { text-decoration: none; position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2a2620, var(--ground)); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(196, 171, 124, .4); cursor: pointer; outline: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
dl.pdp-notes .pn-row dd .pn-chip::after { content: none; }
.pn-row dd .pn-chip img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pn-row dd .pn-chip b { font: 600 1.1rem/1 var(--font-display); }
.pn-row dd .pn-chip:hover, .pn-row dd .pn-chip:focus-visible, .pn-row dd .pn-chip:focus { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(196, 171, 124, .4), 0 0 0 2px var(--gold); }
.pn-row dd .pn-tip { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; translate: -50% 0; padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #fff; font: 500 .82rem/1.2 var(--font-text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s var(--ease); z-index: 5; }
html[dir="rtl"] .pn-row dd .pn-tip { translate: 50% 0; }
.pn-row dd .pn-tip::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; margin-inline-start: -5px; border: 5px solid transparent; border-block-start-color: var(--ink); }
.pn-row dd .pn-chip:hover .pn-tip, .pn-row dd .pn-chip:focus .pn-tip { opacity: 1; }
@media (max-width: 520px) { .pn-row dd .pn-chip { width: 42px; height: 42px; } }

/* guides page: sticky filter bar with search, calmer cards, paged list */
.gi-bar { position: sticky; top: 68px; z-index: 20; display: flex; flex-direction: column; gap: 10px; padding: 10px 0; background: var(--white); }
.gi-search input { width: 100%; box-sizing: border-box; padding: 12px 16px; border: 1.5px solid rgba(20, 19, 17, .2); border-radius: 12px; background: #fff; font: 500 1rem/1.2 var(--font-text); color: var(--ink); }
.gi-search input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.gc { border-top: 3px solid var(--gold); }
.gc-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gc-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gi-empty { text-align: center; color: var(--ink-soft); padding: 32px 0; margin: 0; }
.gi-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; }
.gi-more[hidden], .gi-empty[hidden], .gi-more-btn[hidden] { display: none; }
.gi-count { margin: 0; color: var(--ink-soft); font-size: .85rem; }
@media (min-width: 900px) {
	.gi-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
	.gi-search { flex: 0 0 300px; }
}


/* guides page on phones: every filter visible (wrapped), search first, bar not sticky so it does not eat the screen */
@media (max-width: 699px) {
	.gi-bar { position: static; padding: 0; gap: 12px; }
	.gi-search { order: -1; }
	.gi-filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; gap: 8px; scroll-snap-type: none; }
	.gi-chip { padding: 8px 12px; font-size: .82rem; }
}

/* how we fill a decant: the clip beside its text on the home page, centred on other pages */
.fill-card { width: 100%; max-width: 300px; margin-inline: auto; }
.fill-card .founder-media { aspect-ratio: 9 / 14; }
.fill-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
.fill-text { display: flex; flex-direction: column; gap: 14px; }
.fill-text h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); max-width: 18ch; }
.fill-text > p:not(.founder-eyebrow) { color: var(--ink-soft); max-width: 46ch; }
.auth .fill-card { margin-block: 18px 4px; }
.pdp-more details .fill-card { margin: 14px auto 6px; }
@media (min-width: 820px) {
	.fill-grid { max-width: 1080px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; }
	.fill-grid .fill-card { margin-inline: 0; }
}

/* home: the founder clip and the "how we fill" clip side by side, each with a caption */
.founder-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.fv { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.founder-videos .founder-media { aspect-ratio: 9 / 14; }
.fv figcaption { display: flex; flex-direction: column; gap: 2px; }
.fv figcaption b { font: 600 .95rem/1.25 var(--font-text); }
.fv figcaption span { color: var(--ink-soft); font-size: .82rem; line-height: 1.4; }
.founder-videos .founder-play { width: 56px; height: 56px; }
.founder-videos .founder-play svg { width: 20px; height: 20px; }
.founder-videos .founder-sound { width: 38px; height: 38px; inset-inline-end: 8px; bottom: 8px; }
@media (min-width: 700px) {
	.founder-grid:has(.founder-videos) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
	.founder-grid:has(.founder-videos) { max-width: 1120px; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 64px; }
	.founder-videos { gap: 16px; }
}

/* visit us: the shop in Arish */
.visit-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; max-width: 1080px; margin-inline: auto; }
.visit-media { width: 100%; margin-inline: auto; }
.visit-media .founder-media { aspect-ratio: 16 / 9; }
.visit-media .founder-video { object-position: 50% 40%; }
.visit-facts { margin: 0; display: grid; gap: 14px; }
.visit-facts div { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 16px; border-inline-start: 2px solid var(--gold); }
.visit-facts dt { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
html[lang^="ar"] .visit-facts dt { letter-spacing: 0; font-size: .9rem; text-transform: none; }
.visit-facts dd { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.visit-grid:not(.has-video) { max-width: 720px; }
@media (min-width: 820px) {
	.visit-grid.has-video { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; }
	.visit-grid.has-video .visit-media { margin-inline: 0; }
}

/* visit us, desktop: a smaller directions button with the WhatsApp link beside it, both centred on one line */
@media (min-width: 700px) {
	.visit-actions { flex-wrap: nowrap; align-items: center; gap: 22px; }
	.visit-actions .btn { width: auto; flex: 0 0 auto; padding: 11px 22px; font-size: .95rem; }
	.visit-actions .btn-link { align-self: center; flex: 0 0 auto; white-space: nowrap; }
}

/* visit us, all screens: the two actions sit side by side (they only wrap on very narrow phones) */
.visit-actions { flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.visit-actions .btn { width: auto; flex: 0 0 auto; padding: 11px 20px; font-size: .95rem; }
.visit-actions .btn-link { align-self: center; flex: 0 0 auto; white-space: nowrap; font-size: .95rem; }

/* visit us, desktop: the video is as tall as the text beside it, so their top and bottom edges line up */
@media (min-width: 820px) {
	.visit-grid.has-video { align-items: stretch; }
	.visit-grid.has-video .visit-media { display: flex; }
	.visit-grid.has-video .visit-media .founder-media { aspect-ratio: auto; width: 100%; min-height: 320px; }
	.visit-grid.has-video .visit-text { justify-content: center; }
}

/* product page: explore alongside this fragrance */
.xa { display: flex; flex-direction: column; gap: 12px; padding-block: 18px 4px; border-block-start: 1px solid var(--line); margin-block-start: 8px; }
.xa-h { margin: 0; font: 600 1.15rem/1.3 var(--font-display); }
.xa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.xa-row { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); transition: border-color .2s var(--ease), background .2s var(--ease); }
.xa-row.is-on { border-color: var(--gold); background: #fbf8f2; }
.xa-pick { position: relative; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.xa-check { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.xa-box { width: 22px; height: 22px; border: 1.5px solid rgba(20, 19, 17, .4); border-radius: 6px; display: grid; place-items: center; transition: background .15s var(--ease), border-color .15s var(--ease); }
.xa-check:checked + .xa-box { background: var(--ground); border-color: var(--ground); }
.xa-check:checked + .xa-box::after { content: ""; width: 5px; height: 10px; border: solid var(--on-dark); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.xa-check:focus-visible + .xa-box { outline: 2px solid var(--gold); outline-offset: 2px; }
.xa-img { display: block; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--bone); }
.xa-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xa-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xa-name { font-weight: 600; line-height: 1.3; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.xa-brand { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
html[lang^="ar"] .xa-brand { letter-spacing: 0; text-transform: none; font-size: .82rem; }
.xa-size { margin-top: 4px; align-self: flex-start; max-width: 100%; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font: 500 .85rem/1.2 var(--font-text); color: var(--ink); }
.xa-price { font-weight: 600; white-space: nowrap; }
.xa-add { width: 100%; }
.xa-add:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 420px) { .xa-row { grid-template-columns: auto 52px minmax(0, 1fr); } .xa-img { width: 52px; height: 52px; } .xa-price { grid-column: 3; justify-self: start; } }

/* explore alongside, tidier: size pills instead of a select, price on the right, compact rows on every width */
.xa-row { grid-template-columns: 24px 56px minmax(0, 1fr) auto; gap: 10px; padding: 10px; align-items: center; }
.xa-img { width: 56px; height: 56px; }
.xa-pick { width: 24px; height: 24px; }
.xa-box { width: 20px; height: 20px; }
.xa-body { gap: 3px; }
.xa-name { font-size: .98rem; line-height: 1.25; }
.xa-brand { font-size: .68rem; }
.xa-sizes { display: flex; gap: 6px; margin-top: 4px; }
.xa-pill { position: relative; cursor: pointer; }
.xa-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.xa-pill span { display: block; min-width: 44px; padding: 5px 8px; text-align: center; border: 1px solid rgba(20, 19, 17, .22); border-radius: 999px; font: 600 .76rem/1.2 var(--font-text); color: var(--ink-soft); white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.xa-pill input:checked + span { background: var(--ground); border-color: var(--ground); color: var(--on-dark); }
.xa-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.xa-pill:hover span { border-color: var(--ink); }
.xa-price { align-self: center; font: 700 .95rem/1.2 var(--font-text); white-space: nowrap; }
@media (max-width: 420px) {
	.xa-row { grid-template-columns: 24px 48px minmax(0, 1fr) auto; gap: 8px; padding: 9px; }
	.xa-img { width: 48px; height: 48px; }
	.xa-pill span { min-width: 38px; padding: 5px 6px; }
	.xa-price { grid-column: auto; justify-self: auto; font-size: .88rem; }
}

/* home: first six gift trios and a link to all of them; the trios page shows every trio in a normal grid on every width */
.trios-more { margin: 18px 0 0; text-align: center; }
.trios-all { padding-block-start: 0; }
.trios-all .trio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; gap: 20px; }
.trios-all .trio { flex: none; }
@media (max-width: 900px) { .trios-all .trio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trios-all .trio-grid { grid-template-columns: minmax(0, 1fr); } }
.trios-page { max-width: 1180px; }

/* home: customer messages row (only shown when the owner has pasted real ones) */
.rv-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); padding-block-end: 6px; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); scrollbar-width: none; }
.rv-row::-webkit-scrollbar { display: none; }
.rv { margin: 0; flex: 0 0 82%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 18px; background: #fbf8f2; border: 1px solid rgba(196, 171, 124, .35); border-radius: 14px; }
.rv blockquote { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink); }
.rv figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; color: var(--ink-soft); }
.rv figcaption b { color: var(--ink); font-weight: 600; }
@media (min-width: 760px) { .rv-row { overflow: visible; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; } .rv { flex: none; } }

/* home on phones: shorter secondary sections so the page reaches the sizes, gifts and questions sooner */
@media (max-width: 700px) {
	#notes .notes-grid .card:nth-child(n+3) { display: none; }
	#brands .brands .brand-tile:nth-child(n+7):not(.brand-all) { display: none; }
	#sizes .sizes-photo { display: none; }
}
@media (max-width: 700px) {
	/* the featured guide's big picture is the tallest block on the home page; the list below it already links to the guides */
	#guides .gcard-big > img, #guides .gcard-big .gcard-img { display: none; }
}

/* product page, phones: a shorter photo frame so the three sizes are in the first screen, a one-line "what is a decant", a smaller WhatsApp button above the buy bar */
.pdp-what { margin: -4px 0 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.4; }
@media (max-width: 700px) {
	.single-product .searchrow { display: none; }
	.pdp-art.has-photos { aspect-ratio: 4 / 3; background: var(--photo-bg, var(--bone)); }
	.pdp-art.has-photos .pdp-img { object-fit: contain; }
	.single-product .wa-float { width: 44px; height: 44px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 12px; }
	.wa-float svg { width: 22px; height: 22px; }
}
@media (max-width: 700px) {
	/* tighter stack above the sizes: name, price, one line, then the three sizes */
	.single-product .pdp-info { gap: 10px; }
	.single-product .pdp-price { font-size: 1.6rem; min-height: 0; }
	.single-product .sm-sizes { gap: 8px; }
	.single-product .sm-size { padding-block: 12px; }
}
.wa-float.is-early { opacity: 0; transform: translateY(10px); pointer-events: none; }
.pdp-info > .pdp-what { order: 2; }
@media (max-width: 700px) { .pdp-art.has-photos { aspect-ratio: 16 / 11; } }

/* shop: one-tap shortcuts above the grid (a single scrolling row on phones) */
.shop-quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -8px calc(var(--margin) * -1) 18px; padding: 2px var(--margin) 4px; }
.shop-quick::-webkit-scrollbar { display: none; }
.sq { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid rgba(20, 19, 17, .25); border-radius: 999px; font: 600 .88rem/1 var(--font-text); color: var(--ink); text-decoration: none; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.sq:hover { border-color: var(--ink); }
.sq.is-on { background: var(--ground); color: var(--on-dark); border-color: var(--ground); }
.sq:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 821px) { .shop-quick { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; } }

/* home: the "how we fill a decant" clip leads the pair of videos (it is the strongest proof of the original, hand-filled promise) */
.founder-videos .fv:nth-child(2) { order: -1; }

/* Customer messages: tighter lead-in, readable quotes, attribution anchored under a gold rule */
#reviews .block-head { margin-bottom: 16px; }
.rv { flex-basis: 84%; gap: 18px; padding: 20px 20px 16px; }
.rv blockquote { font-size: 1.06rem; line-height: 1.75; text-wrap: pretty; }
.rv figcaption { flex-direction: row; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(196, 171, 124, .45); font-size: .92rem; }
.rv figcaption b { font-weight: 600; }
.rv figcaption span { color: var(--ink-soft); }
.rv-row { padding-block-end: 10px; }
.block-head .rv-note { margin: 0; font-size: .92rem; color: var(--ink-soft); max-width: 60ch; }
@media (min-width: 760px) { .rv-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* Customer messages, second pass: compact cards, initial avatar, name over source */
.rv { flex-basis: min(76%, 300px); padding: 18px 18px 14px; gap: 14px; }
.rv blockquote { font-size: .98rem; line-height: 1.7; }
.rv figcaption { gap: 12px; padding-top: 14px; }
.rv-av { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ground); color: var(--gold); font-style: normal; font-weight: 600; font-size: 1rem; }
.rv-who { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.rv-who b { color: var(--ink); font-weight: 600; font-size: .95rem; }
.rv-who span { font-size: .8rem; color: var(--ink-soft); }
.rv-row { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .rv-row { scroll-behavior: auto; } }

/* Customer messages, third pass: calm cards, quote centred in the card, source line under the name, dots */
.rv-row { align-items: stretch; gap: 12px; }
.rv { flex: 0 0 min(84%, 320px); gap: 0; padding: 20px 20px 16px; background: var(--bone, #f6f1e8); border: 0; border-radius: 16px; }
.rv blockquote { flex: 1; display: grid; align-content: center; padding-block: 4px 18px; font-size: 1.04rem; line-height: 1.75; }
.rv figcaption { padding-top: 14px; border-top: 1px solid rgba(196, 171, 124, .5); }
.rv-av { width: 34px; height: 34px; font-size: .95rem; }
.rv-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.rv-dots[hidden] { display: none; }
.rv-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(20, 19, 17, .2); transition: width .25s var(--ease), background .25s var(--ease); }
.rv-dots i.on { width: 18px; border-radius: 3px; background: var(--gold-deep, #8a6d3b); }
.rv { flex-basis: min(88%, 340px); padding: 18px 18px 14px; }
.rv blockquote { font-size: .97rem; line-height: 1.7; padding-block: 2px 14px; }
.rv-row { scroll-behavior: auto; }

/* Desktop keeps one line too: cards run past the screen edges and the row steps through them on its own */
@media (min-width: 760px) {
	.rv-row { display: flex; grid-template-columns: none; overflow-x: auto; gap: 16px; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50% + var(--margin)); scroll-padding-inline: calc(50vw - 50% + var(--margin)); }
	.rv { flex: 0 0 360px; }
}
.rv-stars { display: flex; gap: 2px; margin-bottom: 10px; color: var(--gold-deep, #8a6d3b); }
.rv-stars svg { fill: currentColor; }
.rv-row { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; }
.rv-row.is-drag { cursor: grabbing; user-select: none; }
.rv-row.is-drag .rv { pointer-events: none; }