/* ============================================================
   SKINGENIUS — Page-specific styles
   Styles used by a single page only. Anything reused across
   2+ pages belongs in skingenius-style.css instead.
   ============================================================ */

/* ============================================================
   HOME — Cover (Swiper, also rendered by displayBannerSliders)
   Full-bleed brand field. Popcorn #f8de8d carries ink at 12.39:1,
   so the whole first viewport is brand colour with no contrast cost.
   ============================================================ */
.sg-cover {
  position: relative;
  background: var(--sg-brand);
  overflow: hidden;
}

/* Soft field bloom — keeps a flat ground from reading as a dead rectangle. */
.sg-cover::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: min(760px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0) 70%);
  pointer-events: none;
}

.sg-cover__slide {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 40px);
  width: 100%;
  max-width: none;
  padding: clamp(36px, 6vw, 76px) var(--sg-gutter) 0;
}

.sg-cover__title {
  font-size: clamp(2.25rem, 8vw, var(--sg-fs-display));
  line-height: 1.02;
  margin: 0;
}

.sg-cover__line {
  display: block;
  transform: translateY(18px);
  animation: sg-rise 0.45s var(--sg-ease) forwards;
}

.sg-cover__line:nth-child(2) {
  animation-delay: 0.08s;
}

.sg-cover__line:nth-child(3) {
  animation-delay: 0.16s;
}

.sg-cover__line--accent {
  color: var(--sg-rose);
}

@keyframes sg-rise {
  to {
    transform: translateY(0);
  }
}

.sg-cover__standfirst {
  max-width: 44ch;
  margin: 24px 0 0;
  font-size: var(--sg-fs-lead);
  font-weight: 600;
  color: var(--sg-ink);
}

.sg-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* Image bleeds to the viewport edge; no rounded box, no card.
   min-width: 0 overrides the grid item's default auto-min-size — without
   it, the swiper's slide images (intrinsic width, not yet constrained by
   Swiper's own inline sizing) push this grid track out to content size,
   which blows the whole row out to Chromium's internal max layout width. */
.sg-cover__media {
  margin-inline: calc(var(--sg-gutter) * -1);
  align-self: end;
  min-width: 0;
  overflow: hidden;
}

.sg-cover__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center bottom;
}

.sg-cover .banner-dot-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-bottom: 18px;
}

/* ============================================================
   HOME — Promo popup (displayPopup(); shown once per session)
   Was unstyled — a bare promo image in a default Bootstrap modal,
   close button with no size/position/icon treatment at all.
   ============================================================ */
.bb-popup-modal .modal-dialog {
  max-width: 420px;
}

.bb-popup-modal .modal-content {
  position: relative;
  border: none;
  border-radius: var(--sg-r-xl);
  overflow: hidden;
  box-shadow: var(--sg-lift-lg);
}

.bb-popup-image {
  display: block;
  width: 100%;
  height: auto;
}

.btn-close-popup {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--sg-paper);
  color: var(--sg-ink);
  cursor: pointer;
  box-shadow: var(--sg-lift);
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease);
}

.btn-close-popup:hover {
  background: var(--sg-tosca-soft);
  color: var(--sg-tosca-deeper);
}

/* ============================================================
   HOME — Ticker
   Continuous ambient band. Decorative: every fact in it is stated
   in full elsewhere, and the strip is aria-hidden.
   ============================================================ */
.sg-ticker {
  overflow: hidden;
  padding: 14px 0;
  background: var(--sg-rose);
  border-block: 1px solid var(--sg-ink);
}

.sg-ticker__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: sg-ticker 34s linear infinite;
}

.sg-ticker:hover .sg-ticker__track {
  animation-play-state: paused;
}

.sg-ticker__item {
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-paper);
  white-space: nowrap;
}

/* Items with a redirect_url render as <a> — mouse-clickable, but tabindex="-1"
   since the track's aria-hidden parent keeps them out of the a11y tree. */
a.sg-ticker__item:hover {
  text-decoration: underline;
}

.sg-ticker__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sg-popcorn);
}

/* The track holds the list twice, so -50% is a seamless loop. */
@keyframes sg-ticker {
  to {
    transform: translateX(-50%);
  }
}

/* ============================================================
   HOME — Contents (the routine)
   Each step carries its own ground via --sg-step-bg, set inline
   in the view. The category name is always present as text, so
   colour here is decoration, not the only carrier.
   ============================================================ */
.sg-contents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}

.sg-contents li {
  max-width: none;
}

.sg-step {
  display: grid;
  grid-template-areas:
    "media"
    "index"
    "body";
  align-content: start;
  height: 100%;
  padding: 14px;
  background: var(--sg-step-bg, var(--sg-hairline));
  border-radius: var(--sg-r-lg);
  transition:
    transform var(--sg-fast) var(--sg-ease),
    box-shadow var(--sg-fast) var(--sg-ease);
}

/* Playable: the card lifts and cocks slightly, like a card being picked
   off the table. Alternate items tilt the other way so a row never
   leans as one block. */
.sg-step:hover,
.sg-step:focus-visible {
  transform: translateY(-6px) rotate(-1.5deg);
  box-shadow: var(--sg-lift-lg);
}

.sg-contents__item:nth-child(even) .sg-step:hover,
.sg-contents__item:nth-child(even) .sg-step:focus-visible {
  transform: translateY(-6px) rotate(1.5deg);
}

.sg-step:active {
  transform: translateY(-2px) scale(0.985);
  transition-duration: 0.08s;
}

/* The authored moment: the six steps deal themselves in, in order.
   The offset only exists once JS marks the list in-view, so with no JS
   (or no IntersectionObserver) the cards simply render in place. */
.sg-contents.is-dealing .sg-contents__item {
  transform: translateY(22px) rotate(-2deg);
  opacity: 0.001;
}

.sg-contents.is-dealt .sg-contents__item {
  animation: sg-deal 0.62s var(--sg-ease) both;
  animation-delay: calc(var(--sg-i, 0) * 70ms);
}

@keyframes sg-deal {
  from {
    transform: translateY(22px) rotate(-2deg);
    opacity: 0.001;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.sg-step__index {
  grid-area: index;
  margin-bottom: 4px;
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sg-ink);
  opacity: 0.55;
}

/* Square, not a circle — the photographs already carry their own shape. */
.sg-step__media {
  grid-area: media;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 14px;
  border-radius: var(--sg-r-sm);
  overflow: hidden;
}

.sg-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-step__body {
  grid-area: body;
  display: block;
}

.sg-step__name {
  display: block;
  font-family: var(--sg-display-face);
  font-size: var(--sg-fs-subtitle);
  font-weight: 700;
  color: var(--sg-ink);
  line-height: 1.2;
}

/* ============================================================
   HOME — Lead feature (film)
   Full-bleed stage: the poster spans the viewport, the heading
   stays in the container above it.
   ============================================================ */
.sg-feature {
  /* padding-block: var(--sg-section); */
  background: var(--sg-paper);
}

.sg-feature__head {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.sg-feature__stage {
  max-width: none;
  padding-inline: 0;
  /* Belt-and-suspenders alongside the .html()-not-replaceWith() fix in
     helper.js — keeps Chrome's scroll anchoring from reacting to the
     poster/iframe swap at all. Same reasoning applies to .postbox__video
     (SectionVideo.php, Landing page) — same click handler swaps into it. */
  overflow-anchor: none;
}

.postbox__video {
  overflow-anchor: none;
}

/* Gradient echoes the poster's own pink-to-lavender-to-blue wash, so the
   loading-state ground and the swapped-in embed's letterbox both blend
   into the image instead of flashing a flat neutral tan underneath it. */
.sg-feature__player {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--sg-orchid-soft),
    color-mix(in srgb, var(--sg-lavender) 40%, white),
    color-mix(in srgb, var(--sg-sky) 40%, white)
  );
}

.sg-feature__poster {
  display: block;
  width: 100%;
  /*aspect-ratio: 4 / 3;
  */
  object-fit: contain;
  transition: transform var(--sg-hover) var(--sg-ease);
}

.sg-feature__player:hover .sg-feature__poster {
  transform: scale(1.02);
}

/* Swapped in for any YouTube trigger on click (helper.js) — plays inline
   in the clicked element's own slot rather than a lightbox. Generic 16:9
   by default; .sg-feature__stage overrides to match .sg-feature__poster's
   own aspect-ratio steps so nothing reflows when it replaces the poster. */
.sg-video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

.sg-feature__stage .sg-video-embed {
  aspect-ratio: 4 / 3;
}

.sg-feature__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(76px, 11vw, 116px);
  height: clamp(76px, 11vw, 116px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sg-rose);
  border: 2px solid var(--sg-paper);
  color: #fff;
  box-shadow: var(--sg-lift-lg);
  transition: transform var(--sg-fast) var(--sg-ease);
}

.sg-feature__player:hover .sg-feature__play {
  transform: scale(1.07);
}

.sg-feature__cue {
  position: absolute;
  left: var(--sg-gutter);
  bottom: var(--sg-gutter);
  background: var(--sg-brand);
  color: var(--sg-ink);
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--sg-edge);
  border-radius: var(--sg-r-pill);
}

/* ============================================================
   HOME — Product band skeletons
   Widths mirror the slidesPerView breakpoints in HomeView-JS
   (1 / 2 / 3 / 4) so nothing reflows when products land.
   ============================================================ */
.sg-skeleton-slide {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  padding-right: 15px;
}

@media (min-width: 576px) {
  .sg-skeleton-slide {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .sg-skeleton-slide {
    width: 33.3333%;
  }
}

@media (min-width: 1200px) {
  .sg-skeleton-slide {
    width: 25%;
  }
}

/* ============================================================
   HOME — Journal
   ============================================================ */
/* auto-fit + 1fr: the tracks always divide the row exactly, whatever the
   article count. The previous 3-column grid with a full-width lead left an
   empty third cell whenever the feed returned three items. */
.sg-journal {
  padding: 20px 0 0;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.sg-article__link {
  display: grid;
  gap: 14px;
  height: 100%;
}

.sg-article__media {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--sg-r-lg);
  overflow: hidden;
  background: var(--sg-hairline);
}

.sg-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sg-hover) var(--sg-ease);
}

.sg-article__link:hover .sg-article__media img {
  transform: scale(1.04);
}

.sg-article__title {
  font-size: var(--sg-fs-title);
  color: var(--sg-ink);
  margin: 0;
  transition: color var(--sg-fast) var(--sg-ease);
}

.sg-article__link:hover .sg-article__title {
  color: var(--sg-tosca-deeper);
}

.sg-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
}

/* ============================================================
   HOME — Verified + back page
   ============================================================ */
.sg-verified {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

.sg-verified .sg-standfirst {
  color: var(--sg-ink);
}

.sg-verified__text .sg-textlink {
  margin-top: 18px;
}

.sg-verified__mark {
  background: var(--sg-paper);
  border-radius: var(--sg-r-lg);
  padding: 24px;
  display: grid;
  place-items: center;
}

.sg-verified__mark img {
  max-height: 130px;
  width: auto;
  object-fit: contain;
}

.sg-backpage {
  display: grid;
  gap: 32px;
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--sg-hairline);
}

.sg-backpage__title {
  font-size: var(--sg-fs-title);
  margin: 0;
}

.sg-backpage__text {
  margin: 8px 0 0;
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
}

.sg-backpage__col {
  padding: clamp(22px, 3vw, 30px);
  background: var(--sg-step-bg, var(--sg-hairline));
  border: 1px solid var(--sg-edge);
  border-radius: var(--sg-r-lg);
}

.sg-backpage__text {
  color: var(--sg-ink);
  opacity: 0.8;
}

.sg-backpage__col .sg-btn {
  margin-top: 18px;
}

.sg-backpage__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
}

.sg-instagram {
  padding-top: clamp(28px, 4vw, 48px);
}

/* HOME — legacy sections still rendered by other routes */
.image-category-wrapper {
  display: block;
  flex: 1 1 160px;
  max-width: 220px;
  border-radius: var(--sg-r-lg);
  overflow: hidden;
  transition: transform var(--sg-fast) var(--sg-ease);
}

.image-category-wrapper:hover {
  transform: translateY(-4px);
}

.support-item {
  height: 100%;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--sg-r-xl);
  background: var(--sg-hairline);
}

.support-item.is-light-yellow {
  background: var(--sg-popcorn);
}

.support-item.is-pale-pink {
  background: var(--sg-tosca);
}

.support-content h3 {
  font-size: var(--sg-fs-title-lg);
  margin-bottom: 10px;
}

.support-content p {
  color: var(--sg-body);
}

/* ============================================================
   PRODUCT — Listing (sidebar + grid)
   ============================================================ */
.sg-shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.sg-sidebar {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: 24px;
}

.sg-sidebar-title {
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-ink);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sg-hairline);
}

.menu-category,
.show-product-categories {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-category li a,
.show-product-categories li a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: var(--sg-r-sm);
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-body);
}

.menu-category li a:hover,
.menu-category li a.active,
.show-product-categories li a:hover,
.show-product-categories li a.active {
  background: var(--sg-tosca-soft);
  color: var(--sg-tosca-deeper);
}

.sg-product-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

.sg-product-count {
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-body);
}

.sg-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 20px;
}

.sg-empty h3 {
  font-size: var(--sg-fs-title);
  margin-bottom: 8px;
}

.sg-empty p {
  margin-inline: auto;
  color: var(--sg-body);
}

@media (min-width: 992px) {
  .sg-shop-layout {
    grid-template-columns: 260px 1fr;
  }
}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.sg-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.sg-detail-gallery {
  border-radius: var(--sg-r-xl);
  overflow: hidden;
  background: var(--sg-hairline);
}

.sg-detail-gallery img,
.show-product-gallery img {
  width: 100%;
  object-fit: cover;
}

.product__details-title,
.sg-detail-title {
  font-size: clamp(1.75rem, 4vw, var(--sg-fs-headline));
  margin: 0 0 12px;
}

.sg-detail-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.sg-detail-price .price-main {
  font-size: var(--sg-fs-headline);
  font-weight: 800;
  color: var(--sg-tosca-deeper);
}

.sg-detail-price .price-was {
  font-size: var(--sg-fs-lead);
  color: var(--sg-muted);
  text-decoration: line-through;
}

.sg-detail-brief {
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
  line-height: 1.75;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--sg-hairline);
  overflow-wrap: break-word;
}

.sg-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sg-detail-meta-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--sg-fs-body);
}

.sg-detail-meta-item span {
  min-width: 92px;
  color: var(--sg-body);
  font-weight: 600;
}

.sg-detail-meta-item strong {
  color: var(--sg-ink);
}

.sg-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-pill);
  overflow: hidden;
}

.sg-qty button,
.cart-plus,
.cart-minus {
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  font-size: var(--sg-fs-subtitle);
  font-weight: 800;
  color: var(--sg-ink);
  cursor: pointer;
}

.sg-qty button:hover,
.cart-plus:hover,
.cart-minus:hover {
  background: var(--sg-hairline);
}

.sg-qty input,
.cart-input {
  width: 56px;
  min-height: 48px;
  border: none;
  text-align: center;
  font-size: var(--sg-fs-body);
  font-weight: 800;
  padding: 0;
}

@media (min-width: 992px) {
  .sg-detail-layout {
    grid-template-columns: 5fr 6fr;
  }
}

/* ============================================================
   BLOG / MEDIA
   ============================================================ */
.sg-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.sg-blog-card {
  display: grid;
  gap: 14px;
  height: 100%;
}

.sg-blog-card__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--sg-r-lg);
  overflow: hidden;
  background: var(--sg-hairline);
}

.sg-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sg-hover) var(--sg-ease);
}

.sg-blog-card:hover .sg-blog-card__media img {
  transform: scale(1.04);
}

.sg-blog-card__title {
  font-size: var(--sg-fs-title);
  color: var(--sg-ink);
  margin: 0;
}

.sg-blog-card__meta {
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
}

.sg-blog-detail {
  max-width: 74ch;
  margin-inline: auto;
}

.sg-blog-detail img {
  border-radius: var(--sg-r-lg);
}

.sg-blog-detail p,
.postbox__text p {
  font-size: var(--sg-fs-lead);
  line-height: 1.8;
  color: var(--sg-body);
}

.sg-blog-detail h2,
.sg-blog-detail h3 {
  margin-top: 1.6em;
}

/* ============================================================
   ABOUT
   ============================================================ */
.sg-about-lead {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}

.sg-about-lead p {
  font-size: var(--sg-fs-lead);
  margin-inline: auto;
}

.sg-about-figure {
  border-radius: var(--sg-r-xl);
  overflow: hidden;
  margin-bottom: 40px;
}

.sg-about-quote {
  background: var(--sg-tosca);
  border-radius: var(--sg-r-xl);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  margin: 40px 0;
}

.sg-about-quote p {
  font-family: var(--sg-display-face);
  font-size: clamp(1.25rem, 2.6vw, var(--sg-fs-title-lg));
  line-height: 1.4;
  color: var(--sg-ink);
  margin-inline: auto;
  max-width: 40ch;
}

/* ============================================================
   CONTACT
   ============================================================ */
.sg-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.sg-contact-card {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform var(--sg-fast) var(--sg-ease),
    box-shadow var(--sg-fast) var(--sg-ease);
}

.sg-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sg-lift);
  border-color: var(--sg-tosca-deep);
}

.sg-contact-card:focus-visible {
  outline: 2px solid var(--sg-ink);
  outline-offset: 3px;
}

/* Each card is a whole link now — keep the label ink, not link-blue. */
.sg-contact-card .sg-contact-label {
  color: var(--sg-ink);
}

.sg-contact-card:hover .sg-contact-label {
  color: var(--sg-tosca-deeper);
}

.sg-contact-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sg-r);
  background: var(--sg-tosca-soft);
  color: var(--sg-tosca-deeper);
  display: grid;
  place-items: center;
  font-size: var(--sg-fs-subtitle);
}

.sg-contact-label {
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-ink);
  margin: 0;
}

.sg-contact-value,
.sg-contact-value a {
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
  margin: 0;
}

.sg-map {
  border-radius: var(--sg-r-xl);
  overflow: hidden;
  margin-bottom: 40px;
}

.sg-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

@media (min-width: 576px) {
  .sg-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .sg-contact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============================================================
   FAQ
   ============================================================ */
.sg-faq {
  margin-inline: auto;
}

/* ============================================================
   AUTH — Login / Register / Reset / Renew / Activate
   ============================================================ */
.sg-auth {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sg-tosca-soft);
  padding: clamp(32px, 6vw, 72px) var(--sg-gutter);
}

.sg-auth-shell {
  width: 100%;
  max-width: 980px;
  background: var(--sg-paper);
  border-radius: var(--sg-r-xl);
  box-shadow: var(--sg-lift-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

.sg-auth-visual {
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--sg-brand);
  padding: 48px 36px;
  place-content: center;
  text-align: center;
}

/* Same soft bloom as the homepage cover — keeps a flat field from reading
   as a dead rectangle. */
.sg-auth-visual::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -18%;
  width: min(320px, 65%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0) 70%);
  pointer-events: none;
}

.sg-auth-visual h2 {
  position: relative;
  z-index: 1;
  font-size: var(--sg-fs-title-lg);
  margin-bottom: 10px;
}

.sg-auth-visual p {
  position: relative;
  z-index: 1;
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
  margin-inline: auto;
  max-width: 30ch;
}

.sg-auth-panel {
  padding: clamp(28px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sg-auth-title {
  font-size: var(--sg-fs-title-lg);
  text-align: center;
  margin-bottom: 8px;
}

.sg-auth-subtitle {
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
  text-align: center;
  margin-inline: auto;
  margin-bottom: 28px;
}

.sg-auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--sg-hairline);
  border-radius: var(--sg-r-pill);
  padding: 5px;
  margin-bottom: 26px;
}

.sg-auth-tab {
  flex: 1;
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--sg-r-pill);
  font-size: var(--sg-fs-body);
  font-weight: 800;
  color: var(--sg-body);
}

.sg-auth-tab.active {
  background: var(--sg-paper);
  color: var(--sg-ink);
  box-shadow: var(--sg-lift);
}

.sg-auth-switch {
  text-align: center;
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
  margin: 20px 0 0;
}

@media (min-width: 861px) {
  .sg-auth-shell {
    grid-template-columns: 1fr 1fr;
  }

  .sg-auth-visual {
    display: grid;
  }
}

/* ============================================================
   PROFILE — sidebar + panels
   ============================================================ */
.sg-profile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.sg-profile-nav {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: 16px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sg-profile-nav li {
  max-width: none;
}

.sg-profile-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--sg-r-sm);
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-body);
}

.sg-profile-nav a:hover,
.sg-profile-nav a.active {
  background: var(--sg-tosca-soft);
  color: var(--sg-tosca-deeper);
}

.sg-profile-panel {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: clamp(20px, 4vw, 32px);
}

@media (min-width: 992px) {
  .sg-profile-layout {
    grid-template-columns: 280px 1fr;
  }
}

/* ============================================================
   CART / CHECKOUT / PAYMENT
   ============================================================ */
.sg-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.sg-summary {
  background: var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: clamp(20px, 4vw, 28px);
}

.sg-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
  padding: 9px 0;
}

.sg-summary-row--total {
  border-top: 1px solid var(--sg-hairline);
  margin-top: 8px;
  padding-top: 16px;
  font-size: var(--sg-fs-subtitle);
  font-weight: 800;
  color: var(--sg-ink);
}

.sg-line-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sg-hairline);
}

.sg-line-item__media {
  width: 72px;
  aspect-ratio: 1;
  border-radius: var(--sg-r-sm);
  overflow: hidden;
  background: var(--sg-hairline);
}

.sg-line-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-line-item__name {
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-ink);
  margin: 0;
}

.sg-line-item__price {
  font-size: var(--sg-fs-body);
  font-weight: 800;
  color: var(--sg-tosca-deeper);
  white-space: nowrap;
}

/* Checkout progress — steps carry a number AND a label, never colour alone */
.c-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-bottom: 32px;
}

.c-stepper__item {
  flex: 1 1 140px;
  padding-top: 14px;
  border-top: 4px solid var(--sg-hairline);
  max-width: none;
}

.c-stepper__item.is-active {
  border-top-color: var(--sg-tosca-deep);
}

.c-stepper__title {
  font-size: var(--sg-fs-body);
  font-weight: 800;
  color: var(--sg-ink);
  margin: 0;
}

.c-stepper__desc {
  font-size: var(--sg-fs-micro);
  color: var(--sg-body);
  margin: 2px 0 0;
}

@media (min-width: 992px) {
  .sg-checkout-layout {
    grid-template-columns: 1fr 380px;
  }
}

/* ============================================================
   TRANSACTION / ORDER
   ============================================================ */
.sg-order-card {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.sg-order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sg-hairline);
}

/* Status: dot + word. The word is the signal; colour reinforces. */
.sg-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sg-fs-body);
  font-weight: 800;
}

.sg-status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.sg-status--paid {
  color: var(--sg-success);
}

.sg-status--pending {
  color: var(--sg-warning);
}

.sg-status--failed {
  color: var(--sg-danger);
}

/* ============================================================
   INVOICE — print
   ============================================================ */
@media print {
  .header-top-area,
  .header-4,
  .header-layout-4,
  .genius-footer,
  .backtotop-wrap,
  .sg-btn {
    display: none !important;
  }

  body {
    color: var(--sg-ink);
    background: #fff;
  }
}

/* ============================================================
   RESPONSIVE — mobile is the primary case
   ============================================================ */
@media (min-width: 576px) {
  .sg-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .sg-contents {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sg-backpage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .sg-verified {
    grid-template-columns: 1fr auto;
  }

  .sg-verified__mark {
    min-width: 280px;
  }
}

@media (min-width: 992px) {
  .sg-cover__slide {
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(24px, 3vw, 40px);
    padding-bottom: 0;
  }

  /* Column is narrower now the image owns most of the row — a headline
     sized for a wide column wraps badly here, so it's scaled down and
     tightened up rather than reusing the global clamp. */
  /* .sg-cover__title {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  } */

  .sg-cover__standfirst {
    margin-top: 14px;
  }

  .sg-cover__actions {
    margin-top: 18px;
  }

  /* Image bleeds off the right edge of the viewport. */
  .sg-cover__media {
    margin-inline: 0 calc(var(--sg-gutter) * -1);
  }

  .sg-feature__poster,
  .sg-feature__stage .sg-video-embed {
    aspect-ratio: 21 / 9;
  }

  .sg-contents {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }

  .sg-feature__grid {
    grid-template-columns: 0.85fr 1.35fr;
    align-items: center;
  }

  .sg-blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   HOME — pointer gating
   A touch tap fires :hover and the state STICKS until the next
   tap elsewhere, so a tapped card stays tilted. The primary user
   here is on a phone, so every decorative hover transform is
   reverted wherever hover is not a real capability. Colour and
   shadow feedback are left alone — only movement is removed.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .sg-step:hover,
  .sg-contents__item:nth-child(even) .sg-step:hover,
  .sg-feature__player:hover .sg-feature__poster,
  .sg-feature__player:hover .sg-feature__play,
  .sg-article__link:hover .sg-article__media img,
  .image-category-wrapper:hover,
  .sg-blog-card:hover .sg-blog-card__media img,
  .sg-contact-card:hover {
    transform: none;
  }
}

/* ============================================================
   HOME — reduced motion
   The global reset already shortens durations; these make the
   new ambient pieces resolve to a sensible static state rather
   than a jumped one.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sg-ticker__track {
    animation: none;
    transform: none;
  }

  .sg-contents .sg-contents__item {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .sg-step:hover,
  .sg-step:focus-visible,
  .sg-contents__item:nth-child(even) .sg-step:hover,
  .sg-feature__player:hover .sg-feature__poster,
  .sg-feature__player:hover .sg-feature__play,
  .sg-article__link:hover .sg-article__media img,
  .image-category-wrapper:hover,
  .sg-blog-card:hover .sg-blog-card__media img,
  .sg-contact-card:hover {
    transform: none;
  }
}

/* ============================================================
   PRODUCT — shop toolbar, filters, grid
   .button-filter-category / .genius-active are emitted by
   fetchCategories(). They were styled by the retired
   and had no rule after the CSS consolidation — this restores
   them on the design system's chip.
   ============================================================ */
.sg-shop__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sg-hairline);
}

.sg-chipbar {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* the row can scroll under the fade without clipping focus rings */
  padding: 4px 2px;
  margin: -4px -2px;
  -webkit-overflow-scrolling: touch;
}

.sg-chipbar::-webkit-scrollbar {
  display: none;
}

.button-filter-category {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-pill);
  background: var(--sg-paper);
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-rose-deep);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease),
    border-color var(--sg-fast) var(--sg-ease);
}

.button-filter-category:hover {
  border-color: var(--sg-rose-deep);
}

.button-filter-category.genius-active {
  background: var(--sg-rose);
  border-color: var(--sg-rose-deep);
  color: var(--sg-paper);
  font-weight: 800;
}

.sg-shop__search {
  position: relative;
}

.sg-shop__search .sg-input {
  padding-right: 48px;
}

.sg-shop__search-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--sg-muted);
  pointer-events: none;
}

.sg-shop__count {
  margin: 18px 0 24px;
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-body);
}

.sg-shop__count:empty {
  display: none;
}

/* Skeletons matching the card the JS injects into .filter_data */
.sg-skeleton-card {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: 14px;
}

.sg-skeleton--chip {
  height: 44px;
  border-radius: var(--sg-r-pill);
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .sg-shop__toolbar {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: center;
    gap: 24px;
  }
}

/* ============================================================
   PRODUCT DETAIL
   Gallery is Bootstrap tabs: displayProducts() emits .nav-link
   buttons into .show-product-detail-gallery-thumbnail and
   .tab-pane panels into .show-product-detail-gallery.
   ============================================================ */
.sg-pdp__crumbs {
  padding-top: 20px;
}

.sg-pdp__layout {
  display: grid;
  /* minmax(0,…) not 1fr: a bare 1fr track has an auto min-size equal to its
     content's min-content width, so the nowrap thumb strip below could not
     shrink and pushed the whole page wider than the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

/* --- gallery --- */
.sg-pdp__stage {
  aspect-ratio: 1;
  border-radius: var(--sg-r-xl);
  overflow: hidden;
  background: var(--sg-hairline);
}

.sg-pdp__stage .tab-pane,
.sg-pdp__stage .product__details-thumb-big {
  height: 100%;
}

.sg-pdp__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-pdp__gallery,
.sg-pdp__info {
  min-width: 0;
}

.sg-pdp__thumbs {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 0;
}

.sg-pdp__thumbs::-webkit-scrollbar {
  display: none;
}

.sg-pdp__thumbs .nav-link {
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r);
  overflow: hidden;
  background: var(--sg-hairline);
  cursor: pointer;
  transition: border-color var(--sg-fast) var(--sg-ease);
}

.sg-pdp__thumbs .nav-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-pdp__thumbs .nav-link:hover {
  border-color: var(--sg-popcorn);
}

/* Selected thumb is marked by a 2px ink edge, not colour alone. */
.sg-pdp__thumbs .nav-link.active {
  border-color: var(--sg-popcorn);
  border-width: 2px;
}

.sg-skeleton--stage {
  width: 100%;
  height: 100%;
  border-radius: var(--sg-r-xl);
}

.sg-skeleton--thumb {
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 1;
  border-radius: var(--sg-r);
}

/* --- buying information ---
   Holds buildProductBadges()'s .sg-badge spans (same helper.js used by the
   product cards) — appearance comes from the shared .sg-badge/.sg-badge--*
   rules in skingenius-style.css, this just wraps and spaces them. */
.sg-pdp__flags:empty {
  display: none;
}

.sg-pdp__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.sg-pdp__title {
  font-size: clamp(1.75rem, 4vw, var(--sg-fs-headline));
  margin: 0 0 14px;
}

.sg-pdp__price {
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-headline);
  font-weight: 800;
  color: var(--sg-rose);
  margin-bottom: 18px;
}

.sg-pdp__price del,
.sg-pdp__price .product-old-price {
  font-size: var(--sg-fs-lead);
  font-weight: 600;
  color: var(--sg-muted);
  margin-left: 10px;
}

.sg-pdp__brief {
  font-size: var(--sg-fs-body);
  line-height: 1.7;
  color: var(--sg-body);
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--sg-hairline);
  overflow-wrap: break-word;
}

.sg-pdp__brief:empty {
  display: none;
}

.sg-pdp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* --- meta --- */
.sg-pdp__meta {
  display: grid;
  gap: 10px;
  margin: 0;
}

.sg-pdp__meta-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.sg-pdp__meta dt {
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-body);
}

.sg-pdp__meta dd {
  margin: 0;
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-ink);
}

.sg-pdp__meta dd a {
  color: var(--sg-ink);
}

.sg-pdp__meta dd a:hover {
  color: var(--sg-tosca-deeper);
}

/* --- detail tabs --- */
.sg-pdp__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.sg-pdp__tab.nav-link {
  min-height: 44px;
  padding: 10px 22px;
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-pill);
  background: var(--sg-paper);
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-rose-deep);
  cursor: pointer;
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease),
    border-color var(--sg-fast) var(--sg-ease);
}

.sg-pdp__tab.nav-link:hover {
  border-color: var(--sg-rose);
}

/* Active tab inverts to ink — legible without colour. */
.sg-pdp__tab.nav-link.active {
  background: var(--sg-rose);
  border-color: var(--sg-rose-deep);
  color: var(--sg-paper);
  font-weight: 800;
}

.sg-prose {
  max-width: 75ch;
  font-size: var(--sg-fs-body);
  line-height: 1.75;
  color: var(--sg-body);
}

.sg-prose img {
  border-radius: var(--sg-r);
}

/* The description is API HTML — anything in it that is naturally wide must
   scroll or wrap inside the column rather than widen the page. */
.sg-prose,
.sg-pdp__brief {
  overflow-wrap: break-word;
}

.sg-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.sg-prose pre {
  max-width: 100%;
  overflow-x: auto;
}

.sg-pdp__specs {
  display: grid;
  gap: 0;
  margin: 0;
  max-width: 560px;
}

.sg-pdp__spec {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sg-rose);
}

.sg-pdp__spec dt {
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-body);
}

.sg-pdp__spec dd {
  margin: 0;
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-ink);
}

@media (min-width: 992px) {
  .sg-pdp__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
  }
}

/* ============================================================
   ABOUT
   ============================================================ */
.sg-about__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.sg-about__text .sg-btn {
  margin-top: 24px;
}

/* The brand promise, quoted verbatim from the footer. */
/* Emphasis from scale and weight, not a coloured side-tab. */
.sg-about__promise {
  margin: 20px 0 24px;
  padding: 0;
  font-family: var(--sg-display-face);
  font-size: clamp(1.25rem, 2.4vw, var(--sg-fs-title-lg));
  font-weight: 700;
  line-height: 1.35;
  color: var(--sg-ink);
  max-width: 34ch;
}

.sg-about__figure {
  margin: 0;
  border-radius: var(--sg-r-xl);
  overflow: hidden;
  background: var(--sg-hairline);
}

.sg-about__figure img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.sg-about__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}

.sg-about__fact {
  padding: clamp(20px, 3vw, 28px);
  background: var(--sg-step-bg, var(--sg-paper));
  border: 1px solid var(--sg-edge);
  border-radius: var(--sg-r-lg);
}

.sg-about__fact-title {
  font-size: var(--sg-fs-title);
  margin: 0 0 10px;
}

.sg-about__fact p {
  color: var(--sg-body);
  margin-bottom: 0;
}

.sg-about__fact .sg-textlink {
  margin-top: 16px;
}

.sg-about__fact-mark img {
  max-height: 96px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  .sg-about__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ============================================================
   BLOG — card link + skeleton
   displayBlogs() emits one <a> per card, so the whole card is the
   target rather than three separate links to the same article.
   ============================================================ */
.sg-blog-card__link {
  display: grid;
  gap: 14px;
  height: 100%;
  align-content: start;
}

.sg-blog-card__link:focus-visible {
  outline: 2px solid var(--sg-ink);
  outline-offset: 4px;
  border-radius: var(--sg-r-lg);
}

.sg-blog-card__title {
  transition: color var(--sg-fast) var(--sg-ease);
}

.sg-blog-card__link:hover .sg-blog-card__title {
  color: var(--sg-tosca-deeper);
}

.sg-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Image failed to load — keep the block, drop the broken-image icon. */
.sg-blog-card__media.is-empty {
  background: var(--sg-hairline);
}

.sg-skeleton--article {
  aspect-ratio: 3 / 2;
  border-radius: var(--sg-r-lg);
  margin-bottom: 4px;
}

/* ============================================================
   BLOG DETAIL
   A single measured column. Everything — header, figure, body,
   footer — shares one width so the eye never resets.
   ============================================================ */
.sg-post__head,
.sg-post__figure,
.sg-post__body,
.sg-post__foot {
  max-width: 68ch;
  margin-inline: auto;
}

.sg-post__head {
  margin-bottom: clamp(24px, 4vw, 36px);
}

.sg-post__head .sg-breadcrumbs {
  margin-bottom: 18px;
}

.sg-post__title {
  font-size: clamp(1.75rem, 4.4vw, var(--sg-fs-headline-lg));
  line-height: 1.12;
  margin: 0 0 14px;
}

.sg-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--sg-fs-body);
  font-weight: 600;
  color: var(--sg-body);
  margin: 0;
}

.sg-post__figure {
  /* 3-value shorthand: top | inline | bottom. Must keep `auto` on the inline
     axis — a `margin: 0 0 X` here silently overrode the margin-inline: auto
     above and left-aligned the figure inside the 68ch column. */
  margin: 0 auto clamp(28px, 4vw, 40px);
  border-radius: var(--sg-r-xl);
  overflow: hidden;
  background: var(--sg-hairline);
}

.sg-post__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* API HTML. Give the long-form defaults the theme used to supply. */
.sg-post__body {
  font-size: var(--sg-fs-lead);
  line-height: 1.8;
}

.sg-post__body h2,
.sg-post__body h3,
.sg-post__body h4 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

.sg-post__body h2 {
  font-size: var(--sg-fs-title-lg);
}

.sg-post__body h3 {
  font-size: var(--sg-fs-title);
}

.sg-post__body p {
  font-size: inherit;
  line-height: inherit;
  max-width: none;
}

.sg-post__body img {
  height: auto;
  border-radius: var(--sg-r-lg);
  margin-block: 1.2em;
}

.sg-post__body ul,
.sg-post__body ol {
  padding-left: 1.4em;
  margin-bottom: 1.2em;
  list-style: revert;
}

.sg-post__body li {
  max-width: none;
  margin-bottom: 0.4em;
}

.sg-post__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sg-post__body blockquote {
  margin: 1.6em 0;
  padding: 0;
  font-family: var(--sg-display-face);
  font-size: var(--sg-fs-title);
  font-weight: 700;
  line-height: 1.4;
  color: var(--sg-ink);
}

/* --- footer --- */
.sg-post__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--sg-hairline);
}

.sg-post__tags-label {
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-ink);
  margin: 0 0 12px;
}

.sg-post__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.sg-post__tag-list li {
  max-width: none;
}

.sg-tag--link {
  color: var(--sg-body);
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease);
}

.sg-tag--link:hover {
  background: var(--sg-ink);
  color: var(--sg-paper);
}

/* Auth is styled by the existing AUTH block above (.sg-auth, .sg-auth-shell,
   .sg-auth-visual, .sg-auth-panel, .sg-auth-tabs...). These are the pieces
   it didn't already cover: the wordmark and the password field's eye toggle. */
.sg-auth-logo {
  display: block;
  height: 20px;
  width: auto;
  margin: 0 auto 22px;
}

.sg-auth-password {
  position: relative;
}

.sg-auth-password .sg-input {
  padding-right: 48px;
}

.sg-auth-eye {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  width: 40px;
  background: none;
  border: none;
  color: var(--sg-muted);
  cursor: pointer;
  transition: color var(--sg-fast) var(--sg-ease);
}

.sg-auth-eye:hover {
  color: var(--sg-ink);
}

.sg-auth-forgot {
  text-align: right;
  margin: -8px 0 22px;
}

.sg-auth-forgot .sg-textlink {
  font-size: var(--sg-fs-micro);
}

.sg-policy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sg-policy p {
  margin: 0;
  font-size: var(--sg-fs-body);
  color: var(--sg-body);
}

.sg-policy input[type="checkbox"] {
  margin-top: 3px;
}

/* ============================================================
   ACTIVATE ACCOUNT — status plate
   No form; the plate carries the page. Loading is a soft tint (nothing
   resolved yet), success/error/info are confident solid colour — the same
   distinction the rest of the system draws between pending and decided.
   ============================================================ */
.sg-auth-panel--status {
  text-align: center;
}

.activate-status-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--sg-paper);
}

.activate-status-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

.activate-status-icon.is-loading {
  background: var(--sg-tosca-soft);
  color: var(--sg-tosca-deep);
  animation: sg-pulse 1.6s ease-in-out infinite alternate;
}

.activate-status-icon.is-success {
  background: var(--sg-success);
}

.activate-status-icon.is-error {
  background: var(--sg-danger);
}

.activate-status-icon.is-info {
  background: var(--sg-tosca-deep);
}

/* ============================================================
   FAQ — accordion (fetchFAQContent())
   .accordion-item/-header/-button/-collapse/collapse/show/-body are
   Bootstrap's own class names — its collapse plugin drives expand/
   collapse off them and FAQView-JS.php emits them verbatim, so only
   the look changes here, never the names. Bootstrap's own chevron
   icon (background-image, driven by --bs-accordion-btn-icon) is
   swapped for a plain border chevron so it can be recoloured with
   currentColor instead of fighting the icon custom properties.
   ============================================================ */
.sg-faq__container {
  max-width: 820px;
}

.sg-faq__accordion.accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sg-faq__accordion .accordion-item {
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  overflow: hidden;
}

.sg-faq__accordion .accordion-button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: var(--sg-paper);
  border: none;
  box-shadow: none;
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-lead);
  font-weight: 700;
  color: var(--sg-ink);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--sg-fast) var(--sg-ease),
    color var(--sg-fast) var(--sg-ease);
}

.sg-faq__accordion .accordion-button:hover {
  background: var(--sg-popcorn-soft);
}

.sg-faq__accordion .accordion-button:focus {
  box-shadow: none;
}

.sg-faq__accordion .accordion-button:not(.collapsed) {
  background: var(--sg-popcorn);
  color: var(--sg-ink);
}

.sg-faq__accordion .accordion-button::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 10px;
  height: 10px;
  background-image: none !important;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--sg-fast) var(--sg-ease);
}

.sg-faq__accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(-135deg);
}

.sg-faq__accordion .accordion-body {
  padding: 20px 24px 24px;
  background: var(--sg-paper);
  border-top: 1.5px solid var(--sg-hairline);
  font-size: var(--sg-fs-body);
  line-height: 1.65;
  color: var(--sg-body);
}

.sg-faq__accordion .accordion-body p:last-child {
  margin-bottom: 0;
}