/* ============================================================
   DANYA line
   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.
   ============================================================ */
/* ---- "Danya Sans": Josefin Sans for Latin, Tajawal for Arabic, chosen per letter by unicode-range (both SIL OFL, licences in fonts/) ---- */
@font-face { font-family: "Danya Sans"; src: url("../fonts/josefin-sans/josefin-sans-latin-300-normal.woff2") format("woff2"); font-weight: 100 300; 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: "Danya Sans"; src: url("../fonts/josefin-sans/josefin-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400 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: "Danya Sans"; src: url("../fonts/josefin-sans/josefin-sans-latin-300-italic.woff2") format("woff2"); font-weight: 100 400; font-style: italic; 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: "Danya Sans"; src: url("../fonts/tajawal/tajawal-arabic-300-normal.woff2") format("woff2"); font-weight: 100 300; 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: "Danya Sans"; src: url("../fonts/tajawal/tajawal-arabic-400-normal.woff2") format("woff2"); font-weight: 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: "Danya Sans"; src: url("../fonts/tajawal/tajawal-arabic-500-normal.woff2") format("woff2"); 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: "Danya Sans"; src: url("../fonts/tajawal/tajawal-arabic-700-normal.woff2") format("woff2"); 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; }
/* ---- "Danya Script": the Ciel-style script for headings — Pinyon Script for Latin, Amiri for Arabic ---- */
@font-face { font-family: "Danya Script"; src: url("../fonts/pinyon-script/pinyon-script-latin-400-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: "Danya Script"; src: url("../fonts/amiri/amiri-arabic-400-normal.woff2") format("woff2"); font-weight: 100 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: "Danya Script"; src: url("../fonts/amiri/amiri-arabic-700-normal.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; }
/* ---- "Danya Accent": Jost for the tracked capitals (menu, buttons, labels); Arabic falls back to Tajawal ---- */
@font-face { font-family: "Danya Accent"; src: url("../fonts/jost/jost-latin-400-normal.woff2") format("woff2"); font-weight: 100 400; 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: "Danya Accent"; src: url("../fonts/jost/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500 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: "Danya Accent"; src: url("../fonts/tajawal/tajawal-arabic-400-normal.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: "Danya Accent"; src: url("../fonts/tajawal/tajawal-arabic-500-normal.woff2") format("woff2"); font-weight: 500 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:start (kept for the generator; nothing to write) */
@font-face { font-family: "Danya 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: "Danya 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: "Danya 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 */

:root {
  /* DANYA line brand colours (brand guideline, 2026) */
  --clay:   #800431;    /* Wine: the signature accent — one button, a price, a season label */
  --blush:  #A9456B;    /* Wine, softened */
  --sienna: #8E1F47;
  --ivory:  #FEEFEC;    /* Blush White: the only type colour used on Wine, and on the footer */
  --paper:  #FAF6F3;    /* warm white ground (between White and Blush White) */
  --ink:    #231F20;    /* warm near-black for type */
  --clay-deep: #5A0322;
  --clay-text: #800431; /* Wine for text and the order button */
  --rose:   #FEEFEC;    /* Blush White panels */
  --rose-2: #F2E3DD;    /* chosen tabs and soft chips */
  --rosewood: #7F7865;  /* the footer: Greige, deepened so Blush White text reads on it */
  --greige: #A09883;    /* Greige as it is: soft surfaces, the avatar */
  --sand:   #DEC4B0;    /* Limestone: the campaign walls */
  --glow: #8E876F;
  --on-dark-accent: #FEEFEC;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --ink-soft: color-mix(in srgb, var(--ink) 72%, transparent);
  --ink-mute: color-mix(in srgb, var(--ink) 56%, transparent);

  --sans: "Danya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Danya Script", "Pinyon Script", "Amiri", cursive, serif;   /* headings, as on cielbahrain.com */
  --serif: var(--display);
  --accent: "Danya Accent", "Jost", var(--sans);                        /* tracked capitals */
  --hand: var(--display);
  --body: var(--sans);

  --fs-display: clamp(44px, 5vw, 76px);    /* hero line + piece number */
  --fs-title: clamp(34px, 3.6vw, 54px);    /* section and page titles, in the script */

  --mount: color-mix(in srgb, var(--paper) 62%, transparent);
  --hair: color-mix(in srgb, var(--clay) 20%, transparent);
  --r-soft: 4px;                       /* boxes: square or near-square corners (brand) */
  --pattern: linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px) -1px -1px / 24px 24px, linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px) -1px -1px / 24px 24px, var(--paper);
  --r-chip: 2px;                       /* chips, tabs and buttons: 2 px corners */
  --r-pill: 2px;

  --maxw: 1440px;
  --scallop: 0px;
  --gutter: clamp(16px, 3.2vw, 48px);
  --header: 150px;                     /* announcement bar + the logo over the menu, as on cielbahrain.com */
  --announce: 34px;
  --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); }
/* a sold-out piece: the button is there to say so, and can't be pressed */
a.btn:not([href]) { cursor: not-allowed; pointer-events: none; }
.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: color-mix(in srgb, var(--paper) 97%, transparent); border-bottom: 1px solid var(--line); transition: transform .3s var(--ease); }
.hdr.hide { transform: translateY(-100%); }
body[data-page="home"] .hdr { border-bottom-color: transparent; }
.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 color-mix(in srgb, var(--ivory) 20%, transparent); margin-top: 14px; }
.mobile-menu .mm-small { font-family: var(--body); font-size: 17px; font-weight: 400; color: color-mix(in srgb, var(--ivory) 74%, transparent); }
.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 color-mix(in srgb, var(--ivory) 50%, transparent); 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 color-mix(in srgb, var(--ink) 50%, transparent); 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; }
/* no line inside the frame (29 Oct 2026) */
.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; }
}
/* cards: the photo in a straight-edged frame, nothing drawn inside it */
.card .stage { border-radius: 0; background: var(--rose); }   /* straight-edged frames (29 Oct 2026) */
.card .stage:has(img.ph)::after { border-color: color-mix(in srgb, var(--ivory) 30%, transparent); }
.card { min-width: 0; position: relative; container-type: inline-size; }
.card .tag { top: 7%; inset-inline-start: 50%; translate: -50% 0; border-radius: var(--r-pill); white-space: nowrap; }
html[dir="rtl"] .card .tag { translate: 50% 0; }
.card .tag { background: var(--paper); color: var(--clay-text); }
.card .heart { top: calc(150cqw - 62px); inset-inline-end: calc(50% - 22px); border-radius: 50%; }
.card-row, .card .desc, .card .tones { justify-content: center; text-align: center; }
.card-row { gap: 12px; }
.card-row::after { display: none; }
.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 color-mix(in srgb, var(--ink) 38%, transparent); }
.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 color-mix(in srgb, var(--ink) 28%, transparent); 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: color-mix(in srgb, var(--paper) 90%, transparent); 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 (design of 26 Oct 2026): sand from edge to edge; the line in burgundy, in The Year of Handicrafts,
   with a cream chip and a plain link under it; the abaya and her flying shayla cut out on the right.
   The picture stays on the right in both languages (it is drawn that way), so the grid is laid out ltr. */
.hero { position: relative; isolation: isolate; overflow: hidden; direction: ltr; display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); align-items: center;
  height: clamp(480px, 51.6vw, 800px); background: var(--sand); color: var(--clay-text); }
.hero > * { direction: ltr; }
html[dir="rtl"] .hero > * { direction: rtl; }
.hero-copy { grid-column: 1; grid-row: 1; z-index: 1; display: grid; justify-items: start; gap: clamp(22px, 2.6vw, 40px); padding-left: clamp(24px, 7.7vw, 150px); padding-right: clamp(12px, 2vw, 32px); text-align: start; }
.hero-copy .display > span { display: block; white-space: nowrap; }
.hero .display { font-family: var(--hand); font-weight: 400; color: var(--clay-text); font-size: clamp(40px, 5.6vw, 104px); line-height: 1.12; letter-spacing: -0.01em; }
html[lang="ar"] .hero .display { font-weight: 400; line-height: 1.24; }
html[lang="en"] .hero .display { font-weight: 600; font-size: clamp(38px, 4.9vw, 88px); line-height: 1.04; letter-spacing: -0.03em; }
.hero-actions { display: flex; align-items: center; gap: clamp(14px, 1.3vw, 22px); flex-wrap: wrap; }
.btn-chip { min-height: 0; padding: .42em 1em .48em; background: var(--paper); color: var(--clay-text); font-size: clamp(15px, 1.55vw, 24px); font-weight: 700; letter-spacing: 0; text-transform: none; }
.btn-chip:hover { background: var(--clay-text); color: var(--paper); }
.hero-link { font-size: clamp(15px, 1.55vw, 24px); font-weight: 700; color: var(--clay-text); background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease); }
.hero-link:hover { background-size: 100% 1.5px; }
html[lang="en"] :is(.btn-chip, .hero-link) { font-weight: 600; font-size: clamp(14px, 1.2vw, 19px); }
.hero-media { grid-column: 2; grid-row: 1; position: relative; display: block; align-self: stretch; height: 100%; }
/* the cut-out: as tall as the band, its right edge a little in from the page's */
.hero-brand img { position: absolute; inset-block: 0; right: 4.2%; height: 100%; width: auto; max-width: none; }
/* the owner's own home photo (admin → Settings → Home photo) in place of the cut-out: it fills the right side */
.hero-photo { overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 100%; }
/* a piece named under the words (CONFIG.heroPiece) */
.shown { position: absolute; bottom: clamp(16px, 2.4vw, 32px); right: var(--gutter); z-index: 2; border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 88%, transparent); padding: 10px 18px; display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--ink-soft); transition: background .3s var(--ease); }
.shown:hover { background: var(--paper); }
.shown b { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--clay-text); line-height: 1; }
html[lang="ar"] .shown { font-size: 15px; }
.hero :focus-visible { outline-color: var(--clay-text); }

.sec { padding-block: clamp(56px, 7vw, 110px) 0; }
.sec:last-of-type { padding-bottom: clamp(56px, 7vw, 110px); }
.sec.tight { padding-top: clamp(56px, 7vw, 110px); }
/* a section's name large and in burgundy on the start side, its link on the other */
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: clamp(28px, 4.6vw, 70px); padding-inline: clamp(0px, 3vw, 44px); }
.sec-head .title { color: var(--clay-text); font-weight: 500; font-size: clamp(32px, 4.4vw, 66px); letter-spacing: -0.025em; }
html[lang="ar"] .sec-head .title { font-weight: 700; line-height: 1.3; }
.sec-head .link { border: 0; padding: 0; color: var(--clay-text); font-size: clamp(16px, 2vw, 28px); font-weight: 400; }
.sec-head .link .arrow { display: none; }
.sec-head .link:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }

.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 color-mix(in srgb, var(--clay) 16%, transparent); 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 { position: relative; background: var(--rosewood); color: var(--ivory); padding-block: 56px 28px; }
/* a straight top edge: no scallops (29 Oct 2026) */
.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: color-mix(in srgb, var(--ivory) 76%, transparent); 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: color-mix(in srgb, var(--ivory) 86%, transparent); }
.site-footer li > a:hover { color: var(--ivory); }
.site-footer li { color: color-mix(in srgb, var(--ivory) 86%, transparent); 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 color-mix(in srgb, var(--ivory) 18%, transparent); }
.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: color-mix(in srgb, var(--ivory) 80%, transparent); }
.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 color-mix(in srgb, var(--ivory) 18%, transparent); font-size: 13px; color: color-mix(in srgb, var(--ivory) 76%, transparent); 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; border-radius: 50%; background: var(--clay-text); display: grid; place-items: center; z-index: 90; box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--ink) 60%, transparent); 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-radius: 50%; border: 1px solid color-mix(in srgb, var(--ivory) 42%, transparent); 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: color-mix(in srgb, var(--paper) 96%, transparent); 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 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: color-mix(in srgb, var(--paper) 95%, transparent); 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.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: color-mix(in srgb, var(--paper) 92%, transparent); 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: color-mix(in srgb, var(--paper) 92%, transparent); 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; }
/* shayla lengths are words in Arabic ("مترين إلا ربع"), so they get wider chips */
.sizes.shaylas { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.sizes.shaylas span { padding-inline: 10px; white-space: nowrap; }
#shayla { margin-top: 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 color-mix(in srgb, var(--ink) 28%, transparent); 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); border-radius: 50%; aspect-ratio: 1; 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; }
/* what the order comes to: piece, necklace, code, delivery, total */
.pay-sum { list-style: none; display: grid; gap: 6px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.pay-sum li { display: flex; justify-content: space-between; gap: 16px; }
.pay-sum li b { font-weight: 400; font-variant-numeric: tabular-nums; }
.pay-sum li.total { padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--line); font-weight: 500; }
.pay-sum li.total b { font-weight: 500; }
/* 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 color-mix(in srgb, var(--ink) 50%, transparent); }

/* ============================================================
   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: color-mix(in srgb, var(--ink) 40%, transparent); }
.input:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 14%, transparent); }
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 color-mix(in srgb, var(--ink) 45%, transparent); }
.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: color-mix(in srgb, var(--paper) 96%, transparent); 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; }

  /* the hero stacks: the cut-out on top (cropped at the hem), the words and buttons under it on the sand */
  .hero { height: auto; grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
  .hero-media { grid-column: 1; grid-row: 1; height: min(96vw, 560px); }
  .hero-brand img { right: 50%; translate: 50% 0; height: 100%; }
  .hero-copy { grid-column: 1; grid-row: 2; justify-items: center; text-align: center; gap: 22px; padding: 26px var(--gutter) 0; }
  .hero .display { font-size: clamp(38px, 11vw, 54px); }
  html[lang="en"] .hero .display { font-size: clamp(34px, 9.4vw, 48px); }
  .btn-chip, .hero-link, html[lang="en"] :is(.btn-chip, .hero-link) { font-size: 17px; }
  .btn-chip { padding: 11px 22px 12px; }
  .hero-actions { justify-content: center; }
  .shown { bottom: auto; top: 12px; right: 12px; }
  .sec-head { padding-inline: 0; }
  .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 color-mix(in srgb, var(--clay) 16%, transparent); }
  .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: center; 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; }

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

/* discount code: above the order button on piece pages, and on the made-to-measure page */
.order-box .code-box { margin-bottom: 14px; }
.code-toggle { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; }
.code-toggle:hover { color: var(--clay-text); }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.code-row .input { padding-block: 12px; text-transform: uppercase; letter-spacing: .08em; }
.code-row .input::placeholder { text-transform: none; letter-spacing: 0; }
.code-apply { min-height: 50px; padding: 0 22px; border: 1px solid var(--ink); border-radius: var(--r-pill); font-size: 15px; transition: background .2s, color .2s; }
.code-apply:hover { background: var(--ink); color: var(--paper); }
.code-on { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; font-size: 15px; }
.code-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px dashed var(--clay-text); border-radius: 8px; background: var(--rose); color: var(--clay-text); font-weight: 500; letter-spacing: .08em; }
.code-rm { margin-inline-start: auto; min-height: 44px; font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.code-rm:hover { color: var(--clay-text); }
/* the line under the box stays in place when empty, so screen readers hear it change */
.code-msg { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.code-msg:empty { margin-top: 0; }
.code-msg.bad { color: var(--clay-deep); }
html[lang="ar"] .code-toggle, html[lang="ar"] .code-on { font-size: 15.5px; }
html[lang="ar"] .code-msg { font-size: 14.5px; }
.bar .l s { color: var(--ink-mute); }

/* ---- The owner's choices (admin → Settings → Appearance, applied by js/look.js) ---- */
html[data-hide~="featured"] #featured,
html[data-hide~="mtm"] #made-to-measure,
html[data-hide~="band"] body[data-page="home"] .service { display: none; }
/* several home photos: they sit on top of each other and fade from one to the next */
.hero-photo .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-photo .slide.on { opacity: 1; }
.hero-photo.slides { position: relative; }
@media (prefers-reduced-motion: reduce) { .hero-photo .slide { transition: none; } }

/* ---------- Piece pages: her details before WhatsApp opens (main.js askDetails) ---------- */
.od { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--r-soft); background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--ink) 55%, transparent); }
.od::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.od[open]:not(:modal) { position: fixed; inset: 0; z-index: 2000; }
.od-form { position: relative; padding: 28px 24px 24px; }
.od h2 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: 0 0 6px; padding-inline-end: 36px; }
.od-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; }
html[lang="ar"] .od-sub { font-size: 15.5px; }
.od-what { background: var(--rose); border-radius: calc(var(--r-soft) * 2 / 3); padding: 10px 14px; margin: 0 0 18px; font-size: 14.5px; color: var(--clay-text); }
.od-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 26px; line-height: 1; cursor: pointer; }
.od-close:hover { background: var(--rose); color: var(--ink); }
.od-err { color: var(--clay-text); font-size: 14px; margin: -6px 0 14px; }
.od .field { display: block; }
.od .field:last-of-type { margin-bottom: 22px; }
.od button[disabled] { opacity: .7; cursor: progress; }