/* Інформаційні сторінки: доставка і оплата, обмін і повернення. */

.info {
  padding: var(--space-5) 0 var(--space-8);
}
.info:focus { outline: none; }

.info__inner { max-width: calc(52rem + var(--gutter) * 2); }

.info__crumbs { margin-bottom: var(--space-5); font-size: var(--text-sm); color: var(--color-muted); }
.info .info__crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.info__crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-decor); }
.info__crumbs a { color: var(--color-text-secondary); }

.info__title { margin-bottom: var(--space-6); font-size: var(--h2); }

/* Короткі картки зверху */
.info .info__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.info__summary[hidden] { display: none; }
.info__summary > li { display: grid; } /* картки в ряду однакової висоти */
.info__card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon text";
  column-gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
a.info__card {
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
a.info__card:hover { background: var(--color-surface-strong); }
a.info__card strong { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--color-decor); }
.info__card svg { grid-area: icon; width: 30px; height: 30px; color: var(--color-gold-text); }
.info__card strong { grid-area: title; font-weight: 600; }
.info__card span { grid-area: text; font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Текст */
.info__body { display: grid; gap: var(--space-7); }
.info__section,
.info__subsection { display: grid; gap: var(--space-3); }
.info__section { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.info__subsection { margin-top: var(--space-3); }
.info__h2 { font-size: var(--h3); font-weight: 600; line-height: 1.2; }
.info__h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; }
.info__body p { color: var(--color-text-secondary); }

.info__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.info__list li { position: relative; padding-left: var(--space-5); color: var(--color-text-secondary); }
.info__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--color-decor);
  transform: rotate(45deg);
}

.info__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.info__steps li {
  position: relative;
  padding-left: calc(32px + var(--space-3));
  min-height: 32px;
  color: var(--color-text-secondary);
  counter-increment: step;
}
.info__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-tint);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold-text);
}
.info__steps strong { color: var(--color-text); }

.info__closing { padding: var(--space-4) var(--space-5); border-left: 2px solid var(--color-decor); background: var(--color-surface); border-radius: 0 var(--radius-field) var(--radius-field) 0; }

/* Питання */
.info__help {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.info__help[hidden] { display: none; }
.info__help-title { margin-bottom: var(--space-2); font-size: var(--h3); color: inherit; }
.info__help p { color: rgb(251 247 242 / 0.78); }
.info .info__help-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.info__help-link {
  --color-focus: var(--color-decor);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid rgb(184 152 122 / 0.5);
  border-radius: var(--radius-pill);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.info__help-link svg { width: 18px; height: 18px; color: var(--color-decor); }
.info__help-link:hover { background: var(--color-on-accent); color: var(--color-accent); }

@media (min-width: 768px) {
  .info { padding: var(--space-6) 0 var(--space-9); }
  .info .info__summary { grid-template-columns: repeat(var(--info-cols, 3), minmax(0, 1fr)); }
  .info__card { grid-template-columns: 1fr; grid-template-areas: "icon" "title" "text"; row-gap: var(--space-1); align-items: start; align-content: start; padding: var(--space-5); }
  .info__card svg { margin-bottom: var(--space-2); }
  .info__help { padding: var(--space-7); }
}