:root {
  --teal-950: #003f3d;
  --teal-900: #004d4a;
  --teal-800: #075d59;
  --teal-100: #dce9e7;
  --gold: #b17a43;
  --ink: #1b1d1c;
  --muted: #686b69;
  --paper: #ffffff;
  --warm: #f5f2ec;
  --line: #e6e4df;

  /* Every catalogue image is portrait 2:3 — the source photography is 512x768
     and the AI studio generates 1024x1536. The frames that show them are sized
     from this one token so they cannot drift apart from the pictures and start
     cropping heads and hems off with object-fit: cover. */
  --catalogue-ratio: 2 / 3;

  /* Card width, not column count. A full-length garment in a portrait frame
     needs room: six fixed columns turned each card into a narrow sliver, and a
     count cannot know how wide the viewport is. */
  --card-min: 240px;
}

.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 14px;
  height: 14px;
}

.icon-lg {
  width: 42px;
  height: 42px;
}

.is-hidden {
  display: none !important;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.announcement-bar {
  height: 27px;
  background: var(--teal-900);
  color: white;
  font-size: 10px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.announcement-inner {
  width: min(100% - 32px, 1090px);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
}

.announcement-inner > span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.announcement-inner .currency {
  justify-content: flex-end;
  border-right: 0;
  padding-left: 20px;
}

.site-header {
  position: relative;
  z-index: 30;
  height: 88px;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #eee;
}

.header-inner {
  position: relative;
  width: min(100% - 64px, 1440px);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: 24px;
}

.brand {
  width: 252px;
  height: 75px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* the logo is 1760x509 (ratio 3.46), so at .brand's 252px width it wants 72.9px
   of height — inside the 75px box, but only just, and a wider lockup would crop
   the monogram top and bottom again. contain scales it to fit whatever box the
   breakpoint gives it instead. */
.brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.1vw, 34px);
  white-space: nowrap;
}

.primary-nav a {
  position: relative;
  padding: 35px 0 33px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 23px;
  height: 1px;
  background: var(--teal-900);
  transition: left 180ms ease, right 180ms ease;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  left: 0;
  right: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

/* The bag is an anchor (it navigates to /bag) while its neighbours are buttons.
   Both need `position: relative`, because .count-badge is positioned against
   them. */
.header-actions > button,
.header-actions > a {
  position: relative;
  border: 0;
  padding: 4px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.count-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #111;
  color: white;
  border: 1px solid white;
  font-size: 8px;
  font-weight: 700;
}

.search-box {
  position: absolute;
  top: calc(50% - 19px);
  right: 174px;
  width: 230px;
  height: 38px;
  background: white;
}

.search-box input {
  width: 100%;
  height: 100%;
  padding: 0 13px;
  border: 1px solid #bbb;
  outline: none;
  font-size: 12px;
}

.search-box input:focus {
  border-color: var(--teal-900);
  box-shadow: 0 0 0 2px rgba(0, 77, 74, 0.12);
}

/*
 * The hero photo is object-fit: cover, so a full-bleed hero on a very wide
 * viewport (or a zoomed-out browser) stretches the box sideways without adding
 * height -- cover then scales the photo UP and crops it, while everything below
 * stays capped at 1230px. Freezing the hero at its design width keeps it on the
 * same centred measure as .content-shell, so the whole page scales together.
 * .hero-band carries the flat cream past the cap to preserve the full-bleed look.
 */
.hero-band {
  position: relative;
  background: #f7f3ed;
}

.hero {
  position: relative;
  width: min(100% - 64px, 1440px);
  min-height: 420px;
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(90deg, #f3eee7 0%, #f5f0e9 37%, #f2ece4 52%, #eee7de 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(247, 243, 237, 0.98) 0%,
      rgba(247, 243, 237, 0.97) 31%,
      rgba(247, 243, 237, 0.82) 39%,
      rgba(247, 243, 237, 0.3) 49%,
      rgba(247, 243, 237, 0) 61%
    );
}

.hero-photo {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 34%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 9%, #000 23%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 9%, #000 23%);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: opacity 260ms ease;
}

/* Each slide brings its own photograph now, so the panel crossfades between
   them. The 260ms here is the same figure silverloom-home.js waits before it
   changes the source: the picture is swapped while the panel is down. */
.hero-photo.is-changing img {
  opacity: 0;
}

/* the hero panel is already on the shared measure, so the copy sits flush with
   it -- that puts the headline on the same left edge as "Best sellers" below */
.hero-inner {
  width: 100%;
  min-height: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.hero-copy {
  width: 420px;
  padding-bottom: 4px;
}

.eyebrow {
  margin: 0 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 3.8vw, 58px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.hero h1 span {
  display: block;
  color: var(--teal-900);
}

.hero h1 .hero-first {
  color: var(--ink);
  white-space: nowrap;
}

.hero-description {
  max-width: 350px;
  margin: 20px 0 21px;
  font-size: 14px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

.button {
  min-height: 39px;
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--teal-900);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 170ms ease, background 170ms ease, transform 170ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: white;
  background: var(--teal-900);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.65);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  width: 45px;
  height: 58px;
  border: 0;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: background 150ms ease;
}

.hero-arrow:hover {
  background: white;
}

.hero-arrow-left {
  left: 0;
}

.hero-arrow-right {
  right: 0;
}

.content-shell {
  width: min(100% - 64px, 1440px);
  margin: 0 auto;
}

.service-strip {
  position: relative;
  z-index: 5;
  min-height: 78px;
  margin-top: -18px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 7px 24px rgba(20, 20, 20, 0.08);
}

.service-strip article {
  min-height: 48px;
  padding: 0 27px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-right: 1px solid #e4e4e4;
}

.service-strip article:last-child {
  border-right: 0;
}

.service-strip svg {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--gold);
}

.service-strip strong,
.service-strip span {
  display: block;
}

.service-strip strong {
  margin-bottom: 6px;
  font-size: 12px;
  text-transform: uppercase;
}

.service-strip span {
  color: #444;
  font-size: 11px;
}

/* Free shipping has no condition under it. The line is kept even so: each
   article centres its own block, and without it that one title would sit a line
   lower than the three beside it. */
.service-strip span:empty::after {
  content: "\00a0";
}

/* Shop-by-category tags.

   This replaced a three-column wall of photographs. The wall was 215px tall at
   minimum and sat between the hero and the first garment on sale, so on a
   laptop a shopper scrolled past a screen of borrowed imagery to reach
   something they could buy. The names do the same job in one line.

   Deliberately the same chip as `.listing-subnav-link`, which is how
   sub-categories are already drawn on a category page: same pill, same
   `--line` border, same gold hover. A shopper meets one shape for "narrow to
   this" wherever they are in the shop. Sized a little larger here because
   these are the front page's primary navigation rather than a filter, and
   lettered in the house's uppercase to match the buttons above them. */
.category-tags {
  margin: 20px 0 38px;
}

.category-tags-label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* Wraps rather than scrolls. A hidden overflow on a wrapping set of short
   labels would hide categories with no scrollbar to hint at them; twelve names
   take two lines at the narrowest width this page supports. */
.category-tag-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.category-tag {
  min-height: 36px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* No `nowrap`. A pill is a flex item in a wrapping row, so it is already
     laid out at its natural one-line width and moved to the next line whole
     when it does not fit — the text only breaks when a single name is wider
     than the row itself, which on a phone is the difference between a
     two-line pill and a page that scrolls sideways. */
  max-width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.5;
  text-align: center;
  transition: color 170ms ease, background 170ms ease, border-color 170ms ease;
}

.category-tag:hover {
  border-color: var(--gold);
  background: var(--warm);
  color: var(--gold);
}

.category-tag:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.products-section {
  padding-bottom: 34px;
}

.section-heading {
  margin-bottom: 19px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.section-heading > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.heading-ornament {
  margin-left: 38px;
  color: var(--gold);
  font-size: 13px;
}

.section-heading h2 {
  margin: 4px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
}

.section-heading > a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  column-gap: 16px;
  row-gap: 30px;
}

.product-card {
  min-width: 0;
}

.product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--catalogue-ratio);
  background: #f7f6f3;
}

.product-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

.product-card:hover .product-image > img {
  transform: scale(1.03);
}

.new-label {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 3px 6px;
  color: white;
  background: #002f2e;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Sits in the same corner as the New flag — the two are mutually exclusive, so
   they cannot collide. Muted rather than alarming: out of stock is information,
   not an error, and a red badge on a premium catalogue reads as a fault. */
.stock-label {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 3px 6px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Desaturated rather than hidden: the garment stays legible enough to judge,
   which is the whole point of still listing it. */
.product-card.is-sold-out .product-image > img {
  filter: grayscale(0.35);
  opacity: 0.72;
}

.product-card.is-sold-out:hover .product-image > img {
  transform: none;
}

.product-card.is-sold-out .product-info h3 a {
  color: var(--muted);
}

.favorite-button {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(247, 246, 243, 0.92);
  cursor: pointer;
}

.favorite-button svg {
  /* A heart is geometrically centred in its viewBox but reads low: its mass
     sits in the two lobes at the top while the point below them carries almost
     no ink, so the eye settles above the shape's midpoint. Two pixels up puts
     it where it looks centred, and level with the envelope beside it. */
  transform: translateY(-2px);
  transition: fill 160ms ease, color 160ms ease, transform 160ms ease;
}

.favorite-button.is-favorite svg {
  color: var(--teal-900);
  fill: var(--teal-900);
  /* the nudge is repeated, not inherited: a transform replaces rather than
     adds to the one above, so scale alone would drop the heart back down */
  transform: translateY(-2px) scale(1.08);
}

.quick-add {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: white;
  background: rgba(0, 63, 61, 0.94);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  transform: translateY(55px);
  transition: transform 220ms ease;
  cursor: pointer;
}

.product-card:hover .quick-add,
.quick-add:focus-visible {
  transform: translateY(0);
}

.product-info {
  min-height: 72px;
  padding: 10px 5px 0;
  text-align: center;
}

.product-info h3 {
  min-height: 28px;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
}

.product-info p {
  margin: 4px 0 8px;
  font-size: 11px;
}

.swatches {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.swatches span,
.swatches .swatch {
  width: 10px;
  height: 10px;
  border: 1px solid #777;
  border-radius: 50%;
  box-shadow: 0 0 0 1px white;
}

/* a swatch that switches the card's picture is a real control: it needs a
   pointer, a hit area bigger than the 10px dot, and a visible selected state */
.swatches button.swatch {
  position: relative;
  padding: 0;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.swatches button.swatch::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.swatches button.swatch:hover {
  transform: scale(1.25);
}
.swatches button.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 1px white, 0 0 0 2.5px #1f5f57;
}
.swatches button.swatch:focus-visible {
  outline: 2px solid #1f5f57;
  outline-offset: 3px;
}

.site-footer {
  color: white;
  background:
    radial-gradient(circle at 15% 0%, rgba(25, 116, 108, 0.33), transparent 34%),
    var(--teal-950);
}

.footer-inner {
  width: min(100% - 64px, 1440px);
  margin: 0 auto;
  padding: 44px 0 31px;
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.82fr 0.92fr 1.62fr;
  gap: 28px;
}

.footer-brand {
  padding-right: 22px;
}

.footer-brand > img {
  width: 185px;
  height: 54px;
  margin: -6px 0 14px;
  /* contain, not cover: the lockup is 3.46:1 and this box is not, so cover was
     cropping the wordmark and the footer read "SILVER LO" */
  object-fit: contain;
  object-position: left center;
  filter: brightness(4.7) saturate(0);
  mix-blend-mode: screen;
}

.footer-brand p,
.footer-newsletter p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  line-height: 1.65;
}

.socials {
  margin-top: 16px;
  display: flex;
  gap: 18px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  font-size: 12px;
  font-weight: 700;
}

.footer-column,
.footer-newsletter {
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.footer-column h3,
.footer-newsletter h3 {
  margin: 0 0 16px;
  font-size: 11px;
  text-transform: uppercase;
}

.footer-column a {
  display: block;
  margin-bottom: 11px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 10px;
}

.footer-column a:hover {
  color: white;
  text-decoration: underline;
}

.footer-newsletter form {
  margin-top: 14px;
  display: flex;
  height: 35px;
}

.footer-newsletter input {
  min-width: 0;
  flex: 1;
  padding: 0 12px;
  border: 0;
  color: #222;
  font-size: 10px;
}

.footer-newsletter button {
  width: 94px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: white;
  background: transparent;
  font-size: 9px;
  text-transform: uppercase;
  cursor: pointer;
}

.footer-newsletter h4 {
  margin: 18px 0 9px;
  font-size: 10px;
  text-transform: uppercase;
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.payment-methods span {
  min-width: 39px;
  height: 22px;
  padding: 0 6px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  color: #123;
  background: white;
  font-size: 8px;
  font-weight: 700;
}

.footer-bottom {
  width: min(100% - 64px, 1440px);
  min-height: 50px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
}

.footer-bottom div {
  display: flex;
  gap: 28px;
}

@media (max-width: 1180px) {
  .header-inner {
    grid-template-columns: 220px 1fr auto;
  }

  .brand {
    width: 215px;
  }

  .primary-nav {
    gap: 16px;
  }

  .primary-nav a {
    font-size: 10px;
  }

  .service-strip article {
    padding: 0 18px;
  }
}

@media (max-width: 900px) {
  .announcement-inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .announcement-inner .currency {
    display: none;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .primary-nav {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 360px);
    padding: 86px 34px 30px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    background: white;
    box-shadow: -14px 0 45px rgba(0, 0, 0, 0.18);
    transform: translateX(105%);
    transition: transform 240ms ease;
  }

  .primary-nav.is-open {
    transform: translateX(0);
  }

  .primary-nav a {
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    font-size: 12px;
  }

  .primary-nav a::after {
    display: none;
  }

  .search-box {
    right: 176px;
  }

  /* on small screens the hero goes back to full bleed with an inset copy
     column, which is how the design composes it below this breakpoint */
  .hero {
    width: 100%;
    min-height: 520px;
    background: linear-gradient(90deg, #f5f1ea 0%, #f5f1ea 48%, rgba(245, 241, 234, 0.86) 59%, rgba(245, 241, 234, 0.1) 100%);
  }

  .hero-inner {
    width: min(100% - 64px, 1230px);
    min-height: 520px;
  }

  .hero-photo {
    left: 38%;
  }

  .hero-copy {
    width: 50%;
    padding-left: 10px;
  }

  .hero h1 {
    font-size: clamp(40px, 6vw, 52px);
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px;
  }

  .service-strip article {
    border-bottom: 1px solid #e4e4e4;
  }

  .service-strip article:nth-child(2) {
    border-right: 0;
  }

  .service-strip article:nth-child(n + 3) {
    border-bottom: 0;
  }

  .footer-inner {
    grid-template-columns: 1.2fr repeat(2, 1fr);
  }

  .footer-newsletter {
    grid-column: 2 / -1;
  }
}

@media (max-width: 680px) {
  .announcement-bar {
    height: 30px;
  }

  .announcement-inner {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .announcement-inner > span {
    display: none;
  }

  .announcement-inner > span:first-child {
    display: flex;
    border: 0;
  }

  .site-header {
    height: 72px;
  }

  .header-inner {
    width: min(100% - 24px, 640px);
    gap: 8px;
  }

  .brand {
    width: 172px;
    height: 64px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-actions > button:nth-of-type(2) {
    display: none;
  }

  .search-box {
    top: 72px;
    left: 12px;
    right: 12px;
    width: auto;
  }

  .hero {
    min-height: 630px;
    background: #f4f0e9;
  }

  .hero-photo {
    inset: 0 0 auto;
    height: 300px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 90px;
    background: linear-gradient(transparent, #f4f0e9);
  }

  .hero-inner {
    min-height: 630px;
    align-items: flex-end;
    padding-bottom: 42px;
  }

  .hero-copy {
    width: 100%;
    padding: 0 18px;
    text-align: center;
  }

  .eyebrow {
    font-size: 11px;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 48px);
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    flex-direction: row;
    justify-content: center;
  }

  .button {
    min-height: 42px;
    padding: 0 14px;
    font-size: 9px;
  }

  .hero-arrow {
    top: 150px;
  }

  .content-shell,
  .footer-inner,
  .footer-bottom {
    width: min(100% - 24px, 640px);
  }

  .service-strip {
    margin-top: -15px;
    grid-template-columns: 1fr;
  }

  .service-strip article {
    min-height: 76px;
    border-right: 0;
    border-bottom: 1px solid #e4e4e4 !important;
  }

  .service-strip article:last-child {
    border-bottom: 0 !important;
  }

  /* Tighter on a phone, where two pills to a line is the most that fits. */
  .category-tag {
    min-height: 32px;
    padding: 0 14px;
    letter-spacing: 0.08em;
  }

  /* Two per row is the right phone layout whatever the exact width, and a
     width floor cannot express that — at 680px a 150px minimum fits four. */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .section-heading h2 {
    font-size: 23px;
  }

  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 12px;
  }

  .footer-brand,
  .footer-newsletter {
    grid-column: 1 / -1;
  }

  .footer-column,
  .footer-newsletter {
    padding-left: 0;
    border-left: 0;
  }

  .footer-bottom {
    padding: 18px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer-bottom div {
    flex-wrap: wrap;
    gap: 13px 20px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Live catalogue additions */
.product-info h3 a,
.product-card .product-image a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.product-info h3 a:hover {
  text-decoration: underline;
}

.was-price {
  margin-left: 8px;
  opacity: 0.55;
  font-weight: 400;
}

/* ==========================================================================
   Category listing and product pages
   ========================================================================== */

/* Staff preview of an unpublished product. Deliberately the one thing on the
   page that is not in the shop's palette — it has to read as "not the shop",
   and a gold or teal notice would look like part of the design. */
.pdp-preview-banner {
  background: #fdf3d7;
  border-bottom: 1px solid #e3c56a;
  color: #5a4410;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 12px 24px;
  text-align: center;
}
.pdp-preview-banner b { color: #3d2d05; }

.page-band {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--teal-900); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.breadcrumb-sep { color: #c9c6c0; }

.listing-head { margin-bottom: 28px; }
.listing-head h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  margin: 0 0 8px;
}
.listing-intro { max-width: 62ch; color: var(--muted); font-size: 15px; line-height: 1.65; }
.listing-count {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.listing-empty { padding: 64px 0; text-align: center; color: var(--muted); }
/* Sub-categories of the listing, as a row of chips a shopper can narrow with. */
.listing-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.listing-subnav-link {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.listing-subnav-link:hover { border-color: var(--gold); color: var(--gold); }
.listing-empty p { margin: 0 0 18px; font-size: 16px; }

/* --- product page ------------------------------------------------------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.pdp-media {
  position: relative;
  background: var(--warm);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: var(--catalogue-ratio);
}
.pdp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placed explicitly rather than left to auto-flow: the detail block is the next
   auto-placed item, and an unplaced strip would take the cell beside the
   picture and push the detail below it. */
.pdp-thumbs {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.pdp-thumbs[hidden] { display: none; }
.pdp-thumb {
  width: 72px;
  aspect-ratio: var(--catalogue-ratio);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--warm);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.68;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { opacity: 1; }
.pdp-thumb[aria-pressed="true"] { opacity: 1; border-color: var(--ink); }
.pdp-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Hover zoom: a lens over the picture, and the magnified region shown in a
   panel beside it. The panel is placed in the grid's second column, on top of
   the detail block — no magic offsets, and it lines up with the image whatever
   the column widths do. */
.pdp { position: relative; }

.pdp-media.is-zoomable { cursor: crosshair; }

.pdp-zoom-lens {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  display: none;
}
.pdp-media.is-zoomed .pdp-zoom-lens { display: block; }

.pdp-zoom-panel {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  /* Hugs the left of its column so it sits right beside the picture. Width,
     height and the vertical centring offset are all set from the picture's own
     box in silverloom-home.js — the only way to size and place it as a true
     fraction of the image rather than of its grid cell. */
  justify-self: start;
  z-index: 5;
  display: none;
  background: var(--warm) no-repeat;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}
.pdp-zoom-panel.is-visible { display: block; }

.pdp-zoom-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.pdp-media.is-zoomed .pdp-zoom-hint { opacity: 0; }

/* Touch has no hover to track, and a single-column layout has nowhere to put
   the panel. Pinch-zoom is the right gesture in both cases. */
@media not all and (any-hover: hover) {
  .pdp-media.is-zoomable { cursor: auto; }
  .pdp-zoom-lens, .pdp-zoom-panel, .pdp-zoom-hint { display: none !important; }
}
@media (max-width: 880px) {
  .pdp-zoom-lens, .pdp-zoom-panel, .pdp-zoom-hint { display: none !important; }
}

.pdp-detail h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 500;
  margin: 0 0 10px;
}
.pdp-price { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
.pdp-price .was-price { margin-left: 10px; color: var(--muted); font-weight: 400; font-size: 16px; }
.pdp-standfirst { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 26px; max-width: 56ch; }

.pdp-field { margin-bottom: 22px; }
.pdp-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.pdp-label b { color: var(--ink); font-weight: 600; letter-spacing: normal; text-transform: none; }
/* the picker is the point of the page, so its dots are bigger than a card's */
.pdp-swatches { justify-content: flex-start; gap: 14px; }
.pdp-swatches .swatch { width: 22px; height: 22px; }

.pdp-sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-size {
  min-width: 56px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.pdp-size:hover { border-color: var(--ink); }
.pdp-size[aria-pressed="true"] { background: var(--teal-900); border-color: var(--teal-900); color: #fff; }
/* Add to bag refuses a sized product until a size is chosen (sl_bag.js). The
   message sits below the button, so the row being asked about is marked here
   as well — in the same red the message uses. */
.pdp-sizes.needs-choice .pdp-size:not(:disabled) {
  border-color: #a3341f;
  box-shadow: 0 0 0 1px rgba(163, 52, 31, 0.3);
}
.pdp-size:focus-visible { outline: 2px solid var(--teal-900); outline-offset: 2px; }

/* Add to bag is block-level, not inline.
 *
 * `.button` sets `display: inline-flex`, which was fine while Add to bag was
 * the first thing under the size row. It now follows "See original material
 * photos", an inline-flex text button, and two inline-level boxes share a
 * line: the button rendered to the right of that link and over its text.
 * `width: 100%` does not help — an inline-level box is still placed in the
 * line box. `flex` makes it its own block, the way `.pdp-interest` beside it
 * is already `display: block`; `.button`'s centring survives because only
 * `display` is overridden. `[hidden]` still wins over this (sl_bag.css). */
.pdp-add {
  display: flex;
  width: 100%;
  max-width: 340px;
  margin: 20px 0 28px;
  padding: 15px 24px;
}
.pdp-copy { color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 60ch; }
.pdp-copy p { margin: 0 0 12px; }

.pdp-sizechart { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.pdp-sizechart summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.pdp-sizechart-body { overflow-x: auto; margin-top: 16px; }
.pdp-sizechart table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 420px; }
.pdp-sizechart th,
.pdp-sizechart td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
}
.pdp-sizechart thead th { background: var(--warm); font-weight: 600; }
.pdp-sizechart tbody th { background: #faf8f4; font-weight: 600; }
.pdp-sizechart-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

@media (max-width: 880px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-add { max-width: none; }
}

/* The home page grid is a fixed six-up row of best sellers. A category listing
   has however many products the category holds, so its tracks are sized rather
   than counted — two dresses stay dress-sized instead of shrinking to a sixth
   of the page, and `auto-fill` leaves the empty tracks empty. */
.page-band .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  column-gap: 16px;
}

/* --- listing pager ------------------------------------------------------ */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 44px;
}
.pager-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: border-color 160ms ease, color 160ms ease;
}
.pager-step:hover { border-color: var(--teal-900); color: var(--teal-900); }
/* the ends of the range stay in place rather than disappearing, so the pager
   does not change width as you move through it */
.pager-step.is-disabled { opacity: 0.38; pointer-events: none; }

.pager-numbers { display: flex; align-items: center; gap: 4px; margin: 0 6px; }
.pager-number {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid transparent;
  font-size: 13px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.pager-number:hover { border-color: var(--line); }
.pager-number.is-current {
  background: var(--teal-900);
  border-color: var(--teal-900);
  color: #fff;
  font-weight: 700;
}
.pager-gap { padding: 0 2px; color: var(--muted); }
.listing-page-of { color: var(--muted); }

@media (max-width: 560px) {
  .pager-step span { display: none; }
}

/* ==========================================================================
   Browse drawer
   ========================================================================== */
/* Sits in the header actions rather than beside the logo: a control butted up
   against the wordmark crowds the brand, and there is no need for a second
   hamburger when the actions cluster already ends in one. */
.browse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: border-color 160ms ease, color 160ms ease;
}
.browse-toggle:hover { border-color: var(--line); color: var(--teal-900); }

.sl-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 20, 18, 0.5);
  opacity: 0;
  transition: opacity 220ms ease;
}
.sl-drawer-backdrop.is-open { opacity: 1; }

.sl-drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 14px 0 45px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 260ms ease;
}
.sl-drawer.is-open { transform: translateX(0); }

.sl-drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  background: var(--teal-900);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.sl-drawer-close {
  margin-left: auto;
  border: 0;
  padding: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* The panels are stacked in one scroller and slid across, so drilling in and
   backing out is a transform rather than a re-render — the scroll position of
   the panel you came from survives the round trip. */
.sl-drawer-body { position: relative; flex: 1 1 auto; overflow: hidden; }
.sl-drawer-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 8px 0 24px;
  background: #fff;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 260ms ease, visibility 260ms;
}
.sl-drawer-panel.is-current { transform: translateX(0); visibility: visible; }
/* focused programmatically on every panel change, so it must not draw a ring */
.sl-drawer-panel:focus { outline: none; }
.sl-drawer-panel.is-behind { transform: translateX(-30%); visibility: hidden; }

.sl-drawer-heading {
  margin: 0;
  padding: 20px 22px 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 400;
}
.sl-drawer-title {
  margin: 0;
  padding: 4px 22px 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 400;
}
.sl-drawer-list { margin: 0; padding: 0; list-style: none; }

.sl-drawer-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background 140ms ease;
}
.sl-drawer-row:hover { background: var(--warm); }
.sl-drawer-row .icon { flex: 0 0 auto; color: var(--muted); }
.sl-drawer-row.is-all { font-weight: 700; color: var(--teal-900); }

.sl-drawer-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 12px 0;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.sl-drawer-back:hover { color: var(--teal-900); }

/* The drawer replaces the old right-hand slide-in nav: one menu, and the nav
   links live inside it on small screens. */
@media (max-width: 900px) {
  .primary-nav { display: none; }
  /* icon only once the header gets tight */
  .browse-toggle span { display: none; }
  .browse-toggle { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-drawer, .sl-drawer-backdrop, .sl-drawer-panel { transition: none; }
}