/* rendeles.html – page layout only (brand-info group). Tokens only; components come from components.css. */

/* Methods: the webshop (with the studio photo) in columns 1–7, phone and e-mail stacked in 9–12. */
.page--rendeles .rendeles-methods__inner { display: grid; gap: 48px; }
.page--rendeles .rendeles-shop { display: grid; gap: 24px; align-content: start; }
.page--rendeles .rendeles-shop__media { display: block; overflow: hidden; border-radius: var(--radius-l); background: var(--studio-stage); }
.page--rendeles .rendeles-shop__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.page--rendeles .rendeles-shop__media:hover img { transform: scale(1.02); }
.page--rendeles .rendeles-shop__lead { margin-top: 12px; max-width: 54ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-2); }
.page--rendeles .rendeles-shop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; }

.page--rendeles .rendeles-direct { display: grid; align-content: start; border-bottom: 1px solid var(--line); }
.page--rendeles .rendeles-direct__block { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 24px 0 28px; border-top: 1px solid var(--line); }
.page--rendeles .rendeles-direct__block > h2,
.page--rendeles .rendeles-direct__text { flex: 1 1 100%; }
.page--rendeles .rendeles-direct__value { min-width: 0; }
.page--rendeles .rendeles-direct__mail { display: inline-block; color: var(--text); font-weight: 800; font-stretch: 87.5%; font-size: clamp(22px, 1vw + 18px, 28px); line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.page--rendeles .rendeles-direct__mail:hover { color: var(--link); text-decoration: underline; text-underline-offset: 4px; }
.page--rendeles .rendeles-direct__text { color: var(--text-2); font-size: var(--fs-body-s); line-height: var(--lh-body-s); max-width: 46ch; }
@media (min-width: 1024px) {
  .page--rendeles .rendeles-methods__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .page--rendeles .rendeles-shop { grid-column: 1 / 8; }
  .page--rendeles .rendeles-direct { grid-column: 9 / 13; }
  .page--rendeles .rendeles-direct__block:first-child { padding-top: 0; border-top: 0; }
}

/* Partner app (tint): copy in 1–5, the login + home pair in 7–12. */
.page--rendeles .rendeles-app__inner { display: grid; gap: 48px; align-items: center; }
.page--rendeles .rendeles-app__copy { display: grid; justify-items: start; }
.page--rendeles .rendeles-app__copy .lead { margin-top: 16px; color: var(--text-2); }
.page--rendeles .rendeles-app__list { margin-top: 24px; width: 100%; max-width: 520px; border-top: 1px solid var(--line-2); }
.page--rendeles .rendeles-app__list li { padding: 12px 0; border-bottom: 1px solid var(--line-2); font-weight: 500; }
.page--rendeles .rendeles-app__copy .store-buttons { margin-top: 28px; }
.page--rendeles .rendeles-app__note { margin-top: 16px; max-width: 46ch; color: var(--text-2); font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.page--rendeles .rendeles-app__copy .link-arrow { margin-top: 12px; }
/* DESIGN §10.4: pair-shop-tracking, right 7 columns, max 640 px wide, on --bg-2. */
.page--rendeles .rendeles-app__media .mockup img { width: 100%; max-width: 640px; }
@media (min-width: 1024px) {
  .page--rendeles .rendeles-app__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .page--rendeles .rendeles-app__copy { grid-column: 1 / 6; }
  .page--rendeles .rendeles-app__media { grid-column: 6 / 13; }
}

/* Registration and the daily notification: intro beside a form panel. */
.page--rendeles .rendeles-reg__inner,
.page--rendeles .rendeles-notify__inner { display: grid; gap: 40px; }
.page--rendeles .rendeles-reg__intro .lead,
.page--rendeles .rendeles-notify__copy .lead { margin-top: 16px; color: var(--text-2); }
.page--rendeles .rendeles-reg__next { margin: 40px 0 20px; }
.page--rendeles .rendeles-notify__copy > p:not(.lead) { margin-top: 16px; max-width: 52ch; color: var(--text-2); }
.page--rendeles .rendeles-notify__copy .rendeles-notify__more { max-width: 60ch; font-size: var(--fs-body-s); line-height: var(--lh-body-s); }

.page--rendeles .rendeles-panel { min-width: 0; padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.page--rendeles .rendeles-form { gap: 28px; }
.page--rendeles .rendeles-fieldset { display: grid; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.page--rendeles .rendeles-fieldset + .rendeles-fieldset { padding-top: 28px; border-top: 1px solid var(--line); }
.page--rendeles .rendeles-legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); font-stretch: 87.5%; color: var(--text); }
.page--rendeles .rendeles-legend + * { clear: both; }
.page--rendeles .rendeles-ship { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .page--rendeles .rendeles-form .form-row--zip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.page--rendeles .rendeles-ship[hidden] { display: none; }
.page--rendeles .rendeles-form .check { padding-block: 4px; }
.page--rendeles .rendeles-form__submit { display: grid; justify-items: start; gap: 12px; padding-top: 4px; }
.page--rendeles .rendeles-form__submit .demo-note { max-width: 48ch; }

.page--rendeles .rendeles-success { display: grid; justify-items: start; gap: 16px; outline: none; }
.page--rendeles .rendeles-success[hidden] { display: none; }
.page--rendeles .rendeles-success__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--success-bg); color: var(--success); }
.page--rendeles .rendeles-success__icon .icon { width: 24px; height: 24px; }
.page--rendeles .rendeles-success__title { max-width: 26ch; }
.page--rendeles .rendeles-success p { color: var(--text-2); max-width: 52ch; overflow-wrap: anywhere; }
.page--rendeles .rendeles-success strong { color: var(--text); }
.page--rendeles .rendeles-success .note { width: 100%; }

@media (min-width: 768px) {
  .page--rendeles .rendeles-panel { padding: 32px; }
}
@media (min-width: 1024px) {
  .page--rendeles .rendeles-reg__inner,
  .page--rendeles .rendeles-notify__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .page--rendeles .rendeles-reg__intro { grid-column: 1 / 5; position: sticky; top: calc(var(--header-offset) + 24px); }
  .page--rendeles .rendeles-reg .rendeles-panel { grid-column: 5 / 13; margin-left: 24px; }
  .page--rendeles .rendeles-notify__copy { grid-column: 1 / 6; }
  .page--rendeles .rendeles-notify .rendeles-panel { grid-column: 7 / 13; }
  .page--rendeles .rendeles-panel { padding: 40px; }
}

/* Regions: a plain three-column list with hairlines; the central number below it. */
.page--rendeles .rendeles-regions__list { display: grid; border-top: 1px solid var(--line); }
.page--rendeles .rendeles-regions__item { padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 18px; line-height: 1.35; }
.page--rendeles .rendeles-regions__call { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 40px; }
.page--rendeles .rendeles-regions__call-text { color: var(--text-2); font-size: var(--fs-lead); line-height: var(--lh-lead); }
@media (min-width: 640px) {
  .page--rendeles .rendeles-regions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 1024px) {
  .page--rendeles .rendeles-regions__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Delivery in short (tint): copy beside the fees card. */
.page--rendeles .rendeles-delivery__inner { display: grid; gap: 32px; }
.page--rendeles .rendeles-delivery__copy .lead { margin-top: 16px; color: var(--text); }
.page--rendeles .rendeles-delivery__copy p:not(.lead) { margin-top: 16px; max-width: 56ch; color: var(--text-2); }
@media (min-width: 1024px) {
  .page--rendeles .rendeles-delivery__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
  .page--rendeles .rendeles-delivery__copy { grid-column: 1 / 7; }
  .page--rendeles .rendeles-delivery__card { grid-column: 8 / 13; }
}

/* API states: the reference id on success; the inline API error sits above the send button. */
.page--rendeles .rendeles-success__ref { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--text-2); }
.page--rendeles .rendeles-form [data-api-error] { scroll-margin-top: calc(var(--header-offset) + 16px); }