/* ==========================================================================
   Milo & Mol — Sections: header, hero, collection, about, visit,
   enquiry, footer
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: color-mix(in srgb, var(--c-ivory) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-normal) var(--ease-out-soft),
              box-shadow var(--duration-normal) var(--ease-out-soft);
}
.header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 16px rgba(47, 61, 36, 0.07);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.75rem;
  padding-block: var(--space-xs);
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  text-decoration: none;
  color: var(--c-ink);
  line-height: 1;
}
.wordmark__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.7rem);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.wordmark__strap {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
/* The strapline is long; tighten it on small screens so it stays on one line
   beside the menu button instead of pushing the header to two rows. */
@media (max-width: 30rem) {
  .wordmark__strap { font-size: 0.5rem; letter-spacing: 0.16em; }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-md), 2.2vw, var(--space-xl));
}
.nav__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  padding-block: 0.4em;
}
/* The underline grows from the centre, rather than simply appearing. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--accent);
  transform: translateX(-50%);
  transition: width var(--duration-normal) var(--ease-out-expo);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="true"]::after { width: 100%; }
.nav__link[aria-current="true"] { color: var(--accent); }

.nav__cta { margin-left: var(--space-sm); padding: 0.72em 1.5em; }

/* Mobile drawer toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;   /* comfortable thumb target */
  padding: 0.5rem 0.25rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ink);
}
.nav-toggle__bars {
  position: relative;
  width: 22px;
  height: 12px;
  flex: none;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              opacity var(--duration-fast) var(--ease-out-soft);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 54rem) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 4.75rem 0 auto 0;
    z-index: var(--z-nav);
    background-color: var(--c-ivory);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-lg);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                visibility 0s linear var(--duration-normal);
  }
  .nav.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                visibility 0s;
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) var(--gutter) var(--space-lg);
  }
  .nav__list li + li { border-top: 1px solid var(--rule); }
  .nav__link {
    display: block;
    padding-block: var(--space-sm);
    font-size: var(--text-base);
  }
  .nav__link::after { display: none; }
  .nav__cta { margin: var(--space-md) 0 0; }
}

/* --- Hero -----------------------------------------------------------------
   Deliberately asymmetric. On wide screens the headline runs past the image
   column and the image is pulled below the baseline, so the composition
   breaks its own grid rather than sitting in two tidy halves. */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.4rem + 4.6vw, 6rem) var(--space-section);
  overflow: hidden;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: center;
}

.hero__copy { position: relative; z-index: 3; }

.hero__title { margin-bottom: var(--space-md); }
/* The one italic in the headline, carrying the emphasis. */
.hero__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  color: var(--accent);
}

.hero__lead { margin-bottom: var(--space-lg); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.hero__media { position: relative; z-index: 2; }
.hero__media .frame { aspect-ratio: 4 / 5; }

/* A small detail print, laid over the corner of the main one. */
.hero__media-inset {
  position: absolute;
  right: -1.25rem;
  bottom: -2.5rem;
  width: 42%;
  max-width: 12.5rem;
  z-index: 4;
}
.hero__media-inset .frame {
  aspect-ratio: 1 / 1;
  border: 6px solid var(--c-ivory);
  box-shadow: var(--shadow-lg);
  transform: rotate(2.4deg);
}

/* Soft botanical wash behind the hero image */
.hero__wash {
  position: absolute;
  z-index: 0;
  top: -18%;
  right: -22%;
  width: min(44rem, 85vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--c-sage) 32%, transparent) 0%,
    transparent 67%);
  pointer-events: none;
}

@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 1.12fr 0.88fr; align-items: center; }
  .hero__copy { padding-right: var(--space-lg); }
  /* Headline crosses into the image column. */
  .hero__title { margin-right: -18%; }
  .hero__media { transform: translateY(2.5rem); }
}

/* --- About ---------------------------------------------------------------- */
.about__grid {
  position: relative;
  display: grid;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: center;
}
.about__media .frame { aspect-ratio: 5 / 6; }

/* A handwritten-feeling aside, set as though pressed into the page. */
.statement {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 70, "WONK" 1;
  line-height: 1.4;
  color: var(--accent);
  margin-block: var(--space-lg);
  padding-left: var(--space-md);
  border-left: 2px solid var(--c-sage);
}

/* No photograph yet: a single measured column reads as a deliberate
   editorial choice, where an empty grid cell would read as broken. */
.about__grid--text-only { max-width: 46rem; }
.about__grid--text-only .statement { margin-block: var(--space-xl); }

.about__copy { position: relative; padding-top: var(--space-md); }
.about__copy > *:not(.section__num) { position: relative; z-index: 1; }

.about__points {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.about__point {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}
.about__point svg {
  flex: none;
  width: 20px;
  margin-top: 0.35em;
  color: var(--c-sage);
}
.about__point h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variation-settings: normal;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  margin-bottom: 0.2em;
}
.about__point p { font-size: var(--text-sm); color: var(--text-secondary); }

@media (min-width: 60rem) {
  .about__grid { grid-template-columns: 0.82fr 1.18fr; }
  .about__grid--text-only { grid-template-columns: 1fr; }
  .about__media { position: relative; }
  /* Image rises above the section rhythm so the row is not a flat pair. */
  .about__media .frame { transform: rotate(-1.1deg) translateY(-1.75rem); }
}

/* --- Collection ----------------------------------------------------------- */
.collection__grid {
  display: grid;
  gap: var(--space-xl) var(--space-lg);
}
@media (min-width: 48rem) {
  .collection__grid { grid-template-columns: repeat(2, 1fr); }
  /* The second card drops, so the pair reads as a spread rather than a row. */
  .collection__grid > :nth-child(2) { transform: translateY(2.75rem); }
}

.cat-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
.cat-card .frame { aspect-ratio: 4 / 3; }
.cat-card:hover .frame img,
.cat-card:focus-within .frame img { transform: scale(1.045); }

.cat-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--rule);
  transition: border-color var(--duration-normal) var(--ease-out-soft);
}
.cat-card:hover .cat-card__body { border-top-color: var(--c-sage); }

.cat-card__title { font-size: var(--text-h3); }
.cat-card__meta {
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.cat-card p {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 42ch;
}

/* A sprig that draws itself along the card on hover, like an ink line. */
.cat-card__sprig {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  width: 54px;
  color: var(--c-ivory);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out-soft);
}
.cat-card__sprig path {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  transition: stroke-dashoffset var(--duration-draw) var(--ease-out-expo);
}
.cat-card:hover .cat-card__sprig,
.cat-card:focus-within .cat-card__sprig { opacity: 0.9; }
.cat-card:hover .cat-card__sprig path,
.cat-card:focus-within .cat-card__sprig path { stroke-dashoffset: 0; }

/* --- Visit (hours + location) ---------------------------------------------
   The details card overlaps the map, giving the block real depth. */
.visit__grid {
  position: relative;
  display: grid;
  gap: var(--space-lg);
}

.visit__card {
  background-color: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  box-shadow: var(--shadow-md);
}
.visit__card h3 { margin-bottom: var(--space-xs); }

.hours { margin-top: var(--space-md); }
.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 0.62em;
  border-bottom: 1px dotted var(--rule-strong);
  font-size: var(--text-sm);
}
.hours__row:last-child { border-bottom: 0; }
.hours__day { letter-spacing: 0.05em; }
.hours__time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hours__row--closed .hours__time { color: var(--text-muted); font-style: italic; }

/* Weekend opening depends on the weather, so it is neither open nor closed.
   Italic like "Closed", but in the text colour rather than the muted one, so
   it does not read as "shut". */
.hours__row--variable .hours__time { font-style: italic; color: var(--text-secondary); }

.hours__note {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Today is marked with a dot, a colour change and a weight change, so it
   never depends on colour alone. */
.hours__row--today {
  position: relative;
  font-weight: 600;
  color: var(--accent);
}
.hours__row--today .hours__time { color: var(--accent); font-weight: 600; }
.hours__row--today::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent);
  transform: translateY(-50%);
}

.visit__address {
  font-style: normal;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-secondary);
}
.visit__contact {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
}
.visit__contact a { text-decoration: none; }
.visit__contact a:hover { text-decoration: underline; }

.visit__map {
  position: relative;
  min-height: 20rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  background-color: var(--c-sage-soft);
  /* Warms the map to sit inside the palette instead of glaring blue-white. */
  filter: sepia(0.18) saturate(0.86) hue-rotate(338deg);
}
.visit__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.visit__map--placeholder { display: grid; place-items: center; min-height: 20rem; filter: none; }

@media (min-width: 60rem) {
  .visit__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: stretch;
  }
  .visit__card {
    position: relative;
    z-index: 2;
    margin-right: -4rem;
    align-self: center;
  }
  .visit__map { min-height: 29rem; }
}

/* --- Enquiry form --------------------------------------------------------- */
.form { margin-top: var(--space-xl); }
.form__row {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
@media (min-width: 40rem) {
  .form__row--split { grid-template-columns: repeat(2, 1fr); }
}

.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field__label {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field__input,
.field__textarea {
  width: 100%;
  padding: 0.85em 1em;
  background-color: var(--c-white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-out-soft),
              box-shadow var(--duration-fast) var(--ease-out-soft);
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-muted); opacity: 0.72; }
.field__input:hover,
.field__textarea:hover { border-color: var(--c-taupe); }
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 17%, transparent);
}
.field__textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }

.field__error {
  font-size: var(--text-sm);
  color: #9c3a2c;
  min-height: 1.2em;
}
.field__input[aria-invalid="true"],
.field__textarea[aria-invalid="true"] { border-color: #9c3a2c; }

/* Honeypot — hidden from people, visible to naive bots. */
.field--trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.form__note { font-size: var(--text-sm); color: var(--text-muted); }

.form__status {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  border: 1px solid transparent;
}
.form__status:empty { display: none; }
.form__status--ok {
  background-color: color-mix(in srgb, var(--c-sage) 24%, var(--c-white));
  border-color: var(--c-sage);
  color: var(--c-ink);
}
.form__status--error {
  background-color: #f7e7e3;
  border-color: #cd9a8f;
  color: #832f22;
}

/* --- Footer --------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: var(--z-content);
  background-color: var(--bg-invert);
  color: var(--text-invert);
  padding-block: var(--space-2xl) var(--space-lg);
  overflow: hidden;
}
.footer a { color: var(--c-sage-soft); }
.footer a:hover { color: var(--c-white); }
.footer .botanical { color: var(--c-sage); opacity: 0.1; }

.footer__grid {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(246, 242, 231, 0.16);
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer__wordmark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ivory);
  margin-bottom: var(--space-xs);
}
.footer__blurb {
  font-size: var(--text-sm);
  color: rgba(246, 242, 231, 0.74);
  max-width: 34ch;
}

.footer__title {
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(246, 242, 231, 0.56);
  margin-bottom: var(--space-sm);
}
.footer__list { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
/* Links get real height so they clear the minimum target size on a phone. */
.footer__list a {
  display: inline-block;
  padding-block: 0.3em;
  min-height: 28px;
  text-decoration: none;
}
.footer__list a:hover { text-decoration: underline; }

.socials { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.socials a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(246, 242, 231, 0.26);
  border-radius: 50%;
  color: var(--c-ivory);
  transition: background-color var(--duration-normal) var(--ease-out-soft),
              border-color var(--duration-normal) var(--ease-out-soft),
              transform var(--duration-fast) var(--ease-out-soft);
}
.socials a:hover {
  background-color: var(--c-sage);
  border-color: var(--c-sage);
  color: var(--c-ink);
  transform: translateY(-2px);
}
.socials svg { width: 17px; height: 17px; }

.footer__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  font-size: var(--text-sm);
  color: rgba(246, 242, 231, 0.56);
}

/* --- Small utilities ------------------------------------------------------ */
.collection__footnote {
  margin-top: calc(var(--space-2xl) + var(--space-md));
  text-align: center;
}
.field__optional {
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

/* --- Product carousel -----------------------------------------------------
   A native scroll-snap track. Without JavaScript it is still a perfectly
   usable horizontal scroller — swipe on touch, scrollbar or keyboard on
   desktop. The buttons below are an enhancement, not the mechanism. */
.carousel { position: relative; margin-top: var(--space-xl); }

.carousel__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scroll-behavior: smooth;
  /* Bleed to the viewport edges so slides run off the page like a reel. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block-end: var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--c-taupe) transparent;
  overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { height: 6px; }
.carousel__track::-webkit-scrollbar-track { background: transparent; }
.carousel__track::-webkit-scrollbar-thumb {
  background-color: var(--c-taupe-soft);
  border-radius: 999px;
}
.carousel__track:hover::-webkit-scrollbar-thumb { background-color: var(--c-taupe); }

/* The scroll container is focusable, so keyboard users can arrow through it. */
.carousel__track:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

.carousel__slide {
  flex: 0 0 auto;
  width: clamp(10.5rem, 42vw, 15rem);
  scroll-snap-align: start;
  margin: 0;
}
.carousel__slide .frame { aspect-ratio: 3 / 4; }
.carousel__slide .frame img { transition: transform var(--duration-slow) var(--ease-out-expo); }
.carousel__slide:hover .frame img { transform: scale(1.04); }

.carousel__caption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

/* --- Controls -------------------------------------------------------------
   Hidden until JavaScript marks the carousel as enhanced, so they never
   appear as dead buttons. */
.carousel__controls { display: none; }
.carousel.is-enhanced .carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: transparent;
  border: 1px solid var(--c-taupe);
  border-radius: 50%;
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out-soft),
              border-color var(--duration-normal) var(--ease-out-soft),
              color var(--duration-normal) var(--ease-out-soft),
              opacity var(--duration-normal) var(--ease-out-soft);
}
.carousel__btn:hover:not(:disabled) {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-ivory);
}
.carousel__btn:disabled { opacity: 0.3; cursor: default; }
.carousel__btn svg { width: 17px; height: 17px; }

.carousel__progress {
  flex: 1;
  height: 1px;
  background-color: var(--rule-strong);
  position: relative;
  overflow: hidden;
}
.carousel__progress span {
  position: absolute;
  inset-block: 0;
  left: 0;
  display: block;
  background-color: var(--accent);
  transition: transform var(--duration-normal) var(--ease-out-soft);
  transform-origin: left;
  width: 100%;
  transform: scaleX(0);
}

.carousel__count {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}