/* ============================================================
   SKS Gift Sets — /collections/gift-sets-hampers landing page
   Palette + type mirror the design bundle (Jost / Playfair;
   navy #2C3E50, rust #B8520A, gold #C9A84C, cream #F5F0E8).
   Scoped under .sks-gs so it can't leak into the theme.
   ============================================================ */
.sks-gs {
  --gs-navy: #2C3E50;
  --gs-navy2: #1E2D3B;
  --gs-rust: #B8520A;
  --gs-gold: #C9A84C;
  --gs-cream: #F5F0E8;
  --gs-parch: #E8DFD0;
  --gs-tan: #E8C9A8;
  --gs-ink: #1A1A1A;
  --gs-body: #4A4440;
  --gs-muted: #7A726B;
  --gs-line: #E2DACB;
  --gs-white: #fff;
  --gs-serif: 'Playfair Display', Georgia, serif;
  --gs-sans: 'Jost', 'Trebuchet MS', Arial, sans-serif;
  font-family: var(--gs-sans);
  color: var(--gs-body);
  background: var(--gs-cream);
  -webkit-font-smoothing: antialiased;
}

.sks-gs *,
.sks-gs *::before,
.sks-gs *::after {
  box-sizing: border-box;
}

.sks-gs__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.sks-gs h1,
.sks-gs h2,
.sks-gs h3 {
  font-family: var(--gs-serif);
  color: var(--gs-ink);
  font-weight: 600;
  line-height: 1.13;
  margin: 0;
}

.sks-gs em {
  font-style: italic;
  color: var(--gs-rust);
}

.sks-gs__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gs-rust);
  margin-bottom: 16px;
}


/* ---------- what's in the box ---------- */
.sks-gs__includes {
  padding: 76px 0;
  background: var(--gs-parch);
}

.sks-gs__includes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.sks-gs__inc-item {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid #D5CABA;
  padding: 16px 18px;
}

.sks-gs__inc-tick {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: rgba(184, 82, 10, .1);
  color: var(--gs-rust);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.sks-gs__inc-name {
  font-family: var(--gs-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.25;
}

.sks-gs__includes-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #D5CABA;
}

.sks-gs__includes-price {
  font-size: 15px;
  color: var(--gs-body);
}

.sks-gs__includes-price s {
  color: #9A9088;
}

.sks-gs__includes-price b {
  font-family: var(--gs-serif);
  font-size: 24px;
  color: var(--gs-rust);
}

.sks-gs__includes-foot .sks-gs__hero-cta {
  margin: 0;
}

/* ---------- hero ---------- */
.sks-gs__hero {
  position: relative;
  background: var(--gs-cream);
  overflow: hidden;
}

.sks-gs__hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 60px;
  padding-bottom: 52px;
}

.sks-gs__hero h1 {
  color: var(--gs-navy);
  font-family: var(--gs-serif);
  font-size: clamp(40px, 5.6vw, 74px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}

.sks-gs__hero h1 em {
  color: var(--gs-rust);
  font-style: italic;
}

.sks-gs__hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--gs-body);
  max-width: 500px;
  margin: 0 0 26px;
}

.sks-gs__hero-price {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  background: var(--gs-parch);
  border: 1px solid #D5CABA;
  margin-bottom: 24px;
}

.sks-gs__hero-price .lbl {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gs-muted);
}

.sks-gs__hero-price .now {
  font-family: var(--gs-serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--gs-navy);
}

.sks-gs__hero-price .was {
  font-size: 13px;
  color: var(--gs-muted);
  text-decoration: line-through;
}

.sks-gs__hero-price .save {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #8B1F1F;
  color: var(--gs-cream);
  padding: 4px 9px;
}

.sks-gs__hero-ctas {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.sks-gs__hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gs-rust);
  color: var(--gs-cream);
  text-decoration: none;
  padding: 16px 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}

.sks-gs__hero-cta:hover {
  background: #9a4410;
}

.sks-gs__hero-cta--ghost {
  background: transparent;
  color: var(--gs-navy);
  border: 1px solid var(--gs-navy);
}

.sks-gs__hero-cta--ghost:hover {
  background: var(--gs-navy);
  color: #fff;
}

.sks-gs__hero-rev {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--gs-body);
  flex-wrap: wrap;
}

.sks-gs__hero-rev .stars {
  color: var(--gs-gold);
  letter-spacing: 1px;
}

.sks-gs__hero-rev b {
  font-weight: 600;
  color: var(--gs-navy);
}

.sks-gs__hero-stats {
  display: flex;
  gap: 30px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #D5CABA;
}

.sks-gs__hero-stats b {
  font-family: var(--gs-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gs-navy);
  display: block;
}

.sks-gs__hero-stats span {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gs-muted);
}

.sks-gs__hero-media {
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.sks-gs__hero-frame {
  position: relative;
  aspect-ratio: 3/4;
  background: #fff;
  border: 1px solid #D5CABA;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(35, 40, 49, .1);
}

.sks-gs__hero-photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.sks-gs__hero-photo img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 58px);
  width: 100%;
  object-fit: contain;
  padding: 18px;
  display: block;
}

.sks-gs__hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--gs-cream);
  border-top: 1px solid var(--gs-line);
  color: var(--gs-body);
  padding: 0 16px;
  font-size: 11px;
  letter-spacing: .04em;
}

.sks-gs__hero-caption-sw {
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--gs-line);
  display: block;
  background: repeating-linear-gradient(0deg, #1E2D3B 0 3px, transparent 3px 7px), repeating-linear-gradient(90deg, rgba(30, 45, 59, .55) 0 3px, transparent 3px 7px), #3a5068;
}

.sks-gs__hero-caption-txt {
  flex: 1;
}

.sks-gs__hero-caption-txt b {
  color: var(--gs-navy);
  font-weight: 500;
  font-size: 13px;
}

.sks-gs__hero-caption-meta {
  color: var(--gs-muted);
}

/* ---------- trust bar ---------- */
.sks-gs__trust {
  background: var(--gs-navy);
  color: var(--gs-cream);
}

.sks-gs__trust-row {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 24px;
}

.sks-gs__trust-row div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: rgba(245, 240, 232, .85);
}

.sks-gs__trust-row span {
  color: var(--gs-tan);
}

.sks-gs__trust-row b {
  color: var(--gs-cream);
  font-weight: 500;
}

.sks-gs__trust-row .is-gold {
  color: var(--gs-tan);
}

/* ---------- intro band ---------- */
.sks-gs__intro {
  padding: 64px 0 8px;
  text-align: center;
}

.sks-gs__intro h2 {
  font-size: 38px;
}

.sks-gs__intro p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gs-body);
  max-width: 640px;
  margin: 14px auto 0;
}

/* ---------- set cards ---------- */
.sks-gs__sets {
  padding: 36px 0 64px;
}

.sks-gs__sets-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.sks-gs__set-tabs {
  display: none;
}

/* Mobile per-set detail block (hidden on desktop) */
.sks-gs__setdetail {
  display: none;
}

.sks-gs__setdetail-eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gs-rust);
  font-weight: 600;
  margin-bottom: 8px;
}

.sks-gs__setdetail-h {
  font-family: var(--gs-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--gs-navy);
  margin: 0 0 10px;
}

.sks-gs__setdetail-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--gs-parch);
  border: 1px solid #D5CABA;
  margin-bottom: 12px;
}

.sks-gs__setdetail-price .now {
  font-family: var(--gs-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gs-navy);
}

.sks-gs__setdetail-price .was {
  font-size: 12px;
  color: var(--gs-muted);
  text-decoration: line-through;
}

.sks-gs__setdetail-price .was[hidden] {
  display: none;
}

.sks-gs__setdetail-blurb {
  font-size: 13.5px;
  color: var(--gs-body);
  line-height: 1.55;
  margin: 0 0 10px;
}

.sks-gs__setdetail-rating {
  font-size: 12px;
  color: var(--gs-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sks-gs__setdetail-rating .stars {
  color: var(--gs-gold);
  letter-spacing: 1px;
}

@media (max-width:700px) {

  .sks-gs__trust,
  .sks-gs__intro {
    display: none;
  }

  .sks-gs__sets {
    padding: 10px 0 6px;
  }

  .sks-gs__build {
    padding-top: 20px;
  }

  .sks-gs__sets-grid {
    display: none;
  }

  .sks-gs__setdetail {
    display: block;
    padding-top: 16px;
    padding-bottom: 6px;
  }

  .sks-gs__set-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sks-gs__set-tabs::-webkit-scrollbar {
    display: none;
  }

  .sks-gs__set-tab {
    flex: none;
    white-space: nowrap;
    padding: 10px 16px;
    border: 1px solid #D5CABA;
    background: #fff;
    font-family: var(--gs-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--gs-navy);
    cursor: pointer;
  }

  .sks-gs__set-tab.is-on {
    background: var(--gs-navy);
    border-color: var(--gs-navy);
    color: #fff;
  }
}

.sks-gs__set {
  display: flex;
  flex-direction: column;
  background: var(--gs-white);
  border: 1px solid var(--gs-line);
  padding: 14px;
  transition: border-color .18s, box-shadow .18s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.sks-gs__set:hover {
  border-color: var(--gs-tan);
  box-shadow: 0 10px 26px rgba(30, 45, 59, .10);
}

.sks-gs__set.is-active {
  border-color: var(--gs-rust);
  box-shadow: 0 0 0 1px var(--gs-rust);
}

.sks-gs__set-media {
  position: relative;
  aspect-ratio: 3/4;
  background: #fff;
  overflow: hidden;
  margin-bottom: 10px;
  flex: none;
}

.sks-gs__set-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sks-gs__set-save {
  position: absolute;
  top: 8px;
  right: 0;
  background: #8B1F1F;
  color: var(--gs-cream);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
}

.sks-gs__set-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sks-gs__set-pieces {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gs-muted);
  margin-bottom: 3px;
}

.sks-gs__set h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.2;
  margin-bottom: 4px;
}

.sks-gs__set-desc {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--gs-muted);
  margin: 0 0 9px;
  flex: 1;
}

.sks-gs__set-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 11px;
}

.sks-gs__set-price .now {
  font-family: var(--gs-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--gs-rust);
}

.sks-gs__set-price s {
  font-size: 11.5px;
  color: #9A9088;
  text-decoration: line-through;
}

.sks-gs__set-sizing {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--gs-line);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gs-navy);
}

.sks-gs__set-sizing.is-none {
  color: #1A5C2A;
}

/* ---------- inline config panel ---------- */
/* ========== BUILD THE GIFT (configurator) ========== */
.sks-gs__build {
  padding: 76px 0;
  background: var(--gs-cream);
}

.sks-gs__set.is-active {
  border-color: var(--gs-rust);
  box-shadow: 0 0 0 2px rgba(184, 82, 10, .28);
}

.sks-gs__build-head {
  max-width: 700px;
  margin: 0 auto 42px;
  text-align: center;
}

.sks-gs__build-head .sks-gs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.sks-gs__build-head .sks-gs__eyebrow i {
  width: 34px;
  height: 1px;
  background: var(--gs-rust);
  display: inline-block;
}

.sks-gs__build-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: 12px;
}

.sks-gs__build-head p {
  font-size: 16px;
  color: var(--gs-body);
  line-height: 1.6;
  margin: 0;
}

.sks-gs__build-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  align-items: start;
}

/* --- left: preview + running price --- */
.sks-gs__build-left {
  position: sticky;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sks-gs__preview-frame {
  border: 1px solid #D5CABA;
  background: #fff;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(35, 40, 49, .08);
  position: relative;
}

.sks-gs__preview-img {
  position: relative;
  width: 100%;
  min-height: 300px;
  background: #EDE6DA center/120px repeat;
  overflow: hidden;
}

.sks-gs__preview-photo {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}

.sks-gs__preview-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  height: 46px;
  background: var(--gs-cream);
  border: 1px solid var(--gs-line);
  color: var(--gs-body);
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: .03em;
}

.sks-gs__preview-chip {
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--gs-line);
  background: #fff center/cover no-repeat;
  display: block;
}

.sks-gs__preview-cap b {
  color: var(--gs-navy);
  font-weight: 500;
}

.sks-gs__summary {
  border: 1px solid #D5CABA;
  background: #fff;
}

.sks-gs__summary-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #D5CABA;
  background: var(--gs-parch);
}

.sks-gs__summary-hd b {
  font-family: var(--gs-serif);
  font-size: 15px;
  color: var(--gs-navy);
  font-weight: 600;
}

.sks-gs__summary-hd span {
  font-size: 11px;
  color: var(--gs-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sks-gs__summary-rows {
  padding: 12px 18px;
}

.sks-gs__summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--gs-body);
  padding: 3px 0;
}

/* Selected pieces + tartan, listed above the total. */
.sks-gs__summary-lines {
  max-height: 220px;
  overflow-y: auto;
}

.sks-gs__summary-lines:empty {
  display: none;
}

.sks-gs__summary-lines .sks-gs__summary-row span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sks-gs__summary-lines .sks-gs__summary-row span:last-child {
  flex: none;
  white-space: nowrap;
  color: var(--gs-ink);
}

.sks-gs__summary-row.is-tartan {
  color: var(--gs-muted);
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--gs-line);
}

.sks-gs__summary-row.is-tartan span:first-child {
  color: var(--gs-navy);
}

.sks-gs__summary-row.is-tartan span:last-child {
  color: var(--gs-rust);
}

.sks-gs__summary-save {
  margin-top: 4px;
}

.sks-gs__summary-save s {
  color: var(--gs-muted);
}

.sks-gs__summary-row.is-save {
  color: #1A5C2A;
  font-weight: 500;
}

.sks-gs__summary-row.is-up {
  color: var(--gs-rust);
}

.sks-gs__summary-row.is-total {
  align-items: baseline;
  font-size: 15px;
  color: var(--gs-navy);
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--gs-line);
}

.sks-gs__summary-row.is-total strong {
  font-family: var(--gs-serif);
  font-size: 28px;
  color: var(--gs-rust);
  font-weight: 600;
}

/* Mobile-only sticky bar — same as the party outfit page: a white bar with a
   single centred button that carries the running total inside it. */
.sks-gs__mobar {
  display: none;
}

@media (max-width: 900px) {
  .sks-gs__mobar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #D5CABA;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .12);
    transform: translateY(120%);
    transition: transform .22s ease;
  }

  .sks-gs__mobar.is-in {
    transform: none;
  }

  .sks-gs__mobar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .sks-gs__mobar-cta {
    flex: 0 1 auto;
    min-width: 60%;
    max-width: 440px;
    padding: 14px 22px;
    text-align: center;
    background: var(--gs-rust);
    color: #fff;
    border: 0;
    font: 600 13px/1 var(--gs-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .sks-gs__mobar-cta:disabled {
    opacity: .7;
  }

  .sks-gs__build {
    padding-bottom: 82px;
  }

  /* room so the fixed bar never covers the last row */
  .sks-gs__summary-cta {
    display: none;
  }

  /* the sticky bar is the add-to-cart on mobile */
}

/* Mobile package switcher — chips (hidden on desktop). */
.sks-gs__chips,
.sks-gs__hero-chips,
.sks-gs__hero-preview,
.sks-gs__preview-save,
.sks-gs__preview-cap {
  display: none;
}

@media (max-width: 640px) {

  /* Chips replace the card grid on phones. */
  .sks-gs__packages {
    display: none;
  }

  /* The SELECTED package's image + chip slider move to the TOP of the hero,
     replacing the static hero image. The configurator's own preview is hidden. */
  .sks-gs__hero-frame {
    display: none;
  }

  /* Package selection sits AFTER the hero copy — i.e. right before the
     "Configure each piece" builder section (no order:-1). */
  .sks-gs__hero-media {
    margin-top: 20px;
  }

  .sks-gs__hero-preview {
    display: block;
    margin-bottom: 12px;
  }

  /* No gap below the package selection — it butts up against the builder. */
  .sks-gs__hero-grid {
    padding-bottom: 0 !important;
  }

  .sks-gs__hero-chips {
    padding-bottom: 0;
  }

  .sks-gs__build {
    padding-top: 0;
  }

  .sks-gs__hero-chips {
    /* Owner 2026-09-26: every set visible, two per row, instead of one swipeable row. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 2px 0;
  }

  .sks-gs__build-left .sks-gs__chips,
  .sks-gs__build-left .sks-gs__preview {
    display: none;
  }

  /* moved to the hero */
  /* Stop the hero overflowing the viewport (grid items must be allowed to shrink). */
  .sks-gs__hero-grid,
  .sks-gs__hero-copy,
  .sks-gs__hero-media {
    min-width: 0;
    max-width: 100%;
  }

  .sks-gs__hero-price {
    max-width: 100%;
  }

  .sks-gs__hero-stats {
    flex-wrap: wrap;
    column-gap: 22px;
    row-gap: 14px;
  }

  .sks-gs__hero h1 {
    overflow-wrap: anywhere;
  }

  /* Preview + chips + title ride at the top; the steps sit below. */
  .sks-gs__build-left {
    order: 0;
  }

  .sks-gs__build-right {
    order: 1;
  }

  /* Only the visual switcher stays on phones; the itemised rows + inline promises
     are hidden (the sticky bar carries the total + add). */
  .sks-gs__summary-rows,
  .sks-gs__summary-promises,
  .sks-gs__summary-blurb {
    display: none;
  }

  .sks-gs__preview {
    position: relative;
  }

  .sks-gs__preview img {
    aspect-ratio: 4 / 5;
  }

  .sks-gs__preview-save {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    background: #8B1F1F;
    color: #F5F0E8;
    font: 600 10px/1 var(--gs-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 10px;
  }

  .sks-gs__preview-save[hidden] {
    display: none;
  }

  .sks-gs__preview-cap {
    display: flex;
    align-items: center;
    gap: 9px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    min-height: 44px;
    padding: 7px 12px;
    background: #F5F0E8;
    border-top: 1px solid #E2DACB;
    font: 400 10.5px/1.3 var(--gs-sans);
    color: var(--gs-body);
  }

  .sks-gs__preview-cap[hidden] {
    display: none;
  }

  .sks-gs__preview-cap-chip {
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid #E2DACB;
    display: block;
    background: repeating-linear-gradient(0deg, #1E2D3B 0 3px, transparent 3px 6px), #3a5068;
  }

  .sks-gs__preview-cap-txt {
    flex: 1;
    min-width: 0;
  }

  .sks-gs__preview-cap-txt b {
    color: var(--gs-navy);
    font-weight: 500;
  }

  .sks-gs__preview-cap-pcs {
    color: var(--gs-muted);
    white-space: nowrap;
  }

  .sks-gs__chips {
    /* Owner 2026-09-26: every set visible, two per row, instead of one swipeable row. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px 0 2px;
    margin: 0;
  }

  .sks-gs__chip {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #D5CABA;
    background: #fff;
    color: var(--gs-navy);
    padding: 8px 12px;
    font-family: var(--gs-serif);
    font-size: 14px;
    font-weight: 500;
    /* line-height comes from the wrap rule above now that a long name can run to two lines */
  }

  .sks-gs__chip.is-active {
    background: var(--gs-navy);
    border-color: var(--gs-navy);
    color: #fff;
  }
}

.sks-gs__summary-cta {
  margin: 0;
  width: calc(100% - 36px);
  margin: 4px 18px 0;
  justify-content: center;
}

.sks-gs__summary-cta:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sks-gs__summary-promises {
  list-style: none;
  margin: 0;
  padding: 12px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sks-gs__summary-promises li {
  font-size: 11px;
  color: var(--gs-muted);
}

.sks-gs__summary-promises li.is-gold {
  color: var(--gs-rust);
  font-weight: 500;
}

/* --- right: steps --- */
.sks-gs__step {
  padding: 26px 0;
  border-bottom: 1px solid #D5CABA;
}

.sks-gs__step:first-child {
  padding-top: 0;
}

.sks-gs__step:last-child {
  border-bottom: 0;
}

.sks-gs__step-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.sks-gs__step-no {
  font-size: 12px;
  color: var(--gs-rust);
  font-weight: 600;
  letter-spacing: .06em;
}

.sks-gs__step-hd h3 {
  font-size: 24px;
  font-weight: 500;
  color: var(--gs-navy);
}

.sks-gs__step-sub {
  font-size: 14px;
  color: var(--gs-muted);
  line-height: 1.55;
  margin: 0 0 18px;
}

/* selected sett banner */
.sks-gs__tsel {
  display: flex;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--gs-rust);
  background: #fff;
  padding: 14px;
  margin-bottom: 18px;
}

.sks-gs__tsel[hidden] {
  display: none;
}

.sks-gs__tsel-sw {
  width: 80px;
  height: 80px;
  flex: none;
  border: 1px solid #D5CABA;
  background: #EDE6DA center/cover no-repeat;
  display: block;
}

.sks-gs__tsel-main {
  flex: 1;
  min-width: 0;
}

.sks-gs__tsel-lbl {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gs-rust);
  font-weight: 600;
  margin-bottom: 3px;
}

.sks-gs__tsel-name {
  font-family: var(--gs-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.2;
}

.sks-gs__tsel-meta {
  font-size: 12px;
  color: var(--gs-muted);
  margin-top: 4px;
}

.sks-gs__tsel-up {
  flex: none;
  text-align: right;
}

.sks-gs__tsel-up-lbl {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gs-muted);
  margin-bottom: 3px;
}

.sks-gs__tsel-up-val {
  font-family: var(--gs-serif);
  font-size: 18px;
  color: var(--gs-navy);
}

/* search + chips */
.sks-gs__tsearch {
  display: flex;
  gap: 9px;
  margin-bottom: 12px;
}

.sks-gs__tsearch input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid #D5CABA;
  background: #fff;
  font-family: var(--gs-sans);
  font-size: 14px;
  color: var(--gs-ink);
}

.sks-gs__tsearch input:focus {
  outline: none;
  border-color: var(--gs-rust);
}

.sks-gs__tsearch button {
  padding: 0 16px;
  border: 1px solid #D5CABA;
  background: #fff;
  font-size: 12.5px;
  color: var(--gs-body);
  cursor: pointer;
}

.sks-gs__tnote {
  font-size: 12.5px;
  color: var(--gs-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

.sks-gs__tbrowse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 11px 18px;
  border: 1px solid var(--gs-navy);
  background: #fff;
  font-family: var(--gs-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--gs-navy);
  cursor: pointer;
  transition: all .15s;
}

.sks-gs__tbrowse:hover {
  background: var(--gs-navy);
  color: #fff;
}

.sks-gs__tbrowse[hidden] {
  display: none;
}

/* tartan grid */
.sks-gs__tgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.sks-gs__tcard {
  display: block;
  text-align: left;
  border: 1px solid transparent;
  background: none;
  padding: 0;
  cursor: pointer;
}

.sks-gs__tcard-sw {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  margin-bottom: 6px;
  border: 1px solid #D5CABA;
  background: #EDE6DA center/cover no-repeat;
}

.sks-gs__tcard-sw i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gs-rust);
  color: var(--gs-cream);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 0;
  font-weight: 500;
  font-style: normal;
  opacity: 0;
  transition: opacity .15s;
}

.sks-gs__tcard:hover .sks-gs__tcard-sw {
  border-color: var(--gs-rust);
}

.sks-gs__tcard.is-on .sks-gs__tcard-sw {
  border-color: var(--gs-rust);
  box-shadow: 0 0 0 2px rgba(184, 82, 10, .3);
}

.sks-gs__tcard.is-on .sks-gs__tcard-sw i {
  opacity: 1;
}

.sks-gs__tcard-name {
  display: block;
  font-family: var(--gs-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.2;
}

.sks-gs__tcard-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}

.sks-gs__tcard-foot em {
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gs-muted);
  font-style: normal;
}

.sks-gs__tcard-foot b {
  font-size: 11px;
  color: var(--gs-navy);
  font-weight: 600;
}

.sks-gs__tcard-foot b.is-free {
  color: #1A5C2A;
}

.sks-gs__tmore {
  grid-column: 1/-1;
  font-size: 12.5px;
  color: var(--gs-muted);
  text-align: center;
  margin: 8px 0 0;
}

.sks-gs__tempty {
  font-size: 13px;
  color: #8B1F1F;
  margin: 14px 0 0;
}

.sks-gs__tempty[hidden] {
  display: none;
}

.sks-gs__tempty a {
  color: var(--gs-rust);
}

/* ===== browse-all modal (kilt-outfit style) ===== */
body.sks-gs-modal-open {
  overflow: hidden;
}

.sks-gs__tmodal[hidden] {
  display: none;
}

.sks-gs__tmodal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 20px;
  background: rgba(15, 22, 35, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.sks-gs__tmodal-inner {
  background: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  height: 90vh;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  border-radius: 4px;
  overflow: hidden;
  cursor: default;
}

.sks-gs__tmodal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--gs-line);
}

.sks-gs__tmodal-head-info {
  flex: 1;
  min-width: 0;
}

.sks-gs__tmodal-title {
  font-family: var(--gs-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--gs-navy);
  letter-spacing: -.01em;
}

.sks-gs__tmodal-title em {
  font-style: normal;
  color: var(--gs-rust);
  font-weight: 400;
}

.sks-gs__tmodal-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gs-cream);
  color: var(--gs-navy);
  border: 1px solid var(--gs-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, color .2s, border-color .2s;
  padding: 0;
}

.sks-gs__tmodal-close:hover {
  background: var(--gs-rust);
  border-color: var(--gs-rust);
  color: #fff;
}

.sks-gs__tmodal-search {
  padding: 16px 28px 12px;
  position: relative;
}

.sks-gs__tmodal-search input {
  width: 100%;
  background: var(--gs-cream);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 13px 14px 13px 42px;
  font-family: var(--gs-sans);
  font-size: 14px;
  color: var(--gs-ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.sks-gs__tmodal-search input::placeholder {
  color: var(--gs-muted);
}

.sks-gs__tmodal-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--gs-rust);
  box-shadow: 0 0 0 3px rgba(184, 82, 10, .1);
}

.sks-gs__tmodal-search-icon {
  position: absolute;
  left: 42px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  color: var(--gs-muted);
  pointer-events: none;
}

.sks-gs__tmodal-alphabet {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px 28px;
  border-bottom: 1px solid var(--gs-line);
  background: var(--gs-cream);
}

.sks-gs__tmletter {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gs-navy);
  cursor: pointer;
  font-family: var(--gs-sans);
  padding: 0;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sks-gs__tmletter:hover:not(:disabled) {
  color: var(--gs-rust);
}

.sks-gs__tmletter:disabled,
.sks-gs__tmletter.is-disabled {
  opacity: .25;
  cursor: default;
}

.sks-gs__tmodal-grid {
  flex: 1;
  overflow-y: auto;
  align-content: start;
  position: relative;
}

.sks-gs__tmodal-grid.is-list {
  display: block;
  padding: 0;
}

.sks-gs__tmhead {
  padding: 10px 28px 8px;
  font-family: var(--gs-serif);
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  color: var(--gs-rust);
  border-top: 1px solid var(--gs-line);
  border-bottom: 1px solid var(--gs-line);
  background: var(--gs-cream);
  position: sticky;
  top: 0;
  z-index: 2;
}

.sks-gs__tmhead:first-child {
  border-top: none;
}

.sks-gs__tmrow {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 28px;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--gs-line);
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--gs-sans);
  transition: background .15s;
}

.sks-gs__tmrow:hover {
  background: rgba(184, 82, 10, .05);
}

.sks-gs__tmrow.sel {
  background: rgba(184, 82, 10, .08);
  box-shadow: inset 3px 0 0 var(--gs-rust);
}

.sks-gs__tmrow-sw {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 4px;
  border: 1px solid var(--gs-line);
  background: var(--gs-parch);
  overflow: hidden;
  flex-shrink: 0;
}

.sks-gs__tmrow-sw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sks-gs__tmrow-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sks-gs__tmrow-nm {
  font-family: var(--gs-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gs-navy);
  line-height: 1.25;
}

.sks-gs__tmrow-mt {
  font-size: 12px;
  color: var(--gs-muted);
  line-height: 1.3;
}

.sks-gs__tmrow-pr {
  font-family: var(--gs-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--gs-rust);
  white-space: nowrap;
  flex-shrink: 0;
}

.sks-gs__tmrow-pr.is-free {
  color: #1A5C2A;
}

.sks-gs__tmrow-sel {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--gs-line);
  border-radius: 4px;
  color: var(--gs-navy);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}

.sks-gs__tmrow:hover .sks-gs__tmrow-sel {
  background: var(--gs-rust);
  border-color: var(--gs-rust);
  color: #fff;
}

.sks-gs__tmempty {
  padding: 40px 28px;
  text-align: center;
  color: var(--gs-muted);
  font-size: 14px;
}

.sks-gs__tmodal-foot {
  padding: 12px 28px;
  border-top: 1px solid var(--gs-line);
  background: var(--gs-cream);
  font-size: 12px;
  color: var(--gs-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sks-gs__tmodal-foot strong {
  color: var(--gs-navy);
}

.sks-gs__tmodal-foot-r {
  color: var(--gs-muted);
}

@media (max-width:720px) {
  .sks-gs__tmodal {
    padding: 0;
  }

  .sks-gs__tmodal-inner {
    height: 100vh;
    max-height: 100vh;
    max-width: none;
    border-radius: 0;
  }
}

@media (max-width:520px) {
  .sks-gs__tmrow {
    padding: 10px 16px;
    gap: 10px;
  }

  .sks-gs__tmodal-alphabet {
    padding: 8px 14px;
    gap: 4px;
  }
}

/* sizing fields (shared) */
.sks-gs__config-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}

.gs-noopts {
  grid-column: 1/-1;
  color: var(--gs-muted);
  font-size: 14px;
  margin: 0;
}

.gs-mf--full {
  grid-column: 1/-1;
}

.gs-mf label {
  display: block;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gs-body);
  margin-bottom: 6px;
  font-weight: 500;
}

.gs-req {
  color: var(--gs-rust);
}

.gs-opt {
  color: var(--gs-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.gs-mf-wrap {
  position: relative;
  display: block;
}

.gs-mf input,
.gs-mf select,
.gs-mf textarea {
  width: 100%;
  border: 1px solid var(--gs-line);
  border-radius: 6px;
  padding: 11px 12px;
  font-family: var(--gs-sans);
  font-size: 14px;
  color: var(--gs-ink);
  background: var(--gs-white);
}

.gs-mf textarea {
  resize: vertical;
}

.gs-mf input:focus,
.gs-mf select:focus,
.gs-mf textarea:focus {
  outline: none;
  border-color: var(--gs-rust);
}

/* Kill the theme's global focus outline + double box-shadow on all gift-set fields */
.sks-gs input:focus,
.sks-gs input:focus-visible,
.sks-gs select:focus,
.sks-gs select:focus-visible,
.sks-gs textarea:focus,
.sks-gs textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.gs-mf-wrap input {
  padding-right: 60px;
}

.gs-mf-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--gs-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
  pointer-events: none;
}

.gs-mf--bad input,
.gs-mf--bad select {
  border-color: var(--gs-rust);
  background: #FDF4F0;
}

/* ---- sizing step (two modes) ---- */
.sks-gs__sizetip {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--gs-parch);
  border: 1px solid var(--gs-gold);
  border-left-width: 4px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.sks-gs__sizetip-ic {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--gs-gold);
  color: var(--gs-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.sks-gs__sizetip-eyebrow {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gs-rust);
  font-weight: 600;
  margin-bottom: 4px;
}

.sks-gs__sizetip-h {
  font-family: var(--gs-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.2;
  margin-bottom: 6px;
}

.sks-gs__sizetip-h em {
  font-style: italic;
  color: var(--gs-rust);
}

.sks-gs__sizetip-body p {
  font-size: 13px;
  color: var(--gs-body);
  line-height: 1.55;
  margin: 0;
}

.sks-gs__sizemode {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--gs-line);
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 10px;
  text-align: left;
  cursor: pointer;
  font-family: var(--gs-sans);
  transition: border-color .15s, background .15s;
}

.sks-gs__sizemode:hover {
  border-color: var(--gs-tan);
}

.sks-gs__sizemode.is-on {
  border-color: var(--gs-rust);
  background: rgba(184, 82, 10, .05);
}

.sks-gs__sizemode-check {
  width: 24px;
  height: 24px;
  flex: none;
  background: #fff;
  border: 1px solid var(--gs-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sks-gs__sizemode.is-on .sks-gs__sizemode-check {
  background: var(--gs-rust);
  border-color: var(--gs-rust);
}

.sks-gs__sizemode.is-on .sks-gs__sizemode-check::after {
  content: '✓';
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.sks-gs__sizemode-main {
  flex: 1;
  min-width: 0;
}

.sks-gs__sizemode-title {
  display: block;
  font-family: var(--gs-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--gs-navy);
}

.sks-gs__sizemode-sub {
  display: block;
  font-size: 12.5px;
  color: var(--gs-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.sks-gs__sizemode-tag {
  flex: none;
  font-size: 12px;
  color: var(--gs-muted);
  white-space: nowrap;
}

.sks-gs__config-fields[hidden] {
  display: none;
}

.sks-gs__config-fields {
  margin-top: 6px;
}

.sks-gs__sizelink {
  border: 1px solid var(--gs-line);
  background: #fff;
  margin-top: 6px;
}

.sks-gs__sizelink[hidden] {
  display: none;
}

.sks-gs__sizelink-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--gs-parch);
  padding: 14px 18px;
  border-bottom: 1px solid var(--gs-line);
}

.sks-gs__sizelink-hd b {
  font-family: var(--gs-serif);
  font-size: 16px;
  color: var(--gs-navy);
  font-weight: 600;
}

.sks-gs__sizelink-badge {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gs-muted);
  border: 1px solid var(--gs-line);
  border-radius: 20px;
  padding: 4px 10px;
}

.sks-gs__sizelink-guide {
  margin-left: auto;
  font-size: 12px;
  color: var(--gs-rust);
  border-bottom: 1px solid var(--gs-rust);
  text-decoration: none;
}

.sks-gs__sizelink>p {
  font-size: 13px;
  color: var(--gs-body);
  line-height: 1.55;
  margin: 0;
  padding: 14px 18px 8px;
}

.sks-gs__sizelink-input {
  width: calc(100% - 36px);
  margin: 0 18px 18px;
  padding: 12px 14px;
  border: 1px solid var(--gs-line);
  font-family: var(--gs-sans);
  font-size: 14px;
  color: var(--gs-ink);
}

.sks-gs__sizelink-input:focus {
  outline: none;
  border-color: var(--gs-rust);
}

.sks-gs__sizefoot {
  background: var(--gs-parch);
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--gs-body);
}

.sks-gs__sizefoot b {
  color: var(--gs-rust);
  font-weight: 600;
}

/* responsive */
@media (max-width:900px) {
  .sks-gs__build-grid {
    grid-template-columns: 1fr;
  }

  .sks-gs__build-left {
    position: static;
    order: 2;
  }

  .sks-gs__build-right {
    order: 1;
  }

  .sks-gs__tgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:560px) {

  /* Compact mobile tartan picker (matches the design phone layout) */
  #step-tartan .sks-gs__step-sub {
    display: none;
  }

  /* drop the long description */
  .sks-gs__tsel {
    display: none;
  }

  /* no "Your sett, selected" panel */
  .sks-gs__tnote {
    display: none;
  }

  /* no tier note */
  .sks-gs__tsearch button {
    display: none;
  }

  /* search only, no Clear */
  .sks-gs__tgrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 8px;
    align-items: start;
  }

  .sks-gs__tcard-foot {
    display: none;
  }

  /* no availability / charge per swatch */
  /* Reserve 2 lines for names so every card is the same height → clean rows */
  .sks-gs__tcard-name {
    font-size: 11px;
    line-height: 1.2;
    min-height: 2.4em;
  }

  .sks-gs__config-fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- reassurance band ---------- */
.sks-gs__band {
  background: var(--gs-navy);
  color: #E8DFD0;
  padding: 64px 0;
}

.sks-gs__band .sks-gs__eyebrow {
  color: var(--gs-gold);
}

.sks-gs__band h2 {
  color: #fff;
  font-size: 34px;
  max-width: 640px;
}

.sks-gs__band h2 em {
  color: var(--gs-tan);
}

.sks-gs__band-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(232, 223, 208, .16);
  margin-top: 38px;
}

.sks-gs__band-item {
  background: var(--gs-navy);
  padding: 26px 24px;
}

.sks-gs__band-item .n {
  font-family: var(--gs-serif);
  font-size: 20px;
  color: #fff;
  margin-bottom: 8px;
}

.sks-gs__band-item p {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(232, 223, 208, .7);
  margin: 0;
}

/* ---------- gift guide ---------- */
.sks-gs__guide {
  padding: 64px 0;
  background: var(--gs-white);
}

.sks-gs__guide h2 {
  font-size: 34px;
  text-align: center;
}

.sks-gs__guide-sub {
  font-size: 15px;
  color: var(--gs-body);
  text-align: center;
  max-width: 600px;
  margin: 12px auto 34px;
}

.sks-gs__guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.sks-gs__guide-card {
  border: 1px solid var(--gs-line);
  border-radius: 10px;
  padding: 26px 24px;
  background: var(--gs-cream);
}

.sks-gs__guide-card h3 {
  font-size: 19px;
  margin-bottom: 9px;
}

.sks-gs__guide-card p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gs-body);
}

/* ---------- timing ---------- */
/* ---------- shared section head ---------- */
.sks-gs__sec-head {
  max-width: 700px;
  margin: 0 auto 44px;
  text-align: center;
}

.sks-gs__eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.sks-gs__eyebrow--rule i {
  width: 34px;
  height: 1px;
  background: var(--gs-rust);
  display: inline-block;
}

.sks-gs__sec-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--gs-navy);
  margin-bottom: 12px;
  line-height: 1.1;
}

.sks-gs__sec-head p {
  font-size: 16px;
  color: var(--gs-body);
  line-height: 1.6;
  margin: 0;
}

/* ---------- size guide · this set only ---------- */
.sks-gs__sizing {
  padding: 76px 0;
}

.sks-gs__sizing-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  align-items: start;
}

.sks-gs__spec {
  border: 1px solid #D5CABA;
  background: #fff;
}

.sks-gs__spec-hd {
  padding: 18px 20px;
  border-bottom: 1px solid #D5CABA;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.sks-gs__spec-title {
  font-family: var(--gs-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--gs-navy);
}

.sks-gs__spec-intro {
  font-size: 12.5px;
  color: var(--gs-muted);
  line-height: 1.5;
  margin-top: 3px;
  max-width: 520px;
}

.sks-gs__spec-sku {
  flex: none;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gs-rust);
  border: 1px solid var(--gs-rust);
  padding: 5px 10px;
  white-space: nowrap;
}

.sks-gs__spec-row {
  display: grid;
  grid-template-columns: 1fr 130px 110px;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gs-line);
  align-items: center;
  font-size: 13px;
  color: var(--gs-body);
}

.sks-gs__spec-row.is-head {
  background: #FBF7F0;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gs-muted);
  font-weight: 600;
}

.sks-gs__spec-row .piece b {
  display: block;
  font-family: var(--gs-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.25;
}

.sks-gs__spec-row .piece em {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gs-rust);
  font-style: normal;
}

.sks-gs__spec-row .tol {
  color: var(--gs-muted);
}

.sks-gs__spec-empty {
  padding: 26px 20px;
  font-size: 13.5px;
  color: var(--gs-muted);
  line-height: 1.6;
}

.sks-gs__spec-notes {
  padding: 16px 20px;
  background: var(--gs-parch);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.sks-gs__spec-notes div {
  font-size: 12px;
  color: var(--gs-body);
  line-height: 1.5;
}

.sks-gs__spec-notes strong {
  color: var(--gs-navy);
}

.sks-gs__spec-notes strong.rust {
  color: var(--gs-rust);
}

.sks-gs__sizepanel {
  background: var(--gs-navy);
  color: var(--gs-cream);
  padding: 30px;
}

.sks-gs__sizepanel-eyebrow {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gs-tan);
  font-weight: 600;
  margin-bottom: 10px;
}

.sks-gs__sizepanel h3 {
  font-family: var(--gs-serif);
  font-size: 25px;
  font-weight: 500;
  color: var(--gs-cream);
  line-height: 1.15;
  margin-bottom: 20px;
}

.sks-gs__sizepanel-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sks-gs__sizepanel-step {
  border-top: 1px solid rgba(245, 240, 232, .3);
  padding-top: 16px;
}

.sks-gs__sizepanel-step span {
  font-size: 12px;
  color: var(--gs-tan);
  display: block;
  margin-bottom: 8px;
}

.sks-gs__sizepanel-step h4 {
  font-family: var(--gs-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--gs-cream);
  margin-bottom: 6px;
}

.sks-gs__sizepanel-step p {
  font-size: 13.5px;
  color: rgba(245, 240, 232, .78);
  line-height: 1.55;
  margin: 0;
}

/* ---------- side by side ---------- */
.sks-gs__compare {
  padding: 76px 0;
  background: var(--gs-parch);
}

.sks-gs__compare-scroll {
  overflow-x: auto;
}

.sks-gs__compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #D5CABA;
  min-width: 720px;
  table-layout: fixed;
}

.sks-gs__compare-table th,
.sks-gs__compare-table td {
  border-bottom: 1px solid var(--gs-line);
  border-left: 1px solid var(--gs-line);
  vertical-align: middle;
  text-align: left;
}

.sks-gs__compare-table tr:last-child th,
.sks-gs__compare-table tr:last-child td {
  border-bottom: 0;
}

.sks-gs__compare-corner {
  width: 168px;
  background: var(--gs-parch);
  border-left: 0;
}

.sks-gs__compare-label {
  width: 168px;
  border-left: 0;
  padding: 14px 16px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gs-muted);
  font-weight: 600;
  background: #FBF7F0;
}

.sks-gs__compare-head {
  padding: 16px 14px;
  cursor: pointer;
  transition: background .15s;
  font-weight: 400;
}

.sks-gs__compare-head:hover,
.sks-gs__compare-head:focus-visible {
  background: #FBF7F0;
  outline: none;
}

.sks-gs__compare-head .short {
  display: block;
  font-family: var(--gs-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.2;
  margin-bottom: 3px;
}

.sks-gs__compare-head .pieces {
  display: block;
  font-size: 11.5px;
  color: var(--gs-muted);
}

.sks-gs__compare-cell {
  padding: 14px;
  font-size: 13px;
  color: var(--gs-body);
}

.sks-gs__compare-cell--price {
  font-family: var(--gs-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--gs-rust);
}

.sks-gs__compare-cell--price s {
  font-size: 11.5px;
  color: #9A9088;
  font-family: var(--gs-sans);
  font-weight: 400;
  margin-left: 6px;
}

.sks-gs__compare-cell--best {
  font-size: 12px;
  line-height: 1.45;
  color: var(--gs-muted);
}

.sks-gs__compare-cell--was s {
  color: #9A9088;
}

.sks-gs__compare-cell--save {
  color: #1A5C2A;
  font-weight: 500;
}

.sks-gs__compare-cell.is-none {
  color: #1A5C2A;
  font-weight: 500;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---------- time it right ---------- */
.sks-gs__timing {
  padding: 76px 0;
}

.sks-gs__timing-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #D5CABA;
  background: #fff;
  max-width: 800px;
  margin: 0 auto;
}

.sks-gs__timing-left {
  padding: 30px;
  border-right: 1px solid #D5CABA;
}

.sks-gs__timing-left label {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gs-muted);
  margin-bottom: 9px;
}

.sks-gs__timing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.sks-gs__timing-chip {
  padding: 8px 13px;
  border: 1px solid #D5CABA;
  background: #fff;
  font-size: 12.5px;
  color: var(--gs-body);
  cursor: pointer;
  transition: all .15s;
}

.sks-gs__timing-chip:hover {
  border-color: var(--gs-rust);
  color: var(--gs-rust);
}

.sks-gs__timing-chip.is-on {
  background: var(--gs-navy);
  border-color: var(--gs-navy);
  color: #fff;
}

.sks-gs__timing-date {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #D5CABA;
  background: var(--gs-parch);
  font-family: var(--gs-sans);
  font-size: 16px;
  color: var(--gs-navy);
}

.sks-gs__timing-right {
  padding: 30px;
  background: var(--gs-parch);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sks-gs__timing-orderby-lbl {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gs-muted);
  margin-bottom: 6px;
}

.sks-gs__timing-orderby {
  font-family: var(--gs-serif);
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 600;
  color: var(--gs-rust);
  line-height: 1.05;
}

.sks-gs__timing-orderby.is-late {
  color: #8B1F1F;
}

.sks-gs__timing-note {
  font-size: 13px;
  color: var(--gs-body);
  margin-top: 10px;
  line-height: 1.5;
}

/* ---------- reviews bar ---------- */
.sks-gs__reviews {
  padding: 76px 0;
}

.sks-gs__reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sks-gs__review {
  background: #fff;
  border: 1px solid #D5CABA;
  padding: 24px;
}

.sks-gs__review-stars {
  color: var(--gs-gold);
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 11px;
}

.sks-gs__review-quote {
  font-family: var(--gs-serif);
  font-size: 15px;
  color: var(--gs-body);
  line-height: 1.6;
  margin: 0 0 10px;
  /* Clamp to ~6 lines; JS reveals a "Read more" toggle when it overflows. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sks-gs__review-quote.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.sks-gs__review-readmore {
  display: inline-block;
  margin: 0 0 14px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gs-navy);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sks-gs__review-readmore:hover {
  color: var(--gs-gold);
}

/* display:inline-block above would otherwise override the native [hidden],
   leaving the button visible on short reviews. Force it hidden when set. */
.sks-gs__review-readmore[hidden] {
  display: none !important;
}

.sks-gs__review-by {
  font-size: 12px;
  color: var(--gs-muted);
}

.sks-gs__review-by b {
  color: var(--gs-navy);
  font-weight: 500;
}

.sks-gs__review-title {
  font-family: var(--gs-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--gs-navy);
  margin: 0 0 8px;
}

.sks-gs__reviews-more {
  display: block;
  margin: 28px auto 0;
  padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--gs-navy);
  color: var(--gs-navy);
  font-size: 13px;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.sks-gs__reviews-more:hover {
  background: var(--gs-navy);
  color: #fff;
}

.sks-gs__reviews-note {
  text-align: center;
  font-size: 12px;
  color: #9A9088;
  margin-top: 24px;
}

@media (max-width:820px) {
  .sks-gs__reviews-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* ---------- faq ---------- */
.sks-gs__faq {
  padding: 76px 0;
  background: var(--gs-parch);
}

.sks-gs__faq h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  text-align: center;
  color: var(--gs-navy);
  margin-bottom: 34px;
}

.sks-gs__faq-list {
  max-width: 820px;
  margin: 0 auto;
}

.sks-gs__faq-item {
  border-bottom: 1px solid #D5CABA;
}

.sks-gs__faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--gs-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--gs-navy);
  cursor: pointer;
  line-height: 1.3;
}

.sks-gs__faq-q svg {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: var(--gs-rust);
  fill: none;
  stroke-width: 2.2;
  transition: transform .2s;
}

.sks-gs__faq-item.is-open .sks-gs__faq-q svg {
  transform: rotate(45deg);
}

.sks-gs__faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.sks-gs__faq-item.is-open .sks-gs__faq-a {
  max-height: 500px;
}

.sks-gs__faq-a-in {
  padding: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gs-body);
  max-width: 700px;
}

/* ---------- final cta ---------- */
.sks-gs__final {
  background: var(--gs-navy2);
  color: var(--gs-cream);
  text-align: center;
  padding: 76px 0;
}

.sks-gs__final h2 {
  color: var(--gs-cream);
  font-family: var(--gs-serif);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 auto 14px;
}

.sks-gs__final h2 em {
  font-style: italic;
  color: var(--gs-tan);
}

.sks-gs__final p {
  color: var(--gs-cream);
  opacity: .88;
  font-size: 16px;
  margin: 0 auto 28px;
  max-width: 560px;
  line-height: 1.5;
}

.sks-gs__final-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--gs-cream);
  color: var(--gs-rust);
  border: 0;
  cursor: pointer;
  font-family: var(--gs-sans);
  transition: background .15s;
}

.sks-gs__final-cta:hover {
  background: #fff;
}

/* ---------- responsive ---------- */
@media (max-width:1180px) {
  .sks-gs__sets-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:1000px) {
  .sks-gs__hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sks-gs__hero h1 {
    font-size: 40px;
  }

  .sks-gs__sets-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sks-gs__guide-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sks-gs__band-row {
    grid-template-columns: 1fr;
  }

  .sks-gs__sizing-grid {
    grid-template-columns: 1fr;
  }

  .sks-gs__timing-card {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .sks-gs__timing-left {
    border-right: 0;
    border-bottom: 1px solid #D5CABA;
  }
}

@media (max-width:640px) {
  .sks-gs__wrap {
    padding: 0 16px;
  }

  .sks-gs__hero-grid {
    padding-top: 40px;
    padding-bottom: 36px;
  }

  .sks-gs__hero h1 {
    font-size: 32px;
  }

  .sks-gs__intro h2,
  .sks-gs__guide h2,
  .sks-gs__band h2,
  .sks-gs__timing h2,
  .sks-gs__faq h2,
  .sks-gs__final h2,
  .sks-gs__sec-head h2 {
    font-size: 26px;
  }

  .sks-gs__sets-grid,
  .sks-gs__guide-grid {
    grid-template-columns: 1fr;
  }

  .sks-gs__spec-notes {
    grid-template-columns: 1fr;
  }

  .sks-gs__spec-row {
    grid-template-columns: 1fr 90px 74px;
  }

  .sks-gs__includes-grid {
    grid-template-columns: 1fr;
  }

  /* Hero price box: full-width, cleaner wrap on phones */
  .sks-gs__hero-price {
    display: flex;
    width: 100%;
    gap: 6px 10px;
    padding: 14px 16px;
  }

  .sks-gs__hero-price .now {
    font-size: 28px;
  }

  .sks-gs__hero-price .was {
    white-space: nowrap;
  }

  .sks-gs__hero-price .save {
    margin-left: auto;
    align-self: center;
  }
}


/* ============================================================
   Package builder — cards + configurator panel (package model)
   ============================================================ */
.sks-gs__packages {
  padding: 80px 0;
  background: var(--gs-parch);
}

/* Package selection cards — matched element-for-element to the reference UI:
   five across; 8px card padding; a tall 4/5 image (product shown in full, not
   cropped) inset on white; flush save badge; sizing tag with a top divider. */
.sks-gs__pkg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 44px;
}

.sks-gs__pkg-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--gs-white);
  border: 1px solid #D5CABA;
  border-radius: 0;
  cursor: pointer;
  padding: 8px;
  transition: .18s;
  font-family: var(--gs-sans);
}

.sks-gs__pkg-card:hover {
  box-shadow: 0 14px 34px rgba(40, 30, 10, .13);
  transform: translateY(-2px);
  border-color: var(--gs-rust);
}

.sks-gs__pkg-media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: 9px;
  background: #fff;
  flex: none;
}

.sks-gs__pkg-media img,
.sks-gs__pkg-media svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  display: block;
}

.sks-gs__pkg-save {
  position: absolute;
  top: 8px;
  right: 0;
  background: #8B1F1F;
  color: #F5F0E8;
  font: 600 10px/1 var(--gs-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 0;
}

.sks-gs__pkg-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sks-gs__pkg-pieces {
  font: 600 10px/1 var(--gs-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gs-muted);
  margin-bottom: 3px;
}

.sks-gs__pkg-body h3 {
  font-family: var(--gs-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.2;
  margin: 0 0 4px;
}

.sks-gs__pkg-sub {
  font: 400 11.5px/1.4 var(--gs-sans);
  color: var(--gs-muted);
  margin: 0;
}

.sks-gs__pkg-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 9px;
}

.sks-gs__pkg-price .now {
  font-family: var(--gs-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--gs-rust);
}

.sks-gs__pkg-price .was {
  font: 400 11.5px/1 var(--gs-sans);
  color: #9A9088;
  text-decoration: line-through;
}

.sks-gs__pkg-sizing {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gs-line);
  font: 400 10px/1.3 var(--gs-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gs-muted);
}

.sks-gs__pkg-sizing.is-none {
  color: #1A5C2A;
  font-weight: 500;
}

.sks-gs__pkg-empty {
  padding: 44px;
  text-align: center;
  color: var(--gs-body);
  background: var(--gs-white);
  border: 1px dashed var(--gs-tan);
  border-radius: 2px;
  margin-top: 24px;
}

@media (max-width:1100px) {
  .sks-gs__pkg-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:760px) {
  .sks-gs__pkg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* configurator panel (modal) */
.sks-gs__panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
}

.sks-gs__panel[hidden] {
  display: none;
}

.sks-gs__panel-scrim {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, .55);
}

.sks-gs__panel-box {
  position: relative;
  background: var(--gs-white);
  border-radius: 3px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}

.sks-gs__panel-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--gs-line);
}

.sks-gs__panel-eyebrow {
  font: 600 10.5px/1 var(--gs-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gs-rust);
  margin-bottom: 7px;
}

.sks-gs__panel-hd h2 {
  font-family: var(--gs-serif);
  font-size: 25px;
  color: var(--gs-navy);
}

.sks-gs__panel-x {
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--gs-cream);
  border-radius: 3px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--gs-body);
  flex: none;
}

.sks-gs__panel-x:hover {
  background: var(--gs-parch);
}

.sks-gs__panel-blurb {
  font: 400 14px/1.6 var(--gs-sans);
  color: var(--gs-body);
  margin: 0;
  padding: 12px 24px 0;
}

.sks-gs__products {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The form carries the .sks-party scope (for its design tokens) but must not
   paint the party paper background behind our white card. */
.sks-gs__build-right .sks-gs__products {
  background: transparent;
}

.sks-gs__product {
  border: 1px solid var(--gs-line);
  border-radius: 3px;
  padding: 15px;
}

.sks-gs__product[data-unavailable] {
  opacity: .5;
}

.sks-gs__product-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}

.sks-gs__product-img {
  width: 54px;
  height: 54px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--gs-parch);
  flex: none;
}

.sks-gs__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sks-gs__product-type {
  font: 600 10px/1 var(--gs-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gs-muted);
  margin-bottom: 3px;
}

.sks-gs__product-name {
  font-family: var(--gs-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--gs-navy);
}

.sks-gs__product-price {
  font: 600 12.5px/1 var(--gs-sans);
  color: var(--gs-rust);
  margin-top: 3px;
}

.sks-gs__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sks-gs__opts-none {
  font: 400 12px/1.4 var(--gs-sans);
  color: var(--gs-muted);
}

.sks-gs__opt {
  min-width: 0;
}

.sks-gs__opt.is-bad select,
.sks-gs__opt.is-bad input {
  border-color: #B91C1C;
}

.sks-gs__opt-lbl {
  font: 600 11px/1.3 var(--gs-sans);
  letter-spacing: .03em;
  color: var(--gs-body);
  margin-bottom: 6px;
}

.sks-gs__opt-lbl .req {
  color: var(--gs-rust);
}

.sks-gs__opt select,
.sks-gs__opt-num input,
.sks-gs__opt>input[type=text] {
  width: 100%;
  background: var(--gs-white);
  border: 1px solid var(--gs-line);
  border-radius: 2px;
  padding: 11px 13px;
  font: 400 13.5px/1.2 var(--gs-sans);
  color: var(--gs-ink);
}

.sks-gs__opt select:focus,
.sks-gs__opt input:focus {
  outline: none;
  border-color: var(--gs-rust);
}

.sks-gs__opt-sel {
  position: relative;
}

.sks-gs__opt-sel select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A726B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
  cursor: pointer;
}

.sks-gs__opt-num {
  position: relative;
  display: flex;
  align-items: center;
}

.sks-gs__opt-num input {
  padding-right: 40px;
}

.sks-gs__opt-num span {
  position: absolute;
  right: 12px;
  font: 600 11px/1 var(--gs-sans);
  color: var(--gs-muted);
  pointer-events: none;
}

.sks-gs__panel-foot {
  border-top: 1px solid var(--gs-line);
  padding: 16px 24px 20px;
  background: var(--gs-cream);
}

.sks-gs__panel-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.sks-gs__panel-total span {
  font: 400 13px/1 var(--gs-sans);
  color: var(--gs-body);
}

.sks-gs__panel-total strong {
  font-family: var(--gs-serif);
  font-size: 25px;
  color: var(--gs-ink);
}

.sks-gs__panel-add {
  width: 100%;
  background: var(--gs-rust);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 15px;
  font: 600 13.5px/1 var(--gs-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .15s;
}

.sks-gs__panel-add:hover {
  background: #a04808;
}

.sks-gs__panel-add:disabled {
  opacity: .7;
  cursor: default;
}

.sks-gs__panel-err {
  margin-top: 8px;
  font: 600 12.5px/1.4 var(--gs-sans);
  color: #B91C1C;
  text-align: center;
}

.sks-gs__panel-promises {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sks-gs__panel-promises li {
  font: 400 12px/1.4 var(--gs-sans);
  color: var(--gs-muted);
}

.sks-gs__panel-promises li.is-gold {
  color: var(--gs-gold);
}

@media (max-width:640px) {
  .sks-gs__packages {
    padding: 44px 0;
  }

  .sks-gs__opts {
    grid-template-columns: 1fr;
  }

  .sks-gs__panel {
    padding: 0;
  }

  .sks-gs__panel-box {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }
}


/* ---------- inline configurator: preview, active card, summary blurb ---------- */
.sks-gs__pkg-card.is-active {
  border-color: var(--gs-rust);
  box-shadow: 0 0 0 1px var(--gs-rust);
}

.sks-gs__preview {
  margin: 0;
}

.sks-gs__preview img {
  width: 100%;
  display: block;
  aspect-ratio: 3/4;
  object-fit: contain;
  background: #fff;
}

.sks-gs__preview img[hidden] {
  display: none;
}

.sks-gs__summary-blurb {
  font: 400 12.5px/1.5 var(--gs-sans);
  color: var(--gs-body);
  margin: 0;
  padding: 12px 18px 0;
}

.sks-gs__summary-blurb[hidden] {
  display: none;
}

.sks-gs__panel-err {
  margin: 8px 18px 0;
  font: 600 12px/1.4 var(--gs-sans);
  color: #B91C1C;
}

.sks-gs__panel-err:empty {
  display: none;
}

/* Package configurator — matches the party outfit builder's right side:
   one white card (.sks-party-man) holding numbered outfit blocks. */
.sks-gs-pack {
  margin-bottom: 0;
}

.sks-gs-packbd {
  padding: 6px 16px 18px;
}

.sks-gs-obhint {
  margin: 0 0 10px;
}

/* The party's swatch grid is repeat(8,1fr) — sized for its many accessories.
   A gift-set type group has only a few products, so pin the tiles to the
   party's real rendered size (≈84–92px) and pack them from the left, instead
   of squeezing them into 1/8-width slivers. Below 640px the shared party rule
   (repeat(3,1fr)) takes over, matching the party on mobile. */
@media (min-width:641px) {
  .sks-gs-packbd .sks-party-accgrid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 92px));
    justify-content: start;
  }
}

/* Measurement box that also holds the product swatches (type title on top,
   swatches, then the selected piece's fields). Pad the swatches to match the
   field grid's own 14px padding; a soft rule separates swatches from fields. */
.sks-gs-measbox .sks-party-accgrid {
  padding: 14px;
}

.sks-gs-measbox .sks-gs-optslot:not(:empty) {
  border-top: 1px solid var(--gs-line, #E4DBCC);
}

/* ── Configurator steps (1 Tartan · 2 Sizing · 3 Gift & delivery) ── */
.sks-gs__steps {
  position: sticky;
  top: 0px;
  z-index: 20;
  display: flex;
  gap: 6px;
  background: var(--gs-cream);
  padding: 10px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #D5CABA;
}

.sks-gs__step-pip {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 2px;
  color: inherit;
  text-decoration: none;
}

.sks-gs__step-pip .bar {
  height: 3px;
  background: #D5CABA;
  transition: background .18s;
}

.sks-gs__step-pip.is-active .bar {
  background: var(--gs-rust);
}

.sks-gs__step-pip .lbl {
  font: 400 11px/1 var(--gs-sans);
  letter-spacing: .04em;
  color: var(--gs-muted);
}

.sks-gs__step-pip .lbl b {
  color: var(--gs-rust);
  margin-right: 4px;
}

.sks-gs__step {
  padding: 26px 0;
  border-bottom: 1px solid #D5CABA;
  scroll-margin-top: 120px;
}

.sks-gs__step--last {
  border-bottom: 0;
}

.sks-gs__step[hidden] {
  display: none !important;
}

.sks-gs__step-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.sks-gs__step-hd .n {
  font: 600 12px/1 var(--gs-sans);
  letter-spacing: .06em;
  color: var(--gs-rust);
}

.sks-gs__step-hd h3 {
  font-family: var(--gs-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--gs-navy);
  margin: 0;
}

.sks-gs__step-desc {
  font: 400 14px/1.5 var(--gs-sans);
  color: var(--gs-muted);
  margin: 0 0 18px;
}

/* Tartan box — custom picker (assets/sks-gift-tartan.js). */
.sks-gs__tartan-picker[hidden] {
  display: none !important;
}

/* Selected-sett panel — white card, solid rust border. */
.gt-selected {
  display: flex;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--gs-rust);
  background: #fff;
  padding: 14px;
  margin-bottom: 18px;
}

.gt-selected[hidden] {
  display: none;
}

.gt-sel-sw {
  width: 88px;
  height: 88px;
  flex: none;
  border: 1px solid #D5CABA;
  background: #E8DFD0 center/cover no-repeat;
  display: block;
}

.gt-sel-info {
  flex: 1;
  min-width: 0;
}

.gt-sel-eyebrow {
  font: 600 10px/1 var(--gs-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gs-rust);
  margin-bottom: 3px;
}

.gt-sel-name {
  font-family: var(--gs-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.2;
}

.gt-sel-meta {
  font: 400 12px/1.4 var(--gs-sans);
  color: var(--gs-muted);
  margin-top: 5px;
}

.gt-sel-runs {
  flex: none;
  text-align: right;
}

.gt-sel-runs-lbl {
  font: 400 11px/1 var(--gs-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gs-muted);
  margin-bottom: 4px;
}

.gt-sel-runs-val {
  font-family: var(--gs-serif);
  font-size: 20px;
  color: var(--gs-navy);
}

/* Search + clear. */
.gt-searchrow {
  display: flex;
  gap: 9px;
  margin-bottom: 12px;
}

.gt-search {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #D5CABA;
  background: #fff;
  font: 400 14px/1.2 var(--gs-sans);
  color: var(--gs-ink);
}

.gt-search:focus {
  outline: none;
  border-color: var(--gs-rust);
  box-shadow: 0 0 0 3px rgba(184, 82, 10, .1);
}

.gt-clearbtn {
  flex: none;
  padding: 0 16px;
  border: 1px solid #D5CABA;
  background: #fff;
  font: 400 12.5px/1 var(--gs-sans);
  color: var(--gs-body);
  cursor: pointer;
}

.gt-clearbtn:hover {
  border-color: var(--gs-rust);
  color: var(--gs-rust);
}

.gt-note {
  font: 400 12.5px/1.5 var(--gs-sans);
  color: var(--gs-muted);
  margin: 0 0 14px;
}

/* Browse-all button (top-right of the tartan box). */
.gt-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.gt-browse {
  background: #fff;
  border: 1px solid #D5CABA;
  padding: 8px 14px;
  cursor: pointer;
  font: 600 12px/1 var(--gs-sans);
  color: var(--gs-rust);
  letter-spacing: .02em;
}

.gt-browse:hover {
  border-color: var(--gs-rust);
}

/* Browse-all button placed at the bottom of the tartan grid (like the other
   outfit templates). */
.gt-foot {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.gt-browse--full {
  width: 100%;
  max-width: 340px;
  padding: 12px 18px;
  text-align: center;
  font-size: 13px;
}

/* Browse-all uses the shared product/outfit "Browse all tartans" modal
   (.tm-overlay from sks-tartan-picker). We render that snippet only for its
   modal — its inline picker UI is hidden here. */
.sks-gs__reused-picker .sks-tartan-picker {
  display: none !important;
}

/* ── What's in the box — display-only summary of the selected pieces ── */
.sks-gs__box {
  padding: 80px 0;
  background: var(--gs-parch);
}

.sks-gs__box-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 44px;
}

.sks-gs__box-card {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid #D5CABA;
  padding: 12px;
}

.sks-gs__box-img {
  width: 64px;
  height: 64px;
  flex: none;
  overflow: hidden;
  background: #fffff;
}

.sks-gs__box-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sks-gs__box-ph {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #E8DFD0, #DDD0BB);
}

.sks-gs__box-cinfo {
  flex: 1;
  min-width: 0;
}

.sks-gs__box-name {
  font-family: var(--gs-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.25;
}

.sks-gs__box-type {
  font: 400 12.5px/1.4 var(--gs-sans);
  color: var(--gs-muted);
  text-transform: capitalize;
}

.sks-gs__box-price {
  font: 400 13px/1 var(--gs-sans);
  color: var(--gs-muted);
  white-space: nowrap;
}

.sks-gs__box-grid.is-save .sks-gs__box-price {
  text-decoration: line-through;
}

.sks-gs__box-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #D5CABA;
}

.sks-gs__box-foot-price {
  font: 400 15px/1.5 var(--gs-sans);
  color: var(--gs-body);
}

.sks-gs__box-foot-price s {
  color: #9A9088;
}

.sks-gs__box-foot-price b {
  font-family: var(--gs-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--gs-rust);
}

.sks-gs__box-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  text-decoration: none;
  font: 500 13px/1 var(--gs-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--gs-navy);
  color: var(--gs-cream);
}

.sks-gs__box-cta:hover {
  background: #16222e;
}

@media (max-width: 640px) {
  .sks-gs__box {
    padding: 44px 0;
  }

  .sks-gs__box-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Side by side — compare table (columns = packages) ── */
.sks-gs__compare {
  padding: 80px 0;
  background: var(--gs-parch);
}

.sks-gs__cmp-wrap {
  overflow-x: auto;
  margin-top: 44px;
  -webkit-overflow-scrolling: touch;
}

.sks-gs__cmp {
  display: grid;
  min-width: 820px;
  background: #fff;
  border: 1px solid #D5CABA;
}

.sks-gs__cmp-corner {
  background: var(--gs-parch);
  border-bottom: 1px solid #D5CABA;
}

.sks-gs__cmp-head {
  display: block;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #D5CABA;
  padding: 16px 18px;
  cursor: pointer;
  font-family: var(--gs-sans);
}

.sks-gs__cmp-head:hover {
  background: var(--gs-cream);
}

.sks-gs__cmp-head.is-active {
  box-shadow: inset 0 3px 0 var(--gs-rust);
}

.sks-gs__cmp-head-name {
  display: block;
  font-family: var(--gs-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.2;
  margin-bottom: 4px;
}

.sks-gs__cmp-head-sub {
  display: block;
  font: 400 11.5px/1 var(--gs-sans);
  color: var(--gs-muted);
}

.sks-gs__cmp-label {
  background: var(--gs-parch);
  font: 500 10.5px/1.4 var(--gs-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gs-muted);
  padding: 15px 20px;
  border-bottom: 1px solid var(--gs-line);
}

.sks-gs__cmp-cell {
  padding: 15px 18px;
  font: 400 13px/1.4 var(--gs-sans);
  color: var(--gs-body);
  border-bottom: 1px solid var(--gs-line);
}

/* vertical separators on the set columns (not the label column / corner) */
.sks-gs__cmp-head,
.sks-gs__cmp>.sks-gs__cmp-cell:not(.sks-gs__cmp-label):not(.sks-gs__cmp-corner) {
  border-left: 1px solid var(--gs-line);
}

.sks-gs__cmp-cell.is-active {
  background: rgba(184, 82, 10, .05);
}

.sks-gs__cmp-cell.is-strong {
  font-family: var(--gs-serif);
  font-size: 16px;
  color: var(--gs-rust);
}

/* Swatch grid — labelled tiles, 4 across. */
.gt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.gt-tile {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid #D5CABA;
  background: #fff;
  padding: 0;
  cursor: pointer;
  font-family: var(--gs-sans);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}

.gt-tile:hover {
  border-color: var(--gs-rust);
}

.gt-tile.sel {
  border-color: var(--gs-rust);
  box-shadow: 0 0 0 1px var(--gs-rust);
}

.gt-tile-img {
  position: relative;
  aspect-ratio: 1;
  background: #1e2d3b center/cover no-repeat;
  display: block;
}

.gt-tile-selbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gs-rust);
  color: #fff;
  font: 600 10px/1 var(--gs-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 8px;
  text-align: center;
}

.gt-tile-name {
  font-family: var(--gs-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--gs-navy);
  line-height: 1.2;
  padding: 9px 10px 0;
}

.gt-tile-cat {
  font: 600 9.5px/1 var(--gs-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gs-muted);
  padding: 4px 10px 0;
}

.gt-tile-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 10px;
  margin-top: 6px;
  font: 400 10.5px/1.2 var(--gs-sans);
  color: var(--gs-muted);
}

.gt-tile-foot .gt-free {
  color: #1A5C2A;
  font-weight: 500;
}

.gt-tile-foot .gt-charge {
  color: var(--gs-rust);
  font-weight: 600;
}

.gt-loading,
.gt-empty,
.gt-more {
  grid-column: 1/-1;
  font: 400 13px/1.5 var(--gs-sans);
  color: var(--gs-muted);
  padding: 14px 2px;
}

.gt-more {
  text-align: center;
}

@media (max-width:900px) {
  .gt-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:640px) {
  .sks-gs__step-hd h3 {
    font-size: 20px;
  }

  .gt-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gt-selected {
    flex-wrap: wrap;
  }

  .gt-sel-runs {
    text-align: left;
  }

  .sks-gs__step-pip .lbl {
    font-size: 10px;
  }
}

/* Inline "+$X size surcharge" under a measurement field (product-page style). */
.sks-gs-sizesur {
  margin-top: 6px;
  font: 600 11.5px/1.3 var(--gs-sans);
  color: var(--gs-rust);
}

.sks-gs-sizesur[hidden] {
  display: none;
}

/* Selected product's options/measurements, shown under its swatch group. */
.sks-gs-optslot {
  margin-top: 12px;
}

.sks-gs-optslot:empty {
  display: none;
}

/* ────────────────────────────────────────────────────────────────────────
   Mobile overflow fix. The builder was rendering wider than the phone screen
   (each grid column ended up wider than the viewport → ~1 tile per row with a
   peek of the next). Grid/flex items default to min-width:auto, so they refuse
   to shrink below their content — force single-column builder, let every
   descendant shrink to 0, and clip any residual horizontal scroll.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sks-gs__build-grid {
    grid-template-columns: 1fr;
  }

  .sks-gs__build-left,
  .sks-gs__build-right {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 640px) {

  /* Let the whole configurator subtree shrink instead of forcing overflow. */
  .sks-gs__step,
  .sks-gs__tartan-picker,
  .gt,
  .sks-gs-pack,
  .sks-gs-packbd,
  .sks-party-ob,
  .sks-gs-optslot,
  .gt-grid,
  .sks-party-accgrid,
  .sks-party-mgrid {
    min-width: 0;
    max-width: 100%;
  }

  /* Correct column counts once the containers can shrink. */
  .sks-gs .gt-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sks-gs .sks-gs-packbd .sks-party-accgrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sks-gs .sks-gs__pkg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}