/* ============================================================
   Ella Couture
   The logo's two colours lead: a deep burgundy and a warm cream, on a soft paper ground.
   One family in two scripts: Outfit for English, GE SS Two for Arabic
   (IBM Plex Sans Arabic stands in until the licensed GE SS files are in fonts/ge-ss/).
   Burgundy marks what matters: the order, the chosen size, a title's second line.
   The look is an atelier's: straight edges, a hairline mount just inside every photo, tracked
   capitals on buttons and labels, a tailor's pattern paper behind the measurements, and the
   burgundy laid edge to edge at the top and the foot of the home page.
   Movement is slow and small, and stops for anyone who asks for less motion.
   ============================================================ */
/* ---- "Ella Sans": Outfit for Latin, GE SS Two for Arabic, chosen per letter by unicode-range ---- */
@font-face { font-family: "Ella Sans"; src: url("../fonts/outfit/outfit-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/outfit/outfit-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ella Sans"; src: url("../fonts/outfit/outfit-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/outfit/outfit-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* GE SS Two is a licensed typeface. Put its files in fonts/ge-ss/ (ge-ss-two-light / -medium / -bold, .woff2 or
   .otf) and run the generator: it writes the rules between these markers with whichever files are there. Until then
   only a copy installed on the visitor's own device is used, and Arabic falls back to IBM Plex Sans Arabic below. */
/* ge-ss:start (GENERATED by build-scripts/generate-piece-pages.mjs) */
@font-face { font-family: "Ella Sans"; src: local("GE SS Two Light"), local("GESSTwoLight-Light"); font-weight: 100 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Ella Sans"; src: local("GE SS Two Medium"), local("GESSTwoMedium-Medium"); font-weight: 500 600; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Ella Sans"; src: local("GE SS Two Bold"), local("GESSTwoBold-Bold"); font-weight: 700 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
/* ge-ss:end */
/* the Arabic stand-in (SIL Open Font License, fonts/plex-arabic/OFL.txt) */
@font-face { font-family: "Ella Arabic"; src: url("../fonts/plex-arabic/IBMPlexSansArabic-400-arabic.woff2") format("woff2"); font-weight: 100 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Ella Arabic"; src: url("../fonts/plex-arabic/IBMPlexSansArabic-500-arabic.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Ella Arabic"; src: url("../fonts/plex-arabic/IBMPlexSansArabic-600-arabic.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --clay:   #470916;    /* Ella burgundy, taken from the logo */
  --blush:  #8C4A57;    /* the burgundy, softened */
  --sienna: #6B1A2A;
  --ivory:  #E9DCCC;    /* the logo's cream */
  --paper:  #F6F1EA;    /* cream paper */
  --ink:    #261216;
  --clay-deep: #2E050E;
  --clay-text: #470916; /* burgundy for text and the order button */
  --rose:   #EFE6DB;    /* cream laid over paper, for panels */
  --rose-2: #E9DCCC;    /* the cream itself, for chosen tabs and soft chips */
  --rosewood: #470916;  /* the footer: the logo's own burgundy */
  --line: rgba(38, 18, 22, 0.14);
  --ink-soft: rgba(38, 18, 22, 0.72);
  --ink-mute: rgba(38, 18, 22, 0.56);

  --sans: "Ella Sans", "Ella Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);
  --serif: var(--sans);
  --body: var(--sans);

  --fs-display: clamp(46px, 5vw, 76px);    /* hero line + piece number */
  --fs-title: clamp(30px, 3.1vw, 44px);    /* section and page titles */

  /* straight edges: photos sit in a mount (a hairline just inside the edge), never in a curve */
  --mount: rgba(250, 246, 240, .62);   /* the mount line over a photo */
  --hair: rgba(71, 9, 22, .2);         /* the mount line over cream (no photo yet) */
  --r-soft: 2px;
  /* a tailor's pattern paper: a fine burgundy grid (behind the measurement sketches) */
  --pattern: linear-gradient(rgba(71, 9, 22, .065) 1px, transparent 1px) -1px -1px / 24px 24px, linear-gradient(90deg, rgba(71, 9, 22, .065) 1px, transparent 1px) -1px -1px / 24px 24px, var(--paper);
  --r-chip: 0;                         /* chips, tabs and buttons are square-cornered */

  --maxw: 1360px;
  --gutter: clamp(16px, 4.2vw, 56px);
  --header: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
svg text { font-family: var(--body); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--body); font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
html[lang="ar"] body { font-weight: 400; line-height: 1.85; }
/* Arabic never takes letter-spacing: it breaks the joins */
html[lang="ar"] * { letter-spacing: 0 !important; }
img { max-width: 100%; display: block; }
picture { display: contents; }
picture source { display: none; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--clay-text); outline-offset: 3px; border-radius: 2px; }
.site-footer :focus-visible { outline-color: var(--ivory); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.reveal { /* content is never hidden waiting for a script */ }

/* ---- Type ---- */
.display { font-family: var(--display); font-weight: 300; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.title { font-family: var(--display); font-weight: 300; font-size: var(--fs-title); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.accent { color: var(--clay-text); }
.label, .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
html[lang="ar"] .display { line-height: 1.38; font-weight: 500; }
html[lang="ar"] .title { line-height: 1.45; font-weight: 500; }
html[lang="ar"] .label, html[lang="ar"] .eyebrow { text-transform: none; font-size: 15px; }
/* Arabic pages never need the light weight: the close buttons use the regular one */
html[lang="ar"] :is(.menu-close, .wish-close, .lb-close) { font-weight: 400; }

.link, .link-underline { display: inline-flex; gap: .45em; align-items: baseline; border-bottom: 1px solid currentColor; padding-bottom: 2px; font-size: 16px; font-weight: 400; transition: color .2s; }
.link:hover, .link-underline:hover { color: var(--clay-text); }
.link .arrow { transition: transform .35s var(--ease); }
.link:hover .arrow { transform: translateX(5px); }
html[dir="rtl"] .link:hover .arrow { transform: scaleX(-1) translateX(5px); }
/* arrows are drawn (the typeface has no arrow glyphs), and mirror in Arabic */
.arrow { display: inline-block; width: 1.05em; height: .62em; position: relative; top: -.08em; flex: 0 0 auto; align-self: center; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 10'%3E%3Cpath d='M0 5h15.6M11.6 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.25'/%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 17 10'%3E%3Cpath d='M0 5h15.6M11.6 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / contain no-repeat; }
.arrow.back, html[dir="rtl"] .arrow { transform: scaleX(-1); }
html[dir="rtl"] .arrow.back { transform: none; }

/* ---- Buttons: square-cornered, in tracked capitals; the only solid button is the order ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 54px; padding: 0 32px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--r-chip); border: 1px solid transparent; text-align: center; transition: background .25s, color .25s, border-color .25s, transform .2s var(--ease); }
html[lang="ar"] .btn { font-size: 16px; text-transform: none; }
.btn:active { transform: scale(.98); }
.btn-solid { background: var(--clay-text); color: var(--paper); }
.btn-solid:hover { background: var(--clay-deep); }
.btn-solid[aria-disabled="true"] { background: var(--rose-2); color: var(--ink-soft); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--clay-text); border-color: var(--clay-text); color: var(--paper); }
.btn.full { width: 100%; }

/* ---- Skip link ---- */
/* the owner's announcement line (admin page → Settings) */
.notice-bar { background: var(--rosewood); color: var(--ivory); text-align: center; font-size: 13.5px; line-height: 1.45; padding: 8px var(--gutter); text-wrap: balance; }
html[lang="ar"] .notice-bar { font-size: 14.5px; }
.skip-link { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3000; background: var(--ink); color: var(--ivory); padding: 10px 16px; border-radius: 2px; font-size: 14px; transform: translateY(-200%); transition: transform .2s; }
.skip-link:focus-visible { transform: none; }

/* ---- Header ---- */
.hdr { position: sticky; top: 0; z-index: 100; background: rgba(246, 241, 234, .97); box-shadow: inset 0 3px 0 var(--clay); border-bottom: 1px solid var(--line); transition: transform .3s var(--ease); }
.hdr.hide { transform: translateY(-100%); }
.hdr-row { height: var(--header); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.lockup { display: inline-flex; align-items: center; gap: 11px; justify-self: start; }
.lockup img { height: 34px; width: auto; }
.lockup .wm { font-weight: 400; font-size: 12.5px; letter-spacing: .34em; color: var(--clay-text); }
.lockup .wm-ar { display: none; font-family: var(--display); font-weight: 500; font-size: 19px; color: var(--clay-text); }
html[lang="ar"] .lockup .wm-en { display: none; }
html[lang="ar"] .lockup .wm-ar { display: inline; }
.nav { display: flex; gap: clamp(18px, 2.2vw, 30px); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.nav a { padding-block: 10px; background: linear-gradient(var(--clay), var(--clay)) 50% 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease), color .2s; }
.nav a:hover { color: var(--clay-text); background-size: 100% 1.5px; }
.nav a[aria-current] { background-image: linear-gradient(var(--ink), var(--ink)); background-size: 100% 1.5px; }
.hdr-end { justify-self: end; display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 400; white-space: nowrap; }
.hdr-end > a, .hdr-end > button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.hdr-end > a.hide-sm { font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.hdr-end [aria-current] { box-shadow: inset 0 -1px 0 var(--ink); }
.hdr-end > .lang-toggle { border: 1px solid var(--line); border-radius: var(--r-chip); min-height: 36px; padding-inline: 14px; transition: border-color .2s, background .2s; }
.hdr-end > .lang-toggle:hover { border-color: var(--clay); background: var(--rose); }
html[lang="ar"] .nav, html[lang="ar"] .hdr-end, html[lang="ar"] .hdr-end > a.hide-sm, html[lang="ar"] .subnav { font-size: 16px; font-weight: 400; }
/* wide screens: the house mark in the middle, stacked over its name; the collections on one side, help and language on the other */
@media (min-width: 901px) {
  .hdr-row > .nav { grid-column: 1; grid-row: 1; justify-self: start; }
  .hdr-row > .lockup { grid-column: 2; grid-row: 1; justify-self: center; flex-direction: column; gap: 5px; }
  .hdr-row > .hdr-end { grid-column: 3; grid-row: 1; }
  .lockup img { height: 30px; }
  .lockup .wm { font-size: 10px; letter-spacing: .46em; margin-inline-start: .46em; }
  .lockup .wm-ar { font-size: 15px; line-height: 1; }
}
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.saved { position: relative; min-width: 28px; }
.saved.has-items .icon { fill: var(--clay-text); stroke: var(--clay-text); }
.wish-count { position: absolute; top: 4px; inset-inline-end: -8px; min-width: 17px; height: 17px; padding-inline: 4px; display: grid; place-items: center; border-radius: 100px; background: var(--ink); color: var(--ivory); font-size: 11px; font-weight: 500; line-height: 1; }
.hdr-end .wa-sm { display: none; width: 44px; }
.wa-sm svg { width: 22px; height: 22px; fill: var(--clay-text); }
.hdr-end .menu-btn { display: none; width: 44px; height: 44px; position: relative; }
.menu-btn::before, .menu-btn::after { content: ""; position: absolute; inset-inline: 9px; height: 1.5px; background: var(--ink); }
.menu-btn::before { top: 16px; } .menu-btn::after { bottom: 16px; }
.subnav { display: none; }

/* ---- Mobile menu ---- */
.mobile-menu { position: fixed; inset: 0; z-index: 1300; background: var(--rosewood); color: var(--ivory); padding: 84px var(--gutter) 32px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; }
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a, .mobile-menu .mm-btn { font-family: var(--display); font-size: 30px; line-height: 1.2; padding-block: 8px; text-align: start; }
.mobile-menu.open > * { animation: rise .55s var(--ease) both; }
.mobile-menu.open > :nth-child(2) { animation-delay: .04s; } .mobile-menu.open > :nth-child(3) { animation-delay: .08s; }
.mobile-menu.open > :nth-child(4) { animation-delay: .12s; } .mobile-menu.open > :nth-child(5) { animation-delay: .16s; }
.mobile-menu.open > :nth-child(6) { animation-delay: .2s; } .mobile-menu.open > :nth-child(n+7) { animation-delay: .24s; }
html[lang="ar"] .mobile-menu a, html[lang="ar"] .mobile-menu .mm-btn { font-weight: 500; }
.mobile-menu .mm-gap { height: 18px; border-top: 1px solid rgba(233, 220, 204, .2); margin-top: 14px; }
.mobile-menu .mm-small { font-family: var(--body); font-size: 17px; font-weight: 400; color: rgba(233, 220, 204, .74); }
.mobile-menu :focus-visible { outline-color: var(--ivory); }
.mobile-menu .menu-close { position: absolute; top: 6px; inset-inline-end: calc(var(--gutter) - 8px); width: 44px; height: 44px; font-size: 30px; line-height: 1; font-weight: 300; }
.mobile-menu .lang-toggle { align-self: flex-start; margin-top: 10px; border: 1px solid rgba(233, 220, 204, .5); border-radius: var(--r-chip); padding: 9px 20px; font-size: 16px; font-weight: 400; }

/* ---- Wishlist panel ---- */
.wish-panel { position: fixed; top: calc(var(--header) + 8px); inset-inline-end: var(--gutter); z-index: 1200; width: min(340px, calc(100vw - 24px)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-soft); box-shadow: 0 30px 60px -30px rgba(38, 18, 22, .5); padding: 20px; animation: rise .35s var(--ease) both; }
.wish-panel-title { font-family: var(--display); font-size: 24px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.wish-close { font-size: 24px; line-height: 1; width: 32px; height: 32px; font-weight: 300; }
.wish-items { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; margin-bottom: 14px; }
.wish-empty { font-size: 15px; color: var(--ink-soft); }
.wish-item { display: flex; align-items: center; gap: 10px; }
.wish-item a { display: flex; align-items: center; gap: 12px; flex: 1; }
.wish-item img { width: 44px; height: 66px; object-fit: cover; background: var(--ivory); }
.wish-item span { font-family: var(--display); font-size: 19px; }
.wish-x { font-size: 20px; color: var(--ink-soft); width: 36px; height: 36px; }

/* ---- Product stage + card ---- */
/* every product photo sits in a straight-edged mount: a hairline just inside its edge (the photo itself is untouched) */
.stage { position: relative; aspect-ratio: 2 / 3; background: var(--rose); overflow: hidden; isolation: isolate; }
.stage::after { content: ""; position: absolute; inset: 9px; z-index: 1; border: 1px solid var(--mount); pointer-events: none; transition: inset .6s var(--ease); }
.stage:has(img.ph)::after { border-color: var(--hair); }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 1.1s var(--ease); }
.stage .alt { opacity: 0; transition: opacity .45s var(--ease), transform 1.1s var(--ease); }
@media (hover: hover) {
  .card:hover .stage .alt { opacity: 1; }
  .card:hover .stage img { transform: scale(1.045); }
  .card:hover .stage::after { inset: 14px; }
}
.card { min-width: 0; position: relative; }
.card > a { display: block; }
.card .stage { margin-bottom: 14px; }
/* the number and the price, joined by a dotted leader, as on a price list */
.card-row { display: flex; align-items: baseline; gap: 10px; }
.card-row::after { content: ""; order: 1; flex: 1 1 auto; min-width: 16px; align-self: center; border-top: 1px dotted rgba(38, 18, 22, .38); }
.card .num { order: 0; font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.15; letter-spacing: .01em; font-feature-settings: "lnum"; transition: color .2s; }
.card a:hover .num { color: var(--clay-text); }
html[lang="ar"] .card .num { font-weight: 500; }
.card .price { order: 2; font-size: 15px; font-weight: 400; white-space: nowrap; }
.card .price.sold { color: var(--ink-soft); }
.card .desc { font-size: 14px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }
.card .tones { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; color: var(--ink-soft); }
.card .tones i { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px rgba(38, 18, 22, .28); flex: 0 0 auto; }
html[lang="ar"] .card .desc { font-size: 15px; line-height: 1.65; }
html[lang="ar"] .card .tones { font-size: 14px; }
/* "New" is a burgundy label in the photo's top corner, over the mount */
.tag { position: absolute; top: 0; inset-inline-start: 0; z-index: 2; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); background: var(--clay); padding: 7px 11px 6px; line-height: 1.2; }
html[lang="ar"] .tag { text-transform: none; font-size: 13px; padding: 4px 12px 5px; }
.heart { position: absolute; top: 6px; inset-inline-end: 6px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); z-index: 2; background: rgba(246, 241, 234, .9); transition: transform .25s var(--ease); }
.heart:hover { transform: scale(1.12); }
.heart.active .icon, .wish-btn.active .icon { fill: var(--clay-text); stroke: var(--clay-text); }
.heart.active .icon { animation: heartbeat .5s var(--ease); }

/* ---- Home ---- */
/* Hero: the logo's burgundy from edge to edge, inside a cream hairline mount; the calligraphy on top,
   then the line in two voices, all on the centre line */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center;
  min-height: min(calc(100svh - var(--header)), 760px); padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(64px, 8.5vw, 112px); color: var(--ivory);
  background: radial-gradient(70% 90% at 50% 0%, #63172B 0%, rgba(99, 23, 43, 0) 70%), var(--rosewood); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: clamp(10px, 1.6vw, 22px); border: 1px solid rgba(233, 220, 204, .26); pointer-events: none; }
.hero-copy { display: grid; justify-items: center; gap: 22px; max-width: 820px; }
.hero-copy .display > span { display: block; }
@media (min-width: 901px) { .hero-copy .display > span { white-space: nowrap; } }
.hero .display { color: var(--ivory); }
.hero .accent { color: #D9B3A5; }
.hero-copy .lede { font-size: 18px; color: rgba(233, 220, 204, .82); max-width: 42ch; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 6px; }
.hero .btn-line { border-color: var(--ivory); background: var(--ivory); color: var(--clay-text); }
.hero .btn-line:hover { background: transparent; color: var(--ivory); }
.hero .link { color: var(--ivory); }
.hero .link:hover { color: #fff; }
.hero :focus-visible { outline-color: var(--ivory); }
html[lang="ar"] .hero .display { font-weight: 700; line-height: 1.32; }
.hero-media { order: -1; position: relative; display: block; margin-bottom: clamp(30px, 4vw, 46px); }
.hero-media img { display: block; width: 100%; height: auto; }
.hero-brand img { width: min(360px, 62vw); height: auto; object-fit: contain; }
/* a piece named under the words (CONFIG.heroPiece) */
.shown { order: 2; margin-top: 30px; border: 1px solid rgba(233, 220, 204, .34); padding: 10px 18px; display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: rgba(233, 220, 204, .8); transition: border-color .3s var(--ease); }
.shown:hover { border-color: var(--ivory); }
.shown b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ivory); line-height: 1; }
html[lang="ar"] .shown { font-size: 15px; }
html[lang="ar"] .shown b { font-weight: 500; }

.sec { padding-block: clamp(56px, 7vw, 100px); }
.sec.tight { padding-top: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 30px; padding-top: 20px; border-top: 1px solid var(--ink); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.mtm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
/* the sketch lies on a tailor's pattern paper: a fine burgundy grid, with corner marks */
.mtm-art { position: relative; display: grid; justify-items: center; gap: 22px; padding: clamp(44px, 5.5vw, 72px) 36px 36px; border: 1px solid var(--line);
  background: var(--pattern); }
.mtm-art::before, .mtm-art::after { content: ""; position: absolute; width: 26px; height: 26px; border: 0 solid var(--clay); pointer-events: none; }
.mtm-art::before { top: 12px; inset-inline-start: 12px; border-block-start-width: 1.5px; border-inline-start-width: 1.5px; }
.mtm-art::after { bottom: 12px; inset-inline-end: 12px; border-block-end-width: 1.5px; border-inline-end-width: 1.5px; }
.mtm-art svg { width: 100%; max-width: 280px; height: auto; }
.mtm-art .m-chip { r: 16; }
.mtm-art .m-txt { font-size: 17px; }
.legend { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; font-size: 14px; color: var(--ink-soft); width: 100%; max-width: 380px; }
.legend b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--clay); background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 500; margin-inline-end: 8px; }
html[lang="ar"] .legend { font-size: 15px; }
.mtm-copy { display: grid; gap: 18px; max-width: 46ch; }
.mtm-copy p { color: var(--ink-soft); font-size: 17px; }
.mtm-links { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 6px; }

/* sketch arrows (home legend art + order page) */
.m-arrow { color: var(--clay); transition: color .3s; }
.m-arrow > path:first-of-type { stroke: currentColor; stroke-width: 2; stroke-dasharray: 7 6; fill: none; }
.m-arrow .m-head, .m-arrow .m-dot { fill: currentColor; }
.m-arrow .m-tick { stroke: currentColor; stroke-width: 1.5; stroke-opacity: .5; fill: none; }   /* guide lines down to the shoulder tips */
.m-arrow .m-chip { fill: var(--paper); stroke: currentColor; stroke-width: 1.5; }
.m-arrow .m-txt { fill: var(--ink); font-family: var(--body); font-size: 13px; text-anchor: middle; }
.m-arrow.active { color: var(--clay-deep); }
.m-arrow.active > path:first-of-type { stroke-width: 3.5; stroke-dasharray: none; }
#measureSketch [data-m] { cursor: pointer; }
.m-arrow .m-hit { fill: transparent; }
.m-arrow.done .m-chip { fill: var(--clay-text); stroke: var(--clay-text); }
.m-arrow.done .m-txt { fill: var(--ivory); }

/* ---- Service band ---- */
.service { background: var(--rose); border-top: 1px solid var(--line); }
.service .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: svc; }
.service a { position: relative; padding: 42px 28px 40px; border-inline-start: 1px solid rgba(71, 9, 22, .16); display: grid; gap: 8px; align-content: start; counter-increment: svc; }
.service a:first-child { border-inline-start: 0; padding-inline-start: 0; }
/* each step carries its number: 01, 02, 03 */
.service a::before { content: counter(svc, decimal-leading-zero); font-size: 12.5px; font-weight: 500; letter-spacing: .18em; color: var(--clay-text); margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--clay); width: fit-content; transition: padding .45s var(--ease); }
.service a:hover::before { padding-inline-end: 40px; }
.service strong { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; transition: color .2s; }
.service a:hover strong { color: var(--clay-text); }
.service span { font-size: 15px; color: var(--ink-soft); }
html[lang="ar"] .service strong { font-weight: 500; }
html[lang="ar"] .service span { font-size: 16px; }

/* ---- Footer ---- */
.site-footer { background: radial-gradient(80% 120% at 100% 100%, #68182A 0%, rgba(104, 24, 42, 0) 60%), var(--rosewood); color: var(--ivory); padding-block: 56px 28px; }
.site-footer .wrap { display: flex; flex-direction: column; }
.site-footer .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; text-align: center; }
.site-footer .cols > :first-child { display: none; }   /* the tagline column: the hero already says it */
.site-footer h2 { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(233, 220, 204, .76); margin-bottom: 14px; }
html[lang="ar"] .site-footer h2 { text-transform: none; font-size: 15px; }
.site-footer ul { list-style: none; display: grid; gap: 2px; font-size: 15px; }
.site-footer li > a { display: inline-block; padding-block: 5px; color: rgba(233, 220, 204, .86); }
.site-footer li > a:hover { color: var(--ivory); }
.site-footer li { color: rgba(233, 220, 204, .86); padding-block: 5px; }
.site-footer li:has(> a) { padding-block: 0; }
html[lang="ar"] .site-footer ul { font-size: 16px; }
/* the calligraphy and the name head the footer, on the centre line */
.site-footer .big { order: -1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 36px; border-bottom: 1px solid rgba(233, 220, 204, .18); }
.site-footer .big .wm { font-family: var(--display); font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: .52em !important; margin-inline-start: .52em; color: rgba(233, 220, 204, .8); }
.site-footer .big .wm-logo { order: -1; height: clamp(64px, 8vw, 104px); width: auto; flex: 0 0 auto; opacity: .95; }
.site-footer .fine { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(233, 220, 204, .18); font-size: 13px; color: rgba(233, 220, 204, .76); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
html[lang="ar"] .site-footer .fine { font-size: 14px; }

/* ---- Floating WhatsApp (desktop; phones use the header icon) ---- */
.float-wa { position: fixed; bottom: 22px; inset-inline-end: 22px; width: 54px; height: 54px; background: var(--clay-text); display: grid; place-items: center; z-index: 90; box-shadow: 0 14px 34px -14px rgba(38, 18, 22, .6); transition: transform .3s var(--ease); }
.float-wa:hover { transform: translateY(-3px) scale(1.04); }
/* one soft ring a few seconds after arrival, then it rests */
.float-wa::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(233, 220, 204, .42); pointer-events: none; }
.float-wa::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--clay); opacity: 0; animation: ring 1.8s 2.4s var(--ease) 2 both; pointer-events: none; }
.float-wa svg { width: 26px; height: 26px; fill: var(--paper); }
body[data-page="piece"] .float-wa, body[data-page="order"] .float-wa { display: none; }

/* ---- Collection ---- */
.col-head { padding-block: 32px 8px; display: grid; gap: 10px; }
.title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.title-row h1 sup { font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--ink-soft); vertical-align: top; margin-inline-start: 6px; position: relative; top: 2px; font-feature-settings: "tnum"; }
.col-head .lede { color: var(--ink-soft); max-width: 62ch; font-size: 16px; }
html[lang="ar"] .col-head .lede { font-size: 17px; }
.views { display: flex; align-items: center; gap: 2px; }
.views button { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-mute); }
.views button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink); }
.views svg { width: 18px; height: 18px; fill: currentColor; }
.tabs { position: sticky; top: var(--header); z-index: 15; background: rgba(246, 241, 234, .96); display: flex; gap: clamp(16px, 2.2vw, 28px); padding-top: 6px; border-bottom: 1px solid var(--line); margin-bottom: 28px; transition: top .3s var(--ease); }
body.hdr-hidden .tabs { top: 0; }
/* the tabs are words on the rule, the chosen one underlined in burgundy */
.tabs button { height: 46px; padding-inline: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--ink-soft); box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .25s; }
.tabs button small { font-size: 11px; letter-spacing: 0; color: var(--ink-soft); font-feature-settings: "tnum"; }
.tabs button:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--line); }
.tabs button[aria-pressed="true"] { color: var(--clay-text); box-shadow: inset 0 -2px 0 var(--clay); }
.tabs button[aria-pressed="true"] small { color: var(--clay-text); }
html[lang="ar"] .tabs button { font-size: 16px; font-weight: 400; text-transform: none; }
html[lang="ar"] .tabs button small { font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 18px; padding-bottom: 72px; }
.grid[data-view="large"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid[data-view="sheet"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 10px; }
.grid[data-view="sheet"] .desc, .grid[data-view="sheet"] .tones, .grid[data-view="sheet"] .price, .grid[data-view="sheet"] .heart, .grid[data-view="sheet"] .edit { display: none; }
.grid[data-view="sheet"] .card .stage { margin-bottom: 6px; }
.group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.group:first-child { border-top: 0; padding-top: 0; }
.group h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; }
html[lang="ar"] .group h2 { font-weight: 500; line-height: 1.45; }
.group p { color: var(--ink-soft); font-size: 15px; }
.edit { grid-column: span 2; grid-row: span 2; position: relative; display: block; background: var(--rose); overflow: hidden; min-height: 320px; isolation: isolate; }
.edit::after { content: ""; position: absolute; inset: 12px; border: 1px solid var(--mount); pointer-events: none; }
.edit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 1.4s var(--ease); }
.edit:hover img { transform: scale(1.04); }
.edit .cap { position: absolute; z-index: 1; bottom: 24px; inset-inline-start: 24px; inset-inline-end: 24px; width: fit-content; max-width: calc(100% - 48px); background: rgba(246, 241, 234, .95); border-radius: var(--r-chip); padding: 10px 20px; font-size: 14px; display: flex; gap: 12px; align-items: baseline; }
.edit .cap b { font-family: var(--display); font-weight: 400; font-size: 22px; }
html[lang="ar"] .edit .cap { font-size: 15px; }

/* ---- Piece page ---- */
.pp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); padding-block: 24px 64px; }
/* the piece is drawn by script: hold its room so the footer never jumps up and back down */
#pieceRoot { min-height: calc(100svh - var(--header)); }
.gallery-wrap { position: relative; min-width: 0; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gallery figure { position: relative; aspect-ratio: 2 / 3; background: var(--rose); overflow: hidden; cursor: zoom-in; isolation: isolate; }
.gallery figure::after { content: ""; position: absolute; inset: 12px; z-index: 1; border: 1px solid var(--mount); pointer-events: none; }
.gallery figure:has(img.ph)::after { border-color: var(--hair); }
.gallery figure.wide { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .gallery figure:hover img { transform: scale(1.03); } }
.gallery figure.wide img { object-position: 50% 22%; }
.count { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; font-size: 13px; background: rgba(246, 241, 234, .92); border-radius: var(--r-chip); padding: 4px 12px; font-feature-settings: "tnum"; display: none; }
html[lang="ar"] .count { font-size: 14px; }
.zoom { position: absolute; bottom: 12px; inset-inline-end: 12px; z-index: 2; width: 44px; height: 44px; background: rgba(246, 241, 234, .92); display: grid; place-items: center; }
.zoom svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.6; }

.info { position: sticky; top: calc(var(--header) + 24px); align-self: start; display: grid; gap: 20px; min-width: 0; }
.crumb { font-size: 14px; color: var(--ink-soft); }
.crumb a { border-bottom: 1px solid var(--line); }
.crumb a:hover { border-color: var(--ink); }
html[lang="ar"] .crumb { font-size: 15px; }
.titlebar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.titlebar h1 { line-height: .9; }
.titlebar h1.named { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.005em; }
html[lang="ar"] .titlebar h1 { line-height: 1.1; }
html[lang="ar"] .titlebar h1.named { line-height: 1.4; font-weight: 500; }
.titlebar .price { font-size: 21px; font-weight: 400; padding-bottom: 6px; white-space: nowrap; }
.titlebar .tag { position: static; display: inline-block; margin-inline-start: 14px; vertical-align: middle; font-family: var(--body); }
.descriptor { font-size: 15px; color: var(--ink-soft); margin-top: -10px; }
html[lang="ar"] .descriptor { font-size: 16px; }
/* the description is set in the body face, like every other paragraph (one font file fewer to fetch) */
.blurb { font-size: 17.5px; line-height: 1.65; max-width: 44ch; color: var(--ink); }
html[lang="ar"] .blurb { line-height: 1.9; }
.soldout-note { background: var(--rose); border-inline-start: 2px solid var(--clay); border-radius: 4px var(--r-soft) var(--r-soft) 4px; padding: 12px 18px; font-size: 15px; }
html[dir="rtl"] .soldout-note { border-radius: var(--r-soft) 4px 4px var(--r-soft); }
fieldset { border: 0; min-width: 0; }
.opt-head { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.which { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; }
html[lang="ar"] .which { font-size: 15px; }
.sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sizes label, .tone-opts label { position: relative; cursor: pointer; }
.sizes input, .tone-opts input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sizes span { height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-chip); font-size: 15px; font-weight: 400; font-feature-settings: "tnum"; transition: border-color .2s, background .25s, color .2s, transform .2s var(--ease); }
.sizes label:hover span { border-color: var(--clay); background: var(--rose); }
.sizes input:checked + span { border-color: var(--clay-text); background: var(--clay-text); color: var(--paper); font-weight: 500; animation: pop .35s var(--ease); }
.tone-opts input:checked + span { border-color: var(--clay-text); background: var(--rose); box-shadow: inset 0 0 0 1px var(--clay-text); font-weight: 500; }
.sizes input:focus-visible + span, .tone-opts input:focus-visible + span { outline: 2px solid var(--clay-text); outline-offset: 2px; }
.sizes.nudge { animation: sizeNudge .45s var(--ease); }
/* lengths with none left (stock counted in the admin page) */
.sizes input:disabled { cursor: not-allowed; }
.sizes input:disabled + span { color: var(--ink-mute); text-decoration: line-through; border-style: dashed; background: none; }
.sizes label:hover input:disabled + span { border-color: var(--line); background: none; }
.size-out { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; }
.size-out[hidden] { display: none; }
.sizes.nudge span { border-color: var(--clay); }
@keyframes sizeNudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.tone-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tone-opts span { min-height: 48px; padding: 0 18px 0 12px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--r-chip); font-size: 15px; font-weight: 400; transition: border-color .2s, background .25s; }
.tone-opts label:hover span { border-color: var(--clay); }
html[dir="rtl"] .tone-opts span { padding: 0 12px 0 18px; }
.tone-opts i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px rgba(38, 18, 22, .28); flex: 0 0 auto; }
.tone-opts input:disabled + span { color: var(--ink-mute); text-decoration: line-through; }
.tone-opts input:disabled { cursor: not-allowed; }
.fit { font-size: 14.5px; color: var(--ink-soft); margin-top: 12px; line-height: 1.6; }
.ask { font-size: 14.5px; margin-top: 6px; }
.ask a { text-decoration: underline; text-underline-offset: 4px; }
html[lang="ar"] .fit, html[lang="ar"] .ask { font-size: 15px; }
.order-row { display: grid; grid-template-columns: 1fr 52px; gap: 8px; }
.wish-btn { border: 1px solid var(--line); display: grid; place-items: center; min-height: 52px; transition: border-color .2s, background .2s; }
.wish-btn:hover { border-color: var(--clay); background: var(--rose); }
.order-note { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; }
html[lang="ar"] .order-note { font-size: 14.5px; }
/* "Not your length?" sits under the order button as a button of the same size (it lines up with it, beside the heart) */
.mtm-btn { display: flex; width: calc(100% - 60px); margin-top: 12px; }
.facts { list-style: none; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); }
.facts li b { color: var(--ink); font-weight: 500; }
html[lang="ar"] .facts li { font-size: 15px; grid-template-columns: 90px 1fr; }
.worn { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-soft); padding: 8px; padding-inline-end: 14px; min-height: 72px; cursor: pointer; transition: border-color .2s, background .2s; }
.worn:hover { border-color: var(--clay); }
.worn:has(input:checked) { background: var(--rose); border-color: var(--clay); }
.worn img { width: 56px; height: 70px; object-fit: cover; background: var(--ivory); }
.worn .t { font-size: 15px; line-height: 1.35; }
.worn .t small { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
html[lang="ar"] .worn .t { line-height: 1.6; }
html[lang="ar"] .worn .t small { font-size: 14px; }
.worn .add { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.worn input { width: 22px; height: 22px; accent-color: var(--clay-text); }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; min-height: 50px; display: flex; justify-content: space-between; align-items: center; font-size: 15.5px; font-weight: 400; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--clay-text); font-size: 20px; line-height: 1; transition: transform .3s var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc summary:hover { color: var(--clay-text); }
.acc .body { padding-bottom: 16px; font-size: 14.5px; color: var(--ink-soft); display: grid; gap: 10px; }
.acc .body a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
html[lang="ar"] .acc summary { font-size: 16.5px; }
html[lang="ar"] .acc .body { font-size: 15px; }
.guide { width: 100%; border-collapse: collapse; font-size: 14px; font-feature-settings: "tnum"; }
.guide th, .guide td { text-align: start; padding: 7px 0; border-top: 1px solid var(--line); font-weight: 400; }
.guide th { color: var(--ink-soft); font-weight: 500; }

/* how to order + IBAN */
.pay-block { background: var(--rose); border-radius: var(--r-soft); padding: 20px 22px 22px; }
.pay-title { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
html[lang="ar"] .pay-title { text-transform: none; font-size: 15px; }
/* pay in full or half now (piece page) */
.pay-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.pay-choice label { position: relative; cursor: pointer; }
.pay-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pay-choice span { display: grid; gap: 2px; min-height: 52px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-soft); background: var(--paper); font-size: 14.5px; line-height: 1.35; }
.pay-choice b { font-weight: 500; }
.pay-choice input:checked + span { border-color: var(--clay-text); box-shadow: inset 0 0 0 1px var(--clay-text); }
.pay-choice input:focus-visible + span { outline: 2px solid var(--clay-text); outline-offset: 2px; }
.pay-note { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 14px; }
.pay-steps { list-style: none; counter-reset: pay; display: grid; gap: 8px; margin-bottom: 16px; }
.pay-steps li { counter-increment: pay; display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 15px; line-height: 1.55; }
.pay-steps li::before { content: counter(pay); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--clay); color: var(--clay-text); font-size: 12px; line-height: 1; }
.iban { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-soft); padding: 14px 16px; }
.iban-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.iban-label { font-size: 12px; letter-spacing: .14em; color: var(--ink-soft); }
.iban-copy { border: 1px solid var(--ink); border-radius: var(--r-chip); padding: 6px 16px; min-height: 36px; font-size: 13.5px; }
.iban-copy:hover, .iban-copy.done { background: var(--ink); color: var(--paper); }
.iban-num { font-size: 16.5px; letter-spacing: .06em !important; margin-top: 7px; word-break: break-all; text-align: start; unicode-bidi: isolate; }
html[dir="rtl"] .iban-num { text-align: end; }
.iban-meta { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }

/* pager */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-block: 18px 56px; }
.pager a { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.pager a:last-child { justify-content: flex-end; }
.pager img { width: 48px; height: 72px; object-fit: cover; background: var(--ivory); }
.pager b { font-family: var(--display); font-weight: 400; font-size: 24px; transition: color .2s; }
.pager a:hover b { color: var(--clay-text); }
.pager .mid { font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
html[lang="ar"] .pager .mid { font-size: 15.5px; }

/* not found */
.piece-notfound { grid-column: 1 / -1; text-align: center; padding: clamp(48px, 8vw, 96px) 0; display: grid; gap: 16px; justify-items: center; }
.piece-notfound p { color: var(--ink-soft); }

/* sticky order bar (phones) */
.bar { display: none; }

/* zoom viewer */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: var(--rose); overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.lightbox img { width: min(200vw, 1900px); max-width: none; margin-inline: auto; }
.lightbox .lb-close { position: fixed; top: 12px; inset-inline-end: 12px; width: 48px; height: 48px; background: var(--paper); font-size: 28px; line-height: 1; font-weight: 300; z-index: 1; box-shadow: 0 8px 24px -12px rgba(38, 18, 22, .5); }

/* ============================================================
   Info pages (Good to Know) + made-to-measure order page
   ============================================================ */
.page-hero { max-width: 820px; margin-inline: auto; padding: clamp(36px, 6vw, 72px) var(--gutter) clamp(20px, 3vw, 32px); text-align: center; display: grid; gap: 14px; justify-items: center; }
/* a short burgundy rule over the page title, a hairline under the whole head */
.page-hero { position: relative; isolation: isolate; }
.page-hero:not(.notfound):not(.order-hero) { border-bottom: 1px solid var(--line); margin-bottom: clamp(12px, 2vw, 20px); }
/* page not found: the message sits in the middle of the screen */
.page-hero.notfound { min-height: calc(72svh - var(--header)); align-content: center; }
.page-hero.notfound .hero-actions { justify-content: center; margin-top: 10px; }
.page-hero::before { content: ""; display: block; width: 44px; height: 2px; background: var(--clay); margin-bottom: 4px; }
.page-hero p:not(.eyebrow) { max-width: 56ch; color: var(--ink-soft); }
.info-blocks { max-width: 820px; margin-inline: auto; padding: 16px var(--gutter) clamp(56px, 8vw, 96px); display: grid; gap: clamp(28px, 4vw, 44px); }
.info-block { scroll-margin-top: calc(var(--header) + 16px); }
.info-block h2 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; margin-bottom: 10px; }
html[lang="ar"] .info-block h2 { font-weight: 500; line-height: 1.5; }
.info-block p { color: var(--ink-soft); margin-bottom: 10px; }

.order-hero { padding-bottom: clamp(20px, 4vw, 36px); }
.order { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) clamp(56px, 8vw, 100px); display: flex; flex-direction: column; gap: clamp(36px, 5vw, 60px); }
.order-narrow { width: 100%; max-width: 760px; margin-inline: auto; }
.measure-wrap { width: 100%; max-width: 1180px; margin-inline: auto; }
.order-section { border-top: 1px solid var(--line); padding-top: clamp(22px, 3vw, 32px); }
.order-step { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px; }
html[lang="ar"] .order-step { text-transform: none; font-size: 16px; }
.order-step-n { font-family: var(--display); font-size: 22px; color: var(--clay-text); letter-spacing: 0; font-weight: 400; }
.order-step-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.order-step-row .order-step { margin-bottom: 0; }

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field-label { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; font-size: 13.5px; font-weight: 400; color: var(--ink-soft); margin-bottom: 7px; }
html[lang="ar"] .field-label { font-size: 15.5px; }
.field-optional { font-size: 12px; color: var(--clay-text); }
.field-hint { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
html[lang="ar"] .field-hint { font-size: 14px; }

.input { width: 100%; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-soft); padding: 13px 16px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.input::placeholder { color: rgba(38, 18, 22, .4); }
.input:hover { border-color: rgba(38, 18, 22, .28); }
.input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(71, 9, 22, .14); }
textarea.input { resize: vertical; min-height: 52px; line-height: 1.6; }
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select.input { cursor: pointer; padding-inline-end: 40px; }
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit .input { padding-inline-end: 48px; }
.unit-suffix { position: absolute; inset-inline-end: 16px; font-size: 13px; color: var(--ink-soft); pointer-events: none; }

.order-piece { display: flex; gap: 18px; align-items: center; margin-top: 18px; padding: 12px; background: var(--rose); border-radius: var(--r-soft); }
.order-piece img { width: 64px; height: 96px; object-fit: cover; flex: 0 0 auto; }
.order-piece-info h3 { font-family: var(--display); font-weight: 400; font-size: 24px; margin-bottom: 2px; }
.order-piece-info p { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; }
.order-piece-info .link-underline { font-size: 13.5px; }

.unit-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-chip); overflow: hidden; }
.unit-btn { font-size: 13px; color: var(--ink-soft); padding: 8px 16px; min-height: 36px; transition: background .2s, color .2s; }
.unit-btn.active { background: var(--clay-text); color: var(--paper); }

.measure-diagram { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(270px, 400px) minmax(220px, 1fr); gap: clamp(26px, 3.5vw, 48px); align-items: center; margin-top: 32px; }
.md-col { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
.md-col .measure-field { margin-bottom: 0; }
.md-sketch { margin: 0; position: relative; padding: clamp(18px, 2.4vw, 30px); border: 1px solid var(--line); background: var(--pattern); }
.md-sketch svg { width: 100%; height: auto; display: block; }
.measure-field .field-label { display: flex; align-items: center; gap: .5em; }
.m-num { display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border: 1px solid var(--clay); border-radius: 50%; font-style: normal; font-size: 12px; color: var(--clay-text); }
.sketch-hint { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; }
.sketch-pop { position: absolute; inset-inline: 0; bottom: 0; z-index: 6; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-soft); padding: 18px 16px 16px; box-shadow: 0 26px 50px -24px rgba(38, 18, 22, .45); }
.sp-close { position: absolute; top: 4px; inset-inline-end: 6px; width: 40px; height: 40px; font-size: 24px; line-height: 1; color: var(--ink-soft); }
.sp-body .measure-field { margin: 0; padding-inline-end: 32px; }
.sp-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.sp-btn { flex: 1; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-chip); font-size: 14px; color: var(--ink); }
.sp-primary { background: var(--clay-text); border-color: var(--clay-text); color: var(--ivory); }
.size-btn { min-width: 52px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r-chip); font-size: 14.5px; font-weight: 400; color: var(--ink); transition: border-color .2s, background .25s, color .2s; }
.size-btn:hover { border-color: var(--clay); background: var(--rose); }
.size-btn.active { border-color: var(--clay-text); background: var(--clay-text); color: var(--paper); font-weight: 500; }
.style-options { display: flex; flex-wrap: wrap; gap: 8px; }
.style-options .size-btn { min-width: 96px; }
.bust-options { margin: 0 0 12px; gap: 6px; }
.bust-options .size-btn { min-width: 0; min-height: 40px; padding: 7px 13px; font-size: 13.5px; }
.measure-help { font-size: 13.5px; color: var(--ink-soft); margin-top: 26px; line-height: 1.6; text-align: center; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.details-full { grid-column: 1 / -1; }

.order-preview { background: var(--rose); border-radius: var(--r-soft); padding: clamp(22px, 2.5vw, 30px); }
.order-preview-title { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; }
html[lang="ar"] .order-preview-title { text-transform: none; font-size: 15px; }
.order-bubble { background: var(--paper); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 18px 20px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; min-height: 96px; max-height: 46vh; overflow-y: auto; }
html[lang="ar"] .order-bubble { border-radius: 18px 18px 4px 18px; }
.order-preview-hint { font-size: 13px; color: var(--ink-soft); margin: 12px 0 18px; line-height: 1.5; }
.order-send.is-disabled, .order-sticky .btn.is-disabled { opacity: .5; pointer-events: auto; }
.order-hint { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 14px; }
.order-hint.ready { color: var(--clay-text); }
.order-reset { display: block; margin: 16px auto 0; font-size: 13.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }
.order-reset:hover { color: var(--ink); }
.order-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 95; display: none; padding: 10px var(--gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: rgba(246, 241, 234, .96); border-top: 1px solid var(--line); }
.order-sticky .btn { width: 100%; }

/* ============================================================
   Movement — slow and small. Everything is visible without it:
   the entrances are CSS only, and the scroll reveals exist only
   where the browser supports scroll-driven animation.
   ============================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes pop { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes heartbeat { 0%, 100% { transform: none; } 35% { transform: scale(1.25); } 60% { transform: scale(.95); } }
@keyframes ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }

/* home: the line arrives in two breaths, then the photo opens like a curtain */
.hero-copy .display > span, .hero-copy .lede, .hero-actions { animation: rise .9s var(--ease) both; }
.hero-copy .display > span:nth-child(2) { animation-delay: .14s; }
.hero-copy .lede { animation-delay: .28s; }
.hero-actions { animation-delay: .4s; }
.hero-media { animation: rise 1.1s var(--ease) both; }
.hero::before { animation: unveil 1.4s .2s var(--ease) both; }
.shown { animation: rise .8s .9s var(--ease) both; }
/* page titles */
.page-hero > *, .col-head > * { animation: rise .8s var(--ease) both; }
.page-hero > :nth-child(2), .col-head > :nth-child(2) { animation-delay: .1s; }
.page-hero > :nth-child(3) { animation-delay: .2s; }
.pp .info { animation: rise .8s .1s var(--ease) both; }

@supports (animation-timeline: view()) {
  .sec-head, .grid > .card, .grid > .edit, .group, #featured .rail, .mtm-art, .mtm-copy, .service a, .info-block, .order-section, .pager {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .service a:nth-child(2) { animation-range: entry 10% entry 65%; }
  .service a:nth-child(3) { animation-range: entry 20% entry 75%; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .nav { gap: 16px; font-size: 14px; }
  .hdr-end { gap: 14px; font-size: 14px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid[data-view="sheet"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .measure-diagram { grid-template-columns: 1fr 1fr; }
  .md-sketch { grid-column: 1 / -1; grid-row: 1; width: min(72vw, 340px); margin-inline: auto; }
  .order-preview .order-send { display: none; }
  .order-preview-hint { margin-bottom: 0; }
  .order-sticky { display: block; }
  body[data-page="order"] { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) {
  :root { --header: 56px; }
  .hdr-row { grid-template-columns: 1fr auto; gap: 8px; }
  .nav, .hdr-end .hide-sm { display: none; }
  .hdr-end { gap: 2px; font-size: 15px; }
  .hdr-end .lang-toggle { padding-inline: 8px; }
  .hdr-end .wa-sm, .hdr-end .menu-btn { display: inline-flex; }
  .lockup img { height: 30px; }
  .lockup .wm { font-size: 10.5px; letter-spacing: .28em; }
  .lockup .wm-ar { font-size: 17px; }
  /* collections one tap away: a slim text row under the header on the home page */
  .subnav { display: flex; gap: 22px; height: 42px; align-items: center; overflow-x: auto; white-space: nowrap; scrollbar-width: none; border-top: 1px solid var(--line); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); font-size: 15px; font-weight: 400; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { padding-block: 10px; }
  .float-wa { display: none; }
  .wish-panel { inset-inline: 12px; width: auto; }

  .hero { min-height: 0; padding: 52px calc(var(--gutter) + 8px) 60px; }
  .hero-media { margin-bottom: 26px; }
  .hero-brand img { width: min(250px, 62vw); }
  .shown { max-width: 100%; }
  .hero-copy { gap: 16px; }
  .hero-copy .display { font-size: 40px; }
  html[lang="ar"] .hero-copy .display { font-size: 38px; }
  .hero-copy .lede { font-size: 16px; }
  html[lang="ar"] .hero-copy .lede { font-size: 17px; line-height: 1.75; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; max-width: 340px; }
  .hero-actions .link { align-self: center; }
  .rail { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; gap: 14px; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
  .sec-head { margin-bottom: 18px; }
  .mtm { grid-template-columns: 1fr; }
  .mtm-art { padding: 64px 20px 26px; }
  .mtm-art svg { max-width: 210px; }
  .service .wrap { grid-template-columns: 1fr; }
  .service a { padding: 34px 0 24px; border-inline-start: 0; border-top: 1px solid rgba(71, 9, 22, .16); }
  .service a:first-child { border-top: 0; }

  .service strong { font-size: 24px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }


  .card .num { font-size: 18px; }
  .card-row { flex-direction: column; align-items: flex-start; gap: 1px; }
  .card-row::after { display: none; }
  .card .price { font-size: 14px; white-space: normal; }
  .card .desc { font-size: 13px; }
  html[lang="ar"] .card .desc { font-size: 14px; }
  .col-head { padding-block: 18px 4px; gap: 6px; }
  .views { display: none; }
  .tabs { gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); margin-bottom: 18px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs { gap: 20px; }
  .grid, .grid[data-view="large"], .grid[data-view="sheet"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; padding-bottom: 48px; }
  .edit { grid-row: span 1; aspect-ratio: 4 / 5; min-height: 0; }
  .group { flex-direction: column; align-items: flex-start; gap: 2px; }
  .group h2 { white-space: nowrap; }

  .pp { grid-template-columns: 1fr; padding-block: 0 36px; gap: 16px; }
  .gallery { grid-auto-flow: column; grid-auto-columns: 88%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; gap: 4px; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery.single { grid-auto-columns: 100%; }
  .gallery figure, .gallery figure.wide { grid-column: auto; aspect-ratio: 2 / 3; scroll-snap-align: start; }
  .gallery figure.wide img { object-position: 50% 40%; }
  .count { display: block; inset-inline-end: calc(12% + 0px); }
  .gallery.single ~ .count, .gallery-wrap.single .count { inset-inline-end: 14px; }
  .zoom { inset-inline-end: 8px; }
  .info { position: static; gap: 18px; }
  .titlebar h1.display { font-size: 52px; }
  .titlebar .price { font-size: 19px; padding-bottom: 4px; }
  .blurb { font-size: 17px; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager .mid { display: none; }
  .bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; position: fixed; inset-inline: 0; bottom: 0; z-index: 95; background: var(--paper); border-top: 1px solid var(--line); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); transition: transform .2s; }
  .bar.off { transform: translateY(110%); }
  .bar .l { font-size: 14px; line-height: 1.3; display: grid; min-width: 0; }
  .bar .l b { font-family: var(--display); font-weight: 400; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[lang="ar"] .bar .l { font-size: 15px; }
  .bar .btn { min-height: 48px; padding: 0 18px; font-size: 15px; }
  body.has-orderbar { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (max-width: 620px) {
  .measure-diagram { display: flex; flex-direction: column; align-items: stretch; gap: clamp(28px, 3vw, 44px); }
  .md-sketch { align-self: center; }
  .md-col { display: contents; }
  .md-sketch { order: 0; width: min(80vw, 360px); }
  .measure-field[data-mo="1"] { order: 1; }
  .measure-field[data-mo="2"] { order: 2; }
  .measure-field[data-mo="3"] { order: 3; }
  .measure-field[data-mo="4"] { order: 4; }
  .measure-field[data-mo="5"] { order: 5; }
  #measureSketch .m-chip { r: 17; }
  #measureSketch .m-txt { font-size: 17px; }
  .sketch-pop { inset-inline: -8vw; }
  .details-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  html[lang="ar"] .hero-copy .lede { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ---------- Order tracking (track.html) ---------- */
.track { max-width: 620px; margin-inline: auto; padding: 8px var(--gutter) clamp(56px, 8vw, 96px); display: grid; gap: 22px; }
.track-wait { text-align: center; color: var(--ink-soft); }
.track-card { background: var(--rose); border-radius: var(--r-soft); padding: 20px 22px; display: grid; gap: 4px; }
.track-card .what { font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; }
html[lang="ar"] .track-card .what { font-weight: 500; line-height: 1.6; }
.track-card .meta { color: var(--ink-soft); font-size: 14.5px; }
.track-steps { list-style: none; border-inline-start: 2px solid var(--line); margin-inline-start: 9px; }
.track-steps li { position: relative; padding-block: 0 22px; padding-inline-start: 24px; color: var(--ink-soft); }
.track-steps li:last-child { padding-bottom: 2px; }
.track-steps li::before { content: ""; position: absolute; inset-inline-start: -10px; top: 3px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); }
.track-steps li.done { color: var(--ink); }
.track-steps li.done::before { background: var(--clay); border-color: var(--clay); }
.track-steps li.now { color: var(--ink); }
.track-steps li.now::before { border-color: var(--clay); box-shadow: 0 0 0 4px var(--rose-2); }
.track-steps li.now b { color: var(--clay-text); }
.track-steps b { display: block; font-weight: 500; }
.track-steps small { font-size: 13.5px; color: var(--ink-soft); }
.track-notes { display: grid; gap: 6px; }
.track-note { color: var(--ink-soft); }
.track-note b { color: var(--ink); font-weight: 500; }
.track-pay p:not(.pay-title):not(.iban-num):not(.iban-meta) { color: var(--ink-soft); margin-bottom: 12px; }
.track-help { color: var(--ink-soft); }
.track-private { font-size: 13px; color: var(--ink-soft); text-align: center; }
.code-note b { color: var(--ink); font-weight: 500; }

/* ---- A piece added before its photos: the brand placeholder stands in ---- */
.stage img.ph, .gallery img.ph { object-fit: cover; }