/* =============================================================
   HeySilkySkin Theme — home page
   Ported from the design prototype, with the product card and
   reviews carousel following the supplied references.

   Section background rhythm (deliberate — no two adjacent
   sections share a surface):
     hero      image
     trust     #f7dbe1
     cats      #fff
     bestsell  #fff   (continues the same white block)
     why-us    blush  + starfield
     showcase  #fff
     results   blush
     press     #f7dbe1
     reviews   #fff
     blog      blush
     newsletter#fff
   ============================================================= */

/* -------------------------------------------------------------
   Image slot placeholder
   ------------------------------------------------------------- */
.hss-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f2f8;
  color: rgba(44, 36, 34, 0.4);
}
.hss-slot__label {
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: center;
}

/* -------------------------------------------------------------
   Section head
   ------------------------------------------------------------- */
.hss-sectionhead { max-width: 640px; }
.hss-sectionhead--center { max-width: 720px; margin-inline: auto; text-align: center; }

.hss-sectionhead__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-violet);
}
.hss-sectionhead__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-ink-deep);
}
.hss-sectionhead__sub {
  margin: 18px 0 0;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: rgba(44, 36, 34, 0.62);
}

/* =============================================================
   Hero
   ============================================================= */
.hss-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(480px, 84vh, 840px);
  overflow: hidden;
  background: #f4f2f8;
}
.hss-hero__media { position: absolute; inset: 0; }
.hss-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hss-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(44,36,34,.62) 0%,
    rgba(44,36,34,.32) 42%,
    rgba(44,36,34,.82) 100%);
  pointer-events: none;
}

.hss-hero__inner {
  position: relative;
  width: 100%;
  max-width: 860px;
  padding: clamp(56px, 9vw, 96px) var(--container-pad);
  text-align: center;
}

.hss-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 22px;
  font-family: var(--font-ui);
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.hss-hero__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-pink);
}

.hss-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 6.4vw, 88px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-on-primary);
  text-shadow: 0 2px 30px rgba(44, 36, 34, 0.4);
}

.hss-hero__lede {
  max-width: 560px;
  margin: 24px auto 34px;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

.hss-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.hss-hero__proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 0;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
}

/* =============================================================
   Trust bar
   ============================================================= */
.hss-trust {
  background: #f7dbe1;
  border-top: 1px solid var(--color-hairline-violet);
  border-bottom: 1px solid var(--color-hairline-violet);
}
.hss-trust__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-block: 26px;
}
.hss-trust__item { text-align: center; }
.hss-trust__lead {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 17px);
  color: #2c2422;
}
.hss-trust__sub {
  display: block;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-on-dark-muted);
}

/* =============================================================
   Categories
   ============================================================= */
.hss-cats-section { background: #fff; padding-block: clamp(56px, 8vw, 88px); }

.hss-cats {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
  margin-top: 44px;
}

.hss-cat {
  position: relative;
  display: block;
  aspect-ratio: 4 / 6;
  border-radius: var(--radius-xxl);
  overflow: hidden;
}
.hss-cat--big { aspect-ratio: 5 / 6; }

.hss-cat__slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f2f8;
  color: rgba(44, 36, 34, 0.4);
  font-family: var(--font-ui);
  font-size: 13px;
  transition: transform var(--dur-slow) var(--ease-out);
}
.hss-cat__slot img { width: 100%; height: 100%; object-fit: cover; }
.hss-cat:hover .hss-cat__slot { transform: scale(1.04); }

.hss-cat__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44,36,34,.72) 0%, rgba(44,36,34,0) 55%);
  pointer-events: none;
}

.hss-cat__body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  pointer-events: none;
}
.hss-cat__copy {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-lime);
}
.hss-cat__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.015em;
  color: #fff;
}

/* =============================================================
   Bestsellers rail
   ============================================================= */
/* Top padding matters now that this section sits directly under the trust
   bar. It was written with bottom padding only, back when the categories
   section above it supplied the separation. The bottom is trimmed because
   the categories section that follows brings its own 56px -- together the
   two were leaving ~144px of white between the cards and "Shop by concern". */
.hss-bestsellers-section {
  background: #fff;
  padding-top: clamp(56px, 8vw, 88px);
  padding-bottom: clamp(32px, 4vw, 48px);
}



/* =============================================================
   Why us — carries the starfield texture
   ============================================================= */
.hss-why-section {
  background: var(--hss-stars, none), var(--color-surface-canvas);
  background-size: 600px 600px, auto;
  padding-block: clamp(56px, 8vw, 88px);
}

.hss-why {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.hss-feature {
  height: 100%;
  padding: clamp(24px, 3vw, 32px);
  background: #fdeef1;
  border: 1px solid #f0d9de;
  border-radius: var(--radius-xl);
}
.hss-feature__tag {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 10px;
  background: #f7dbe1;
  border-radius: var(--radius-xs);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2c2422;
}
.hss-feature__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 25px);
  letter-spacing: -0.015em;
  color: #2c2422;
}
.hss-feature__copy {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-on-dark-muted);
}

/* =============================================================
   Showcase — white, so it reads as a separate band from Why us
   ============================================================= */
.hss-showcase {
  position: relative;
  background: #fff;
  border-top: 1px solid var(--color-hairline-violet);
}
.hss-showcase__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 96px);
}
.hss-showcase__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xxl);
  overflow: hidden;
  background: #fdeef1;
}
.hss-showcase__img { width: 100%; height: 100%; object-fit: cover; }
.hss-showcase__eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-pink);
}
.hss-showcase__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #2c2422;
}
.hss-showcase__copy {
  max-width: 460px;
  margin: 22px 0 26px;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--color-on-dark-muted);
}
.hss-showcase__points {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hss-showcase__points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--font-ui);
  font-size: 15.5px;
  line-height: 1.5;
  color: #2c2422;
}
.hss-showcase__tick { color: var(--color-accent-pink); font-weight: 700; }
.hss-showcase__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hss-showcase__save { font-family: var(--font-ui); font-size: 14px; color: var(--color-on-dark-muted); }
.hss-showcase__save del { opacity: 0.7; }
/* =============================================================
   Results carousel
   Mirrors the Bestsellers carousel exactly: left-aligned head,
   arrows top-right, full-bleed rail, product-card geometry.
   Blush background so it separates from the white showcase.
   ============================================================= */
.hss-results-section {
  background: var(--color-surface-canvas);
  padding-block: clamp(56px, 8vw, 88px);
}

.hss-rail--results { grid-auto-columns: minmax(300px, 1fr); }

/* Card geometry is identical to .hss-pcard. */
.hss-ba {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  border: 1px solid var(--color-hairline-violet);
  border-radius: var(--radius-xxl);
  overflow: hidden;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.hss-ba:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-2);
}

/* Square panel, image fills it edge to edge. Every rendered image is
   therefore exactly the same width and height, whatever the source ratio. */
.hss-ba__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fdeef1;
  border-bottom: 1px solid var(--color-hairline-violet);
  overflow: hidden;
}
.hss-ba__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms var(--ease-out);
}
.hss-ba:hover .hss-ba__media img { transform: scale(1.04); }

.hss-ba__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px 24px;
  flex: 1;
}
.hss-ba__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink-deep);
}
.hss-ba__sub {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(44, 36, 34, 0.72);
}

/* =============================================================
   Press
   ============================================================= */
.hss-press {
  background: #f7dbe1;
  border-top: 1px solid var(--color-hairline-violet);
  border-bottom: 1px solid var(--color-hairline-violet);
}
.hss-press__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-block: 40px;
}
.hss-press__label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.hss-press__logos {
  display: flex;
  gap: clamp(20px, 4vw, 44px);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.hss-press__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 22px);
  letter-spacing: 0.02em;
  color: #2c2422;
  opacity: 0.45;
}

/* =============================================================
   Reviews — continuous auto-scrolling carousel
   ============================================================= */
.hss-reviews-section {
  background: #fff;
  padding-block: clamp(56px, 8vw, 88px);
  overflow: hidden;
}

.hss-marquee {
  margin-top: 48px;
  overflow: hidden;
  /* Fade the edges so cards enter and leave rather than being cut. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.hss-marquee__track {
  display: flex;
  width: max-content;
  animation: hss-marquee 90s linear infinite;
}
.hss-marquee.is-paused .hss-marquee__track { animation-play-state: paused; }

.hss-marquee__half {
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  padding-right: 20px;
}

.hss-rcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 340px;
  flex: 0 0 340px;
  margin: 0;
  padding: 24px;
  background: var(--color-surface-canvas);
  border: 1px solid var(--color-hairline-violet);
  border-radius: var(--radius-xxl);
}
.hss-rcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hss-rcard__text {
  flex: 1;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.7;
  color: #2c2422;
}
.hss-rcard__foot { margin-top: auto; }
.hss-rcard__product {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.hss-rcard__product:hover { color: inherit; }
.hss-rcard__product:hover .hss-rcard__pname { color: var(--color-accent-violet); }

.hss-rcard__thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fdeef1;
}
.hss-rcard__thumb img { width: 100%; height: 100%; object-fit: cover; }

.hss-rcard__meta { display: flex; flex-direction: column; min-width: 0; }
.hss-rcard__name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: #2c2422;
}
.hss-rcard__pname {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(44, 36, 34, 0.6);
  transition: color var(--dur-fast) ease;
}

.hss-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-xs);
  background: #f7dbe1;
  color: #2c2422;
  font-family: var(--font-ui);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  white-space: nowrap;
}

/* No auto-motion for anyone who asked for less: becomes a normal rail. */
@media (prefers-reduced-motion: reduce) {
  .hss-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hss-marquee__track { animation: none; }
  .hss-marquee__half:nth-child(2) { display: none; }
}

/* =============================================================
   Blog
   ============================================================= */
.hss-blog-section {
  background: var(--color-surface-canvas);
  padding-block: clamp(56px, 8vw, 88px);
}

.hss-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.hss-post__link { display: block; color: inherit; }
.hss-post__link:hover { color: inherit; }
.hss-post__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xxl);
  overflow: hidden;
  background: #fff;
}
.hss-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.hss-post:hover .hss-post__media img { transform: scale(1.04); }
.hss-post__read {
  margin: 18px 0 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-violet);
}
.hss-post__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.25;
  color: var(--color-ink-deep);
  transition: color var(--dur-fast) ease;
}
.hss-post:hover .hss-post__title { color: var(--color-accent-violet); }

/* =============================================================
   Newsletter
   ============================================================= */
.hss-newsletter { background: #fff; padding: 40px 0 8px; }
.hss-newsletter .hss-container { padding-bottom: clamp(56px, 8vw, 88px); }

.hss-newsletter__card {
  padding: clamp(28px, 5vw, 64px);
  text-align: center;
  background: #fdeef1;
  border: 1px solid #f0d9de;
  border-radius: var(--radius-xxl);
}
.hss-newsletter__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-lime);
}
.hss-newsletter__title {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #2c2422;
}
.hss-newsletter__sub {
  max-width: 480px;
  margin: 16px auto 28px;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 1.7;
  color: rgba(44, 36, 34, 0.62);
}
.hss-newsletter__form {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.hss-newsletter__input {
  flex: 1 1 220px;
  min-height: 46px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-ink-deep);
  transition: box-shadow 120ms ease;
}
.hss-newsletter__input:focus { outline: none; box-shadow: var(--shadow-input-focus); }

/* =============================================================
   Responsive
   ============================================================= */

/* Laptop — categories lose the wide first tile. */
@media (max-width: 1100px) {
  .hss-cats { grid-template-columns: repeat(3, 1fr); }
  .hss-cat, .hss-cat--big { aspect-ratio: 4 / 6; }
}

/* Tablet */
@media (max-width: 960px) {
  .hss-showcase__inner { grid-template-columns: 1fr; }
  .hss-showcase__media { max-width: 460px; margin-inline: auto; }
  .hss-showcase__copy { max-width: none; }
  .hss-why { grid-template-columns: 1fr; }
  .hss-cats { grid-template-columns: repeat(2, 1fr); }
  .hss-cat:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .hss-posts { grid-template-columns: repeat(2, 1fr); }
  .hss-rail { grid-auto-columns: minmax(280px, 1fr); }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
  .hss-trust__inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hss-rcard { width: 300px; flex-basis: 300px; }
}

/* Phone */
@media (max-width: 680px) {
  .hss-cats { grid-template-columns: 1fr; }
  .hss-cat, .hss-cat--big { aspect-ratio: 4 / 5; }
  .hss-cat:last-child { aspect-ratio: 4 / 5; }
  .hss-posts { grid-template-columns: 1fr; }
  .hss-newsletter__form { flex-direction: column; }
  .hss-newsletter__form .hss-btn { width: 100%; justify-content: center; }
  .hss-railhead { align-items: flex-start; }
  .hss-railhead__arrows { display: none; } /* swipe instead */
  .hss-rail { grid-auto-columns: minmax(78vw, 1fr); margin-top: 28px; }
  .hss-showcase__actions { gap: 12px; }
  .hss-hero__actions .hss-btn { flex: 1 1 auto; justify-content: center; }
}

/* Small phone */
@media (max-width: 400px) {
  .hss-trust__inner { grid-template-columns: 1fr; gap: 16px; }
  .hss-rcard { width: 82vw; flex-basis: 82vw; padding: 20px; }
}

/* =============================================================
   Additions — hover image swap, press marquee, mobile form fix
   ============================================================= */


/* ---- Press marquee ------------------------------------------ */
.hss-press__inner { display: none; } /* superseded by the marquee */

.hss-press .hss-container { padding-top: 40px; }
.hss-press__label {
  margin: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.hss-marquee--press { margin-top: 24px; padding-bottom: 40px; }
.hss-marquee__track--press { animation-duration: 45s; }
.hss-marquee__track--press .hss-marquee__half {
  align-items: center;
  gap: clamp(28px, 5vw, 44px);
  padding-right: clamp(28px, 5vw, 44px);
}
.hss-marquee--press .hss-press__logo { flex: 0 0 auto; white-space: nowrap; }

/* ---- Newsletter: mobile field ------------------------------- */
/* In a column flex container, flex-basis applies to HEIGHT — the old
   `flex: 1 1 220px` made the input 220px tall on phones. */
@media (max-width: 680px) {
  .hss-newsletter__form { flex-direction: column; align-items: stretch; }
  .hss-newsletter__input {
    flex: 0 0 auto;
    width: 100%;
    min-height: 52px;
    height: 52px;
  }
  .hss-newsletter__form .hss-btn { width: 100%; justify-content: center; }
}

/* ---- Full-bleed rail on small screens ----------------------- */
@media (max-width: 680px) {
  .hss-rail--bleed { --hss-gutter: var(--container-pad); }
}

/* =============================================================
   "As seen in" — logo bar, built like the announcement marquee
   ============================================================= */
.hss-press {
  background: #f7dbe1;
  border-top: 1px solid var(--color-hairline-violet);
  border-bottom: 1px solid var(--color-hairline-violet);
  padding-block: 28px;
  overflow: hidden;
}

.hss-press__label {
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.hss-pressbar { overflow: hidden; }

.hss-pressbar__track {
  display: flex;
  width: max-content;
  animation: hss-marquee 22s linear infinite;
}
.hss-pressbar.is-paused .hss-pressbar__track { animation-play-state: paused; }

/* Each half fills the viewport, so the wrap can never expose a gap. */
.hss-pressbar__half {
  display: flex;
  flex: 0 0 auto;
  min-width: 100vw;
  align-items: center;
  justify-content: space-around;
  gap: clamp(28px, 5vw, 56px);
  padding-inline: clamp(14px, 2.5vw, 28px);
}

.hss-press__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  opacity: 0.55;
  transition: opacity var(--dur-fast) ease;
}
.hss-press__logo:hover { opacity: 1; }
.hss-press__logo img {
  width: auto;
  height: 26px;
  max-width: none;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .hss-pressbar__track { animation: none; }
  .hss-pressbar__half:nth-child(2) { display: none; }
}

@media (max-width: 680px) {
  .hss-press__logo img { height: 20px; }
  .hss-pressbar__half { gap: 24px; }
}