/* PM_UNIFIED_CARD_SYSTEM_V1
   Canonical presentation contract for UAE/Saudi store roots and query branches.
   Loaded after legacy assets; merchant identity is carried by --pm-brand-*.
*/

body.pm-card-system {
  --pm-card-border: #dbe5e1;
  --pm-card-border-strong: #c9d9d3;
  --pm-card-ink: #102c32;
  --pm-card-muted: #536368;
  --pm-card-surface: #ffffff;
  --pm-card-canvas: #f5f8f7;
  --pm-card-radius: 8px;
  --pm-card-shadow: 0 8px 22px rgba(29, 37, 40, 0.045);
  --pm-brand: var(--store-accent, #08785d);
  --pm-brand-soft: var(--store-accent-soft, #eaf6f1);
  --pm-brand-ink: var(--store-accent-ink, #073f34);
  background: var(--pm-card-canvas);
}

body.pm-card-system.brand-noon,
body.pm-card-system.noon-store-body,
body.pm-card-system.noon-branch-body {
  --pm-brand: #b89c00;
  --pm-brand-soft: #ffed00;
  --pm-brand-ink: #302800;
}

body.pm-card-system .pm-card-shell {
  display: block;
  width: min(900px, calc(100% - 48px)) !important;
  max-width: 900px;
  min-width: 0;
  margin-inline: auto;
  padding-block: 36px 72px;
}

body.pm-card-system .pm-card-shell,
body.pm-card-system .pm-card-shell * {
  box-sizing: border-box;
}

body.pm-card-system .pm-card-shell > article {
  min-width: 0;
}

body.pm-card-system .pm-card-shell .breadcrumbs {
  margin-block: 0 18px;
}

body.pm-card-system .pm-card-shell .page-title,
body.pm-card-system .pm-card-shell .lead {
  max-width: 780px;
}

body.pm-card-system .pm-merchant-wrap {
  display: block !important;
  margin-top: 24px;
}

body.pm-card-system .pm-merchant-banner {
  display: grid !important;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr) !important;
  min-width: 0;
  min-height: 178px;
  align-items: stretch;
  gap: 0 !important;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--pm-card-border-strong) !important;
  border-radius: var(--pm-card-radius) !important;
  background: var(--pm-card-surface) !important;
  box-shadow: var(--pm-card-shadow) !important;
  padding: 0 !important;
}

body.pm-card-system .pm-merchant-media {
  display: grid !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 178px !important;
  align-self: stretch;
  place-items: center;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--pm-brand-soft) !important;
  box-shadow: none !important;
  padding: 30px !important;
}

body.pm-card-system .pm-merchant-media img {
  width: min(170px, 82%) !important;
  max-width: 100%;
  height: 72px !important;
  object-fit: contain;
}

body.pm-card-system .pm-merchant-copy {
  display: grid !important;
  min-width: 0;
  align-content: center;
  gap: 10px !important;
  padding: 32px 36px !important;
}

body.pm-card-system .pm-merchant-copy h1,
body.pm-card-system .pm-merchant-copy h2 {
  max-width: 620px;
  margin: 0 !important;
  color: var(--pm-card-ink);
  font-size: clamp(2rem, 4.5vw, 2.5rem) !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

body.pm-card-system .pm-merchant-copy > p:not(.pm-eyebrow):last-child {
  max-width: 620px;
  margin: 0;
  color: var(--pm-card-muted) !important;
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

body.pm-card-system .pm-eyebrow {
  margin: 0;
  color: var(--pm-brand-ink) !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.pm-card-system .pm-section-card {
  min-width: 0;
  margin-top: 20px !important;
  border: 1px solid var(--pm-card-border) !important;
  border-radius: var(--pm-card-radius) !important;
  background: var(--pm-card-surface) !important;
  box-shadow: var(--pm-card-shadow) !important;
  padding: 22px !important;
}

/* A grouping shell is not itself drawn as a card when it contains cards/items.
   This is the explicit no-nested-card rule. */
body.pm-card-system .pm-section-card:has(> .pm-card-grid),
body.pm-card-system .pm-section-card:has(> .pm-step-list),
body.pm-card-system .pm-section-card:has(> .pm-editorial-layout),
body.pm-card-system .pm-section-card:has(.pm-content-card) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.pm-card-system .pm-section-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: start;
  gap: 6px !important;
  margin: 0 0 15px !important;
  text-align: start !important;
}

body.pm-card-system .pm-section-head h2,
body.pm-card-system .pm-section-head h3 {
  max-width: 760px;
  margin: 0 !important;
  color: var(--pm-card-ink);
  font-size: clamp(1.35rem, 2.6vw, 1.62rem) !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

body.pm-card-system .pm-section-head > p:not(.pm-eyebrow) {
  max-width: 760px;
  margin: 0 !important;
  color: var(--pm-card-muted) !important;
  line-height: 1.62;
}

body.pm-card-system .pm-card-grid {
  display: grid !important;
  min-width: 0;
  gap: 12px !important;
}

body.pm-card-system .pm-card-grid--routes,
body.pm-card-system .pm-card-grid--details {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.pm-card-system .pm-card-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.pm-card-system .offer-route-grid:has(.pm-content-card--cluster) {
  grid-template-columns: 1fr !important;
}

body.pm-card-system .pm-content-card {
  display: grid;
  min-width: 0;
  min-height: 100%;
  align-content: start;
  gap: 8px;
  margin: 0 !important;
  border: 1px solid var(--pm-card-border) !important;
  border-radius: var(--pm-card-radius) !important;
  background: var(--pm-card-surface) !important;
  box-shadow: none !important;
  color: var(--pm-card-ink);
  padding: 18px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.pm-card-system .pm-content-card:hover {
  border-color: var(--pm-brand) !important;
  box-shadow: 0 8px 20px rgba(29, 37, 40, 0.055) !important;
  transform: none !important;
}

body.pm-card-system .pm-content-card h3 {
  margin: 0 !important;
  color: var(--pm-card-ink);
  font-size: 1.08rem !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere;
}

body.pm-card-system .pm-content-card p {
  margin: 0 !important;
  color: var(--pm-card-muted) !important;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

body.pm-card-system .pm-content-card ul {
  margin-block: 2px 0;
  color: #405357;
}

body.pm-card-system .pm-content-card--route {
  grid-template-rows: auto auto 1fr auto;
}

body.pm-card-system .pm-content-card--route > a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-self: start;
  margin-top: 4px;
  color: var(--pm-brand-ink);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body.pm-card-system .pm-content-card--cluster {
  grid-column: 1 / -1;
  gap: 14px;
}

body.pm-card-system .pm-editorial-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.75fr) !important;
  gap: 12px !important;
  align-items: stretch;
}

body.pm-card-system .pm-content-card--prose {
  display: block;
}

body.pm-card-system .pm-content-card--prose p {
  margin: 0 0 12px !important;
}

body.pm-card-system .pm-content-card--prose p:last-child {
  margin-bottom: 0 !important;
}

body.pm-card-system .pm-content-card--aside {
  align-content: start;
}

body.pm-card-system .pm-content-card--aside h3 {
  color: var(--pm-brand-ink);
}

body.pm-card-system .pm-editorial-disclosure {
  min-width: 0;
  margin: 0;
}

body.pm-card-system .pm-editorial-disclosure-summary {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--pm-brand-ink);
  list-style: none;
  padding: 0;
  text-align: start;
}

body.pm-card-system .pm-editorial-disclosure-summary::-webkit-details-marker {
  display: none;
}

body.pm-card-system .pm-editorial-disclosure-summary h3 {
  flex: 1 1 auto;
  margin: 0 !important;
}

body.pm-card-system .pm-editorial-disclosure-summary::after {
  display: inline-grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  place-items: center;
  margin-inline-start: auto;
  border: 1px solid var(--pm-card-border-strong);
  border-radius: 50%;
  color: var(--pm-brand-ink);
  content: "+";
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}

body.pm-card-system .pm-editorial-disclosure[open]
  > .pm-editorial-disclosure-summary::after {
  content: "−";
}

body.pm-card-system .pm-editorial-disclosure-summary:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--pm-brand);
  outline-offset: 4px;
}

body.pm-card-system .pm-editorial-disclosure-body {
  display: grid;
  min-width: 0;
  gap: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--pm-card-border);
  padding-top: 14px;
}

body.pm-card-system .pm-editorial-source-note p {
  margin: 0 !important;
}

body.pm-card-system .pm-editorial-source-note a {
  color: var(--pm-brand-ink);
  font-weight: 800;
  text-underline-offset: 3px;
}

html[dir="rtl"] body.pm-card-system .pm-editorial-disclosure-summary {
  text-align: start;
}

body.pm-card-system .pm-step-list {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

body.pm-card-system .pm-step-list li {
  min-width: 0;
  border: 1px solid var(--pm-card-border) !important;
  border-radius: var(--pm-card-radius) !important;
  background: var(--pm-card-surface) !important;
  box-shadow: none !important;
  padding: 15px !important;
}

body.pm-card-system .pm-step-list li::before {
  background: var(--pm-brand) !important;
}

body.pm-card-system.brand-noon .pm-step-list li::before,
body.pm-card-system.noon-store-body .pm-step-list li::before,
body.pm-card-system.noon-branch-body .pm-step-list li::before {
  color: #191500 !important;
}

body.pm-card-system .pm-faq-list {
  border-top: 1px solid #e4ece9;
}

body.pm-card-system .pm-faq-list details {
  border-bottom: 1px solid #e4ece9;
}

body.pm-card-system .pm-faq-list summary {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  cursor: pointer;
  color: #173338;
  font-weight: 850;
  padding-block: 14px;
}

body.pm-card-system .pm-faq-list details p {
  max-width: 760px;
  margin: 0;
  color: var(--pm-card-muted);
  line-height: 1.65;
  padding-block: 0 16px;
}

body.pm-card-system .pm-chip-list,
body.pm-card-system .pm-related-links > div {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

body.pm-card-system .pm-chip-list a,
body.pm-card-system .pm-related-links a {
  display: inline-flex !important;
  min-width: 44px;
  min-height: 44px !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pm-card-border-strong) !important;
  border-radius: 6px !important;
  background: var(--pm-card-surface) !important;
  color: var(--pm-brand-ink) !important;
  font-weight: 850;
  line-height: 1.25;
  padding: 7px 12px !important;
  text-align: center;
}

body.pm-card-system .pm-chip-list a:hover,
body.pm-card-system .pm-related-links a:hover {
  border-color: var(--pm-brand) !important;
  background: var(--pm-brand-soft) !important;
  transform: none !important;
}

body.pm-card-system .pm-related-links {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  border-top: 1px solid var(--pm-card-border);
  padding-top: 18px;
}

body.pm-card-system .pm-live-panel {
  scroll-margin-top: 112px;
}

body.pm-card-system .pm-status-stack {
  min-width: 0;
}

body.pm-card-system .pm-card-shell a:focus-visible,
body.pm-card-system .pm-card-shell summary:focus-visible {
  outline: 3px solid var(--pm-brand);
  outline-offset: 3px;
}

body.pm-card-system .pm-card-shell img,
body.pm-card-system .pm-card-shell a,
body.pm-card-system .pm-card-shell p,
body.pm-card-system .pm-card-shell h1,
body.pm-card-system .pm-card-shell h2,
body.pm-card-system .pm-card-shell h3,
body.pm-card-system .pm-card-shell li,
body.pm-card-system .pm-card-shell span,
body.pm-card-system .pm-card-shell strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

html[dir="rtl"] body.pm-card-system {
  text-align: right;
}

html[dir="rtl"] body.pm-card-system .pm-card-shell,
html[dir="rtl"] body.pm-card-system .pm-merchant-banner,
html[dir="rtl"] body.pm-card-system .pm-section-card,
html[dir="rtl"] body.pm-card-system .pm-content-card {
  direction: rtl;
}

html[dir="rtl"] body.pm-card-system .pm-eyebrow {
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

html[dir="rtl"] body.pm-card-system .pm-section-head {
  justify-items: start;
  text-align: start !important;
}

html[dir="rtl"] body.pm-card-system .pm-content-card ul {
  padding-inline: 0 20px;
}

@media (max-width: 760px) {
  body.pm-card-system .pm-card-shell {
    width: calc(100% - 28px) !important;
    padding-block: 24px 58px;
  }

  body.pm-card-system .pm-merchant-banner,
  body.pm-card-system .pm-card-grid--routes,
  body.pm-card-system .pm-card-grid--details,
  body.pm-card-system .pm-card-grid--compact,
  body.pm-card-system .pm-editorial-layout {
    grid-template-columns: 1fr !important;
  }

  body.pm-card-system .pm-merchant-media {
    min-height: 136px !important;
    padding: 24px !important;
  }

  body.pm-card-system .pm-merchant-media img {
    width: min(160px, 72%) !important;
    height: 62px !important;
  }

  body.pm-card-system .pm-merchant-copy {
    padding: 24px !important;
  }

  body.pm-card-system .pm-merchant-copy h1,
  body.pm-card-system .pm-merchant-copy h2 {
    font-size: 2rem !important;
  }

  body.pm-card-system .pm-section-card {
    padding: 18px !important;
  }

  body.pm-card-system .pm-section-card:has(> .pm-card-grid),
  body.pm-card-system .pm-section-card:has(> .pm-step-list),
  body.pm-card-system .pm-section-card:has(> .pm-editorial-layout),
  body.pm-card-system .pm-section-card:has(.pm-content-card) {
    padding: 0 !important;
  }

  body.pm-card-system .pm-content-card {
    padding: 16px !important;
  }

  body.pm-card-system .pm-chip-list a,
  body.pm-card-system .pm-related-links a {
    flex: 1 1 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pm-card-system *,
  body.pm-card-system *::before,
  body.pm-card-system *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* PM_UNIFIED_CARD_SYSTEM_STRUCTURAL_V2
   Corrective structural contract: every card grid is a single full-width
   column; store roots use the Noon sequence H1 -> lead -> merchant banner ->
   route-map clusters -> chip actions.
*/

body.pm-card-system {
  --pm-card-radius: 6px;
}

body.pm-card-system .pm-page-title {
  max-width: 780px;
  margin: 0 !important;
  color: var(--pm-card-ink);
  font-size: clamp(2rem, 4.5vw, 2.5rem) !important;
  font-weight: 850;
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

body.pm-card-system .pm-page-lead {
  max-width: 780px;
  margin: 12px 0 0 !important;
  color: var(--pm-card-muted) !important;
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

body.pm-card-system .pm-page-lead + .pm-merchant-wrap {
  margin-top: 24px !important;
}

body.pm-card-system .pm-merchant-name {
  margin: 0 !important;
}

body.pm-card-system .pm-merchant-summary {
  max-width: 620px;
  margin: 0 !important;
  color: var(--pm-card-muted) !important;
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

body.pm-card-system .pm-route-map {
  min-width: 0;
  margin-top: 20px !important;
}

body.pm-card-system .pm-card-grid--routes,
body.pm-card-system .pm-card-grid--details,
body.pm-card-system .pm-card-grid--compact,
body.pm-card-system .pm-editorial-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.pm-card-system .pm-card-grid > .pm-content-card,
body.pm-card-system .pm-editorial-layout > .pm-content-card {
  width: 100% !important;
  max-width: none !important;
}

body.pm-card-system .pm-content-card--route > a {
  display: inline-flex !important;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  justify-self: start;
  margin-top: 6px;
  border: 1px solid var(--pm-card-border-strong) !important;
  border-radius: 6px !important;
  background: var(--pm-card-surface) !important;
  color: var(--pm-brand-ink) !important;
  font-weight: 850;
  line-height: 1.25;
  padding: 7px 12px !important;
  text-align: center;
  text-decoration: none !important;
}

body.pm-card-system .pm-content-card--route > a:hover {
  border-color: var(--pm-brand) !important;
  background: var(--pm-brand-soft) !important;
  transform: none !important;
}

html[dir="rtl"] body.pm-card-system .pm-page-title,
html[dir="rtl"] body.pm-card-system .pm-page-lead {
  text-align: start;
}

@media (max-width: 760px) {
  body.pm-card-system .pm-page-title {
    font-size: 2rem !important;
  }

  body.pm-card-system .pm-chip-list a,
  body.pm-card-system .pm-related-links a,
  body.pm-card-system .pm-content-card--route > a {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}


/* Root parity details caught by the corrective side-by-side review. */
body.pm-card-system .pm-card-shell .breadcrumbs,
body.pm-card-system .pm-card-shell .breadcrumbs a,
body.pm-card-system .pm-card-shell .breadcrumbs span {
  color: #536368 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1.4;
}

body.pm-card-system .pm-chip-list a,
body.pm-card-system .pm-related-links a,
body.pm-card-system .pm-content-card--route > a {
  text-decoration: none !important;
}