/* =============================================================
   HeySilkySkin Theme — components
   Grows as pages are built. Sections are ordered the way a page
   renders: announcement, header, panels, footer.
   ============================================================= */

/* =============================================================
   Announcement bar
   Two halves, each at least the full viewport wide, translated
   -50%. Without the min-width a short message set is narrower
   than the screen and the wrap shows as empty space.
   ============================================================= */
.hss-announce {
  background: var(--color-surface-announce);
  border-bottom: 1px solid var(--color-hairline-violet);
  overflow: hidden;
}

.hss-announce__track {
  display: flex;
  width: max-content;
  animation: hss-marquee 40s linear infinite;
}

.hss-announce__half {
  display: flex;
  flex: 0 0 auto;
  min-width: 100vw;
  justify-content: space-around;
  align-items: center;
}

.hss-announce__item {
  display: inline-flex;
  align-items: center;
  padding: 9px 32px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-on-dark-muted);
}

.hss-announce__item::after {
  content: '';
  width: 4px;
  height: 4px;
  margin-left: 32px;
  border-radius: var(--radius-full);
  background: var(--color-accent-pink);
}

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

@media (max-width: 680px) {
  .hss-announce__item { padding: 8px 18px; font-size: 10px; }
  .hss-announce__item::after { margin-left: 18px; }
}

/* =============================================================
   Header
   ============================================================= */
.hss-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-surface-canvas-light);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-mid) ease, box-shadow var(--dur-mid) ease,
              border-color var(--dur-mid) ease;
}

.hss-header.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--color-hairline-violet);
}

.hss-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  height: var(--header-height);
}

.hss-header__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-ink-deep);
  white-space: nowrap;
}
.hss-header__brand:hover { color: var(--color-ink-deep); }

.hss-header__nav { flex: 1; margin-left: var(--space-md); }

.hss-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
  color: var(--color-ink-deep);
}

.hss-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  background: none;
  color: var(--color-ink-deep);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) ease;
}
.hss-header__icon:hover {
  background: rgba(44, 36, 34, 0.08);
  color: var(--color-ink-deep);
}

.hss-header__burger { display: none; margin-left: -6px; }

.hss-header__cart { position: relative; }

.hss-header__cta { margin-left: var(--space-sm); min-height: 40px; }

/* ---- Primary menu ---- */
.hss-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hss-menu a {
  position: relative;
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-ink-deep);
}

.hss-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--color-accent-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) ease;
}
.hss-menu a:hover::after,
.hss-menu .current-menu-item > a::after { transform: scaleX(1); }

/* ---- Cart badge ---- */
.hss-cart-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-accent-pink);
  color: var(--color-surface-canvas-light);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.hss-cart-count--empty { display: none; }

@media (max-width: 960px) {
  .hss-header__nav { display: none; }
  .hss-header__burger { display: inline-flex; }
}
@media (max-width: 680px) {
  .hss-header__cta { display: none; }
  .hss-header__inner { gap: var(--space-md); }
}

/* =============================================================
   Panels — mobile menu, search overlay, mini-cart
   ============================================================= */
body.hss-no-scroll { overflow: hidden; }

.hss-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  pointer-events: none;
}
.hss-panel.is-open { visibility: visible; pointer-events: auto; }

.hss-panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(44, 36, 34, 0.42);
  opacity: 0;
  transition: opacity var(--dur-mid) ease;
}
.hss-panel.is-open .hss-panel__scrim { opacity: 1; }

.hss-panel__body {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-surface-canvas-light);
  box-shadow: var(--elevation-2);
  overflow-y: auto;
  transition: transform var(--dur-mid) var(--ease-out);
}

.hss-panel--left .hss-panel__body,
.hss-panel--right .hss-panel__body {
  top: 0;
  bottom: 0;
  width: min(380px, 88vw);
}
.hss-panel--left .hss-panel__body  { left: 0;  transform: translateX(-100%); }
.hss-panel--right .hss-panel__body { right: 0; transform: translateX(100%); }
.hss-panel--top .hss-panel__body {
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
}
.hss-panel.is-open .hss-panel__body { transform: none; }

.hss-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.hss-panel__close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--color-ink-deep);
  font-size: 26px;
  line-height: 1;
  border-radius: var(--radius-full);
  transition: background var(--dur-fast) ease;
}
.hss-panel__close:hover { background: rgba(44, 36, 34, 0.08); }

.hss-menu--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}
.hss-menu--stacked a {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}

/* =============================================================
   Footer
   ============================================================= */
.hss-footer {
  background: var(--color-surface-canvas-light);
  color: var(--color-ink-deep);
}

.hss-squiggle {
  width: 100%;
  line-height: 0;
  color: var(--color-accent-lime);
}
.hss-squiggle svg { display: block; }

.hss-footer__inner { padding: 56px var(--container-pad) 40px; }

/* Brand column is wider; every assigned menu column takes an equal share.
   Auto-flow means the row adapts to however many menus are assigned, rather
   than leaving a dead gap when one is missing. */
.hss-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-xxl);
}

.hss-footer__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-ink-deep);
}

.hss-footer__blurb {
  max-width: 240px;
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-on-dark-muted);
}

.hss-footer__col { display: flex; flex-direction: column; gap: 10px; }

.hss-footer__heading {
  margin-bottom: var(--space-xs);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(44, 36, 34, 0.5);
}

.hss-footer__menu,
.hss-footer__legal-menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hss-footer__menu { flex-direction: column; gap: 10px; }
.hss-footer__legal-menu { gap: var(--space-xl); }

.hss-footer__menu a,
.hss-footer__legal-menu a {
  font-family: var(--font-ui);
  font-size: 14px;
  color: rgba(44, 36, 34, 0.7);
}
.hss-footer__menu a:hover,
.hss-footer__legal-menu a:hover { color: var(--color-ink-deep); }

.hss-footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--color-hairline-cloud);
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(44, 36, 34, 0.55);
}
.hss-footer__copy { margin: 0; }
.hss-footer__legal-menu a { font-size: 13px; }

@media (max-width: 960px) {
  .hss-footer__cols {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .hss-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .hss-footer__inner { padding-top: 40px; }
  .hss-footer__base { justify-content: flex-start; }
}

/* =============================================================
   Welcome offer popup
   ============================================================= */
.hss-offer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  visibility: hidden;
  pointer-events: none;
}
.hss-offer.is-open { visibility: visible; pointer-events: auto; }

.hss-offer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(44, 36, 34, 0.55);
  opacity: 0;
  transition: opacity var(--dur-mid) ease;
}
.hss-offer.is-open .hss-offer__scrim { opacity: 1; }

.hss-offer__box {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 2 * var(--space-lg));
  overflow-y: auto;
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  background: #fdeef1;
  border: 1px solid #f0d9de;
  border-radius: var(--radius-xxl);
  box-shadow: var(--elevation-2);
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) ease;
}
.hss-offer.is-open .hss-offer__box { transform: none; opacity: 1; }

.hss-offer__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--color-ink-deep);
  font-size: 26px;
  line-height: 1;
  border-radius: var(--radius-full);
  transition: background var(--dur-fast) ease;
}
.hss-offer__close:hover { background: rgba(44, 36, 34, 0.08); }

.hss-offer__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-violet);
}
.hss-offer__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink-deep);
}
.hss-offer__sub {
  margin: 14px 0 24px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(44, 36, 34, 0.68);
}

.hss-offer__form { display: flex; flex-direction: column; gap: 10px; }
.hss-offer__input {
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid var(--color-hairline-violet);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-ink-deep);
}
.hss-offer__input:focus { outline: none; box-shadow: var(--shadow-input-focus); }
.hss-offer__submit { width: 100%; justify-content: center; }

.hss-offer__error {
  margin: 12px 0 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-error);
}

/* ---- Success state ---- */
.hss-offer__successlead {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-violet);
}
.hss-offer__code {
  display: flex;
  align-items: stretch;
  gap: 8px;
  justify-content: center;
}
.hss-offer__code code {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border: 2px dashed var(--color-accent-pink);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-ink-deep);
}
.hss-offer__copy {
  flex: 0 0 auto;
  padding: 0 18px;
  border: 1px solid var(--color-ink-deep);
  border-radius: var(--radius-md);
  background: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-deep);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.hss-offer__copy:hover { background: var(--color-ink-deep); color: #fff; }

.hss-offer__fineprint {
  margin: 14px 0 20px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(44, 36, 34, 0.6);
}
.hss-offer__shop { width: 100%; justify-content: center; }

.hss-offer__optout { margin: 16px 0 0; }
.hss-offer__nothanks {
  border: none;
  background: none;
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(44, 36, 34, 0.55);
  text-decoration: underline;
  cursor: pointer;
}
.hss-offer__nothanks:hover { color: var(--color-ink-deep); }

@media (prefers-reduced-motion: reduce) {
  .hss-offer__box, .hss-offer__scrim { transition: none; }
}
@media (max-width: 400px) {
  .hss-offer__code { flex-direction: column; }
  .hss-offer__copy { padding: 12px 18px; }
}

/* =============================================================
   Horizontal rails

   Shared by the home carousels and the product-page video slider, so they
   live here rather than in home.css.
   ============================================================= */
.hss-railhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.hss-railhead__arrows { display: flex; gap: 8px; }

.hss-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-hairline-cloud);
  background: #fff;
  color: var(--color-ink-deep);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.hss-arrow:hover { background: var(--color-ink-deep); color: #fff; }
.hss-arrow:active { transform: scale(0.94); }

.hss-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 20px;
  overflow-x: auto;
  margin-top: 40px;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Full-bleed variant: the rail spans the viewport, but the first card still
   lines up with the container edge and the last one runs off-screen. */
.hss-rail--bleed {
  --hss-gutter: max(var(--container-pad), (100vw - var(--container-max)) / 2);
  padding-inline: var(--hss-gutter);
  scroll-padding-inline-start: var(--hss-gutter);
}
.hss-rail > * { scroll-snap-align: start; }

/* =============================================================
   Product card
   ============================================================= */
.hss-pcard {
  display: flex;
  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-pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-2);
}

.hss-pcard__link { display: flex; flex-direction: column; width: 100%; color: inherit; }
.hss-pcard__link:hover { color: inherit; }

.hss-pcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fdeef1;
  border-bottom: 1px solid var(--color-hairline-violet);
  overflow: hidden;
}
.hss-pcard__zoom {
  position: absolute;
  inset: 0;
  transition: transform 500ms var(--ease-out);
}
.hss-pcard:hover .hss-pcard__zoom { transform: scale(1.04); }
.hss-pcard__zoom img { width: 100%; height: 100%; object-fit: cover; }

/* Pills sit above the zoom layer so they do not scale with it. */
.hss-pcard__off,
.hss-pcard__final {
  position: absolute;
  top: 16px;
  z-index: 2;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.hss-pcard__off {
  left: 16px;
  background: #f9c9d6;
  color: #2c2422;
}
.hss-pcard__final {
  right: 16px;
  background: #241d1b;
  color: #fff;
}

.hss-pcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  flex: 1;
}
.hss-pcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink-deep);
}
.hss-pcard__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);
}
.hss-pcard__prices {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 8px;
}
.hss-pcard__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--color-ink-deep);
}
.hss-pcard__compare {
  font-family: var(--font-ui);
  font-size: 16px;
  color: rgba(44, 36, 34, 0.5);
}

/* ---- Product card: second image on hover --------------------
   Both images are stacked; the alt fades in over the primary.
   Only applied when a genuinely different second image exists
   (the .has-alt class), so a card never cross-fades to itself.
   ------------------------------------------------------------- */
.hss-pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hss-pcard__img--alt {
  opacity: 0;
  transition: opacity 350ms ease;
}
.hss-pcard__zoom.has-alt .hss-pcard__img--primary {
  transition: opacity 350ms ease;
}
.hss-pcard:hover .hss-pcard__zoom.has-alt .hss-pcard__img--alt,
.hss-pcard:focus-within .hss-pcard__zoom.has-alt .hss-pcard__img--alt { opacity: 1; }
.hss-pcard:hover .hss-pcard__zoom.has-alt .hss-pcard__img--primary,
.hss-pcard:focus-within .hss-pcard__zoom.has-alt .hss-pcard__img--primary { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hss-pcard__img--alt,
  .hss-pcard__zoom.has-alt .hss-pcard__img--primary { transition: none; }
}

/* Touch devices have no hover, so never hide the primary image. */
@media (hover: none) {
  .hss-pcard__img--alt { display: none; }
  .hss-pcard:hover .hss-pcard__zoom.has-alt .hss-pcard__img--primary { opacity: 1; }
}

@media (max-width: 400px) {
  .hss-pcard__off, .hss-pcard__final { font-size: 12px; padding: 6px 12px; top: 12px; }
  .hss-pcard__off { left: 12px; }
  .hss-pcard__final { right: 12px; }
  .hss-pcard__body { padding: 20px; }
}

/* -------------------------------------------------------------
   Brand glyphs

   Two-tone line icons drawn in the theme rather than uploaded, so
   they take their colours from the palette and stay sharp at any
   size. Blush fill, ink outline — the same relationship the
   illustrated icons elsewhere on the site use.
   ------------------------------------------------------------- */
.hss-gi {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.hss-gi__fill {
  fill: var(--color-accent-pink);
  stroke: none;
}

.hss-gi__line {
  fill: none;
  stroke: var(--color-ink-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The glyph sits in the same white chip an uploaded icon does. */
.hss-benefit__icon .hss-gi { padding: 16px; }

/* A drawn glyph in a contents tile sits in its own white chip. The extra
   selector outranks .hss-incl__icon in product.css, which loads later. */
.hss-incl .hss-incl__icon--glyph {
  display: grid;
  place-items: center;
  margin-inline: auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
}
.hss-incl .hss-incl__icon--glyph .hss-gi { width: 52px; height: 52px; }

/* =============================================================
   Mini-cart drawer

   WooCommerce's cart widget markup, styled. Left unstyled it renders
   as a bulleted list with full-width thumbnails and the remove link
   floating loose — which is exactly what it was doing.
   ============================================================= */

.hss-panel--right .hss-panel__body { padding: 0; gap: 0; }

.hss-panel--right .hss-panel__head {
  padding: 20px var(--space-xl);
  border-bottom: 1px solid var(--color-hairline-violet);
  flex: 0 0 auto;
}

/* The list scrolls; the totals and buttons stay put at the bottom. */
.hss-panel--right .widget_shopping_cart_content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.woocommerce-mini-cart {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 8px var(--space-xl);
}

/*
 * Woo nests the thumbnail inside the product link, so the grid is two levels:
 * the row places [ product link | remove ], and the link itself places
 * [ image | name ]. Quantity and variation sit under the name, indented to
 * clear the thumbnail.
 */
.woocommerce-mini-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
  gap: 6px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-hairline-violet);
}
.woocommerce-mini-cart-item:last-child { border-bottom: 0; }

.woocommerce-mini-cart-item > a:not(.remove) {
  grid-column: 1;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink-deep);
  text-decoration: none;
}
.woocommerce-mini-cart-item > a:not(.remove):hover { color: var(--color-accent-violet); }

.woocommerce-mini-cart-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  background: #fdeef1;
  float: none;
  margin: 0;
}

.woocommerce-mini-cart-item .quantity,
.woocommerce-mini-cart-item .variation {
  grid-column: 1;
  padding-left: 86px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-on-dark-muted);
}
.woocommerce-mini-cart-item .quantity .amount { color: var(--color-ink-deep); font-weight: 600; }

.woocommerce-mini-cart-item .variation { font-size: 12.5px; }
.woocommerce-mini-cart-item .variation dt,
.woocommerce-mini-cart-item .variation dd { display: inline; margin: 0; }
.woocommerce-mini-cart-item .variation dd { margin-right: 8px; }
.woocommerce-mini-cart-item .variation p { margin: 0; display: inline; }

/* Woo positions this absolutely by default; the grid gives it a real column. */
.woocommerce-mini-cart-item a.remove,
.woocommerce-mini-cart-item a.remove_from_cart_button {
  position: static;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fdeef1;
  color: var(--color-ink-deep);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.woocommerce-mini-cart-item a.remove:hover {
  background: var(--color-ink-deep);
  color: #fff;
}

.woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 40px var(--space-xl);
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-on-dark-muted);
  text-align: center;
}

.woocommerce-mini-cart__total {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 18px var(--space-xl);
  border-top: 1px solid var(--color-hairline-violet);
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-on-dark-muted);
}
.woocommerce-mini-cart__total strong { font-weight: 600; color: var(--color-ink-deep); }
.woocommerce-mini-cart__total .amount {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-ink-deep);
}

.woocommerce-mini-cart__buttons {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 var(--space-xl) var(--space-xl);
}

/* Woo's own .button classes, wearing our buttons. */
.woocommerce-mini-cart__buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid var(--color-ink-deep);
  background: #fff;
  color: var(--color-ink-deep);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.woocommerce-mini-cart__buttons .button:hover {
  background: var(--color-ink-deep);
  color: #fff;
  transform: translateY(-1px);
}

/* Checkout is the primary action, so it gets the gradient. */
.woocommerce-mini-cart__buttons .checkout {
  order: -1;
  border: 0;
  background: linear-gradient(100deg, #ef8fb0 0%, #e0709a 55%, #d4568b 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(212, 86, 139, 0.28);
}
.woocommerce-mini-cart__buttons .checkout:hover {
  background: linear-gradient(100deg, #e97ea4 0%, #d9628f 55%, #c74a80 100%);
  color: #fff;
}

/* =============================================================
   Long-form prose

   Used by the legal and policy pages. It lives here rather than in
   shop-pages.css because plain pages never load that file — which is
   why these pages were rendering with no typography at all, at a
   hundred-plus characters per line.
   ============================================================= */

.hss-page-head {
  margin-bottom: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(20px, 3vw, 28px);
  border-bottom: 1px solid var(--color-hairline-violet);
}
.hss-page-head .hss-display {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink-deep);
}

.hss-prose {
  /* Around 70 characters — the width people actually read at. */
  max-width: 68ch;
  font-family: var(--font-ui);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--color-ink);
}

/* Reset first, then space siblings. Both selectors are (0,1,0) so source
   order decides — a `.hss-prose p` reset would outrank the sibling rule and
   silently remove every gap. */
.hss-prose > * { margin: 0; }
.hss-prose > * + * { margin-top: 1.1em; }

.hss-prose h2,
.hss-prose h3,
.hss-prose h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink-deep);
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}
.hss-prose h2 { font-size: clamp(22px, 2.6vw, 28px); }
.hss-prose h3 { font-size: clamp(18px, 2vw, 21px); }
.hss-prose h4 { font-size: 17px; }
.hss-prose > h2:first-of-type { margin-top: 0.6em; }


.hss-prose a {
  color: var(--color-accent-violet);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hss-prose a:hover { color: var(--color-accent-violet-deep); }

.hss-prose ul,
.hss-prose ol {
  margin: 1.1em 0 0;
  padding-left: 1.35em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.hss-prose li { padding-left: 0.15em; }
.hss-prose li::marker { color: var(--color-accent-pink); }

.hss-prose strong { font-weight: 600; color: var(--color-ink-deep); }

.hss-prose blockquote {
  margin: 1.6em 0 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-accent-pink);
  font-size: 17px;
  color: var(--color-on-dark-muted);
}

.hss-prose img { border-radius: var(--radius-lg, 14px); }

.hss-prose hr {
  margin: 2em 0 0;
  border: 0;
  border-top: 1px solid var(--color-hairline-violet);
}

.hss-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.hss-prose th,
.hss-prose td {
  padding: 10px 12px;
  border: 1px solid var(--color-hairline-violet);
  text-align: left;
}
.hss-prose th { background: #fdeef1; font-weight: 600; color: var(--color-ink-deep); }

/* Woo's own pages set their own width, so they opt out of the measure. */
.woocommerce-cart .hss-prose,
.woocommerce-checkout .hss-prose,
.woocommerce-account .hss-prose { max-width: none; }

/* -------------------------------------------------------------
   Bands
   Full-width alternating surfaces. These three live here rather than
   in product.css because plain pages (the legal set) need them too,
   and product.css is only enqueued on product views — the same
   "styles stranded in a page-specific sheet" trap that left the rails
   and .hss-prose unstyled.
   ------------------------------------------------------------- */
.hss-band { width: 100%; }
.hss-band--light { background: #fff; }
.hss-band--pale  { background: var(--color-surface-canvas); }
/* On a banded page the head owns the blush band, so it carries its own
   vertical rhythm and drops the divider — the band edge is the divider. */
.hss-page .hss-page-head {
  margin-bottom: 0;
  padding-block: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
  border-bottom: 0;
}
.hss-page .hss-page-head .hss-display { text-align: center; }
.hss-page-body { padding-block: clamp(40px, 6vw, 72px); }

/* Centre the reading column in its band rather than letting the 68ch
   measure hang off the left rail. */
.hss-page-body.hss-prose { margin-inline: auto; }

/* Shared honeypot. Off-screen rather than display:none, which some bots skip.
   Lives here because the newsletter card appears on the front page, and
   pages.css (where the contact form's own honeypot rule sits) is not loaded
   there — an unstyled honeypot is a visible "Website" box asking to be filled. */
.hss-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Newsletter result message. */
.hss-newsletter__notice {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-size: 14px;
}
.hss-newsletter__notice.is-ok { color: #1c7a4a; }
.hss-newsletter__notice.is-error { color: #b3261e; }

/* -------------------------------------------------------------
   Side Cart for WooCommerce (xoo-wsc)
   The plugin prints its own floating basket and drawer on every page,
   duplicating this theme's header cart and its slide-out panel. Hidden
   rather than deactivated because the plugin still supplies the cart
   drawer on the live Astra site; deactivate it at cutover, after which
   this block can go.
   ------------------------------------------------------------- */
/* The `body` prefix and the [style] variant are both load-bearing: the plugin
   ships `.xoo-wsc-basket[style*="block"] { display: flex !important }` and sets
   that inline style from JS, so a bare `.xoo-wsc-basket` rule loses on
   specificity (0,1,0 against 0,2,0) even with !important. */
body .xoo-wsc-basket,
body .xoo-wsc-basket[style],
body .xoo-wsc-modal,
body .xoo-wsc-container,
body .xoo-wsc-opac {
  display: none !important;
}

/* =============================================================
   Bag drawer — item count, free-shipping note, quantity steppers,
   cross-sell rail and the reassurance strip.
   ============================================================= */

.hss-bag__count {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px var(--space-xl) 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.hss-bag__ship {
  flex: 0 0 auto;
  margin: 14px 0 0;
  padding: 11px var(--space-xl);
  background: #f7dbe1;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--color-ink-deep);
}

/* Three columns: image, body, remove. */
.hss-panel .woocommerce-mini-cart-item {
  grid-template-columns: 72px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: start;
}
.hss-bagitem__media img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-md); }
.hss-bagitem__body { min-width: 0; }

.hss-bagitem__title {
  display: block;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink-deep);
  text-decoration: none;
}

.hss-bagitem__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.hss-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-hairline-violet);
  border-radius: 999px;
}
.hss-qty__btn {
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: var(--color-ink-deep);
  cursor: pointer;
  border-radius: 50%;
}
.hss-qty__btn:hover { background: #fdeef1; }
.hss-qty__n { min-width: 24px; text-align: center; font-family: var(--font-ui); font-size: 14px; font-weight: 700; }

.hss-bagitem__price { margin: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-ui); }
.hss-bagitem__price ins { text-decoration: none; font-weight: 700; color: var(--color-ink-deep); }
.hss-bagitem__price del { font-size: 13px; color: var(--color-on-dark-muted); }

/* Cross-sells. Scrolls sideways inside the drawer rather than stretching it. */
.hss-bag__upsell { flex: 0 0 auto; padding: 18px var(--space-xl) 0; border-top: 1px solid var(--color-hairline-violet); }
.hss-bag__upsellhead {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.hss-bag__upsellrail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 190px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.hss-upcard {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  background: #fdeef1;
  border-radius: var(--radius-lg);
}
.hss-upcard__media img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-md); }
.hss-upcard__title {
  display: block;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink-deep);
  text-decoration: none;
}
.hss-upcard__price { margin: 4px 0 8px; font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-deep); }
.hss-upcard__price del { color: var(--color-on-dark-muted); margin-right: 5px; }
.hss-upcard__price ins { text-decoration: none; font-weight: 700; }
.hss-upcard__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-ink-deep);
  border-radius: 999px;
  background: none;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-deep);
  text-decoration: none;
  cursor: pointer;
}
.hss-upcard__add:hover { background: var(--color-ink-deep); color: #fff; }
.hss-upcard__add[disabled] { opacity: 0.5; cursor: default; }

.hss-bag__foot { flex: 0 0 auto; }

/* One route out of the drawer, and it is the dark full-width one. */
.hss-panel .hss-bag__checkout {
  background: var(--color-ink-deep);
  color: #fff;
  border: 0;
  font-size: 15px;
}
.hss-panel .hss-bag__checkout:hover { background: #000; color: #fff; }

.hss-bag__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 4px var(--space-xl) var(--space-xl);
  list-style: none;
}
.hss-bag__trustitem { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.hss-bag__trusticon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fdeef1;
  color: var(--color-accent-violet);
}
.hss-bag__trusticon svg { width: 18px; height: 18px; }
.hss-bag__trusttext {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

/* Dim the drawer while a cart request is in flight. */
.hss-panel.is-busy .hss-panel__body { opacity: 0.6; pointer-events: none; transition: opacity var(--dur-fast) ease; }

@media (max-width: 420px) {
  .hss-bag__trusttext { font-size: 9.5px; }
  .hss-bag__upsellrail { grid-auto-columns: 170px; }
}

/*
 * Corrections for the three-column bag row.
 *
 * The original mini-cart markup was two columns, and the remove link was
 * pinned to column 2 to sit beside the body. This layout has its own column
 * for it, so leaving that rule in place collided the link with the item body
 * and pushed the row's scroll width past the drawer — which is what put a
 * horizontal scrollbar across the whole panel.
 */
.hss-panel .woocommerce-mini-cart-item a.remove,
.hss-panel .woocommerce-mini-cart-item a.remove_from_cart_button {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}

/* The drawer scrolls vertically only; the cross-sell rail does its own
   horizontal scrolling inside. */
.hss-panel--right .hss-panel__body { overflow-x: hidden; }
.hss-panel .woocommerce-mini-cart { overflow-x: hidden; }
.hss-panel .widget_shopping_cart_content,
.hss-bag__upsell { min-width: 0; }

/* Variation lines under the title: one per row, muted, so the title reads as
   the title. Woo emits a <dl> whose dt/dd the shared mini-cart rule sets to
   display:inline, which ran "Color: Pink Plug Type: UK Plug" straight on from
   the product name. */
.hss-bagitem__body .variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 6px;
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-on-dark-muted);
}
.hss-bagitem__body .variation dt {
  grid-column: 1;
  display: block;
  margin: 0;
  font-weight: 600;
}
.hss-bagitem__body .variation dd {
  grid-column: 2;
  display: block;
  margin: 0;
}
.hss-bagitem__body .variation dd p { margin: 0; }

/* A slim rail scrollbar rather than the platform default, which is taller
   than the gap it sits in. */
.hss-bag__upsellrail::-webkit-scrollbar { height: 4px; }
.hss-bag__upsellrail::-webkit-scrollbar-thumb { background: var(--color-hairline-violet); border-radius: 999px; }
.hss-bag__upsellrail::-webkit-scrollbar-track { background: transparent; }

/* Keep the label on one line — the auto-sized column was breaking
   "Plug Type:" across two rows in the narrow drawer. */
.hss-bagitem__body .variation dt { white-space: nowrap; }

/* Drawer heading: "Your bag" with the live count beside it. */
.hss-bag__title { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.hss-bag__headcount {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.hss-bag__headcount.is-empty { display: none; }

/* -------------------------------------------------------------
   Checkout order review
   Woo's default table put its cells hard against the panel border.
   ------------------------------------------------------------- */
.hss-review__items { margin: 0; padding: 0; list-style: none; }
.hss-review__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-hairline-violet);
}
.hss-review__item:first-child { padding-top: 0; }

.hss-review__media { position: relative; }
.hss-review__media img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: #fdeef1;
}
/* Quantity badge on the corner of the thumbnail, as on the reference. */
.hss-review__qty {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-ink-deep);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
}

.hss-review__body { min-width: 0; }
.hss-review__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink-deep);
}
.hss-review__body .variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 6px;
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-on-dark-muted);
}
.hss-review__body .variation dt { grid-column: 1; display: block; margin: 0; font-weight: 600; white-space: nowrap; }
.hss-review__body .variation dd { grid-column: 2; display: block; margin: 0; }
.hss-review__body .variation dd p { margin: 0; }

.hss-review__price {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-ink-deep);
}

/* Totals keep the table element (gateway and shipping hooks emit rows into
   it) but lose the boxed-in look. */
.woocommerce .hss-review__totals,
.woocommerce table.hss-review__totals {
  width: 100%;
  margin: 18px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  border-collapse: collapse;
}
.woocommerce .hss-review__totals th,
.woocommerce .hss-review__totals td {
  padding: 10px 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: 14.5px;
  text-align: left;
  color: var(--color-ink);
}
.woocommerce .hss-review__totals td { text-align: right; font-weight: 600; color: var(--color-ink-deep); }
.woocommerce .hss-review__totals th { font-weight: 500; color: var(--color-on-dark-muted); text-transform: none; letter-spacing: 0; }
.woocommerce .hss-review__totals .order-total th,
.woocommerce .hss-review__totals .order-total td {
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline-violet);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink-deep);
}
.woocommerce .hss-review__totals ul#shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce .hss-review__totals ul#shipping_method li { margin: 0 0 6px; }

/* The reassurance strip is shared with the bag drawer; inside the review panel
   it needs no side padding of its own. */
.hss-review .hss-bag__trust { padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: 20px; }

@media (max-width: 420px) {
  .hss-review__item { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
  .hss-review__media img { width: 52px; height: 52px; }
}

/*
 * Drawer scrolling.
 *
 * Previously the item list was the only scroll area, with the cross-sells and
 * the footer taking fixed height either side of it. On a 720px-tall window
 * with three items that left the list 121px of a needed 478 — the bag itself
 * was the smallest thing in the bag. Now the whole column scrolls and only the
 * footer is pinned, so the items get their natural height and Checkout is
 * always reachable.
 */
.hss-panel--right .widget_shopping_cart_content {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.hss-panel .woocommerce-mini-cart {
  flex: none;
  overflow: visible;
  max-height: none;
}
.hss-bag__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--color-surface-canvas-light);
  border-top: 1px solid var(--color-hairline-violet);
}
/* The free-shipping note stays visible at the top of the scroll area. */
.hss-bag__ship {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-top: 0;
}

/*
 * Narrow-drawer robustness.
 *
 * At 375px the drawer is ~330px wide, and a 72px thumbnail plus the remove
 * button left the body column 158px. The quantity stepper was compressed to
 * 31px with 71px of buttons inside it, and the variation list's value column
 * collapsed to 27px so "UK Plug" broke across two lines. These sizes hold at
 * every width rather than only under a breakpoint.
 */
.hss-panel .woocommerce-mini-cart-item {
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  gap: 12px;
}
.hss-bagitem__media img { width: 64px; height: 64px; }

/* The stepper is a fixed control — it must never absorb the squeeze. */
.hss-qty { flex: 0 0 auto; }

/* When the row cannot fit stepper and price side by side, the price drops
   below rather than crushing either. */
.hss-bagitem__row { flex-wrap: wrap; row-gap: 10px; }
.hss-bagitem__price { flex: 0 1 auto; }

/* max-content keeps the label intact; minmax(0,1fr) lets the value use every
   remaining pixel instead of collapsing. */
.hss-bagitem__body .variation,
.hss-review__body .variation { grid-template-columns: max-content minmax(0, 1fr); }

/*
 * Bag stepper, under its own name.
 *
 * It was .hss-qty, which the product page's quantity control already owns —
 * product.css sizes those buttons 42x48 for a touch target beside Add to Cart,
 * and that leaked straight into the drawer and blew the little stepper out to
 * three times its width. Same markup, different job, different class.
 */
.hss-bagqty {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-hairline-violet);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.hss-bagqty__btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: var(--color-ink-deep);
  cursor: pointer;
}
.hss-bagqty__btn:hover { background: #fdeef1; }
.hss-bagqty__n {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
}

/* Woo's variation list carries a large inherited start padding, which indented
   the whole block clear of the product title it belongs to. */
.hss-bagitem__body .variation,
.hss-review__body .variation { padding: 0; }

/* Badge on the top-left of the thumbnail, matching the reference — on the
   right it overlapped the product title in the narrow summary column. */
.hss-review__qty { right: auto; left: -8px; }

/*
 * Order review is a table again (Woo's AJAX requires that root — see
 * review-order.php). The cell is a plain table-cell carrying no padding; the
 * grid lives on the div inside it.
 */
.woocommerce table.hss-review,
.woocommerce .hss-review {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  border-collapse: collapse;
}
.woocommerce .hss-review td.hss-review__cell {
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--color-hairline-violet);
  background: none;
  vertical-align: top;
}
.woocommerce .hss-review tbody tr:first-child td.hss-review__cell { padding-top: 0; }

.hss-review__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 0;
  border: 0;
}

/* Totals now live in the same table as the items. */
.woocommerce .hss-review tfoot th,
.woocommerce .hss-review tfoot td {
  padding: 10px 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: 14.5px;
  text-align: left;
  color: var(--color-ink);
}
.woocommerce .hss-review tfoot td { text-align: right; font-weight: 600; color: var(--color-ink-deep); }
.woocommerce .hss-review tfoot th { font-weight: 500; color: var(--color-on-dark-muted); text-transform: none; letter-spacing: 0; }
.woocommerce .hss-review tfoot tr:first-child th,
.woocommerce .hss-review tfoot tr:first-child td { padding-top: 18px; }
.woocommerce .hss-review .order-total th,
.woocommerce .hss-review .order-total td {
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline-violet);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink-deep);
}
.woocommerce .hss-review .hss-review__trustrow td { padding: 0; text-align: left; }
.hss-review__trustrow .hss-bag__trust { padding: 20px 0 0; }

/* shop_table sets overflow:hidden to clip its rounded corners; on the order
   review that also clipped the quantity badge, which sits deliberately outside
   the thumbnail's top-left corner. */
.woocommerce table.hss-review { overflow: visible; }

/* Cross-sell cards: keep them compact at narrow widths. A four-line product
   name pushed the button below the sticky footer, where it read as cut off. */
.hss-upcard__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hss-upcard__add { white-space: nowrap; }

/* -------------------------------------------------------------
   Footer social links and studio credit
   ------------------------------------------------------------- */
.hss-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.hss-social__link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-hairline-violet);
  border-radius: 50%;
  color: var(--color-ink-deep);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
              border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.hss-social__link svg { width: 18px; height: 18px; }
.hss-social__link:hover {
  background: var(--color-ink-deep);
  border-color: var(--color-ink-deep);
  color: #fff;
  transform: translateY(-2px);
}

/* Sits beside the copyright on wide screens, under it when there is no room. */
.hss-footer__credit { margin-left: 8px; }
.hss-footer__credit a {
  color: var(--color-ink-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-hairline-violet);
}
.hss-footer__credit a:hover { color: var(--color-accent-violet); border-bottom-color: currentColor; }

@media (max-width: 560px) {
  .hss-footer__credit { display: block; margin-left: 0; margin-top: 6px; }
}

/* -------------------------------------------------------------
   Brand logo
   The source file is 270x136, so height is what to constrain —
   width follows, and the intrinsic ratio keeps it from jumping
   as the image decodes.
   ------------------------------------------------------------- */
.hss-logo { display: block; width: auto; }
.hss-logo--header { height: 38px; }
.hss-logo--footer { height: 44px; }
.hss-logo--text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-ink-deep);
  height: auto;
}
.hss-header__brand { display: inline-flex; align-items: center; }
.hss-footer__logo { display: inline-flex; align-items: center; }

@media (max-width: 680px) {
  .hss-logo--header { height: 32px; }
}

/* -------------------------------------------------------------
   Search overlay
   Previously unstyled: the form fell to the top-left at its
   intrinsic width while the close button sat at the far right,
   which is what made the panel look broken.
   ------------------------------------------------------------- */
.hss-panel--top .hss-panel__body {
  padding: clamp(20px, 5vw, 48px) var(--space-xl) clamp(28px, 6vw, 56px);
  gap: 0;
}

.hss-panel--top .hss-panel__close {
  position: absolute;
  top: 14px;
  right: 14px;
  align-self: auto;
}

.hss-panel--top .hss-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: min(760px, 100%);
  margin-inline: auto;
}
.hss-panel--top .hss-search__input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--color-hairline-violet);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--color-ink-deep);
}
.hss-panel--top .hss-search__input:focus {
  outline: none;
  border-color: var(--color-accent-violet);
  box-shadow: var(--shadow-input-focus);
}
.hss-panel--top .hss-search__submit { flex: 0 0 auto; min-height: 54px; padding-inline: 28px; }

@media (max-width: 560px) {
  .hss-panel--top .hss-search__submit { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------------------------------------
   Header: centred navigation, logo stays left
   The nav is taken out of the flex flow and centred on the header
   itself, so its position does not shift as the logo or the action
   icons change width. Below 960px the nav is hidden and the burger
   takes over, so the absolute positioning never applies there.
   ------------------------------------------------------------- */
.hss-header__inner { position: relative; }

@media (min-width: 961px) {
  .hss-header__nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: 0 0 auto;
    margin-left: 0;
  }
  .hss-header__nav .hss-menu { justify-content: center; }
}

/* Larger logo in both places. */
.hss-logo--header { height: 48px; }
.hss-logo--footer { height: 58px; }

@media (max-width: 680px) {
  .hss-logo--header { height: 38px; }
}