@charset "UTF-8";
/* =========================================================================
   Recycling — /recycling/
   -------------------------------------------------------------------------
   Sibling to the Product Care page and deliberately built from the same
   parts: cream label strip, perforated edge, scissors mark, language pills.
   Someone who has scanned both QR codes should recognise the second page
   instantly.

   The one departure is the rewards block, which uses the brand's pale blue
   (#d7f9fa) so the offer reads as a distinct thing rather than more
   instructions.

   Namespace: .rc-*  (BEM)
   No inline styles anywhere — Content Security Policy forbids them.
   ========================================================================= */
/* ---- Brand palette (TARSAH branding key file) ---------------------------- */
/* ---- Type --------------------------------------------------------------- */
/* ---- Metrics ------------------------------------------------------------ */
/* =========================================================================
   Page canvas
   ========================================================================= */
.rc {
  box-sizing: border-box;
  padding: 2.5rem 1rem 4.5rem;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #24322c;
  background-color: #5d7b6f;
  background-image: radial-gradient(circle at 50% 50%, rgba(164, 195, 162, 0.2) 0 7px, transparent 7px 13px, rgba(164, 195, 162, 0.2) 13px 19px, transparent 19px), radial-gradient(circle at 50% 50%, rgba(164, 195, 162, 0.2) 0 7px, transparent 7px 13px, rgba(164, 195, 162, 0.2) 13px 19px, transparent 19px);
  background-size: 76px 76px, 76px 76px;
  background-position: 0 0, 38px 38px;
}
.rc *,
.rc *::before,
.rc *::after {
  box-sizing: inherit;
}

/* =========================================================================
   The label strip
   ========================================================================= */
.rc__strip {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.75rem 2.5rem;
  background: #eae7d6;
  border-radius: 2px;
  box-shadow: 0 18px 44px rgba(21, 33, 28, 0.24);
}

.rc__perf {
  position: relative;
  height: 1.75rem;
  margin: 0 -1.75rem;
}
.rc__perf::after {
  content: "";
  position: absolute;
  inset-inline: 1.25rem;
  top: 50%;
  border-top: 2px dashed rgba(93, 123, 111, 0.45);
}

.rc__perf--top {
  height: 2.5rem;
}

.rc__perf--bottom {
  height: 1.5rem;
  margin-bottom: -1rem;
}

.rc__scissors {
  position: absolute;
  inset-inline-start: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  padding: 0 0.35rem;
  font-size: 1.15rem;
  line-height: 1;
  color: #5d7b6f;
  background: #eae7d6;
}

/* =========================================================================
   Head
   ========================================================================= */
.rc__head {
  padding-top: 0.5rem;
  text-align: center;
}

.rc__eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #5d7b6f;
}

/* =========================================================================
   Language pills
   ========================================================================= */
.rc__langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.5rem 0 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(93, 123, 111, 0.24);
}

.rc__pill {
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: #41584f;
  background: transparent;
  border: 1px solid rgba(93, 123, 111, 0.24);
  border-radius: 999px;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.rc__pill:hover, .rc__pill:focus-visible {
  color: #41584f;
  background: rgba(176, 212, 184, 0.42);
  border-color: #a4c3a2;
}
.rc__pill:focus-visible {
  outline: 2px solid #41584f;
  outline-offset: 2px;
}
.rc__pill.is-active {
  color: #eae7d6;
  background: #41584f;
  border-color: #41584f;
}

/* =========================================================================
   Language panel
   ========================================================================= */
.rc__lang {
  text-align: start;
}
.rc__lang:focus {
  outline: none;
}
.rc__lang[lang=ar] {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}

.rc__title {
  margin: 0 0 1rem;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7.5vw, 2.9rem);
  font-weight: 400;
  line-height: 1.12;
  text-align: center;
  color: #41584f;
}

.rc__lang[lang=ar] .rc__title {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  font-weight: 600;
  font-size: clamp(1.55rem, 5.5vw, 2.05rem);
}

.rc__standfirst {
  margin: 0 0 2rem;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
  color: #41584f;
}

.rc__intro {
  margin: 0 0 2.75rem;
  font-size: 1rem;
  line-height: 1.75;
}
.rc__intro p {
  margin: 0 0 1rem;
}
.rc__intro p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   Section labels
   ========================================================================= */
.rc__section-label {
  margin: 0 0 1.25rem;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5d7b6f;
}

.rc__lang[lang=ar] .rc__section-label {
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.85rem;
  font-weight: 600;
}

/* =========================================================================
   Rewards — the reason most people scanned. Pale blue sets them apart.
   ========================================================================= */
.rc__rewards {
  margin: 0 0 2.75rem;
}

.rc__reward-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc__reward {
  padding: 1.35rem 1.4rem;
  background: #d7f9fa;
  border: 1px solid rgba(93, 123, 111, 0.18);
  border-radius: 2px;
}

.rc__reward-badge {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #eae7d6;
  background: #41584f;
  border-radius: 999px;
}

.rc__reward-title {
  margin: 0 0 0.45rem;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  color: #41584f;
}

.rc__lang[lang=ar] .rc__reward-title {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  font-size: 1.2rem;
}

.rc__reward-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #24322c;
}

.rc__reward-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: rgba(36, 50, 44, 0.68);
}

.rc__reward-until {
  font-weight: 500;
}

/* =========================================================================
   Preparation steps — a real sequence, so genuinely numbered
   ========================================================================= */
.rc__prep {
  margin: 0 0 2.75rem;
}

.rc__prep-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.rc__prep-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(93, 123, 111, 0.24);
}
.rc__prep-step:last-child {
  border-bottom: 1px solid rgba(93, 123, 111, 0.24);
}

.rc__prep-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #eae7d6;
  background: #a4c3a2;
  border-radius: 50%;
}

.rc__prep-text {
  flex: 1 1 auto;
  min-width: 0;
}

.rc__prep-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0 0.35rem;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: #41584f;
}

.rc__prep-icon {
  font-size: 1.15rem;
  line-height: 1;
  color: #5d7b6f;
}

.rc__prep-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #24322c;
}

/* =========================================================================
   Return methods
   ========================================================================= */
.rc__methods {
  margin: 0 0 2.5rem;
}

.rc__method {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(93, 123, 111, 0.24);
}
.rc__method:last-child {
  border-bottom: 1px solid rgba(93, 123, 111, 0.24);
}

.rc__method-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: #41584f;
}

.rc__lang[lang=ar] .rc__method-title {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  font-size: 1.2rem;
}

.rc__method-icon {
  flex: 0 0 auto;
  font-size: 1.4rem;
  line-height: 1;
  color: #5d7b6f;
}

.rc__method-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #24322c;
}
.rc__method-body p {
  margin: 0 0 0.75rem;
}
.rc__method-body p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   Drop-off points
   ========================================================================= */
.rc__points {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.rc__point {
  padding: 1.1rem 1.2rem;
  background: rgba(176, 212, 184, 0.26);
  border-radius: 2px;
}
.rc__point.is-paused {
  background: rgba(93, 123, 111, 0.1);
}

.rc__point-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #41584f;
}

.rc__point-flag {
  padding: 0.15rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #eae7d6;
  background: rgba(36, 50, 44, 0.68);
  border-radius: 999px;
}

.rc__point-address,
.rc__point-place {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #24322c;
}

.rc__point-hours,
.rc__point-note {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(36, 50, 44, 0.68);
}

.rc__postal {
  margin: 1rem 0 0;
  padding: 1rem 1.2rem;
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.6;
  color: #24322c;
  background: rgba(176, 212, 184, 0.26);
  border-radius: 2px;
}
.rc__postal p {
  margin: 0;
}

/* =========================================================================
   Closing
   ========================================================================= */
.rc__closing {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.6rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #eae7d6;
  background: #41584f;
  border-radius: 2px;
}
.rc__closing p {
  margin: 0 0 0.9rem;
}
.rc__closing p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   Links & foot
   ========================================================================= */
.rc__link {
  color: #41584f;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.rc__link:hover, .rc__link:focus-visible {
  color: #24322c;
}
.rc__link:focus-visible {
  outline: 2px solid #41584f;
  outline-offset: 2px;
}

.rc__closing .rc__link {
  color: #d7f9fa;
}

.rc__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(93, 123, 111, 0.24);
  font-size: 0.85rem;
  color: rgba(36, 50, 44, 0.68);
}

.rc__foot-note {
  margin: 0;
}

/* =========================================================================
   Breakpoints
   ========================================================================= */
@media (min-width: 640px) {
  .rc__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .rc {
    padding: 4rem 1.5rem 6rem;
  }
  .rc__strip {
    padding: 0 3.5rem 3.5rem;
  }
  .rc__perf {
    margin: 0 -3.5rem;
  }
  .rc__reward {
    padding: 1.6rem 1.75rem;
  }
  .rc__closing {
    padding: 1.85rem 2rem;
  }
}
/* =========================================================================
   Motion & print
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .rc__pill {
    transition: none;
  }
}
@media print {
  .rc {
    padding: 0;
    background: none;
  }
  .rc__strip {
    max-width: none;
    box-shadow: none;
  }
  .rc__langs,
  .rc__perf {
    display: none;
  }
  .rc__lang[hidden] {
    display: block;
  }
  .rc__lang {
    page-break-inside: avoid;
  }
  .rc__closing {
    color: #24322c;
    background: none;
    border: 1px solid rgba(93, 123, 111, 0.24);
  }
}

/*# sourceMappingURL=main.css.map */