/* ── measure ───────────────────────────────────────────────
   Identical to .pb-in so the breadcrumb, the hero and every
   section below them line up on the same optical edges. */
.ps-in{display:block;box-sizing:border-box;width:100%;max-width:var(--ps-max,1080px);
  margin-inline:auto;padding-inline:16px}
@media(min-width:640px){.ps-in{padding-inline:24px}}
@media(min-width:1024px){.ps-in{padding-inline:32px}}

/* ── breadcrumb strip ──────────────────────────────────────
   A hairline orientation band directly under the header. It is
   the first thing on every page, so its height is a constant:
   pages must never add their own top padding above it. */
.ps-crumb{background:var(--clr-surface);border-bottom:1px solid var(--clr-border);
  position:relative;z-index:1}
body.dark-mode .ps-crumb{background:rgba(255,255,255,.028);
  border-bottom-color:rgba(255,255,255,.075)}
.ps-crumb-nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  min-height:42px;padding-block:8px;font-size:12.5px;line-height:1.5;
  color:var(--clr-text-3)}
.ps-crumb-nav a{display:inline-flex;align-items:center;gap:6px;
  color:var(--clr-text-3);text-decoration:none;border-radius:6px;
  padding:2px 4px;margin-inline:-4px;
  transition:color .18s ease,background-color .18s ease}
.ps-crumb-nav a:hover,.ps-crumb-nav a:focus-visible{color:var(--clr-primary);
  background:color-mix(in srgb,var(--clr-primary) 9%,transparent)}
.ps-crumb-nav a:focus-visible{outline:2px solid var(--clr-primary);outline-offset:1px}
.ps-crumb-sep{font-size:9px;opacity:.55;flex-shrink:0}
.ps-crumb-cur{color:var(--clr-text);font-weight:700;
  max-width:min(100%,42ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-crumb-ic{font-size:11px}

/* ── page rhythm ───────────────────────────────────────────
   `min-height` used to live on .yalo-main. It guessed the free
   space from a fixed viewport subtraction, so it over-reserved
   on every page, and a page opening the landmark twice reserved
   a second viewport of dead space. The body flex column in
   layout.php is exact: leftover height is measured, never
   invented, however many landmarks exist. */
.ps-main{display:block}
/* A shell page that renders only flow content still needs the
   same closing air every block section gets. */
.ps-main>.ps-body{padding-block:clamp(22px,3.2vw,34px) clamp(38px,6vw,68px)}

/* ── section head (utility pages) ──────────────────────────
   Cart, wishlist and friends are not editorial pages, so they
   do not carry a full hero — this is the compact equivalent,
   built from the same eyebrow/title vocabulary. */
.ps-head{display:flex;align-items:center;gap:12px;margin-bottom:clamp(18px,2.4vw,26px)}
.ps-head-ic{width:44px;height:44px;flex-shrink:0;border-radius:14px;display:grid;
  place-items:center;font-size:18px;color:#fff;background:var(--ps-c,var(--clr-primary));
  box-shadow:0 10px 22px -12px var(--ps-c,var(--clr-primary))}
.ps-head-t{margin:0;font-size:clamp(19px,3.4vw,25px);font-weight:900;
  letter-spacing:-.02em;color:var(--clr-text);display:flex;align-items:center;gap:10px;
  flex-wrap:wrap}
.ps-head-s{margin:4px 0 0;font-size:13px;color:var(--clr-text-3);line-height:1.6}