/* svet content pages: information (about, delivery, privacy, contract), contacts with the map, site map */
.s-article { padding-bottom: var(--section); }
.s-article__title { margin: var(--s-4) 0 var(--s-6); font-size: var(--fs-h2); }

/* ---- Information pages: the admin's text (cleaned by SvetHtml::cleanInfo) in a readable column ---- */
.s-prose { max-width: 70ch; font-size: var(--fs-m); line-height: 1.65; }
.s-prose > :first-child { margin-top: 0; }
.s-prose :is(p, ul, ol, table) { margin: 0 0 var(--s-4); }
.s-prose h2 { margin: var(--s-7) 0 var(--s-3); font-size: var(--fs-h3); line-height: 1.2; }
.s-prose :is(h3, h4, h5, h6) { margin: var(--s-6) 0 var(--s-2); font: 600 var(--fs-m)/1.4 var(--font-ui); }
.s-prose :is(ul, ol) { padding-left: 1.25em; }
.s-prose li + li { margin-top: var(--s-1); }
.s-prose li::marker { color: var(--amber); }
.s-prose strong { font-weight: 600; }
.s-prose a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; overflow-wrap: anywhere; }
@media (hover: hover) { .s-prose a:hover { color: var(--amber-ink); text-decoration-color: currentColor; } }
.s-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.s-prose :is(td, th) { padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.s-prose img { max-width: 100%; height: auto; border-radius: var(--r-s); }

/* ---- «Par mums»: the logo big above the text ---- */
.s-brand { display: grid; justify-items: center; gap: var(--s-3); max-width: 70ch; margin: 0 0 var(--s-7); padding: var(--s-7) var(--s-5); border-radius: var(--r-m); background: var(--paper-2); }
.s-brand__logo { font-size: clamp(3.5rem, 2.4rem + 5vw, 6rem); }
.s-brand__tag { margin: 0; color: var(--ink-2); font-size: var(--fs-l); text-align: center; }

/* ---- Contacts: the shop, hours and phone beside a Google map with our own pin ---- */
.s-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
@media (min-width: 900px) { .s-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); } }
.s-contact__info { display: grid; align-content: start; gap: var(--s-6); }
.s-contact__lead { max-width: 36ch; margin: 0; color: var(--ink-2); font-size: var(--fs-l); }
.s-contact__block { display: grid; gap: var(--s-2); }
.s-contact__block p { margin: 0; }
.s-contact__label { margin: 0 0 var(--s-1); color: var(--amber-ink); font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.s-contact__big { font: 400 var(--fs-h3)/1.2 var(--font-display); color: var(--ink); text-decoration: none; }
a.s-contact__big { font-variant-numeric: tabular-nums; }
@media (hover: hover) { a.s-contact__big:hover { color: var(--amber-ink); } }
.s-contact__floor { color: var(--ink-2); }
.s-contact__mail { color: var(--ink-2); }
.s-contact__hours { display: grid; gap: var(--s-1); max-width: 360px; margin: 0; }
.s-contact__hours div { display: flex; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-1); border-bottom: 1px solid var(--line); }
.s-contact__hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.s-contact__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }

/* the map: Google's keyless embed centred on the shop's coordinates (theme.php SHOP_LL), in greys; with no search
   there is neither Google's marker nor its address card, so our marker — the logo's bulb — stands on the address. Google's
   «larger map» button in the top left corner is out of sight: the frame starts --top above the box, so the address
   (the frame's centre) is --top / 2 above the box's centre.
   The whole map is one link to Google Maps: the frame takes no clicks, so the bulb cannot drift from the address. */
.s-map { --top: 64px; position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-m); background: var(--paper-2); isolation: isolate; }
@media (min-width: 900px) { .s-map { aspect-ratio: auto; min-height: 520px; } }
.s-map__frame { position: absolute; top: calc(-1 * var(--top)); left: 0; width: 100%; height: calc(100% + var(--top)); border: 0; filter: grayscale(1) contrast(1.04) brightness(1.03); pointer-events: none; }
.s-map__pin { position: absolute; z-index: 1; left: 50%; top: calc(50% - var(--top) / 2); display: flex; align-items: center; gap: var(--s-2); translate: -18px -100%; pointer-events: none; }
/* light on the ground under the bulb: hides the small map icons (a bus stop) right at the address */
.s-map__ground { position: absolute; z-index: 1; left: 50%; top: calc(50% - var(--top) / 2); width: 72px; height: 34px; translate: -50% -62%; border-radius: 50%; background: radial-gradient(closest-side, rgb(251 248 242 / .97) 50%, rgb(251 248 242 / 0)); pointer-events: none; }
.s-map__bulb { display: block; width: 36px; height: 60px; filter: drop-shadow(0 4px 8px rgb(34 28 21 / .35)); } /* the base's bottom is the address */
.s-map__tag { margin-bottom: 14px; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--paper); box-shadow: 0 2px 10px rgb(34 28 21 / .16); font-size: var(--fs-s); font-weight: 500; white-space: nowrap; }
.s-map__open {
  position: absolute; z-index: 1; top: var(--s-3); left: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill); background: var(--paper); box-shadow: 0 2px 10px rgb(34 28 21 / .16);
  font-size: var(--fs-s); font-weight: 500; text-decoration: none;
}
.s-map__open .s-i { width: 16px; height: 16px; rotate: -45deg; }
.s-map__open::after { content: ""; position: absolute; inset: calc(-1 * var(--s-3)) auto auto calc(-1 * var(--s-3)); width: 100vw; height: 100vh; } /* the whole map is the link (clipped by .s-map) */
@media (hover: hover) { .s-map__open:hover { background: var(--ink); color: var(--paper); } }

/* ---- Site map ---- */
.s-sitemap { display: grid; gap: var(--s-6) var(--s-7); }
@media (min-width: 768px) { .s-sitemap { grid-template-columns: 2fr 1fr 1fr; } }
.s-sitemap__h { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.s-sitemap ul { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.s-sitemap ul ul { margin: var(--s-2) 0 var(--s-1); padding-left: var(--s-4); border-left: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-s); }
.s-sitemap a { text-decoration: none; }
@media (hover: hover) { .s-sitemap a:hover { color: var(--amber-ink); text-decoration: underline; text-underline-offset: .25em; } }