/* ============ SKS Great Kilt (Feileadh Mòr) — faithful to Great_Kilt_Configurator.html ============ */
.gk {
  --or: #B8520A;
  --or2: #D4681A;
  --navy: #2C3E50;
  --navy2: #1E2D3B;
  --cream: #F5F0E8;
  --cream2: #E8DFD0;
  --gold: #E8C9A8;
  --green: #1A5C2A;
  --red: #8B1F1F;
  --ink: #1A1A1A;
  --ink2: #4A4440;
  --mute: #9A9088;
  --mute2: #B8AFA4;
  --line: rgba(74, 68, 64, .14);
  --line2: rgba(74, 68, 64, .22);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}

.gk * {
  box-sizing: border-box
}

.gk h1,
.gk h2,
.gk h3,
.gk h4 {
  font-family: var(--serif);
  margin: 0;
  font-weight: 600;
  letter-spacing: -.01em
}

.gk em {
  font-style: italic;
  color: var(--or);
  font-weight: 400
}

.gk a {
  color: inherit
}

.gk input:focus,
.gk button:focus,
.gk select:focus {
  outline: none !important;
  box-shadow: none !important
}

.gk button {
  font-family: inherit
}

.gk-eyebrow {
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 12px
}

.gk-eyebrow--orange {
  color: var(--or)
}

.gk-eyebrow-sm {
  font: 500 9.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 5px
}

.gk-stars {
  color: var(--or);
  letter-spacing: 1px
}

.gk-stars--lg {
  font-size: 18px;
  letter-spacing: 2px
}

.gk-arr {
  display: inline-block
}

/* ══════════ PDP GRID ══════════ */
.gk-pdp {
  display: grid;
  /* Match sks-product-main.liquid's 2-column split (image vs details) */
  grid-template-columns: 1.27fr 1fr;
  background: #fff
}

/* ---- gallery ---- */
.gk-gallery {
  /* No right padding — image column hugs the divider, same as the product template */
  padding: 24px 0 24px 24px;
  display: flex;
  gap: 16px;
  align-self: start;
  position: sticky;
  top: 0
}

.gk-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 74px;
  flex-shrink: 0
}

.gk-thumb {
  aspect-ratio: 3/4;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--cream2);
  cursor: pointer;
  background-size: cover;
  background-position: center
}

.gk-thumb.is-active {
  border-color: var(--or)
}

.gk-hero {
  flex: 1;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream2);
  min-height: 500px
}

.gk-hero__cloth {
  position: absolute;
  inset: 0;
  background: var(--cream2)
}

/* active image drives the frame height (natural aspect, no crop) — same model
   as the other product template's .sks-gal-img.active */
.gk-hero__img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  z-index: 1
}

.gk-hero__badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
  align-items: flex-start
}

.gk-badge {
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.gk-badge--green {
  background: var(--green);
  color: #fff
}

.gk-badge--navy {
  background: var(--navy);
  color: var(--gold)
}

.gk-hero__plan {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 12px 15px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px
}

.gk-hero__plan-col {
  flex: 1;
  min-width: 0
}

.gk-hero__plan-col--r {
  text-align: right;
  flex: none
}

.gk-hero__plan-val {
  font: 600 15px/1.2 var(--serif);
  color: var(--ink)
}

/* ---- panel ---- */
.gk-panel {
  padding: 30px 28px;
  border-left: none;
  min-width: 0
}

.gk-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px
}

.gk-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/1 var(--sans);
  color: var(--ink2)
}

.gk-rating .gk-stars {
  font-size: 14px
}

.gk-rating a {
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 2px
}

.gk-sku {
  background: var(--cream);
  color: var(--mute);
  padding: 5px 10px;
  border-radius: 4px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .08em
}

.gk-kicker {
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 8px
}

.gk-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px
}

.gk-title {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.1;
  color: var(--ink);
  flex: 1;
  margin-bottom: 12px
}

.gk-title__sep {
  color: var(--mute);
  font-weight: 400
}

.gk-fav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid rgba(74, 68, 64, .22);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1
}

.gk-fav:hover {
  border-color: var(--or);
  color: var(--or)
}

.gk-lede {
  font: 300 14px/1.65 var(--sans);
  color: var(--ink2);
  margin: 0 0 22px
}

.gk-lede strong {
  font-weight: 500;
  color: var(--ink)
}

.gk-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px
}

.gk-price__now {
  font: 600 32px/1 var(--serif);
  color: var(--or)
}

.gk-price__was {
  font: 400 16px/1 var(--sans);
  color: var(--mute);
  text-decoration: line-through
}

.gk-price__save {
  background: var(--red);
  color: #fff;
  font: 500 11px/1 var(--sans);
  letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase
}

.gk-price__note {
  font: 400 12px/1.5 var(--sans);
  color: var(--mute);
  font-style: italic;
  margin: 0 0 22px
}

.gk-rule {
  height: 1px;
  background: var(--line);
  margin: 0 0 22px
}

/* sticky mini (mobile only) */
.gk-sticky {
  display: none;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid rgba(74, 68, 64, .16);
  margin: 0 -16px 16px;
  padding: 11px 16px 12px
}

.gk-sticky__sw {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  border: 1.5px solid var(--or);
  flex-shrink: 0;
  background: var(--cream2) center/cover
}

.gk-sticky__mid {
  flex: 1;
  min-width: 0
}

.gk-sticky__line {
  font: 500 11.5px/1.25 var(--sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.gk-sticky__sub {
  font: 300 10px/1.3 var(--sans);
  color: var(--mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.gk-sticky__price {
  font: 600 18px/1 var(--serif);
  color: var(--or);
  flex-shrink: 0
}

/* ---- steps ---- */
.gk-step {
  margin-bottom: 24px
}

.gk-step__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 8px
}

.gk-step__lbl {
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink2)
}

.gk-step__done {
  color: var(--mute);
  letter-spacing: .06em
}

/* Measurements step header — serif "Your measurements" + rule, matching the
   sks-product-main .sks-meas-head / .sks-meas-head-title treatment. */
.gk-step--meas .gk-step__hd {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 14px
}

.gk-step--meas .gk-step__lbl {
  font: 600 15px/1.1 var(--serif);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink)
}

.gk-step--meas .gk-step__done {
  display: none
}

.gk-step__link {
  background: none;
  border: 0;
  font: 500 11.5px/1 var(--sans);
  color: var(--or);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none
}

.gk-step__val {
  font: 500 11.5px/1 var(--sans);
  color: var(--or)
}

.gk-step__hint {
  font: 500 10px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute)
}

.gk-step__desc {
  font: 300 11.5px/1.5 var(--sans);
  color: var(--mute);
  margin: 0 0 11px
}

.gk-step__desc strong {
  color: var(--ink2);
  font-weight: 500
}

.gk-search {
  position: relative;
  margin-bottom: 12px
}

.gk-search input {
  width: 100%;
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 14px;
  font: 400 13.5px/1 var(--sans);
  color: var(--ink)
}

.gk-search input:focus {
  background: #fff;
  border-color: var(--or) !important
}

.gk-tgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-bottom: 12px
}

.gk-tcell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line2);
  background: var(--cream2) center/cover
}

.gk-tcell:hover {
  border-color: var(--or)
}

.gk-tcell--skeleton {
  background: linear-gradient(90deg, #eee4d4, #f3ebdd, #eee4d4);
  background-size: 200% 100%;
  animation: gkpulse 1.3s infinite;
  cursor: default
}

@keyframes gkpulse {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

.gk-tcell.is-sel {
  border-color: var(--or)
}

.gk-tcell.is-sel::after {
  content: "✓";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  background: var(--or);
  border-radius: 50%;
  color: #fff;
  font: 600 9px/15px var(--sans);
  text-align: center
}

.gk-tcell.is-sel::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--or);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5)
}

.gk-tselected {
  background: #FEF3EC;
  border: 1px solid rgba(184, 82, 10, .15);
  border-radius: 6px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 13px
}

.gk-tselected__sw {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 2px solid var(--or);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cream2) center/cover
}

.gk-tselected__meta {
  flex: 1;
  min-width: 0
}

.gk-tselected__name {
  font: 600 14px/1.2 var(--serif);
  color: var(--ink)
}

.gk-tselected__clan {
  font: 300 11.5px/1.4 var(--sans);
  color: var(--ink2);
  margin-top: 2px
}

.gk-tselected__change {
  background: none;
  border: 0;
  font: 500 11.5px/1 var(--sans);
  color: var(--or);
  cursor: pointer;
  flex-shrink: 0
}

/* measurements */
/* Yardage as the first field inside "Your measurements" */
.gk-yards-field {
  margin-bottom: 16px
}

.gk-yards-field__desc {
  margin-top: 2px;
  margin-bottom: 10px
}

.gk-meas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Match sks-product-main #sks-options-fields gap (14px row / 16px col) */
  gap: 14px 16px;
  margin-bottom: 14px
}

.gk-mf__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px
}

.gk-mf__label {
  /* Match sks-product-main's .tartan-lbl (uppercase, tracked, 10.5px) */
  font: 500 10.5px/1.3 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink2)
}

.gk-mf__label b {
  color: var(--or);
  font-weight: 500
}

/* "≈ N cm" hint to the right of the label — same as sks-product-main */
.gk-mf__cm {
  font: 400 11px/1 var(--sans);
  color: var(--mute);
  letter-spacing: .02em;
  white-space: nowrap
}

.gk-mf__range {
  font: 500 9.5px/1 var(--sans);
  letter-spacing: .06em;
  color: var(--mute);
  flex-shrink: 0;
  background: var(--cream);
  padding: 3px 6px;
  border-radius: 3px
}

.gk-mf__wrap {
  position: relative
}

.gk-mf__wrap input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 13px 56px 13px 14px;
  font: 400 13.5px/1 var(--sans);
  color: var(--ink);
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  transition: border-color .15s
}

.gk-mf__wrap input::-webkit-outer-spin-button,
.gk-mf__wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.gk-mf__wrap input:focus {
  background: #fff;
  border-color: var(--or) !important
}

.gk-mf__wrap.is-bad input {
  border-color: var(--red)
}

.gk-mf__wrap.is-good input {
  /* Match the product template — no green "valid" state, plain border */
  border-color: var(--line2)
}

.gk-mf__unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 12px/1 var(--sans);
  letter-spacing: .04em;
  color: var(--mute);
  pointer-events: none
}

.gk-mf__err {
  font: 500 10.5px/1.4 var(--sans);
  color: var(--red);
  margin-top: 5px
}

.gk-mf__hint {
  font: 300 10.5px/1.4 var(--sans);
  color: var(--mute);
  margin-top: 5px
}

/* Hide the per-field descriptive hint (label + input only). The size-tier
   ladder IS shown so the size surcharge appears on the field, same as other
   product templates. */
.gk-mf__hint {
  display: none !important
}

.gk-mf__ladder {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 7px
}

.gk-mf__tier {
  font: 500 10.5px/1.3 var(--sans)
}

.gk-mf__next {
  font: 300 9.5px/1.3 var(--sans);
  color: var(--mute)
}

.gk-mf--full {
  grid-column: 1/-1
}

/* Height sits at the end — right column, under the last field */
.gk-mf--end {
  grid-column: 2
}

/* Height field, moved to the end of the Finishing step (after Ends of cloth) */
.gk-finish__height {
  max-width: calc(50% - 6px);
  margin-top: 12px
}

.gk-cutbox {
  border: 1px solid rgba(74, 68, 64, .18);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream2)
}

.gk-cutbox__hd {
  padding: 10px 13px;
  background: var(--navy);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap
}

.gk-cutbox__hd span:first-child {
  font: 500 10px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold)
}

.gk-cutbox__hd span:last-child {
  font: 500 10.5px/1.3 var(--sans);
  color: #fff
}

.gk-cutbox__canvas {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/7;
  min-height: 180px
}

.gk-cutcanvas-el {
  display: block;
  width: 100%;
  height: 100%
}

.gk-cutbox__ft {
  padding: 10px 13px;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap
}

.gk-cutbox__ft span:first-child {
  font: 300 11px/1.4 var(--sans);
  color: var(--mute)
}

.gk-cutbox__ft span:last-child {
  font: 500 11.5px/1 var(--sans);
  color: var(--ink);
  flex-shrink: 0
}

/* cloth strip segments */
.gk-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden
}

.gk-seg__lbl {
  font: 500 9px/1.2 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  z-index: 2;
  padding: 0 4px
}

.gk-seg--belt {
  background: rgba(44, 62, 80, .55)
}

.gk-seg--plaid {
  border-left: 2px dashed rgba(255, 255, 255, .7)
}

/* yards */
.gk-yards {
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}

.gk-yard {
  position: relative;
  padding: 8px 10px;
  border: 1px solid var(--line2);
  border-radius: 5px;
  cursor: pointer;
  background: #fff;
  min-width: 62px;
  text-align: center
}

.gk-yard:hover {
  border-color: var(--or)
}

.gk-yard.is-sel {
  border: 2px solid var(--or);
  background: rgba(184, 82, 10, .07)
}

.gk-yard__n {
  font: 500 12.5px/1 var(--sans);
  color: var(--ink)
}

.gk-yard__d {
  font: 400 10px/1 var(--sans);
  color: var(--mute);
  margin-top: 4px
}

.gk-yard__b {
  font: 400 9px/1 var(--sans);
  color: var(--mute2);
  margin-top: 3px
}

.gk-yard__tag {
  position: absolute;
  top: -6px;
  right: -4px;
  font: 600 8px/1 var(--sans);
  letter-spacing: .04em;
  padding: 3px 4px;
  border-radius: 3px
}

.gk-yard__tag--fit {
  background: var(--green);
  color: #fff
}

.gk-yard__tag--full {
  background: var(--navy);
  color: var(--gold)
}

/* plaid over the shoulder */
.gk-plaid-grid {
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}
.gk-plaid {
  position: relative;
  padding: 8px 10px;
  border: 1px solid var(--line2);
  border-radius: 5px;
  cursor: pointer;
  background: #fff;
  min-width: 84px;
  text-align: center
}
.gk-plaid:hover {
  border-color: var(--or)
}
.gk-plaid.is-sel {
  border: 2px solid var(--or);
  background: rgba(184, 82, 10, .07)
}
.gk-plaid.is-disabled {
  opacity: .38;
  cursor: not-allowed;
  background: #faf7f2
}
.gk-plaid__n {
  font: 500 12.5px/1 var(--sans);
  color: var(--ink)
}
.gk-plaid__tag {
  font: 400 9px/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mute2);
  margin-top: 3px
}
.gk-plaid__got {
  font: 500 10.5px/1 var(--sans);
  color: var(--ink2, #4A4440);
  margin-top: 5px
}
.gk-plaid__cloth {
  font: 400 9.5px/1 var(--sans);
  color: var(--mute);
  margin-top: 3px
}
.gk-plaid__add {
  font: 500 10px/1 var(--sans);
  color: var(--or);
  margin-top: 4px
}

/* finishing */
.gk-finish {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.gk-fld {
  min-width: 0
}

.gk-fld__lbl {
  font: 500 10.5px/1.3 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: 6px
}

.gk-fld__lbl b {
  color: var(--or)
}

.gk-fld__sel {
  position: relative
}

.gk-fld__sel select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  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='%23726a5f' 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 14px center;
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 14px 42px 14px 14px;
  font: 400 14px/1.2 var(--sans);
  color: var(--ink);
  cursor: pointer
}

.gk-fld__sel select option {
  min-height: 40px;
  padding: 10px 12px;
  line-height: 1.8;
  color: var(--ink);
  background: #fff
}

.gk-fld__sel select:focus {
  outline: none;
  border-color: var(--or) !important;
  box-shadow: none
}

.gk-fld__sel.is-empty select {
  color: var(--mute)
}

.gk-fld__note {
  font: 300 10.5px/1.4 var(--sans);
  color: var(--mute);
  margin-top: 6px
}

.gk-finish__blurb {
  margin-top: 10px;
  background: var(--cream);
  border-radius: 6px;
  padding: 11px 13px;
  font: 300 11.5px/1.5 var(--sans);
  color: var(--ink2)
}

/* bundle */
.gk-bundle {
  margin-bottom: 18px;
  border: 1.5px solid var(--or);
  border-radius: 10px;
  background: linear-gradient(180deg, #FEF3EC 0%, #fff 60%);
  padding: 16px 18px
}

.gk-bundle__hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px
}

.gk-bundle__eyebrow {
  font: 600 10px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or)
}

.gk-bundle__save {
  background: var(--or);
  color: #fff;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px
}

.gk-bundle__title {
  font: 600 18px/1.2 var(--serif);
  color: var(--ink);
  margin-bottom: 3px
}

.gk-bundle__title em {
  font-style: italic;
  color: var(--or);
  font-weight: 400
}

.gk-bundle__sub {
  font: 300 12.5px/1.5 var(--sans);
  color: var(--ink2);
  margin: 0 0 13px
}

.gk-bundle__list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.gk-add {
  background: #fff;
  border: 1px solid rgba(74, 68, 64, .14);
  border-radius: 6px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  position: relative
}

.gk-add:hover {
  border-color: var(--or)
}

.gk-add__chk {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(74, 68, 64, .3);
  flex-shrink: 0;
  position: relative;
  background: #fff
}

.gk-add.is-on .gk-add__chk {
  background: var(--or);
  border-color: var(--or)
}

.gk-add.is-on .gk-add__chk::after {
  content: "✓";
  position: absolute;
  inset: 0;
  color: #fff;
  font: 600 11px/16px var(--sans);
  text-align: center
}

.gk-add__img {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cream) center/cover;
  border: 1px solid var(--line)
}

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

.gk-add__mid {
  flex: 1;
  min-width: 0
}

.gk-add__name {
  font: 500 12.5px/1.3 var(--sans);
  color: var(--ink)
}

.gk-add__note {
  font: 300 10.5px/1.4 var(--sans);
  color: var(--mute);
  margin-top: 2px
}

.gk-add__pr {
  text-align: right;
  flex-shrink: 0
}

.gk-add__now {
  font: 500 12.5px/1 var(--sans);
  color: var(--or)
}

.gk-add__was {
  font: 300 10.5px/1 var(--sans);
  color: var(--mute);
  text-decoration: line-through;
  margin-top: 3px
}

/* stock + cta */
.gk-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font: 500 12.5px/1 var(--sans);
  margin-bottom: 16px
}

/* CTA buttons — same design as the other product template's .sks-btn */
.gk-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px
}

.gk-cta__main,
.gk-cta__buy,
.gk-cta__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, background .15s, box-shadow .15s
}

.gk-cta__main svg,
.gk-cta__buy svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0
}

.gk-cta__main {
  background: var(--or);
  color: #fff
}

.gk-cta__main:hover {
  background: var(--or2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(184, 82, 10, .3)
}

.gk-cta__main:disabled {
  opacity: .7;
  cursor: default;
  transform: none;
  box-shadow: none
}

/* click-time validation line — same as .sks-required-error */
.gk-cta__err {
  display: none;
  margin-top: 2px;
  font-size: 12.5px;
  color: #B91C1C;
  font-weight: 500;
  text-align: center
}

.gk-cta__err.is-visible {
  display: block
}

.gk-cta__label {
  display: flex;
  flex-direction: column;
  align-items: center
}

.gk-cta__main-t {
  display: block;
  font: 500 13.5px/1.3 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase
}

.gk-cta__main-s {
  display: block;
  font: 400 10.5px/1.3 var(--sans);
  letter-spacing: .02em;
  text-transform: none;
  opacity: .85;
  margin-top: 3px
}

.gk-cta__buy {
  background: var(--navy);
  color: #fff
}

.gk-cta__buy:hover {
  background: var(--navy2);
  transform: translateY(-1px)
}

.gk-cta__swatch {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line2)
}

.gk-cta__swatch:hover {
  border-color: var(--or);
  color: var(--or)
}

.gk-ship {
  background: #EAF3DE;
  border: 1px solid rgba(26, 92, 42, .2);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 18px
}

.gk-ship__msg {
  font: 500 12.5px/1.4 var(--sans);
  color: var(--green);
  margin-bottom: 8px
}

.gk-ship__bar {
  height: 5px;
  background: rgba(26, 92, 42, .18);
  border-radius: 3px;
  overflow: hidden
}

.gk-ship__fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width .3s
}

.gk-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden
}

.gk-info__cell {
  background: #fff;
  padding: 14px 12px;
  text-align: center
}

.gk-info__h {
  font: 600 13px/1.2 var(--serif);
  color: var(--ink);
  margin-bottom: 4px
}

.gk-info__s {
  font: 300 10.5px/1.4 var(--sans);
  color: var(--mute)
}

/* ══════════ DIFFERENCE BAND ══════════ */
/* Navy band — same height as the other product template's quote band (300px),
   with a photo + gradient wash behind (the design's band treatment). */
.gk-band {
  position: relative;
  min-height: 300px;
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 0 48px;
  overflow: hidden
}

.gk-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
  opacity: .26;
  z-index: 0
}

.gk-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #2C3E50 0%, #2C3E50 44%, rgba(44, 68, 80, .55) 100%);
  z-index: 1
}

.gk-band__inner {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center
}

.gk-band__copy {
  max-width: 760px;
  min-width: 0
}

.gk-band__eyebrow {
  color: var(--gold);
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 12px
}

.gk-band__h {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
  max-width: 640px
}

.gk-band__h em {
  color: var(--gold)
}

.gk-band__p {
  font: 300 16px/1.7 var(--sans);
  color: rgba(232, 223, 208, .82);
  margin: 16px 0 0;
  max-width: 62ch
}

.gk-band__numeral {
  text-align: right;
  min-width: 0
}

.gk-band__num {
  font: 600 150px/.92 var(--serif);
  color: rgba(232, 201, 168, .18);
  letter-spacing: -.04em
}

.gk-band__num-l {
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(232, 201, 168, .5);
  margin-top: 4px
}

/* ══════════ DESCRIPTION ══════════ */
.gk-desc {
  padding: 60px 40px;
  background: #fff
}

/* content centered at 1400px — same as the other product template (.sks-desc-wrap) */
.gk-desc__wrap {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px;
  align-items: start
}

.gk-desc__h {
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px
}

.gk-desc__p {
  font: 300 14px/1.7 var(--sans);
  color: var(--ink2);
  margin: 0 0 14px
}

/* metafield-rendered rich text (product.description / desc_body / complete.look) */
.gk-desc__body,
.gk-desc__complete {
  font: 300 14px/1.7 var(--sans);
  color: var(--ink2)
}

.gk-desc__body p,
.gk-desc__complete p {
  margin: 0 0 14px
}

.gk-desc__body a,
.gk-desc__complete a {
  color: var(--or);
  text-decoration: underline;
  text-underline-offset: 2px
}

.gk-desc__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--or);
  color: #fff;
  padding: 13px 24px;
  border-radius: 6px;
  font: 500 13.5px/1 var(--sans);
  letter-spacing: .04em;
  text-decoration: none;
  margin-top: 6px
}

.gk-desc__cta:hover {
  background: var(--or2)
}

.gk-feats {
  display: flex;
  flex-direction: column;
  gap: 13px
}

.gk-feat {
  display: flex;
  align-items: flex-start;
  gap: 11px
}

.gk-feat__ic {
  color: var(--green);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0
}

.gk-feat__t {
  font: 500 13.5px/1.35 var(--sans);
  color: var(--ink)
}

.gk-feat__s {
  font: 300 12px/1.45 var(--sans);
  color: var(--mute);
  margin-top: 2px
}

.gk-quote {
  font: 400 17px/1.6 var(--serif);
  font-style: italic;
  color: var(--ink);
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 3px solid var(--or)
}

.gk-minispec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden
}

.gk-minispec__cell {
  background: #fff;
  padding: 13px 14px
}

.gk-minispec__l {
  font: 500 9.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 5px
}

.gk-minispec__v {
  font: 600 15px/1.2 var(--serif);
  color: var(--ink)
}

/* ══════════ STATS ══════════ */
.gk-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--navy)
}

.gk-stat {
  padding: 34px 20px;
  text-align: center;
  border-right: 1px solid rgba(232, 223, 208, .12)
}

.gk-stat:last-child {
  border-right: 0
}

.gk-stat__n {
  font: 600 32px/1 var(--serif);
  color: var(--gold);
  margin-bottom: 7px
}

.gk-stat__l {
  font: 400 10.5px/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(232, 223, 208, .62)
}

/* ══════════ FAQ ══════════ */
.gk-faq {
  padding: 60px 40px;
  background: #fff
}

.gk-faq__head {
  margin-bottom: 32px;
  text-align: center
}

.gk-faq__h {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  color: var(--ink)
}

.gk-faq__list {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  border-top: 1px solid var(--line)
}

.gk-faq__item {
  border-bottom: 1px solid var(--line)
}

.gk-faq__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 19px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left
}

.gk-faq__q span:first-child {
  font: 500 15.5px/1.4 var(--sans);
  color: var(--ink)
}

.gk-faq__sign {
  font: 400 18px/1 var(--sans);
  color: var(--or);
  flex-shrink: 0
}

.gk-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease
}

.gk-faq__item.is-open .gk-faq__a {
  max-height: 400px
}

.gk-faq__a p {
  font: 300 14px/1.7 var(--sans);
  color: var(--ink2);
  margin: 0 0 22px;
  max-width: 74ch
}

/* ══════════ REVIEWS ══════════ */
.gk-reviews {
  padding: 60px 40px;
  background: var(--cream)
}

.gk-reviews__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px
}

.gk-reviews__score {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
  margin-inline: auto !important;
}

.gk-reviews__big {
  font: 600 58px/1 var(--serif);
  color: var(--ink)
}

.gk-reviews__meta {
  font: 300 12.5px/1.5 var(--sans);
  color: var(--mute);
  margin-top: 5px
}

.gk-reviews__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 210px
}

.gk-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 400 11px/1 var(--sans);
  color: var(--mute)
}

.gk-bar__s {
  width: 20px
}

.gk-bar__track {
  flex: 1;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden
}

.gk-bar__fill {
  height: 100%;
  background: var(--or);
  border-radius: 3px;
  display: block !important;
}

.gk-bar__p {
  width: 30px;
  text-align: right
}

.gk-reviews__write {
  background: var(--or);
  color: #fff;
  padding: 13px 24px;
  border-radius: 6px;
  font: 500 13.5px/1 var(--sans);
  letter-spacing: .04em;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.gk-reviews__write:hover {
  background: var(--or2)
}

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

.gk-rev {
  background: #f5f0e8;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px
}

.gk-rev__top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px
}

.gk-rev__ini {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 13px/1 var(--sans);
  flex-shrink: 0
}

.gk-rev__name {
  font: 500 13.5px/1.2 var(--sans);
  color: var(--ink)
}

.gk-rev__loc {
  font: 300 11.5px/1.3 var(--sans);
  color: var(--mute);
  margin-top: 2px
}

.gk-rev__stars {
  color: var(--or);
  font-size: 14px;
  letter-spacing: 1.5px;
  margin-bottom: 9px
}

.gk-rev__title {
  font: 600 15px/1.3 var(--serif);
  color: var(--ink);
  margin-bottom: 8px
}

.gk-rev__quote {
  font: 300 13px/1.6 var(--sans);
  color: var(--ink2);
  margin: 0 0 12px
}

.gk-rev__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 13px
}

.gk-rev__tag {
  background: var(--cream);
  color: var(--ink2);
  font: 400 10.5px/1 var(--sans);
  letter-spacing: .04em;
  padding: 5px 9px;
  border-radius: 4px
}

.gk-rev__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(74, 68, 64, .1);
  font: 300 11px/1.3 var(--sans);
  color: var(--mute)
}

.gk-rev__verified {
  color: var(--green);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px
}

/* ══════════ RELATED ══════════ */
.gk-related {
  padding: 60px 40px;
  background: #fff
}

.gk-related__head {
  margin-bottom: 28px
}

.gk-related__h {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  color: var(--ink)
}

.gk-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.gk-rel {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block
}

.gk-rel__media {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream2);
  margin-bottom: 13px;
  border: 1px solid rgba(74, 68, 64, .1)
}

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

.gk-rel__type {
  font: 400 10.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 5px
}

.gk-rel__name {
  font: 600 16px/1.25 var(--serif);
  color: var(--ink);
  margin-bottom: 6px
}

.gk-rel__price {
  display: flex;
  align-items: baseline;
  gap: 9px
}

.gk-rel__now {
  font: 500 14px/1 var(--sans);
  color: var(--or)
}

.gk-rel__was {
  font: 300 12px/1 var(--sans);
  color: var(--mute);
  text-decoration: line-through
}

/* ══════════ BROWSE MODAL ══════════ */
.gk-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, .55);
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  font-family: var(--sans)
}

.gk-modal__panel {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4)
}

.gk-modal__hd {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  align-items: center
}

.gk-modal__search {
  flex: 1;
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 14px;
  font: 400 14px/1 var(--sans);
  color: var(--ink)
}

.gk-modal__search:focus {
  background: #fff;
  border-color: var(--or);
  outline: none
}

.gk-modal__x {
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--cream);
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink2);
  flex-shrink: 0
}

.gk-modal__x:hover {
  background: var(--cream2)
}

.gk-modal__grid {
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px
}

.gk-mcell {
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden
}

.gk-mcell__sw {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--cream2) center/cover;
  margin-bottom: 6px
}

.gk-mcell.is-sel .gk-mcell__sw {
  border: 2px solid var(--or)
}

.gk-mcell__nm {
  font: 400 11.5px/1.3 var(--sans);
  color: var(--ink2);
  text-align: center
}

.gk-mcell:hover .gk-mcell__sw {
  border-color: var(--or)
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1024px) {
  .gk-desc__wrap {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .gk-reviews__grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .gk-related__grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:860px) {
  .gk-pdp {
    grid-template-columns: 1fr
  }

  .gk-gallery {
    position: static;
    padding: 16px;
    flex-direction: column-reverse
  }

  .gk-thumbs {
    flex-direction: row;
    width: auto
  }

  .gk-thumb {
    width: 64px
  }

  .gk-hero {
    min-height: 0
  }

  .gk-panel {
    border-left: 0;
    padding: 20px 16px
  }

  /* Mobile sticky mini-bar removed by request — its cut/measurement formula
     ("5 yd × 46″ · 30 pleats · 46″ waist · 24″ drop") duplicated the hero. */
  .gk-sticky {
    display: none
  }

  .gk-band {
    min-height: 0;
    padding: 0 20px
  }

  .gk-band__inner {
    padding: 40px 0;
    grid-template-columns: 1fr;
    gap: 8px
  }

  .gk-band__numeral {
    text-align: left
  }

  .gk-band__num {
    font-size: 96px
  }

  .gk-band__h {
    font-size: 27px
  }

  .gk-desc,
  .gk-faq,
  .gk-reviews,
  .gk-related {
    padding: 40px 20px
  }

  .gk-stats {
    grid-template-columns: repeat(2, 1fr)
  }

  .gk-stat:nth-child(odd) {
    border-right: 1px solid rgba(232, 223, 208, .12)
  }

  .gk-reviews__grid {
    grid-template-columns: 1fr
  }

  .gk-related__grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:520px) {
  .gk-tgrid {
    grid-template-columns: repeat(4, 1fr)
  }

  .gk-meas {
    grid-template-columns: 1fr
  }

  .gk-mf--end {
    grid-column: auto
  }

  .gk-finish__height {
    max-width: 100%
  }

  .gk-finish {
    grid-template-columns: 1fr
  }

  .gk-info {
    grid-template-columns: 1fr
  }

  .gk-info__cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
    gap: 10px
  }

  .gk-info__h {
    margin-bottom: 0
  }
}