/* ===== Multi-design theme page (md-) =====
   views/public/publicThemeMultiDesignPage.js. Built for 2 to 30+ designs.
   Site tokens come from website.min.css :root. Logical properties throughout,
   so the English (LTR) page is a mirror of the Arabic one. */

.md-page {
  --md-accent: #2f4a3a;
  --md-accent-ink: #fff;
  --md-header-h: 84px;
}
.md-page [hidden] {
  display: none !important;
}
.md-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.md-page svg {
  flex: none;
}
.md-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  background: var(--primary-50);
  color: var(--primary-dark);
}
.md-eyebrow svg {
  width: 15px;
  height: 15px;
}
.md-sec {
  padding-block: 96px;
}
.md-sec--tint {
  background: var(--gray-50);
}
.md-sec-head {
  max-width: 720px;
  margin-block-end: 36px;
}
.md-sec-head--center {
  margin-inline: auto;
  text-align: center;
}
.md-sec-head h2 {
  margin-block: 12px;
}
.md-sec-head p {
  font-size: 1.06rem;
  line-height: 1.9;
}
.md-page #designs,
.md-page #compare,
.md-page #switch,
.md-page #features,
.md-page #guide {
  scroll-margin-top: calc(var(--md-header-h) + 72px);
}

.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 12px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  text-align: center;
}
.md-btn svg {
  width: 18px;
  height: 18px;
}
.md-page :focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 3px;
}
.md-btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(59, 130, 246, 0.8);
}
.md-btn--primary:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-2px);
}
.md-btn--ghost-light {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.md-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.md-btn--accent {
  background: var(--md-accent);
  color: var(--md-accent-ink);
}
.md-btn--accent:hover {
  color: var(--md-accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px var(--md-accent);
}
.md-btn--soft {
  background: #fff;
  color: var(--dark);
  border-color: var(--gray-200);
}
.md-btn--soft:hover {
  color: var(--dark);
  border-color: var(--gray-300);
  background: var(--gray-50);
}
.md-btn--sm {
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 10px;
}
.md-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  color: var(--dark);
  cursor: pointer;
  transition: all 0.2s ease;
  flex: none;
}
.md-icon-btn:hover:not(:disabled) {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}
.md-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.md-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Chevrons point to the physical side their button sits on: "previous" is at
   inline-start (right in Arabic, left in English), "next" at inline-end.
   The symbol itself points right. */
.md-prev svg {
  transform: scaleX(-1);
}
[dir='rtl'] .md-prev svg {
  transform: none;
}
[dir='rtl'] .md-next svg {
  transform: scaleX(-1);
}

/* ---- Hero ---- */
.md-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(59, 130, 246, 0.28), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(139, 92, 246, 0.22), transparent 60%), #0b1223;
  color: #fff;
  padding-block: calc(var(--md-header-h) + 56px) 72px;
}
.md-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}
.md-hero .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.md-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-block-end: 22px;
}
.md-crumbs a {
  display: inline;
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  border-radius: 0;
}
.md-crumbs a:hover {
  color: #fff;
}
.md-crumbs span[aria-hidden] {
  opacity: 0.5;
}
.md-hero .md-eyebrow {
  background: rgba(59, 130, 246, 0.16);
  color: #bfdbfe;
  border: 1px solid rgba(147, 197, 253, 0.25);
}
.md-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-block: 18px 16px;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
.md-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #93c5fd, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.md-hero .md-lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.15rem;
  line-height: 1.95;
  max-width: 560px;
  margin: 0;
}
.md-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block: 28px;
}
.md-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
  padding-inline: 16px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.25s ease;
}
.md-chip i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.md-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.md-chip[aria-pressed='true'] {
  background: #fff;
  color: var(--dark);
  border-color: #fff;
}
.md-chip--more {
  background: transparent;
  border-style: dashed;
  color: #bfdbfe;
}
/* A sale (priceBefore): «920 ر.س» with «1840 ر.س» struck and «لفترة محدودة», above the buttons */
.md-hero-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-block: -8px 18px;
}
.md-hero-price strong {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.md-hero-price del {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-decoration-thickness: 1.5px;
}
.md-sale-tag {
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(252, 211, 77, 0.35);
  color: #fcd34d;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}
.md-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.md-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-block-start: 26px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
}
.md-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.md-hero-trust svg {
  width: 16px;
  height: 16px;
  color: #34d399;
}

.md-stage {
  position: relative;
  aspect-ratio: 16/12;
}
.md-win {
  position: absolute;
  inset-inline-end: 6%;
  top: 26%;
  width: 80%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.7s ease,
    filter 0.7s ease;
  transform-origin: 50% 100%;
}
.md-win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: 12px;
  background: #eef1f5;
  border-block-end: 1px solid #e2e8f0;
}
.md-win-bar b {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
  flex: none;
}
.md-win-bar b:nth-child(1) {
  background: #f87171;
}
.md-win-bar b:nth-child(2) {
  background: #fbbf24;
}
.md-win-bar b:nth-child(3) {
  background: #34d399;
}
.md-win-bar span {
  margin-inline-start: 10px;
  flex: 1;
  max-width: 60%;
  height: 18px;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  line-height: 18px;
  color: #64748b;
  padding-inline: 10px;
  direction: ltr;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.md-win img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: top;
  background: #f1f5f9;
}
.md-win[data-pos='0'] {
  transform: none;
  z-index: 3;
}
.md-win[data-pos='1'] {
  transform: translate3d(9%, -22%, 0) scale(0.9);
  z-index: 2;
  filter: brightness(0.62);
}
.md-win[data-pos='2'] {
  transform: translate3d(17%, -42%, 0) scale(0.8);
  z-index: 1;
  filter: brightness(0.4);
}
[dir='ltr'] .md-win[data-pos='1'] {
  transform: translate3d(-9%, -22%, 0) scale(0.9);
}
[dir='ltr'] .md-win[data-pos='2'] {
  transform: translate3d(-17%, -42%, 0) scale(0.8);
}
.md-phone {
  position: absolute;
  inset-inline-end: 0;
  bottom: -2%;
  width: 27%;
  aspect-ratio: 9/19.2;
  border-radius: 30px;
  padding: 8px;
  background: #0f172a;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 4;
}
.md-phone::before {
  content: '';
  position: absolute;
  top: 13px;
  inset-inline-start: 33%;
  width: 34%;
  height: 14px;
  border-radius: 10px;
  background: #0f172a;
  z-index: 2;
}
.md-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 23px;
  background: #fff;
}
.md-stage-label {
  position: absolute;
  inset-inline-start: 4%;
  bottom: -3%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 70%;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  color: #fff;
}
.md-stage-label i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c, #fff);
  flex: none;
}
.md-stage-label span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.md-stage-label small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
}

/* ---- Sticky section bar ---- */
.md-sub {
  position: sticky;
  top: calc(var(--md-header-h) - 1px);
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--gray-200);
}
.md-sub .container {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
}
.md-sub nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.md-sub nav::-webkit-scrollbar {
  display: none;
}
.md-sub nav a {
  display: block;
  padding: 8px 14px;
  border-radius: 50px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dark-500);
  white-space: nowrap;
}
.md-sub nav a:hover {
  color: var(--dark);
  background: var(--gray-100);
}
.md-sub nav a.is-active {
  color: var(--primary-dark);
  background: var(--primary-50);
}
.md-sub-buy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.md-sub-buy strong {
  font-size: 17px;
  color: var(--dark);
}
.md-sub-buy small {
  display: block;
  font-size: 11.5px;
  color: var(--gray-400);
  font-weight: 600;
  line-height: 1.2;
}
.md-sub-buy del {
  margin-inline-start: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-400);
}

/* ---- Designs: toolbar, grid (default) and slider ---- */
.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-block-end: 20px;
}
.md-count {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
}
.md-count small {
  font-weight: 600;
  color: var(--gray-400);
  margin-inline-start: 6px;
  font-size: inherit;
}
.md-search {
  position: relative;
  flex: 1 1 240px;
  max-width: 340px;
  margin: 0;
  margin-inline-start: auto;
}
.md-search input {
  width: 100%;
  height: 44px;
  border-radius: 50px;
  border: 1.5px solid var(--gray-200);
  padding-inline: 40px 16px;
  font-family: var(--font);
  font-size: 14px;
  background: #fff;
  color: var(--dark);
}
.md-search svg {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  color: var(--gray-400);
}
.md-view {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--gray-100);
}
.md-count + .md-view {
  margin-inline-start: auto;
}
.md-view button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding-inline: 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-500);
  cursor: pointer;
}
.md-view button svg {
  width: 17px;
  height: 17px;
}
.md-view button[aria-pressed='true'] {
  background: #fff;
  color: var(--dark);
  box-shadow: var(--shadow);
}
/* filters wrap onto their own line on desktop, so there is nothing to drag */
.md-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 100%;
  order: 5;
}
.md-filter {
  flex: none;
  padding: 8px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-600);
  cursor: pointer;
  white-space: nowrap;
}
.md-filter span {
  color: var(--gray-400);
  font-weight: 700;
  margin-inline-start: 4px;
}
.md-filter[aria-pressed='true'] {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.md-filter[aria-pressed='true'] span {
  color: rgba(255, 255, 255, 0.6);
}

.md-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.md-grid > #mdPanel {
  grid-column: 1/-1;
  margin-block: 6px;
}
.md-more {
  display: flex;
  justify-content: center;
  margin-block-start: 22px;
}
.md-more svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
.md-more [aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.md-slider-head {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-block-end: 12px;
}
.md-owl .owl-stage-outer {
  padding-block: 6px 16px;
  margin-block: -6px -16px;
}
/* without Owl Carousel (script blocked or not loaded yet) the slider is a plain scroller */
.md-page .md-owl:not(.owl-loaded) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, calc((100% - 56px) / 5));
  gap: 14px;
  overflow-x: auto;
  padding-block: 4px 12px;
}
#mdSliderWrap + #mdPanel,
#mdGridWrap + #mdPanel {
  margin-block-start: 28px;
}
.md-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  font-family: var(--font);
  text-align: start;
  color: inherit;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.md-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.md-page .md-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: top;
  background: var(--gray-100);
}
.md-card-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 14px;
}
.md-card-body i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
  margin-block-start: 8px;
  flex: none;
}
.md-card-body b {
  display: block;
  font-size: 15.5px;
  color: var(--dark);
  line-height: 1.4;
}
.md-card-body small {
  display: block;
  font-size: 12.5px;
  color: var(--gray-400);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-card-body > span {
  min-width: 0;
  flex: 1;
}
/* The number sits on the picture's corner away from the storefront's logo, whatever the page language: an Arabic
   storefront has its logo at the top right, and a badge there covered all of "Amer" but its last letters ("03er" on
   the Arabic page, 2026-09-23); its top left holds icons, which a badge can cover without reading as text. */
.md-card .md-num {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
/* An English storefront picture (the English page, data-shot="ltr") has its logo at the top left: the number goes right. */
.md-card[data-shot='ltr'] .md-num {
  left: auto;
  right: 10px;
}
.md-card[aria-pressed='true'] {
  border-color: var(--c);
  box-shadow:
    0 14px 30px -18px var(--c),
    0 0 0 3px rgba(59, 130, 246, 0.18);
  box-shadow:
    0 14px 30px -18px var(--c),
    0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.md-card[aria-pressed='true'] .md-num {
  background: var(--c);
}
.md-empty {
  grid-column: 1/-1;
  padding: 28px;
  text-align: center;
  color: var(--gray-400);
  font-weight: 600;
  border: 1.5px dashed var(--gray-200);
  border-radius: 16px;
}

/* ---- Design panel ---- */
.md-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 36px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--gray-200);
  box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.35);
  animation: mdFade 0.45s ease;
}
@keyframes mdFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.md-shot {
  position: relative;
  padding-block-end: 34px;
  padding-inline-end: 12%;
  cursor: zoom-in;
}
.md-shot .md-win {
  position: relative;
  inset: auto;
  top: auto;
  width: 100%;
  box-shadow:
    0 30px 60px -30px rgba(15, 23, 42, 0.45),
    0 0 0 1px var(--gray-200);
}
.md-scroll {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #f1f5f9;
}
.md-page .md-scroll img {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  transition: transform 6s cubic-bezier(0.45, 0, 0.55, 1);
}
.md-shot.is-scrolled .md-scroll img,
.md-shot:hover .md-scroll img {
  transform: translateY(calc(-100% + var(--frame-h, 300px)));
}
.md-shot .md-phone {
  inset-inline-end: 0;
  bottom: 0;
  width: 26%;
  z-index: 2;
}
.md-shot .md-phone .md-scroll {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 23px;
}
/* A "long" picture no taller than its frame (Sidra's phone shots are one screen, 780x1688, in a frame of about
   1:2.3 once its padding is off) fills the frame instead of leaving a band under it and sliding down on hover. */
.md-page .md-scroll img {
  min-height: 100%;
  object-fit: cover;
  object-position: top;
}
.md-hint {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 30%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-400);
  font-weight: 600;
}
.md-hint svg {
  width: 16px;
  height: 16px;
}
.md-hint-touch {
  display: none;
}
@media (hover: none) {
  .md-hint-hover {
    display: none;
  }
  .md-hint-touch {
    display: inline;
  }
}
.md-info {
  min-width: 0;
}
.md-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.md-info .md-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--c);
}
.md-info .md-kicker i {
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--c);
}
.md-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-400);
  white-space: nowrap;
}
.md-stepper .md-icon-btn {
  width: 34px;
  height: 34px;
}
.md-stepper .md-icon-btn svg {
  width: 17px;
  height: 17px;
}
.md-info h3 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 800;
  margin-block: 10px 6px;
}
.md-info .md-tagline {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark-600);
  margin-block-end: 12px;
}
.md-info p.md-desc {
  line-height: 1.95;
  margin-block-end: 18px;
}
.md-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 20px;
}
.md-tags span {
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--dark-600);
}
.md-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-block-end: 20px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
}
.md-palette small {
  font-size: 12.5px;
  color: var(--gray-400);
  font-weight: 700;
}
.md-swatches {
  display: flex;
}
.md-swatches i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--gray-200);
  margin-inline-start: -7px;
  background: var(--s);
}
.md-swatches i:first-child {
  margin-inline-start: 0;
}
.md-palette .md-font {
  margin-inline-start: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark-600);
}
.md-points {
  display: grid;
  gap: 10px;
  margin-block-end: 26px;
  padding: 0;
  list-style: none;
}
.md-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--dark-600);
  line-height: 1.7;
}
.md-points svg {
  width: 20px;
  height: 20px;
  margin-block-start: 3px;
  color: var(--c);
}
.md-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.md-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray-400);
  background: none;
  border: 0;
  font-family: var(--font);
  cursor: pointer;
  padding: 6px;
  text-align: start;
}
.md-link:hover {
  color: var(--dark);
}
.md-link svg {
  width: 16px;
  height: 16px;
}
.md-link span {
  overflow-wrap: anywhere;
}
.md-preset {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-start: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px dashed var(--gray-200);
  background: var(--gray-50);
}
.md-preset-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  color: var(--c);
  box-shadow: 0 0 0 1px var(--gray-200);
  flex: none;
}
.md-preset-ico svg {
  width: 20px;
  height: 20px;
}
.md-preset-txt {
  flex: 1;
  min-width: 0;
}
.md-preset-txt b {
  display: block;
  font-size: 14.5px;
  color: var(--dark);
}
.md-preset-txt small {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: var(--dark-500);
}
.md-samecode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-block-start: 26px;
  font-size: 14.5px;
  color: var(--dark-500);
  text-align: center;
}
.md-samecode svg {
  width: 20px;
  height: 20px;
  color: var(--success);
}

/* ---- Compare (pick 3) ---- */
.md-pick {
  display: grid;
  grid-template-columns: 22% repeat(3, minmax(0, 1fr));
  align-items: end;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-block-end: 0;
  border-radius: 20px 20px 0 0;
}
.md-pick[data-cols='2'] {
  grid-template-columns: 22% repeat(2, minmax(0, 1fr));
}
.md-pick > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-400);
  padding-block-end: 10px;
}
.md-pick label {
  display: block;
  padding-inline-end: 16px;
  margin: 0;
}
.md-pick select {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  padding-inline: 12px;
}
.md-table-wrap {
  overflow-x: auto;
  border-radius: 0 0 20px 20px;
  border: 1px solid var(--gray-200);
  background: #fff;
  box-shadow: var(--shadow);
}
.md-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.md-table[data-cols='2'] {
  min-width: 560px;
}
.md-table th,
.md-table td {
  padding: 16px 20px;
  text-align: start;
  border-block-end: 1px solid var(--gray-100);
  font-size: 15px;
  vertical-align: middle;
}
.md-table thead th {
  background: var(--gray-50);
  padding-block: 14px;
}
.md-table col:first-child {
  width: 22%;
}
.md-table tbody th {
  font-weight: 700;
  color: var(--dark);
  background: #fff;
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
}
.md-table td {
  color: var(--dark-600);
}
.md-table tr:last-child td,
.md-table tr:last-child th {
  border-block-end: 0;
}
.md-col {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.md-col img {
  width: 64px;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--gray-200);
  flex: none;
}
.md-col div {
  min-width: 0;
}
.md-col b {
  display: block;
  font-size: 16px;
  color: var(--dark);
}
.md-col small {
  display: block;
  font-size: 12.5px;
  color: var(--gray-400);
  font-weight: 600;
}
.md-col i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  margin-inline-end: 6px;
}
.md-yes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #059669;
  font-weight: 700;
}
.md-yes svg {
  width: 18px;
  height: 18px;
}
.md-mix {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-block-start: 22px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--primary-50), #f5f3ff);
  border: 1px solid #dbeafe;
}
[dir='rtl'] .md-mix {
  background: linear-gradient(-90deg, var(--primary-50), #f5f3ff);
}
.md-mix svg {
  width: 34px;
  height: 34px;
  color: var(--primary);
}
.md-mix p {
  color: var(--dark-600);
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}
.md-mix strong {
  color: var(--dark);
}

/* ---- How to switch ---- */
.md-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
}
.md-step {
  position: relative;
  min-width: 0;
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--gray-200);
}
.md-step-n {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--dark);
  color: #fff;
  font-weight: 800;
  margin-block-end: 14px;
}
.md-step h3 {
  font-size: 1.15rem;
  margin-block-end: 6px;
}
.md-step p {
  font-size: 14.5px;
  line-height: 1.85;
}
.md-step q {
  quotes: '«' '»';
  font-weight: 700;
  color: var(--dark);
}
[dir='ltr'] .md-step q {
  quotes: '\201C' '\201D';
}
/* Zid's labels quoted outside the steps: the import strip and the preset card (the tip box has its own) */
.md-mix q,
.md-preset q {
  quotes: '«' '»';
  font-weight: 700;
  color: inherit;
}
[dir='ltr'] .md-mix q,
[dir='ltr'] .md-preset q {
  quotes: '\201C' '\201D';
}
.md-ui {
  margin-block-start: 18px;
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  padding: 14px;
  font-size: 13px;
}
@media (min-width: 861px) {
  .md-ui {
    min-height: 150px;
  }
}
.md-ui-store {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--gray-200);
}
.md-ui-store img {
  width: 54px;
  border-radius: 6px;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  flex: none;
}
.md-ui-store b {
  display: block;
  color: var(--dark);
}
.md-ui-store span {
  display: inline-block;
  margin-block-start: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  background: #7c3aed;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.md-ui-side {
  display: grid;
  gap: 6px;
  align-content: start;
}
.md-ui-side div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--gray-200);
  color: var(--dark-600);
  font-weight: 600;
}
.md-ui-side div.on {
  border-color: #7c3aed;
  color: #6d28d9;
  background: #f5f3ff;
}
.md-ui-side b {
  color: var(--dark);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-ui-btn {
  flex: none;
  padding: 3px 10px;
  border-radius: 6px;
  background: #7c3aed;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.md-ui-side div.md-ui-presets {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px;
}
.md-ui-presets span {
  color: var(--dark-600);
  font-weight: 600;
}
.md-ui-presets u {
  color: #6d28d9;
  font-weight: 800;
  text-underline-offset: 3px;
}
.md-ui-title {
  font-weight: 800;
  color: var(--dark);
  margin-block-end: 8px;
}
.md-ui-tabs {
  display: flex;
  gap: 6px;
  margin-block-end: 8px;
  overflow: hidden;
}
/* The row is cut at its end on purpose (more tabs than fit, as in Zid's panel); the cut fades out, so the last
   tab does not read as a broken word («و19 كمان» showed as «19و» at every width, 2026-09-23). */
[dir='rtl'] .md-ui-tabs {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px);
  mask-image: linear-gradient(90deg, transparent 0, #000 36px);
}
[dir='ltr'] .md-ui-tabs {
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 36px);
  mask-image: linear-gradient(270deg, transparent 0, #000 36px);
}
.md-ui-tabs span {
  padding: 4px 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  font-weight: 700;
  color: var(--dark-500);
  white-space: nowrap;
}
.md-ui-tabs span.on {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.md-ui-prev {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.md-ui-prev img {
  width: 62%;
  border-radius: 8px;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: top;
  box-shadow: 0 0 0 1px var(--gray-200);
}
.md-ui-prev .md-ui-apply {
  flex: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #7c3aed;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
/* Tip box «قبل ما تغيّر التصميم»: a white card, three points, the details behind a native toggle (Mohamed, 2026-09-24) */
.md-tip {
  margin-block-start: 28px;
  padding: 24px 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--gray-200);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px -20px rgba(15, 23, 42, 0.18);
}
.md-tip-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 18px;
}
.md-tip-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff7ed;
  color: #c2410c;
  flex: none;
}
.md-tip-ico svg {
  display: block;
  width: 22px;
  height: 22px;
}
.md-tip-head h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--dark);
}
.md-tip-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.md-tip-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  padding: 16px;
  border-radius: 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
}
.md-tip-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  flex: none;
}
.md-tip-points p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--dark-600);
}
.md-tip q {
  quotes: '«' '»';
  font-weight: 700;
  color: var(--dark);
}
[dir='ltr'] .md-tip q {
  quotes: '\201C' '\201D';
}
.md-tip-more {
  margin-block-start: 16px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--gray-100);
}
.md-tip-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-inline-start: -10px;
  border-radius: 8px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dark);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.md-tip-more summary::-webkit-details-marker {
  display: none;
}
.md-tip-more summary:hover,
.md-tip-more summary:focus-visible {
  background: var(--primary-50);
  color: var(--primary-dark);
}
.md-tip-more summary:focus,
.md-tip-more summary:focus-visible {
  outline: none;
}
.md-tip-more summary svg {
  display: block;
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}
.md-tip-more[open] summary svg {
  transform: rotate(180deg);
}
.md-tip-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.md-tip-list li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--dark-500);
}
.md-tip-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  top: 0.8em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-300);
}
@media (min-width: 861px) {
  .md-tip-list {
    display: block;
    columns: 2;
    column-gap: 40px;
  }
  .md-tip-list li {
    break-inside: avoid;
    margin-block-end: 8px;
  }
}
@media (max-width: 860px) {
  .md-tip-points {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .md-tip {
    padding: 18px 16px;
    border-radius: 16px;
  }
  .md-tip-points li {
    padding: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-tip-more summary,
  .md-tip-more summary svg {
    transition: none;
  }
}

/* ---- Features, guide, sidebar ---- */
.md-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
.md-main-grid > * {
  min-width: 0;
}
.md-features {
  margin-block-end: 48px;
}
/* Features: two per row on white cards, short text (Mohamed, 2026-09-24: less talk, clearer) */
.md-features .theme-features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.md-features .feature-item {
  background: #fff;
  border: 1px solid var(--gray-100, #eef1f5);
  border-radius: 14px;
  padding: 18px 20px;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}
.md-features .feature-item:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  border-color: var(--primary-100, #dbe7ff);
}
.md-features .feature-item h4 {
  font-size: 15.5px;
  line-height: 1.5;
  margin-bottom: 4px;
  color: var(--dark);
}
.md-features .feature-item p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--gray-500);
}
@media (max-width: 640px) {
  .md-features .theme-features {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-features .feature-item {
    transition: none;
  }
  .md-features .feature-item:hover {
    transform: none;
  }
}
.md-guide-intro {
  margin-block-start: 6px;
}
.md-page .md-aside {
  position: sticky;
  top: calc(var(--md-header-h) + 84px);
}
.md-demo-title {
  margin-block-start: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-400);
}
.md-demo-pick {
  display: grid;
  gap: 8px;
  margin-block-start: 10px;
}
.md-demo-pick select {
  width: 100%;
  min-width: 0;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--gray-200);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  padding-inline: 10px;
  background: #fff;
  color: var(--dark);
}
/* The demo picker (the page script puts it over the native select): a button with the chosen design's picture,
   a list of every design under it, a bottom sheet on phones. Mohamed, 2026-09-24: the plain select «شكله وحش اوي». */
.md-dp {
  position: relative;
  min-width: 0;
}
.md-dp-thumb {
  display: block;
  flex: none;
  width: 56px;
  aspect-ratio: 16/10;
  border-radius: 7px;
  object-fit: cover;
  object-position: top;
  background: var(--gray-100);
  box-shadow: 0 0 0 1px var(--gray-200);
}
.md-dp-txt {
  display: block;
  flex: 1;
  min-width: 0;
  text-align: start;
}
.md-dp-txt b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--dark);
}
.md-dp-txt b i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.md-dp-txt b span,
.md-dp-txt small {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.md-dp-txt small {
  display: block;
  margin-block-start: 1px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gray-400);
}
.md-dp-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 8px;
  padding-inline-end: 10px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  font-family: var(--font);
  color: var(--dark);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.md-dp-btn:hover {
  border-color: var(--gray-300);
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.3);
}
.md-dp-btn:focus:not(:focus-visible) {
  outline: none;
}
.md-dp.is-open .md-dp-btn {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.md-dp-chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-50);
  color: var(--dark-500);
  transition:
    transform 0.25s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}
.md-dp-chev svg {
  width: 16px;
  height: 16px;
}
.md-dp-btn:hover .md-dp-chev {
  background: var(--gray-100);
  color: var(--dark);
}
.md-dp.is-open .md-dp-chev {
  transform: rotate(180deg);
  background: var(--primary-50);
  color: var(--primary-dark);
}
/* The list: under the button, as wide as the button or 340px, growing towards the page content
   (the sidebar sits at the inline end), or above the button when the room under it is short. */
.md-dp-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: max(100%, 340px);
  max-width: calc(100vw - 32px);
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--gray-200);
  box-shadow:
    0 24px 48px -18px rgba(15, 23, 42, 0.32),
    0 2px 6px rgba(15, 23, 42, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
}
.md-dp.is-up .md-dp-panel {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(6px);
}
.md-dp.is-open .md-dp-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s;
}
.md-dp-head {
  display: none;
}
.md-dp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 440px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
.md-dp-list:focus,
.md-dp-list:focus-visible {
  outline: none;
}
.md-dp-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
.md-dp-opt + .md-dp-opt {
  margin-block-start: 2px;
}
.md-dp-opt .md-dp-thumb {
  width: 52px;
}
.md-dp-opt > svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.md-dp-opt.is-active {
  background: var(--gray-50);
}
.md-dp-list:focus-visible .md-dp-opt.is-active {
  box-shadow: inset 0 0 0 2px var(--primary-light);
}
.md-dp-opt[aria-selected='true'] {
  background: var(--primary-50);
}
.md-dp-opt[aria-selected='true'] b {
  color: var(--primary-dark);
}
.md-dp-opt[aria-selected='true'] .md-dp-thumb {
  box-shadow: 0 0 0 2px var(--c, var(--primary));
}
.md-dp-opt[aria-selected='true'] > svg {
  opacity: 1;
}
.md-dp-backdrop {
  display: none;
}
@media (max-width: 640px) {
  /* phones: a bottom sheet over a dimmed page */
  .md-dp.is-sheet .md-dp-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.25s ease,
      visibility 0s linear 0.25s;
  }
  .md-dp.is-sheet.is-open .md-dp-backdrop {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.25s ease,
      visibility 0s;
  }
  .md-dp.is-sheet .md-dp-panel {
    position: fixed;
    z-index: 2001;
    top: auto;
    bottom: 0;
    inset-inline: 0;
    width: auto;
    max-width: none;
    padding: 6px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    border: 0;
    box-shadow: 0 -18px 40px -12px rgba(15, 23, 42, 0.35);
    opacity: 1;
    transform: translateY(100%);
    transition:
      transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s linear 0.3s;
  }
  .md-dp.is-sheet.is-open .md-dp-panel {
    transform: none;
    transition:
      transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s;
  }
  .md-dp.is-sheet .md-dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 6px 10px;
  }
  .md-dp.is-sheet .md-dp-head::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 4px;
    background: var(--gray-200);
  }
  .md-dp.is-sheet .md-dp-head b {
    font-size: 16px;
    color: var(--dark);
  }
  .md-dp-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--gray-100);
    color: var(--dark);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .md-dp-close:hover {
    background: var(--gray-200);
  }
  .md-dp-close:focus:not(:focus-visible) {
    outline: none;
  }
  .md-dp-close svg {
    width: 18px;
    height: 18px;
  }
  .md-dp.is-sheet .md-dp-list {
    max-height: min(64vh, 520px);
  }
  .md-dp.is-sheet .md-dp-opt {
    padding: 9px 8px;
  }
  .md-dp.is-sheet .md-dp-opt .md-dp-thumb {
    width: 60px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-dp-btn,
  .md-dp-chev,
  .md-dp-panel,
  .md-dp-opt,
  .md-dp-backdrop {
    transition: none !important;
  }
}
.md-aside-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary-dark);
  transition: color 0.2s ease;
}
.md-aside-all:hover,
.md-aside-all:focus-visible {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.md-aside-all svg {
  width: 16px;
  height: 16px;
}

/* ---- Gallery lightbox ---- */
.md-lb {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(2, 6, 23, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.md-lb header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  color: #fff;
}
.md-lb header b {
  font-size: 16px;
  color: #fff;
}
.md-lb header div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}
/* the counter is dir=ltr ("1 / 4"), so the gap comes from the flex row, not a logical margin */
.md-lb header small {
  color: rgba(255, 255, 255, 0.6);
}
.md-lb figure {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 0 64px;
  margin: 0;
}
.md-lb figure img {
  max-height: calc(100vh - 170px);
  width: auto;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.md-lb .md-lb-nav {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.md-lb .md-lb-nav svg {
  width: 22px;
  height: 22px;
}
.md-lb .md-prev {
  inset-inline-start: 14px;
}
.md-lb .md-next {
  inset-inline-end: 14px;
}
.md-lb-close {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
}
.md-lb-close svg {
  width: 20px;
  height: 20px;
}
.md-lb-thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  overflow-x: auto;
}
.md-lb-thumbs button {
  width: 74px;
  flex: none;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  background: #000;
}
.md-lb-thumbs button[aria-current='true'] {
  border-color: #fff;
  opacity: 1;
}
.md-lb-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ---- Buy bar on phones ---- */
.md-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 900;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--gray-200);
  box-shadow: 0 -10px 30px -12px rgba(15, 23, 42, 0.25);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.md-bar.is-on {
  transform: none;
}
.md-bar div {
  flex: 1;
  min-width: 0;
}
.md-bar strong {
  display: block;
  font-size: 17px;
  color: var(--dark);
  line-height: 1.2;
}
.md-bar small {
  display: block;
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-bar del {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-400);
}
.md-bar small.md-bar-sale {
  color: #b45309;
}

@media (max-width: 1100px) {
  .md-hero .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .md-stage {
    max-width: 720px;
    margin-inline: auto;
    width: 100%;
  }
  .md-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .md-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .md-page .md-aside {
    position: static;
  }
  .md-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .md-sub-buy {
    display: none;
  }
  .md-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .md-bar {
    display: flex;
  }
  .theme-multi-design-page .site-footer {
    padding-block-end: 72px;
  }
  .md-sec {
    padding-block: 64px;
  }
  .md-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .md-card-body {
    padding: 10px 10px 12px;
    gap: 8px;
  }
  .md-card-body b {
    font-size: 14.5px;
  }
  /* on phones the filters swipe sideways under the finger, with no scrollbar */
  .md-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 20px,
      #000 calc(100% - 20px),
      transparent
    );
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .md-filters::-webkit-scrollbar {
    display: none;
  }
  .md-search {
    max-width: none;
    flex: 1 1 100%;
    margin: 0;
    order: 4;
  }
  .md-view {
    order: 3;
    margin-inline-start: auto;
  }
  .md-page .md-owl:not(.owl-loaded) {
    grid-auto-columns: minmax(200px, 64%);
  }
  .md-pick,
  .md-pick[data-cols='2'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }
  .md-pick[data-cols='2'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md-pick > span {
    display: none;
  }
  .md-pick label {
    padding: 0;
  }
  .md-pick select {
    font-size: 13.5px;
    padding-inline: 6px;
  }
  .md-col small {
    display: none;
  }
  .md-col img {
    width: 48px;
  }
}
@media (max-width: 480px) {
  /* the site container drops to 16px side padding here */
  .md-filters {
    margin-inline: -16px;
    padding-inline: 16px;
  }
}
@media (max-width: 560px) {
  .md-hero {
    padding-block: calc(var(--md-header-h) + 28px) 52px;
  }
  .md-hero .md-lead {
    font-size: 1.02rem;
  }
  .md-hero-cta .md-btn {
    flex: 1 1 100%;
  }
  .md-panel {
    padding: 18px;
    border-radius: 18px;
  }
  .md-shot {
    padding-inline-end: 16%;
    padding-block-end: 48px;
  }
  .md-hint {
    font-size: 12px;
  }
  .md-actions .md-btn {
    flex: 1 1 100%;
  }
  .md-preset {
    flex-wrap: wrap;
  }
  .md-preset .md-btn {
    flex: 1 1 100%;
  }
  .md-lb figure {
    padding: 0 12px;
  }
  .md-lb .md-lb-nav {
    top: auto;
    bottom: 86px;
  }
  .md-sub .container {
    height: 54px;
  }
  .md-stage-label {
    max-width: 78%;
    padding: 8px 12px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-win,
  .md-phone,
  .md-page .md-scroll img,
  .md-panel,
  .md-card {
    transition: none !important;
    animation: none !important;
  }
}