/* Rose Misk web fonts - self-hosted so text does not wait on two extra cross-origin
   connections (fonts.googleapis.com for the CSS, then fonts.gstatic.com for the files).
   Generated from the Google Fonts css2 API; regenerate rather than hand-edit. */
@font-face{font-family:"Amiri";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/amiri-400-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Amiri";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/amiri-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Amiri";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/amiri-400-latin.woff2") format("woff2");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:"Amiri";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/amiri-700-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Amiri";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/amiri-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Amiri";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/amiri-700-latin.woff2") format("woff2");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:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/cormorant-garamond-400i-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/cormorant-garamond-400i-latin.woff2") format("woff2");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:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/cormorant-garamond-400-latin.woff2") format("woff2");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:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/cormorant-garamond-500-latin.woff2") format("woff2");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:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/cormorant-garamond-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/cormorant-garamond-600-latin.woff2") format("woff2");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:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/jost-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/jost-400-latin.woff2") format("woff2");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:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/jost-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/jost-500-latin.woff2") format("woff2");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:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/jost-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/jost-600-latin.woff2") format("woff2");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:"Jost";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/jost-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;}
@font-face{font-family:"Jost";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/jost-700-latin.woff2") format("woff2");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:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/tajawal-400-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/tajawal-400-latin.woff2") format("woff2");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:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/tajawal-500-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/tajawal-500-latin.woff2") format("woff2");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:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/tajawal-700-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/tajawal-700-latin.woff2") format("woff2");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;}

/* ============================================================
   Rose Misk — v3 · bright luxury
   One token set, light + dark, no hard-coded text colours.
   ============================================================ */
:root {
  --bg: #fff8f3; --bg-2: #fbeee6; --surface: #ffffff; --surface-2: #fdf3ec;
  --ink: #2b1f1c; --ink-2: #4a3733; --muted: #8b7470; --muted-2: #b59c95;
  --line: rgba(43,31,28,.10); --line-2: rgba(43,31,28,.16);
  --rose: #d48f74; --rose-2: #e7ab92; --rose-soft: rgba(212,143,116,.14);
  --gold: #d5b06a; --gold-2: #efd28f; --gold-soft: rgba(213,176,106,.18);
  --ok: #2e8b63; --danger: #c2503b;
  --shadow: 0 10px 30px rgba(84,52,40,.10); --shadow-2: 0 24px 60px rgba(84,52,40,.16);
  --font-display: "Cormorant Garamond", "Amiri", Georgia, serif;
  --font-sans: "Jost", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1); --ease-slow: cubic-bezier(.16,1,.3,1); --dur: .5s;
  --gutter: clamp(16px, 4.5vw, 56px); --max: 1280px; --r: 14px; --r-sm: 10px;
  --header-h: 76px;
  /* the floating WhatsApp button: its size and distance from the bottom edge, shared with whatever must keep clear of it */
  --wa-size: 54px; --wa-bottom: max(18px, env(safe-area-inset-bottom));
  --glass-edge: rgba(43,31,28,.22); --glass-hi: rgba(255,255,255,.9); --glass-lo: rgba(43,31,28,.06); --floor: rgba(84,52,40,.28);
  /* frosted pane: brand-tinted so whatever is behind it can never bleed through off-palette */
  --pane-glass: rgba(255,250,246,.80); --pane-glass-2: rgba(251,238,230,.88); --pane-glass-solid: #fffaf6;
  --pane-chip: rgba(255,255,255,.72); --pane-edge: rgba(43,31,28,.12); --pane-hi: rgba(255,255,255,.85);
}
html[data-theme="dark"] {
  --bg: #1a1517; --bg-2: #211b1e; --surface: #262022; --surface-2: #2d2528;
  --ink: #f7efea; --ink-2: #e6d9d2; --muted: #bda9a2; --muted-2: #8d7a74;
  --line: rgba(247,239,234,.12); --line-2: rgba(247,239,234,.2);
  --rose: #e2a48b; --rose-2: #f0bfa9; --rose-soft: rgba(226,164,139,.16);
  --gold: #e3c27a; --gold-2: #f3dca0; --gold-soft: rgba(227,194,122,.16);
  --shadow: 0 10px 30px rgba(0,0,0,.35); --shadow-2: 0 24px 60px rgba(0,0,0,.5);
  --glass-edge: rgba(255,255,255,.38); --glass-hi: rgba(255,255,255,.6); --glass-lo: rgba(255,255,255,.04); --floor: rgba(0,0,0,.6);
  --pane-glass: rgba(45,37,40,.82); --pane-glass-2: rgba(26,21,23,.90); --pane-glass-solid: #262022;
  --pane-chip: rgba(247,239,234,.06); --pane-edge: rgba(247,239,234,.14); --pane-hi: rgba(255,255,255,.10);
}
html[dir="rtl"] { --font-display: "Amiri", "Cormorant Garamond", serif; --font-sans: "Tajawal", "Jost", system-ui, sans-serif; }
/* scrollbars (v153): in the site's own colours and always in the site's theme - never a light bar on the dark theme or
   a dark one on the light theme. color-scheme tells the browser which theme the page is in (native controls and the
   list of a <select> follow it too); every scrollbar gets a soft rose thumb over the background it scrolls (Safari's own overlay bars follow
   color-scheme). */
html[data-theme="light"] { color-scheme: light; --sb-thumb: color-mix(in srgb, var(--rose) 50%, var(--bg)); }
html[data-theme="dark"] { color-scheme: dark; --sb-thumb: color-mix(in srgb, var(--rose) 32%, var(--bg)); }
* { scrollbar-color: var(--sb-thumb) transparent; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Safety net: with html visible, body's overflow is handed to the viewport, which stops the
   scrollbar but NOT the mobile zoom-out (Chrome still fits the page to the widest element).
   overflow-x: clip on body itself cuts the overflow without making body a scroll container,
   so the sticky header keeps working and the document can never be wider than the screen. */
@supports (overflow: clip) { html { overflow-x: hidden; } body { overflow-x: clip; } }
body.no-scroll { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; }
main, section, header, footer { color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0; color: var(--ink); }
html[dir="rtl"] :is(h1,h2,h3,h4) { line-height: 1.35; }
p { margin: 0; } ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* type */
.kicker { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--rose); font-weight: 500; display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rose), var(--gold)); }
html[dir="rtl"] .kicker { letter-spacing: 0; font-size: 13px; }
.title { font-size: clamp(32px, 5.6vw, 54px); margin-block: 10px 8px; }
.sub { color: var(--muted); max-width: 54ch; font-size: 15px; }
.section { padding-block: clamp(48px, 7vw, 96px); }
.section-head { margin-block-end: clamp(22px, 3.5vw, 40px); }
.section-head.center { text-align: center; } .section-head.center .kicker { justify-content: center; } .section-head.center .sub { margin-inline: auto; }

/* the original fine line art, barely thickened so it survives at 58-64px, filled with a
   polished gold gradient and a soft halo — clear and luminous without losing the delicacy */
/* mask rebuilt from the original Brand logo at 768px with a smooth ink ramp instead of a
   hard threshold — no JPEG haze, crisp hairlines, and no thickening at all */
.mark { display: inline-block; width: 44px; height: 44px; background: var(--rose); -webkit-mask: url("../assets/logo-mask-v4.png") center / contain no-repeat; mask: url("../assets/logo-mask-v4.png") center / contain no-repeat; filter: drop-shadow(0 0 4px var(--gold-soft)); }
/* over the hero the photo is warm gold, so gold-on-gold disappears — the site's own ivory
   (--bg in the light theme) with a gold halo stays crisp in both themes */
/* v153: with no fog behind the header any more, a fine dark edge comes first so the ivory lines also hold on the
   palest shots of the film (a sunlit sky); on dark shots it disappears and the gold halo reads as before */
.header:not(.solid) .mark { background: #fff8f3; filter: drop-shadow(0 0 1px rgba(0,0,0,.85)) drop-shadow(0 0 3px rgba(0,0,0,.4)) drop-shadow(0 1px 8px rgba(0,0,0,.3)) drop-shadow(0 0 12px rgba(213,176,106,.45)); }
html[data-theme="dark"] .header.solid .mark { background: var(--rose-2); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding-inline: 22px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; border: 1px solid transparent; border-radius: 999px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur); white-space: nowrap; }
html[dir="rtl"] .btn { letter-spacing: 0; font-size: 15px; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--rose); color: #fff; }
.btn-rose { background: linear-gradient(135deg, var(--rose-2), var(--rose)); color: #fff; box-shadow: 0 8px 22px rgba(212,143,116,.35); }
.btn-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #2b1f1c; box-shadow: 0 8px 22px rgba(213,176,106,.35); }
.btn-paper { background: #fff; color: #2b1f1c; border-color: rgba(255,255,255,.7); }
.btn-outline { color: var(--ink); border-color: var(--line-2); background: var(--surface); }
.btn-outline:hover { border-color: var(--rose); color: var(--rose); }
.btn-wa { background: #22b060; color: #fff; }
.btn-wa:hover { background: #1c9a53; }
.btn-block { width: 100%; }
.link { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); font-weight: 500; }
html[dir="rtl"] .link { letter-spacing: 0; font-size: 14px; }

/* announcement bar (v153): a strip of frosted glass over the top of the film (the hero is pulled up under it) -
   the picture runs on underneath, blurred and a little dimmed, so the free-delivery line reads on every shot
   while the rest of the film stays clear. The × folds the strip away and the header slides up into its place;
   the hero follows through --announce-h, which app.js keeps exact. The text has the same room on both sides,
   so it stays on the page's centre line with the × beside it. */
.announce { position: relative; z-index: 61; display: grid; grid-template-rows: 1fr; color: #f6e3b0; background: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.06)); -webkit-backdrop-filter: blur(18px) saturate(1.4) brightness(.72); backdrop-filter: blur(18px) saturate(1.4) brightness(.72); box-shadow: inset 0 -1px 0 rgba(255,255,255,.2); }
.announce-in { position: relative; min-height: 0; overflow: hidden; }
.announce-text { padding: 9px calc(max(var(--gutter), (100% - var(--max)) / 2) + 43px); text-align: center; font-size: 12px; letter-spacing: .08em; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
html[dir="rtl"] .announce-text { letter-spacing: 0; font-size: 14px; }
.announce-x { position: absolute; top: 50%; inset-inline-end: calc(max(var(--gutter), (100% - var(--max)) / 2) + 7px); width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center; border-radius: 50%; color: #fff; transition: background var(--dur) var(--ease); }
.announce-x::before { content: ""; position: absolute; inset: -7px; }
.announce-x:hover { background: rgba(255,255,255,.18); }
.announce-x:focus-visible { outline-color: #f6e3b0; outline-offset: -2px; }
.announce-x svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.announce.is-off { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.announce.fold { transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease) .08s, visibility 0s; }
.announce.fold.is-off { transition: grid-template-rows .45s var(--ease), opacity .25s var(--ease), visibility 0s .45s; }
/* the × stands on the same vertical line as the bag icon under it (the header's last button, 44px; 40px at 360px
   and under, 36px at 340px and under), whatever the screen width */
@media (max-width: 360px) { .announce-x { inset-inline-end: calc(var(--gutter) + 5px); } }
@media (max-width: 340px) { .announce-x { inset-inline-end: calc(var(--gutter) + 3px); } }
/* the × needs the same room on both sides of the text, so on narrow phones the line is set a hair tighter to stay
   on one line (Arabic down to 340px, English down to 360px) */
@media (max-width: 420px) { html[dir="ltr"] .announce-text { letter-spacing: .03em; } }
@media (max-width: 350px) { html[dir="rtl"] .announce-text { font-size: 13.5px; } }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .announce { background: rgba(28,20,18,.5); } .hero-actions .btn-paper { background: rgba(24,17,15,.5); } }

/* header */
.header { position: sticky; top: 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; background: transparent; color: #fff; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.header.solid { background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
@media (hover: none), (max-width: 900px) { .header.solid { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* two equal side columns (minmax(0, 1fr), not 1fr - a plain 1fr grows to fit its content), so the logo sits
   on the page's exact centre line whatever the buttons beside it measure */
.header .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.header-left { display: flex; align-items: center; gap: 0; justify-self: start; }
.header-right { display: flex; align-items: center; gap: 0; justify-self: end; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; position: relative; transition: background var(--dur); }
.icon-btn:hover { background: rgba(128,128,128,.14); }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bag-count { position: absolute; top: 5px; inset-inline-end: 3px; min-width: 18px; height: 18px; padding-inline: 5px; background: var(--rose); color: #fff; font-size: 10px; font-weight: 600; border-radius: 9px; display: grid; place-items: center; transform: scale(0); transition: transform .35s var(--ease-slow); }
.bag-count.show { transform: scale(1); }
.brand { display: flex; align-items: center; gap: 10px; justify-self: center; }
.brand .mark { width: 62px; height: 62px; }
/* the drawing inside logo-mask-v4.png sits 4.5px left of and 3.5px below the centre of its 768px square (its ink box: 31-727 x
   21-753); shifting the mark by that share of its own size puts the drawn logo, not just its box, on the page's centre */
.brand .mark { translate: .586% -.456%; }
.brand-name { font-family: "Cormorant Garamond", serif; font-size: 22px; letter-spacing: .16em; text-transform: uppercase; line-height: 1; font-weight: 500; }
.brand-name small { display: block; font-family: var(--font-sans); font-size: 8.5px; letter-spacing: .36em; opacity: .75; margin-top: 4px; }
/* الهيدر لاصق فوق الهيرو، فكلمة Rose Misk كانت تمشي مع الصفحة فوق الصورة. الشعار الدائري يكفي للتعريف
   بالعلامة في كل المقاسات - النص باقٍ في الفوتر وقائمة الموبايل. */
.header .brand-name { display: none; }
.nav-desktop { display: none; }
.lang-btn { font-size: 13px; letter-spacing: .06em; padding-inline: 10px; height: 44px; display: inline-flex; align-items: center; font-weight: 500; }
html[dir="rtl"] .lang-btn { font-family: "Jost", sans-serif; }
html[dir="ltr"] .lang-btn { font-family: "Tajawal", sans-serif; font-size: 15px; letter-spacing: 0; }
/* the header shows a short mark (the full word is its aria-label), drawn as SVG paths taken from the site's own
   font files so it looks the same everywhere without loading a font for it. A square button like the icons.
   - Arabic pages (v153, owner's choice: «en», not gold): Cormorant Garamond italic «en» with a fine calligraphic
     stroke under it, like the script in the logo, in the icons' own colour.
   - English pages (v153, owner's choice of four, not gold): «ع» from Alexandria light (SIL OFL) - the same thin line
     as the icons beside it, in their colour. */
.header .lang-btn { width: 44px; min-width: 0; justify-content: center; padding-inline: 0; }
/* balance (v153): below 1280px the language button sits beside the menu button, so each side of the logo carries two
   buttons of one size - menu + language | theme + bag - and mirrors the other exactly (measured in code). With the
   desktop links (1280px and up) it joins the theme and bag buttons instead. */
.header .lb-end { display: none; }
@media (min-width: 1280px) { .header .lb-start { display: none; } .header .lb-end { display: inline-flex; } }
.lang-mark { display: block; overflow: visible; fill: currentColor; transition: filter var(--dur) var(--ease); }
.lm-en { width: 25px; height: 17.5px; }
.lm-ain { width: 18px; height: 20px; }
html[lang="ar"] .lm-ain, html[lang="en"] .lm-en { display: none; }
/* over the clear film (v153: no fog behind the header any more) the icons, the language mark and the links carry
   a soft shadow of their own, so they stay readable on the brightest shots */
.header:not(.solid) :is(.icon-btn svg, .lang-mark) { filter: drop-shadow(0 0 1px rgba(0,0,0,.6)) drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
.header:not(.solid) .nav-desktop a { text-shadow: 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.45); }
.theme-btn .moon { display: none; } html[data-theme="dark"] .theme-btn .moon { display: block; } html[data-theme="dark"] .theme-btn .sun { display: none; }
@media (max-width: 480px) { .brand-name { display: none; } .brand .mark { width: 68px; height: 68px; } .lang-btn { padding-inline: 6px; } }
@media (min-width: 1024px) {
  :root { --header-h: 96px; }
  .menu-btn { display: none; }
  .nav-desktop { display: flex; gap: 26px; justify-self: center; padding-inline-start: 8px; }
  .nav-desktop a { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; position: relative; padding-block: 6px; white-space: nowrap; font-weight: 500; }
  html[dir="rtl"] .nav-desktop a { letter-spacing: 0; font-size: 15px; }
  .nav-desktop a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--rose); transform: scaleX(0); transition: transform var(--dur) var(--ease); }
  .nav-desktop a:hover::after { transform: scaleX(1); }
  .brand .mark { width: 76px; height: 76px; } .brand-name { font-size: 26px; }
}

.mnav { position: fixed; inset: 0; z-index: 80; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; padding: 16px var(--gutter) 32px; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .6s var(--ease-slow), opacity .4s var(--ease), visibility 0s .6s; }
.mnav.open { transform: none; opacity: 1; visibility: visible; transition: transform .6s var(--ease-slow), opacity .3s var(--ease), visibility 0s; }
.mnav-top { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.mnav-list { margin-block: auto; display: grid; gap: 4px; }
.mnav-list a { font-family: var(--font-display); font-size: clamp(30px, 8vw, 48px); line-height: 1.15; display: flex; align-items: baseline; gap: 14px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.mnav-list a small { font-family: var(--font-sans); font-size: 11px; letter-spacing: .3em; color: var(--rose); }
.mnav-foot { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--muted); align-items: center; }
/* credit sits on its own line under the menu links, never squeezed into the row */
.mnav-credit { flex-basis: 100%; margin-block-start: 4px; padding-block-start: 14px; border-top: 1px solid var(--line); font-size: 11px; opacity: .75; }

/* hero (v149, clear film since v153): the hero's copy and layout as they always were, with a film instead of the still:
   a portrait cut on phones (1:2, every shot framed on its subject), the full 16:9 frame on desktop. It is
   also pulled up under the now transparent announcement bar (--announce-h, kept exact by app.js), so the
   film runs to the very top of the page. The poster under the video is the loop's first frame: the first
   paint is never empty, and it simply stays if a browser refuses autoplay (iOS Low Power Mode). */
.hero { position: relative; min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * (var(--header-h) + var(--announce-h, 37px))); display: flex; align-items: flex-end; background: #2b1f1c; color: #fff; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media video::-webkit-media-controls { display: none !important; }
.hero-media video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* v153: the film is shown clear - no shade and no fog over it (the old dark gradient covered the lower half on
   phones and the right half on desktop). The copy carries its own soft shadow and the buttons are frosted glass,
   so they read on the brightest shots without covering the picture. */
/* phones and tablets: the buttons end 20px above the floating WhatsApp button, so it never sits on the second one */
.hero-content { position: relative; padding-block: 0 calc(var(--wa-bottom) + var(--wa-size) + 20px); width: 100%; }
.hero .kicker { color: var(--gold-2); }
.hero h1 { font-size: clamp(44px, 10.5vw, 100px); line-height: 1; margin-block: 14px 16px; max-width: 12ch; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 28px rgba(0,0,0,.5); }
html[dir="rtl"] .hero h1 { line-height: 1.25; }
.hero p { max-width: 46ch; font-size: clamp(15px, 2vw, 18px); color: #fff; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 1px 16px rgba(0,0,0,.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-actions .btn { flex: 1 1 200px; min-height: 50px; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
/* the gold stays solid (it is the main button) with a polished glass edge */
.hero-actions .btn-gold { background: linear-gradient(135deg, #f6e2aa, #d5b06a 55%, #c9a052); color: #2b1f1c; border-color: rgba(255,241,208,.9); box-shadow: 0 10px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(120,84,30,.25); }
.hero-actions .btn-gold:hover { background: linear-gradient(135deg, #f9e9bc, #dcbb78 55%, #d0a95c); }
/* clear glass: the film shows through, darkened a little behind the words so white text reads on bright shots */
.hero-actions .btn-paper { background: rgba(24,17,15,.26); color: #fff; border-color: rgba(255,255,255,.62); box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28); text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.hero-actions .btn-paper:hover { background: rgba(24,17,15,.38); border-color: #fff; }
/* desktop: beside the WhatsApp button (22px clear of it), not under it */
.scroll-cue { position: absolute; bottom: 20px; inset-inline-end: calc(18px + var(--wa-size) + 22px); display: none; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.scroll-cue span { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold-2), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0) } 50% { transform: scaleY(1) } 100% { transform: scaleY(0); transform-origin: bottom } }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform 1s var(--ease-slow); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}
@media (min-width: 900px) {
  .hero { align-items: center; }
  .hero-content { padding-block: calc(120px + var(--announce-h, 37px)) 100px; }
  .hero-text { width: 46%; margin-left: auto; margin-right: 0; }
  .hero-actions .btn { flex: 0 0 auto; }
  .scroll-cue { display: flex; }
}

/* ============================================================ BOTTLE */
.stage { position: relative; overflow: hidden; border-radius: var(--r); background: transparent; }
/* the cap swings up and out of the glass when a bottle opens. every stage clips, so the bottle is
   held a touch inside its frame and anchored to the floor - cap included, nothing leaves the box */
.stage > .bottle { position: absolute; bottom: 0; inset-inline-start: 50%; width: 90%; margin-inline-start: -45%; pointer-events: none; }
.stage::before { content: ""; position: absolute; inset: auto 10% 6% 10%; height: 30%; background: radial-gradient(60% 50% at 50% 100%, var(--rose-soft), transparent 70%); pointer-events: none; }
.tilt { perspective: 1000px; }
.bottle { --u: 1cqw; position: relative; width: 100%; aspect-ratio: 4 / 5; container-type: inline-size; transform-style: preserve-3d; transition: transform .8s var(--ease-slow); }
.tilt:hover .bottle, .bottle.open { will-change: transform; }
.bottle > * { position: absolute; left: 50%; }
.bottle.sz-100 { --gw: 40; --gh: 74; --cw: 25; --ch: 26; --sw: 10; --sh: 8; --ls: 1;  --lt: 13; --lh: 50; --lx: 19; }
.bottle.sz-50  { --gw: 40; --gh: 66; --cw: 25; --ch: 26; --sw: 10; --sh: 8; --ls: 1;  --lt: 14; --lh: 52; --lx: 19; }
.bottle.sz-30  { --gw: 23; --gh: 55; --cw: 22; --ch: 22; --sw: 8;  --sh: 7; --ls: .62; --lt: 12; --lh: 58; --lx: 7; }
.bottle.sz-10  { --gw: 14; --gh: 34; --cw: 13; --ch: 13; --sw: 5;  --sh: 5; --ls: .4;  --lt: 12; --lh: 58; --lx: 7; }
.bt-glass { bottom: calc(8 * var(--u)); width: calc(var(--gw) * calc(1 * var(--u))); height: calc(var(--gh) * calc(1 * var(--u))); margin-left: calc(var(--gw) * calc(-.5 * var(--u))); border-radius: 7% 7% 9% 9% / 3% 3% 4% 4%; border: 1px solid var(--glass-edge); overflow: hidden;
  background: linear-gradient(90deg, var(--glass-hi) 0%, rgba(255,255,255,.25) 9%, var(--glass-lo) 22%, transparent 45%, var(--glass-lo) 70%, rgba(255,255,255,.35) 88%, var(--glass-hi) 100%);
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) var(--floor), inset 0 calc(-1.5 * var(--u)) calc(3 * var(--u)) rgba(255,255,255,.18); transition: width .6s var(--ease-slow), height .6s var(--ease-slow), margin .6s var(--ease-slow); }
.bt-glass::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(to top, rgba(255,255,255,.45), rgba(255,255,255,0)); }
.bt-liquid { position: absolute; inset: 6% 3% 2% 3%; border-radius: 8% 8% 12% 12% / 4% 4% 6% 6%; background: linear-gradient(90deg, #e9c97a 0%, #f8e6ae 22%, #fff3cf 40%, #f6df9c 62%, #e4bf6c 100%); opacity: .95; }
.bt-liquid::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5%; border-radius: 50%; background: rgba(255,255,255,.55); }
.bt-shine { position: absolute; top: 2%; bottom: 2%; left: 7%; width: 8%; border-radius: 50%; background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.35) 45%, rgba(255,255,255,.85)); filter: blur(calc(.4 * var(--u))); opacity: .9; }
.bt-shine2 { position: absolute; top: 4%; bottom: 4%; right: 8%; width: 4%; border-radius: 50%; background: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,.2) 50%, rgba(255,255,255,.6)); filter: blur(calc(.5 * var(--u))); opacity: .7; }
.bt-label { position: absolute; left: calc(var(--lx) * 1%); right: calc(var(--lx) * 1%); top: calc(var(--lt) * 1%); height: calc(var(--lh) * 1%); border-radius: 7%; color: #3a2622; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(calc(.3 * var(--u)) * var(--ls)); padding: 4% 3%; font-family: "Jost", sans-serif; line-height: 1.1; direction: ltr;
  background: linear-gradient(135deg, #fbe3d3 0%, #f1c3a8 30%, #fbdcc9 52%, #e8ad8f 78%, #f7cdb6 100%); box-shadow: 0 calc(.3 * var(--u)) calc(.9 * var(--u)) rgba(0,0,0,.22), inset 0 0 0 calc(.35 * var(--u)) rgba(255,255,255,.55), inset 0 0 0 calc(.8 * var(--u)) rgba(226,164,139,.35); }
.bt-label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); pointer-events: none; }
.bt-label .lb-logo { width: 22%; aspect-ratio: 1; background: #3a2622; -webkit-mask: url("../assets/logo-mask.png") center / contain no-repeat; mask: url("../assets/logo-mask.png") center / contain no-repeat; margin-bottom: 2%; }
.bt-label .lb-brand { font-family: "Cormorant Garamond", serif; font-size: calc(calc(3.5 * var(--u)) * var(--ls)); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.bt-label .lb-ar { font-family: "Amiri", serif; font-size: calc(calc(3.2 * var(--u)) * var(--ls)); line-height: 1; }
.bt-label .lb-insp { font-size: calc(calc(1.9 * var(--u)) * var(--ls)); letter-spacing: .16em; text-transform: uppercase; margin-top: 3%; opacity: .85; }
.bt-label .lb-name { font-size: calc(calc(2.8 * var(--u)) * var(--ls)); font-weight: 600; line-height: 1.15; }
.bt-label .lb-conc { font-size: calc(calc(1.7 * var(--u)) * var(--ls)); letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-top: 3%; }
.bt-collar { bottom: calc(calc(8 * var(--u)) + var(--gh) * calc(1 * var(--u)) - 1px); width: calc(var(--gw) * calc(.5 * var(--u))); height: calc(2.6 * var(--u)); margin-left: calc(var(--gw) * calc(-.25 * var(--u))); border-radius: 15% / 50%; background: linear-gradient(90deg, #9a7a2e, #f4dd8a 30%, #fff5c8 48%, #e6c15e 68%, #8c6d22); box-shadow: 0 calc(.4 * var(--u)) calc(.6 * var(--u)) rgba(0,0,0,.35); transition: bottom .6s var(--ease-slow), width .6s var(--ease-slow), margin .6s var(--ease-slow); z-index: 1; }
.bt-spray { bottom: calc(calc(8 * var(--u)) + var(--gh) * calc(1 * var(--u)) + calc(1.6 * var(--u))); width: calc(var(--sw) * calc(1 * var(--u))); height: calc(var(--sh) * calc(1 * var(--u))); margin-left: calc(var(--sw) * calc(-.5 * var(--u))); border-radius: 16% / 12%; background: linear-gradient(90deg, #9a7a2e, #f1d67f 35%, #fff4c4 50%, #dcb653 72%, #86691f); box-shadow: 0 calc(.3 * var(--u)) calc(.5 * var(--u)) rgba(0,0,0,.35); transition: bottom .6s var(--ease-slow); z-index: 1; }
.bt-spray::after { content: ""; position: absolute; top: 14%; left: 50%; width: calc(1.3 * var(--u)); height: calc(1.3 * var(--u)); margin-left: calc(-.65 * var(--u)); border-radius: 50%; background: #2b1f1c; }
.bt-cap { bottom: calc(calc(8 * var(--u)) + var(--gh) * calc(1 * var(--u)) - calc(1.2 * var(--u))); width: calc(var(--cw) * calc(1 * var(--u))); height: calc(var(--ch) * calc(1 * var(--u)) + calc(2 * var(--u))); margin-left: calc(var(--cw) * calc(-.5 * var(--u))); border-radius: 9% 9% 5% 5% / 5% 5% 3% 3%; z-index: 3; transform-origin: 50% 100%;
  background: linear-gradient(90deg, #050505 0%, #262626 14%, #6b6b6b 26%, #2a2a2a 40%, #0d0d0d 62%, #3a3a3a 84%, #050505 100%); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.45), inset 0 calc(.6 * var(--u)) calc(1 * var(--u)) rgba(255,255,255,.08), inset 0 calc(-.6 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.5);
  transition: transform .8s var(--ease-slow), bottom .6s var(--ease-slow), width .6s var(--ease-slow), height .6s var(--ease-slow), margin .6s var(--ease-slow); }
.bt-cap i { position: absolute; left: 0; right: 0; top: 0; height: 12%; border-radius: 50%; background: linear-gradient(90deg, #1a1a1a, #5a5a5a 40%, #1c1c1c 70%, #111); }
.bt-cap::after { content: ""; position: absolute; top: 8%; bottom: 10%; left: 22%; width: 8%; border-radius: 50%; background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.1) 60%, rgba(255,255,255,.35)); filter: blur(calc(.3 * var(--u))); }
.bt-shadow { bottom: calc(5 * var(--u)); width: calc(var(--gw) * calc(1.5 * var(--u))); height: calc(5 * var(--u)); margin-left: calc(var(--gw) * calc(-.75 * var(--u))); border-radius: 50%; background: radial-gradient(closest-side, var(--floor), transparent); filter: blur(calc(1 * var(--u))); z-index: 0; transition: width .6s var(--ease-slow), margin .6s var(--ease-slow); }
.bt-floor { bottom: calc(4 * var(--u)); width: 70%; height: 1px; margin-left: -35%; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.bottle.open .bt-cap { transform: translate(54%, -62%) rotate(26deg); }
html[dir="rtl"] .bottle.open .bt-cap { transform: translate(-54%, -62%) rotate(-26deg); }
.bottle.open .bt-glass { box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) var(--floor), inset 0 calc(-1.5 * var(--u)) calc(3 * var(--u)) rgba(255,255,255,.18), 0 0 calc(8 * var(--u)) var(--rose-soft); }

/* cards */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-align: start; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .9s var(--ease-slow); }
.card.in { opacity: 1; transform: none; }
.card-media { aspect-ratio: 4 / 5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card:hover .card-media { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.badges { position: absolute; top: 9px; inset-inline-start: 9px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: calc(100% - 18px); pointer-events: none; }
.badge { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--surface-2); color: var(--ink); padding: 5px 9px; border-radius: 999px; font-weight: 600; border: 1px solid var(--line); white-space: nowrap; box-shadow: 0 2px 8px rgba(84,52,40,.12); }
html[dir="rtl"] .badge { letter-spacing: 0; font-size: 11px; }
.badge.sale { background: linear-gradient(135deg, var(--rose-2), var(--rose)); color: #fff; border: 0; }
.badge.out { background: var(--muted); color: #fff; border: 0; }
.card.soldout .bottle { opacity: .45; filter: grayscale(.4); }
.card.soldout .card-quick { display: none; }
.card-quick { position: absolute; bottom: 10px; inset-inline: 10px; z-index: 3; background: var(--surface); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); border: 1px solid var(--line-2); border-color: color-mix(in srgb, var(--ink) 14%, transparent); min-height: 40px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; transform: translateY(8px); opacity: 0; transition: transform var(--dur) var(--ease-slow), opacity var(--dur) var(--ease), background var(--dur), color var(--dur); }
html[dir="rtl"] .card-quick { letter-spacing: 0; font-size: 14px; }
.card-quick:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
@media (hover: hover) { .card:hover .card-quick { transform: none; opacity: 1; } }
@media (hover: none) { .card-quick { opacity: 1; transform: none; } }

.card-body { display: grid; gap: 2px; padding-inline: 4px; }
.card-house { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); font-weight: 600; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
html[dir="rtl"] .card-house { letter-spacing: 0; font-size: 12px; }
.card-name { font-family: var(--font-display); font-size: clamp(19px, 2.3vw, 23px); line-height: 1.15; font-weight: 600; }
.card-family { font-size: 12px; color: var(--muted); }
.card-price { font-size: 14px; margin-top: 2px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.card-price b { font-weight: 600; } .card-price small { color: var(--muted); font-size: 11px; }
.price-num { font-family: "Jost", sans-serif; font-variant-numeric: tabular-nums; }
.was { text-decoration: line-through; color: var(--muted-2); font-weight: 400; font-size: .85em; }
.match-badge { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #2b1f1c; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 999px; font-family: "Jost", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px rgba(84,52,40,.16); }
.card-shared { font-size: 12px; color: var(--muted); } .card-shared b { font-weight: 500; color: var(--ink); }
.match-note { text-align: center; color: var(--muted); font-size: 14px; margin: 0 auto 16px; max-width: 560px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
.grid > .card { content-visibility: auto; contain-intrinsic-width: 0; contain-intrinsic-height: auto 340px; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; } .grid > .card { contain-intrinsic-height: auto 380px; } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } .grid > .card { contain-intrinsic-height: auto 400px; } }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding-block: 40px; font-family: var(--font-display); font-size: 22px; }

/* filter bar */
.fbar-wrap { position: relative; margin-block-end: 20px; }
.fbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding-inline: 16px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow); transition: border-color var(--dur), background var(--dur); white-space: nowrap; }
.fbtn:hover, .fbtn.on { border-color: var(--rose); }
.fbtn.has { background: var(--rose-soft); border-color: var(--rose); }
.fbtn .n { min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 10px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.fbtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .3s; }
.fbtn.on svg { transform: rotate(180deg); }
.fsearch { display: flex; align-items: center; gap: 8px; min-height: 42px; padding-inline: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; flex: 1 1 180px; box-shadow: var(--shadow); }
.fsearch input { border: 0; background: transparent; width: 100%; min-width: 0; font-size: 14px; }
.fsearch input:focus { outline: none; }
.fsearch svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 2; flex: 0 0 auto; }
/* quick filters — one tap, with a live count so the choice is obvious */
.qrow { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; scroll-padding-inline: var(--gutter); }
.qrow::-webkit-scrollbar { display: none; }
.qchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding-inline: 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; box-shadow: var(--shadow); transition: border-color var(--dur), background var(--dur), color var(--dur), transform var(--dur) var(--ease); }
.qchip svg { width: 16px; height: 16px; stroke: var(--rose); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: stroke var(--dur); }
.qchip small { font-size: 11px; font-weight: 600; color: var(--muted); font-family: "Jost", sans-serif; font-variant-numeric: tabular-nums; }
.qchip:not(:disabled):hover { border-color: var(--rose); transform: translateY(-1px); }
.qchip.on { background: linear-gradient(135deg, var(--rose-2), var(--rose)); border-color: transparent; color: #fff; }
.qchip.on svg { stroke: #fff; }
.qchip.on small { color: rgba(255,255,255,.85); }
.qchip:disabled { opacity: .38; cursor: default; box-shadow: none; }
/* what is currently applied, each one removable */
.achips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.achips-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .achips-lbl { letter-spacing: 0; font-size: 12px; }
.achip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding-inline: 12px 8px; border-radius: 999px; background: var(--rose-soft); border: 1px solid var(--rose); color: var(--ink); font-size: 12.5px; font-weight: 500; transition: background var(--dur); }
.achip i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--rose); color: #fff; font-style: normal; font-size: 13px; line-height: 1; }
.achip:hover { background: color-mix(in srgb, var(--rose) 26%, transparent); }
.fmeta { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; margin-block: 14px 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.fmeta .clear { color: var(--rose); font-weight: 500; }
.fmeta-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.fmeta-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.fmeta-sel { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.fmeta-sel .select-wrap { min-width: 0; }
.select-wrap { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.select-wrap select { appearance: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 32px 8px 14px; font-size: 13px; color: var(--ink); cursor: pointer; min-height: 40px; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 767px) {
  /* phones: the count keeps the first row, the two selects get a row of their own */
  .fmeta { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 10px 12px; }
  .fmeta-tools { display: contents; }
  .fmeta-sel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .fmeta-sel .select-wrap { display: block; }
  .fmeta-sel select { width: 100%; }
}
html[dir="rtl"] .select-wrap select { padding: 8px 14px 8px 32px; }
.select-wrap::after { content: ""; position: absolute; inset-inline-end: 14px; top: 50%; width: 7px; height: 7px; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pop { position: absolute; z-index: 40; top: calc(100% + 8px); inset-inline-start: 0; min-width: 260px; max-width: min(92vw, 560px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); padding: 14px; }
.pop-title { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-block-end: 10px; }
html[dir="rtl"] .pop-title { letter-spacing: 0; font-size: 12.5px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { min-height: 38px; padding-inline: 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); transition: background var(--dur), color var(--dur), border-color var(--dur); }
.opt:hover { border-color: var(--rose); }
.opt.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.opt small { color: inherit; opacity: .6; font-size: 11px; }
.brand-search { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); margin-block-end: 10px; }
.brand-search:focus { outline: none; border-color: var(--rose); }
.brand-list { max-height: 280px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.brand-list .opt { justify-content: space-between; border-radius: var(--r-sm); }
.fsheet { position: fixed; z-index: 100; inset-inline: 0; bottom: 0; max-height: 86vh; max-height: 86svh; background: var(--surface); color: var(--ink); border-radius: 18px 18px 0 0; display: grid; grid-template-rows: auto 1fr auto; transform: translateY(100%); transition: transform .5s var(--ease-slow); box-shadow: var(--shadow-2); }
.fsheet.open { transform: none; }
.fsheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter); border-bottom: 1px solid var(--line); }
.fsheet-head h3 { font-size: 22px; }
.fsheet-body { overflow-y: auto; padding: 12px var(--gutter); display: grid; gap: 16px; overscroll-behavior: contain; }
.fsheet-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

/* families */
.families { background: var(--bg-2); }
.fam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fam { position: relative; overflow: hidden; border-radius: var(--r); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; min-height: 74px; text-align: start; background: linear-gradient(135deg, var(--tint-a), var(--tint-b)); color: #fff; box-shadow: var(--shadow); transition: transform .6s var(--ease-slow), box-shadow .5s; }
.fam:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.fam > svg { position: absolute; inset-inline-end: -14%; top: -30%; width: 56%; height: auto; stroke: #fff; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .16; pointer-events: none; transition: transform 1s var(--ease-slow); }
.fam:hover > svg { transform: rotate(-8deg) scale(1.08); }
.fam-ph { position: relative; width: 56px; height: 52px; flex: none; }
.fam-ph i { position: absolute; display: block; border-radius: 50%; overflow: hidden; background: #fff; }
.fam-ph i.a { width: 44px; height: 44px; top: 0; inset-inline-start: 0; box-shadow: 0 3px 10px rgba(0,0,0,.24), inset 0 0 0 1.5px rgba(255,255,255,.8); }
.fam-ph i.b { width: 30px; height: 30px; bottom: 0; inset-inline-end: 0; box-shadow: 0 0 0 2px var(--tint-b), 0 3px 8px rgba(0,0,0,.3), inset 0 0 0 1.5px rgba(255,255,255,.8); }
.fam-ph img { width: 100%; height: 100%; object-fit: cover; }
.fam-txt { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fam-name { font-family: var(--font-display); font-size: 18px; line-height: 1.08; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.22); text-wrap: balance; }
.fam-count { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.92); font-weight: 500; white-space: nowrap; }
html[dir="rtl"] .fam-count { letter-spacing: 0; font-size: 12px; }
html[dir="rtl"] .fam-name { font-size: 20px; line-height: 1.3; }
.fam:last-child { grid-column: 1 / -1; }
/* تسع عائلات = ثلاثة صفوف متساوية من ثلاثة على التابلت والديسك توب، وعلى الموبايل أربعة صفوف من اثنين
   والتاسع ممتد على العرض - كل صف ممتلئ بالكامل بدون خانات فاضية مهما كان عدد العائلات فرديًا. */
@media (min-width: 640px) { .fam-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .fam { min-height: 84px; padding: 12px; gap: 12px; } .fam:last-child { grid-column: auto; } .fam-ph { width: 62px; height: 58px; } .fam-ph i.a { width: 48px; height: 48px; } .fam-ph i.b { width: 33px; height: 33px; } .fam-name { font-size: 20px; } .fam-count { font-size: 10px; letter-spacing: .16em; } }
@media (min-width: 900px) { .fam-grid { gap: 14px; } .fam { min-height: 92px; padding: 13px; gap: 13px; } .fam-ph { width: 68px; height: 62px; } .fam-ph i.a { width: 52px; height: 52px; } .fam-ph i.b { width: 36px; height: 36px; } .fam-name { font-size: 21px; } }

/* scent match */
/* the panel reads as a warm little tool, not a blank form */
/* the glows are background layers, not positioned children, so the panel no longer needs
   overflow:hidden - that was clipping the fragrance dropdown to the panel edge */
.match-panel { position: relative; }

/* the two modes are choice cards, so it is obvious this is a picker */
/* minmax(0,1fr), not 1fr: a 1fr track will not shrink below its content, so the longer subtitle
   pushed the second card 61px past the viewport at ~430px wide */
.mtabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-block-end: 24px; }
.mtabs .mtab { display: flex; align-items: center; gap: 10px; text-align: start; padding: 12px; min-height: 0; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur); }
.mtabs .mtab:hover { transform: translateY(-2px); border-color: var(--rose); box-shadow: var(--shadow-2); }
.mtab-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--rose); flex: none; transition: background var(--dur), color var(--dur); }
.mtab-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* the cards inherit white-space:nowrap from .btn, so once the tracks were allowed to shrink the
   subtitles were clipped instead of wrapping - let this text wrap */
.mtab-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; white-space: normal; }
.mtab-t b, .mtab-t small { white-space: normal; overflow-wrap: anywhere; }
.mtab-t b { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.15; }
.mtab-t small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.mtabs .mtab.active { background: linear-gradient(140deg, var(--rose-2), var(--rose)); border-color: transparent; color: #fff; }
.mtabs .mtab.active .mtab-ic { background: rgba(255,255,255,.22); color: #fff; }
.mtabs .mtab.active .mtab-t small { color: rgba(255,255,255,.88); }
@media (max-width: 420px) { .mtabs { grid-template-columns: 1fr; } .mtabs .mtab { padding: 11px; } }


.tabs { display: flex; gap: 6px; padding: 4px; background: var(--surface-2); border-radius: 999px; margin-block-end: 22px; width: max-content; max-width: 100%; }
.tab { min-height: 42px; padding-inline: 18px; font-size: 13px; font-weight: 500; color: var(--muted); border-radius: 999px; transition: background var(--dur), color var(--dur); white-space: nowrap; }
.tab.active { background: var(--ink); color: var(--bg); }
.hint { font-size: 14px; color: var(--muted); margin-block-end: 14px; max-width: 60ch; }
.picker { position: relative; }
.picker input { width: 100%; min-height: 50px; padding: 10px 48px 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
html[dir="rtl"] .picker input { padding: 10px 16px 10px 48px; }
.picker input:focus { outline: none; border-color: var(--rose); }
.picker-ic { position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; pointer-events: none; }
/* capped against the viewport too: on a phone the field can sit low enough that a fixed 320px
   list runs off the bottom */
.picker-list { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px); max-height: min(320px, 46vh); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); }
.picker-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; text-align: start; border-bottom: 1px solid var(--line); min-height: 48px; }
.picker-item:hover { background: var(--surface-2); }
.picker-item b { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.picker-item small { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.picker-item.dim { opacity: .45; }
.picker-item .nimg { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--surface-2); }
.picker-item .pi-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.picked { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding-inline: 6px 8px; background: var(--ink); color: var(--bg); border-radius: 999px; font-size: 13px; font-weight: 500; }
.pill img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.pill button { min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 16px; line-height: 1; color: var(--gold-2); }
.pill .rm { color: var(--gold-2); }
.pill .seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.16); }
.pill .seg button { width: 26px; height: 24px; min-width: 0; border-radius: 999px; display: grid; place-items: center; opacity: .55; transition: background var(--dur), opacity var(--dur), color var(--dur); }
.pill .seg button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pill .seg button.on { opacity: 1; background: var(--gold); color: #2b1f1c; }
.pill.exc { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.pill.exc .name { text-decoration: line-through; }
.pill.exc .seg { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pill.exc .seg button.on { background: var(--danger); color: #fff; }
.pill.exc .rm { color: var(--danger); }
.ncats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; margin-block: 18px 12px; }
.ncats::-webkit-scrollbar { display: none; }
.ncat { flex: 0 0 auto; min-height: 38px; padding-inline: 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; }
.ncat.active { background: var(--rose); color: #fff; border-color: var(--rose); }
.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nitem { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; text-align: start; transition: border-color var(--dur), background var(--dur); min-height: 46px; }
html[dir="rtl"] .nitem { padding: 6px 6px 6px 10px; }
.nitem img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--surface-2); }
.nitem span { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.nitem:hover { border-color: var(--rose); }
.nitem.inc { background: var(--rose-soft); border-color: var(--rose); }
.nitem.exc { border-color: var(--danger); color: var(--danger); text-decoration: line-through; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-block: 10px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-inline-end: 6px; }
.results-head { display: flex; justify-content: space-between; align-items: baseline; margin-block: 26px 16px; font-size: 13px; color: var(--muted); }
.results-head h3 { font-size: 24px; }
.results-empty { padding: 34px 0; text-align: center; color: var(--muted); font-family: var(--font-display); font-size: 21px; }

/* contact */
.contact { background: var(--bg-2); }
.contact-grid { display: grid; gap: 12px; }
.contact-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-height: 76px; box-shadow: var(--shadow); transition: transform .5s var(--ease-slow), box-shadow .5s; }
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.contact-card .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--rose-soft); display: grid; place-items: center; flex: 0 0 auto; color: var(--rose); }
.contact-card .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-card .ic svg.fill { fill: currentColor; stroke: none; }
.contact-card b { display: block; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .contact-card b { letter-spacing: 0; font-size: 12px; }
.contact-card span.v { font-size: 16px; direction: ltr; unicode-bidi: isolate; }
@media (min-width: 700px) { .contact-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .contact-grid { grid-template-columns: repeat(4,1fr); } }

/* footer */
.footer { background: var(--surface-2); color: var(--muted); border-top: 1px solid var(--line); padding-block: 48px 28px; font-size: 14px; }
.footer-grid { display: grid; gap: 30px; }
.footer-brand { display: grid; gap: 12px; justify-items: start; }
.footer-brand .mark { width: 92px; height: 92px; filter: drop-shadow(0 0 7px var(--gold-soft)); }
.footer-brand .brand-name { color: var(--ink); }
.footer h4 { font-family: var(--font-sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin-block-end: 12px; font-weight: 600; }
html[dir="rtl"] .footer h4 { letter-spacing: 0; font-size: 13px; }
.footer li + li { margin-top: 8px; } .footer a:hover { color: var(--rose); }
.footer-bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12px; }
.credit-link { white-space: nowrap; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-soft); transition: color .2s; }
.credit-link:hover { color: var(--rose); text-decoration-color: currentColor; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* keep the last footer line clear of the fixed WhatsApp button on phones */
@media (max-width: 767px) {
  .footer { padding-block-end: calc(54px + max(18px, env(safe-area-inset-bottom)) + 32px); }
  .footer-bottom { row-gap: 10px; }
}

/* overlays */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(43,31,28,.5); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; backdrop-filter: blur(3px); }
.scrim.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.scrim.soft { background: rgba(43,31,28,.24); backdrop-filter: none; -webkit-backdrop-filter: none; }

.drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 100; width: min(100%, 440px); background: var(--surface); color: var(--ink); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .6s var(--ease-slow); box-shadow: var(--shadow-2); }
html[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.open, html[dir="rtl"] .drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--gutter); border-bottom: 1px solid var(--line); min-height: 56px; }
.drawer-head h2 { font-size: 24px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px var(--gutter); overscroll-behavior: contain; }
.drawer-foot { padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 8px; }
.line { display: grid; grid-template-columns: 60px 1fr; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.line .stage { width: 60px; aspect-ratio: 4 / 5; background: var(--surface-2); border-radius: var(--r-sm); }
.line-name { font-family: var(--font-display); font-size: 18px; line-height: 1.15; font-weight: 600; }
.line-meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.line-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 10px; }
.line-price { font-size: 14px; font-weight: 600; }
.line-remove { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-height: 36px; display: inline-flex; align-items: center; }
html[dir="rtl"] .line-remove { letter-spacing: 0; font-size: 13px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.stepper button { width: 32px; height: 32px; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.stepper button:hover { color: var(--rose); }
.stepper output { min-width: 24px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; font-family: "Jost", sans-serif; }
.stepper.lg button { width: 42px; height: 42px; } .stepper.lg output { min-width: 32px; font-size: 16px; }
.cart-empty { text-align: center; padding-block: 50px 24px; display: grid; gap: 16px; justify-items: center; color: var(--muted); font-family: var(--font-display); font-size: 22px; }
.meter { display: grid; gap: 6px; font-size: 12px; color: var(--muted); margin-block-end: 4px; }
.meter-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.meter-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--rose), var(--gold)); transition: width .8s var(--ease-slow); }
.meter.ok { color: var(--ok); }
.totals { display: grid; gap: 3px; font-size: 14px; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-size: 16px; padding-top: 5px; border-top: 1px solid var(--line); }
.totals .grand b { font-weight: 600; font-size: 18px; }
.totals .free { color: var(--ok); }
.note-txt { font-size: 12px; color: var(--muted); }

/* checkout — compact one-screen form */
.form { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 3px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
html[dir="rtl"] .field label { letter-spacing: 0; font-size: 11.5px; }
.field input, .field textarea, .field select { width: 100%; min-height: 40px; padding: 6px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .3s; font-size: 14px; }
.field select { appearance: none; cursor: pointer; padding-inline-end: 34px; }
.field .select-wrap { display: block; } .field .select-wrap select { border-radius: var(--r-sm); min-height: 40px; }
.field textarea { min-height: 40px; height: 40px; resize: none; }
.field :is(input, textarea, select):focus { border-color: var(--rose); outline: none; }
/* .field يفرض display:grid فيتغلب على [hidden] الافتراضي — لازم القاعدة دي عشان خانة المدينة تختفي */
.field[hidden] { display: none; }
/* خانة المدينة قبل اختيار المحافظة: مقفولة وباهتة، والسهم بيهدى معاها */
.field select:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; opacity: 1; }
.field .select-wrap:has(select:disabled)::after { opacity: .45; }
.field input[type="tel"] { direction: ltr; text-align: start; }
html[dir="rtl"] .field input[type="tel"] { text-align: end; }
.ship-hint { font-size: 11px; color: var(--muted); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg label { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding-inline: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); font-size: 12.5px; cursor: pointer; text-align: center; }
.seg input { display: none; }
.seg label:has(input:checked), .seg label.on { border-color: var(--rose); background: var(--rose-soft); font-weight: 600; }
.check { display: flex; gap: 10px; align-items: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; background: var(--bg); min-height: 40px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--rose); flex: 0 0 auto; }
.check b { font-weight: 500; font-size: 13px; }
.err { color: var(--danger); font-size: 12px; display: none; grid-column: 1 / -1; } .err.show { display: block; }

/* quick add — one column, every block the same width, three repeated heights */
/* foggy glass pane: the page stays visible behind it, blurred and desaturated, under a warm brand
   tint - so a green or blue card underneath can never push an off-palette colour into the sheet */
.qa { --qa-h: 54px; position: fixed; z-index: 100; inset-inline: 0; bottom: 0; background: linear-gradient(180deg, var(--pane-glass), var(--pane-glass-2)); color: var(--ink); border-radius: 22px 22px 0 0; border-top: 1px solid var(--pane-edge); padding: 10px var(--gutter) max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: stretch; transform: translateY(100%); transition: transform .5s var(--ease-slow); box-shadow: var(--shadow-2), inset 0 1px 0 var(--pane-hi); backdrop-filter: blur(30px) saturate(62%); -webkit-backdrop-filter: blur(30px) saturate(62%); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .qa { background: var(--pane-glass-solid); } }
.qa.open { transform: none; }
.qa-handle { grid-column: 1 / -1; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin-inline: auto; }
.qa-close { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; }
/* just the bottle - no plinth, no glow, no floor line. driven by height, not width, so it takes
   every pixel the screen can spare without pushing the buttons out of view. the box is taller
   than 4/5 on purpose: that spare 7% is the headroom the lifted cap needs to stay inside it */
.qa .stage { height: clamp(160px, min(38vh, 100vh - 400px), 360px); width: auto; aspect-ratio: 4 / 5.35; background: none; border-radius: 0; justify-self: center; overflow: hidden; margin-block: 2px 0; }
/* only the 10 ml vial is lifted - at its true scale it all but disappears in the box. every other
   size is drawn honestly, and none of them can push the open cap past the top edge */
.qa .bottle { position: absolute; bottom: 0; inset-inline-start: 50%; width: 100%; margin-inline-start: -50%; pointer-events: none; }
.qa .bottle.sz-10 { width: 130%; margin-inline-start: -65%; }
/* the name, right under the bottle */
.qa-name { grid-column: 1 / -1; text-align: center; font-family: var(--font-display); font-size: clamp(21px, 5.8vw, 27px); font-weight: 600; line-height: 1.15; letter-spacing: .01em; }
.qa .stage::before { display: none; }
.qa .bt-floor { display: none; }
/* balanced chips: 4 sizes fill a 2x2, 3 sit in one row — never one chip stranded on its own line */
.qa-sizes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.qa-sizes[data-n="1"] { grid-template-columns: minmax(0,1fr); }
.qa-sizes[data-n="3"] { grid-template-columns: repeat(3, minmax(0,1fr)); }
.size-opt { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 6px; min-height: 54px; display: grid; gap: 1px; text-align: center; transition: border-color .3s, background .3s; min-width: 0; background: var(--bg); }
.size-opt b { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1; }
.size-opt b small { font-size: 12px; font-weight: 400; }
.size-opt small { font-size: 12px; color: var(--muted); }
.size-opt .was { display: block; margin: 0; }
.size-opt.active { border-color: var(--rose); background: var(--rose-soft); box-shadow: inset 0 0 0 1px var(--rose); }
/* qty and add share one baseline and one height — they never stack or drift apart */
.qa-row { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: stretch; }
.qa-row .btn { min-width: 0; padding-inline: 12px; overflow: hidden; text-overflow: ellipsis; }
/* controls sit on the glass, so they are tinted rather than filled */
.qa button { -webkit-tap-highlight-color: transparent; }
.qa .size-opt { background: var(--pane-chip); border-color: var(--pane-edge); border-radius: 14px; min-height: 64px; align-content: center; }
.qa .size-opt.active { background: var(--rose-soft); border-color: var(--rose); }
.qa .stepper { background: var(--pane-chip); border-color: var(--pane-edge); }
.qa .stepper.lg { height: var(--qa-h); }
.qa .stepper.lg button { width: 46px; height: 100%; }
.qa .qa-row .btn { min-height: var(--qa-h); height: var(--qa-h); }
/* details: the same pill as add-to-bag, outlined instead of solid — a second button, not stray text */
.qa .qa-more { grid-column: 1 / -1; justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border: 1px solid var(--pane-edge); border-radius: 999px; background: var(--pane-chip); color: var(--ink-2); transition: border-color .3s, color .3s, background .3s; }
.qa .qa-more:hover { color: var(--rose); border-color: var(--rose); }
@media (min-width: 720px) {
  .qa { inset: 0; margin: auto; width: 440px; height: max-content; border-radius: 20px; border: 1px solid var(--pane-edge); padding: 22px 24px 20px; transform: translateY(16px); opacity: 0; transition: transform .5s var(--ease-slow), opacity .3s var(--ease); }
  .qa.open { transform: none; opacity: 1; }
  .qa-handle { display: none; }
  .qa .stage { height: clamp(170px, min(40vh, 100vh - 400px), 380px); }
}

/* product modal — one screen */
.modal { position: fixed; inset-inline: 0; bottom: 0; z-index: 100; width: 100%; height: 100vh; height: 100svh; background: var(--surface); color: var(--ink); overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr auto; transform: translateY(100%); transition: transform .42s var(--ease-slow); }
.modal.open { transform: none; }
.modal-head { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px; min-height: 40px; }
.modal-head::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); }
.modal-close { position: absolute; top: 2px; inset-inline-end: 6px; z-index: 3; background: var(--surface-2); }
.modal-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0,1fr); }
.modal-body > * { min-width: 0; }
.pm { display: grid; grid-template-columns: 38% 1fr; gap: 12px; padding: 0 var(--gutter) 6px; align-items: start; }
/* just the bottle, like the quick-add sheet - no panel behind it, no glow, no floor line.
   overflow stays hidden so the lifted cap can never escape the box it is sized to fit */
.pm-media { position: relative; aspect-ratio: 4 / 5; background: none; border-radius: 0; overflow: hidden; }
.pm-media .stage::before { display: none; }
.pm-media .bt-floor { display: none; }
.pm-media .stage { position: absolute; inset: 0; border-radius: 0; }
/* bottom-anchored and held inside the frame, so the cap has room to swing up without being clipped */
.pm-media .stage .bottle { position: absolute; inset: 0; margin: auto auto 0; width: auto; height: 90%; aspect-ratio: 4 / 5; }
.pm-head h2 { font-size: clamp(22px, 5.6vw, 32px); line-height: 1.05; }
.pm-head .card-house { margin-block-end: 3px; }
.pm-head .tagline { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--muted); margin-top: 4px; line-height: 1.3; }
html[dir="rtl"] .pm-head .tagline { font-style: normal; }
.pm-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pm-meta span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; color: var(--muted); font-weight: 500; }
html[dir="rtl"] .pm-meta span { letter-spacing: 0; font-size: 11.5px; }
.gauges { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 8px; }
.gauge { display: grid; gap: 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
html[dir="rtl"] .gauge { letter-spacing: 0; font-size: 12px; }
.gauge-dots { display: flex; gap: 4px; } .gauge-dots i { width: 100%; height: 4px; border-radius: 2px; background: var(--line); } .gauge-dots i.on { background: linear-gradient(90deg, var(--rose), var(--gold)); }
.pyr { padding: 4px var(--gutter) 0; display: grid; gap: 4px; }
.pyr h3 { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--rose); font-weight: 600; }
html[dir="rtl"] .pyr h3 { letter-spacing: 0; font-size: 12.5px; }
.tier { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); }
.tier b { font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .tier b { letter-spacing: 0; font-size: 12px; }
.tier .nl { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tier .nl::-webkit-scrollbar { display: none; }
.tier .nl span { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 8px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); white-space: nowrap; }
html[dir="rtl"] .tier .nl span { padding: 3px 3px 3px 8px; }
.tier .nl img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
/* on desktop the size grid and price stay pinned above the footer - there is room for it there.
   on phones it is unpinned: 216px of permanently-reserved screen cost more than it bought, and
   the running total is in the add button either way */
.sizes-pick { position: sticky; bottom: 0; z-index: 2; background: var(--surface); box-shadow: 0 -1px 0 var(--line); padding: 10px var(--gutter) 14px; display: grid; gap: 6px; }
.sizes-pick::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 20px; background: linear-gradient(to top, var(--surface), transparent); pointer-events: none; }
.sizes-pick .label { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
html[dir="rtl"] .sizes-pick .label { letter-spacing: 0; font-size: 12px; }
/* balanced like the quick-add sheet: 4 sizes fill a 2x2, 3 sit in one row, none left stranded */
.size-opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.size-opts[data-n="1"] { grid-template-columns: minmax(0,1fr); }
.size-opts[data-n="3"] { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* the price sits centred under the size grid, on the grid's own axis */
.pm-price { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }
/* number and currency share one baseline - Jost digits and the Arabic glyphs have very different
   box heights, and without this they read as two staggered lines rather than one price */
.pm-price .big { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 6px; white-space: nowrap; font-size: 22px; font-family: var(--font-display); font-weight: 600; }
.pm-price .big span { font-family: "Jost", sans-serif; font-size: 21px; }
.pm-price small { color: var(--muted); font-size: 12px; }
/* the footer only ever shows qty + add (in stock) or the notify button (sold out) - never both -
   so one row is enough. qty and the action button share a height, at every width and language */
.modal-foot { --foot-h: 54px; padding: 10px var(--gutter) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface-2); display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: stretch; }
.modal-foot .btn-solid { min-width: 0; }
.modal-foot .btn-wa { padding-inline: 12px; }
.modal-foot .btn-wa span { display: none; }
.modal-foot .btn-wa svg { width: 22px; height: 22px; fill: currentColor; }
.modal-foot .stepper.lg { height: var(--foot-h); }
.modal-foot .stepper.lg button { width: clamp(38px, 11vw, 46px); height: 100%; }
.modal-foot .stepper.lg output { min-width: 28px; }
.modal-foot .btn-solid, .modal-foot .btn-wa { min-height: var(--foot-h); height: var(--foot-h); }
@media (max-width: 899px) { .pm-left, .pm-right { display: contents; } }
@media (min-width: 900px) {
  .modal { inset: 0; margin: auto; width: min(100% - 48px, 1040px); height: min(88vh, 700px); border-radius: var(--r); transform: translateY(20px); opacity: 0; transition: transform .6s var(--ease-slow), opacity .4s var(--ease); grid-template-rows: 0 1fr auto; box-shadow: var(--shadow-2); }
  .modal.open { transform: none; opacity: 1; }
  .modal-head { min-height: 0; padding: 0; } .modal-head::before { display: none; }
  .modal-close { top: 12px; inset-inline-end: 12px; }
  .modal-body { grid-template-columns: 46% 1fr; }
  /* left column is the bottle alone; the copy reads at the top of the right column with the notes
     under it and the size grid pinned at its foot, so there is no dead space below the sizes */
  .pm-left { position: relative; height: 100%; overflow: hidden; }
  .pm { grid-template-columns: minmax(0, 1fr); height: 100%; padding: 26px 26px 22px; }
  .pm-media { position: relative; inset: auto; aspect-ratio: auto; border-radius: 0; height: 100%; min-height: 0; }
  /* the notes column scrolls. a classic scrollbar eats 15px of its content box, and the footer is
     outside that scroller - without the same reserved gutter its edge misses the grid above it */
  .pm-right { padding: 26px 32px 16px; display: grid; gap: 14px; align-content: start; overflow-y: auto; scrollbar-gutter: stable; }
  .pm-head { text-align: start; }
  .pm-head .pm-meta, .pm-head .gauges { justify-content: flex-start; }
  /* the meters are a 5-segment bar, so an over-wide column stretched them into long dashes */
  .pm-head .gauges { max-width: 360px; margin-inline: 0; }
  .pm-head .tagline { max-width: 46ch; margin-inline: 0; }
  .pm-head h2 { font-size: clamp(26px, 2.6vw, 36px); }
  .pyr { padding: 0; }
  .sizes-pick { padding: 12px 0 2px; }
  /* logical, not physical: in RTL the bottle column sits on the right, so the big offset has to
     follow the inline-start side or the footer lines up under the wrong column */
  .modal-foot { padding-block: 12px 20px; padding-inline: calc(46% + 32px) calc(32px + var(--sbw, 0px)); }
  .modal-foot .btn-wa span { display: inline; }
}

.toast { position: fixed; top: max(14px, env(safe-area-inset-top)); inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 40px); z-index: 130; background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 999px; font-size: 13px; display: flex; align-items: center; gap: 10px; transform: translateY(-20px); opacity: 0; transition: transform .5s var(--ease-slow), opacity .4s var(--ease); pointer-events: none; box-shadow: var(--shadow-2); }
.toast.show { transform: none; opacity: 1; }
.toast i { color: var(--gold-2); font-style: normal; }
/* WhatsApp (v153, owner's request: see-through instead of solid green) - frosted glass. Over the film (.on-film, set by
   app.js while the hero is behind it) it is the hero's own glass button: dimmed glass, white hairline, white mark.
   Over the page it is the light glass of the back-to-top button with the mark in WhatsApp green, so it stays
   recognisable and readable on the cream sections. */
.wa-float { position: fixed; bottom: var(--wa-bottom); inset-inline-end: 18px; z-index: 70; width: var(--wa-size); height: var(--wa-size); border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 72%, transparent); color: #1b9d52; border: 1px solid var(--line-2); box-shadow: var(--shadow), inset 0 1px 0 var(--pane-hi); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); transition: transform .5s var(--ease-slow), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
html[data-theme="dark"] .wa-float:not(.on-film) { color: #3bd67a; }
.wa-float.on-film { background: rgba(24,17,15,.26); color: #fff; border-color: rgba(255,255,255,.62); box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28); }
.wa-float.on-film svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .wa-float { background: var(--surface); } .wa-float.on-film { background: rgba(24,17,15,.55); } }
.wa-float:hover { transform: translateY(-3px) scale(1.04); }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }
/* back to top: the rose twin of the WhatsApp disc on the other side. a warm glass face - the
   header's own treatment - with a soft rose halo so it reads as ours instead of a grey circle,
   and the ink arrow for contrast at rest: plain --surface was a cold white disc on the ivory
   page and all but vanished into the dark one. hover fills with the same rose gradient the
   active chips use, with the deep ink arrow .nmode-ic uses on an accent fill - white on rose
   measures 2.0-2.6:1 in either theme, the ink 6.1-9.7:1. desktop only; phones have the
   browser's own way back up. */
.top-btn { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); inset-inline-start: 18px; z-index: 70; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 84%, transparent); color: var(--ink); border: 1px solid var(--line-2); display: none; place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); box-shadow: 0 0 0 4px var(--rose-soft), var(--shadow), inset 0 1px 0 var(--pane-hi); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); transition: opacity .5s var(--ease), transform .5s var(--ease-slow), visibility 0s .5s, background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .top-btn { background: var(--surface); } }
.top-btn.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* after .show on purpose - both are two-class selectors, so source order decides the lift */
.top-btn:hover { background: linear-gradient(140deg, var(--rose-2), var(--rose)); border-color: transparent; color: #2b1f1c; transform: translateY(-3px); box-shadow: 0 0 0 4px var(--rose-soft), 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25); }
.top-btn:active { transform: translateY(-1px) scale(.95); }
.top-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.top-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) { .top-btn { display: grid; } }

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

/* phones: the bottle goes above the copy at full width - beside it the label drew at about 3px
   and the name on the sticker was unreadable. its height is budgeted so the name, tagline, chips,
   gauges and the olfactive pyramid all land above the fold, and the size grid is not pinned here:
   216px of permanently reserved screen cost more than it bought, and the running total is in the
   add button either way */
@media (max-width: 899px) {
  .pm { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
  /* budgeted so the whole product view fits with NO scrolling: the bottle takes what is left after
     the copy, the pyramid, the closest list and the size grid have had their share */
  .pm-media { height: max(142px, min(24vh, 230px, 100vh - 668px)); width: auto; aspect-ratio: 4 / 5; max-width: 100%; }
  .sizes-pick { position: static; box-shadow: none; background: none; }
  .sizes-pick::before { display: none; }
  /* .pm-right is display:contents here, so the head carries its own gutter - and its own bottom
     spacing: without it the 4px meter bars butt straight into the pyramid heading and read as cut */
  .pm-head { text-align: center; width: 100%; padding-inline: var(--gutter); padding-block-end: 8px; }
  .pm-head .gauges { max-width: 320px; margin-inline: auto; }
  .pm-meta, .pm-head .gauges { justify-content: center; }
  .pm-head .tagline { margin-inline: auto; max-width: 34ch; }
}

/* v3.1 */
.carousel { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.car-view { padding-block: 10px; margin-block: -10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; cursor: grab; }
.car-view::-webkit-scrollbar { display: none; }
.car-view.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.car-view.dragging * { pointer-events: none; }
.car-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
.car-track > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .car-view { scroll-behavior: auto; } }
@media (min-width: 768px) { .car-track { grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; } }
.car-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .3s, opacity .3s; }
.car-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
html[dir="rtl"] .car-btn svg { transform: scaleX(-1); }
.car-btn:disabled { opacity: .3; cursor: default; }
.car-btn:not(:disabled):hover { transform: scale(1.06); border-color: var(--rose); color: var(--rose); }
@media (max-width: 480px) { .carousel { grid-template-columns: 1fr; } .car-btn { position: absolute; top: 34%; z-index: 4; } .car-btn.prev { inset-inline-start: -8px; } .car-btn.next { inset-inline-end: -8px; } }
/* the matcher is the one interactive tool on the page and shoppers were scrolling straight past
   it. it now reads as its own banded feature: hairlines top and bottom, a warmer ground, a
   gold-to-rose ribbon on the panel edge and a badge over the heading. all from the brand tokens,
   so it follows the light and dark palettes without a second definition */
.match { position: relative; background: radial-gradient(120% 85% at 50% -15%, var(--rose-soft), transparent 62%), radial-gradient(90% 70% at 100% 118%, var(--gold-soft), transparent 64%), var(--surface-2); border-block: 1px solid var(--line-2); }
/* the 4px gradient cap is a background layer, not an extra element - it reads as a card you act
   on rather than a form, and overflow:hidden already rounds it into the corners */
.match-panel { background: linear-gradient(90deg, var(--gold), var(--rose) 55%, var(--gold-2)) top center / 100% 4px no-repeat, radial-gradient(46% 40% at 4% 2%, var(--rose-soft), transparent 70%), radial-gradient(42% 38% at 97% 99%, var(--gold-soft), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-2); padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 44px) clamp(22px, 4vw, 40px); }
.match .kicker { display: inline-flex; justify-content: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--rose-soft); border: 1px solid var(--rose); color: var(--rose); letter-spacing: .18em; margin-inline: auto; }
.match .kicker::before { display: none; }
.match .section-head.center .kicker { display: inline-flex; }
.match .section-head.center { display: grid; justify-items: center; }
.match .title { font-size: clamp(30px, 5.2vw, 48px); margin-block: 14px 10px; }
.match .sub { max-width: 46ch; }
.match .tabs { margin-inline: auto; }
.match .hint { margin-inline: auto; text-align: center; }
.match .picker { max-width: 720px; margin-inline: auto; }
.match .picked { justify-content: center; }
.nico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-2), var(--rose-2)); color: #fff; font-size: 12px; flex: 0 0 auto; }
.nitem .nico, .picker-item .nico { width: 32px; height: 32px; font-size: 14px; }
.picker-item .nico { width: 36px; height: 36px; }
.pill .nico { width: 28px; height: 28px; }
/* breathing room around the centred logo, sized so each side group always fits inside its half of the
   header (checked in code at 320-1920px, Arabic and English) */
.header .wrap { column-gap: 20px; }
.brand { padding-inline: 12px; gap: 12px; }
@media (max-width: 480px) { .header .wrap { column-gap: 8px; } .brand { padding-inline: 4px; } }
@media (min-width: 1024px) { .header .wrap { column-gap: 28px; } .brand { padding-inline: 20px; gap: 14px; } .nav-desktop { gap: 22px; } }
/* 1024-1279px: the four links (about 380px in Arabic, 465px in English) do not fit half the header beside a
   centred logo, so these widths keep the menu button, as tablets do */
@media (min-width: 1024px) and (max-width: 1279px) { .menu-btn { display: inline-grid; } .nav-desktop { display: none; } }

/* ===== bottle v3.2 — replica of the real Rose Misk bottle & gold label ===== */
.bottle.sz-100 { --gw: 40; --gh: 76; --cw: 25; --ch: 24; --sw: 10; --sh: 8; --ls: 1;   --lt: 9;  --lh: 56; --lx: 19; }
.bottle.sz-50  { --gw: 34; --gh: 70; --cw: 24; --ch: 24; --sw: 9;  --sh: 8; --ls: .9;  --lt: 8;  --lh: 58; --lx: 15; }
.bottle.sz-30  { --gw: 24; --gh: 66; --cw: 23; --ch: 20; --sw: 8;  --sh: 7; --ls: .66; --lt: 8;  --lh: 56; --lx: 8; }
.bottle.sz-10  { --gw: 15; --gh: 40; --cw: 14; --ch: 12; --sw: 5;  --sh: 5; --ls: .42; --lt: 8;  --lh: 56; --lx: 8; }
.bt-glass { border-radius: 6% 6% 7% 7% / 2.5% 2.5% 3% 3%; background: linear-gradient(90deg, var(--glass-hi) 0%, rgba(255,255,255,.3) 8%, var(--glass-lo) 20%, transparent 42%, var(--glass-lo) 68%, rgba(255,255,255,.35) 86%, var(--glass-hi) 100%); }
.bt-glass::after { display: none; }
.bt-liquid { inset: 5% 3% 17% 3%; border-radius: 8% 8% 4% 4% / 4% 4% 2% 2%; opacity: .9; background: linear-gradient(90deg, #e6c57c 0%, #f6e3ad 24%, #fdf2d3 42%, #f4dc98 64%, #dfba68 100%); }
/* thick glass base with the raised "mountain" punt seen in the photos */
.bt-base { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,.18) 60%, rgba(255,255,255,.05)); border-top: 1px solid rgba(255,255,255,.35); overflow: hidden; }
.bt-base::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(120,100,70,.12) 30%, rgba(255,255,255,.25) 50%, rgba(120,100,70,.12) 72%, rgba(255,255,255,.6)); }
.bt-punt { position: absolute; left: 50%; bottom: -2%; width: 62%; height: 78%; margin-left: -31%; border-radius: 50% 50% 8% 8% / 100% 100% 8% 8%; background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(240,225,190,.55) 45%, rgba(255,255,255,.35)); box-shadow: inset 0 calc(-.4 * var(--u)) calc(1 * var(--u)) rgba(120,100,70,.18), 0 calc(.3 * var(--u)) calc(.6 * var(--u)) rgba(255,255,255,.5); }
.bt-punt::after { content: ""; position: absolute; left: 30%; top: 8%; width: 12%; height: 60%; border-radius: 50%; background: rgba(255,255,255,.7); filter: blur(calc(.4 * var(--u))); }
/* gold label, same layout as the printed one */
.bt-label { border-radius: 6%; color: #1e1611; padding: 3.5% 4%; gap: calc(calc(.15 * var(--u)) * var(--ls)); background: linear-gradient(135deg, #e6bc5e 0%, #f5d98c 24%, #dcab45 52%, #f1cf80 78%, #cf9f37 100%); box-shadow: 0 calc(.3 * var(--u)) calc(.9 * var(--u)) rgba(0,0,0,.25), inset 0 0 0 calc(.3 * var(--u)) rgba(255,255,255,.35); }
.bt-label::after { background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.28) 46%, transparent 58%); }
.bt-label .lb-logo { width: 24%; height: auto; aspect-ratio: 60 / 92; color: #1e1611; background: none; -webkit-mask: none; mask: none; margin-bottom: 4%; }
.bt-label .lb-brand { font-family: "Cormorant Garamond", serif; font-size: calc(calc(3.9 * var(--u)) * var(--ls)); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; line-height: 1; }
.bt-label .lb-brand b { font-size: 135%; font-weight: 600; }
.bt-label .lb-ar { font-family: "Amiri", serif; font-size: calc(calc(3.6 * var(--u)) * var(--ls)); font-weight: 700; line-height: 1; margin-top: 1%; }
.bt-label .lb-insp { font-size: calc(calc(2.1 * var(--u)) * var(--ls)); letter-spacing: .14em; margin-top: 5%; opacity: .9; font-weight: 400; }
.bt-label .lb-name { font-size: calc(calc(3.1 * var(--u)) * var(--ls)); font-weight: 700; line-height: 1.12; margin-top: 1%; }
.bt-label .lb-conc { font-size: calc(calc(1.8 * var(--u)) * var(--ls)); letter-spacing: .12em; margin-top: 4%; opacity: .85; }
.bt-cap { border-radius: 7% 7% 4% 4% / 4% 4% 2.5% 2.5%; background: linear-gradient(90deg, #030303 0%, #2a2a2a 12%, #737373 24%, #2c2c2c 38%, #0b0b0b 60%, #3d3d3d 82%, #040404 100%); }
.bt-collar { height: calc(2.2 * var(--u)); }
.pm-media .stage .bottle { aspect-ratio: 4 / 5; }
.bt-label .lb-brand { white-space: nowrap; font-size: calc(calc(3.5 * var(--u)) * var(--ls)); }
.bt-label .lb-logo { width: 30%; }
.bottle.sz-100 { --lx: 17; }
.bottle.sz-50 { --lx: 12; }

/* ===== label = the real printed label (photo crop), only the name is typed ===== */
.bt-label { height: auto !important; aspect-ratio: 185 / 311; padding: 0; gap: 0; border-radius: 4%; box-shadow: 0 calc(.3 * var(--u)) calc(.9 * var(--u)) rgba(0,0,0,.25); display: block; }
.bt-label::after { background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 47%, transparent 58%); }
.bt-label .lb-logo, .bt-label .lb-brand, .bt-label .lb-ar, .bt-label .lb-insp, .bt-label .lb-conc { display: none; }
.bt-label .lb-name { position: absolute; left: 4%; right: 4%; top: 80.5%; height: 14%; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; color: #1a1410; font-family: "Jost", "Arial", sans-serif; font-weight: 700; font-size: calc(calc(2.9 * var(--u)) * var(--ls)); line-height: 1.05; letter-spacing: .01em; }
.bottle.sz-100 { --lx: 19; --lt: 9; }
.bottle.sz-50  { --lx: 12; --lt: 8; }
.bottle.sz-30  { --lx: 8;  --lt: 8; }
.bottle.sz-10  { --lx: 8;  --lt: 8; }
.bt-label .lb-name { font-size: calc(calc(2.7 * var(--u)) * var(--ls)); }

/* ===== label v3.4: the printed design (ink layer extracted from the label) on a clean gold ===== */
.bt-label { background: linear-gradient(160deg, #eccb72 0%, #d8ad4c 38%, #e9c466 62%, #cfa03c 100%); box-shadow: 0 calc(.3 * var(--u)) calc(.9 * var(--u)) rgba(0,0,0,.25), inset 0 0 0 calc(.25 * var(--u)) rgba(255,255,255,.28); }
.bt-label::before { content: ""; position: absolute; inset: 0; background: #1c1612; -webkit-mask: url("../assets/label-art-v2.png") center / 100% 100% no-repeat; mask: url("../assets/label-art-v2.png") center / 100% 100% no-repeat; }
.bt-label::after { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.26) 45%, transparent 60%); }
.bt-label .lb-name { top: 80.5%; height: 15%; color: #1c1612; }
.bt-label { aspect-ratio: 185 / 314; background-image: none; }
.bt-label .lb-name { top: 79%; height: 15%; }
/* EXTRAIT DE PARFUM typed cleanly instead of the low-res photo line */
.bt-label .lb-conc { display: flex !important; position: absolute; left: 4%; right: 4%; top: 93.2%; height: 5.5%; align-items: center; justify-content: center; margin: 0; opacity: 1; color: #1c1612; font-family: "Jost", "Arial", sans-serif; font-weight: 400; font-size: calc(calc(1.55 * var(--u)) * var(--ls)); letter-spacing: .17em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.bt-label .lb-name { line-height: 1.05; text-wrap: balance; overflow: hidden; padding-inline: 2%; }
/* label bands: INSPIRED BY (ink layer) ends at ~79.6% → name 80.5–92%, EXTRAIT 92.8–98% — no box overlap */
.bt-label .lb-name { top: 80.5% !important; height: 11.5% !important; }
.bt-label .lb-conc { top: 92.8% !important; height: 5.2% !important; }
/* add-to-bag: label and price stay on one line at every width. one continuous clamp instead of a
   ladder of per-breakpoint sizes, so there is no width where the type is a step too big to fit */
.modal-foot .btn-solid, .qa-row .btn { white-space: nowrap; overflow: visible; text-overflow: clip; line-height: 1.15; padding-inline: clamp(10px, 3vw, 16px); letter-spacing: .06em; font-size: clamp(11px, 2.85vw, 13px); }
html[dir="rtl"] .modal-foot .btn-solid, html[dir="rtl"] .qa-row .btn { letter-spacing: 0; font-size: clamp(12px, 3.3vw, 15px); }
@media (max-width: 620px) {
  .qa-row { grid-template-columns: auto minmax(0,1fr); }
}
/* very narrow phones: a narrower stepper buys the button its width back, rather than stacking rows */
@media (max-width: 360px) {
  .qa { --qa-h: 50px; }
  .qa .stepper.lg button { width: 38px; }
  .qa .stepper.lg output { min-width: 26px; }
  .qa .size-opt { min-height: 58px; }
  .modal-foot { --foot-h: 50px; }
}


/* ===== notes filter side panel ===== */
/* the group chips were a scroll container inside a grid, so the track collapsed to the
   padding (8px) and clipped 46px chips; wrapping shows all eleven groups at once */
.npanel .ncats { display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; margin: 0; padding: 0; }
.npanel .ncat { flex: 0 0 auto; min-height: 36px; padding-inline: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.npanel .ncat small { font-size: 11px; color: var(--muted); font-family: "Jost", sans-serif; font-variant-numeric: tabular-nums; }
.npanel .ncat.active small { color: rgba(255,255,255,.85); }
/* a clear header for the browse block instead of one small grey line */
.np-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.np-sec h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.np-sec span { font-size: 12px; color: var(--muted); white-space: nowrap; }

.np-open { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow); transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease); }
.np-open:hover { border-color: var(--rose); transform: translateY(-1px); }
.np-open.has { background: var(--rose-soft); border-color: var(--rose); }
.np-open-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); color: var(--rose); flex: none; }
.np-open.has .np-open-ic { background: var(--rose); color: #fff; }
.np-open-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.np-open-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-open-t b { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.15; }
.np-open-t small { font-size: 12.5px; color: var(--muted); }
.np-open-go { color: var(--muted); display: grid; place-items: center; }
.np-open-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
html[dir="rtl"] .np-open-go svg { transform: scaleX(-1); }

.npanel { width: min(100%, 460px); }
.npanel .drawer-body { display: grid; gap: 14px; align-content: start; }
.npanel .picker input { box-shadow: none; }
.npanel .ncats { margin-block: 0; }
.npanel .ngrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.np-browse { margin: 4px 0 0; }
.np-picked:empty { display: none; }
.np-foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.np-clear { color: var(--rose); font-weight: 500; font-size: 13px; white-space: nowrap; }
.np-foot .btn-solid { width: 100%; min-width: 0; white-space: normal; line-height: 1.2; padding-inline: 12px; }
.np-handle { display: none; }

/* on a phone it comes up from the bottom like a sheet, and can be swiped away */
@media (max-width: 899px) {
  .npanel { top: auto; inset-inline: 0; bottom: 0; width: 100%; height: 88vh; height: 88svh; border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .npanel.open, html[dir="rtl"] .npanel.open { transform: none; }
  .np-handle { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 8px auto 0; flex: none; }
  .npanel .drawer-head { padding-block: 6px 10px; min-height: 0; }
}

/* ===== desktop filter sidebar ===== */
.flayout { display: block; }
.fside { display: none; }

@media (min-width: 1000px) {
  /* phones keep the compact bar + sheet; desktop gets a persistent sidebar */
  .fbar-wrap { display: none; }
  .flayout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; }
  .fside { display: block; position: sticky; top: calc(var(--header-h) + 14px); max-height: calc(100svh - var(--header-h) - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline-end: 4px; }
  .fside::-webkit-scrollbar { width: 6px; }
  .fside::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
  .fmain { min-width: 0; }
  .fmeta { margin-block: 0 18px; }
}

.fside-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-block-end: 12px; border-bottom: 1px solid var(--line); }
.fside-head h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.fside-reset { color: var(--rose); font-size: 12.5px; font-weight: 500; }
.fside-reset:hover { text-decoration: underline; }

/* the collection search sits at the head of the sidebar, above the first filter group */
.fside-search { margin-block: 14px 2px; background: var(--bg); box-shadow: none; }
.fside-search:focus-within { border-color: var(--rose); }

.fgrp { border-bottom: 1px solid var(--line); }
.fgrp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding-block: 14px; text-align: start; }
.fgrp-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.fgrp-t em { font-style: normal; font-size: 12px; color: var(--rose); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the +/- toggle: two bars, the vertical one folds away when the group is open */
.fgrp-pm { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); transition: border-color var(--dur), background var(--dur); }
.fgrp-pm::before, .fgrp-pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); border-radius: 1px; transition: transform .3s var(--ease), opacity .3s; }
.fgrp-pm::before { width: 9px; height: 1.5px; transform: translate(-50%, -50%); }
.fgrp-pm::after { width: 1.5px; height: 9px; transform: translate(-50%, -50%); }
.fgrp.open .fgrp-pm::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.fgrp-head:hover .fgrp-pm { border-color: var(--rose); background: var(--rose-soft); }
.fgrp-body { padding-block: 0 16px; }
.fgrp-body .opts { gap: 6px; }
.fgrp-body .opt { min-height: 34px; padding-inline: 12px; font-size: 12.5px; }
.fgrp-body .brand-search { margin-block-end: 8px; }
.fgrp-body .brand-list { grid-template-columns: 1fr; max-height: 230px; }
.fgrp-body .brand-list .opt { justify-content: space-between; }

/* ===== notes: pick a mode, then tap notes ===== */
.nmode { display: grid; gap: 8px; }
.nmode-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 50px; padding-inline: 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; font-weight: 500; line-height: 1.25; text-align: start; white-space: nowrap; transition: border-color var(--dur), background var(--dur), color var(--dur); }
.nmode-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); flex: none; transition: background var(--dur), color var(--dur); }
.nmode-ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nmode-btn:hover { border-color: var(--rose); }
.nmode-btn[data-nmode="inc"].on { background: var(--gold-soft); border-color: var(--gold); }
.nmode-btn[data-nmode="inc"].on .nmode-ic { background: var(--gold); color: #2b1f1c; }
.nmode-btn[data-nmode="exc"].on { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); color: var(--danger); }
.nmode-btn[data-nmode="exc"].on .nmode-ic { background: var(--danger); color: #fff; }
@media (max-width: 360px) { .nmode-btn { font-size: 13px; padding-inline: 10px; } }

/* the two lists of chosen notes */
.ngroups { display: grid; gap: 12px; }
.ngroups:empty { display: none; }
.ngroup-t { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-block-end: 6px; }
html[dir="rtl"] .ngroup-t { letter-spacing: 0; font-size: 12.5px; }
.ngroup-t b { font-family: "Jost", sans-serif; font-variant-numeric: tabular-nums; }
.ngroup.inc .ngroup-t { color: var(--gold); }
.ngroup.exc .ngroup-t { color: var(--danger); }
.ngroup .picked { margin-top: 0; }


/* ---------- pages ---------- */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-block: 34px 4px; }
.pager button { min-width: 42px; height: 42px; padding-inline: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-family: "Jost", sans-serif; font-variant-numeric: tabular-nums; font-size: 14px; display: grid; place-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pager button:hover:not(:disabled) { border-color: var(--rose); color: var(--rose); }
.pager .pg-num.active { background: var(--rose); border-color: var(--rose); color: #fff; }
.pager .pg-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pager .pg-nav.next svg { transform: scaleX(-1); }
html[dir="rtl"] .pager .pg-nav svg { transform: scaleX(-1); }
html[dir="rtl"] .pager .pg-nav.next svg { transform: none; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .pg-gap { color: var(--muted); padding-inline: 2px; }
@media (max-width: 420px) { .pager { gap: 4px; } .pager button { min-width: 38px; height: 38px; font-size: 13px; padding-inline: 6px; } }


/* ---------- three per row on phones ---------- */
@media (max-width: 767px) {
  .grid > .card { contain-intrinsic-height: auto 210px; }
  .grid .card-body { padding-inline: 2px; gap: 1px; }
  .grid .card-house { font-size: 9px; letter-spacing: .06em; }
  html[dir="rtl"] .grid .card-house { font-size: 10px; letter-spacing: 0; }
  .grid .card-name { font-size: 14px; line-height: 1.2; }
  .grid .card-family { display: none; }
  .grid .card-price { font-size: 12px; gap: 4px; margin-top: 1px; }
  .grid .card-price small { font-size: 9.5px; }
  .grid .card-price .was { font-size: 10px; }
  .grid .badges { top: 5px; inset-inline-start: 5px; gap: 3px; }
  .grid .badge { font-size: 8px; letter-spacing: .04em; padding: 3px 6px; }
  html[dir="rtl"] .grid .badge { font-size: 9px; letter-spacing: 0; }
  .grid .match-badge { font-size: 9px; padding: 3px 6px; }
  /* the written label cannot fit a ~106px card - a round + instead */
  .grid .card-quick { inset-inline: auto; inset-inline-end: 6px; bottom: 6px; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; font-size: 0; }
  .grid .card-quick::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 21px; line-height: 1; letter-spacing: 0; }
  /* html[dir="rtl"] .card-quick above sets 14px and outranks a two-class selector, so the
     Arabic label has to be zeroed here too - same line the desktop block already carries */
  html[dir="rtl"] .grid .card-quick { font-size: 0; }
}
/* ---------- phones 360px and under ---------- */
/* the header row (menu + logo + language/theme/bag) needs ~323px, more than a 320px screen
   minus its gutters: the bag button was cut off at the screen edge on small phones */
@media (max-width: 360px) {
  .header .wrap { column-gap: 6px; }
  .header-left { gap: 0; }
  .brand { padding-inline: 2px; }
  .brand .mark { width: 60px; height: 60px; }
  .header .icon-btn, .header .lang-btn { width: 40px; }
  .lang-btn { padding-inline: 4px; font-size: 12px; }
  html[dir="ltr"] .lang-btn { font-size: 14px; }
}
/* 320px: the two icons and the letter button have to fit a 106px half beside the centred logo */
@media (max-width: 340px) { .header .icon-btn, .header .lang-btn { width: 36px; } }
/* small text links keep their look but get a finger-sized hit area */
.link, .fmeta .clear, .mnav-foot a { display: inline-flex; align-items: center; min-height: 36px; }

/* the typed label lines must never be inflated by a browser's text autosizing */
.bt-label, .bt-label .lb-name, .bt-label .lb-conc { -webkit-text-size-adjust: none; text-size-adjust: none; }

/* in-app browsers (html.inapp): the two typed label lines are painted into a canvas that
   covers the 80.5-98% band of the label and scales with it by percentages alone */
html.inapp .bt-label .lb-name, html.inapp .bt-label .lb-conc { visibility: hidden; }
.lb-img { position: absolute; left: 0; right: 0; top: 80.5%; height: 17.5%; width: 100%; display: block; pointer-events: none; }

/* coming soon: not orderable yet, shown with its own badge and no price (2026-09-05) */
.badge.soon { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #fff; border: 0; }
/* coming-soon bottles are faded like sold-out ones (user request 2026-09-05); only the badge stays gold */
.soon-txt { color: var(--rose); font-weight: 600; }
.pm-price .big.soon-txt { font-size: 18px; }
.soon-msg { margin: 8px 0 0; text-align: center; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* closest fragrances inside the product modal (2026-09-05) */
.pm-similar { margin-top: 14px; }
.pm-similar h3 { font-size: 14px; margin: 0 0 8px; }
.sim-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 13px; cursor: pointer; }
.sim-chip b { color: var(--rose); font-family: "Jost", sans-serif; font-weight: 600; }
.sim-chip:hover { border-color: var(--rose); }

/* the old price sits above the current one (2026-09-05) */
.card-price { flex-direction: column; align-items: flex-start; gap: 0; }
.card-price .was { display: block; }
.pm-price .big .was { flex: 0 0 100%; font-size: 14px; }

/* info sheet (delivery / returns / FAQ from Supabase) */
.info-body { padding: 4px 18px 24px; line-height: 1.8; font-size: 15px; }
.info-body p { margin: 0 0 12px; }
.info-body p.q { font-weight: 700; margin-top: 16px; margin-bottom: 4px; color: var(--rose); }
@media (min-width: 900px) { .fsheet.info { max-width: 620px; inset-inline: auto; left: 50%; transform: translateX(-50%); border-radius: 18px; bottom: 6vh; max-height: 80vh; } }

/* order confirmation inside the bag */
.order-done { text-align: center; padding: 28px 12px; display: grid; gap: 12px; justify-items: center; }
.order-done i { font-style: normal; color: var(--gold); font-size: 30px; }
.order-done h3 { margin: 0; font-size: 22px; }
.order-done .order-no { font-size: 16px; } .order-done .order-no b { font-family: "Jost", sans-serif; color: var(--rose); font-size: 20px; direction: ltr; unicode-bidi: isolate; }
.order-done p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 34ch; }
.order-done .btn { width: 100%; max-width: 320px; }

/* transfer instructions under the payment choice */
.pay-note { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--gold); font-size: 13px; line-height: 1.6; }
.pay-note b { font-family: "Jost", sans-serif; font-size: 15px; color: var(--rose); unicode-bidi: isolate; }

/* modal footer: notify-me WhatsApp button for unavailable perfumes */
.modal-foot > [hidden] { display: none !important; }
/* sold out: the notify button takes the whole row. grid-area must be reset BEFORE the span -
   as a shorthand it silently resets grid-column back to auto if it comes after */
.modal-foot .btn-wa.notify { grid-area: auto; grid-column: 1 / -1; padding-inline: 16px; }
.modal-foot .btn-wa.notify span { display: inline; margin-inline-start: 8px; font-weight: 600; }

/* closest fragrances: same gutter and heading style as the pyramid so the block lines up with the other sections */
.pm-similar { margin: 2px 0 0; padding: 6px var(--gutter) 2px; display: grid; gap: 8px; }
.pm-similar h3 { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--rose); font-weight: 600; margin: 0; }
.sim-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.sim-chip { padding: 6px 12px; }

/* short phones: the pinned size block is the biggest fixed cost on screen, so trim it there -
   that room goes straight to the bottle and to the copy under it staying above the fold */
@media (max-width: 899px) and (max-height: 730px) {
  .sizes-pick { padding: 6px var(--gutter) 10px; gap: 4px; }
  .sizes-pick .label { display: none; }
  .modal .size-opt { min-height: 46px; padding: 6px 4px; }
  .modal .size-opt b { font-size: 18px; }
  .modal .size-opt small, .modal .size-opt .was { font-size: 11px; }
  .pm-head .gauges { margin-top: 4px; }
}

/* desktop: head + pyramid + closest + the pinned size grid all have to sit in one column without
   scrolling. the room comes from tighter rhythm everywhere rather than from dropping a block */
@media (min-width: 900px) {
  .pm-right { padding-block: 20px 10px; gap: 8px; }
  .pm-head .tagline { margin-top: 3px; }
  .pm-head .pm-meta { margin-top: 5px; }
  .pm-head .gauges { margin-top: 5px; }
  .pyr h3, .pm-similar h3 { margin-block-end: 2px; }
  .tier { gap: 2px; }
  .tier .nl img { width: 20px; height: 20px; }
  .tier .nl span { padding-block: 2px; }
  .pm-similar { gap: 5px; margin-top: 0; padding-block: 2px; }
  .sizes-pick { padding-block: 8px 2px; gap: 4px; }
  .sizes-pick .label { display: none; }
  .modal .size-opt { min-height: 44px; padding: 5px 4px; }
  .modal .size-opt b { font-size: 17px; }
  .modal .size-opt small, .modal .size-opt .was { font-size: 11px; }
}

/* One reading order everywhere: notes, then closest fragrances beneath them, then the size grid.
   Stacked, closest costs the column ~105px it used to save by sitting beside the notes, so the
   rhythm below is tightened to keep the pinned size grid in view without scrolling. */
@media (min-width: 900px) {
  .pm-similar { margin: 0; padding-block: 2px; }
  .pm-similar .sim-list { flex-wrap: wrap; }
}
/* the matcher reads as a framed feature, not another band of text: gradient seams top and bottom,
   a soft rose/gold aura behind the panel, and the two choices as full choice-cards. built from the
   brand tokens so it follows light and dark without a second palette. */
.match::before, .match::after { content: ""; position: absolute; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--rose) 50%, var(--gold), transparent); }
.match::before { top: 0; } .match::after { bottom: 0; }
.match .wrap { position: relative; }
/* the aura sits behind the panel and is what makes the block catch the eye while scrolling */
.match .wrap::before { content: ""; position: absolute; inset: -6% -4%; background: radial-gradient(60% 55% at 50% 0%, var(--rose-soft), transparent 70%), radial-gradient(50% 45% at 100% 100%, var(--gold-soft), transparent 70%); filter: blur(18px); pointer-events: none; }
.match .wrap > * { position: relative; }
.mtabs .mtab { padding: 15px 14px; border-radius: 18px; }
.mtab-ic { width: 44px; height: 44px; }
.mtab-t b { font-size: 19px; }
.mtabs .mtab.active { box-shadow: 0 10px 26px var(--rose-soft), var(--shadow); }





/* the matcher's illustration is drawn as vector, not exported art: symmetric by construction (one
   half authored, the other mirrored), crisp at every size and DPR, ~3KB, and it takes its colours
   from the brand tokens so one drawing serves the cream theme and the dark one.
   NOTE: clipping lives on .match-art, never on .match-panel - the panel must stay overflow:visible
   or it cuts off the fragrance dropdown again. */
.match-panel { display: grid; padding: 0; background: radial-gradient(46% 40% at 4% 2%, var(--rose-soft), transparent 70%), radial-gradient(42% 38% at 97% 99%, var(--gold-soft), transparent 70%), var(--surface); }
.match-body { position: relative; padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 40px) clamp(24px, 4vw, 36px); min-width: 0; }

/* the matcher's illustration: a designer-drawn line graphic from Canva's element library,
   recoloured to the brand rose in Canva, exported with a transparent background and trimmed to its
   content — so one file sits on the cream theme and the dark one with no plate behind it.
   NOTE: clipping lives on .match-art, never on .match-panel - the panel must stay overflow:visible
   or it cuts off the fragrance dropdown again. */
.match-panel { display: grid; padding: 0; background: radial-gradient(46% 40% at 4% 2%, var(--rose-soft), transparent 70%), radial-gradient(42% 38% at 97% 99%, var(--gold-soft), transparent 70%), var(--surface); }
.match-body { position: relative; padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 40px) clamp(24px, 4vw, 36px); min-width: 0; }
/* the gold ribbon rides the body, so the art column never covers half of it */
.match-body::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--rose) 55%, var(--gold-2)); }
/* the glow is a background on the box: `closest-side` always inscribes a circle in the shorter
   dimension, so it can never stretch into a smear across the banner or a stripe down the column */
.match-art { position: relative; overflow: hidden; display: grid; place-items: center; padding: 14px; background: radial-gradient(circle closest-side at 50% 50%, var(--rose-soft), var(--gold-soft) 58%, transparent 100%); }
/* bounded by BOTH axes: with only max-width set, a short banner sized the image from its width and
   it overflowed the box by 200px, clipped by overflow:hidden */
.art-img { position: relative; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* the drawing is dark-rose linework: on the dark theme it needs lifting to read */
html[data-theme="dark"] .art-img { filter: brightness(1.22) saturate(.92); }
/* phones: the whole drawing, scaled to fit */
/* explicit px height on phones: a percentage max-height does not resolve against a centred grid
   item, so the image sized itself from the width and overflowed the short banner */
.match-art { height: 168px; }
.art-img { height: 140px; }
@media (min-width: 860px) {
  .match-panel { grid-template-columns: 290px minmax(0, 1fr); }
  .match-art { height: auto; padding: 26px 18px; }
  .art-img { height: auto; max-height: 420px; }
  .match-body::before { border-start-end-radius: 25px; }
}
@media (min-width: 1100px) { .match-panel { grid-template-columns: 330px minmax(0, 1fr); } }

/* phones: the product view has to hold the bottle, the copy, the pyramid, the closest list AND the
   size grid in one screen with no scrolling - so the vertical rhythm is tightened throughout */
@media (max-width: 899px) {
  .pm { gap: 4px; }
  .pm-head .tagline { margin-top: 2px; }
  .pm-head .pm-meta { margin-top: 4px; gap: 3px; }
  .pm-head .gauges { margin-top: 4px; gap: 10px; }
  .pyr { padding-block: 2px; }
  .pyr h3, .pm-similar h3 { margin-block-end: 2px; }
  .tier { gap: 2px; }
  .tier .nl img { width: 20px; height: 20px; }
  .tier .nl span { padding-block: 2px; }
  .pm-cols { gap: 4px; }
  .pm-similar { padding-block: 2px; gap: 4px; }
  .sizes-pick { padding-block: 6px 4px; gap: 4px; }
  .sizes-pick .label { display: none; }
  .modal .size-opt { min-height: 46px; padding: 5px 4px; }
  .modal .size-opt b { font-size: 17px; }
  .modal .size-opt small, .modal .size-opt .was { font-size: 11px; }
}

/* phones: the flacon sits ABOVE the copy, full width. the copy, the pyramid and the size grid are
   budgeted to land above the fold; "closest fragrances" is the one block allowed to sit below it,
   because it is the only one a shopper can skip without losing the purchase decision. */
@media (max-width: 899px) {
  .pm { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pm-media { height: max(150px, min(26vh, 240px, 100vh - 622px)); width: auto; aspect-ratio: 4 / 5; max-width: 100%; margin-inline: auto; }
  .pm-head { text-align: center; width: 100%; padding-inline: var(--gutter); }
  .pm-head h2 { font-size: clamp(21px, 5.8vw, 27px); }
  .pm-head .tagline { font-size: 13.5px; line-height: 1.45; margin-inline: auto; max-width: 36ch; }
  .pm-head .pm-meta, .pm-head .gauges { justify-content: center; }
  .pm-head .pm-meta span { font-size: 10px; padding: 3px 8px; }
  .pm-head .gauges { max-width: 300px; margin-inline: auto; }
}

/* phones: with the flacon beside the copy the view fits with ~120px to spare, and leaving that as
   a gap under the size grid is what made the screen look top-heavy. it is spent back on the
   vertical rhythm instead - bigger note chips, taller size buttons, real gaps between blocks. */
@media (max-width: 899px) {
  .modal-body { row-gap: 6px; }
  .pm-head { padding-block-end: 10px; }
  .pm-cols { gap: 10px; }
  .pyr { padding-block: 4px; }
  .tier { gap: 4px; }
  .tier .nl img { width: 26px; height: 26px; }
  .tier .nl span { padding-block: 4px; }
  .pm-similar { padding-block: 4px; gap: 8px; }
  .sizes-pick { padding-block: 10px 8px; gap: 8px; }
  .modal .size-opt { min-height: 58px; padding: 8px 6px; }
  .modal .size-opt b { font-size: 19px; }
  .modal .size-opt small, .modal .size-opt .was { font-size: 12px; }
}

/* the longevity/sillage meters read as two stray hairlines floating above a gap: the bars are only
   4px tall and the block carried 16px of space beneath it. thicker bars, tighter gap, and the
   labels sit on the same line as their meter so the pair reads as one row. */
@media (max-width: 899px) {
  .pm-head { padding-block-end: 2px; }
  .pm-head .gauges { margin-top: 8px; gap: 14px; }
  .pm-head .gauge { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 7px; }
  .pm-head .gauge-dots { gap: 3px; }
  .pm-head .gauge-dots i { height: 6px; border-radius: 3px; }
}

/* phones: the size grid is PINNED to the foot of the scroller - it is the buy control, so it should
   never scroll away. Everything else (flacon, copy, notes, closest) scrolls behind it, which also
   frees the flacon to be large again. The closest block carries bottom padding so its last row can
   clear the pinned grid when you reach the end. */
@media (max-width: 899px) {
  .sizes-pick { position: sticky; bottom: 0; z-index: 2; background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
  .sizes-pick::before { display: block; }
  .pm-similar { padding-block-end: 8px; }
  /* the flacon takes what is left after the copy, the FULL pyramid and the pinned size grid */
  .pm-media { height: max(150px, min(24vh, 215px, 100vh - 600px)); }
}

/* short desktop windows: stacking closest under the notes costs the column ~105px it used to save
   by sitting beside them, and below ~700px tall that is more than the column has. the room comes
   out of the rhythm rather than out of a block. */
@media (min-width: 900px) and (max-height: 700px) {
  .pm-right { padding-block: 14px 8px; gap: 6px; }
  .pm-head .tagline { margin-top: 2px; }
  .pm-head .pm-meta, .pm-head .gauges { margin-top: 3px; }
  .pyr h3, .pm-similar h3 { margin-block-end: 1px; font-size: 10px; }
  .tier { gap: 1px; }
  .tier .nl img { width: 18px; height: 18px; }
  .tier .nl span { padding-block: 1px; }
  .pm-similar { padding-block: 0; }
  .pm-similar .sim-chip { padding: 4px 9px; }
  .sizes-pick { padding-block: 6px 2px; gap: 3px; }
  .modal .size-opt { min-height: 40px; padding: 4px; }
  .modal .size-opt b { font-size: 16px; }
}

/* One alignment for every line of copy on phones. Measured against the longest 100 ml name, the
   tagline sat 64px inside the column (max-width + auto margins) and the meters 21px inside it,
   while the house, name, chips, pyramid, sizes and closest all began at the same edge. The head is
   also set to start-align so headings and body share one edge from the top of the sheet down. */
@media (max-width: 899px) {
  .pm-head { text-align: start; }
  .pm-head .tagline { max-width: none; margin-inline: 0; }
  .pm-head .gauges { max-width: none; margin-inline: 0; }
  .pm-head .pm-meta, .pm-head .gauges { justify-content: flex-start; }
}

/* Desktop measured against the longest 100 ml name: "closest fragrances" carried its own
   var(--gutter) on top of the column's 32px padding, so at 1440px it sat 56px inside every other
   block on BOTH sides; the tagline stopped 201px short of the column and the meters 123px short.
   All three now run to the same two edges as the house, name, chips, pyramid, sizes and footer. */
@media (min-width: 900px) {
  .pm-similar { padding-inline: 0; }
  .pm-head .tagline { max-width: none; }
  .pm-head .gauges { max-width: none; }
}

/* the "price on arrival" state was the last centred block in a start-aligned sheet: on an
   unavailable product it and its note sat on their own axis while every other line ran to the
   column edge. they now share the same edge as the rest of the copy. */
.pm-price { justify-content: flex-start; text-align: start; }
.soon-msg { text-align: start; }




/* ---------- صورة الأزازة الأصلية ---------- */
/* أزازة روز مسك تبقى هي المنتج، وبجانبها صورة الأزازة الأصلية كعلامة تعريف تقول للعميل
   "ده العطر اللي تقصده". الخلفية شفافة، والتوهج حول الأزازة هو ما يفصلها عن الكارت:
   ظل داكن في النسخة الفاتحة، وهالة فاتحة في المظلمة وإلا ذابت الأزايز السوداء في الخلفية. */
.ghost { position: absolute; z-index: 3; pointer-events: none; background: none; display: grid; place-items: center; }
.card-media .ghost { bottom: 6px; inset-inline-start: 6px; width: 34px; height: 44px; }
.ghost img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.32)) drop-shadow(0 0 1px rgba(255,255,255,.5)); }
html[data-theme="dark"] .ghost img { filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
/* في صفحة المنتج المساحة أوسع، فالصورة أكبر وتقف في الركن السفلي بعيدًا عن الأزازة */
.pm-media .ghost.big { bottom: 4%; inset-inline-start: 6%; width: 54px; height: 70px; }
@media (min-width: 640px) { .card-media .ghost { width: 44px; height: 56px; bottom: 9px; inset-inline-start: 9px; } .pm-media .ghost.big { width: 66px; height: 86px; } }

/* Shield: honeypot field in the checkout form. Off-screen and unfocusable for people; a bot that fills every input trips it. */
.form .hp { position: absolute; inset-inline-start: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ريل "الأكثر مبيعًا": الزرار العريض كان ياخد عرض الكارت كله ويغطّي الأزازة، فصار دائرة "+" في كل
   المقاسات مثل الشبكة على الموبايل - وفي الركن المقابل لصورة الأزازة الأصلية فلا يتراكبان. */
.car-track .card-quick { inset-inline: auto; inset-inline-end: 8px; bottom: 8px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; font-size: 0; letter-spacing: 0; opacity: 1; transform: none; }
.car-track .card-quick::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 400; line-height: 1; letter-spacing: 0; }
html[dir="rtl"] .car-track .card-quick { font-size: 0; }
.car-track .card:hover .card-quick { transform: none; opacity: 1; }
@media (min-width: 768px) { .car-track .card-quick { width: 40px; height: 40px; min-height: 40px; inset-inline-end: 10px; bottom: 10px; } .car-track .card-quick::before { font-size: 24px; } }
/* صفحة الإضافة السريعة: صورة الأزازة الأصلية في ركن المسرح، أكبر قليلًا لأن المساحة أوسع.
   المُعدِّل اسمه "sheet" لا "qa": الشيت نفسه يحمل كلاس .qa وله transform لأنيميشن الظهور،
   فأي عنصر بنفس الاسم كان يرث الإزاحة ويخرج من المسرح. */
.ghost.sheet { bottom: 6%; inset-inline-start: 4%; width: 46px; height: 60px; }
@media (min-width: 640px) { .ghost.sheet { width: 56px; height: 72px; } }

/* الديسك توب: الزرار العريض "أضف بسرعة" كان يمتد عرض الكارت ويغطّي الأزازة، فصار دائرة "+" مثل
   الموبايل. الزرار في نهاية السطر وصورة الأزازة الرسمية في بدايته فلا يتراكبان. */
@media (min-width: 768px) {
  .grid .card-quick { inset-inline: auto; inset-inline-end: 10px; bottom: 10px; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; font-size: 0; letter-spacing: 0; }
  .grid .card-quick::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: 0; }
  html[dir="rtl"] .grid .card-quick { font-size: 0; }
}