/* sks-bundle.css — "Complete the look" upsell bundle */

.sks-bundle {
  --sb-amber: #B8520A;
  --sb-amber-l: #D4681A;
  --sb-amber-p: #FEF3EC;
  --sb-ivory: #F5F0E8;
  --sb-onyx: #1A1A1A;
  --sb-body: #4A4440;
  --sb-muted: #9A9088;
  --sb-rule: rgba(74, 68, 64, 0.14);
  --sb-rule2: rgba(74, 68, 64, 0.22);
  --sb-ok: #1F8B5E;
  --sb-white: #fff;
  --sb-r: 6px;
  --sb-rl: 10px;

  position: relative;
  margin-bottom: 18px;
  border: 1.5px solid var(--sb-amber);
  border-radius: var(--sb-rl);
  background: linear-gradient(180deg, var(--sb-amber-p) 0%, var(--sb-white) 60%);
  padding: 16px 18px;
  overflow: hidden;
  font-family: 'Jost', sans-serif;
}

.sks-bundle::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(184, 82, 10, .10) 0%, transparent 70%);
  pointer-events: none;
}

/* ─── Toggle (collapsed by default) ────────────────────────────── */
.sks-bundle__toggle {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.sks-bundle__toggle:focus-visible {
  outline: 2px solid var(--sb-amber);
  outline-offset: 2px;
  border-radius: 4px;
}

.sks-bundle__head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* Chevron is a direct child of .sks-bundle (position:relative), parked in the
   bottom-right corner of the box — level with the "+N more essentials" hint in
   the collapsed state. It forwards clicks to the header toggle via JS. */
.sks-bundle__chev {
  position: absolute;
  right: 16px;
  bottom: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(184, 82, 10, .08);
  color: var(--sb-amber);
  transition: transform .25s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.sks-bundle:not(.is-collapsed) .sks-bundle__chev {
  transform: rotate(180deg);
}

/* Expanded: reserve bottom space so the corner chevron never overlaps the
   price math ("You pay") that sits at the bottom of the open state. */
.sks-bundle:not(.is-collapsed) {
  padding-bottom: 46px;
}

.sks-bundle__body {
  margin-top: 12px;
}

/* Collapsed state shows a "peek" of the first bundle row so buyers can
   tell the section actually contains products (previously the closed
   state was just the heading + Bundle & save pill, which read as an
   inert banner). The JS still toggles `hidden` on the body element,
   but we forcibly display it in the collapsed state and hide only the
   supporting bits (pitch line, math totals, and every row past the
   first). Tapping the first row still toggles/opens its option panel
   via the existing click handler — no JS change needed. */
.sks-bundle.is-collapsed .sks-bundle__body[hidden] {
  display: block !important;
}

.sks-bundle.is-collapsed .sks-bundle__pitch,
.sks-bundle.is-collapsed .sks-bundle__math {
  display: none !important;
}

.sks-bundle.is-collapsed .sks-bundle__row-wrap:not(:first-child) {
  display: none !important;
}

/* Subtle "+N more" strip under the peek row, populated by sks-bundle.js
   once it knows the item count. Sits inside .sks-bundle__items so the
   spacing matches the row above and it's automatically hidden when
   the section expands (the not(:first-child) rule doesn't apply to
   this class because we exclude it explicitly below). */
.sks-bundle__peek-more {
  display: none;
  padding: 6px 12px 0;
  font-size: 11.5px;
  color: var(--sb-muted);
  letter-spacing: .02em;
  font-style: italic;
}

.sks-bundle.is-collapsed .sks-bundle__peek-more {
  display: block !important;
}

.sks-bundle.is-collapsed {
  /* Extra room so the corner expand arrow drops clearly below the last row
     instead of hugging it. */
  padding-bottom: 30px;
}

.sks-bundle__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 10px;
  flex-wrap: wrap;
}

.sks-bundle__eb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sb-amber);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}

.sks-bundle__save-pill {
  background: var(--sb-amber);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--sb-r);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sks-bundle__title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--sb-onyx);
  line-height: 1.2;
  margin: 0;
  display: inline-block;
}

.sks-bundle__title em {
  font-style: italic;
  color: var(--sb-amber);
  font-weight: 400;
}

.sks-bundle__pitch {
  font-size: 11.5px;
  color: var(--sb-muted);
  margin: 0 0 14px;
  line-height: 1.4;
}

.sks-bundle__pitch strong {
  color: var(--sb-ok);
  font-weight: 600;
  font-size: 12.5px;
}

/* ─── Bundle rows ──────────────────────────────────────────────── */
.sks-bundle__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.sks-bundle__row-wrap {
  background: var(--sb-white);
  border: 1px solid var(--sb-rule);
  border-radius: var(--sb-r);
  overflow: hidden;
  transition: .2s;
}

.sks-bundle__row-wrap.checked {
  border-color: var(--sb-amber);
  box-shadow: 0 0 0 2px rgba(184, 82, 10, .13);
}

.sks-bundle__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  cursor: pointer;
  transition: .15s;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.sks-bundle__row:hover {
  background: var(--sb-ivory);
}

.sks-bundle__row-wrap.checked .sks-bundle__row:hover {
  background: rgba(184, 82, 10, 0.04);
}

.sks-bundle__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--sb-rule2);
  border-radius: 50%;
  background: var(--sb-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 12px;
  font-weight: 600;
  transition: .2s;
}

.sks-bundle__row-wrap.checked .sks-bundle__check {
  background: var(--sb-amber);
  border-color: var(--sb-amber);
  color: #fff;
}

.sks-bundle__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sb-ivory);
}

.sks-bundle__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
  transition: .3s;
  background-color: white;
}

.sks-bundle__row-wrap:not(.checked) .sks-bundle__thumb img {
  opacity: .65;
  filter: grayscale(.3);
}

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

.sks-bundle__name {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sb-onyx);
  line-height: 1.3;
  margin-bottom: 2px;
}

.sks-bundle__price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  color: var(--sb-amber);
}

.sks-bundle__price .sks-bundle__strike {
  color: var(--sb-muted);
  text-decoration: line-through;
  font-family: 'Jost', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
}

.sks-bundle__save-tag {
  font-size: 10.5px;
  color: var(--sb-ok);
  font-weight: 500;
}

/* ─── Per-row options (collapsed by default) ───────────────────── */
.sks-bundle__options {
  background: var(--sb-ivory);
  border-top: 1px solid var(--sb-rule);
  padding: 12px;
  /* Two fields per row (like the main product measurements). Swatch options
     span the full width so their swatch grid keeps its size. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.sks-bundle__options>.sks-bundle__opt--swatch {
  grid-column: 1 / -1;
}

@media (max-width: 540px) {
  .sks-bundle__options {
    grid-template-columns: 1fr;
  }
}

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

.sks-bundle__opt-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sb-onyx);
  margin-bottom: 6px;
}

.sks-bundle__req {
  color: var(--sb-amber);
}

.sks-bundle__opt--invalid .sks-bundle__opt-head {
  color: #B91C1C;
}

.sks-bundle__opt--invalid input,
.sks-bundle__opt--invalid .sks-bundle__pill,
.sks-bundle__opt--invalid .sks-bundle__sw {
  border-color: #B91C1C !important;
}

/* Text input */
.sks-bundle__opt-input {
  position: relative;
  max-width: 240px;
}

.sks-bundle__opt-input input {
  width: 100%;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--sb-rule2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  color: var(--sb-onyx);
  background: var(--sb-white);
}

.sks-bundle__opt-input input:focus {
  outline: none;
  border-color: var(--sb-amber);
  box-shadow: 0 0 0 2px rgba(184, 82, 10, .12);
}

.sks-bundle__opt-unit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--sb-muted);
  pointer-events: none;
}

/* Pills (dropdown / radio) */
.sks-bundle__opt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sks-bundle__pill {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--sb-rule2);
  border-radius: 4px;
  background: var(--sb-white);
  font-size: 12px;
  color: var(--sb-body);
  font-weight: 500;
  cursor: pointer;
  transition: .15s;
}

.sks-bundle__pill:hover {
  border-color: var(--sb-amber);
  color: var(--sb-amber);
}

.sks-bundle__pill.selected {
  background: var(--sb-amber);
  border-color: var(--sb-amber);
  color: #fff;
}

/* Swatches */
.sks-bundle__opt-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

@media (max-width: 720px) {
  .sks-bundle__opt-swatches {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sks-bundle__sw {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: .2s;
  display: block;
}

.sks-bundle__sw:hover {
  border-color: var(--sb-amber);
}

.sks-bundle__sw.selected {
  border-color: var(--sb-amber);
  box-shadow: 0 0 0 2px rgba(184, 82, 10, .18);
}

.sks-bundle__sw-imgbox {
  position: relative;
  aspect-ratio: 1;
  display: block;
}

.sks-bundle__sw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

.sks-bundle__sw-blank {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #e6d8c8 0 6px, #d4c2ab 6px 10px);
  border-radius: 2px;
}

.sks-bundle__sw-tip {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  background: #2C3E50;
  color: #fff;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 4;
}

.sks-bundle__sw:hover .sks-bundle__sw-tip {
  opacity: 1;
}

.sks-bundle__sw-meta {
  display: none;
}

@media (max-width: 720px) {
  .sks-bundle__sw-tip {
    display: none;
  }

  .sks-bundle__sw-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    text-align: center;
    line-height: 1.2;
  }

  .sks-bundle__sw-name {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sb-onyx);
  }

  .sks-bundle__sw-price {
    font-size: 9.5px;
    color: var(--sb-amber);
  }
}

/* ─── Math block ───────────────────────────────────────────────── */
.sks-bundle__math {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--sb-rule2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.sks-bundle__math-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sks-bundle__math-row--save {
  color: var(--sb-ok);
  font-weight: 600;
}

.sks-bundle__math-row--total {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed var(--sb-rule2);
  font-weight: 500;
  font-size: 14px;
}

.sks-bundle__total {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--sb-amber);
  font-weight: 600;
}

.sks-bundle__strike {
  color: var(--sb-muted);
  text-decoration: line-through;
  font-size: 12px;
  font-weight: 400;
}

.sks-bundle__save-amt {
  font-family: 'Playfair Display', serif;
}

/* Grouped-by-product-type headings (opt-in via data-group-by-type) */
.sks-bundle__group {
  margin: 0 0 6px;
}

.sks-bundle__group+.sks-bundle__group {
  margin-top: 12px;
}

.sks-bundle__group-h {
  font: 600 10.5px/1 'Jost', system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4A4440;
  padding: 8px 2px 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(74, 68, 64, .14);
}

/* ===== Swatch style (data-bundle-style="swatch") — v2 accordion + cards ===== */
.sks-bundle__grp {
  border: 1px solid rgba(74, 68, 64, .16);
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}

.sks-bundle__grp+.sks-bundle__grp {
  margin-top: 10px;
}

.sks-bundle__grp-h {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 11px 16px;
  background: #F5F0E8;
  border: 0;
  border-bottom: 1px solid transparent;
  text-align: left;
}

.sks-bundle__grp.is-open .sks-bundle__grp-h {
  border-bottom-color: rgba(74, 68, 64, .12);
}

.sks-bundle__grp-h:hover {
  background: #EFE7DA;
}

.sks-bundle__grp-n {
  flex: 1;
  min-width: 0;
  font: 600 10.5px/1 'Jost', system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4A4440;
}

.sks-bundle__grp-opt {
  font: 500 10px/1 'Jost', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #71685F;
  flex-shrink: 0;
}

.sks-bundle__grp-caret {
  color: #71685F;
  display: flex;
  flex-shrink: 0;
  margin-left: 4px;
  transition: transform .15s;
}

.sks-bundle__grp.is-open .sks-bundle__grp-caret {
  transform: rotate(90deg);
}

.sks-bundle__grp-body {
  padding: 11px 13px 13px;
}

.sks-bundle__swgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 7px;
}

.sks-bundle__swcard {
  position: relative;
  min-width: 0;
}

.sks-bundle__swcard-btn {
  width: 100%;
  display: block;
  text-align: left;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(74, 68, 64, .16);
  border-radius: 8px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}

.sks-bundle__swcard-btn:hover {
  border-color: #B8520A;
  box-shadow: 0 4px 14px rgba(30, 45, 59, .13);
  transform: translateY(-2px);
}

.sks-bundle__swcard.checked .sks-bundle__swcard-btn {
  border-color: #B8520A;
  box-shadow: 0 0 0 1px #B8520A;
}

.sks-bundle__sw-img {
  display: block;
  aspect-ratio: 1;
  background: #ffffff;
  overflow: hidden;
}

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

.sks-bundle__sw-body {
  display: block;
  padding: 8px 9px 9px;
  border-top: 1px solid rgba(74, 68, 64, .08);
}

.sks-bundle__sw-name {
  display: block;
  font: 500 10.5px/1.3 'Jost', system-ui, sans-serif;
  color: #1A1A1A;
}

.sks-bundle__sw-price {
  display: block;
  margin-top: 5px;
  font: 600 12px/1 'Playfair Display', Georgia, serif;
  color: #B8520A;
}

.sks-bundle__sw-was {
  font: 400 9.5px/1 'Jost', system-ui, sans-serif;
  color: #71685F;
  text-decoration: line-through;
  margin-left: 4px;
}

.sks-bundle__sw-tick {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #B8520A;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}

.sks-bundle__swcard.checked .sks-bundle__sw-tick {
  display: flex;
}

.sks-bundle__swopts {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Two fields per row for a selected product's options; the product title and any
   swatch option span the full width. */
.sks-bundle__swopt {
  border-top: 1px solid rgba(74, 68, 64, .12);
  padding-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-items: start;
}

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

.sks-bundle__swopt>.sks-bundle__swopt-h,
.sks-bundle__swopt>.sks-bundle__opt--swatch {
  grid-column: 1 / -1;
}

.sks-bundle__swopt-h {
  font: 600 11px/1.2 'Jost', system-ui, sans-serif;
  color: #1A1A1A;
  margin-bottom: 8px;
}

@media (max-width:540px) {
  .sks-bundle__swopt {
    grid-template-columns: 1fr;
  }
}

@media (max-width:480px) {
  .sks-bundle__swgrid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  }
}