/* ---------- Amasi — Frozen yoghurt & topping bar 140 (store) ----------
   THE STRUCTURAL MOVE: nothing on this page bleeds. Every band — header, hero,
   headline, the four-across row, both catalogue passes, the contact and the
   footer — sits inside the same 900px column, so the shop reads as one centred
   ribbon on a chalk ground rather than a stack of full-width stages. The hero is
   contained and modest at about a third of the viewport, and the ONLY
   multi-column moment above the catalogue is a gapped row of four circular marks
   on a milk-cream panel. The customer voices then refuse the usual three-across
   treatment: they stack line-per-line in the same centre column off the shared
   `white-space: pre-line`, on a second cream panel the same width as the first.
   Granadilla lands in exactly three places — the hero ghost border, the strip
   labels and the price marks — and never fills anything; every solid control is
   mulberry, so the page closes on the same axis and the same two inks it opened
   with. */
body.t-amasi {
  background: #fbfaf6;
  color: #262223;
  --am-mulberry: #55203c;
  --am-granadilla: #a94f14;
  --am-cream: #f5efe3;
  --bg-flat: #fbfaf6;
  --surface: #ffffff;
  --surface-2: #f5efe3;
  --line: #e6dfd2;
  --line-strong: #d3c9b8;
  --heading: #55203c;
  --text: #262223;
  --muted: #6f6469;
  --header-bg: #fbfaf6;
  --radius: 0;
  --shadow: none;
}

/* the ribbon — the bar and the footer are contained on the same axis as the
   sections, so there is no full-width chrome anywhere on the page */
body.t-amasi .container { max-width: 900px; }
body.t-amasi .sf-header, body.t-amasi .sf-head,
body.t-amasi .sf-footer, body.t-amasi .sf-foot, body.t-amasi .sf-cats {
  background: var(--header-bg); border-color: var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-amasi .sf-name, body.t-amasi .sc-hero h1, body.t-amasi .sc-h2 { font-family: var(--sf-serif); font-weight: 400; letter-spacing: -0.01em; }
body.t-amasi .sc-h2 { color: var(--am-mulberry); font-size: clamp(21px, 2.8vw, 31px); margin-bottom: 22px; }

/* MULBERRY carries every solid control; granadilla is never a fill */
body.t-amasi .btn.brand { background: var(--am-mulberry); border-color: var(--am-mulberry); color: #fdf8fa; border-radius: 0; box-shadow: none; padding: 13px 28px; }
body.t-amasi .btn.brand:hover { background: #40162c; border-color: #40162c; opacity: 1; }

/* the hero is a contained plate at roughly a third of the viewport — the one
   photograph above the catalogue, and still inside the ribbon */
body.t-amasi .sc-hero { max-width: 900px; margin: 26px auto 0; min-height: 34vh; padding: 48px 20px; }
body.t-amasi .sc-hero .btn.brand.sc-hero-ghost { border-color: var(--am-granadilla); border-width: 1px; border-radius: 0; }

/* the centred column: narrow measure, heavy air, no image in either richtext */
body.t-amasi .sc-richtext { max-width: 660px; padding: 92px 20px 96px; }
body.t-amasi .sc-richtext p { font-size: 17px; line-height: 1.95; color: var(--text); }

/* THE ONE STRUCTURAL BREAK — four circular marks, gapped, on a cream panel */
body.t-amasi .sc-strip { background: var(--am-cream); padding: 46px 34px 50px; }
body.t-amasi .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 30px; }
body.t-amasi .sc-strip-img { width: 118px; margin: 0 auto; border: 0; border-radius: 50%; background: transparent; }
body.t-amasi .sc-strip-label { margin-top: 15px; color: var(--am-granadilla); text-transform: uppercase; letter-spacing: 0.15em; font-size: 11px; font-weight: 700; }

/* THE VOICES — three quotes stacked in the centre column, not three across.
   Addressed by the renderer id for the SECOND richtext, never by :nth-of-type,
   which matches the hero section instead and would silently never fire. */
body.t-amasi .sc-richtext#about-2 { background: var(--am-cream); max-width: 900px; padding: 78px 120px 84px; }
body.t-amasi .sc-richtext#about-2 p { font-family: var(--sf-serif); font-style: italic; font-size: 19px; line-height: 2.15; color: var(--am-mulberry); }

/* both catalogue passes locked to four across, so four samples and eight real
   products each fill their rows inside the narrow ribbon */
body.t-amasi .product-grid, body.t-amasi .sc-buy-grid { grid-template-columns: repeat(4, 1fr); gap: 30px 22px; }
body.t-amasi .product-card .p, body.t-amasi .sc-buy-p { color: var(--am-granadilla); font-weight: 600; }

/* the page closes exactly where it opened */
body.t-amasi .sc-contact { max-width: 620px; padding: 90px 20px 104px; }
body.t-amasi .sc-contact-form .btn { align-self: center; }

@media (max-width: 820px) {
  body.t-amasi .sc-strip-row, body.t-amasi .product-grid, body.t-amasi .sc-buy-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-amasi .sc-richtext#about-2 { padding: 56px 26px 60px; }
}

/* NIGHT — the chalk goes to a warm plum-black and the cream panels to the next
   step up from it, so both breaks still read as panels rather than dissolving.
   Mulberry lifts far enough to stay a legible slab under white, and granadilla
   warms because it is still carrying the labels and every price on its own. */
html[data-theme="dark"] body.t-amasi {
  background: #191317;
  color: #cfc4ca;
  --am-mulberry: #8e3762;
  --am-granadilla: #e08a45;
  --am-cream: #241c22;
  --bg-flat: #191317;
  --surface: #211a20;
  --surface-2: #241c22;
  --line: #322a30;
  --line-strong: #453b43;
  --heading: #f3e7ee;
  --text: #cfc4ca;
  --muted: #8d818a;
  --header-bg: #191317;
}
html[data-theme="dark"] body.t-amasi .sc-h2 { color: var(--heading); }
html[data-theme="dark"] body.t-amasi .sc-richtext#about-2 p { color: #f0e2ea; }
html[data-theme="dark"] body.t-amasi .btn.brand:hover { background: #a34473; border-color: #a34473; }