/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
 

/* ActionText and Trix Editor Styles */
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: black;
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}

@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}

.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}

.trix-content li {
  margin-left: 1em;
}

.trix-content [dir=rtl] li {
  margin-right: 1em;
}

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

/* Custom Trix Toolbar Styling */
trix-toolbar {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

trix-toolbar .trix-button-group {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

trix-toolbar .trix-button {
  color: #495057;
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.125rem;
  transition: all 0.15s ease-in-out;
  position: relative;
}


trix-toolbar .trix-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
}

trix-toolbar .trix-button:hover {
  background: #e9ecef;
  color: #212529;
}

trix-toolbar .trix-button.trix-active {
  background: #007bff;
  color: white;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

trix-toolbar .trix-button:disabled {
  color: #6c757d;
  opacity: 0.5;
}

/* Custom Trix Editor Styling */
trix-editor {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 0.75rem;
  min-height: 200px;
  background: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

trix-editor:focus {
  border-color: #007bff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Custom Trix Content Styling */
.trix-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #212529;
}

.trix-content h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #212529;
}

.trix-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #212529;
}

.trix-content blockquote {
  border-left: 4px solid #007bff;
  padding-left: 1rem;
  margin: 1rem 0;
  color: #6c757d;
  font-style: italic;
}

.trix-content ul, .trix-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.trix-content li {
  margin-bottom: 0.25rem;
}

.trix-content a {
  color: #007bff;
  text-decoration: none;
}

.trix-content a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.trix-content code {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 0.875em;
}

.trix-content pre {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 0.875em;
  line-height: 1.4;
}


.blog-content .trix-content {
  font-size: 1.2rem !important;
}




/* ==========================================================================
   Gay Agenda: About page timeline
   Plain CSS (no Sass, no nesting) so it works with Propshaft, Sprockets,
   cssbundling or Tailwind's CSS entrypoint. Everything is scoped to
   .ga-timeline and themed through the custom properties below.
   No JavaScript required.
   ========================================================================== */

.ga-timeline {
  /* Brand palette (sampled from gayagenda.asia) */
  --ga-sky: #c8e9fc;
  --ga-sky-soft: #eaf6fe;
  --ga-ink: #1f2a30;
  --ga-text: #3d474d;
  --ga-slate: #455a61;
  --ga-line: rgb(31 42 48 / 0.12);
  --ga-orange: #d8712b;
  --ga-orange-text: #b85a1c;   /* orange darkened to pass WCAG AA as text on white */
  --ga-purple: #380d4b;
  --ga-yellow: #f4e96c;
  --ga-pink: #f3a6d7;
  --ga-white: #ffffff;

  /* Rainbow, same bands as the header stripe */
  --ga-red: #e22a25;
  --ga-amber: #e77f28;
  --ga-gold: #c9b52a;           /* header gold, deepened so it reads on sky blue */
  --ga-green: #40803d;
  --ga-blue: #1d70b7;
  --ga-violet: #802880;

  /* Type. Latin text uses the site font (Inter); CJK and Thai get their own
     stacks below so visitors never land on a random system fallback. */
  --ga-font-latin: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Geometry (mobile first) */
  --ga-rail: 1.75rem;          /* column holding the spine */
  --ga-col-gap: 0.75rem;       /* rail to card */
  --ga-spine: 0.375rem;
  --ga-node: 1.25rem;
  --ga-pad: 1.25rem;           /* card padding */
  --ga-year-size: 1.625rem;
  --ga-year-lh: 1.2;
  --ga-node-top: calc(var(--ga-pad) + var(--ga-year-size) * var(--ga-year-lh) / 2);
  --ga-radius: 1.5rem;         /* matches product cards */
  --ga-button-radius: 0.875rem;/* matches "See All Items" / "View Product" */
  --ga-gap: 2rem;              /* vertical space between milestones */

  /* Decorative clouds. To use the site's own cloud asset instead, override
     --ga-cloud from an .erb stylesheet or an inline style on the section. */
  --ga-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='70' cy='74' r='38'/%3E%3Ccircle cx='118' cy='52' r='48'/%3E%3Ccircle cx='170' cy='76' r='34'/%3E%3Crect x='32' y='74' width='176' height='46' rx='23'/%3E%3C/g%3E%3C/svg%3E");

  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
  color: var(--ga-text);
}

.ga-timeline *,
.ga-timeline *::before,
.ga-timeline *::after {
  box-sizing: border-box;
}

.ga-timeline__inner {
  max-width: 76rem;
  margin-inline: auto;
}

/* ---------- Header ---------- */

/* Left-aligned like the site's section headings on mobile; centred over
   the spine on desktop. */
.ga-timeline__header {
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
}

.ga-timeline__heading {
  margin: 0 0 1rem;
  color: var(--ga-ink);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

/* The header's rainbow stripe, in miniature */
.ga-timeline__heading::after {
  content: "";
  display: block;
  width: 6rem;
  height: 0.375rem;
  margin-block-start: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--ga-red) 0 16.66%, var(--ga-amber) 0 33.33%, #dccd3d 0 50%,
    var(--ga-green) 0 66.66%, var(--ga-blue) 0 83.33%, var(--ga-violet) 0);
}

.ga-timeline__intro {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- List, spine and dots ---------- */

.ga-timeline__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ga-timeline__item {
  --ga-accent: var(--ga-red);
  --ga-card-bg: var(--ga-sky-soft);
  --ga-link: var(--ga-orange-text);

  position: relative;
  padding-inline-start: calc(var(--ga-rail) + var(--ga-col-gap));
  padding-block-end: var(--ga-gap);
  scroll-margin-block-start: 6rem; /* clears a sticky site header on #anchor links */
}

/* Rainbow order, repeating every six milestones */
.ga-timeline__item:nth-child(6n + 2) { --ga-accent: var(--ga-amber); }
.ga-timeline__item:nth-child(6n + 3) { --ga-accent: var(--ga-gold); }
.ga-timeline__item:nth-child(6n + 4) { --ga-accent: var(--ga-green); }
.ga-timeline__item:nth-child(6n + 5) { --ga-accent: var(--ga-blue); }
.ga-timeline__item:nth-child(6n + 6) { --ga-accent: var(--ga-violet); }

/* Spine band: from this dot down past the next one. Later items paint over
   earlier ones, so each colour runs exactly from its dot to the next dot,
   giving solid rainbow bands like the header stripe. */
.ga-timeline__item::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: var(--ga-node-top);
  inset-block-end: calc(-1 * var(--ga-node-top));
  inset-inline-start: calc(var(--ga-rail) / 2 - var(--ga-spine) / 2);
  width: var(--ga-spine);
  background: var(--ga-accent);
}

.ga-timeline__item:last-child::before {
  inset-block-end: -1rem; /* stop inside the closing ring */
}

.ga-timeline__item::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: calc(var(--ga-node-top) - var(--ga-node) / 2);
  inset-inline-start: calc(var(--ga-rail) / 2 - var(--ga-node) / 2);
  width: var(--ga-node);
  height: var(--ga-node);
  border: 0.3125rem solid var(--ga-accent);
  border-radius: 50%;
  background: var(--ga-white);
  /* dark hairline keeps light colours (gold, amber) visible on sky blue */
  box-shadow: 0 0 0 1.5px rgb(31 42 48 / 0.4), 0 0 0 0.3125rem var(--ga-sky);
}

/* ---------- Card ---------- */

.ga-timeline__card {
  position: relative;
  padding: var(--ga-pad);
  border: 1px solid var(--ga-line);
  border-radius: var(--ga-radius);
  background: var(--ga-card-bg);
}

.ga-timeline__item--yellow { --ga-card-bg: var(--ga-yellow); --ga-link: var(--ga-purple); }
.ga-timeline__item--pink   { --ga-card-bg: var(--ga-pink);   --ga-link: var(--ga-purple); }

.ga-timeline__milestone-heading {
  margin: 0;
  color: var(--ga-ink);
}

.ga-timeline__year {
  display: block;
  font-size: var(--ga-year-size);
  font-weight: 700;
  line-height: var(--ga-year-lh);
  font-variant-numeric: tabular-nums;
}

.ga-timeline__title {
  display: block;
  margin-block-start: 0.375rem;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.ga-timeline__location {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0.75rem 0 0;
  padding: 0.25rem 0.75rem 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--ga-white);
  color: var(--ga-slate);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.ga-timeline__location::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ga-accent);
}

.ga-timeline__item--yellow .ga-timeline__location,
.ga-timeline__item--pink .ga-timeline__location {
  background: rgb(255 255 255 / 0.7);
  color: var(--ga-purple);
}

.ga-timeline__media {
  margin: 1rem 0 0;
}

.ga-timeline__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 1rem;
  background: var(--ga-sky-soft);
}

/* Per-milestone crop options (image_ratio / image_focus in about_timeline.yml) */
.ga-timeline__media--4x3 img { aspect-ratio: 4 / 3; }
.ga-timeline__media--1x1 img { aspect-ratio: 1 / 1; }
.ga-timeline__media--3x4 img { aspect-ratio: 3 / 4; }
.ga-timeline__media--original img { aspect-ratio: auto; object-fit: contain; }
.ga-timeline__media--focus-top img { object-position: center top; }
.ga-timeline__media--focus-bottom img { object-position: center bottom; }

.ga-timeline__text {
  margin-block-start: 0.875rem;
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.ga-timeline__item--yellow .ga-timeline__text,
.ga-timeline__item--pink .ga-timeline__text {
  color: var(--ga-ink);
}

.ga-timeline__text > * { margin: 0; }
.ga-timeline__text > * + * { margin-block-start: 0.75em; }
.ga-timeline__text strong { color: var(--ga-ink); font-weight: 700; }

.ga-timeline__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: 1rem;
  color: var(--ga-link);
  font-weight: 700;
  text-decoration: none;
}

.ga-timeline__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ga-timeline__arrow::before {
  content: "\2192";
  display: inline-block;
}

.ga-timeline__link:focus-visible,
.ga-timeline__cta:focus-visible {
  outline: 3px solid var(--ga-purple);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.ga-timeline__cta:focus-visible {
  border-radius: var(--ga-button-radius);
}

/* ---------- Outro ---------- */

.ga-timeline__outro {
  display: grid;
  grid-template-columns: var(--ga-rail) minmax(0, 1fr);
  column-gap: var(--ga-col-gap);
  align-items: start;
}

.ga-timeline__outro::before {
  content: "";
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--ga-white) 0 40%, transparent 41%),
    conic-gradient(var(--ga-red) 0 16.66%, var(--ga-amber) 0 33.33%, var(--ga-gold) 0 50%, var(--ga-green) 0 66.66%, var(--ga-blue) 0 83.33%, var(--ga-violet) 0);
  box-shadow: 0 0 0 0.25rem var(--ga-sky);
}

.ga-timeline__outro-text {
  margin: 0.125rem 0 1rem;
  color: var(--ga-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}

.ga-timeline__cta {
  justify-self: start;
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: var(--ga-button-radius);
  background: var(--ga-orange);
  color: var(--ga-white);
  font-size: 1.25rem;          /* 20px bold = WCAG "large text", so 3:1 applies */
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.ga-timeline__cta:hover {
  background: var(--ga-orange-text);
}

/* ---------- Desktop: two staggered columns ---------- */

@media (min-width: 56rem) {
  .ga-timeline {
    --ga-rail: 4rem;
    --ga-pad: 1.75rem;
    --ga-year-size: 2rem;
    --ga-gap: 2.5rem;
    background-size: 13rem auto, 15rem auto, 12rem auto, 14rem auto;
    background-position:
      left -4rem top 2rem,
      right -5rem top 1rem,
      left -3rem bottom 2rem,
      right -4rem bottom 4rem;
  }

  .ga-timeline__header { text-align: center; }
  .ga-timeline__heading::after { margin-inline: auto; }

  /* Each card spans two grid rows and every other card starts one row
     later, so left and right cards interleave by roughly half a card. */
  .ga-timeline__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ga-rail) minmax(0, 1fr);
    /* Rows size to content, so each card is offset from its neighbour by
       about half a card. The minimum stops dots bunching after short cards
       without leaving holes around tall ones. */
    grid-auto-rows: minmax(6rem, auto);
    row-gap: var(--ga-gap);
  }

  .ga-timeline__item {
    grid-column: 1;
    grid-row: span 2;
    padding: 0;
  }

  .ga-timeline__item:nth-child(even) { grid-column: 3; }
  .ga-timeline__item:nth-child(2) { grid-row: 2 / span 2; }

  .ga-timeline__item::before {
    inset-block-end: calc(-1 * (var(--ga-gap) + var(--ga-node-top)));
    inset-inline-start: auto;
    inset-inline-end: calc(-1 * var(--ga-rail) / 2 - var(--ga-spine) / 2);
  }

  .ga-timeline__item::after {
    inset-inline-start: auto;
    inset-inline-end: calc(-1 * var(--ga-rail) / 2 - var(--ga-node) / 2);
  }

  .ga-timeline__item:nth-child(even)::before {
    inset-inline-end: auto;
    inset-inline-start: calc(-1 * var(--ga-rail) / 2 - var(--ga-spine) / 2);
  }

  .ga-timeline__item:nth-child(even)::after {
    inset-inline-end: auto;
    inset-inline-start: calc(-1 * var(--ga-rail) / 2 - var(--ga-node) / 2);
  }

  /* The last two items both end on the final row: stop both bands inside
     the closing ring. */
  .ga-timeline__item:nth-last-child(-n + 2)::before {
    inset-block-end: calc(-1 * var(--ga-gap) - 1rem);
  }

  /* Pointer from the card to its dot */
  .ga-timeline__card::before {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--ga-node-top) - 0.5625rem);
    inset-inline-end: -0.625rem;
    width: 1.125rem;
    height: 1.125rem;
    border-block-start: 1px solid var(--ga-line);
    border-inline-end: 1px solid var(--ga-line);
    border-start-end-radius: 0.1875rem;
    background: var(--ga-card-bg);
    rotate: 45deg;
  }

  .ga-timeline__item:nth-child(even) .ga-timeline__card::before {
    inset-inline-end: auto;
    inset-inline-start: -0.625rem;
    border: 0;
    border-block-end: 1px solid var(--ga-line);
    border-inline-start: 1px solid var(--ga-line);
    border-radius: 0 0 0 0.1875rem;
  }

  .ga-timeline__title { font-size: 1.5rem; }
  .ga-timeline__text { font-size: 1.0625rem; }

  .ga-timeline__outro {
    grid-template-columns: 1fr;
    justify-items: center;
    margin-block-start: var(--ga-gap);
    text-align: center;
  }

  .ga-timeline__outro::before {
    grid-row: auto;
    margin-block-end: 1.25rem;
  }

  .ga-timeline__outro-text { font-size: 1.5rem; }
  .ga-timeline__cta { justify-self: center; }
}

/* Very small phones: tighter rail and padding to give text more room */
@media (max-width: 22.5rem) {
  .ga-timeline {
    --ga-rail: 1.25rem;
    --ga-col-gap: 0.5rem;
    --ga-pad: 1rem;
    --ga-node: 1.125rem;
  }
}

/* Narrow desktops: keep the heading clear of the top clouds */
@media (min-width: 56rem) and (max-width: 72rem) {
  .ga-timeline__header { padding-inline: 6rem; max-width: 56rem; }
}

/* Wide screens: extra clouds drift in the side gutters, clear of the cards */
@media (min-width: 88rem) {
  .ga-timeline {
    background-image: var(--ga-cloud), var(--ga-cloud), var(--ga-cloud), var(--ga-cloud), var(--ga-cloud), var(--ga-cloud);
    background-size: 13rem auto, 15rem auto, 12rem auto, 14rem auto, 9rem auto, 9rem auto;
    background-position:
      left -4rem top 2rem,
      right -5rem top 1rem,
      left -3rem bottom 2rem,
      right -4rem bottom 4rem,
      left -2.5rem top 45%,
      right -2.5rem top 65%;
  }
}

/* ---------- Language-specific typesetting ---------- */

.ga-timeline__nowrap { white-space: nowrap; }

/* Japanese / Chinese: strict kinsoku, no negative tracking */
.ga-timeline:lang(ja),
.ga-timeline:lang(zh) {
  line-break: strict;
}

/* Japanese: break display lines between phrases (Chromium 119+). Body text
   keeps normal breaking so paragraphs fill the measure. */
.ga-timeline:lang(ja) :is(.ga-timeline__heading, .ga-timeline__intro, .ga-timeline__title, .ga-timeline__outro-text) {
  word-break: auto-phrase;
}

/* Japanese: proportional kana in display type. Not applied to zh-TW, where
   punctuation should stay full-width and centred. */
.ga-timeline:lang(ja) :is(.ga-timeline__heading, .ga-timeline__title) {
  font-feature-settings: "palt";
}

/* Font stacks per script: system fonts first, then Noto if the site loads it */
.ga-timeline:lang(ja) {
  font-family: var(--ga-font-latin), "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", Meiryo, sans-serif;
}
.ga-timeline:lang(zh-TW) {
  font-family: var(--ga-font-latin), "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
}
.ga-timeline:lang(ko) {
  font-family: var(--ga-font-latin), "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", sans-serif;
}
.ga-timeline:lang(th) {
  font-family: var(--ga-font-latin), "Noto Sans Thai", "Noto Sans Thai UI", Thonburi, "Leelawadee UI", Tahoma, sans-serif;
}

/* Korean: wrap at spaces, not mid-word */
.ga-timeline:lang(ko) {
  word-break: keep-all;
}

/* Thai: taller line boxes for stacked vowels and tone marks */
.ga-timeline:lang(th) .ga-timeline__heading { line-height: 1.35; letter-spacing: 0; }
.ga-timeline:lang(th) .ga-timeline__title { line-height: 1.5; }
.ga-timeline:lang(th) :is(.ga-timeline__text, .ga-timeline__intro) { line-height: 1.85; }

/* ---------- Motion (only when the visitor hasn't asked for less) ---------- */

@media screen and (prefers-reduced-motion: no-preference) {
  .ga-timeline__arrow::before { transition: transform 0.2s ease; }
  .ga-timeline__link:hover .ga-timeline__arrow::before { transform: translateX(0.25rem); }

  .ga-timeline__cta { transition: background-color 0.2s ease, transform 0.2s ease; }
  .ga-timeline__cta:hover { transform: translateY(-2px); }

  /* Card contents fade up as each card scrolls into view. The card itself
     (and its dot and pointer) stays put, so nothing drifts off the spine.
     CSS scroll-driven animation, no JS; unsupported browsers show it all. */
  @supports (animation-timeline: view()) {
    .ga-timeline__card > * {
      animation: ga-timeline-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
  }
}

@keyframes ga-timeline-rise {
  from { opacity: 0; translate: 0 0.75rem; }
}

/* ---------- Accessibility helpers ---------- */

.ga-timeline__visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (forced-colors: active) {
  .ga-timeline__item::before { background: CanvasText; }
  .ga-timeline__item::after { border-color: CanvasText; }
  .ga-timeline__card { border-color: CanvasText; }
  .ga-timeline__card::before { display: none; }
}

@media print {
  .ga-timeline { background: none; padding-block: 1rem; }
  .ga-timeline__card { break-inside: avoid; }
  .ga-timeline__card::before { display: none; }
  .ga-timeline__card > * { animation: none !important; opacity: 1; translate: none; }
  .ga-timeline__item::before,
  .ga-timeline__item::after,
  .ga-timeline__outro::before,
  .ga-timeline__cta { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

  .product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  background: #fff;
  border: 1px solid #E2E8EC;
  border-radius: 1.5rem;
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(70, 90, 99, .14);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tile-bg, #F3F2EE);
  display: grid;
  place-items: center;
  padding: 6%;
}
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.product-card__badge {
  position: absolute;
  top: .9rem;
  left: .9rem;
  z-index: 2;
  padding: .2rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  transform: rotate(-4deg);
}
.product-card__badge--new     { background: #FBD3E4; color: #8A1C4A; }
.product-card__badge--saving  { background: #FFE38A; color: #6B4A00; }
.product-card__badge--feature { background: #BDEBD9; color: #0B5A42; }

.product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem 1rem 1rem;
}

.product-card__kicker {
  margin: 0;
  font-size: .75rem;
  color: #52616A;
}

.product-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: #1F2328;
  min-height: 1.35em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__name a,
.product-card__name a:hover {
  color: inherit;
  text-decoration: none;
}

.product-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-card__sizes li {
  font-size: .7rem;
  line-height: 1;
  padding: .3rem .4rem;
  color: #52616A;
  border: 1px solid #C5CED4;
  border-radius: .35rem;
}
.product-card__sizes li.is-out {
  color: #9AA6AE;
  border-style: dashed;
  border-color: #E2E8EC;
  text-decoration: line-through;
}
.product-card__size-range {
  display: none;
  margin: 0;
  font-size: .75rem;
  color: #52616A;
}

.product-card__foot {
  margin-top: auto;
  padding-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

.product-card__price {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1F2328;
  font-variant-numeric: tabular-nums;
}
.product-card__price.is-sale { color: #B4531A; }
.product-card__price s {
  margin-left: .35rem;
  font-size: .8rem;
  font-weight: 400;
  color: #6A7780;
}

.product-card__swatches {
  position: relative;
  z-index: 2;
  display: flex;
  gap: .4rem;
}
.product-card__swatch {
  width: .9rem;
  height: .9rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(31, 35, 40, .2);
  background: var(--swatch);
  cursor: pointer;
}
.product-card__swatch[style*="#fff"],
.product-card__swatch[style*="#FFF"] { border-color: #9AA6AE; }
.product-card__swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1F2328;
}
.product-card__swatch:focus-visible {
  outline: 2px solid #B4531A;
  outline-offset: 3px;
}


.product-card__price { font-size: 1.1rem; }
.product-card__price s { font-size: .75rem; }

.product-card__badge {
  top: .6rem;
  left: .6rem;
  padding: .15rem .55rem;
  font-size: .7rem;
}

.product-card__sizes li { font-size: .65rem; padding: .25rem .35rem; }

.product-card__price { color: #7A2C8C; }
.product-card__price.is-sale { color: #B4531A; }

@media (max-width: 575.98px) {
  .product-card__sizes { display: none; }
  .product-card__size-range { display: block; }
  .product-card__foot { flex-direction: column; align-items: flex-start; }
}