/* ===========================================================================
   Mercado — content pages.

   Loaded only on the pages that use a designed template (see
   mercado_is_designed_page in inc/pages.php).

   Every value comes from tokens.css. Tints are produced with color-mix()
   against a token rather than by introducing a new hex.
   =========================================================================== */

/* ---- shared -------------------------------------------------------------- */
.note {
  margin-block-start: var(--s5);
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.note--pending {
  border-block-start-width: 2px;
  border-block-start-color: var(--brand);
  color: var(--ink);
}

/* A definition list on rules — used for mailboxes and fact rows. */
.deflist { margin: 0; }

.deflist__row {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s4);
  border-block-end: 1px solid var(--line);
}

@media (min-width: 760px) {
  .deflist__row {
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
    gap: var(--s5);
    align-items: baseline;
  }
}

.deflist dt { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.deflist dd { margin: 0; font-size: var(--t-body); font-weight: 600; }
.deflist dd a { border-block-end: 1px solid var(--line-2); padding-block-end: 2px; }
.deflist dd a:hover { border-block-end-color: var(--ink); }

/* ---- customer service ---------------------------------------------------- */
.channels {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.channel { padding-block-start: var(--s5); border-block-start: 1px solid var(--line); }

.channel__label {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: var(--s3);
}

.channel__value {
  font-size: var(--t-h3);
  font-weight: 700;
  margin-block-end: var(--s5);
  /* Phone numbers are Latin digits: keep them LTR inside the RTL page. */
  direction: ltr;
  text-align: start;
}

.channel__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---- installment requirements -------------------------------------------- */
.reqs { display: grid; gap: var(--s9); }

@media (min-width: 1000px) {
  .reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); align-items: start; }
}

.reqs__list { display: grid; gap: var(--s5); }

.reqs__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding-block-end: var(--s5);
  border-block-end: 1px solid var(--line);
}

.reqs__num {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-latin);
  color: var(--brand-ink);
}

.reqs__text { font-size: var(--t-lede); line-height: var(--lh-body); }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band {
  display: grid;
  gap: var(--s6);
  align-items: center;
  padding: var(--s8) var(--s6);
  background: var(--paper-2);
}

@media (min-width: 900px) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); }
}

.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---- about --------------------------------------------------------------- */
.about { display: grid; gap: var(--s8); }

@media (min-width: 1000px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); gap: var(--s9); align-items: start; }
}

.about__section + .about__section {
  margin-block-start: var(--s7);
  padding-block-start: var(--s7);
  border-block-start: 1px solid var(--line);
}

.about__heading { font-size: var(--t-h2); margin-block-end: var(--s4); }
.about__lead { font-size: var(--t-lede); font-weight: 600; margin-block-end: var(--s4); }
.about__line { color: var(--ink-2); margin-block-end: var(--s3); }

.about__aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--s5)); }

.factbox { padding: var(--s6); background: var(--paper-2); }
.factbox__title { font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; color: var(--ink-3); margin-block-end: var(--s4); }
.factbox__text { margin: 0; font-size: var(--t-sm); line-height: var(--lh-body); }

/* The map keeps its aspect without the iframe dictating page height. */
.mapframe { position: relative; aspect-ratio: 16 / 9; background: var(--paper-2); }
.mapframe iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

@media (max-width: 760px) { .mapframe { aspect-ratio: 4 / 3; } }

/* ---- directory ----------------------------------------------------------- */
.directory + .directory { margin-block-start: var(--s9); }

.directory__grid {
  display: grid;
  gap: var(--s6) var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

.directory__card { display: grid; gap: var(--s4); }

.directory__media {
  display: block;
  aspect-ratio: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}

.directory__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: 12%;
  transition: transform var(--d-slow) var(--ease-out);
}

@media (hover: hover) {
  .directory__card:hover .directory__media img { transform: scale(1.05); }
}

.directory__body { display: grid; gap: var(--s1); }
.directory__name { font-weight: 600; }
.directory__count { font-size: var(--t-sm); color: var(--ink-3); }

/* The empty-archive state reuses the row form. */
.directory__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s4);
  border-block-end: 1px solid var(--line);
  transition: padding-inline-start var(--d-fast) var(--ease);
}

.directory__row:hover { padding-inline-start: var(--s3); }

.directory__plain {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  color: var(--ink-3);
  font-size: var(--t-sm);
}

.directory__plain li { padding-block-end: var(--s2); border-block-end: 1px solid var(--line); }

/* ---- empty archive state ------------------------------------------------- */
.empty-state { padding-block: var(--s7); max-inline-size: 640px; }
.empty-state__title { font-size: var(--t-h2); margin-block: var(--s3) var(--s4); }
.empty-state__list { margin-block-start: var(--s6); }
.empty-state__cta { margin-block-start: var(--s6); }

/* ---- tiles (Apple showcase) ---------------------------------------------- */
.tiles {
  display: grid;
  gap: var(--s6) var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
}

.tile { display: grid; gap: var(--s3); justify-items: center; text-align: center; }

.tile__media {
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: 1;
  background: var(--paper-2);
}

.tile__media img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 16%; transition: transform var(--d-slow) var(--ease-out); }

@media (hover: hover) {
  .tile:hover .tile__media img { transform: scale(1.06); }
}

.tile__name { font-weight: 600; font-size: var(--t-sm); }
.tile__count { font-size: var(--t-micro); color: var(--ink-3); }

/* A tile with nothing behind it must not look clickable. */
.tile--flat { opacity: 0.55; }
.tile__count--soon { color: var(--ink-3); }

/* ---- article / policy ---------------------------------------------------- */
.article__meta { font-size: var(--t-sm); color: var(--ink-3); margin-block-start: var(--s3); }

.article .prose > * + * { margin-block-start: var(--s5); }
.article .prose h2 { font-size: var(--t-h2); margin-block-start: var(--s8); }
.article .prose h3 { font-size: var(--t-h3); margin-block-start: var(--s7); }

.article__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-block-start: var(--s8);
  padding-block-start: var(--s6);
  border-block-start: 1px solid var(--line);
}

/* ---- landing (opt-in) ---------------------------------------------------- */
.landing__hero {
  display: grid;
  gap: var(--s7);
  align-items: center;
  padding-block: calc(var(--header-h) + var(--s8)) var(--s8);
}

@media (min-width: 900px) {
  .landing__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); }
}

.landing__copy { display: grid; gap: var(--s5); }
.landing__title { font-size: var(--t-h1); }
.landing__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.landing__media { background: var(--paper); }
.landing__media img { inline-size: 100%; block-size: auto; object-fit: contain; }

.landing__claims {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.landing__claim {
  padding-block: var(--s4);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-lede);
  font-weight: 600;
}

/* ---- tracking & wishlist ------------------------------------------------- */
.tracking { max-inline-size: 620px; }

.tracking form,
.tracking .woocommerce { display: grid; gap: var(--s5); }

.wishlist__back { margin-block-start: var(--s7); }

/* YITH prints a table; on a phone each row becomes a stacked line. Its own
   classes and inputs are untouched — the plugin's JS depends on them. */
.wishlist table.shop_table { inline-size: 100%; border-collapse: collapse; }

.wishlist table.shop_table th {
  padding: var(--s3) var(--s4) var(--s3) 0;
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: start;
  border-block-end: 1px solid var(--line);
}

.wishlist table.shop_table td {
  padding: var(--s5) var(--s4) var(--s5) 0;
  border-block-end: 1px solid var(--line);
  vertical-align: middle;
}

.wishlist table.shop_table img { inline-size: 72px; block-size: 72px; object-fit: contain; }

.wishlist .wishlist-title,
.wishlist h2 { font-size: var(--t-h3); margin-block-end: var(--s5); }

/* YITH prints its own list name ("My wishlist", in English) above the table.
   The page already carries its Arabic title in .commerce-open, so the plugin's
   heading is hidden rather than shown twice in two languages. CSS instead of
   a PHP filter because YITH re-renders this block over AJAX, outside the page
   request a filter could key on. */
.wishlist .wishlist-title-container { display: none; }

.wishlist .wishlist-empty { font-size: var(--t-lede); color: var(--ink-2); }

@media (max-width: 700px) {
  .wishlist table.shop_table thead { display: none; }
  .wishlist table.shop_table,
  .wishlist table.shop_table tbody,
  .wishlist table.shop_table tr,
  .wishlist table.shop_table td { display: block; inline-size: 100%; }

  .wishlist table.shop_table tr {
    padding-block: var(--s5);
    border-block-end: 1px solid var(--line);
  }

  .wishlist table.shop_table td { border: 0; padding: var(--s2) 0; }
}

/* ---- search / archive result rows ---------------------------------------
   Non-product results: a title and a line of context, on a rule. */
.results { display: grid; }

.result-row { border-block-end: 1px solid var(--line); }

.result-row a {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s5);
  transition: padding-inline-start var(--d-fast) var(--ease);
}

.result-row a:hover { padding-inline-start: var(--s3); }
.result-row__title { font-size: var(--t-h3); font-weight: 600; }
.result-row__text { font-size: var(--t-sm); color: var(--ink-2); }

/* ---- rhythm corrections -------------------------------------------------
   Found while reviewing the rendered pages, not while writing them. */

/* The opener already carries the page's top space; a full section gap after
   it leaves a screen of nothing before the first block. */
.page-open + .wrap.section,
.page-open + .wrap > .section:first-child { padding-block-start: var(--s8); }

/* These headings are the store's own sentences ("شروط التقديم لطلب هاتف أقساط
   من شركة ميركادو للأجهزة الكهربائية والالكترونية" — 76 characters). At the
   h2 display size they wrap to four lines and swamp the list they introduce,
   so in this context they are set as subheadings. */
.reqs .section__open h2,
.channels + .section .section__open h2 {
  font-size: var(--t-h3);
  max-inline-size: 34ch;
  line-height: var(--lh-head);
}

.reqs .section__open { margin-block-end: var(--s6); }