/* ============================================================================
   Single vs Double Station Wax Setting Machine (id_cms=11) — product-comparison
   additions to the shared `.gde` guide layout.
   ----------------------------------------------------------------------------
   Loaded from `cms/page.tpl` AFTER guide-premium.css, on this page only. Page 11
   is the second page on the `.gde` comparison-guide system (page 10, Automatic
   vs Manual, is the first), so the hero, stat band, split, comparison table,
   numbered steps, callout and FAQ cards all come from guide-premium.css
   unchanged. This file adds ONLY what a comparison of two PRODUCTS needs and a
   comparison of two METHODS does not.

   Everything here is scoped to `.gde--compare` or to a `cmp__` class, so the
   file is inert on page 10 and on every other CMS page even if it were ever
   loaded globally. Two prefixes on purpose: `gde__` is the shared system,
   `cmp__` is what this page adds on top of it.

   WHAT IT ADDS, AND WHY

   1. EQUAL WEIGHT FOR BOTH MACHINE COLUMNS. guide-premium.css deliberately
      mutes the second column to slate — on page 10 that column is "manual
      setting", the quieter option. Here the two columns are two machines this
      shop sells, and styling either as the loser would be both wrong and bad
      selling. Both columns get identical ink; a hairline separates them
      instead.

   2. THE VERDICT CARDS. A buyer landing on a "A vs B" page wants to leave for
      one of A or B. The live page linked to neither machine above the fold —
      its only outbound link was one inline `contact-us` in the last paragraph.
      Two cards carrying each machine's own cover image, three headline specs
      and a "choose it if" line answer the question before the table does.

   3. THE MOBILE COLUMN TOGGLE. `.gde__scroll` already stops the table
      compressing on a phone (min-width + horizontal scroll). That is correct
      but still cramped for a 14-row, 3-column table on a 390px screen, so
      compare-premium.js adds a Both / Pro Mini / X4 Pro Plus switch above it.
      The switch is an ENHANCEMENT: with JS off, the scroll wrapper is exactly
      what page 10 ships, and nothing is hidden.

   MARKUP CONSTRAINT (unchanged from the rest of the system): the body lives in
   the database and HTMLPurifier re-runs on every back-office save, stripping
   <section>, data-* and aria-*. Every rule, arrow and tick below is drawn in
   CSS; the toggle's <button>s and the scroll region's aria attributes are built
   in JS for the same reason.

   PALETTE: pink, white and the shared ink/muted tokens. No third colour — the
   two machines are distinguished by position and hairline, not by hue, because
   colour-coding one machine warm and the other cool reads as a verdict.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Comparison table — two peers, not a winner and a runner-up
   --------------------------------------------------------------------------- */

/* Undo the slate on column 2, and give column 3 the same ink explicitly.
   Measured before this rule: column 2 rendered #1a0010 and column 3 rendered
   pure black, because guide-premium.css only ever colours the second column
   and the `.gde__vs-auto` class page 10 puts on the third. Two columns of the
   same table in two different blacks is exactly the inequality this file
   exists to remove.

   Same specificity as guide-premium.css's rule (0,4,1) and later in the
   cascade, which is why load order matters: this file must come after
   guide-premium.css in cms/page.tpl. */
.page-cms.rich-text .gde--compare .gde__vs td:nth-child(2),
.page-cms.rich-text .gde--compare .gde__vs td:nth-child(3) {
  color: var(--skt-ink);
}

/* The two machine columns are separated by a hairline rather than a fill, and
   share the width the label column does not take. */
.page-cms.rich-text .gde--compare .gde__vs th:nth-child(3),
.page-cms.rich-text .gde--compare .gde__vs td:nth-child(3) {
  border-left: 1px solid var(--skt-pink-border);
}

.page-cms.rich-text .gde--compare .gde__vs th:nth-child(2),
.page-cms.rich-text .gde--compare .gde__vs th:nth-child(3) {
  width: 39%;
}

/* The model name is the header; "Single station" / "Double station" is what the
   reader is actually comparing, so it sits under the name rather than being
   folded into it. */
.gde--compare .cmp__th-sub {
  display: block;
  margin-top: .2rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--skt-pink-dark);
}

/* Row labels stay put while the table scrolls sideways — on a 14-row
   comparison, a scrolled column with no label is unreadable. `position:
   sticky` on a <td> needs the cell to paint its own background, or the
   scrolling column shows through it. */
.page-cms.rich-text .gde--compare .gde__vs th:first-child,
.page-cms.rich-text .gde--compare .gde__vs td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}

.page-cms.rich-text .gde--compare .gde__vs th:first-child {
  background: var(--skt-pink-tint);
  z-index: 2;
}

/* The sticky column needs its own right edge: the table's cell borders are
   bottom-only, so without this the label column bleeds into the values it is
   sitting on top of. */
.page-cms.rich-text .gde--compare .gde__vs th:first-child::after,
.page-cms.rich-text .gde--compare .gde__vs td:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--skt-pink-border);
}

/* ---------------------------------------------------------------------------
   2. Mobile column toggle (markup built by compare-premium.js)
   --------------------------------------------------------------------------- */

/* Hidden until the script says the table actually overflows, and never shown
   on a viewport wide enough to hold all three columns. `.cmp__toggle` is only
   inserted at all when the script runs, so there is nothing to hide when it
   does not. */
.cmp__toggle {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 1.25rem 0 -.25rem;
}

.cmp__toggle-l {
  margin-right: .15rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--skt-muted);
}

.cmp__tbtn {
  padding: .45rem .85rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: #fff;
  color: var(--skt-muted);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cmp__tbtn.is-on {
  background: var(--skt-pink);
  border-color: var(--skt-pink);
  color: #fff;
}

.cmp__tbtn:focus-visible {
  outline: 2px solid var(--skt-pink);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .cmp__toggle.is-live {
    display: flex;
  }

  /* One machine at a time. The remaining two columns fit a 390px screen, so the
     min-width guide-premium.css sets for the scroll wrapper is released and the
     table stops scrolling entirely. */
  .gde__scroll.cmp-col-1 .gde__vs th:nth-child(3),
  .gde__scroll.cmp-col-1 .gde__vs td:nth-child(3),
  .gde__scroll.cmp-col-2 .gde__vs th:nth-child(2),
  .gde__scroll.cmp-col-2 .gde__vs td:nth-child(2) {
    display: none;
  }

  .page-cms.rich-text .gde__scroll.cmp-col-1 .gde__vs,
  .page-cms.rich-text .gde__scroll.cmp-col-2 .gde__vs {
    min-width: 0;
  }

  .page-cms.rich-text .gde--compare .gde__scroll.cmp-col-1 .gde__vs th:nth-child(2),
  .page-cms.rich-text .gde--compare .gde__scroll.cmp-col-2 .gde__vs th:nth-child(3) {
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   3. Verdict cards
   --------------------------------------------------------------------------- */

.cmp__picks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 0 auto clamp(2.75rem, 5.5vw, 4.5rem);
  max-width: 58rem;
}

.cmp__pick {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 18px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

@media (hover: hover) {
  .cmp__pick:hover {
    border-color: var(--skt-pink);
    box-shadow: 0 12px 28px rgba(213, 0, 117, .1);
    transform: translateY(-2px);
  }
}

.page-cms.rich-text .cmp__pick-k {
  margin: 0 0 .9rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--skt-pink);
}

.page-cms.rich-text .cmp__pick-img {
  margin: 0 0 1rem;
  border-radius: 14px;
  background: var(--skt-pink-tint);
  text-align: center;
}

/* The covers are square (452x452) product shots on white. A fixed aspect box
   keeps the two cards the same height whatever the source image does, and the
   width/height attributes in the body reserve the space before it loads. */
.page-cms.rich-text .cmp__pick-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 14px;
}

.page-cms.rich-text .cmp__pick-n {
  margin: 0 0 .4rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--skt-ink);
}

.page-cms.rich-text .cmp__pick-d {
  margin: 0 0 1.1rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--skt-muted);
}

.page-cms.rich-text .cmp__pick-stats {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: .35rem 0 0;
  border-top: 1px solid var(--skt-pink-border);
}

.cmp__pick-stats li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  font-size: .9rem;
  line-height: 1.5;
}

.cmp__pick-stats li + li {
  border-top: 1px solid #f4eef1;
}

/* Pushed to the bottom of the card so the two "choose it if" lines and the two
   buttons sit on the same baselines even when the copy above differs in
   length. */
.page-cms.rich-text .cmp__pick-when {
  margin: auto 0 1.1rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: var(--skt-pink-tint);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--skt-ink);
}

.cmp__pick-when span {
  display: block;
  margin-bottom: .15rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--skt-pink-dark);
}

.page-cms.rich-text .cmp__pick-cta {
  margin: 0;
}

/* `.btn-primary` is forced pink globally with !important in theme.css, so this
   is a plain anchor styled here instead — one button, one job, no fight with
   the theme's button rules.

   THE `.gde` IN THE SELECTOR IS LOAD-BEARING. guide-premium.css colours every
   link inside the guide pink at `.page-cms.rich-text .gde a` — three classes
   and an element. Without the extra class here this rule loses that fight and
   the button renders pink text on a pink pill: measured, the label was
   rgb(213,0,117) on rgb(213,0,117) and completely invisible. Four classes beat
   three classes plus an element, so the white wins without an !important. */
.page-cms.rich-text .gde .cmp__btn {
  display: block;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  background: var(--skt-pink);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.page-cms.rich-text .gde .cmp__btn:hover,
.page-cms.rich-text .gde .cmp__btn:focus-visible {
  background: var(--skt-pink-dark);
  box-shadow: 0 10px 24px rgba(213, 0, 117, .25);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .cmp__picks {
    grid-template-columns: 1fr;
  }

  .page-cms.rich-text .cmp__pick-when {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------------------
   4. Shared-features chips
   --------------------------------------------------------------------------- */

.page-cms.rich-text .cmp__chips {
  list-style: none;
  margin: 1.5rem 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.cmp__chips li {
  position: relative;
  padding: .4rem .9rem .4rem 1.9rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: #fff;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--skt-ink);
}

/* The same drawn tick guide-premium.css uses for `.gde__points`, so "shared by
   both machines" reads as the same affirmative mark the split lists use. */
.cmp__chips li::before {
  content: "";
  position: absolute;
  left: .7rem;
  top: .72em;
  width: .6rem;
  height: .32rem;
  border-left: 2px solid var(--skt-pink);
  border-bottom: 2px solid var(--skt-pink);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   5. Read next
   --------------------------------------------------------------------------- */

.page-cms.rich-text .cmp__links {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}

.cmp__links li {
  padding: 1rem 1.15rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, background-color .2s ease;
}

@media (hover: hover) {
  .cmp__links li:hover {
    border-color: var(--skt-pink);
    background: var(--skt-pink-tint);
  }
}

.page-cms.rich-text .cmp__links a {
  display: block;
  font-weight: 600;
  text-decoration: none;
}

.page-cms.rich-text .cmp__links a:hover {
  text-decoration: underline;
}

.cmp__links span {
  display: block;
  margin-top: .2rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--skt-muted);
}

@media (max-width: 575.98px) {
  .page-cms.rich-text .cmp__links {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   6. Motion and print
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cmp__pick,
  .cmp__links li,
  .cmp__tbtn,
  .page-cms.rich-text .gde .cmp__btn {
    transition: none;
  }

  .cmp__pick:hover {
    transform: none;
  }
}

/* Buyers print this page for a purchase file: the whole comparison has to be on
   the paper, so the toggle goes and every column comes back. */
@media print {
  .cmp__toggle {
    display: none !important;
  }

  .gde__scroll.cmp-col-1 .gde__vs th,
  .gde__scroll.cmp-col-1 .gde__vs td,
  .gde__scroll.cmp-col-2 .gde__vs th,
  .gde__scroll.cmp-col-2 .gde__vs td {
    display: table-cell;
  }

  .cmp__picks,
  .cmp__pick {
    break-inside: avoid;
  }

  .page-cms.rich-text .gde .cmp__btn {
    display: none;
  }
}