/* ADR Beauty — Maison Counter, 2026
   Crisp beauty retail, black controls, muted burgundy used for offers only. */

:root,
html[data-theme="light"] {
  --maison-black: #090909;
  --maison-ink: #171717;
  --maison-paper: #f5f4f1;
  --maison-soft: #eceae5;
  --maison-white: #fff;
  --maison-muted: #6e6b65;
  --maison-line: #d8d5cf;
  --maison-wine: #6d1d35;
  --maison-wine-deep: #4f1024;
  --maison-width: 1440px;
  --maison-pad: clamp(20px, 4vw, 64px);
  --bg: var(--maison-paper);
  --surface: #fff;
  --surface-2: #efede8;
  --surface-3: #e5e2dc;
  --text: var(--maison-ink);
  --muted: var(--maison-muted);
  --brand: var(--maison-black);
  --brand-2: #2b2b2b;
  --brand-3: #555;
  --line: rgba(9, 9, 9, .16);
  --line-strong: rgba(9, 9, 9, .38);
  --card: #fff;
  --r-xs: 0;
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-full: 0;
  --radius: 0;
  --shadow: 0 16px 50px rgba(0, 0, 0, .08);
  --shadow-card: none;
  --glow: none;
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0d0d0d;
  --surface: #151515;
  --surface-2: #1e1e1e;
  --surface-3: #282828;
  --text: #f7f6f2;
  --muted: #aaa69f;
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .36);
  --card: #151515;
  --brand: #fff;
  --brand-2: #ddd;
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 128px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", "Noto Kufi Arabic", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
  font-family: "Manrope", "Noto Kufi Arabic", Arial, sans-serif;
}

h1,
h2,
h3,
.ds-title,
.hero-title {
  color: inherit;
  font-family: "Prata", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.035em;
  text-wrap: balance;
}

button,
.btn,
.ds-btn,
.icon-btn,
.lang-btn,
.theme-btn,
.maison-btn,
.ds-pcard-btn,
input,
select,
textarea,
.search-form,
.ds-panel,
.ds-pcard,
.ds-category-tile {
  border-radius: 0 !important;
}

.btn,
.ds-btn,
.maison-btn,
.ds-pcard-btn,
button[type="submit"] {
  background: var(--maison-black);
  border: 1px solid var(--maison-black);
  box-shadow: none;
  color: #fff;
}

.btn:hover,
.ds-btn:hover,
.maison-btn:hover,
.ds-pcard-btn:hover,
button[type="submit"]:hover {
  background: #2d2d2d;
  border-color: #2d2d2d;
  box-shadow: none;
  color: #fff;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* Shared header: compact, retail-like and unobtrusive. */
.top-strip {
  background: var(--maison-black);
  border: 0;
  color: #fff;
}

.top-strip .ds-shell {
  min-height: 30px;
  padding-block: 4px;
}

.top-strip .strip-item {
  border-inline-end: 1px solid rgba(255, 255, 255, .15);
  justify-content: center;
}

.top-strip .strip-item:last-child {
  border-inline-end: 0;
}

.top-strip .strip-item i {
  color: #fff;
  font-size: 11px;
  width: auto;
}

.top-strip .strip-item strong {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.top-strip .strip-item span {
  display: none;
}

.site-header,
html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #dedbd5;
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] .site-header {
  background: rgba(13, 13, 13, .97);
}

.header-main {
  min-height: 72px;
}

.brand-mark {
  height: 36px;
  width: 36px;
}

.brand-word b {
  color: var(--text);
  font-family: "Prata", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .035em;
}

.brand-word b span {
  color: inherit;
  font-style: normal;
}

.brand-word small {
  font-size: 7px;
  letter-spacing: .3em;
}

.search-form {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--text);
  height: 42px;
}

.search-form:focus-within {
  border-color: var(--text);
  box-shadow: none;
}

.search-form button {
  background: transparent;
  border: 0;
  color: var(--text);
}

.header-actions .icon-btn,
.lang-group,
.theme-group {
  border: 1px solid var(--line);
}

.icon-btn,
.lang-btn,
.theme-btn {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

.lang-btn.active,
.theme-btn.active {
  background: var(--maison-black);
  color: #fff;
}

.main-nav {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.nav-row {
  gap: 0;
  justify-content: center;
  min-height: 40px;
}

.nav-row a {
  border-bottom: 2px solid transparent;
  font-size: 10px;
  letter-spacing: .06em;
  padding: 13px 18px;
  text-transform: uppercase;
}

.nav-row a:hover,
.nav-row a.active {
  background: transparent;
  border-bottom-color: currentColor;
  color: var(--text);
}

.hot-badge {
  background: var(--maison-black);
  border-radius: 0;
  color: #fff;
}

/* Homepage load and scroll affordance. */
.maison-intro {
  align-items: center;
  background: var(--maison-black);
  display: none;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  opacity: 1;
  pointer-events: none;
  position: fixed;
  transition: opacity .55s ease, visibility .55s ease;
  visibility: visible;
  z-index: 9999;
}

html.has-js .maison-intro {
  display: flex;
}

.maison-intro.is-done {
  opacity: 0;
  visibility: hidden;
}

.maison-intro__mark {
  color: #fff;
  font-family: "Prata", Georgia, serif;
  font-size: clamp(36px, 5vw, 70px);
  letter-spacing: .12em;
  margin-inline-start: .12em;
}

.maison-intro__line {
  background: rgba(255, 255, 255, .18);
  height: 1px;
  margin-top: 24px;
  overflow: hidden;
  width: min(190px, 45vw);
}

.maison-intro__line i {
  animation: maison-load 1.15s cubic-bezier(.65, 0, .35, 1) both;
  background: #fff;
  display: block;
  height: 100%;
  transform-origin: left;
}

.maison-progress {
  background: rgba(0, 0, 0, .08);
  height: 2px;
  inset: 0 0 auto;
  position: fixed;
  z-index: 1000;
}

.maison-progress i {
  background: var(--maison-wine);
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
}

@keyframes maison-load {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.maison-home {
  background: var(--maison-paper);
  color: var(--maison-ink);
  overflow: clip;
}

.maison-hero {
  background: #151313;
  color: #fff;
  height: clamp(650px, calc(100svh - 136px), 940px);
  min-height: 650px;
  overflow: hidden;
  position: relative;
}

.maison-hero__image {
  height: calc(100% + 50px);
  inset: -25px 0;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  transform: scale(1.015);
  width: 100%;
}

.maison-hero__veil {
  background: linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .73) 31%, rgba(8, 8, 9, .13) 65%, rgba(8, 8, 9, .16) 100%);
  inset: 0;
  position: absolute;
}

.maison-hero__content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  inset-inline-start: max(var(--maison-pad), calc((100vw - var(--maison-width)) / 2 + var(--maison-pad)));
  justify-content: center;
  max-width: 670px;
  min-height: 100%;
  padding: 90px 0;
  position: relative;
  z-index: 2;
}

.maison-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  margin: 0 0 26px;
  text-transform: uppercase;
}

.maison-hero h1 {
  color: #fff;
  font-size: clamp(54px, 6.1vw, 104px);
  line-height: .98;
  margin: 0;
  max-width: 800px;
}

.maison-hero__text {
  color: rgba(255, 255, 255, .78);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.8;
  margin: 31px 0 0;
  max-width: 570px;
}

.maison-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 31px;
  margin-top: 38px;
}

.maison-btn {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 20px;
  justify-content: center;
  letter-spacing: .015em;
  min-height: 52px;
  padding: 13px 22px;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.maison-btn:hover {
  transform: translateY(-2px);
}

.maison-btn--light {
  background: #fff;
  border-color: #fff;
  color: #0b0b0b;
}

.maison-btn--light:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.maison-link {
  align-items: center;
  border-bottom: 1px solid currentColor;
  color: var(--maison-ink);
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 15px;
  padding-bottom: 5px;
  text-decoration: none;
}

.maison-link i {
  font-size: 10px;
  transition: transform .25s ease;
}

.maison-link:hover i {
  transform: translateX(4px);
}

.maison-link--light {
  color: #fff;
}

.maison-hero__note {
  bottom: 35px;
  display: flex;
  font-size: 9px;
  font-weight: 650;
  gap: 35px;
  inset-inline-end: var(--maison-pad);
  letter-spacing: .13em;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}

.maison-hero__scroll {
  align-items: center;
  bottom: 31px;
  color: #fff;
  display: flex;
  font-size: 9px;
  gap: 12px;
  inset-inline-start: var(--maison-pad);
  letter-spacing: .15em;
  position: absolute;
  text-decoration: none;
  text-transform: uppercase;
  z-index: 3;
}

.maison-services {
  background: #fff;
  border-bottom: 1px solid var(--maison-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
  max-width: none;
  padding-inline: max(var(--maison-pad), calc((100vw - var(--maison-width)) / 2 + var(--maison-pad)));
}

.maison-services article {
  align-items: center;
  border-inline-end: 1px solid var(--maison-line);
  display: grid;
  gap: 16px;
  grid-template-columns: 34px 1fr;
  min-height: 116px;
  padding: 24px clamp(16px, 2.2vw, 38px);
}

.maison-services article:first-child {
  padding-inline-start: 0;
}

.maison-services article:last-child {
  border: 0;
  padding-inline-end: 0;
}

.maison-services i {
  font-size: 20px;
}

.maison-services strong,
.maison-services span {
  display: block;
}

.maison-services strong {
  font-size: 12px;
  margin-bottom: 5px;
}

.maison-services span {
  color: var(--maison-muted);
  font-size: 10px;
  line-height: 1.5;
}

.maison-section {
  margin: 0 auto;
  max-width: var(--maison-width);
  padding: clamp(90px, 10vw, 160px) var(--maison-pad);
}

.maison-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: clamp(38px, 5vw, 72px);
}

.maison-heading > div {
  max-width: 870px;
}

.maison-heading > p {
  color: var(--maison-muted);
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
  max-width: 390px;
}

.maison-index {
  border: 1px solid currentColor;
  display: inline-grid;
  font-size: 9px;
  font-weight: 800;
  height: 27px;
  letter-spacing: .05em;
  margin-bottom: 22px;
  place-items: center;
  width: 27px;
}

.maison-heading h2 {
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.08;
  margin: 0;
}

.maison-heading > div > p {
  color: var(--maison-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  margin: 0 0 13px;
  text-transform: uppercase;
}

.maison-heading--line {
  border-bottom: 1px solid var(--maison-line);
  padding-bottom: 32px;
}

.universe-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

.universe-card {
  background: #e9e6df;
  color: #111;
  display: block;
  height: clamp(430px, 46vw, 680px);
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.universe-card:nth-child(2) {
  background: #ded8d2;
}

.universe-card:nth-child(3) {
  background: #e7e4dc;
}

.universe-card img {
  height: 100%;
  object-fit: contain;
  padding: 55px 28px 120px;
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
  width: 100%;
}

.universe-card:hover img {
  transform: scale(1.05) translateY(-8px);
}

.universe-card__shade {
  background: linear-gradient(0deg, rgba(0, 0, 0, .62), transparent 43%);
  inset: 0;
  position: absolute;
}

.universe-card__count {
  color: rgba(0, 0, 0, .56);
  font-size: 9px;
  inset: 24px auto auto 24px;
  letter-spacing: .1em;
  position: absolute;
}

.universe-card__title {
  bottom: 57px;
  color: #fff;
  font-family: "Prata", Georgia, serif;
  font-size: clamp(25px, 2.5vw, 38px);
  inset-inline: 28px;
  letter-spacing: -.03em;
  position: absolute;
}

.universe-card__action {
  bottom: 25px;
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
  font-weight: 700;
  inset-inline: 28px;
  position: absolute;
}

.universe-card__action i {
  margin-inline-start: 8px;
}

.brand-loop {
  background: var(--maison-black);
  color: #fff;
  overflow: hidden;
  padding: 23px 0 22px;
}

.brand-loop__track {
  align-items: center;
  animation: maison-marquee 30s linear infinite;
  display: flex;
  gap: 34px;
  min-width: max-content;
  padding-inline-start: 34px;
}

.brand-loop__track span {
  font-family: "Prata", Georgia, serif;
  font-size: 17px;
  white-space: nowrap;
}

.brand-loop__track i {
  background: var(--maison-wine);
  height: 5px;
  transform: rotate(45deg);
  width: 5px;
}

@keyframes maison-marquee {
  to { transform: translateX(-50%); }
}

.selection-section {
  max-width: 1580px;
}

.maison-products {
  display: grid;
  gap: 38px 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.maison-card {
  background: #fff;
  border-inline-end: 1px solid var(--maison-line);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  position: relative;
}

.maison-products > div:nth-child(4n) .maison-card {
  border-inline-end: 0;
}

.maison-card__media {
  align-items: center;
  background: #eeece7;
  display: flex;
  height: clamp(280px, 28vw, 430px);
  justify-content: center;
  overflow: hidden;
  padding: 30px;
  position: relative;
}

.maison-card__media img {
  height: 100%;
  mix-blend-mode: multiply;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  width: 100%;
}

.maison-card:hover .maison-card__media img {
  transform: scale(1.055);
}

.maison-card__badge {
  background: var(--maison-black);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  inset: 0 auto auto 0;
  letter-spacing: .08em;
  padding: 9px 11px;
  position: absolute;
  text-transform: uppercase;
}

.maison-card__badge--offer {
  background: var(--maison-wine);
}

.maison-card__view {
  background: #fff;
  bottom: 0;
  color: #111;
  font-size: 10px;
  font-weight: 750;
  inset-inline: 0;
  opacity: 0;
  padding: 14px 17px;
  position: absolute;
  transform: translateY(100%);
  transition: opacity .3s ease, transform .3s ease;
}

.maison-card__view i {
  float: right;
  margin-top: 2px;
}

.maison-card:hover .maison-card__view {
  opacity: 1;
  transform: translateY(0);
}

.maison-card__body {
  flex: 1;
  padding: 21px 17px 18px;
}

.maison-card__body > p {
  color: var(--maison-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  margin: 0 0 9px;
  text-transform: uppercase;
}

.maison-card h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.45;
  margin: 0;
  min-height: 38px;
}

.maison-card h3 a {
  color: inherit;
  text-decoration: none;
}

.maison-card__price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.maison-card__price strong {
  font-size: 13px;
}

.maison-card__price s {
  color: #8b8882;
  font-size: 10px;
}

.maison-card__actions {
  display: grid;
  grid-template-columns: 1fr 47px;
}

.maison-card__actions a,
.maison-card__actions button {
  align-items: center;
  background: var(--maison-black);
  border: 1px solid var(--maison-black);
  color: #fff;
  display: flex;
  font-size: 10px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .02em;
  min-height: 47px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

.maison-card__actions button {
  border-inline-start-color: rgba(255, 255, 255, .28);
  padding: 0;
}

.maison-card__actions a:hover,
.maison-card__actions button:hover {
  background: #fff;
  border-color: var(--maison-black);
  color: var(--maison-black);
}

.maison-offer {
  background: var(--maison-wine);
  color: #fff;
  display: grid;
  gap: clamp(35px, 5vw, 82px);
  grid-template-columns: minmax(290px, .72fr) minmax(0, 1.65fr);
  padding: clamp(75px, 8vw, 130px) max(var(--maison-pad), calc((100vw - var(--maison-width)) / 2 + var(--maison-pad)));
}

.maison-offer__intro {
  align-self: center;
  max-width: 500px;
}

.maison-offer__intro > p:first-of-type,
.order-journey__copy > p:first-of-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  margin: 0 0 13px;
  text-transform: uppercase;
}

.maison-offer h2 {
  color: #fff;
  font-size: clamp(40px, 4.4vw, 67px);
  line-height: 1.08;
  margin: 0;
}

.maison-offer__copy {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  line-height: 1.8;
  margin: 27px 0 32px;
  max-width: 420px;
}

.offer-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.offer-card {
  background: #f5f2ed;
  color: #111;
}

.offer-card__media {
  align-items: center;
  background: #eae6df;
  display: flex;
  height: clamp(320px, 32vw, 470px);
  justify-content: center;
  overflow: hidden;
  padding: 34px 22px;
  position: relative;
}

.offer-card__media img {
  height: 100%;
  mix-blend-mode: multiply;
  object-fit: contain;
  transition: transform .55s ease;
  width: 100%;
}

.offer-card:hover img {
  transform: scale(1.06);
}

.offer-card__media > span {
  background: var(--maison-wine);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  inset: 0 auto auto 0;
  letter-spacing: .1em;
  padding: 9px 11px;
  position: absolute;
  text-transform: uppercase;
}

.offer-card__body {
  padding: 20px 18px 23px;
}

.offer-card__body h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 14px;
  min-height: 36px;
}

.offer-card__body h3 a {
  color: inherit;
  text-decoration: none;
}

.offer-card__body div {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.offer-card__body strong {
  font-size: 13px;
}

.offer-card__body s {
  color: #85817a;
  font-size: 10px;
}

.order-journey {
  background: var(--maison-black);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
  min-height: 760px;
}

.order-journey__copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 8vw, 130px) clamp(30px, 6vw, 95px);
}

.order-journey__copy h2 {
  color: #fff;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1.08;
  margin: 0;
}

.order-journey__copy > p:not(:first-of-type) {
  color: rgba(255, 255, 255, .63);
  font-size: 13px;
  line-height: 1.85;
  margin: 26px 0 32px;
  max-width: 510px;
}

.journey-tabs {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-bottom: 29px;
  width: 100%;
}

.journey-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .45);
  cursor: pointer;
  display: grid;
  gap: 5px 13px;
  grid-template-columns: 29px 1fr;
  padding: 17px 0;
  text-align: start;
  transition: color .3s ease, padding .3s ease;
  width: 100%;
}

.journey-tabs button span {
  border: 1px solid currentColor;
  font-size: 8px;
  grid-row: 1 / 3;
  height: 27px;
  line-height: 25px;
  text-align: center;
  width: 27px;
}

.journey-tabs button b {
  font-size: 11px;
}

.journey-tabs button small {
  font-size: 9px;
  line-height: 1.45;
}

.journey-tabs button.is-active {
  color: #fff;
  padding-inline-start: 8px;
}

.journey-scene {
  background: #e6e3dd;
  color: #111;
  min-height: 760px;
  overflow: hidden;
  padding: 30px clamp(22px, 4vw, 62px);
  position: relative;
}

.journey-scene::before {
  background-image: linear-gradient(rgba(0, 0, 0, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  inset: 0;
  position: absolute;
}

.journey-scene__top {
  border-bottom: 1px solid rgba(0, 0, 0, .22);
  display: flex;
  font-size: 8px;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: .14em;
  padding-bottom: 15px;
  position: relative;
  text-transform: uppercase;
}

.journey-order,
.journey-label {
  background: #fff;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .14);
  position: absolute;
  transition: opacity .55s ease, transform .65s cubic-bezier(.2, .8, .2, 1);
}

.journey-order {
  inset: 120px auto auto clamp(24px, 5vw, 78px);
  padding: 22px;
  width: min(405px, calc(100% - 70px));
  z-index: 2;
}

.journey-order__head {
  align-items: center;
  border-bottom: 1px solid #dedbd5;
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  padding-bottom: 16px;
}

.journey-order__head b {
  background: #dfe8dc;
  color: #2c5b2d;
  font-size: 8px;
  padding: 6px 8px;
  text-transform: uppercase;
}

.journey-product {
  align-items: center;
  display: grid;
  gap: 15px;
  grid-template-columns: 72px 1fr;
  padding: 17px 0;
}

.journey-product img {
  background: #efede8;
  height: 72px;
  object-fit: contain;
  width: 72px;
}

.journey-product small,
.journey-product strong {
  display: block;
}

.journey-product small {
  color: #77736d;
  font-size: 8px;
  margin-bottom: 5px;
}

.journey-product strong {
  font-size: 10px;
  line-height: 1.45;
}

.journey-order dl {
  border-top: 1px solid #dedbd5;
  margin: 0;
}

.journey-order dl > div {
  border-bottom: 1px solid #dedbd5;
  display: flex;
  font-size: 9px;
  justify-content: space-between;
  padding: 10px 0;
}

.journey-order dt {
  color: #77736d;
}

.journey-order dd {
  font-weight: 700;
  margin: 0;
}

.journey-confirm {
  align-items: center;
  background: var(--maison-black);
  color: #fff;
  display: flex;
  font-size: 9px;
  font-weight: 700;
  gap: 9px;
  justify-content: center;
  margin-top: 17px;
  min-height: 39px;
}

.journey-label {
  inset: 175px clamp(22px, 4vw, 58px) auto auto;
  padding: 15px;
  transform: rotate(2.5deg) translate(18px, 18px);
  width: min(350px, calc(100% - 70px));
  z-index: 3;
}

.journey-label__brand {
  align-items: center;
  border-bottom: 2px solid #111;
  display: grid;
  gap: 4px 9px;
  grid-template-columns: 1fr auto;
  padding-bottom: 8px;
}

.journey-label__brand b {
  font-size: 15px;
  line-height: 1;
}

.journey-label__brand span {
  background: #52b634;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  grid-row: 2;
  padding: 3px 5px;
  width: max-content;
}

.journey-label__brand strong {
  font-size: 33px;
  grid-row: 1 / 3;
}

.journey-label__route {
  display: grid;
  font-size: 6px;
  gap: 7px;
  grid-template-columns: 1fr 1fr;
  line-height: 1.45;
  padding: 10px 0;
}

.journey-label__route b {
  font-size: 7px;
}

.journey-barcode {
  background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px);
  height: 36px;
  margin-bottom: 7px;
}

.journey-label > small {
  display: block;
  font-size: 5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
}

.journey-route {
  align-items: center;
  bottom: 78px;
  display: grid;
  font-size: 8px;
  font-weight: 800;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
  inset-inline: clamp(27px, 5vw, 72px);
  position: absolute;
  text-transform: uppercase;
}

.journey-route__origin,
.journey-route__pin {
  align-items: center;
  display: flex;
  gap: 7px;
  white-space: nowrap;
}

.journey-route__origin i {
  background: var(--maison-black);
  height: 8px;
  width: 8px;
}

.journey-route__pin i {
  color: var(--maison-wine);
  font-size: 17px;
}

.journey-route__line {
  border-top: 1px dashed rgba(0, 0, 0, .42);
  height: 1px;
  position: relative;
}

.journey-truck {
  color: var(--maison-black);
  font-size: 22px;
  inset-inline-start: 8%;
  position: absolute;
  top: -13px;
  transition: inset-inline-start 1s cubic-bezier(.2, .8, .2, 1);
}

.journey-status {
  align-items: center;
  bottom: 26px;
  display: flex;
  font-size: 8px;
  font-weight: 800;
  gap: 8px;
  left: 50%;
  letter-spacing: .1em;
  margin: 0;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.journey-status i {
  background: #4b9c46;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.journey-scene[data-journey-scene="1"] .journey-order {
  opacity: .58;
  transform: translate(-25px, -20px) scale(.93);
}

.journey-scene[data-journey-scene="1"] .journey-label {
  transform: rotate(-1deg) translate(-18px, -3px) scale(1.04);
}

.journey-scene[data-journey-scene="1"] .journey-status i {
  background: var(--maison-wine);
}

.journey-scene[data-journey-scene="2"] .journey-order {
  opacity: .2;
  transform: translate(-45px, -30px) scale(.9);
}

.journey-scene[data-journey-scene="2"] .journey-label {
  opacity: .5;
  transform: rotate(1deg) translate(20px, -18px) scale(.9);
}

.journey-scene[data-journey-scene="2"] .journey-truck {
  inset-inline-start: calc(100% - 32px);
}

.journey-scene[data-journey-scene="2"] .journey-status i {
  background: #2776a9;
}

.arrivals-section {
  max-width: 1580px;
}

.maison-products--compact .maison-card__media {
  height: clamp(270px, 27vw, 420px);
}

.maison-concierge {
  align-items: center;
  background: var(--maison-wine-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: clamp(75px, 9vw, 135px) var(--maison-pad);
  text-align: center;
}

.maison-concierge > span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.maison-concierge h2 {
  color: #fff;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.1;
  margin: 18px 0 20px;
}

.maison-concierge p {
  color: rgba(255, 255, 255, .68);
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 29px;
  max-width: 620px;
}

/* Existing catalogue/detail/checkout pages inherit the same retail language. */
.ds-section,
.ds-main,
.page-wrap {
  background: var(--bg);
}

.ds-panel,
.ds-pcard,
.home-blog-card,
.home-cta,
.ds-category-tile,
.trust-grid,
.trust-box {
  border-color: var(--line);
  border-radius: 0 !important;
  box-shadow: none;
}

.ds-pcard {
  background: var(--surface);
}

.ds-pcard-media {
  background: var(--surface-2);
}

.ds-pcard-media img {
  mix-blend-mode: multiply;
  object-fit: contain;
}

.ds-pcard-badge,
.ds-badge {
  background: var(--maison-black);
  border-radius: 0;
  color: #fff;
}

.ds-pcard-badge.is-off {
  background: var(--maison-wine);
}

.ds-pcard-badge.is-pop {
  background: var(--maison-black);
  color: #fff;
}

.ds-pcard-title {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.ds-pcard-actions {
  background: var(--maison-black);
}

.ds-pcard-btn {
  border-color: rgba(255, 255, 255, .2);
}

.ds-detail-title {
  font-family: "Prata", Georgia, serif !important;
  font-size: clamp(34px, 3.8vw, 58px) !important;
  font-weight: 400 !important;
  letter-spacing: -.04em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

.ds-gallery-main {
  background: var(--maison-soft);
}

.ds-gallery-main img {
  mix-blend-mode: multiply;
  object-fit: contain;
}

/* Direct-order pages: remove the inherited lime/gold campaign treatment. */
.lp-card {
  background: #fff !important;
  border: 1px solid var(--maison-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.lp-card::before {
  background: var(--maison-black) !important;
  border-radius: 0 !important;
  height: 4px !important;
}

.lp-title {
  font-family: "Prata", Georgia, serif !important;
  font-size: clamp(30px, 3.2vw, 47px) !important;
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
  line-height: 1.12 !important;
}

.lp-price strong,
html[data-theme="light"] .lp-price strong,
.lp-summary-row.total strong,
html[data-theme="light"] .lp-summary-row.total strong,
.lp-delivery strong {
  color: var(--maison-black) !important;
}

.lp-trust i,
.lp-reassure i {
  color: var(--maison-black) !important;
}

.lp-form > div:has(.lp-step),
.lp-summary {
  background: #fff !important;
  border: 1px solid var(--maison-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.lp-step span {
  background: var(--maison-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}

.lp-field label {
  color: var(--maison-ink) !important;
}

.lp-form .ds-input,
.lp-form .ds-select,
.lp-form .ds-textarea,
.lp-qty,
.lp-delivery label,
.lp-form > .ds-btn-light {
  background: #fff !important;
  border: 1px solid #ccc8c0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--maison-ink) !important;
}

.lp-form .ds-input:focus,
.lp-form .ds-select:focus,
.lp-form .ds-textarea:focus {
  border-color: var(--maison-black) !important;
  box-shadow: 0 0 0 1px var(--maison-black) !important;
  transform: none !important;
}

.lp-qty button {
  background: #efede8 !important;
  color: var(--maison-black) !important;
}

.lp-qty button:hover {
  background: var(--maison-black) !important;
  color: #fff !important;
}

.lp-delivery input {
  accent-color: var(--maison-wine) !important;
}

.lp-delivery label:hover,
.lp-delivery label:has(input:checked) {
  background: #f7f3f4 !important;
  border-color: var(--maison-wine) !important;
  color: var(--maison-ink) !important;
  transform: none !important;
}

.lp-summary-row.total {
  background: #f1efea !important;
}

#lpSubmitBtn,
.lp-card .ds-btn:not(.ds-btn-light) {
  background: var(--maison-black) !important;
  border-color: var(--maison-black) !important;
  color: #fff !important;
}

.lp-main,
.lp-thumb,
.lp-stock,
.lp-msg,
.lp-mobile-cta {
  border-radius: 0 !important;
}

.site-footer {
  background: var(--maison-black);
  border-top: 0;
}

/* Motion is progressively enhanced: content stays visible without JS. */
.reveal {
  opacity: 1;
  transform: none;
}

.motion-ready .reveal.motion-pending {
  opacity: 0;
  transform: translateY(28px);
}

.motion-ready .reveal.motion-pending.motion-in {
  opacity: 1;
  transform: none;
  transition: opacity .75s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 1180px) {
  .maison-services {
    grid-template-columns: repeat(2, 1fr);
  }

  .maison-services article:nth-child(2) {
    border-inline-end: 0;
  }

  .maison-services article:nth-child(-n+2) {
    border-bottom: 1px solid var(--maison-line);
  }

  .maison-services article:nth-child(3) {
    padding-inline-start: 0;
  }

  .maison-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .maison-products > div:nth-child(4n) .maison-card {
    border-inline-end: 1px solid var(--maison-line);
  }

  .maison-products > div:nth-child(3n) .maison-card {
    border-inline-end: 0;
  }

  .maison-offer {
    grid-template-columns: 1fr;
  }

  .maison-offer__intro {
    max-width: 700px;
  }

  .order-journey {
    grid-template-columns: 1fr;
  }

  .order-journey__copy {
    min-height: 680px;
  }

  .journey-scene {
    min-height: 700px;
  }
}

@media (max-width: 820px) {
  .maison-hero {
    height: 760px;
  }

  .maison-hero__image {
    object-position: 61% center;
  }

  .maison-hero__veil {
    background: linear-gradient(0deg, rgba(8, 8, 9, .93) 0%, rgba(8, 8, 9, .72) 47%, rgba(8, 8, 9, .2) 100%);
  }

  .maison-hero__content {
    inset: auto var(--maison-pad) 58px;
    justify-content: flex-end;
    max-width: 620px;
    min-height: auto;
    padding: 0;
    position: absolute;
  }

  .maison-kicker {
    margin-bottom: 15px;
  }

  .maison-hero h1 {
    font-size: clamp(48px, 12vw, 72px);
  }

  .maison-hero__text {
    font-size: 13px;
    line-height: 1.65;
    margin-top: 19px;
  }

  .maison-actions {
    margin-top: 25px;
  }

  .maison-hero__note,
  .maison-hero__scroll {
    display: none;
  }

  .maison-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 23px;
  }

  .maison-heading > p {
    max-width: 560px;
  }

  .universe-grid {
    grid-template-columns: 1fr;
  }

  .universe-card {
    height: 500px;
  }

  .maison-products {
    gap: 28px 1px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maison-products > div:nth-child(3n) .maison-card {
    border-inline-end: 1px solid var(--maison-line);
  }

  .maison-products > div:nth-child(2n) .maison-card {
    border-inline-end: 0;
  }

  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-card:nth-child(3) {
    display: none;
  }
}

@media (max-width: 560px) {
  :root {
    --maison-pad: 17px;
  }

  html {
    scroll-padding-top: 90px;
  }

  .top-strip .strip-item:nth-child(n+3) {
    display: none;
  }

  .top-strip .strip-item {
    border: 0;
  }

  .maison-hero {
    height: 690px;
    min-height: 690px;
  }

  .maison-hero__image {
    height: 470px;
    inset: 0;
    object-position: 64% 30%;
  }

  .maison-hero__veil {
    background: linear-gradient(0deg, #0b0b0c 0 33%, rgba(11, 11, 12, .86) 45%, rgba(11, 11, 12, .05) 76%);
  }

  .maison-hero__content {
    bottom: 34px;
  }

  .maison-hero h1 {
    font-size: 45px;
    line-height: 1.03;
  }

  .maison-hero__text {
    display: -webkit-box;
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .maison-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 17px;
    width: 100%;
  }

  .maison-btn {
    width: 100%;
  }

  .maison-actions .maison-link {
    align-self: flex-start;
  }

  .maison-services {
    grid-template-columns: 1fr;
    padding-inline: var(--maison-pad);
  }

  .maison-services article {
    border: 0;
    border-bottom: 1px solid var(--maison-line) !important;
    min-height: 88px;
    padding: 17px 0 !important;
  }

  .maison-services article:last-child {
    border-bottom: 0 !important;
  }

  .maison-section {
    padding-block: 78px;
  }

  .maison-heading {
    margin-bottom: 35px;
  }

  .maison-heading h2 {
    font-size: 38px;
  }

  .universe-card {
    height: 420px;
  }

  .universe-card img {
    padding: 35px 20px 105px;
  }

  .brand-loop__track {
    gap: 26px;
  }

  .brand-loop__track span {
    font-size: 14px;
  }

  .maison-products {
    display: flex;
    gap: 10px;
    margin-inline: calc(var(--maison-pad) * -1);
    overflow-x: auto;
    padding: 0 var(--maison-pad) 15px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .maison-products::-webkit-scrollbar {
    display: none;
  }

  .maison-products > div {
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }

  .maison-card {
    border: 0 !important;
  }

  .maison-card__media,
  .maison-products--compact .maison-card__media {
    height: 355px;
  }

  .maison-card__view {
    display: none;
  }

  .maison-offer {
    padding-block: 75px;
  }

  .maison-offer h2 {
    font-size: 42px;
  }

  .offer-grid {
    display: flex;
    gap: 10px;
    margin-inline: calc(var(--maison-pad) * -1);
    overflow-x: auto;
    padding: 0 var(--maison-pad) 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .offer-card,
  .offer-card:nth-child(3) {
    display: block;
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }

  .offer-card__media {
    height: 355px;
  }

  .order-journey__copy {
    min-height: auto;
    padding: 75px var(--maison-pad);
  }

  .order-journey__copy h2 {
    font-size: 42px;
  }

  .journey-tabs button small {
    padding-inline-end: 8px;
  }

  .journey-scene {
    min-height: 590px;
    padding-inline: 14px;
  }

  .journey-order {
    inset: 76px auto auto 14px;
    padding: 16px;
    width: calc(100% - 47px);
  }

  .journey-label {
    inset: 213px 13px auto auto;
    width: calc(100% - 59px);
  }

  .journey-product {
    grid-template-columns: 58px 1fr;
  }

  .journey-product img {
    height: 58px;
    width: 58px;
  }

  .journey-route {
    bottom: 66px;
    inset-inline: 17px;
  }

  .journey-status {
    bottom: 23px;
  }

  .maison-concierge {
    padding-block: 75px;
  }

  .maison-concierge h2 {
    font-size: 39px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .maison-intro {
    display: none;
  }

  .brand-loop__track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   ADR Commerce — conversion-led navy/gold storefront
   -------------------------------------------------------------------------- */

:root {
  --adr-navy: #02072f;
  --adr-navy-2: #081044;
  --adr-navy-3: #111b58;
  --adr-gold: #e7c85c;
  --adr-gold-dark: #b89427;
  --adr-blue-soft: #f3f5fb;
  --adr-border: #dfe2ec;
  --adr-success: #168349;
}

body {
  background: #fff;
}

body h1,
body h2,
body h3,
.commerce-home h1,
.commerce-home h2,
.commerce-home h3 {
  font-family: "Manrope", "Noto Kufi Arabic", Arial, sans-serif;
  letter-spacing: -.035em;
}

.top-strip {
  background: var(--adr-gold);
  color: var(--adr-navy);
}

.top-strip .strip-item {
  border-color: rgba(2, 7, 47, .18);
}

.top-strip .strip-item i,
.top-strip .strip-item strong {
  color: var(--adr-navy);
}

.site-header,
html[data-theme="light"] .site-header,
html[data-theme="dark"] .site-header {
  background: var(--adr-navy);
  border-bottom-color: rgba(255, 255, 255, .13);
}

.site-header .brand-mark,
.mobile-nav-panel .brand-mark,
.footer .brand-mark {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .16));
}

.site-header .brand-word b,
.site-header .brand-word b span,
.mobile-nav-panel .brand-word b,
.mobile-nav-panel .brand-word b span,
.footer .brand-word b,
.footer .brand-word b span {
  color: var(--adr-gold);
  font-family: "Prata", Georgia, serif;
}

.site-header .brand-word small,
.mobile-nav-panel .brand-word small,
.footer .brand-word small {
  color: rgba(255, 255, 255, .68);
}

.site-header .search-form {
  background: #fff;
  border: 1px solid #fff;
  min-height: 44px;
  padding-inline: 13px 4px;
}

.site-header .search-form input,
.site-header .search-form input::placeholder {
  color: #343746;
}

.site-header .search-form input::placeholder {
  opacity: .78;
}

.site-header .search-form button {
  color: var(--adr-navy);
  height: 36px;
  width: 40px;
}

.site-header .header-actions .icon-btn,
.site-header .lang-group,
.site-header .theme-group,
.site-header .mobile-menu-btn {
  border-color: rgba(255, 255, 255, .28);
}

.site-header .icon-btn,
.site-header .lang-btn,
.site-header .theme-btn,
.site-header .mobile-menu-btn {
  color: #fff;
}

.site-header .lang-btn.active,
.site-header .theme-btn.active {
  background: var(--adr-gold);
  color: var(--adr-navy);
}

.site-header .cart-count-badge {
  background: var(--adr-gold);
  color: var(--adr-navy);
}

.main-nav {
  background: var(--adr-navy-2);
  border-top-color: rgba(231, 200, 92, .28);
}

.main-nav .nav-row a {
  color: rgba(255, 255, 255, .86);
}

.main-nav .nav-row a:hover,
.main-nav .nav-row a.active {
  border-bottom-color: var(--adr-gold);
  color: var(--adr-gold);
}

.hot-badge {
  background: var(--adr-gold);
  color: var(--adr-navy);
}

.mobile-nav-panel {
  background: var(--adr-navy);
  color: #fff;
}

.mobile-nav-panel .msb-head,
.mobile-nav-panel .msb-foot,
.mobile-nav-panel .msb-links a,
.mobile-nav-panel .msb-switch-row {
  border-color: rgba(255, 255, 255, .14);
}

.mobile-nav-panel .msb-label {
  color: var(--adr-gold);
}

.mobile-nav-panel .msb-links a,
.mobile-nav-panel .msb-switch-row,
.mobile-nav-panel .msb-foot,
.mobile-nav-panel .icon-btn {
  color: #fff;
}

.mobile-nav-panel .msb-links a:hover,
.mobile-nav-panel .msb-links a.is-primary {
  background: var(--adr-gold);
  color: var(--adr-navy);
}

.commerce-home {
  background: #fff;
  color: #15182a;
  overflow: clip;
}

.commerce-home a:focus-visible,
.commerce-home button:focus-visible {
  outline: 3px solid var(--adr-gold);
  outline-offset: 3px;
}

.commerce-hero {
  background: var(--adr-navy);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(450px, .92fr);
  min-height: 640px;
}

.commerce-hero__copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 7vw, 112px) clamp(34px, 7vw, 115px);
}

.commerce-hero__badge {
  align-items: center;
  background: rgba(255, 255, 255, .09);
  color: var(--adr-gold);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 9px;
  margin-bottom: 23px;
  padding: 9px 12px;
}

.commerce-hero h1 {
  color: #fff;
  font-size: clamp(49px, 5.1vw, 78px);
  font-weight: 800;
  line-height: .99;
  margin: 0;
  max-width: 760px;
}

.commerce-hero__copy > p {
  color: rgba(255, 255, 255, .78);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.75;
  margin: 27px 0 0;
  max-width: 650px;
}

.commerce-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.commerce-btn {
  align-items: center;
  border: 1px solid transparent;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 14px;
  justify-content: center;
  min-height: 50px;
  padding: 12px 20px;
  text-decoration: none;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}

.commerce-btn:hover {
  transform: translateY(-2px);
}

.commerce-btn--gold {
  background: var(--adr-gold);
  border-color: var(--adr-gold);
  color: var(--adr-navy);
}

.commerce-btn--gold:hover {
  background: #f1d775;
  border-color: #f1d775;
  color: var(--adr-navy);
}

.commerce-btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .65);
  color: #fff;
}

.commerce-btn--outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--adr-navy);
}

.commerce-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  list-style: none;
  margin: 29px 0 0;
  padding: 0;
}

.commerce-hero__trust li {
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 700;
}

.commerce-hero__trust i {
  color: var(--adr-gold);
  margin-inline-end: 6px;
}

.commerce-hero__visual {
  min-height: 640px;
  overflow: hidden;
  position: relative;
}

.commerce-hero__visual > img {
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  position: absolute;
  width: 100%;
}

.commerce-hero__visual::after {
  background: linear-gradient(90deg, var(--adr-navy), transparent 23%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-deal {
  background: #fff;
  bottom: 26px;
  color: #171a2b;
  display: block;
  inset-inline: 26px;
  padding: 14px;
  position: absolute;
  text-decoration: none;
  z-index: 2;
}

.hero-deal__label {
  background: var(--adr-gold);
  color: var(--adr-navy);
  font-size: 9px;
  font-weight: 900;
  inset: 0 auto auto 0;
  padding: 7px 9px;
  position: absolute;
  text-transform: uppercase;
}

.hero-deal__product {
  align-items: center;
  display: grid;
  gap: 13px;
  grid-template-columns: 74px 1fr;
  padding-top: 10px;
}

.hero-deal__product img {
  background: #f1f2f6;
  height: 74px;
  object-fit: contain;
  width: 74px;
}

.hero-deal__product strong {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 7px;
}

.hero-deal__product b {
  color: var(--adr-navy);
  font-size: 14px;
}

.hero-deal__product s {
  color: #777b88;
  font-size: 10px;
  margin-inline-start: 7px;
}

.hero-deal__cta {
  border-top: 1px solid var(--adr-border);
  display: flex;
  font-size: 10px;
  font-weight: 900;
  justify-content: space-between;
  margin-top: 11px;
  padding-top: 10px;
}

.commerce-reassurance {
  background: #fff;
  border-bottom: 1px solid var(--adr-border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: max(24px, calc((100vw - 1440px) / 2 + 40px));
}

.commerce-reassurance > div {
  align-items: center;
  border-inline-end: 1px solid var(--adr-border);
  display: grid;
  gap: 13px;
  grid-template-columns: 34px 1fr;
  min-height: 102px;
  padding: 20px clamp(16px, 2.1vw, 34px);
}

.commerce-reassurance > div:first-child {
  padding-inline-start: 0;
}

.commerce-reassurance > div:last-child {
  border-inline-end: 0;
  padding-inline-end: 0;
}

.commerce-reassurance i {
  color: var(--adr-navy);
  font-size: 20px;
}

.commerce-reassurance b,
.commerce-reassurance small {
  display: block;
}

.commerce-reassurance b {
  font-size: 11px;
  margin-bottom: 4px;
}

.commerce-reassurance small {
  color: #686d7d;
  font-size: 9px;
  line-height: 1.4;
}

.commerce-categories,
.commerce-products-section {
  margin: 0 auto;
  max-width: 1500px;
  padding: clamp(65px, 7vw, 105px) clamp(18px, 4vw, 54px);
}

.commerce-section-head {
  align-items: flex-end;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  margin-bottom: 34px;
}

.commerce-section-head h2 {
  color: var(--adr-navy);
  font-size: clamp(30px, 3.5vw, 49px);
  font-weight: 800;
  line-height: 1.08;
  margin: 0;
}

.commerce-section-head p {
  color: #6b6f7d;
  font-size: 13px;
  line-height: 1.6;
  margin: 10px 0 0;
}

.commerce-section-head > a {
  align-items: center;
  color: var(--adr-navy);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  gap: 10px;
  text-decoration: none;
}

.commerce-section-head > a:hover {
  color: var(--adr-gold-dark);
}

.commerce-category-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}

.commerce-category {
  align-items: center;
  background: var(--adr-blue-soft);
  color: var(--adr-navy);
  display: grid;
  grid-template-columns: 1fr 46%;
  min-height: 210px;
  overflow: hidden;
  padding-inline-start: clamp(18px, 2.3vw, 33px);
  position: relative;
  text-decoration: none;
}

.commerce-category::before {
  background: var(--adr-gold);
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}

.commerce-category:hover::before {
  transform: scaleX(1);
}

.commerce-category > span {
  position: relative;
  z-index: 2;
}

.commerce-category strong {
  display: block;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.15;
}

.commerce-category small {
  display: block;
  font-size: 9px;
  font-weight: 800;
  margin-top: 16px;
}

.commerce-category small i {
  margin-inline-start: 7px;
}

.commerce-category img {
  height: 210px;
  mix-blend-mode: multiply;
  object-fit: contain;
  padding: 16px;
  transition: transform .35s ease;
  width: 100%;
}

.commerce-category:hover img {
  transform: scale(1.06);
}

.commerce-brands {
  align-items: center;
  background: var(--adr-navy);
  color: #fff;
  display: grid;
  gap: 30px;
  grid-template-columns: auto 1fr;
  padding: 22px max(22px, calc((100vw - 1440px) / 2 + 40px));
}

.commerce-brands > span {
  color: var(--adr-gold);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.commerce-brands > div {
  align-items: center;
  display: flex;
  gap: clamp(20px, 3vw, 47px);
  justify-content: space-between;
  overflow-x: auto;
  scrollbar-width: none;
}

.commerce-brands b {
  font-family: "Prata", Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.commerce-pill {
  background: var(--adr-gold);
  color: var(--adr-navy);
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  margin-bottom: 12px;
  padding: 7px 9px;
  text-transform: uppercase;
}

.commerce-product-grid {
  gap: 18px;
}

.commerce-product-grid .maison-card {
  border: 1px solid var(--adr-border);
  min-width: 0;
}

.commerce-product-grid .maison-card__media {
  background: #f4f5f8;
  height: clamp(260px, 24vw, 360px);
}

.commerce-product-grid .maison-card__badge {
  background: var(--adr-gold);
  color: var(--adr-navy);
}

.commerce-product-grid .maison-card__badge--offer {
  background: #b42342;
  color: #fff;
}

.commerce-product-grid .maison-card__body > p {
  color: #717583;
}

.commerce-product-grid .maison-card h3 {
  color: #1b1e2e;
  font-size: 13px;
}

.commerce-product-grid .maison-card__price strong {
  color: var(--adr-navy);
  font-size: 15px;
}

.maison-card__confidence {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
  margin-top: 13px;
}

.maison-card__confidence span {
  align-items: center;
  color: var(--adr-success);
  display: flex;
  font-size: 9px;
  font-weight: 800;
  gap: 5px;
}

.maison-card__confidence span i {
  background: var(--adr-success);
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.maison-card__confidence small {
  color: #737786;
  font-size: 8px;
}

.commerce-product-grid .maison-card__actions {
  grid-template-columns: 1fr 48px;
}

.commerce-product-grid .maison-card__actions a,
.commerce-product-grid .maison-card__actions button {
  background: var(--adr-navy);
  border-color: var(--adr-navy);
}

.commerce-product-grid .maison-card__actions a:hover,
.commerce-product-grid .maison-card__actions button:hover {
  background: var(--adr-gold);
  border-color: var(--adr-gold);
  color: var(--adr-navy);
}

.commerce-offers {
  background: var(--adr-navy);
  color: #fff;
  padding: clamp(65px, 7vw, 105px) max(18px, calc((100vw - 1440px) / 2 + 40px));
}

.commerce-offers__head {
  align-items: flex-end;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  margin-bottom: 35px;
}

.commerce-offers__head span {
  color: var(--adr-gold);
  display: block;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 10px;
}

.commerce-offers h2 {
  color: #fff;
  font-size: clamp(32px, 4vw, 53px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}

.commerce-offer-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}

.commerce-offer-card {
  background: #fff;
  color: #171a29;
  min-width: 0;
}

.commerce-offer-card__media {
  align-items: center;
  background: #f4f5f8;
  display: flex;
  height: clamp(245px, 24vw, 350px);
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.commerce-offer-card__media img {
  height: 100%;
  mix-blend-mode: multiply;
  object-fit: contain;
  transition: transform .32s ease;
  width: 100%;
}

.commerce-offer-card:hover .commerce-offer-card__media img {
  transform: scale(1.05);
}

.commerce-offer-card__media span {
  background: #b42342;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  inset: 0 auto auto 0;
  padding: 8px 10px;
  position: absolute;
  text-transform: uppercase;
}

.commerce-offer-card__body {
  padding: 17px;
}

.commerce-offer-card h3 {
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  margin: 0;
  min-height: 35px;
}

.commerce-offer-card h3 a {
  color: inherit;
  text-decoration: none;
}

.commerce-offer-card__price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 13px 0 15px;
}

.commerce-offer-card__price strong {
  color: var(--adr-navy);
  font-size: 15px;
}

.commerce-offer-card__price s {
  color: #767a87;
  font-size: 10px;
}

.commerce-offer-card__cta {
  align-items: center;
  background: var(--adr-navy);
  color: #fff;
  display: flex;
  font-size: 10px;
  font-weight: 900;
  justify-content: center;
  min-height: 43px;
  text-decoration: none;
}

.commerce-offer-card__cta:hover {
  background: var(--adr-gold);
  color: var(--adr-navy);
}

.commerce-order-flow {
  background: #fff;
  display: grid;
  grid-template-columns: minmax(350px, .8fr) minmax(0, 1.2fr);
  margin: 0 auto;
  max-width: 1500px;
  padding: clamp(75px, 8vw, 125px) clamp(18px, 4vw, 54px);
}

.commerce-order-flow__copy {
  background: var(--adr-navy);
  color: #fff;
  padding: clamp(42px, 5vw, 75px);
}

.commerce-order-flow__copy > span {
  color: var(--adr-gold);
  font-size: 10px;
  font-weight: 850;
}

.commerce-order-flow h2 {
  color: #fff;
  font-size: clamp(36px, 4.3vw, 61px);
  font-weight: 800;
  line-height: 1.04;
  margin: 14px 0 0;
}

.commerce-order-flow__copy > p {
  color: rgba(255, 255, 255, .73);
  font-size: 13px;
  line-height: 1.75;
  margin: 23px 0;
}

.commerce-flow-steps {
  list-style: none;
  margin: 0 0 29px;
  padding: 0;
}

.commerce-flow-steps li {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .17);
  color: rgba(255, 255, 255, .56);
  cursor: pointer;
  display: grid;
  gap: 13px;
  grid-template-columns: 29px 1fr;
  padding: 14px 0;
  transition: color .2s ease, padding .2s ease;
}

.commerce-flow-steps li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}

.commerce-flow-steps li.is-active {
  color: #fff;
  padding-inline-start: 7px;
}

.commerce-flow-steps li > b {
  background: rgba(255, 255, 255, .1);
  display: grid;
  font-size: 10px;
  height: 29px;
  place-items: center;
  width: 29px;
}

.commerce-flow-steps li.is-active > b {
  background: var(--adr-gold);
  color: var(--adr-navy);
}

.commerce-flow-steps strong,
.commerce-flow-steps small {
  display: block;
}

.commerce-flow-steps strong {
  font-size: 11px;
}

.commerce-flow-steps small {
  font-size: 9px;
  margin-top: 3px;
}

.commerce-journey-scene {
  background: var(--adr-blue-soft);
  min-height: 670px;
}

.commerce-journey-scene::before {
  display: none;
}

.commerce-journey-scene .journey-confirm {
  background: var(--adr-navy);
}

.commerce-journey-scene .journey-route__origin i {
  background: var(--adr-gold-dark);
}

.commerce-new {
  background: var(--adr-blue-soft);
  max-width: none;
  padding-inline: max(18px, calc((100vw - 1440px) / 2 + 40px));
}

.commerce-help {
  align-items: center;
  background: var(--adr-navy-2);
  color: #fff;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  padding: 34px max(20px, calc((100vw - 1440px) / 2 + 40px));
}

.commerce-help > div {
  align-items: center;
  display: flex;
  gap: 17px;
}

.commerce-help > div > i {
  color: #4bdf78;
  font-size: 34px;
}

.commerce-help strong,
.commerce-help small {
  display: block;
}

.commerce-help strong {
  font-size: 17px;
}

.commerce-help small {
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 5px;
}

/* Icon-only circular WhatsApp button. Sized to the 44px minimum touch target. */
.commerce-whatsapp-float {
  align-items: center;
  background: #25d366;
  border-radius: 50%;
  bottom: 22px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .38);
  color: #fff;
  display: flex;
  height: 56px;
  inset-inline-end: 22px;
  justify-content: center;
  position: fixed;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  width: 56px;
  z-index: 80;
}

.commerce-whatsapp-float:hover {
  box-shadow: 0 12px 30px rgba(37, 211, 102, .5);
  transform: translateY(-2px);
}

.commerce-whatsapp-float i {
  font-size: 27px;
  line-height: 1;
}

.footer,
.site-footer {
  background: var(--adr-navy);
  color: #fff;
}

.footer .footer-services,
.footer .footer-grid,
.footer .footer-bottom,
.footer .footer-col {
  border-color: rgba(255, 255, 255, .14);
}

.footer .footer-link,
.footer .footer-contact a,
.footer .footer-bottom a,
.footer .footer-bottom,
.footer .footer-brand p,
.footer .footer-col h4 {
  color: rgba(255, 255, 255, .78);
}

.footer .fs-icon,
.footer .footer-socials a {
  background: var(--adr-gold);
  color: var(--adr-navy);
}

.mobile-bottom {
  background: #fff;
  border-top-color: var(--adr-border);
}

.mobile-bottom .mbn-item.active,
.mobile-bottom .mbn-item:hover,
.mobile-bottom .mbn-item.active i {
  color: var(--adr-navy);
}

.mobile-bottom .mbn-wa i {
  border-color: #fff;
}

/* Store-wide purchase actions follow the ADR navy identity. */
.ds-btn,
.ds-pcard-btn,
button[type="submit"],
.btn {
  background: var(--adr-navy);
  border-color: var(--adr-navy);
}

.ds-btn:hover,
.ds-pcard-btn:hover,
button[type="submit"]:hover,
.btn:hover {
  background: var(--adr-navy-3);
  border-color: var(--adr-navy-3);
}

.ds-pcard-badge.is-pop,
.ds-pcard-badge,
.ds-badge {
  background: var(--adr-navy);
}

.ds-pcard-badge.is-off {
  background: #b42342;
}

.ds-pcard-actions {
  background: var(--adr-navy);
}

.ds-detail-title,
.lp-title,
.ds-title {
  color: var(--adr-navy);
  font-family: "Manrope", "Noto Kufi Arabic", Arial, sans-serif !important;
  font-weight: 800 !important;
}

.ds-title {
  font-size: clamp(34px, 4.5vw, 58px) !important;
  letter-spacing: -.04em !important;
  line-height: 1.02 !important;
}

.lp-card::before {
  background: var(--adr-gold) !important;
}

.lp-step span,
#lpSubmitBtn,
.lp-card .ds-btn:not(.ds-btn-light) {
  background: var(--adr-navy) !important;
  border-color: var(--adr-navy) !important;
}

@media (max-width: 1080px) {
  .commerce-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  }

  .commerce-hero__copy {
    padding-inline: clamp(28px, 5vw, 65px);
  }

  .commerce-reassurance {
    grid-template-columns: repeat(2, 1fr);
  }

  .commerce-reassurance > div:nth-child(2) {
    border-inline-end: 0;
  }

  .commerce-reassurance > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--adr-border);
  }

  .commerce-reassurance > div:nth-child(3) {
    padding-inline-start: 0;
  }

  .commerce-category-grid {
    grid-template-columns: 1fr;
  }

  .commerce-category {
    min-height: 180px;
  }

  .commerce-category img {
    height: 180px;
  }

  .commerce-offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .commerce-order-flow {
    grid-template-columns: 1fr;
  }

  .commerce-journey-scene {
    min-height: 650px;
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .site-header .header-main {
    gap: 8px;
    grid-template-columns: 42px 1fr 88px;
    padding-block: 9px 10px;
  }

  .site-header .brand-mark {
    height: 35px;
    width: 35px;
  }

  .site-header .brand-word b {
    font-size: 17px;
    white-space: nowrap;
  }

  .site-header .brand-word small {
    display: none;
  }

  .site-header .header-actions .icon-btn {
    border-color: rgba(255, 255, 255, .24);
    height: 40px;
    width: 40px;
  }

  .site-header .search-wrap {
    margin-top: 1px;
  }

  .site-header .search-form {
    min-height: 42px;
  }

  .mobile-service-row {
    display: none !important;
  }

  .commerce-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .commerce-hero__copy {
    order: 1;
    padding: 46px 18px 38px;
  }

  .commerce-hero__badge {
    font-size: 10px;
    margin-bottom: 18px;
  }

  .commerce-hero h1 {
    font-size: clamp(39px, 11.3vw, 52px);
    line-height: 1.02;
  }

  .commerce-hero__copy > p {
    font-size: 13px;
    line-height: 1.65;
    margin-top: 19px;
  }

  .commerce-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 25px;
    width: 100%;
  }

  .commerce-btn {
    width: 100%;
  }

  .commerce-hero__trust {
    display: grid;
    gap: 9px;
    margin-top: 22px;
  }

  .commerce-hero__visual {
    min-height: 405px;
    order: 2;
  }

  .commerce-hero__visual > img {
    object-position: 65% center;
  }

  .commerce-hero__visual::after {
    background: linear-gradient(180deg, var(--adr-navy), transparent 17%);
  }

  .hero-deal {
    bottom: 14px;
    inset-inline: 14px;
  }

  .commerce-reassurance {
    grid-template-columns: 1fr 1fr;
    padding-inline: 14px;
  }

  .commerce-reassurance > div {
    align-content: center;
    gap: 8px;
    grid-template-columns: 27px 1fr;
    min-height: 95px;
    padding: 13px !important;
  }

  .commerce-reassurance > div:nth-child(odd) {
    border-inline-end: 1px solid var(--adr-border);
  }

  .commerce-reassurance > div:nth-child(even) {
    border-inline-end: 0;
  }

  .commerce-reassurance i {
    font-size: 17px;
  }

  .commerce-reassurance b {
    font-size: 9px;
  }

  .commerce-reassurance small {
    font-size: 8px;
  }

  .commerce-categories,
  .commerce-products-section {
    padding: 56px 14px;
  }

  .commerce-section-head,
  .commerce-offers__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 25px;
  }

  .commerce-section-head h2 {
    font-size: 31px;
  }

  .commerce-category {
    grid-template-columns: 1fr 43%;
    min-height: 145px;
  }

  .commerce-category img {
    height: 145px;
    padding: 9px;
  }

  .commerce-category strong {
    font-size: 19px;
  }

  .commerce-brands {
    display: block;
    padding: 17px 14px;
  }

  .commerce-brands > span {
    display: block;
    margin-bottom: 12px;
  }

  .commerce-brands > div {
    justify-content: flex-start;
  }

  .commerce-product-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    overflow: visible;
    padding: 0;
  }

  .commerce-product-grid > .maison-card {
    min-width: 0;
  }

  .commerce-product-grid .maison-card__media {
    height: 185px;
    padding: 14px;
  }

  .commerce-product-grid .maison-card__body {
    padding: 13px 10px;
  }

  .commerce-product-grid .maison-card h3 {
    font-size: 11px;
    line-height: 1.4;
    min-height: 42px;
  }

  .commerce-product-grid .maison-card__price strong {
    font-size: 13px;
  }

  .commerce-product-grid .maison-card__confidence {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .commerce-product-grid .maison-card__actions {
    grid-template-columns: 1fr 39px;
  }

  .commerce-product-grid .maison-card__actions a,
  .commerce-product-grid .maison-card__actions button {
    font-size: 9px;
    min-height: 42px;
    padding-inline: 5px;
  }

  .commerce-offers {
    padding: 58px 14px;
  }

  .commerce-offers h2 {
    font-size: 34px;
  }

  .commerce-offer-grid {
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }

  .commerce-offer-card__media {
    height: 190px;
    padding: 15px;
  }

  .commerce-offer-card__body {
    padding: 12px 10px;
  }

  .commerce-offer-card h3 {
    font-size: 10px;
    min-height: 43px;
  }

  .commerce-offer-card__cta {
    font-size: 8px;
    min-height: 40px;
  }

  .commerce-order-flow {
    padding: 56px 14px;
  }

  .commerce-order-flow__copy {
    padding: 38px 22px;
  }

  .commerce-order-flow h2 {
    font-size: 38px;
  }

  .commerce-journey-scene {
    min-height: 590px;
  }

  .commerce-new {
    padding-inline: 14px;
  }

  .commerce-help {
    align-items: stretch;
    flex-direction: column;
    padding: 30px 18px;
  }

  .commerce-help strong {
    font-size: 15px;
  }

  .commerce-whatsapp-float {
    display: none;
  }

  .ds-shop-grid {
    display: block;
  }

  .ds-shop-filters {
    display: none;
  }

  .ds-page > .ds-section:first-child {
    padding-block: 24px 18px !important;
  }

  .ds-page .ds-head {
    align-items: flex-start;
    gap: 18px;
    margin-top: 16px !important;
  }

  .ds-page .ds-head .ds-eyebrow {
    display: none;
  }

  .ds-page .ds-title {
    font-size: 34px !important;
  }

  .ds-page .ds-head .ds-muted {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 10px;
  }

  .ds-page .ds-head > .ds-btn {
    min-height: 42px;
  }

  .mobile-bottom {
    z-index: 100;
  }
}

@media (max-width: 390px) {
  .site-header .header-main {
    grid-template-columns: 39px 1fr 82px;
  }

  .site-header .brand-mark {
    height: 31px;
    width: 31px;
  }

  .site-header .brand-word b {
    font-size: 15px;
  }

  .commerce-product-grid .maison-card__media,
  .commerce-offer-card__media {
    height: 168px;
  }
}

/* =====================================================================
   ADR BEAUTY — 2026-07-25 refinements
   Clean type, horizontal rails, legible CTAs, compact mobile hero.
   ===================================================================== */

/* ---- Type: Manrope (Latin) + Noto Sans Arabic, clear not bold ---- */
body,
button, input, select, textarea,
.commerce-home, .commerce-home p, .maison-card, .ds-pcard {
  font-family: "Manrope", "Noto Sans Arabic", Arial, sans-serif;
  font-weight: 400;
}
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
  font-family: "Noto Sans Arabic", "Manrope", Arial, sans-serif;
  letter-spacing: 0;
}
h1, h2, h3,
.ds-title, .hero-title,
.commerce-home h1, .commerce-home h2, .commerce-home h3,
body h1, body h2, body h3 {
  font-family: "Manrope", "Noto Sans Arabic", Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
}
.commerce-hero h1 { font-weight: 600; letter-spacing: -.025em; }
.commerce-hero__badge,
.commerce-hero__trust li,
.commerce-pill,
.commerce-btn,
.maison-card__actions a,
.maison-card__actions button,
.hero-deal__label,
.commerce-offer-card__media span,
.commerce-order-flow > * span { font-weight: 600 !important; }
.commerce-offer-card h3 { font-weight: 500; }
.theme-group { display: none !important; }

/* ---- Horizontal sliding rails (categories + offers) ---- */
.commerce-rail {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.commerce-rail::-webkit-scrollbar { height: 0; }

/* Category circles */
.commerce-category-rail { padding-top: 4px; }
.cat-tile {
  flex: 0 0 auto;
  width: clamp(126px, 19vw, 172px);
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--adr-navy);
}
.cat-tile__img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--adr-blue-soft);
  border: 1px solid var(--adr-border);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.cat-tile__img img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.cat-tile__img i { font-size: 34px; color: var(--adr-gold-dark); }
.cat-tile:hover .cat-tile__img {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(2, 7, 47, .16);
  border-color: var(--adr-gold);
}
.cat-tile strong { font-size: clamp(13px, 1.3vw, 15px); font-weight: 600; text-align: center; }

/* Offers become a rail on every width */
.commerce-offers .commerce-offer-grid {
  display: flex;
  grid-template-columns: none;
}
.commerce-offers .commerce-offer-card {
  flex: 0 0 auto;
  width: clamp(224px, 23vw, 274px);
  scroll-snap-align: start;
}

/* ---- Product-card CTAs: always legible (fix dark-on-dark) ---- */
.ds-pcard-actions { background: transparent !important; }
.ds-pcard-btn.is-order {
  background: var(--adr-navy) !important;
  border-color: var(--adr-navy) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.ds-pcard-btn.is-order:hover {
  background: var(--adr-gold) !important;
  border-color: var(--adr-gold) !important;
  color: var(--adr-navy) !important;
}
.ds-pcard-btn.is-add {
  background: var(--adr-blue-soft) !important;
  border-color: var(--adr-border) !important;
  color: var(--adr-navy) !important;
}
.ds-pcard-btn.is-add i { color: var(--adr-navy) !important; }
.ds-pcard-btn.is-add:hover { background: var(--adr-navy) !important; border-color: var(--adr-navy) !important; }
.ds-pcard-btn.is-add:hover i { color: #fff !important; }
.ds-pcard-now, .ds-price { color: var(--adr-navy) !important; }

/* Generic dark CTAs on inner pages follow the navy identity */
.ds-btn-red, .ds-btn-primary {
  background: var(--adr-navy) !important;
  border-color: var(--adr-navy) !important;
  color: #fff !important;
}
.ds-btn-red:hover, .ds-btn-primary:hover {
  background: var(--adr-gold) !important;
  border-color: var(--adr-gold) !important;
  color: var(--adr-navy) !important;
}
.ds-filter-link.active, .ds-pill.active {
  background: var(--adr-navy) !important;
  border-color: var(--adr-navy) !important;
  color: #fff !important;
}

/* ---- Compact mobile hero: image + text in one screen ---- */
@media (max-width: 760px) {
  .commerce-hero {
    position: relative;
    display: block !important;
    min-height: min(86vh, 760px);
  }
  .commerce-hero__visual {
    position: absolute !important;
    inset: 0;
    height: 100%;
    min-height: 0 !important;
    order: 0 !important;
    z-index: 0;
  }
  .commerce-hero__visual > img { object-position: 58% center; }
  .commerce-hero__visual::after {
    background: linear-gradient(180deg, rgba(2,7,47,.18) 0%, rgba(2,7,47,.68) 52%, var(--adr-navy) 100%) !important;
  }
  .commerce-hero__copy {
    position: relative;
    z-index: 2;
    min-height: min(86vh, 760px);
    justify-content: flex-end !important;
    padding: 30px 20px calc(34px + env(safe-area-inset-bottom)) !important;
  }
  .commerce-hero h1 { font-size: clamp(31px, 8.6vw, 44px); line-height: 1.05; }
  .commerce-hero__copy > p { display: none; }
  .commerce-hero__trust { display: none !important; }
  .hero-deal { display: none !important; }
  .commerce-hero__actions { margin-top: 22px; }
  .cat-tile { width: 40vw; }
  .commerce-offers .commerce-offer-card { width: 74vw; }
}

/* =====================================================================
   ADR BEAUTY — 2026-07-25 (round 2)
   Search fix, bigger logo, Madani Arabic, full-bleed mobile hero,
   lively conversion CTAs on the landing page.
   ===================================================================== */

/* ---- Arabic: Madani Arabic (drop the file in static/fonts/), Almarai fallback ---- */
@font-face {
  font-family: "Madani Arabic";
  src: url("/static/fonts/MadaniArabic-Regular.woff2") format("woff2"),
       url("/static/fonts/MadaniArabic-Regular.woff") format("woff"),
       url("/static/fonts/MadaniArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Madani Arabic";
  src: url("/static/fonts/MadaniArabic-Medium.woff2") format("woff2"),
       url("/static/fonts/MadaniArabic-Medium.ttf") format("truetype");
  font-weight: 500 600;
  font-display: swap;
}
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .ds-title, html[dir="rtl"] .lp-title,
html[dir="rtl"] .commerce-home h1, html[dir="rtl"] .commerce-home h2, html[dir="rtl"] .commerce-home h3 {
  font-family: "Madani Arabic", "Almarai", "Noto Sans Arabic", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---- Search bar: kill the navy box on the submit button ---- */
.site-header .search-form button,
.search-form button,
.search-form button[type="submit"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.site-header .search-form button:hover { background: transparent !important; color: var(--adr-gold-dark) !important; }
.search-suggestions:empty { display: none !important; }

/* ---- Bigger logo ---- */
.site-header .brand-mark,
.mobile-nav-panel .brand-mark { height: 46px !important; width: 46px !important; }
.site-header .brand-word b { font-size: 26px !important; }
.site-header .brand-word small { font-size: 8px !important; }

/* ---- Mobile hero: image = full-bleed background, text inside the rectangle ---- */
@media (max-width: 760px) {
  .site-header .brand-mark,
  .mobile-nav-panel .brand-mark { height: 41px !important; width: 41px !important; }
  .site-header .brand-word b { font-size: 20px !important; }

  .commerce-hero { min-height: min(78vh, 660px); }
  .commerce-hero__copy { min-height: min(78vh, 660px); }
  .commerce-hero__visual > img {
    object-position: 64% 24% !important;
    filter: saturate(1.02);
  }
  /* Frame the image: subtle top fade into the navy header, strong bottom fade for text. */
  .commerce-hero__visual::after {
    background: linear-gradient(180deg,
      rgba(2,7,47,.62) 0%,
      rgba(2,7,47,.12) 22%,
      rgba(2,7,47,.20) 46%,
      rgba(2,7,47,.72) 70%,
      var(--adr-navy) 100%) !important;
  }
  .commerce-hero__badge {
    background: rgba(255,255,255,.16) !important;
    backdrop-filter: blur(4px);
    margin-bottom: 14px;
  }
}

/* ---- Landing page: lively, high-conversion buy actions ---- */
.lp-gallery, .lp-card, .lp-summary { border-radius: 16px !important; }
.lp-form .ds-input, .lp-form .ds-select, .lp-form .ds-textarea {
  border-radius: 10px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.lp-form .ds-input:focus, .lp-form .ds-select:focus, .lp-form .ds-textarea:focus {
  border-color: var(--adr-gold) !important;
  box-shadow: 0 0 0 3px rgba(231, 200, 92, .28) !important;
  outline: none !important;
}
.lp-price strong, #lpPriceCur { color: var(--adr-navy) !important; font-weight: 700 !important; }

/* Primary buy CTA — gold, warm, alive */
#lpSubmitBtn,
.lp-form > .ds-btn.ds-btn-red {
  background: linear-gradient(135deg, #f4dc86 0%, var(--adr-gold) 55%, #d9b544 100%) !important;
  border: 0 !important;
  color: var(--adr-navy) !important;
  border-radius: 12px !important;
  min-height: 60px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 12px 30px rgba(231, 200, 92, .42) !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .22s ease !important;
}
#lpSubmitBtn:hover,
.lp-form > .ds-btn.ds-btn-red:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 44px rgba(231, 200, 92, .58) !important;
  filter: brightness(1.03) !important;
}
#lpSubmitBtn:active { transform: translateY(-1px) scale(.99) !important; }

/* WhatsApp fallback — friendly green */
.lp-form > .ds-btn-light[href*="wa.me"] {
  background: #fff !important;
  border: 1.5px solid #25d366 !important;
  color: #1c8a45 !important;
  border-radius: 12px !important;
  min-height: 52px !important;
  font-weight: 600 !important;
}
.lp-form > .ds-btn-light[href*="wa.me"]:hover {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #fff !important;
}

/* Step badges + trust chips: a touch of gold for life */
.lp-step span, #lpSubmitBtn, .lp-card .ds-btn:not(.ds-btn-light) { border-radius: 10px !important; }
.lp-step span {
  background: var(--adr-navy) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(231, 200, 92, .25) !important;
}
.lp-trust span {
  border-radius: 10px !important;
  border-color: var(--adr-border) !important;
}
.lp-trust span i { color: var(--adr-gold-dark) !important; }
.lp-mobile-cta .ds-btn {
  background: linear-gradient(135deg, #f4dc86, var(--adr-gold)) !important;
  color: var(--adr-navy) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
.lp-reassure i { color: var(--adr-gold-dark) !important; }

/* =====================================================================
   ADR BEAUTY — 2026-07-25 (round 3)
   Compact hero banner, square offer images, de-greyed mobile sidebar.
   ===================================================================== */

/* ---- 1. Hero = small rectangle banner on phone ---- */
@media (max-width: 760px) {
  .commerce-hero { min-height: 0 !important; }
  .commerce-hero__copy {
    min-height: 0 !important;
    height: 360px !important;
    justify-content: flex-end !important;
    padding: 20px 18px 24px !important;
  }
  .commerce-hero__visual { position: absolute !important; inset: 0; height: 100% !important; min-height: 0 !important; }
  .commerce-hero__visual > img { object-position: 62% 30% !important; }
  .commerce-hero h1 { font-size: clamp(25px, 7.2vw, 33px) !important; line-height: 1.1 !important; margin: 0 !important; }
  .commerce-hero__badge { margin-bottom: 10px !important; padding: 6px 10px !important; font-size: 10px !important; }
  .commerce-hero__actions { margin-top: 15px !important; gap: 9px !important; }
  .commerce-hero .commerce-btn { min-height: 46px !important; }
}

/* ---- 2. Offer product images: perfect squares ---- */
.commerce-offer-card__media {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}

/* ---- 3. Mobile sidebar: remove the grey pill backgrounds ---- */
.mobile-nav-panel .msb-links a:not(.is-primary),
.mobile-nav-panel .msb-links button:not(.is-primary) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}
.mobile-nav-panel .msb-links a:not(.is-primary):hover,
.mobile-nav-panel .msb-links button:not(.is-primary):hover {
  background: rgba(231, 200, 92, .14) !important;
  border-color: var(--adr-gold) !important;
}
.mobile-nav-panel .lang-group {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .22) !important;
}
.mobile-nav-panel .lang-btn { background: transparent !important; color: #fff !important; }
.mobile-nav-panel .lang-btn.active { background: var(--adr-gold) !important; color: var(--adr-navy) !important; }
.mobile-nav-panel .msb-switch-row,
.mobile-nav-panel .msb-switchers { background: transparent !important; }

/* =====================================================================
   ADR BEAUTY — 2026-07-25 (round 4)
   Desktop hero = full-bleed image background with copy overlaid.
   ===================================================================== */
@media (min-width: 761px) {
  .commerce-hero {
    position: relative;
    display: block !important;
    grid-template-columns: none !important;
    min-height: 620px;
  }
  .commerce-hero__visual {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    min-height: 0 !important;
    height: 100%;
    width: 100%;
  }
  /* Image is the FULL background of the whole hero; the copy sits ON TOP of it
     over a soft navy scrim (no solid side-panel). Model is centre-right, so the
     copy takes the darker side; RTL mirrors the image so Arabic reads on it. */
  .commerce-hero__visual > img { object-position: center 26% !important; }
  html[dir="rtl"] .commerce-hero__visual > img { transform: scaleX(-1); }
  .commerce-hero__visual::after {
    background: linear-gradient(to right,
      rgba(2,7,47,.78) 0%,
      rgba(2,7,47,.50) 30%,
      rgba(2,7,47,.12) 56%,
      rgba(2,7,47,.26) 100%) !important;
  }
  html[dir="rtl"] .commerce-hero__visual::after {
    background: linear-gradient(to left,
      rgba(2,7,47,.78) 0%,
      rgba(2,7,47,.50) 30%,
      rgba(2,7,47,.12) 56%,
      rgba(2,7,47,.26) 100%) !important;
  }
  .commerce-hero { min-height: 560px; }
  .commerce-hero__copy {
    position: relative;
    z-index: 2;
    width: min(620px, 52%);
    margin-inline-end: auto;
    min-height: 560px;
    justify-content: center;
  }
  .commerce-hero h1 { font-size: clamp(40px, 4.4vw, 62px) !important; line-height: 1.03 !important; }
  /* Offer-of-the-moment card sits bottom-end, over the model side */
  .hero-deal {
    inset-inline-end: 26px !important;
    inset-inline-start: auto !important;
    width: min(380px, 38%);
  }
}

/* =====================================================================
   ADR BEAUTY — 2026-07-25 (round 5)
   Madani Arabic on ALL Arabic text (icons + Latin brand name preserved).
   ===================================================================== */
html[dir="rtl"] body,
html[dir="rtl"] p, html[dir="rtl"] span, html[dir="rtl"] a,
html[dir="rtl"] li, html[dir="rtl"] strong, html[dir="rtl"] b,
html[dir="rtl"] small, html[dir="rtl"] em, html[dir="rtl"] label,
html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select,
html[dir="rtl"] textarea, html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] td, html[dir="rtl"] th, html[dir="rtl"] dt, html[dir="rtl"] dd,
html[dir="rtl"] .ds-title, html[dir="rtl"] .lp-title, html[dir="rtl"] .commerce-pill,
html[dir="rtl"] .commerce-btn, html[dir="rtl"] .cat-tile strong {
  font-family: "Madani Arabic", "Almarai", "Noto Sans Arabic", Arial, sans-serif !important;
}
/* Keep the Latin brand wordmark in its serif */
html[dir="rtl"] .brand-word b,
html[dir="rtl"] .brand-word b span,
html[dir="rtl"] .brand-word small {
  font-family: "Prata", Georgia, serif !important;
}

/* =====================================================================
   ADR BEAUTY — 2026-07-25 (round 6)
   Hero is a CONTAINED rounded card (not full-bleed). Image fills the card,
   text sits inside it.
   ===================================================================== */
.commerce-hero {
  width: min(1360px, calc(100% - clamp(24px, 5vw, 72px)));
  margin-inline: auto;
  margin-top: clamp(16px, 2vw, 26px);
  border-radius: clamp(16px, 1.6vw, 24px);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 761px) {
  .commerce-hero { min-height: 480px !important; }
  .commerce-hero__copy { min-height: 480px !important; padding-block: 48px !important; }
  .commerce-hero__copy { padding-inline-start: clamp(34px, 4vw, 60px) !important; }
}
@media (max-width: 760px) {
  .commerce-hero { width: calc(100% - 24px); margin-top: 14px; border-radius: 16px; }
}

/* =====================================================================
   ADR BEAUTY — 2026-07-25 (round 7)
   Language switcher: readable on the navy header.
   ===================================================================== */
.site-header .lang-group {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  padding: 4px !important;
  gap: 2px !important;
}
.site-header .lang-btn {
  background: transparent !important;
  color: rgba(255, 255, 255, .82) !important;
  font-weight: 700 !important;
}
.site-header .lang-btn:hover {
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}
.site-header .lang-btn.active {
  background: var(--adr-gold) !important;
  color: var(--adr-navy) !important;
}