@charset "UTF-8";
/* ==========================================================================
   Sundis — products archive page
   --------------------------------------------------------------------------
   Loaded AFTER css/style.css and css/sundis.css. Nothing here invents a new
   identity: the hero reuses the exact purple gradient and drift/float
   keyframes sundis.css already defines, the grid reuses the .sundis-flavour
   card verbatim, and the toolbar/breadcrumb/section-head are the same
   generic archive components articles.css introduced — recoloured to
   Sundis's own purple/gold instead of Pakdis' generic pair, since --purple/
   --gold in style.css are the sitewide accent, not this brand's.

   The breadcrumb/toolbar/chip/search/empty-state components below are
   ported verbatim from css/articles.css: that file is itself page-scoped to
   articles.html (the sitewide convention confirmed by its own header
   comment), so nothing defines them outside it. Porting is the same move
   articles.css made for .section-head/.plate/.gallery in the other
   direction — reusing the system's shape, not its file.
   ========================================================================== */

/* ==========================================================================
   0. Generic archive components (ported from articles.css) — breadcrumb,
   sticky filter/search toolbar, empty state. Recoloured to Sundis purple/
   gold in section 2 below; the geometry here is untouched.
   ========================================================================== */
.breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, .68);
}
.breadcrumb a { color: rgba(255, 255, 255, .68); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: #fff; }
.breadcrumb__sep {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  rotate: 180deg;
}

.toolbar-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  margin-bottom: 40px;
  border-block: 1px solid #ece8f2;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}
.toolbar__count { font-size: 14px; font-weight: 400; color: var(--grey-600); white-space: nowrap; }

.tool-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 262px;
  padding-inline: 16px 6px;
  border: 1.4px solid #e6e1ee;
  border-radius: 999px;
  background: #fff;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tool-search:hover { border-color: #d6cde4; }
.tool-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(187 167 96 / .18);
}
.tool-search__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool-search__input {
  flex: 1;
  min-width: 0;
  padding-block: 11px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink);
}
.tool-search__input::placeholder { color: var(--grey-400); font-weight: 300; }
.tool-search__input:focus { outline: none; }
.tool-search__input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
  border-radius: 999px;
}
.tool-search__input::-webkit-search-cancel-button { display: none; }
.tool-search__clear {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--grey-400);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tool-search__clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.tool-search__clear:hover { background: #f4f1f8; color: var(--purple); }
/* The class rule above and the UA's [hidden] rule are equal specificity, so
   without this the class would win and the button would show even while
   hidden="true" — restated here so the attribute actually holds. */
.tool-search__clear[hidden] { display: none; }

/* ==========================================================================
   1. Hero — a short, living banner. Same drift/float rhythm as the brand
   homepage, never its icosahedron blob (js/sundis-products.js carries a
   distinct, smaller three.js scene) — this page opens its own way, then
   hands straight to the catalogue below.
   ========================================================================== */
.sundis-archive-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 560px;
  padding-block: var(--hero-top) 86px;
  background:
    radial-gradient(120% 140% at 18% 108%, rgb(var(--sundis-purple-rgb) / .45), transparent 62%),
    linear-gradient(155deg, var(--sundis-purple-deep) 0%, var(--sundis-purple) 66%, #5c2867 100%);
}

/* Canvas sits behind everything; if WebGL is unavailable, JS never runs, or
   reduced motion is set, the gradient + patterns above still read as a
   finished hero — the scene is an enhancement, never the only reason the
   section works. */
.sundis-archive-hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sundis-archive-hero__pattern {
  position: absolute;
  z-index: 0;
  width: 300px;
  height: auto;
  max-width: none;
  opacity: .14;
  pointer-events: none;
  animation: sundis-drift 24s ease-in-out infinite;
}
.sundis-archive-hero__pattern--a { inset-inline-end: -60px; top: -50px; }
.sundis-archive-hero__pattern--b {
  inset-inline-start: -80px;
  bottom: -60px;
  width: 240px;
  opacity: .1;
  animation-name: sundis-drift-flip;
  animation-delay: -10s;
}

/* The model lineup — real packaging photography, not icons — stood in one
   row on a single "shelf" glow. Unlike the flavour cards elsewhere on this
   page, these are reference photos of the FORMAT (what size a bottle
   actually is), not a lively product tease, so nothing here idles: no
   float, no shine sweep. The only motion is the hover step-forward, and
   each position is driven entirely by the `--i` custom property the markup
   sets per item, so adding or removing a model never means touching this
   CSS. */
.sundis-archive-hero__cluster {
  position: absolute;
  z-index: 3;
  inset-inline-end: 4%;
  bottom: 0;
  width: min(30%, 360px);
  height: 84%;
  pointer-events: none;
}
/* The models row needs the room seven packshots take, so it claims more of
   the banner's width than the three-bottle cluster's narrow corner did —
   stopping short of the copy column, which still owns the rest.

   The aspect ratio is load-bearing, not decorative: every width and offset
   in the markup is a percentage worked out against a box exactly 2× as
   wide as the tallest bottle is tall. That figure is what buys each pack
   its own clear air — at a tighter ratio the seven crowd into each other
   and the short ones get swallowed by their neighbours. Keep the ratio and
   the spacing holds at every screen size. */
.sundis-archive-hero__cluster--models {
  inset-inline-end: 2.5%;
  /* Fluid rather than stepped: the box tracks the space that actually stays
     free to the left of the text column and its chip row, so the lineup grows
     and shrinks smoothly instead of snapping at a breakpoint. */
  width: min(690px, calc(64vw - 432px));
  height: auto;
  /* The ratio is not a round number on purpose: it is exactly the width the
     seven packs need side by side at true scale with one even gap between
     each pair, so the lineup always fills the box edge to edge. */
  aspect-ratio: 1.911 / 1;
  bottom: 9%;
}
.sundis-archive-hero__ground {
  position: absolute;
  bottom: 2%;
  inset-inline: 8%;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(0 0 0 / .38), transparent 72%);
  filter: blur(2px);
}
/* Under the group as a whole this is now only a faint bed of shade tying
   the seven together — each pack casts its own contact shadow (see the
   wrap's ::after below), and stacking a hard ellipse on top of those just
   muddied the ground line. */
.sundis-archive-hero__cluster--models .sundis-archive-hero__ground {
  inset-inline: -2%;
  bottom: -4%;
  height: 12%;
  background: radial-gradient(ellipse, rgb(23 6 32 / .3), transparent 74%);
  filter: blur(6px);
}

.sundis-archive-hero__bottle-wrap {
  position: absolute;
  bottom: 4%;
  display: block;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease);
}
.sundis-archive-hero__bottle {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 26px rgb(0 0 0 / .35));
}
/* True relative scale. The source packshots were all exported at the same
   pixel height, so left alone a 200cc carton would stand as tall as a one
   litre bottle — `--h` (its real height as a fraction of the tallest pack)
   is what puts that right. Width is never set: each photo keeps its own
   aspect and simply comes out as wide as that height makes it, so a squat
   carton reads squat and a slim glass bottle reads slim.

   All seven stand on one ground line with their bases aligned and an even
   gap between every pair — nothing overlaps, so no pack is half-hidden
   behind the one in front of it. They're ordered by height into a single
   peak: the tall bottles hold the middle, the two glass bottles flank
   them, and the little carton closes the far end, so the group reads as a
   composed family portrait rather than a row sorted into a ramp. */
.sundis-archive-hero__cluster--models .sundis-archive-hero__bottle-wrap {
  bottom: 0;
  height: calc(var(--h) * 100%);
  inset-inline-start: var(--x);
  z-index: var(--z);
}
.sundis-archive-hero__cluster--models .sundis-archive-hero__bottle {
  width: auto;
  height: 100%;
}
/* Its own contact shadow, sized off its own height, so a tall bottle casts
   a longer pool than the little carton does and each one reads as standing
   on the shelf rather than pasted onto it. Behind the photo (z-index: -1)
   but inside the wrap, so it travels with the pack on hover. */
.sundis-archive-hero__cluster--models .sundis-archive-hero__bottle-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: -16%;
  bottom: -2%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(23 6 32 / .5), transparent 70%);
  filter: blur(3px);
  pointer-events: none;
}

/* Hover action — one bottle steps forward while the rest step back and fade,
   a coloured "juice light" blooms behind the hovered one, its own
   condensation beads in, and its size label floats up above it. */
.sundis-archive-hero__cluster:hover .sundis-archive-hero__bottle-wrap {
  opacity: .5;
  filter: saturate(.65) brightness(.82);
}
.sundis-archive-hero__bottle-wrap:hover,
.sundis-archive-hero__bottle-wrap:focus-visible {
  transform: scale(1.12) translateY(-16px);
  z-index: 20;
}
.sundis-archive-hero__cluster:hover .sundis-archive-hero__bottle-wrap:hover,
.sundis-archive-hero__cluster:hover .sundis-archive-hero__bottle-wrap:focus-visible {
  opacity: 1;
  filter: none;
}
.sundis-archive-hero__bottle-wrap:focus-visible { outline: none; }

.sundis-archive-hero__bottle-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22% -35% -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--juice) / .6), rgb(var(--juice) / 0) 72%);
  opacity: 0;
  transform: scale(.55);
  filter: blur(1px);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.sundis-archive-hero__bottle-wrap:hover::before,
.sundis-archive-hero__bottle-wrap:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

/* Centred with auto margins rather than a 50% offset plus translateX(-50%):
   on this RTL page `inset-inline-start` resolves to `right`, so the
   translate pulled the label a further half-width the SAME way instead of
   back, parking every label left of its bottle and pushing the last one
   clean off the screen edge. Auto margins centre correctly in either
   direction and leave `transform` free for the lift alone. */
.sundis-archive-hero__bottle-label {
  position: absolute;
  z-index: 4;
  bottom: 102%;
  inset-inline: 0;
  width: max-content;
  max-width: 180px;
  margin-inline: auto;
  padding: 6px 15px;
  border-radius: 999px;
  background: #fff;
  color: var(--sundis-purple-deep);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 22px rgb(0 0 0 / .28);
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.sundis-archive-hero__bottle-wrap:hover .sundis-archive-hero__bottle-label,
.sundis-archive-hero__bottle-wrap:focus-visible .sundis-archive-hero__bottle-label {
  opacity: 1;
  transform: translateY(0);
}

/* Condensation beads, borrowed verbatim from .sundis-flavour__drops so the
   hero's "special action" reads as the same design language as the card
   hover below it, not a one-off effect invented just for this banner. */
.sundis-archive-hero__bottle-drops { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sundis-archive-hero__bottle-drops span {
  position: absolute;
  width: 5px;
  height: 7px;
  border-radius: 50% 50% 50% 0;
  background: rgb(255 255 255 / .85);
  opacity: 0;
  transition: opacity .4s var(--ease), transform .6s var(--ease);
  transform: translateY(-6px) rotate(-45deg);
}
.sundis-archive-hero__bottle-wrap:hover .sundis-archive-hero__bottle-drops span,
.sundis-archive-hero__bottle-wrap:focus-visible .sundis-archive-hero__bottle-drops span {
  opacity: .9;
  transform: translateY(0) rotate(-45deg);
}
.sundis-archive-hero__bottle-drops span:nth-child(1) { top: 30%; inset-inline-start: 22%; transition-delay: .02s; }
.sundis-archive-hero__bottle-drops span:nth-child(2) { top: 46%; inset-inline-end: 20%; transition-delay: .1s; }
.sundis-archive-hero__bottle-drops span:nth-child(3) { top: 60%; inset-inline-start: 32%; transition-delay: .18s; }
.sundis-archive-hero__bottle-drops span:nth-child(4) { top: 26%; inset-inline-end: 30%; transition-delay: .26s; }

.sundis-archive-hero__inner { position: relative; z-index: 2; }
.sundis-archive-hero__inner .breadcrumb { margin-bottom: 22px; }

/* A one-time rise-and-fade on load, staggered line by line, so the banner
   arrives rather than just appearing — the cluster gets the same treatment
   below, on its own container so it never fights the bottles' continuous
   float. Skipped entirely under reduced motion (see the query at the foot
   of this file). */
@keyframes sundis-archive-hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sundis-archive-hero__inner > * {
  animation: sundis-archive-hero-rise .7s var(--ease) both;
}
.sundis-archive-hero__inner .breadcrumb  { animation-delay: .02s; }
.sundis-archive-hero__eyebrow            { animation-delay: .12s; }
.sundis-archive-hero__title              { animation-delay: .2s; }
.sundis-archive-hero__text               { animation-delay: .3s; }
.sundis-archive-hero__stats              { animation-delay: .4s; }
.sundis-archive-hero__cluster {
  animation: sundis-archive-hero-rise .8s var(--ease) .15s both;
}

.sundis-archive-hero__title {
  max-width: 620px;
  margin-top: 18px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 900;
  line-height: 1.35;
  color: #fff;
}

.sundis-archive-hero__text {
  max-width: 560px;
  margin-top: 18px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.9;
  color: rgb(255 255 255 / .82);
}

.sundis-archive-hero__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}
/* The badge component is built for a light background (purple text on a
   faint purple wash) — restated here for the dark hero it sits on instead. */
.sundis-archive-hero__stats .sundis-story__badge {
  background: rgb(255 255 255 / .1);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.sundis-archive-hero__stats .sundis-story__badge svg { stroke: var(--gold); }

/* The catalogue count — set apart from the info badges beside it (a solid
   gold chip, not another translucent pill) so "how many products" reads at
   a glance instead of blending into the other two facts. */
.sundis-archive-hero__count {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 22px 9px 18px;
  border-radius: 999px;
  background: var(--gold);
}
.sundis-archive-hero__count strong {
  font-size: 20px;
  font-weight: 900;
  color: var(--sundis-purple-deep);
}
.sundis-archive-hero__count span {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sundis-purple-deep);
}

/* ==========================================================================
   2. Archive — a search bar (the generic articles.css toolbar, recoloured)
   over two category shelves — Sundis Life, then Sundis — each with its own
   heading and count, five real-photo cards apiece.
   ========================================================================== */
.sundis-archive { padding-block: 96px 130px; }
.sundis-archive .section-head { margin-bottom: 46px; }

.sundis-archive__toolbar-bar {
  border-block-color: rgb(var(--sundis-purple-rgb) / .12);
  background: rgb(255 255 255 / .92);
  margin-bottom: 56px;
}
.sundis-archive__toolbar-bar .tool-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(var(--sundis-purple-rgb) / .14);
}
.sundis-archive__toolbar-bar .tool-search__clear:hover {
  background: rgb(var(--sundis-purple-rgb) / .06);
  color: var(--sundis-purple);
}

/* One category shelf: a small heading row (name + count) over its own
   flavour-card grid. Hidden as a whole by JS when a search term leaves
   nothing in it. */
.sundis-archive__category { margin-bottom: 64px; }
.sundis-archive__category:last-of-type { margin-bottom: 0; }

.sundis-archive__category-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 30px;
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--gold);
}
.sundis-archive__category-title {
  font-size: 21px;
  font-weight: 900;
  color: var(--sundis-purple);
}
.sundis-archive__category-count {
  font-size: 14px;
  font-weight: 400;
  color: var(--grey-600);
}

/* Same flavour card as the brand page, a flexible column count instead of a
   fixed 3-up — either shelf can grow without a rewrite. Margin-top zeroed:
   the category head above already carries its own spacing. Widened (was
   230px/1040px) once each shelf grew to seven cards, and pinned to exactly
   four columns from ~1180px up rather than leaving auto-fit to settle on
   whatever count happens to fit. */
.sundis-archive__grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 1260px;
  gap: 32px;
  margin-top: 0;
}
@media (min-width: 1180px) {
  .sundis-archive__grid { grid-template-columns: repeat(4, 1fr); }
}

/* The cards themselves read bigger too — wider columns alone would just
   leave more empty space around an unchanged bottle shot, so the photo
   scales up with them (page-scoped: sundis.css's own .sundis-flavour sizing
   is left untouched for the brand page). */
.sundis-archive__grid .sundis-flavour { padding: 34px 22px 32px; }
.sundis-archive__grid .sundis-flavour__shot { height: 266px; }

/* Six more "juice" wash colours for the blend cards below — tints the
   card's background gradient and badge; .sundis-flavour--cherry/--mango/
   --pomegranate (sundis.css) already cover the three real bottles' own
   colour. */
.sundis-flavour--barberry   { --juice: 198 72 24; }
.sundis-flavour--raspberry  { --juice: 184 26 94; }
.sundis-flavour--blackberry { --juice: 86 32 104; }
.sundis-flavour--cranberry  { --juice: 150 20 50; }
.sundis-flavour--peach      { --juice: 235 150 60; }
.sundis-flavour--grape      { --juice: 142 24 110; }

/* Only the flavour that actually has a page of its own carries this link —
   a card that leads nowhere is worse than one that isn't clickable at all.
   The anchor covers the whole card (see .sundis-flavour__cover) rather than
   a small "see more" line, so a press anywhere on it opens the page; the
   card's own :hover/:focus-within lift still fires normally since the
   anchor is a descendant of it, not a replacement for it. */
.sundis-flavour__cover {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  /* Nothing to render — the card's own artwork stays exactly as it is; this
     is purely the hit area and the accessible name. */
}
.sundis-flavour__cover:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
/* A small cue that the whole tile leads somewhere, matching the arrow used
   everywhere else on the site rather than inventing a new affordance. */
.sundis-flavour--linked .sundis-flavour__name::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-inline-start: 6px;
  vertical-align: -2px;
  background: var(--sundis-purple);
  opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6'/%3E%3Cpath d='M8.6 6H18v9.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6'/%3E%3Cpath d='M8.6 6H18v9.4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.sundis-flavour--linked:hover .sundis-flavour__name::after,
.sundis-flavour--linked:focus-within .sundis-flavour__name::after {
  opacity: .9;
  transform: translate(2px, -2px);
}

.sundis-archive__empty {
  margin-top: 8px;
  padding: 72px 24px;
  border: 1.4px dashed rgb(var(--sundis-purple-rgb) / .2);
  border-radius: 14px 14px 32px 14px;
  font-size: 16px;
  text-align: center;
  color: var(--grey-600);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* The lineup keeps its exact geometry at every width (it is one box with a
   fixed ratio, so the packs never re-space or collide); the box itself just
   steps down as the text column and its chip row move left, and drops out
   entirely once there is no room left beside them. */
@media (max-width: 1280px) {
  .sundis-archive-hero__cluster--models { inset-inline-end: 2%; bottom: 8%; }
}

@media (max-width: 1120px) {
  .sundis-archive-hero__cluster--models { display: none; }
}

@media (max-width: 1024px) {
  .sundis-archive-hero { padding-block: var(--hero-top) 64px; }
  .sundis-archive-hero__pattern--a { width: 220px; }
  .sundis-archive-hero__pattern--b { width: 180px; }
  .sundis-archive-hero__cluster { inset-inline-end: 2%; width: min(26%, 300px); }
  /* Seven packshots in that same narrow corner would read as clutter, not a
     lineup — dropped at the same width this page already drops the
     three-bottle cluster's shine and float extras. */
  .sundis-archive-hero__cluster--models { display: none; }
  .sundis-archive { padding-block: 76px 96px; }

  .breadcrumb { font-size: 14px; }
  .tool-search { width: 236px; }
  .tool-search__clear { width: 38px; height: 38px; }
}

@media (max-width: 620px) {
  .sundis-archive-hero { padding-block: var(--hero-top) 48px; min-height: 0; }
  /* The cluster drops out entirely at phone width rather than shrinking
     further — three overlapping product shots behind a short text column
     read as clutter, not life, once there's this little room. The eyebrow,
     title, count chip and badges already carry the section on their own. */
  .sundis-archive-hero__cluster { display: none; }
  .sundis-archive-hero__title { font-size: clamp(24px, 6.4vw, 30px); }
  .sundis-archive-hero__stats { gap: 10px; }
  .sundis-archive-hero__stats .sundis-story__badge { font-size: 13px; padding: 8px 16px; }
  .breadcrumb { font-size: 13.5px; }

  .sundis-archive { padding-block: 56px 72px; }
  .sundis-archive__category { margin-bottom: 48px; }
  .sundis-archive__grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    gap: 24px;
    margin-inline: auto;
  }

  /* The toolbar drops its sticky perch at phone width — parked under a
     96px header it would rent a large share of the viewport for a single
     search field. */
  .sundis-archive__toolbar-bar { position: static; margin-bottom: 40px; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 12px; }
  .tool-search { width: 100%; }
  .tool-search__input { font-size: 16px; padding-block: 10px; }
  .toolbar__count { margin-inline-end: auto; }
  .sundis-archive__empty { padding: 48px 18px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .sundis-archive-hero__pattern,
  .sundis-archive-hero__bottle,
  .sundis-archive-hero__inner > *,
  .sundis-archive-hero__cluster {
    animation: none;
    opacity: 1;
    transform: none;
  }
}