/**
 * Shared info-section layout — text-first stacked content blocks.
 *
 * Pattern: section title + intro paragraph + uppercase label sub-blocks
 * (each with a body paragraph, item list, or bulleted list).
 *
 * Used by footer/info pages with this content shape:
 *   Payments & Pricing, Pre-Orders / Personal Shopping, Returns & Refunds,
 *   Shipping & Delivery, Qatar Collection, International Collection.
 *
 * Class prefix `.pp-` is legacy from the original Payments & Pricing page —
 * kept stable across all consumer pages so markup stays consistent.
 */

/* ==========================================
   STACKED BLOCKS
   ========================================== */

.pp-content {
  padding: 96px 150px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.pp-content-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pp-block-title {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0;
  color: #2d1f1f;
  margin: 0;
}

/* Label-style heading (smaller, bolder, uppercase) — used for "PRICING" etc. */
.pp-block-title--upper {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.pp-block-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pp-block-intro {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1a1a1a;
  margin: 0;
}

/* Stacked items (e.g. payment methods). */
.pp-method-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-method-item {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1a1a1a;
  margin: 0;
}

.pp-method-item u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Bulleted list with custom 6×6 disc bullets. */
.pp-block-bullets {
  margin: 0;
  padding-inline-start: 40px;
  list-style: none;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1a1a1a;
}

.pp-block-bullets li {
  position: relative;
  margin: 0;
  padding-inline-start: 18px;
}

.pp-block-bullets li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: #1a1a1a;
  border-radius: 50%;
}

.pp-block-bullets li + li {
  margin-top: 2px;
}

/* Tighter gap when a bulleted list directly follows an intro paragraph
   (within a content block). Parent gap is 32px; offset by -8px → 24px. */
.pp-block-intro + .pp-block-bullets {
  margin-top: -8px;
}

/* Shipping & Delivery page (both Qatar + Dubai/GCC) — pull every bulleted
   list up by 8px so spacing above bullets is 24px, not 32px, even when
   the bullets follow .pp-method-items (e.g. DELIVERY TIMELINES block). */
.shipping-delivery-page-body .pp-block-bullets {
  margin-top: -8px;
}

/* Same tightening for the outro paragraph that closes the PERSONAL SHOPPING
   block (an intro paragraph rendered directly after the bulleted list). */
.shipping-delivery-page-body .pp-block-bullets + .pp-block-intro {
  margin-top: -8px;
}

/* Shipping & Delivery — typography scale-down (page title 20, body 14) */
.shipping-delivery-page-body .pp-block-title {
  font-size: 20px;
}

.shipping-delivery-page-body .pp-block-intro,
.shipping-delivery-page-body .pp-block-bullets {
  font-size: 14px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1023px) and (min-width: 768px) {
  .pp-content {
    padding: 64px 40px;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .pp-content {
    padding: 48px 24px;
    gap: 49px;
  }

  .pp-content-block {
    gap: 24px;
  }

  .pp-block-body {
    gap: 20px;
  }

  /* Hide forced line-breaks meant for desktop only */
  .pp-desktop-br {
    display: none;
  }
  .shipping-delivery-page-body .pp-block-intro,
  .shipping-delivery-page-body .pp-block-bullets {
    font-size: 14px;
  }

  .shipping-delivery-page-body .pp-block-title {
    font-size: 16px;
  }
}