/* Sweet SFX Version Guide (1.1.0). Every rule starts with #sweet-sfx-versions so the
   theme (Hello's table styles, the Elementor kit's headings, links and buttons) can't
   restyle it.

   Built on the Home Hero's Spotlight grid, so the two line up down the page: the
   chosen version's panel is as wide as the hero's player panel (450px × k) and the
   comparison starts where the tiles start. Sizes are the 2K design's divided by
   1.6, times --k (versions.js copies the hero's --k). */

#sweet-sfx-versions { --k: 1; --vg-red: #e50914; --vg-soft: #f5f5f6; --vg-line: #e6e6ea; width: 100%; color: #000; text-align: left;
  font-family: var(--e-global-typography-text-font-family, Poppins), Poppins, sans-serif; font-weight: 300; line-height: 1.5; }
#sweet-sfx-versions * { box-sizing: border-box; }
#sweet-sfx-versions h2, #sweet-sfx-versions p { margin: 0; padding: 0; }
#sweet-sfx-versions a { text-decoration: none; box-shadow: none; }
#sweet-sfx-versions button { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: normal; text-transform: none;
  line-height: normal; min-height: 0; width: auto; height: auto; transition: none; cursor: pointer; }
#sweet-sfx-versions img { border: 0; box-shadow: none; max-width: none; border-radius: 0; }
#sweet-sfx-versions .vg { display: grid; grid-template-columns: calc(450px * var(--k)) minmax(0, 1fr); gap: calc(25px * var(--k)); padding: calc(40px * var(--k)) 0 calc(44px * var(--k)); }

/* Left: the chosen version on the grey panel */
#sweet-sfx-versions .vg__stage { display: flex; flex-direction: column; justify-content: space-between; gap: calc(12px * var(--k)); background: var(--vg-soft);
  border-radius: calc(21px * var(--k)); padding: calc(21px * var(--k)) calc(22.5px * var(--k)) calc(19px * var(--k)); }
/* The picture box has the panel's grey itself: the JPGs' white blends away (multiply), even inside the 3D turn. */
#sweet-sfx-versions .vg__pic { display: grid; place-items: center; height: calc(237px * var(--k)); background: var(--vg-soft); }
#sweet-sfx-versions .vg__pic img { width: calc(237px * var(--k)); height: calc(237px * var(--k)); object-fit: contain; mix-blend-mode: multiply; }
#sweet-sfx-versions .vg__kick { color: var(--vg-red); font-size: max(11px, calc(8px * var(--k))); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
#sweet-sfx-versions .vg__name { font-family: var(--e-global-typography-primary-font-family, "Varela Round"), "Varela Round", sans-serif; font-weight: 900; font-size: calc(27.5px * var(--k)); line-height: 1.05; margin: calc(5px * var(--k)) 0 calc(4px * var(--k)); }
#sweet-sfx-versions .vg__price { font-weight: 600; font-size: max(13px, calc(12px * var(--k))); }
#sweet-sfx-versions .vg__desc { color: #333; font-size: max(14px, calc(10px * var(--k))); line-height: 1.6; margin-top: calc(6px * var(--k)); }
#sweet-sfx-versions .vg__btn { display: inline-flex; align-items: center; gap: .5em; margin-top: calc(12px * var(--k)); height: max(40px, calc(32.5px * var(--k))); padding: 0 calc(16px * var(--k));
  border-radius: 99px; background: var(--vg-red); color: #fff; font-weight: 600; font-size: max(13px, calc(9.4px * var(--k))); transition: background-color .2s; }
#sweet-sfx-versions .vg__btn:hover { background: #c80711; color: #fff; }
#sweet-sfx-versions .vg__btn::after { content: "›"; font-size: 1.5em; line-height: 1; }
#sweet-sfx-versions .vg__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(9px * var(--k)); border-top: 1px solid #e3e3e6; padding-top: calc(14px * var(--k)); }
#sweet-sfx-versions .vg__th { display: grid; justify-items: center; gap: calc(2px * var(--k)); padding: calc(7.5px * var(--k)) calc(6px * var(--k)); background: #fff; border: 2px solid transparent;
  border-radius: calc(12.5px * var(--k)); transition: transform .2s, border-color .2s; }
#sweet-sfx-versions .vg__th:hover { transform: translateY(-3px); }
#sweet-sfx-versions .vg__th.is-on { border-color: var(--vg-red); }
#sweet-sfx-versions .vg__th img { width: calc(57.5px * var(--k)); height: calc(57.5px * var(--k)); object-fit: contain; mix-blend-mode: multiply; }
#sweet-sfx-versions .vg__th span { font-family: var(--e-global-typography-primary-font-family, "Varela Round"), "Varela Round", sans-serif; font-weight: 900; font-size: max(12px, calc(8.75px * var(--k))); text-align: center; }
#sweet-sfx-versions .vg__th small { color: #777; font-size: max(11px, calc(7.5px * var(--k))); }

/* Right: the heading and the comparison, the chosen version's column lit up */
#sweet-sfx-versions .vg__label { display: inline-flex; align-items: center; gap: 10px; color: var(--vg-red); font-size: max(11px, calc(14px * var(--k) * .72)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
#sweet-sfx-versions .vg__label::before { content: ""; width: calc(28px * var(--k)); height: 2px; background: var(--vg-red); }
#sweet-sfx-versions .vg__title { font-family: var(--e-global-typography-primary-font-family, "Varela Round"), "Varela Round", sans-serif; font-weight: 900; font-size: calc(40px * var(--k)); line-height: 1.04;
  letter-spacing: -.02em; color: #000; text-transform: none; margin: calc(9px * var(--k)) 0; }
#sweet-sfx-versions .vg__lead { font-size: max(15px, calc(11.9px * var(--k))); line-height: 1.55; max-width: calc(750px * var(--k)); }
#sweet-sfx-versions .vg__t { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: calc(21px * var(--k)) 0 0; border: 0; background: none; }
#sweet-sfx-versions .vg__t th, #sweet-sfx-versions .vg__t td { border: 0; background: none; padding: calc(7.5px * var(--k)) calc(6px * var(--k)); text-align: center; vertical-align: middle; line-height: 1.3; color: #000; }
#sweet-sfx-versions .vg__t thead tr > :first-child, #sweet-sfx-versions .vg__t tbody th { width: 31%; }
#sweet-sfx-versions .vg__t thead th { padding-top: calc(10px * var(--k)); padding-bottom: calc(9px * var(--k)); cursor: pointer; border-radius: calc(12.5px * var(--k)) calc(12.5px * var(--k)) 0 0; }
#sweet-sfx-versions .vg__cn { display: block; font-family: var(--e-global-typography-primary-font-family, "Varela Round"), "Varela Round", sans-serif; font-weight: 900; color: var(--vg-red); text-transform: uppercase; letter-spacing: .04em; font-size: max(12px, calc(11.25px * var(--k))); }
#sweet-sfx-versions .vg__cp { display: block; color: #777; font-size: max(11px, calc(8.75px * var(--k))); margin-top: 2px; }
#sweet-sfx-versions .vg__t tbody th, #sweet-sfx-versions .vg__t tbody td { border-top: 1px solid var(--vg-line); font-size: max(14px, calc(10.6px * var(--k))); }
#sweet-sfx-versions .vg__t tbody tr:last-child > * { border-bottom: 1px solid var(--vg-line); }
#sweet-sfx-versions .vg__t tbody th { text-align: left; font-weight: 600; padding-left: 0; }
#sweet-sfx-versions .vg__t tbody td { cursor: pointer; }
#sweet-sfx-versions .vg__t td svg { width: calc(15px * var(--k)); height: calc(15px * var(--k)); min-width: 15px; min-height: 15px; display: block; margin: auto; }
#sweet-sfx-versions .vg__t td.y { color: #000; }
#sweet-sfx-versions .vg__t td.n { color: #c4c4c9; }
#sweet-sfx-versions .vg__t td.t { font-size: max(13px, calc(10px * var(--k))); font-weight: 400; }
#sweet-sfx-versions .vg__t .is-on { background: var(--vg-soft); }
#sweet-sfx-versions .vg__t tbody tr:last-child .is-on { border-radius: 0 0 calc(12.5px * var(--k)) calc(12.5px * var(--k)); }
#sweet-sfx-versions sup { font-size: .7em; line-height: 0; vertical-align: super; }
#sweet-sfx-versions .vg__main { display: flex; flex-direction: column; }
/* The note and links sit at the bottom, level with the panel's, however many rows there are. */
#sweet-sfx-versions .vg__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(19px * var(--k)); align-items: center; margin-top: auto; padding-top: calc(14px * var(--k)); }
#sweet-sfx-versions .vg__note { color: #777; font-size: max(12px, calc(8.75px * var(--k))); }
#sweet-sfx-versions .vg__links { display: flex; flex-wrap: wrap; gap: 10px calc(22px * var(--k)); }
#sweet-sfx-versions .vg__links a { display: inline-flex; align-items: center; gap: 8px; color: #000; font-weight: 600; font-size: max(13px, calc(10px * var(--k))); border-bottom: 2px solid var(--vg-red); padding-bottom: 2px; }
#sweet-sfx-versions .vg__links a::after { content: "›"; font-size: 1.3em; line-height: 1; }
#sweet-sfx-versions .vg__links a:hover { color: var(--vg-red); }

/* Tablets held upright: stacked; the panel puts the picture beside its details. */
@media (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-versions .vg { grid-template-columns: minmax(0, 1fr); }
  #sweet-sfx-versions .vg__stage { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(24px * var(--k)); align-items: center; }
  #sweet-sfx-versions .vg__thumbs { grid-column: 1 / -1; }
  #sweet-sfx-versions .vg__pic { height: auto; }
}
/* Phones, and phones held sideways: stacked, their own sizes. */
@media (max-width: 800px), (max-height: 500px) and (orientation: landscape) {
  #sweet-sfx-versions .vg { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 32px 0 36px; }
  #sweet-sfx-versions .vg__stage { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: center; padding: 16px; border-radius: 18px; }
  #sweet-sfx-versions .vg__pic { height: auto; }
  #sweet-sfx-versions .vg__pic img { width: 110px; height: 110px; }
  #sweet-sfx-versions .vg__thumbs { grid-column: 1 / -1; gap: 8px; padding-top: 12px; }
  #sweet-sfx-versions .vg__th { padding: 8px 4px; border-radius: 12px; }
  #sweet-sfx-versions .vg__th img { width: 48px; height: 48px; }
  #sweet-sfx-versions .vg__name { font-size: 22px; }
  #sweet-sfx-versions .vg__desc { font-size: 13px; }
  #sweet-sfx-versions .vg__btn { height: 40px; padding: 0 16px; font-size: 13px; margin-top: 8px; }
  #sweet-sfx-versions .vg__title { font-size: 28px; }
  #sweet-sfx-versions .vg__lead { font-size: 14px; }
  #sweet-sfx-versions .vg__t { margin-top: 16px; }
  #sweet-sfx-versions .vg__t th, #sweet-sfx-versions .vg__t td { padding: 7px 3px; }
  #sweet-sfx-versions .vg__t thead tr > :first-child, #sweet-sfx-versions .vg__t tbody th { width: 34%; }
  #sweet-sfx-versions .vg__t tbody th { font-size: 12px; line-height: 1.2; padding-left: 0; }
  #sweet-sfx-versions .vg__t tbody td, #sweet-sfx-versions .vg__t td.t { font-size: 11px; }
  #sweet-sfx-versions .vg__cn { font-size: 11px; }
  #sweet-sfx-versions .vg__cp { font-size: 10px; }
  #sweet-sfx-versions .vg__foot { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* Where its section runs edge to edge (Elementor's tablet and phone sizes; versions.js
   adds the class), the same 5% side margins as the hero. */
#sweet-sfx-versions.vg--edge .vg { padding-left: 5%; padding-right: 5%; }
/* Stacked (upright tablets and phones): the heading and intro first, then the chosen
   version, then the comparison. */
@media (max-width: 800px), (max-height: 500px) and (orientation: landscape), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-versions .vg__main { display: contents; }
  #sweet-sfx-versions .vg__label { order: 1; justify-self: start; }
  #sweet-sfx-versions .vg__title { order: 2; margin: 0; }
  #sweet-sfx-versions .vg__lead { order: 3; }
  #sweet-sfx-versions .vg__stage { order: 4; }
  #sweet-sfx-versions .vg__t { order: 5; margin-top: 0; }
  #sweet-sfx-versions .vg__foot { order: 6; margin-top: 0; }
  #sweet-sfx-versions .vg { row-gap: 14px; }
}

/* 1.1.2 One type scale for the home page (shared with the Home Hero): seven styles,
   Poppins 300 / 600 and Varela Round, sizes × k. Laptops and bigger; phones keep their own sizes. */
@media (min-width: 801px) and (min-height: 501px), (min-width: 801px) and (orientation: portrait) {
  #sweet-sfx-versions {
    --t2: calc(40px * var(--k));              /* 2 section heading */
    --t3: calc(25px * var(--k));              /* 3 title */
    --t4: calc(13px * var(--k));              /* 4 card title */
    --t5: max(15px, calc(12px * var(--k)));   /* 5 body */
    --t6: max(11px, calc(8.8px * var(--k)));  /* 6 label (red capitals) */
    --t7: max(12px, calc(9.5px * var(--k)));  /* 7 small */
  }
  #sweet-sfx-versions .vg__label, #sweet-sfx-versions .vg__kick { font-size: var(--t6) !important; font-weight: 600 !important; letter-spacing: .16em !important; }
  #sweet-sfx-versions .vg__title { font-size: var(--t2) !important; }
  #sweet-sfx-versions .vg__name { font-size: var(--t3) !important; }
  #sweet-sfx-versions .vg__cn { font-size: var(--t4) !important; text-transform: none !important; letter-spacing: 0 !important; }
  #sweet-sfx-versions .vg__lead, #sweet-sfx-versions .vg__desc { font-size: var(--t5) !important; font-weight: 300 !important; line-height: 1.6 !important; }
  #sweet-sfx-versions .vg__price, #sweet-sfx-versions .vg__btn, #sweet-sfx-versions .vg__th span, #sweet-sfx-versions .vg__th small, #sweet-sfx-versions .vg__cp,
  #sweet-sfx-versions .vg__t tbody th, #sweet-sfx-versions .vg__t tbody td, #sweet-sfx-versions .vg__t td.t, #sweet-sfx-versions .vg__note, #sweet-sfx-versions .vg__links a { font-size: var(--t7) !important; }
  #sweet-sfx-versions .vg__t tbody td, #sweet-sfx-versions .vg__t td.t, #sweet-sfx-versions .vg__th small, #sweet-sfx-versions .vg__cp, #sweet-sfx-versions .vg__note { font-weight: 300 !important; }
  #sweet-sfx-versions .vg__price, #sweet-sfx-versions .vg__btn, #sweet-sfx-versions .vg__t tbody th, #sweet-sfx-versions .vg__links a { font-weight: 600 !important; }
  #sweet-sfx-versions .vg__th span { font-family: Poppins, sans-serif !important; font-weight: 600 !important; }
}

/* 1.1.3 The intro splits into even lines, so a few words never sit on a line of their own. */
#sweet-sfx-versions .vg__lead { text-wrap: balance; }
#sweet-sfx-versions .vg__desc, #sweet-sfx-versions .vg__note { text-wrap: pretty; }