/* ROSEEN — brand system from the September 2026 branding proposal.
   Teal PANTONE 315 C, gold PANTONE 871 C, ivory + cream grounds.
   IvyMode (Latin display), ITF Omnia (Arabic display), Shaheen Arabic (text, both scripts). */

/* Shaheen's Arabic letters run ~10% small next to its Latin: the Arabic range alone is scaled up (same file). */
@font-face { font-family: "Shaheen"; src: url(../fonts/shaheen-300.woff2) format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0000-05FF, U+2000-206F, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: "Shaheen"; src: url(../fonts/shaheen-300.woff2) format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 110%; }
@font-face { font-family: "Shaheen"; src: url(../fonts/shaheen-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-05FF, U+2000-206F, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: "Shaheen"; src: url(../fonts/shaheen-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 110%; }
@font-face { font-family: "Shaheen"; src: url(../fonts/shaheen-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-05FF, U+2000-206F, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: "Shaheen"; src: url(../fonts/shaheen-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 110%; }
@font-face { font-family: "IvyMode"; src: url(../fonts/ivymode-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IvyMode"; src: url(../fonts/ivymode-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Omnia"; src: url(../fonts/omnia-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Omnia"; src: url(../fonts/omnia-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
	--teal: #006880;
	--teal-deep: #00576b;
	--gold: #958063;
	--gold-ink: #7d6b52;
	--gold-soft: #c9b89c;
	--ivory: #fbf8f2;
	--cream: #f4f1e7;
	--white: #fff;
	--text: #26393d;
	--mute: #5f686b; /* 5:1 on cream and ivory (WCAG AA for small text) */
	--line: rgba(149, 128, 99, .3);
	--line-strong: rgba(149, 128, 99, .55);
	--err: #9a3a32;
	--display: "IvyMode", "Omnia", serif;
	--body: "Shaheen", system-ui, sans-serif;
	--w: 1360px;
	--gut: clamp(20px, 4vw, 56px);
	--ease: cubic-bezier(.2, .7, .2, 1);
	--top-h: 0px;
}
:lang(ar) { --display: "Omnia", "IvyMode", serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; background: var(--ivory); color: var(--text); font: 300 15.5px/1.75 var(--body); -webkit-font-smoothing: antialiased; }
body:lang(ar) { font-size: 16px; line-height: 1.85; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; }
p { margin: 0; }
::selection { background: var(--teal); color: var(--ivory); }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; }
.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--teal); color: var(--ivory); }
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* --- Shared type ------------------------------------------------------------ */
.eyebrow { display: inline-block; font: 400 11px/1.4 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
:lang(ar) .eyebrow { font-size: 13px; letter-spacing: 0; }
.eyebrow--light { color: var(--gold-soft); }
.sec__title, .arch__title, .product_title, .story__title, .hero__title, .pdesc__title, .page__title { font-family: var(--display); font-weight: 300; color: var(--teal); }
:lang(ar) :is(.sec__title, .arch__title, .product_title, .story__title, .hero__title, .pdesc__title, .page__title) { font-weight: 400; }

/* Buttons & links */
.btn, .woocommerce :is(a.button, button.button, input.button, #respond input#submit), .woocommerce :is(a.button, button.button).alt {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 54px; padding: 0 34px; border: 1px solid var(--teal); border-radius: 0;
	background: var(--teal); color: var(--ivory); font: 400 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase;
	cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
:lang(ar) :is(.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button) { font-size: 15px; letter-spacing: 0; }
.btn:hover, .woocommerce :is(a.button, button.button, input.button):hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--ivory); }
/* Disabled (options not chosen yet): an outline that still reads clearly, not a faded teal block. */
.woocommerce :is(a.button, button.button):is(.disabled, :disabled), .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover { background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line-strong); opacity: 1; cursor: not-allowed; }
.btn--light { background: var(--ivory); border-color: var(--ivory); color: var(--teal); }
.btn--light:hover { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.woocommerce button.button:is([name="update_cart"], [name="apply_coupon"]) { background: transparent; color: var(--teal); }
.woocommerce button.button:is([name="update_cart"], [name="apply_coupon"]):hover { background: var(--teal); color: var(--ivory); }
.link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); transition: border-color .25s; }
:lang(ar) .link { font-size: 15px; letter-spacing: 0; }
.link:hover { border-color: var(--teal); }
.link .i { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.link:hover .i { transform: translateX(4px); }
[dir="rtl"] .link .i { transform: scaleX(-1); }
[dir="rtl"] .link:hover .i { transform: scaleX(-1) translateX(4px); }
.link--light { color: var(--ivory); border-color: rgba(251, 248, 242, .4); }
.link--light:hover { border-color: var(--ivory); }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* The R ribbon pattern as a tonal ground (a mask, so any colour works). */
.pattern { position: relative; isolation: isolate; }
.pattern::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--pat-color, rgba(251, 248, 242, .07));
	-webkit-mask: url(../img/pattern.svg) 0 0 / var(--pat-size, 340.5px 328.5px) repeat; mask: url(../img/pattern.svg) 0 0 / var(--pat-size, 340.5px 328.5px) repeat; }
.pattern--soft { --pat-color: rgba(149, 128, 99, .09); --pat-size: 255px 246px; }

/* --- The rail (replaces the top bar) ------------------------------------------------
   A cream selvedge strip down the inline-start edge: swatch fan, upright wordmark, a tape measure that
   tracks scroll depth, and the tools. On phones it becomes a dock along the bottom. */
:root { --rail: 92px; --dock: 0px; }
body { padding-inline-start: var(--rail); }
.rail { position: fixed; z-index: 70; top: 0; bottom: 0; inset-inline-start: 0; width: var(--rail); display: flex; flex-direction: column; align-items: center; padding: 22px 0 18px; background: var(--cream); color: var(--teal); }
.rail::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 1px; background: var(--line); }
.rail::after { content: ""; position: absolute; top: 12px; bottom: 12px; inset-inline-end: 7px; border-inline-end: 1px dashed rgba(149, 128, 99, .6); pointer-events: none; }
.rail__cap { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); line-height: 1.2; text-align: center; }
:lang(ar) .rail__cap { font-size: 11.5px; letter-spacing: 0; }
.rail__menu { display: grid; justify-items: center; gap: 9px; padding: 6px 4px; border: 0; background: none; color: inherit; cursor: pointer; }
.fan { position: relative; width: 28px; height: 24px; }
.fan i { position: absolute; left: 8px; bottom: 0; width: 12px; height: 20px; transform-origin: 50% 110%; transition: transform .5s var(--ease); }
.fan i:nth-child(1) { background: var(--gold); transform: rotate(-12deg); }
.fan i:nth-child(2) { background: var(--teal); }
.fan i:nth-child(3) { background: var(--ivory); box-shadow: inset 0 0 0 1px var(--gold); transform: rotate(12deg); }
.rail__menu:hover .fan i:nth-child(1), .swatches-open .fan i:nth-child(1) { transform: rotate(-28deg); }
.rail__menu:hover .fan i:nth-child(3), .swatches-open .fan i:nth-child(3) { transform: rotate(28deg); }
/* Upright wordmark: the tops of the letters face the page in both languages. */
.rail__logo { position: relative; display: block; width: 100%; height: 178px; margin-top: 30px; flex: none; }
.rail__logo svg { position: absolute; top: 50%; left: 50%; width: 160px; height: auto; transform: translate(-50%, -50%) rotate(-90deg); }
[dir="ltr"] .rail__logo svg { transform: translate(-50%, -50%) rotate(90deg); }
.rail__tape { position: relative; flex: 1; width: 100%; margin: 26px 0 48px; min-height: 80px; }
.rail__ticks { position: absolute; top: 0; bottom: 0; left: 50%; width: 22px; margin-left: -11px;
	background: linear-gradient(var(--line-strong), var(--line-strong)) 50% 0 / 1px 100% no-repeat,
		repeating-linear-gradient(to bottom, var(--gold) 0 1px, transparent 1px 7px) 50% 0 / 9px 100% no-repeat,
		repeating-linear-gradient(to bottom, var(--gold) 0 1px, transparent 1px 35px) 50% 0 / 22px 100% no-repeat; opacity: .8; }
.rail__marker { position: absolute; left: 14px; right: 14px; top: calc(var(--p, 0) * (100% - 2px)); height: 2px; background: var(--teal); }
.rail__marker b, .rail__marker small { position: absolute; left: 50%; transform: translateX(-50%); padding: 0 4px; background: var(--cream); color: var(--teal); white-space: nowrap; }
.rail__marker b { top: 6px; font: 400 12px/1.2 "Shaheen", sans-serif; }
.rail__marker small { top: 22px; font-size: 9.5px; color: var(--mute); }
.rail__tools { display: grid; justify-items: center; gap: 12px; }
.rail__tool { position: relative; display: grid; justify-items: center; gap: 4px; padding: 4px; color: var(--teal); }
.rail__tool .i { width: 22px; height: 22px; }
.rail__lang { font-size: 11px; letter-spacing: .16em; color: var(--mute); }
.rail__lang:lang(ar) { font-size: 14px; letter-spacing: 0; }
.rail__lang:hover { color: var(--teal); }
.bag__count { position: absolute; top: -2px; inset-inline-end: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: var(--white); font: 400 10px/17px var(--body); text-align: center; }
.bag__count[hidden] { display: none; }
.swatches-open .rail { background: var(--ivory); }

@media (max-width: 900px) {
	:root { --rail: 0px; --dock: 66px; }
	body { padding-bottom: var(--dock); }
	.rail { top: auto; inset-inline: 0; width: auto; height: var(--dock); flex-direction: row; justify-content: space-between; padding: 0 14px; box-shadow: 0 -12px 30px rgba(0, 40, 50, .08); }
	.rail::before { inset: 0 0 auto 0; width: auto; height: 1px; }
	.rail::after { top: 6px; bottom: auto; left: 10px; right: 10px; border: 0; border-top: 1px dashed rgba(149, 128, 99, .6); }
	.rail__menu { grid-auto-flow: column; align-items: center; gap: 10px; }
	.rail__logo { position: absolute; left: 50%; top: 50%; width: 120px; height: auto; margin: 0; transform: translate(-50%, -46%); }
	.rail__logo svg, [dir="ltr"] .rail__logo svg { position: static; width: 100%; transform: none; }
	/* The tape becomes a progress line along the top edge. */
	.rail__tape { position: absolute; top: 0; left: 0; right: 0; height: 2px; margin: 0; min-height: 0; }
	.rail__ticks, .rail__marker b, .rail__marker small { display: none; }
	.rail__marker { left: 0; right: auto; top: 0; width: calc(var(--p, 0) * 100%); height: 2px; background: var(--gold); }
	[dir="rtl"] .rail__marker { left: auto; right: 0; }
	.rail__tools { grid-auto-flow: column; gap: 6px; }
	.rail__lang, .rail__account, .rail__tools .rail__cap { display: none; }
}

/* --- Sections ----------------------------------------------------------------- */
.main { min-height: 60vh; }
.sec { max-width: var(--w); margin: 0 auto; padding: clamp(80px, 10vw, 150px) var(--gut) 0; }
.sec__head { display: grid; justify-items: center; gap: 14px; margin-bottom: clamp(36px, 4.5vw, 64px); text-align: center; }
.sec__head--start { justify-items: start; text-align: start; }
.sec__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; text-align: start; }
.sec__head--row > div { display: grid; gap: 14px; justify-items: start; }
.sec__title { font-size: clamp(34px, 4vw, 58px); line-height: 1.1; }
:lang(ar) .sec__title { line-height: 1.3; }
.sec__lead { max-width: 44ch; color: var(--mute); font-size: 16px; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(100vh, 920px); }
.hero__panel { --pat-color: rgba(251, 248, 242, .055); display: flex; align-items: flex-end; padding: clamp(40px, 6vw, 96px); background: var(--teal); color: var(--ivory); }
.hero__copy { display: grid; justify-items: start; gap: 26px; max-width: 560px; }
.hero__title { color: var(--ivory); font-size: clamp(42px, 5.4vw, 84px); line-height: 1.04; }
:lang(ar) .hero__title { line-height: 1.3; font-size: clamp(40px, 4.8vw, 74px); }
.hero__sub { max-width: 42ch; color: rgba(251, 248, 242, .78); font-size: 16.5px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; margin-top: 10px; }
.hero__media { margin: 0; position: relative; overflow: hidden; background: var(--cream); }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } /* keep the head in frame when the box is squarer than the photo (phones) */
/* Hero slider: the campaign photo, then the newest pieces. Name and price always visible on the slide. */
.slider__slide { position: absolute; inset: 0; display: block; visibility: hidden; color: var(--ivory); }
.slider__slide.is-active { visibility: visible; z-index: 1; }
.slider__slide.is-in { z-index: 2; }
.slider__slide::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(to top, rgba(0, 38, 48, .74), rgba(0, 38, 48, 0)); pointer-events: none; }
.slider__cap { position: absolute; z-index: 1; inset-inline: clamp(22px, 3vw, 40px); bottom: 96px; display: grid; justify-items: start; gap: 6px; }
.slider__cap small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(251, 248, 242, .88); }
:lang(ar) .slider__cap small { font-size: 13px; letter-spacing: 0; }
.slider__cap strong { font: 300 clamp(24px, 2.4vw, 34px)/1.2 var(--display); }
:lang(ar) .slider__cap strong { font-weight: 400; }
.slider__price { font-size: 15px; }
.slider__ui { position: absolute; z-index: 3; inset-inline: clamp(22px, 3vw, 40px); bottom: 30px; display: flex; align-items: center; gap: 14px; color: var(--ivory); }
.slider__btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(251, 248, 242, .6); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.slider__btn:hover, .slider__btn:focus-visible { background: var(--ivory); color: var(--teal); }
.slider__btn .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.slider__btn--prev .i, [dir="rtl"] .slider__btn:not(.slider__btn--prev):not(.slider__pause) .i { transform: scaleX(-1); }
[dir="rtl"] .slider__btn--prev .i { transform: none; }
.slider__pause { margin-inline-start: auto; }
.slider__pause .i--play { fill: currentColor; stroke: none; }
.slider__pause .i--play, .slider__pause[aria-pressed="true"] .i--pause { display: none; }
.slider__pause[aria-pressed="true"] .i--play { display: block; }
.slider__count { direction: ltr; unicode-bidi: isolate; min-width: 64px; font: 300 14px/1 "IvyMode", serif; letter-spacing: .12em; text-align: center; }
.slider__progress { position: absolute; z-index: 3; inset-inline: 0; bottom: 0; height: 3px; background: rgba(251, 248, 242, .22); }
.slider__progress span { display: block; height: 100%; background: var(--gold-soft); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .slider__progress span { transform-origin: right; }
@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; min-height: 0; }
	.hero__panel { padding: 64px var(--gut) 56px; }
	.hero__media { order: -1; aspect-ratio: 4 / 4.4; } /* phones: the pieces first, the promise under them */
	.slider__cap { bottom: 86px; }
	.slider__btn { width: 38px; height: 38px; }
}

/* Collections */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.cat { display: grid; gap: 16px; }
.cat__img { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cream); }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cat:hover .cat__img img { transform: scale(1.035); }
.cat__mark { width: 30%; color: var(--gold); opacity: .38; transition: opacity .5s var(--ease), transform .8s var(--ease); }
.cat:hover .cat__mark { opacity: .6; transform: translateY(-4px); }
.cat__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cat__name { font: 300 22px/1.25 var(--display); color: var(--teal); }
:lang(ar) .cat__name { font-weight: 400; font-size: 24px; }
.cat__count { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
@media (max-width: 900px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* How to order */
.how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.step__n { font: 300 15px/1.7 "IvyMode", serif; color: var(--gold-ink); letter-spacing: .1em; }
.step__t { font: 300 22px/1.35 var(--display); color: var(--teal); margin-bottom: 6px; }
:lang(ar) .step__t { font-weight: 400; font-size: 23px; }
.step__d { color: var(--mute); }
.how__fig { position: relative; margin: 0; display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--cream); padding: 9% 12%; }
.how__fig .fig { width: 100%; height: 100%; color: var(--teal); }
.how__tag { position: absolute; inset-inline-end: 0; bottom: 0; padding: 12px 18px; background: var(--teal); color: var(--ivory); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }
:lang(ar) .how__tag { font-size: 14px; letter-spacing: 0; }
.fig { overflow: visible; }
.fig .fig__m { color: var(--gold); }
.fig :is(path, circle) { vector-effect: non-scaling-stroke; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; } .how__fig { max-width: 420px; width: 100%; justify-self: center; } }

/* Story */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(96px, 11vw, 170px); background: var(--cream); }
.story__media { margin: 0; position: relative; min-height: 560px; overflow: hidden; }
.story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__copy { display: grid; align-content: center; justify-items: start; gap: 20px; padding: clamp(48px, 7vw, 120px); }
.story__rose { width: 54px; color: var(--gold); margin-bottom: 8px; }
.story__title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.15; }
.names { width: 100%; max-width: 460px; margin: 6px 0 0; border-top: 1px solid var(--line); }
.names div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.names dt { font: 300 30px/1.1 "IvyMode", serif; color: var(--teal); }
.names dd { margin: 0; color: var(--mute); font-size: 14px; text-align: end; }
.story__body { max-width: 46ch; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story__media { min-height: 0; aspect-ratio: 1; } }

/* --- Product grid ------------------------------------------------------------- */
.woocommerce ul.products, ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(14px, 1.6vw, 24px); }
.woocommerce ul.products.columns-4, ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product.card, li.card { width: auto; margin: 0; float: none; padding: 0; text-align: start; }
.card__link { display: grid; gap: 16px; }
.card__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cream); }
/* The photo always fills the 3:4 frame, whatever size WooCommerce hands over. */
.card__media img, .woocommerce ul.products li.product .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center top; transition: transform 1.1s var(--ease), opacity .6s var(--ease); }
.card__img--alt { position: absolute; inset: 0; opacity: 0; }
.card__link:hover .card__img--alt { opacity: 1; }
.card__ph { position: absolute; inset: 0; display: grid; place-items: center; }
.card__mark { width: 26%; color: var(--gold); opacity: .32; transition: opacity .5s var(--ease); }
.card__link:hover .card__mark { opacity: .55; }
.card__body { display: grid; justify-items: start; gap: 6px; }
.card__cat { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
:lang(ar) .card__cat { font-size: 12.5px; letter-spacing: 0; }
.card__name { font: 300 19px/1.35 var(--display); color: var(--teal); }
:lang(ar) .card__name { font-weight: 400; font-size: 20px; }
.card__price { font-size: 14.5px; }
.card__price .woocommerce-Price-amount { font-weight: 400; }
.card__tag { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12px; color: var(--gold-ink); }
.card__tag .i { width: 17px; height: 17px; }
@media (max-width: 1000px) { .woocommerce ul.products.columns-4, ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .woocommerce ul.products, ul.products, .woocommerce ul.products.columns-4, ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 12px; } .card__name { font-size: 17px; } }

/* --- Shop pages --------------------------------------------------------------- */
.shop { max-width: var(--w); margin: 0 auto; padding: 18px var(--gut) clamp(80px, 10vw, 140px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 26px 0 0; font-size: 11.5px; letter-spacing: .1em; color: var(--mute); }
:lang(ar) .crumbs { font-size: 13px; letter-spacing: 0; }
.crumbs a:hover { color: var(--teal); }
.crumbs__sep { opacity: .5; }
.arch { display: grid; justify-items: center; gap: 18px; padding-bottom: 40px; text-align: center; }
.arch .crumbs { justify-content: center; }
.arch__title { margin-top: 24px; font-size: clamp(40px, 5vw, 72px); line-height: 1.05; }
:lang(ar) .arch__title { line-height: 1.3; }
.arch__desc { max-width: 56ch; color: var(--mute); }
.arch__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 10px; }
.arch__cats a { padding: 4px 0; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid transparent; }
:lang(ar) .arch__cats a { font-size: 15px; letter-spacing: 0; }
.arch__cats a:hover { color: var(--teal); }
.arch__cats a[aria-current] { color: var(--teal); border-color: var(--gold); }
.arch__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; padding: 14px 0; border-block: 1px solid var(--line); }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { float: none; margin: 0; }
.woocommerce-result-count { font-size: 13px; color: var(--mute); }
.woocommerce-ordering select { appearance: none; -webkit-appearance: none; padding: 6px 22px 6px 2px; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23006880' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center / 10px; font-size: 13px; color: var(--teal); cursor: pointer; }
[dir="rtl"] .woocommerce-ordering select { padding: 6px 2px 6px 22px; background-position: left 2px center; }
.woocommerce nav.woocommerce-pagination { margin-top: 64px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; justify-content: center; gap: 6px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li :is(a, span) { min-width: 40px; padding: 10px; color: var(--teal); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--teal); color: var(--ivory); }

/* --- Single product ----------------------------------------------------------- */
.shop--product .crumbs { padding-bottom: 28px; }
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5.5vw, 96px); align-items: start; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { float: none; width: auto; margin: 0; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product div.images img { aspect-ratio: 3 / 4; object-fit: cover; background: var(--cream); width: 100%; }
.woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; }
.woocommerce div.product div.images .flex-control-thumbs li img { opacity: .55; transition: opacity .3s; }
.woocommerce div.product div.images .flex-control-thumbs li img:is(.flex-active, :hover) { opacity: 1; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { top: 16px; inset-inline-end: 16px; inset-inline-start: auto; background: var(--ivory); }
.woocommerce div.product div.summary { position: sticky; top: calc(var(--top-h) + 32px); }
.summary .eyebrow { margin-bottom: 14px; }
.woocommerce div.product .product_title { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.12; margin-bottom: 18px; }
:lang(ar) .woocommerce div.product .product_title { line-height: 1.35; }
.woocommerce div.product p.price, .woocommerce div.product span.price { margin: 0 0 22px; color: var(--text); font: 400 19px/1.4 var(--body); }
.woocommerce-product-details__short-description { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--line); color: var(--mute); }

/* Variation pickers: WooCommerce's selects stay (they drive the variation form); JS draws pills over them. */
.woocommerce div.product form.cart { margin: 0; }
.woocommerce div.product form.cart .variations { margin: 0 0 6px; border: 0; }
.woocommerce div.product form.cart .variations tr { display: grid; gap: 12px; margin-bottom: 24px; }
.woocommerce div.product form.cart .variations :is(th, td) { display: block; padding: 0; line-height: 1.4; text-align: start; }
.pick__label, .woocommerce div.product form.cart .variations label { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 11.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
:lang(ar) :is(.pick__label, .woocommerce div.product form.cart .variations label) { font-size: 14px; letter-spacing: 0; }
.pick__val { font: 400 13px/1 var(--body); letter-spacing: .04em; text-transform: none; color: var(--gold-ink); }
.pick__unit { color: var(--mute); letter-spacing: 0; text-transform: none; }
.woocommerce div.product form.cart .variations select, .tailor select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--white); }
.woocommerce div.product form.cart select.has-pills, select.has-pills { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { min-width: 48px; height: 46px; padding: 0 13px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 400 14px/1 var(--body); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.pill:hover { border-color: var(--teal); color: var(--teal); }
.pill:is([aria-pressed="true"], [aria-current="true"]) { background: var(--teal); border-color: var(--teal); color: var(--ivory); }
.pill:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--mute); border-bottom: 1px solid var(--line); }
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-price { margin-bottom: 14px; }

/* Tailoring panel */
.tailor { flex: 0 0 100%; min-width: 0; margin: 6px 0 24px; padding: 26px 26px 20px; border: 0; background: var(--cream); }
.tailor__title { float: inline-start; width: 100%; padding: 0 0 16px; margin: 0 0 4px; border-bottom: 1px solid var(--line); font: 300 22px/1.2 var(--display); color: var(--teal); }
:lang(ar) .tailor__title { font-weight: 400; }
.tailor__row { clear: both; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.tailor__fig { margin: 0; padding-top: 4px; }
.tailor__fig .fig { width: 100%; height: auto; color: var(--teal); }
.tailor__field { display: grid; gap: 14px; min-width: 0; }
.tailor__input { display: flex; align-items: center; max-width: 220px; background: var(--white); border: 1px solid var(--line-strong); transition: border-color .2s; }
.tailor__input:focus-within { border-color: var(--teal); }
.tailor__input input { width: 100%; min-width: 0; height: 52px; padding: 0 14px; border: 0; outline: 0; background: transparent; font: 300 24px/1 var(--body); color: var(--teal); -moz-appearance: textfield; }
.tailor__input input::-webkit-inner-spin-button, .tailor__input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tailor__input input::placeholder { font-size: 15px; color: var(--mute); }
.tailor__input span { padding: 0 16px; color: var(--mute); font-size: 14px; }
.tailor__hint { font-size: 13px; color: var(--mute); }
.tailor__note { clear: both; padding-top: 16px; font-size: 12.5px; color: var(--gold-ink); }

/* Tape measure: a range input over a ruler (decorative; the number field is the real input). */
.tape { --thumb: 18px; position: relative; }
.tape__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 38px; margin: 0; background-color: var(--white); border: 1px solid var(--line); cursor: pointer;
	background-image: linear-gradient(to right, var(--gold) 1px, transparent 1px), linear-gradient(to right, var(--gold) 1px, transparent 1px);
	background-size: calc((100% - var(--thumb)) / var(--n)) 26%, calc((100% - var(--thumb)) / var(--n) * 5) 52%;
	background-position: calc(var(--thumb) / 2) 100%, calc(var(--thumb) / 2) 100%;
	background-repeat: repeat-x; }
.tape__range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: 38px; border: 0; background: linear-gradient(var(--teal), var(--teal)) center / 2px 100% no-repeat, radial-gradient(circle at 50% 6px, var(--teal) 4px, transparent 4.5px); cursor: ew-resize; }
.tape__range::-moz-range-thumb { width: var(--thumb); height: 38px; border: 0; border-radius: 0; background: linear-gradient(var(--teal), var(--teal)) center / 2px 100% no-repeat, radial-gradient(circle at 50% 6px, var(--teal) 4px, transparent 4.5px); cursor: ew-resize; }
.tape__range::-moz-range-track { background: transparent; }
.tape.is-empty .tape__range::-webkit-slider-thumb { opacity: .35; }
.tape.is-empty .tape__range::-moz-range-thumb { opacity: .35; }
.tape__scale { position: relative; height: 18px; margin-top: 6px; font-size: 11px; color: var(--mute); }
.tape__scale span { position: absolute; top: 0; inset-inline-start: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)); transform: translateX(-50%); }
[dir="rtl"] .tape__scale span { transform: translateX(50%); }

/* Add to bag row + quantity stepper */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart, .woocommerce div.product form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; gap: 10px; }
.woocommerce .quantity, .woocommerce div.product form.cart div.quantity { display: inline-flex; align-items: stretch; float: none; margin: 0; border: 1px solid var(--line-strong); background: var(--white); }
.woocommerce .quantity .qty { width: 46px; height: 52px; padding: 0; border: 0; background: transparent; text-align: center; font: 400 15px/1 var(--body); -moz-appearance: textfield; }
.woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty__btn { display: grid; place-items: center; width: 40px; border: 0; background: transparent; color: var(--teal); cursor: pointer; }
.qty__btn .i { width: 16px; height: 16px; }
.woocommerce div.product form.cart .button.single_add_to_cart_button { flex: 1; min-height: 54px; float: none; }

/* Below the product */
.pdesc { max-width: 760px; margin: clamp(72px, 9vw, 130px) auto 0; padding-top: 48px; border-top: 1px solid var(--line); text-align: center; }
.pdesc__title { font-size: 30px; margin-bottom: 22px; }
.related.products { margin-top: clamp(80px, 10vw, 140px); }
.related.products > h2 { margin-bottom: 40px; font: 300 clamp(30px, 3vw, 44px)/1.2 var(--display); color: var(--teal); text-align: center; }
:lang(ar) .related.products > h2 { font-weight: 400; }
@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce div.product div.summary { position: static; }
	.tailor { padding: 22px 18px 16px; }
	.tailor__row { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
}

/* --- Notices ------------------------------------------------------------------ */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce :is(.woocommerce-error, .woocommerce-message, .woocommerce-info), .woocommerce-error, .woocommerce-message, .woocommerce-info {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 32px; padding: 16px 22px; list-style: none;
	border: 0; border-inline-start: 2px solid var(--gold); background: var(--cream); color: var(--text); font-size: 14.5px; }
.woocommerce :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before { content: none; }
.woocommerce .woocommerce-error { border-color: var(--err); color: var(--err); }
.woocommerce :is(.woocommerce-message, .woocommerce-info) .button { order: 2; min-height: 42px; padding: 0 20px; }

/* --- Pages: cart, checkout, account -------------------------------------------- */
/* Scoped to the content wrapper: WordPress also puts a "page" class on <body>. */
.main > .page { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut) clamp(80px, 10vw, 140px); }
.page__head { display: grid; justify-items: center; gap: 12px; padding: 56px 0 48px; text-align: center; }
.page__title { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.1; }
.page__body { max-width: 760px; margin: 0 auto; }
.page--wide .page__body { max-width: none; }

.woocommerce-cart .page__body > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.woocommerce-cart .page__body > .woocommerce > :is(.woocommerce-notices-wrapper, .empty, .return-to-shop, .cart-empty, .wc-empty-cart-message) { grid-column: 1 / -1; }
.woocommerce table.shop_table { margin: 0; border: 0; border-collapse: collapse; border-radius: 0; width: 100%; }
.woocommerce table.shop_table :is(th, td) { padding: 18px 10px; border: 0; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
.woocommerce table.shop_table thead th { padding-top: 0; font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
:lang(ar) .woocommerce table.shop_table thead th { font-size: 13px; letter-spacing: 0; }
.woocommerce table.cart img { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--cream); }
.woocommerce table.cart .product-name a { font: 300 19px/1.3 var(--display); color: var(--teal); }
:lang(ar) .woocommerce table.cart .product-name a { font-weight: 400; }
.woocommerce table.cart td.product-remove a.remove { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 0; color: var(--mute) !important; }
.woocommerce table.cart td.product-remove a.remove:hover { background: transparent; color: var(--err) !important; }
.woocommerce table.cart td.product-remove .i { width: 18px; height: 18px; }
.woocommerce td.product-name dl.variation, dl.variation { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 8px 0 0; font-size: 13px; color: var(--mute); }
dl.variation :is(dt, dd), .woocommerce td.product-name dl.variation :is(dt, dd) { float: none; margin: 0; padding: 0; font-weight: 300; }
dl.variation dd p { margin: 0; }
.woocommerce table.cart td.actions { padding: 24px 0 0; border: 0; }
.woocommerce table.cart td.actions .coupon { display: flex; gap: 8px; }
.woocommerce table.cart td.actions .coupon .input-text { width: 200px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); }
.woocommerce table.cart td.actions .button { min-height: 48px; padding: 0 22px; }
.woocommerce .cart-collaterals { position: sticky; top: calc(var(--top-h) + 32px); }
.woocommerce .cart-collaterals .cart_totals { float: none; width: auto; padding: 32px; background: var(--cream); }
.cart_totals h2, #order_review_heading { margin-bottom: 18px; font: 300 26px/1.2 var(--display); color: var(--teal); }
:lang(ar) :is(.cart_totals h2, #order_review_heading) { font-weight: 400; }
.cart_totals table.shop_table :is(th, td) { padding: 14px 0; font-size: 14.5px; }
.cart_totals .order-total :is(th, td) { border-bottom: 0; font-size: 17px; font-weight: 400; color: var(--teal); }
.woocommerce .wc-proceed-to-checkout { padding: 18px 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; margin: 0; font-size: 12px; }
:lang(ar) .woocommerce .wc-proceed-to-checkout a.checkout-button { font-size: 15px; }
.empty { display: grid; justify-items: center; gap: 18px; padding: 40px 0 10px; text-align: center; }
.empty__mark { width: 64px; color: var(--gold); opacity: .5; }
.empty__title { font: 300 26px/1.3 var(--display); color: var(--teal); }
.woocommerce .return-to-shop { text-align: center; }
@media (max-width: 980px) {
	.woocommerce-cart .page__body > .woocommerce { grid-template-columns: 1fr; }
	.woocommerce .cart-collaterals { position: static; }
}
@media (max-width: 760px) {
	.woocommerce table.shop_table_responsive thead { display: none; }
	.woocommerce table.cart tr.cart_item { display: grid; grid-template-columns: 84px 1fr 32px; grid-template-areas: "img name x" "img price x" "img qty x" "img sub x"; column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
	.woocommerce table.cart tr.cart_item td { display: block; padding: 2px 0; border: 0; text-align: start !important; }
	.woocommerce table.cart tr.cart_item td::before { content: none !important; }
	.woocommerce table.cart td.product-thumbnail { grid-area: img; display: block !important; }
	.woocommerce table.cart td.product-name { grid-area: name; }
	.woocommerce table.cart td.product-price { grid-area: price; font-size: 13px; color: var(--mute); }
	.woocommerce table.cart td.product-quantity { grid-area: qty; padding-top: 10px !important; }
	.woocommerce table.cart td.product-subtotal { grid-area: sub; padding-top: 8px !important; }
	.woocommerce table.cart td.product-remove { grid-area: x; }
	.woocommerce table.cart tr:not(.cart_item), .woocommerce table.cart td.actions { display: block; }
	.woocommerce table.cart td.actions .coupon { flex-wrap: wrap; float: none; margin-bottom: 10px; }
	.woocommerce table.cart td.actions .coupon .input-text { flex: 1; width: auto; }
	.woocommerce table.cart td.actions > .button { width: 100%; }
}

.woocommerce-checkout .page__body { max-width: none; }
.woocommerce form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 0 clamp(32px, 5vw, 72px); align-items: start; }
.woocommerce form.checkout > :is(.woocommerce-NoticeGroup, .woocommerce-notices-wrapper) { grid-column: 1 / -1; }
.woocommerce form.checkout #customer_details { grid-column: 1; grid-row: 1; }
.woocommerce form.checkout #order_review_heading { display: none; }
.woocommerce form.checkout #order_review { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--top-h) + 32px); padding: 32px; background: var(--cream); }
.review__title { margin-bottom: 18px; font: 300 26px/1.2 var(--display); color: var(--teal); }
:lang(ar) .review__title { font-weight: 400; }
.woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) { display: flex; flex-wrap: wrap; gap: 0 16px; }
.woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) .form-row { width: 100%; float: none; }
.woocommerce .col2-set { display: grid; gap: 40px; width: auto; }
.woocommerce .col2-set::before, .woocommerce .col2-set::after { content: none; }
.woocommerce .col2-set :is(.col-1, .col-2) { float: none; width: auto; }
.woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
.woocommerce :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) h3, .woocommerce-account .woocommerce h2 { margin: 0 0 22px; font: 300 26px/1.2 var(--display); color: var(--teal); }
:lang(ar) :is(.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3) { font-weight: 400; }
.woocommerce form .form-row { margin: 0 0 18px; padding: 0; }
.woocommerce form .form-row label { display: block; margin-bottom: 7px; font-size: 13px; line-height: 1.4; }
.woocommerce form .form-row .required { color: var(--gold); text-decoration: none; }
.woocommerce form .form-row :is(.input-text, select, textarea) { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--white); font: 300 15px/1.4 var(--body); color: var(--text); transition: border-color .2s; }
.woocommerce form .form-row textarea { min-height: 110px; padding: 12px 14px; }
.woocommerce form .form-row :is(.input-text, select, textarea):focus { outline: 0; border-color: var(--teal); }
.woocommerce form .form-row:is(.form-row-first, .form-row-last) { width: calc(50% - 8px); }
.woocommerce-checkout #ship-to-different-address { font: 300 17px/1.4 var(--body); }
.woocommerce-checkout-review-order-table { margin-bottom: 20px !important; }
.woocommerce-checkout-review-order-table :is(th, td) { padding: 14px 0 !important; font-size: 14px; }
.woocommerce-checkout-review-order-table .order-total :is(th, td) { font-size: 17px; font-weight: 400; color: var(--teal); border-bottom: 0 !important; }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout #payment div.payment_box { margin: 10px 0 0; padding: 12px 16px; background: var(--white); color: var(--mute); font-size: 13.5px; }
.woocommerce-checkout #payment div.payment_box::before { content: none; }
.woocommerce-checkout #payment div.form-row { padding: 18px 0 0; }
.woocommerce #payment #place_order { width: 100%; float: none; }
.woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text { font-size: 13px; color: var(--mute); }
@media (max-width: 980px) {
	.woocommerce form.checkout { grid-template-columns: 1fr; }
	.woocommerce form.checkout :is(#customer_details, #order_review) { grid-column: 1; grid-row: auto; }
	.woocommerce form.checkout #order_review { position: static; margin-top: 32px; padding: 26px 20px; }
}

.woocommerce ul.order_details { display: flex; flex-wrap: wrap; margin: 0 0 40px; padding: 0; border: 1px solid var(--line); }
.woocommerce ul.order_details::before, .woocommerce ul.order_details::after { content: none; }
.woocommerce ul.order_details li { flex: 1 1 180px; margin: 0; padding: 18px 20px; border: 0; border-inline-end: 1px solid var(--line); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
:lang(ar) .woocommerce ul.order_details li { font-size: 13px; letter-spacing: 0; }
.woocommerce ul.order_details li strong { display: block; margin-top: 6px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--teal); }
.woocommerce-order-details__title, .woocommerce-column__title { margin-bottom: 18px; font: 300 26px/1.2 var(--display); color: var(--teal); }
.woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; }
.woocommerce-account :is(.u-column1, .u-column2) { padding: 36px; background: var(--cream); }
.woocommerce form:is(.login, .register) { margin: 0; padding: 0; border: 0; border-radius: 0; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 0; font-size: 13px; color: var(--mute); border-bottom: 1px solid transparent; }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--teal); border-color: var(--gold); }
.woocommerce-account .woocommerce :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) { float: none; width: auto; }
@media (max-width: 760px) { .woocommerce-account .u-columns { grid-template-columns: 1fr; } .woocommerce form .form-row:is(.form-row-first, .form-row-last) { width: 100%; } }

/* --- Footer --------------------------------------------------------------------- */
.foot { position: relative; isolation: isolate; background: var(--teal); color: rgba(251, 248, 242, .78); }
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(201, 184, 156, .07); -webkit-mask: url(../img/pattern.svg) 0 0 / 340.5px 328.5px repeat; mask: url(../img/pattern.svg) 0 0 / 340.5px 328.5px repeat; }
.foot__in { max-width: var(--w); margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--gut) 56px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.foot__brand { display: grid; align-content: start; justify-items: start; gap: 22px; }
.foot__logo { color: var(--gold-soft); }
.foot__logo svg { height: 40px; width: auto; }
.foot__line { max-width: 34ch; }
.foot__col { display: grid; align-content: start; gap: 12px; }
.foot__h { margin-bottom: 6px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-soft); }
:lang(ar) .foot__h { font-size: 13px; letter-spacing: 0; }
.foot__col a { width: fit-content; font-size: 14.5px; transition: color .2s; }
.foot__col a:hover { color: var(--ivory); }
.foot__base { max-width: var(--w); margin: 0 auto; padding: 22px var(--gut); display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(251, 248, 242, .14); font-size: 12.5px; color: rgba(251, 248, 242, .55); }
.foot__base .lang { padding: 0; color: rgba(251, 248, 242, .7); }
.foot__base .lang:hover { color: var(--ivory); }
@media (max-width: 760px) { .foot__in { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* Item details under order lines (thank-you page, account, emails preview) */
.wc-item-meta { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--mute); }
.wc-item-meta li { display: flex; gap: 6px; }
.wc-item-meta :is(strong, p) { margin: 0; font-weight: 300; }
.woocommerce-thankyou-order-received, .woocommerce-notice--success { margin-bottom: 24px; font: 300 22px/1.4 var(--display); color: var(--teal); }

/* --- Pinked cloth ------------------------------------------------------------------
   Pinking-shear zigzags: .sw__cloth cuts top + bottom, .cloth cuts left + right (nested masks intersect).
   Colourways come from the brand book's pattern page. */
:root { --zz: 12px; }
[data-cloth="gold-teal"]  { --c-bg: var(--teal);      --c-fg: var(--gold);  --l-bg: var(--ivory); --l-ink: var(--teal); }
[data-cloth="teal-cream"] { --c-bg: var(--cream);     --c-fg: var(--teal);  --l-bg: var(--teal);  --l-ink: var(--ivory); }
[data-cloth="cream-gold"] { --c-bg: var(--gold);      --c-fg: var(--cream); --l-bg: var(--teal);  --l-ink: var(--ivory); }
[data-cloth="teal-teal"]  { --c-bg: var(--teal-deep); --c-fg: #1b7f97;      --l-bg: var(--ivory); --l-ink: var(--teal); }
.cloth { position: absolute; inset: 0; isolation: isolate; background: var(--c-bg, var(--teal));
	-webkit-mask: conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% var(--zz) repeat-y, conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% var(--zz) repeat-y;
	mask: conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% var(--zz) repeat-y, conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% var(--zz) repeat-y; }
.cloth::before { content: ""; position: absolute; inset: 0; background: var(--c-fg, var(--gold));
	-webkit-mask: url(../img/pattern.svg) 0 0 / var(--pat, 170.25px 164.25px) repeat; mask: url(../img/pattern.svg) 0 0 / var(--pat, 170.25px 164.25px) repeat; }

/* --- Swatch book (navigation) ---------------------------------------------------- */
.swatches { position: fixed; inset: 0; inset-inline-start: var(--rail); z-index: 60; display: grid; place-items: center; overflow-y: auto; }
.swatches[hidden] { display: none; }
.swatches__veil { position: fixed; inset: 0; background: rgba(251, 248, 242, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.swatches__stage { position: relative; width: 100%; max-width: 1240px; padding: 72px var(--gut) calc(48px + var(--dock)); display: grid; justify-items: center; gap: clamp(28px, 4vh, 48px); }
.swatches__row { display: flex; justify-content: center; gap: clamp(14px, 2vw, 30px); perspective: 1200px; }
.sw { position: relative; display: block; flex: none; width: clamp(170px, 16.5vw, 236px); aspect-ratio: 3 / 4.25; filter: drop-shadow(0 22px 22px rgba(0, 45, 56, .16)); will-change: transform; }
.sw:focus-visible { outline: none; }
.sw:focus-visible .sw__label { outline: 1.5px solid var(--gold); outline-offset: 4px; }
.sw__cloth { position: absolute; inset: 0;
	-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x;
	mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x; }
.sw .cloth { --pat: 127.7px 123.2px; }
/* The category name sits on a stitched woven label, like the brand's garment label. */
.sw__label { position: absolute; inset-inline: 13%; bottom: 13%; display: grid; justify-items: center; gap: 2px; padding: 14px 10px 12px; background: var(--l-bg); color: var(--l-ink); text-align: center; box-shadow: 0 6px 14px rgba(0, 30, 40, .18); }
.sw__label::before { content: ""; position: absolute; inset: 4px; border: 1px dashed currentColor; opacity: .45; pointer-events: none; }
.sw__n { font: 300 11px/1 "IvyMode", serif; letter-spacing: .2em; opacity: .7; }
.sw__name { font: 300 22px/1.25 var(--display); }
:lang(ar) .sw__name { font-weight: 400; font-size: 23px; }
.sw__count { font-size: 11.5px; opacity: .75; }
.swatches__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; }
.swatches__links a { padding: 4px 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); }
:lang(ar) .swatches__links a, .swatches__links a:lang(ar) { font-size: 15px; letter-spacing: 0; }
.swatches__links a:hover { color: var(--teal); border-color: var(--teal); }
.swatches__close { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; border: 0; background: none; color: var(--mute); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; margin-bottom: 32px; }
:lang(ar) .swatches__close { font-size: 14px; letter-spacing: 0; }
.swatches__close .i { width: 16px; height: 16px; }
@media (max-width: 980px) {
	.swatches { place-items: start center; }
	.swatches__stage { padding-top: 40px; }
	.swatches__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; width: 100%; max-width: 440px; }
	.sw { width: 100%; }
	.sw__name { font-size: 19px; }
	:lang(ar) .sw__name { font-size: 20px; }
}

/* --- The rack (mini cart) ---------------------------------------------------------------
   A narrow panel out of the rail. A gold rod runs down its side; each piece is a hang-tag card
   (cut corner + eyelet) hooked onto the rod by a short thread. Plain vertical list underneath. */
.rack { position: fixed; inset: 0; z-index: 80; }
.rack[hidden] { display: none; }
.rack__veil { position: absolute; inset: 0; background: rgba(0, 38, 48, .4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rack__panel { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--rail); width: min(460px, calc(100vw - var(--rail))); display: flex; flex-direction: column; background: var(--ivory); box-shadow: 0 0 80px rgba(0, 30, 40, .25); }
.rack__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px 14px; border-bottom: 1px solid var(--line); }
.rack__title { font: 300 28px/1.2 var(--display); color: var(--teal); }
:lang(ar) .rack__title { font-weight: 400; }
.rack__close { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; color: var(--mute); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
:lang(ar) .rack__close { font-size: 14px; letter-spacing: 0; }
.rack__close .i { width: 16px; height: 16px; }
.rack__content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rack__scroller { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rack__line { position: relative; min-height: 100%; padding: 18px 22px 24px; padding-inline-start: 52px; }
.rack__rod { position: absolute; top: 0; bottom: 0; inset-inline-start: 22px; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #7d6b52, #e2d3b6 45%, #a68e6a); box-shadow: 1px 0 3px rgba(80, 60, 30, .25); transform-origin: 50% 0; }
.rack__items { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.t { position: relative; }
/* Thread from the rod to the card's eyelet. */
.t__hook { position: absolute; top: 20px; inset-inline-start: -28px; width: 34px; height: 1.5px; background: #a68e6a; }
.t__hook::before { content: ""; position: absolute; top: -4px; inset-inline-start: -4px; width: 9px; height: 9px; border: 1.5px solid #a68e6a; border-radius: 50%; background: var(--ivory); }
.t__card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px; padding-inline-end: 38px; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgba(0, 40, 50, .4);
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); transform-origin: 0 20px; }
[dir="rtl"] .t__card { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transform-origin: 100% 20px; }
/* Eyelet punched near the cut corner. */
.t__card::before { content: ""; position: absolute; top: 15px; inset-inline-start: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ivory); box-shadow: inset 0 0 0 1.5px #a68e6a; }
.t__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; margin-inline-start: 6px; background: var(--cream); }
.t__img img { width: 100%; height: 100%; object-fit: cover; }
.t__ph { display: grid; place-items: center; height: 100%; }
.t__ph svg { width: 40%; color: var(--gold); opacity: .4; }
.t__body { display: grid; align-content: start; gap: 4px; min-width: 0; }
.t__name { font: 300 16.5px/1.35 var(--display); color: var(--teal); }
:lang(ar) .t__name { font-weight: 400; font-size: 17.5px; }
.t__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--mute); }
.t__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.t__qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); }
.t__qty button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: none; color: var(--teal); cursor: pointer; }
.t__qty .i { width: 13px; height: 13px; }
.t__qty span { min-width: 22px; text-align: center; font-size: 13.5px; }
.t__price { font-size: 14px; white-space: nowrap; }
.t__x { position: absolute; top: 10px; inset-inline-end: 8px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; color: var(--mute); cursor: pointer; }
.t__x:hover { color: var(--err); }
.t__x .i { width: 15px; height: 15px; }
.t.is-busy { opacity: .45; pointer-events: none; }
.rack__empty { display: grid; justify-items: center; gap: 16px; padding: 60px 0 20px; text-align: center; }
.rack__mark { width: 52px; color: var(--gold); opacity: .45; }
.rack__empty-title { font: 300 22px/1.35 var(--display); color: var(--teal); }
.rack__foot { display: grid; gap: 12px; padding: 18px 26px 22px; background: var(--cream); border-top: 1px solid var(--line); }
.rack__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mute); }
.rack__total strong { font-weight: 400; font-size: 20px; color: var(--teal); }
.rack__link { justify-self: center; font-size: 12.5px; color: var(--mute); border-bottom: 1px solid var(--line); }
.rack__link:hover { color: var(--teal); }
@media (max-width: 900px) {
	.rack__panel { top: auto; bottom: 0; inset-inline: 0; width: auto; max-height: 88vh; }
	.rack__content, .rack__scroller { flex: 0 1 auto; }
	.rack__foot { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* Checkout as a gold-foil ribbon with swallow-tail ends; the foil catches the light on hover. */
.ribbon { position: relative; display: block; padding: 18px 44px; text-align: center; color: var(--white); font: 400 12px/1 var(--body); letter-spacing: .24em; text-transform: uppercase;
	background: linear-gradient(105deg, #85704f 0%, #b39d79 30%, #e2d3b6 46%, #a68e6a 60%, #85704f 100%); background-size: 260% 100%; background-position: 0 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%); transition: background-position 1s var(--ease); }
:lang(ar) .ribbon { font-size: 15px; letter-spacing: 0; }
.ribbon:hover { background-position: 100% 0; }
.ribbon span { position: relative; text-shadow: 0 1px 0 rgba(80, 60, 30, .35); }

/* --- Page transition cloth ------------------------------------------------------------ */
.cover { position: fixed; z-index: 90; top: -14px; bottom: -14px; left: -14px; right: -14px; pointer-events: none; visibility: hidden;
	-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x;
	mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x; }
.cover .cloth { --pat: 127.7px 123.2px; }
.is-loading, .is-loading * { cursor: progress; }
/* The rose (the official mark) on the cloth — "where light meets the rose", the brand book's own idea.
   Everything here is soft: a warm light opens, the five petals open one after another out of a slight blur, the
   wordmark rises beneath, and a faint glint of light crosses the gold now and then while the page loads.
   Every move rests on the mark exactly as drawn. The first visit plays it in full (preloader); page changes
   play it quicker (--k). The cloth itself only fades (main.js). */
.cover { --k: .6; overflow: hidden; }
.is-first .cover { --k: 1; }
.cover .cloth::before { opacity: .2; }
.cover__mark { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(22px, 2.4vw, 30px); color: var(--gold-soft); }
.cover[data-cloth="teal-cream"] .cover__mark { color: var(--teal); }
.cover[data-cloth="cream-gold"] .cover__mark { color: var(--ivory); }
.cover__mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(130vmin, 980px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 211, 182, .24), rgba(226, 211, 182, .07) 45%, transparent); }
.cover__rose { position: relative; width: clamp(108px, 11vw, 150px); aspect-ratio: 524.7 / 506.85; }
.cover__rose svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 49.23% 45.6%; }
/* Petals turn about the rose's centre (viewBox units). */
.cover__rose path { transform-box: view-box; transform-origin: 1053.6px 373.7px; }
.cover__rose path:nth-child(2) { --i: 1; }
.cover__rose path:nth-child(3) { --i: 2; }
.cover__rose path:nth-child(4) { --i: 3; }
.cover__rose path:nth-child(5) { --i: 4; }
.cover__rose::after { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 250, 238, .55) 50%, transparent 70%) 100% 0 / 300% 100% no-repeat;
	-webkit-mask: url(../img/rose.svg) center / contain no-repeat; mask: url(../img/rose.svg) center / contain no-repeat; }
.cover__word { position: relative; width: clamp(118px, 11vw, 156px); }
/* Playing the entrance (first visit, or each page change). */
:is(.cover.is-bloom, .is-first .cover) .cover__mark::before { animation: light calc(1.8s * var(--k)) ease-out both; }
:is(.cover.is-bloom, .is-first .cover) .cover__rose svg { animation: unfurl calc(2s * var(--k)) cubic-bezier(.25, .1, .25, 1) both; }
:is(.cover.is-bloom, .is-first .cover) .cover__rose path { animation: petal calc(1.3s * var(--k)) cubic-bezier(.25, .1, .25, 1) calc(var(--i, 0) * .12s * var(--k)) both; }
:is(.cover.is-bloom, .is-first .cover) .cover__word { animation: word calc(1.1s * var(--k)) cubic-bezier(.25, .1, .25, 1) calc(.85s * var(--k)) both; }
/* While the cloth is down: the glint returns every few seconds. */
:is(.cover.is-on, .is-arriving .cover) .cover__rose::after { animation: glint 3.4s ease-in-out calc(1.4s * var(--k)) infinite; }
@keyframes light { from { opacity: 0; transform: scale(.7); } }
@keyframes unfurl { from { transform: rotate(-12deg) scale(.94); filter: blur(6px); } }
@keyframes petal { from { opacity: 0; transform: rotate(-16deg) scale(.84); } }
@keyframes word { from { opacity: 0; filter: blur(5px); transform: translateY(8px); } }
@keyframes glint { 0% { opacity: 1; background-position: 100% 0; } 45% { opacity: 1; background-position: 0 0; } 46%, 100% { opacity: 0; background-position: 0 0; } }
.is-arriving .cover { visibility: visible; }
.nf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.nf__actions button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.nl-note { margin: 0; padding: 14px 24px; background: var(--teal); color: var(--ivory); font-size: 14px; text-align: center; }

/* --- Product gallery: all photos stacked, full width ------------------------------------- */
/* A sideways slider: native swipe (scroll-snap), arrows and count over the photo, thumbnails under it — all visible.
   A photo opens full size in a lightbox (native dialog). */
.woocommerce div.product div.images.woocommerce-product-gallery { display: grid; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { grid-area: 1 / 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper::-webkit-scrollbar, .lb__track::-webkit-scrollbar { display: none; }
.woocommerce div.product div.images .woocommerce-product-gallery__image, .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) { display: block; flex: 0 0 100%; width: 100%; padding: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.woocommerce div.product div.images .woocommerce-product-gallery__image a { display: block; cursor: zoom-in; }
.gal__ui { grid-area: 1 / 1; z-index: 1; align-self: end; justify-self: center; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.gal__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(0, 104, 128, .22); border-radius: 50%; background: rgba(251, 248, 242, .94); color: var(--teal); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.gal__btn:hover, .gal__btn:focus-visible { background: var(--teal); color: var(--ivory); }
.gal__btn .i { width: 16px; height: 16px; stroke-width: 1.5; }
.gal__btn--prev .i, [dir="rtl"] .gal__btn:not(.gal__btn--prev):not(.lb__close) .i { transform: scaleX(-1); }
[dir="rtl"] .gal__btn--prev .i { transform: none; }
.gal__count { direction: ltr; unicode-bidi: isolate; min-width: 76px; padding: 11px 12px 10px; border-radius: 99px; background: rgba(251, 248, 242, .94); color: var(--teal); font: 300 14px/1 "IvyMode", serif; letter-spacing: .12em; text-align: center; }
.gal__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gal__thumbs button { width: 64px; aspect-ratio: 3 / 4; padding: 0; border: 1px solid transparent; background: var(--cream); cursor: pointer; opacity: .6; transition: opacity .3s var(--ease), border-color .3s var(--ease); }
.gal__thumbs button:hover, .gal__thumbs button[aria-current="true"] { opacity: 1; }
.gal__thumbs button[aria-current="true"] { border-color: var(--teal); }
.gal__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ivory); overflow: hidden; }
.lb::backdrop { background: var(--ivory); }
.lb__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.lb__slide { flex: 0 0 100%; display: grid; place-items: center; margin: 0; padding: 72px clamp(16px, 5vw, 72px) 96px; scroll-snap-align: start; scroll-snap-stop: always; }
.lb__slide img { max-width: 100%; max-height: calc(100dvh - 168px); width: auto; height: auto; object-fit: contain; }
.lb__close { position: absolute; top: 18px; inset-inline-end: 18px; }
.lb__ui { position: absolute; bottom: 24px; left: 50%; translate: -50% 0; margin: 0; }
.woocommerce div.product div.images.woocommerce-product-gallery { opacity: 1 !important; }

/* --- Search layer ------------------------------------------------------------------------ */
.rail__search { border: 0; background: none; cursor: pointer; }
.finder { position: fixed; inset: 0; inset-inline-start: var(--rail); z-index: 75; }
.finder[hidden] { display: none; }
.finder__veil { position: absolute; inset: 0; background: rgba(251, 248, 242, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.finder__panel { position: relative; max-width: 920px; height: 100%; margin: 0 auto; padding: clamp(48px, 10vh, 110px) var(--gut) calc(40px + var(--dock)); display: flex; flex-direction: column; }
.finder__form { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--teal); color: var(--teal); }
.finder__form .i { width: 28px; height: 28px; flex: none; }
.finder__form input[type="search"] { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: 0; background: none; font: 300 clamp(26px, 3.4vw, 42px)/1.2 var(--display); color: var(--teal); }
:lang(ar) .finder__form input[type="search"] { font-weight: 400; }
.finder__form input::placeholder { color: rgba(0, 104, 128, .35); }
.finder__form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.finder__close { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; color: var(--mute); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
:lang(ar) .finder__close { font-size: 14px; letter-spacing: 0; }
.finder__close .i { width: 16px; height: 16px; }
.finder__results { flex: 1; min-height: 0; overflow-y: auto; padding-top: 26px; overscroll-behavior: contain; }
.finder__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.finder__cats a { display: inline-flex; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-strong); font-size: 14px; color: var(--teal); }
.finder__cats a small { color: var(--mute); font-size: 12px; }
.finder__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.finder__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.finder__item:hover .finder__name, .finder__item:focus-visible .finder__name { text-decoration: underline; text-underline-offset: 4px; }
.finder__thumb { aspect-ratio: 3 / 4; overflow: hidden; background: var(--cream); display: grid; place-items: center; }
.finder__thumb img { width: 100%; height: 100%; object-fit: cover; }
.finder__thumb svg { width: 40%; color: var(--gold); opacity: .4; }
.finder__name { display: block; font: 300 17px/1.35 var(--display); color: var(--teal); }
:lang(ar) .finder__name { font-weight: 400; }
.finder__sub { display: block; font-size: 12.5px; color: var(--mute); }
.finder__empty { color: var(--mute); }
.finder__all { display: inline-flex; margin-top: 24px; }
@media (max-width: 760px) { .finder__list { grid-template-columns: 1fr; } }

/* --- Shop filters -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 34px; margin: 0 0 22px; }
.filters__group { display: grid; gap: 8px; }
.filters__label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
:lang(ar) .filters__label { font-size: 13px; letter-spacing: 0; }
.filters__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill--link { display: inline-flex; align-items: center; height: 38px; min-width: 42px; justify-content: center; font-size: 13px; }
.filters__clear { align-self: flex-end; padding: 8px 0; font-size: 12.5px; color: var(--mute); border-bottom: 1px solid var(--line); }
.filters__clear:hover { color: var(--teal); }

/* --- Footer newsletter + contact ---------------------------------------------------------- */
.foot__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.foot__note { font-size: 14px; margin-bottom: 4px; }
.news { display: grid; gap: 10px; }
.news__row { display: flex; border-bottom: 1px solid rgba(251, 248, 242, .45); }
.news__row input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: none; color: var(--ivory); font-size: 15px; }
.news__row input::placeholder { color: rgba(251, 248, 242, .5); }
[dir="rtl"] .news__row input::placeholder { text-align: right; }
.news__row button { padding: 10px 0 10px 4px; border: 0; background: none; color: var(--gold-soft); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
:lang(ar) .news__row button { font-size: 14px; letter-spacing: 0; }
.news__row button:hover { color: var(--ivory); }
.news__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.6; color: rgba(251, 248, 242, .7); cursor: pointer; }
.news__consent input { margin-top: 3px; accent-color: var(--gold); }
.news__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }
.news__msg { min-height: 1.2em; font-size: 13px; color: var(--gold-soft); }
.news__msg.is-error { color: #f1c7c0; }
.foot__contact { display: grid; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.foot__contact span { color: var(--gold-soft); margin-inline-end: 6px; }
.foot__contact a:hover { color: var(--ivory); }
@media (max-width: 980px) { .foot__in { grid-template-columns: 1fr 1fr; } .foot__brand, .foot__news { grid-column: 1 / -1; } }

/* --- Page content (size guide, policies, contact) ------------------------------------------- */
.page__body > * + * { margin-top: 1.1em; }
.page__body h2 { margin-top: 2em; font: 300 26px/1.3 var(--display); color: var(--teal); }
:lang(ar) .page__body h2 { font-weight: 400; }
.page__body h3 { margin-top: 1.6em; font-size: 17px; font-weight: 500; color: var(--teal); }
.page__body ul, .page__body ol { padding-inline-start: 1.3em; }
.page__body li + li { margin-top: .4em; }
.page__body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.page__body th, .page__body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: start; }
.page__body th { font-weight: 400; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); background: var(--cream); }
:lang(ar) .page__body th { font-size: 13.5px; letter-spacing: 0; }
.page__body figure.guide-fig { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; padding: 24px; background: var(--cream); }
.page__body figure.guide-fig svg { width: 100%; height: auto; color: var(--teal); }
.page__body figure.guide-fig .fig__m { color: var(--gold); }
.contact { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.contact div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact dt { color: var(--mute); }
.contact dd { margin: 0; color: var(--teal); }

/* Size guide link in the tailoring panel */
.tailor__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tailor__guide { font: 400 12.5px/1 var(--body); color: var(--gold-ink); border-bottom: 1px solid var(--line-strong); }
.tailor__guide:hover { color: var(--teal); }
@media (max-width: 760px) {
	/* Phones: each filter is one line that scrolls sideways, so the pieces stay close to the top. */
	.filters { display: grid; gap: 10px; margin-inline: calc(var(--gut) * -1); }
	.filters__group { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; padding-inline-start: var(--gut); }
	.filters__pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline-end: var(--gut); scroll-padding-inline: var(--gut); }
	.filters__pills::-webkit-scrollbar { display: none; }
	.pill--link { flex: none; height: 34px; padding: 0 11px; }
	.filters__clear { justify-self: start; margin-inline-start: var(--gut); padding: 2px 0; }
}

/* Swatch book columns: the swatch, then the section's categories (always visible). */
.sw-col { flex: none; display: grid; align-content: start; gap: 22px; width: clamp(170px, 16.5vw, 236px); }
.sw-col .sw { width: 100%; }
.sw__subs { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sw__subs a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--teal); }
.sw__subs a:hover { border-color: var(--teal); }
.sw__subs a.is-soon { color: var(--mute); }
.sw__subs small, .arch__cats small { font-size: 10.5px; letter-spacing: .08em; color: var(--gold-ink); }
:lang(ar) .sw__subs small, :lang(ar) .arch__cats small { font-size: 11.5px; letter-spacing: 0; }
.empty--cat { padding: 40px 0 80px; }
@media (max-width: 980px) {
	.sw-col { width: 100%; gap: 14px; }
	.sw__subs a { font-size: 13px; padding: 6px 0; }
}

/* --- Auctions ------------------------------------------------------------------------------ */
.live-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: #b3412f; vertical-align: middle; animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }
.au-price small { margin-inline-end: 6px; font-size: .8em; color: var(--mute); font-weight: 300; }

/* Bidding panel (product page) */
.bid { display: grid; gap: 20px; margin-top: 6px; padding: 26px; background: var(--cream); }
.bid__state { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
:lang(ar) .bid__state { font-size: 14px; letter-spacing: 0; }
.bid.is-live .bid__state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: #b3412f; vertical-align: middle; animation: live 1.6s ease-in-out infinite; }
.bid__figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bid__figures > div { display: grid; gap: 4px; padding: 16px 18px; background: var(--ivory); }
.bid__figures span { font-size: 12px; color: var(--mute); }
.bid__figures strong { font: 300 28px/1.15 var(--display); color: var(--teal); font-variant-numeric: tabular-nums; }
:lang(ar) .bid__figures strong { font-family: var(--body); font-weight: 300; font-size: 26px; }
.bid__figures small { font-size: 12px; color: var(--mute); }
.bid__note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--text); }
.bid__note:empty { display: none; }
.bid__note.is-lead { color: var(--teal); }
.bid__note.is-outbid { color: #9a3a32; }
.bid__note.is-won { padding: 14px 16px; background: var(--teal); color: var(--ivory); }
.bid__note.is-won .btn { background: var(--ivory); color: var(--teal); border-color: var(--ivory); min-height: 44px; }
.bid__form { display: grid; gap: 12px; }
.bid__form[hidden] { display: none; }
.bid__form label { display: flex; align-items: baseline; gap: 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
:lang(ar) .bid__form label { font-size: 14px; letter-spacing: 0; }
.bid__form label small { letter-spacing: 0; text-transform: none; color: var(--gold-ink); }
.bid__row { display: flex; gap: 10px; }
.bid__input { display: flex; flex: 1; align-items: center; min-width: 0; background: var(--white); border: 1px solid var(--line-strong); }
.bid__input:focus-within { border-color: var(--teal); }
.bid__input input { flex: 1; min-width: 0; height: 54px; padding: 0 14px; border: 0; outline: 0; background: transparent; font: 300 22px/1 var(--body); color: var(--teal); -moz-appearance: textfield; }
.bid__input input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bid__input span { padding: 0 14px; color: var(--mute); }
.bid__row .btn { flex: none; min-height: 56px; }
.bid__row .btn.is-confirm { background: var(--gold-ink); border-color: var(--gold-ink); }
.bid__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.bid__quick .pill { height: 36px; font-size: 13px; }
.bid__msg { min-height: 1.2em; font-size: 13.5px; color: var(--teal); }
.bid__msg.is-error { color: #9a3a32; }
.bid__guest { display: grid; gap: 12px; }
.bid__guest[hidden] { display: none; }
.bid__guest p { color: var(--mute); font-size: 14px; }
.bid__h { margin-bottom: 8px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
:lang(ar) .bid__h { font-size: 13px; letter-spacing: 0; }
.bid__history ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.bid__history li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bid__history li.is-top strong { color: var(--teal); }
.bid__history li strong { font-weight: 400; }
.bid__history time { font-size: 12px; color: var(--mute); }
.bid__terms a { font-size: 12.5px; color: var(--mute); border-bottom: 1px solid var(--line); }

/* Auction cards + page */
.au-badge { position: absolute; top: 12px; inset-inline-start: 12px; padding: 5px 10px; background: var(--teal); color: var(--ivory); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
:lang(ar) .au-badge { font-size: 12.5px; letter-spacing: 0; }
.card--auction.is-ended .au-badge { background: var(--mute); }
.card--auction.is-upcoming .au-badge { background: var(--gold-ink); }
.au-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--mute); }
.au-clock { color: var(--teal); font-variant-numeric: tabular-nums; }
.au-grid { margin-top: 8px; }
.auctions { display: grid; gap: clamp(56px, 7vw, 96px); }
.page--wide .page__body .auctions, .page__body .auctions { max-width: none; }
.au-sec__title { margin-bottom: 26px; font: 300 clamp(26px, 2.6vw, 36px)/1.2 var(--display); color: var(--teal); }
:lang(ar) .au-sec__title { font-weight: 400; }
.au-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.au-how li { display: grid; gap: 6px; align-content: start; padding: 22px 18px 22px 0; border-bottom: 1px solid var(--line); }
[dir="rtl"] .au-how li { padding: 22px 0 22px 18px; }
.au-how span { font: 300 14px/1 "IvyMode", serif; color: var(--gold-ink); letter-spacing: .1em; }
.au-how strong { font: 300 20px/1.3 var(--display); color: var(--teal); }
:lang(ar) .au-how strong { font-weight: 400; }
.au-how p { font-size: 14px; color: var(--mute); }
.au-terms { margin-top: 20px; }
.au-mine td, .au-mine th { font-size: 14px; }
@media (max-width: 900px) {
	.au-how { grid-template-columns: 1fr 1fr; }
	.bid { padding: 20px 16px; }
	.bid__figures strong { font-size: 23px; }
}
@media (max-width: 560px) {
	.bid__figures { grid-template-columns: 1fr; }
	.bid__row { flex-direction: column; }
	.au-how { grid-template-columns: 1fr; }
}
.bid__clock strong { font-size: 22px; white-space: nowrap; }
:lang(ar) .bid__clock strong { font-size: 21px; }