/* ============================================================
   SKS Tartan Inner Page — Highland Slate mockup, px-based
   (Dawn sets html font-size to 62.5%, so 1rem = 10px.
    Using px values throughout to be immune to that rescaling.)
   ============================================================ */

.sks-inner-tartan-page {
  /* Color tokens — match black-watch-slate.html exactly */
  --sks-itart-ivory: #faf6ef;
  --sks-itart-ivory-warm: #f5efe2;
  --sks-itart-parch: #ede5d1;
  --sks-itart-parch-d: #ddd1b6;
  --sks-itart-slate: #232831;
  --sks-itart-slate-2: #2f3540;
  --sks-itart-slate-3: #424b5a;
  --sks-itart-amber: #b8722a;
  --sks-itart-amber-d: #97581b;
  --sks-itart-amber-l: #d4904a;
  --sks-itart-crimson: #8c1f1f;
  --sks-itart-moss: #4a5d3a;
  --sks-itart-ink: #15171b;
  --sks-itart-muted: #6a6e76;
  --sks-itart-muted-2: #9ca1a9;
  --sks-itart-rule: rgba(35, 40, 49, 0.12);
  --sks-itart-rule-s: rgba(35, 40, 49, 0.22);
  --sks-itart-shadow-sm: 0 1px 3px rgba(35, 40, 49, .08), 0 1px 2px rgba(35, 40, 49, .04);
  --sks-itart-shadow-md: 0 8px 24px rgba(35, 40, 49, .10), 0 2px 6px rgba(35, 40, 49, .06);
  --sks-itart-shadow-lg: 0 24px 60px rgba(35, 40, 49, .18), 0 4px 12px rgba(35, 40, 49, .08);

  --sks-itart-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sks-itart-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--sks-itart-sans);
  font-size: 16px;
  color: var(--sks-itart-ink);
  line-height: 1.6;
}

.sks-inner-tartan-page *,
.sks-inner-tartan-page *::before,
.sks-inner-tartan-page *::after {
  box-sizing: border-box;
}

.sks-inner-tartan-page img {
  max-width: 100%;
  display: block;
}

.sks-inner-tartan-page a {
  color: inherit;
  text-decoration: none;
}

.sks-inner-tartan-page button {
  font-family: inherit;
  cursor: pointer;
}

/* Dawn theme has `div:empty { display: none; }` which hides our swatch divs
   when they only carry a background-image. Override for our section. */
.sks-inner-tartan-page div:empty {
  display: block;
}

.sks-itart-vars__swatch:empty,
.sks-itart-showcase__swatch:empty,
.sks-itart-dd__btn-swatch:empty,
.sks-itart-dd__menu-item-swatch:empty {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HERO — eyebrow + h1 + lede + trust line above the card
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-hero {
  padding: 36px 0 88px;
  background: var(--sks-itart-bg, var(--sks-itart-ivory));
}

.sks-itart-hero__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.sks-itart-hero__head {
  max-width: 820px;
  margin-bottom: 36px;
}

.sks-itart-hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sks-itart-amber);
  font-weight: 500;
  margin: 0 0 14px;
}

.sks-itart-hero__h1 {
  font-family: var(--sks-itart-serif);
  font-size: clamp(42px, 6vw, 70px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--sks-itart-slate);
  margin: 0 0 16px;
}

.sks-itart-hero__h1 em {
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-weight: 600;
}

.sks-itart-hero__lede {
  font-size: 18px;
  color: var(--sks-itart-slate-3);
  line-height: 1.6;
  max-width: 64ch;
  margin: 0 0 22px;
  font-weight: 400;
}

.sks-itart-hero__lede strong {
  color: var(--sks-itart-slate);
  font-weight: 600;
}

/* Pulsing skeleton placeholder shown in the lede while the progressive
   fetch is still discovering variants. Replaced by the real count once
   isComplete fires — no flicker of intermediate counts. Sized close to
   what "36 variants" would occupy so the surrounding text doesn't reflow
   when the number resolves. */
.sks-itart-hero__lede-skel {
  display: inline-block;
  width: 36px;
  height: 0.85em;
  vertical-align: -0.05em;
  border-radius: 3px;
  background: linear-gradient(110deg,
      rgba(229, 221, 199, 0.4) 8%,
      rgba(245, 239, 226, 0.95) 18%,
      rgba(229, 221, 199, 0.4) 33%);
  background-size: 200% 100%;
  animation: sks-itart-lede-skel-shimmer 1.4s linear infinite;
}

@keyframes sks-itart-lede-skel-shimmer {
  0% {
    background-position-x: 100%;
  }

  100% {
    background-position-x: -100%;
  }
}

.sks-itart-hero__trust {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--sks-itart-slate-3);
  padding-top: 18px;
  border-top: 1px solid var(--sks-itart-rule);
}

.sks-itart-hero__trust>span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sks-itart-hero__trust strong {
  color: var(--sks-itart-slate);
  font-weight: 600;
}

.sks-itart-hero__trust .stars {
  color: var(--sks-itart-amber);
  letter-spacing: 2px;
  font-size: 15px;
}

.sks-itart-hero__trust-divider {
  width: 1px;
  height: 16px;
  background: var(--sks-itart-rule);
}

/* ═══════════════════════════════════════════════════════════════
   HERO CARD — dropdown header + showcase body fused
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-card {
  background: var(--sks-itart-ivory);
  border: 1px solid var(--sks-itart-rule);
  border-radius: 4px;
  box-shadow: var(--sks-itart-shadow-md);
  overflow: visible;
  position: relative;
}

.sks-itart-card__dropdown-bar {
  padding: 18px 24px;
  border-bottom: 1px solid var(--sks-itart-rule);
  background: var(--sks-itart-ivory-warm);
  border-radius: 4px 4px 0 0;
  position: relative;
  /* Keep BELOW Dawn's .shopify-section-group-header-group levels (3/4) —
     at 5 this bar painted over the header's mega menus whenever the header
     wrapper got positioned (theme editor, sticky plumbing). Within the card
     it only needs to beat the showcase below, which has no z-index; the
     variant menu (z-index 30) opens inside this bar's own stacking context,
     so it still covers everything in the card. */
  z-index: 2;
}

.sks-itart-dd {
  position: relative;
}

.sks-itart-dd__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.sks-itart-dd__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sks-itart-muted);
  font-weight: 600;
}

.sks-itart-dd__share {
  background: transparent;
  border: none;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sks-itart-sans);
  font-size: 12px;
  color: var(--sks-itart-amber-d);
  cursor: pointer;
  border-radius: 2px;
  transition: color .15s;
  white-space: nowrap;
}

.sks-itart-dd__share:hover {
  color: var(--sks-itart-slate);
}

.sks-itart-dd__share svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.sks-itart-dd__share-success {
  display: none;
  color: var(--sks-itart-moss);
  font-weight: 600;
}

.sks-itart-dd__share.is-copied .sks-itart-dd__share-default {
  display: none;
}

.sks-itart-dd__share.is-copied .sks-itart-dd__share-success {
  display: inline;
}

.sks-itart-dd__share.is-copied svg {
  color: var(--sks-itart-moss);
}

.sks-itart-dd__button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--sks-itart-ivory);
  border: 1px solid var(--sks-itart-rule-s);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, box-shadow .18s;
}

.sks-itart-dd__button:hover {
  border-color: var(--sks-itart-amber);
}

.sks-itart-dd__button.is-open {
  border-color: var(--sks-itart-amber);
  box-shadow: 0 0 0 3px rgba(184, 114, 42, 0.12);
}

.sks-itart-dd__btn-swatch {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: var(--sks-itart-shadow-sm);
  border: 1px solid var(--sks-itart-rule);
  background-color: var(--sks-itart-parch);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.sks-itart-dd__btn-info {
  flex: 1;
  min-width: 0;
}

.sks-itart-dd__btn-name {
  font-family: var(--sks-itart-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--sks-itart-slate);
  line-height: 1.2;
  margin-bottom: 2px;
  display: block;
}

.sks-itart-dd__btn-name em {
  color: var(--sks-itart-amber-d);
  font-style: italic;
  font-weight: 400;
}

.sks-itart-dd__btn-meta {
  font-size: 13px;
  color: var(--sks-itart-muted);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sks-itart-dd__btn-meta .avail {
  font-weight: 600;
}

.sks-itart-dd__btn-meta .avail.in-stock {
  color: var(--sks-itart-moss);
}

.sks-itart-dd__btn-meta .avail.mto {
  color: var(--sks-itart-amber-d);
}

.sks-itart-dd__btn-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sks-itart-muted-2);
}

.sks-itart-dd__btn-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px solid var(--sks-itart-rule);
  margin-left: 4px;
}

.sks-itart-dd__btn-price-lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sks-itart-muted);
  font-weight: 500;
  margin-bottom: 2px;
}

.sks-itart-dd__btn-price-val {
  font-family: var(--sks-itart-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--sks-itart-slate);
  line-height: 1;
}

.sks-itart-dd__btn-chev {
  width: 18px;
  height: 18px;
  color: var(--sks-itart-slate-3);
  flex-shrink: 0;
  transition: transform .25s ease;
}

.sks-itart-dd__button.is-open .sks-itart-dd__btn-chev {
  transform: rotate(180deg);
}

/* Dropdown menu */
.sks-itart-dd__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--sks-itart-ivory);
  border: 1px solid var(--sks-itart-rule-s);
  border-radius: 3px;
  box-shadow: var(--sks-itart-shadow-lg);
  z-index: 30;
  max-height: 520px;
  overflow-y: auto;
  display: none;
  scrollbar-width: thin;
}

.sks-itart-dd__menu::-webkit-scrollbar {
  width: 6px;
}

.sks-itart-dd__menu::-webkit-scrollbar-track {
  background: var(--sks-itart-ivory-warm);
}

.sks-itart-dd__menu::-webkit-scrollbar-thumb {
  background: var(--sks-itart-rule-s);
}

.sks-itart-dd.is-open .sks-itart-dd__menu {
  display: block;
  animation: ddIn .18s ease-out;
}

/* While the variant menu is open, lift its stacking bar above the fixed
   header (.sks-hd, z-index 90). The bar's resting level is 2 (see the
   dropdown-bar comment above) which traps the menu — and its z-index 30 —
   beneath the header whenever the two overlap, no matter what z-index the
   menu itself gets. JS toggles this class in openMenu()/closeMenu(). */
.sks-itart-card__dropdown-bar--menu-open {
  z-index: 95;
}

/* Flipped state — JS adds this when the viewport has no room below the
   button (mobile, variant card at bottom of screen): menu opens upward. */
.sks-itart-dd--up .sks-itart-dd__menu {
  top: auto;
  bottom: calc(80% + 0px);
}

.sks-itart-dd--up.is-open .sks-itart-dd__menu {
  animation: ddInUp .18s ease-out;
}

@keyframes ddInUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ddIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sks-itart-dd__menu-head {
  padding: 12px 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sks-itart-muted);
  font-weight: 500;
  background: var(--sks-itart-ivory-warm);
  border-bottom: 1px solid var(--sks-itart-rule);
  display: flex;
  justify-content: space-between;
}

.sks-itart-dd__menu-list {
  padding: 0;
}

.sks-itart-dd__menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--sks-itart-rule);
  width: 100%;
  background: transparent;
  text-align: left;
  font-family: inherit;
  transition: background .12s;
}

.sks-itart-dd__menu-item:last-child {
  border-bottom: none;
}

.sks-itart-dd__menu-item:hover {
  background: var(--sks-itart-ivory-warm);
}

.sks-itart-dd__menu-item.is-active {
  background: var(--sks-itart-parch);
}

.sks-itart-dd__menu-item-swatch {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: var(--sks-itart-shadow-sm);
  border: 1px solid var(--sks-itart-rule);
  background-color: var(--sks-itart-parch);
  background-size: cover;
  background-position: center;
}

.sks-itart-dd__menu-item-info {
  flex: 1;
  min-width: 0;
}

.sks-itart-dd__menu-item-name {
  font-family: var(--sks-itart-serif);
  font-size: 16px;
  color: var(--sks-itart-slate);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2px;
}

.sks-itart-dd__menu-item-name em {
  color: var(--sks-itart-amber-d);
  font-style: italic;
  font-weight: 400;
}

.sks-itart-dd__menu-item-srt,
.sks-itart-dd__menu-item-tag {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sks-itart-muted);
}

.sks-itart-dd__menu-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
  gap: 4px;
}

.sks-itart-dd__menu-item-avail {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 24px;
}

.sks-itart-dd__menu-item-avail.in-stock {
  background: rgba(74, 93, 58, 0.14);
  color: var(--sks-itart-moss);
}

.sks-itart-dd__menu-item-avail.mto {
  background: rgba(184, 114, 42, 0.14);
  color: var(--sks-itart-amber-d);
}

.sks-itart-dd__menu-item-price {
  font-family: var(--sks-itart-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--sks-itart-slate);
  min-width: 60px;
  text-align: right;
}

.sks-itart-dd__menu-item-price .from {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sks-itart-muted);
  font-weight: 500;
  font-family: var(--sks-itart-sans);
  margin-bottom: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   SHOWCASE BODY — swatch left, info right
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-card__body {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 0;
  align-items: stretch;
  transition: opacity .25s ease;
}

.sks-itart-card.is-fading .sks-itart-card__body {
  opacity: 0.4;
}

.sks-itart-showcase__swatch {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--sks-itart-rule);
  border-radius: 0 0 0 4px;
  background-color: var(--sks-itart-parch);
  background-size: cover;
  background-position: center;
  /* Don't stretch the swatch when the info column grows (Full Specification
     expander, longer description, etc.) — it stays at its natural square size. */
  align-self: start;
}

/* Server-rendered swatch <img> (SEO-IMG-01) — fills the box exactly like
   the background-image it duplicates; the tag/SKU spans come later in the
   DOM so they keep painting above it. */
.sks-itart-showcase__swatch-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shimmer loader shown only when the Liquid couldn't seed a swatch
   server-side (no canonical Tartan metaobject for this collection
   handle, e.g. on the orphan fallback collection). Tells the visitor
   the page is actively fetching instead of looking broken. JS removes
   the is-loading class as soon as it sets the real background-image. */
.sks-itart-showcase__swatch.is-loading {
  background-image: linear-gradient(110deg,
      rgba(229, 221, 199, 0.6) 8%,
      rgba(245, 239, 226, 0.85) 18%,
      rgba(229, 221, 199, 0.6) 33%);
  background-size: 200% 100%;
  animation: sks-itart-shimmer 1.4s linear infinite;
}

@keyframes sks-itart-shimmer {
  0% {
    background-position-x: 100%;
  }

  100% {
    background-position-x: -100%;
  }
}

.sks-itart-showcase__tag {
  position: absolute;
  left: 16px;
  top: 16px;
  background: rgba(250, 246, 239, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sks-itart-slate);
  border-radius: 2px;
}

.sks-itart-showcase__srt {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: rgba(35, 40, 49, 0.86);
  color: var(--sks-itart-ivory);
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
}

.sks-itart-info {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
}

/* Showcase sub — large serif italic in amber, like the mockup tagline */
.sks-itart-info__sub {
  font-family: var(--sks-itart-serif);
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 14px;
  font-weight: 500;
}

.sks-itart-info__desc {
  font-size: 16px;
  color: var(--sks-itart-slate-3);
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 50ch;
}

.sks-itart-info__desc strong {
  color: var(--sks-itart-slate);
  font-weight: 600;
}

.sks-itart-info__desc em {
  color: var(--sks-itart-amber-d);
  font-style: italic;
}

.sks-itart-info__desc p {
  margin: 0 0 12px;
}

.sks-itart-info__desc p:last-child {
  margin-bottom: 0;
}

/* Palette chips */
.sks-itart-palette {
  margin-bottom: 22px;
}

.sks-itart-palette__lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sks-itart-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.sks-itart-palette__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sks-itart-palette__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: var(--sks-itart-ivory-warm);
  border: 1px solid var(--sks-itart-rule);
  border-radius: 999px;
  font-size: 13px;
  color: var(--sks-itart-slate-3);
  font-weight: 500;
  line-height: 1.2;
}

/* Decision aid */
.sks-itart-decision {
  background: var(--sks-itart-ivory-warm);
  border-left: 3px solid var(--sks-itart-moss);
  padding: 14px 18px;
  border-radius: 2px;
  margin-bottom: 24px;
}

.sks-itart-decision__lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sks-itart-moss);
  font-weight: 600;
  margin-bottom: 6px;
}

.sks-itart-decision__text {
  font-family: var(--sks-itart-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--sks-itart-slate);
  line-height: 1.5;
  margin: 0;
}

/* CTAs */
.sks-itart-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.sks-itart-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--sks-itart-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all .18s ease;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.sks-itart-btn--sm {
  padding: 11px 20px;
  font-size: 13px;
}

.sks-itart-btn--amber {
  background: var(--sks-itart-amber);
  color: var(--sks-itart-ivory);
  border-color: var(--sks-itart-amber);
  font-weight: 600;
}

.sks-itart-btn--amber:hover {
  background: var(--sks-itart-amber-d);
  border-color: var(--sks-itart-amber-d);
  color: var(--sks-itart-ivory);
  transform: translateY(-1px);
}

.sks-itart-btn--ghost {
  background: transparent;
  color: var(--sks-itart-slate);
  border-color: var(--sks-itart-rule-s);
}

.sks-itart-btn--ghost:hover {
  background: var(--sks-itart-slate);
  color: var(--sks-itart-ivory);
  border-color: var(--sks-itart-slate);
}

.sks-itart-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Specs collapsible */
.sks-itart-specs-wrap {
  border-top: 1px solid var(--sks-itart-rule);
  padding-top: 14px;
  margin-top: auto;
}

.sks-itart-specs-wrap summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sks-itart-slate-3);
  padding: 6px 0;
  transition: color .15s;
}

.sks-itart-specs-wrap summary::-webkit-details-marker {
  display: none;
}

.sks-itart-specs-wrap summary:hover {
  color: var(--sks-itart-amber-d);
}

.sks-itart-specs-wrap summary svg {
  width: 14px;
  height: 14px;
  transition: transform .25s ease;
  color: var(--sks-itart-amber);
}

.sks-itart-specs-wrap[open] summary svg {
  transform: rotate(180deg);
}

.sks-itart-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sks-itart-rule);
}

.sks-itart-spec {
  padding: 0;
}

.sks-itart-spec__lbl {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sks-itart-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.sks-itart-spec__val {
  font-size: 15px;
  color: var(--sks-itart-slate);
  font-weight: 500;
}

.sks-itart-spec__val.thread {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--sks-itart-amber-d);
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   REDIRECT STRIP
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-hero__redirect {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 32px 0 0;
  padding: 13px 18px;
  background: var(--sks-itart-parch);
  border-left: 3px solid var(--sks-itart-amber);
  border-radius: 2px;
  font-size: 14px;
  color: var(--sks-itart-slate-3);
}

.sks-itart-hero__redirect svg {
  width: 14px;
  height: 14px;
  color: var(--sks-itart-amber-d);
  flex-shrink: 0;
}

.sks-itart-hero__redirect a {
  color: var(--sks-itart-amber-d);
  font-weight: 600;
  border-bottom: 1px solid var(--sks-itart-amber);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}

.sks-itart-hero__redirect a:hover {
  color: var(--sks-itart-slate);
  border-bottom-color: var(--sks-itart-slate);
}

.sks-itart-hero__redirect .or {
  color: var(--sks-itart-muted);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   STEP 2 — PRODUCTS GRID
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-prod {
  padding: 72px 0;
  background: var(--sks-itart-prod-bg, var(--sks-itart-ivory));
  scroll-margin-top: 24px;
}

.sks-itart-prod__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.sks-itart-prod__head {
  display: flex;
  align-items: flex-end;
  /* anchor the search to the bottom of the head, beside the lede */
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.sks-itart-prod__head-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 780px;
  /* preserves the previous narrow text column */
}

.sks-itart-prod__head-search {
  flex: 0 0 auto;
  width: 300px;
  max-width: 100%;
}

@media (max-width: 749px) {
  .sks-itart-prod__head {
    gap: 18px;
  }

  .sks-itart-prod__head-search {
    width: 100%;
  }
}

/* Search input — pill-shaped to match the chip aesthetic */
.sks-itart-prod__search-wrap {
  position: relative;
}

.sks-itart-prod__search {
  width: 100%;
  padding: 11px 38px 11px 40px;
  border: 1px solid var(--sks-itart-rule-s);
  border-radius: 24px;
  background: #fff;
  font-family: var(--sks-itart-sans);
  font-size: 13.5px;
  color: var(--sks-itart-slate-3);
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none;
}

.sks-itart-prod__search::-webkit-search-cancel-button,
.sks-itart-prod__search::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}

.sks-itart-prod__search:focus {
  outline: none;
  border-color: #B8520A;
  box-shadow: 0 0 0 3px rgba(184, 82, 10, .12);
  background: #fff;
}

.sks-itart-prod__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--sks-itart-muted);
  pointer-events: none;
}

.sks-itart-prod__search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(0, 0, 0, .08);
  color: var(--sks-itart-slate-3);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sks-itart-prod__search-clear:hover {
  background: #B8520A;
  color: #fff;
}

/* Hidden state for product cards that don't match the current search query */
.sks-itart-prod__card.is-search-hidden {
  display: none;
}

/* No-search-results message — shown only by JS when filter yields zero */
.sks-itart-prod__search-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--sks-itart-muted);
  font-size: 14px;
}

.sks-itart-prod__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sks-itart-amber);
  font-weight: 500;
  margin: 0 0 10px;
}

.sks-itart-prod__h2 {
  font-family: var(--sks-itart-serif);
  font-size: clamp(29px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sks-itart-slate);
  margin: 14px 0 0;
}

.sks-itart-prod__h2 em {
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-weight: 600;
}

.sks-itart-prod__lede {
  font-size: 16px;
  color: var(--sks-itart-slate-3);
  line-height: 1.7;
  margin: 14px 0 0;
  max-width: 62ch;
}

.sks-itart-prod__fallback-note {
  margin: 14px 0 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--sks-itart-parch);
  border-left: 3px solid var(--sks-itart-amber);
  border-radius: 2px;
  font-size: 13px;
  color: var(--sks-itart-slate-3);
  font-style: italic;
}

/* Filter tabs (chip bar) — one per unique product.type value + All.
   Layout: a single non-wrapping line. The "More ↓" pill sits as a sibling
   of the chip container at the far right of the row. By default the chip
   container clips overflow (overflow: hidden); clicking "More" toggles
   .is-expanded which switches it to overflow-x: auto so the user can
   scroll horizontally through the remaining chips, inline on the same row.
   The More pill stays anchored on the right because it's a separate flex
   sibling — it never scrolls with the chips. */
.sks-itart-prod__filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.sks-itart-prod__filter {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  /* allow the chip container to shrink below intrinsic content width */
  flex-wrap: nowrap;
  /* single line — overflow chips are clipped or scrolled, never wrapped */
  gap: 8px;
  align-items: center;
  overflow: hidden;
  /* collapsed state — extra chips clipped at the right edge */
}

.sks-itart-prod__filter.is-expanded {
  overflow-x: auto;
  /* expanded state — user scrolls horizontally through remaining chips */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* hide native scrollbar so the row height doesn't shift downward */
}

.sks-itart-prod__filter.is-expanded::-webkit-scrollbar {
  display: none;
  /* Chromium/Safari — same height-stability goal */
}

/* Chips that JS measured as not fully fitting in row 1 — hidden entirely
   in collapsed mode so we never show a half-cut chip ("Tartan Pon...").
   Once .is-expanded is on, they're restored and become reachable via
   horizontal scroll. */
.sks-itart-prod__filter .sks-itart-prod__chip.is-overflow {
  display: none;
}

.sks-itart-prod__filter.is-expanded .sks-itart-prod__chip.is-overflow {
  display: inline-flex;
}

.sks-itart-prod__chip {
  padding: 9px 18px;
  border: 1px solid var(--sks-itart-rule-s);
  background: transparent;
  border-radius: 24px;
  font-family: var(--sks-itart-sans);
  font-size: 13px;
  color: var(--sks-itart-slate-3);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
  /* never squeeze a chip — overflow goes off-screen, not into compression */
  text-decoration: none;
  /* chips can be <a> tags too — kill the anchor underline */
  display: inline-flex;
  /* anchor default is inline; flex keeps padding/centering consistent across <a> + <button> */
  align-items: center;
  line-height: 1;
}

.sks-itart-prod__chip:hover {
  background: var(--sks-itart-parch);
}

.sks-itart-prod__chip.is-on {
  background: var(--sks-itart-slate);
  color: var(--sks-itart-ivory);
  border-color: var(--sks-itart-slate);
}

/* "More ↓" pill — sibling of the chip container, sits at the far right
   of the filter-bar. Doesn't scroll with the chips because it lives
   outside the scrollable element. */
.sks-itart-prod__chip--more {
  background: #FEF3EC;
  color: #B8520A;
  border-color: rgba(184, 82, 10, .25);
  font-weight: 600;
  flex-shrink: 0;
}

.sks-itart-prod__chip--more:hover {
  background: #FBE3CC;
  color: #B8520A;
}

.sks-itart-prod__chip--more[aria-expanded="true"] {
  background: #B8520A;
  color: #fff;
  border-color: #B8520A;
}

.sks-itart-prod__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px 24px;
  transition: opacity .25s ease;
}

.sks-itart-prod__grid.is-fading {
  opacity: 0.4;
}

.sks-itart-prod__card {
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: transform .2s ease;
}

.sks-itart-prod__card:hover {
  transform: translateY(-3px);
}

.sks-itart-prod__card--hidden {
  display: none;
}

.sks-itart-prod__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  height: 100%;
}

.sks-itart-prod__img {
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: 3px;
  background: var(--sks-itart-parch);
  box-shadow: var(--sks-itart-shadow-sm);
}

.sks-itart-prod__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  position: absolute;
  inset: 0;
  transition: opacity 0.4s ease, transform 0.6s ease;
}

.sks-itart-prod__card:hover .sks-itart-prod__img img {
  transform: scale(1.05);
}

/* Second-image hover reveal — matches the shared collection product card:
   both images are absolutely stacked (see the img rule above); the BACK image
   fades IN over the front on hover (opacity 0.4s). Guarded to hover-capable
   pointers so touch/mobile just keeps the 1st image. */
.sks-itart-prod__img-front { opacity: 1; }
.sks-itart-prod__img-back { opacity: 0; }
@media (hover: hover) {
  .sks-itart-prod__card:hover .sks-itart-prod__img--has-back .sks-itart-prod__img-back { opacity: 1; }
}

.sks-itart-prod__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(35, 40, 49, 0.22) 100%);
  pointer-events: none;
  z-index: 1;
}

/* "Made to Order" / "Quick Ship" pill — now rendered UNDER the image
   inside .sks-itart-prod__tags, above the product title. Inline-flex
   so the pill hugs its content and doesn't stretch across the card. */
.sks-itart-prod__tags {
  margin-top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sks-itart-prod__badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 2px;
}

.sks-itart-prod__badge--quick {
  background: var(--sks-itart-slate);
  color: var(--sks-itart-ivory);
}

.sks-itart-prod__badge--mto {
  background: var(--sks-itart-amber);
  color: var(--sks-itart-ivory);
}

/* Sale pill overlays the image's top-right — same crimson chip
   used by snippets/sks-product-card.liquid. Desktop shows the
   marketing "Save X%" copy; mobile compacts to "-X%" so the pill
   stays legible on a narrow card. */
.sks-itart-prod__sale {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 2px;
  background: #8B1F1F;
  color: #fff;
  z-index: 2;
}

.sks-itart-prod__sale-mob {
  display: none;
}

@media (max-width: 749px) {
  .sks-itart-prod__sale-desk {
    display: none;
  }

  .sks-itart-prod__sale-mob {
    display: inline;
  }

  .sks-itart-prod__sale {
    padding: 4px 8px;
  }
}

/* ── Wishlist heart on inner-tartan product cards ────────────────
   Same visual + interaction contract as .sks-prod-card__wl in
   snippet-sks-product-card.css. Placed at top-LEFT so it never
   collides with the top-right sale pill. Hidden on desktop until
   card hover; always visible on touch. Shares [data-sks-wl-toggle]
   with the rest of the theme so save-state syncs across pages. */
.sks-itart-prod__wl {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #4A4440;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(74, 68, 64, .16);
  box-shadow: 0 2px 6px rgba(26, 26, 26, .08);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.sks-itart-prod__wl svg {
  width: 20px;
  height: 20px;
  display: block;
}

.sks-itart-prod__card:hover .sks-itart-prod__wl,
.sks-itart-prod__wl:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.sks-itart-prod__wl:hover {
  background: #FFFFFF;
  color: #B8520A;
  border-color: rgba(184, 82, 10, .4);
}

.sks-itart-prod__wl:focus-visible {
  outline: 2px solid #B8520A;
  outline-offset: 2px;
}

.sks-itart-prod__wl.is-saved {
  opacity: 1;
  transform: translateY(0);
  background: #FFFFFF;
  color: #B8520A;
  border-color: rgba(184, 82, 10, .5);
}

.sks-itart-prod__wl.is-saved svg {
  fill: #B8520A;
  stroke: #B8520A;
}

@keyframes sksItartWlPop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

.sks-itart-prod__wl.is-saved svg {
  animation: sksItartWlPop .35s ease;
}

@media screen and (max-width: 749px),
(hover: none) {
  .sks-itart-prod__wl {
    opacity: 1;
    transform: none;
    width: 34px;
    height: 34px;
    top: 10px;
    left: 10px;
  }

  .sks-itart-prod__wl svg {
    width: 18px;
    height: 18px;
  }
}

.sks-itart-prod__stock {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(250, 246, 239, 0.95);
  padding: 4px 8px;
  border-radius: 2px;
  color: var(--sks-itart-crimson);
  font-weight: 700;
  z-index: 2;
}

.sks-itart-prod__name {
  font-family: var(--sks-itart-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--sks-itart-slate);
  line-height: 1.25;
  margin: 0 0 4px;
  transition: color .15s;
}

.sks-itart-prod__link:hover .sks-itart-prod__name {
  color: var(--sks-itart-amber-d);
}

.sks-itart-prod__meta {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--sks-itart-muted);
  margin-bottom: 10px;
}

/* Reviews.io star rating under each product (filled by sks-judgeme-ratings.js).
   The renderer emits .sks-prod-card__stars + .sks-prod-card__rev-count inside;
   it hides the whole row when a product has no reviews. */
.sks-itart-prod__reviews {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 8px;
  min-height: 15px;
}
.sks-itart-prod__reviews .sks-prod-card__stars {
  color: var(--sks-itart-amber);
  letter-spacing: 2px;
  font-size: 13px;
  line-height: 1;
}
.sks-itart-prod__reviews .sks-prod-card__stars .star-empty {
  color: rgba(184, 114, 42, 0.3);
}
.sks-itart-prod__reviews .sks-prod-card__rev-count {
  font-size: 11.5px;
  color: var(--sks-itart-muted);
}

.sks-itart-prod__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid var(--sks-itart-rule);
}

.sks-itart-prod__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--sks-itart-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--sks-itart-slate);
  flex-wrap: wrap;
}

.sks-itart-prod__from {
  font-family: var(--sks-itart-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sks-itart-muted);
}

.sks-itart-prod__cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--sks-itart-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--sks-itart-amber-d);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--sks-itart-amber);
  border-radius: 2px;
  background: transparent;
  transition: background .15s, color .15s;
}

.sks-itart-prod__link:hover .sks-itart-prod__cta {
  background: var(--sks-itart-amber);
  color: var(--sks-itart-ivory);
}

.sks-itart-prod__more {
  text-align: center;
  margin-top: 40px;
}

.sks-itart-prod__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--sks-itart-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--sks-itart-slate);
  border: 1px solid var(--sks-itart-rule-s);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.sks-itart-prod__more-btn:hover {
  background: var(--sks-itart-slate);
  color: var(--sks-itart-ivory);
  border-color: var(--sks-itart-slate);
}

.sks-itart-prod__more-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ───────────────────────────────────────────────────────────────────
   AJAX pagination (replaces the "Show more" button).
   Renders as: ‹ Previous · 1 · 2 · 3 · … · last · Next ›
   Page changes fetch in the background — the grid + nav swap in place
   without a full page reload. The `.is-loading` class on the section
   slightly fades the grid while the new page is fetched.
   ─────────────────────────────────────────────────────────────────── */
[data-sks-itart-prod].is-loading [data-itart-prod-grid] {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity .15s ease-out;
}

[data-sks-itart-prod] [data-itart-prod-grid] {
  transition: opacity .2s ease-out;
}

.sks-itart-prod__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
}

.sks-itart-prod__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-family: var(--sks-itart-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sks-itart-ink);
  background: transparent;
  border: 1px solid var(--sks-itart-rule);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.sks-itart-prod__page:hover {
  background: var(--sks-itart-slate);
  color: var(--sks-itart-ivory);
  border-color: var(--sks-itart-slate);
}

.sks-itart-prod__page.is-current {
  background: var(--sks-itart-amber);
  color: var(--sks-itart-ivory);
  border-color: var(--sks-itart-amber);
  cursor: default;
  pointer-events: none;
}

.sks-itart-prod__page.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.sks-itart-prod__page.is-ellipsis {
  border-color: transparent;
  background: transparent;
  cursor: default;
  pointer-events: none;
  color: var(--sks-itart-muted);
}

.sks-itart-prod__page--nav {
  padding: 0 16px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .sks-itart-prod__pagination {
    gap: 4px;
  }

  .sks-itart-prod__page {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    font-size: 13px;
  }

  .sks-itart-prod__page--nav {
    padding: 0 12px;
  }
}

.sks-itart-prod__empty {
  padding: 48px 24px;
  text-align: center;
  font-size: 15px;
  color: var(--sks-itart-muted);
  background: var(--sks-itart-ivory-warm);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   VARIANT GALLERY — 4-column grid of all variants
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-vars {
  padding: 72px 0;
  background: var(--sks-itart-vars-bg, var(--sks-itart-ivory-warm));
}

.sks-itart-vars__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.sks-itart-vars__head {
  max-width: 780px;
  margin-bottom: 40px;
}

.sks-itart-vars__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sks-itart-amber);
  font-weight: 500;
  margin: 0 0 10px;
}

.sks-itart-vars__h2 {
  font-family: var(--sks-itart-serif);
  font-size: clamp(29px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sks-itart-slate);
  margin: 14px 0 0;
}

.sks-itart-vars__h2 em {
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-weight: 600;
}

.sks-itart-vars__lede {
  font-size: 16px;
  color: var(--sks-itart-slate-3);
  line-height: 1.7;
  margin: 14px 0 0;
  max-width: 60ch;
}

.sks-itart-vars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}

/* Tile = transparent button, swatch carries the border + shadow.
   Flex column so each tile fills the grid row height (stretch is the grid
   default) and the body+meta can be pushed to align at the bottom across
   the row — so price/availability of every tile sits on the same baseline. */
.sks-itart-vars__tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  transition: transform .25s ease;
  font-family: var(--sks-itart-sans);
  color: var(--sks-itart-slate-3);
  -webkit-appearance: none;
  appearance: none;
}

.sks-itart-vars__tile:hover {
  transform: translateY(-3px);
}

.sks-itart-vars__swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sks-itart-shadow-sm);
  border: 1px solid var(--sks-itart-rule);
  transition: box-shadow .25s ease;
  background-color: var(--sks-itart-parch);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sks-itart-vars__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sks-itart-vars__tile:hover .sks-itart-vars__swatch {
  box-shadow: var(--sks-itart-shadow-md);
}

.sks-itart-vars__tile.is-active .sks-itart-vars__swatch {
  box-shadow: 0 0 0 2px var(--sks-itart-amber), var(--sks-itart-shadow-md);
}

.sks-itart-vars__srt {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(35, 40, 49, 0.84);
  color: var(--sks-itart-ivory);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 2px;
}

.sks-itart-vars__num {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sks-itart-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.sks-itart-vars__name {
  font-family: var(--sks-itart-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--sks-itart-slate);
  margin-bottom: 6px;
  line-height: 1.25;
}

.sks-itart-vars__name em {
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-weight: 500;
}

.sks-itart-vars__desc {
  font-size: 13px;
  color: var(--sks-itart-muted);
  line-height: 1.5;
  margin: 0 0 8px;
}

.sks-itart-vars__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--sks-itart-slate-3);
  padding-top: 10px;
  border-top: 1px solid var(--sks-itart-rule);
  margin-top: auto;
}

.sks-itart-vars__price {
  font-family: var(--sks-itart-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--sks-itart-slate);
}

.sks-itart-vars__avail {
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.sks-itart-vars__avail.in-stock {
  color: var(--sks-itart-moss);
}

.sks-itart-vars__avail.mto {
  color: var(--sks-itart-amber-d);
}

/* ═══════════════════════════════════════════════════════════════
   DEALS — 3 bundle cards side-by-side
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-deals {
  padding: 72px 0;
  background: var(--sks-itart-deals-bg, var(--sks-itart-ivory));
  scroll-margin-top: 24px;
}

.sks-itart-deals__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.sks-itart-deals__head {
  max-width: 780px;
  margin-bottom: 40px;
}

.sks-itart-deals__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sks-itart-amber);
  font-weight: 500;
  margin: 0 0 10px;
}

.sks-itart-deals__h2 {
  font-family: var(--sks-itart-serif);
  font-size: clamp(29px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sks-itart-slate);
  margin: 14px 0 0;
}

.sks-itart-deals__h2 em {
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-weight: 600;
}

.sks-itart-deals__sub {
  font-size: 16px;
  color: var(--sks-itart-slate-3);
  line-height: 1.7;
  margin: 14px 0 0;
  max-width: 62ch;
}

.sks-itart-deals__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.sks-itart-deals__card {
  background: var(--sks-itart-ivory);
  border: 1px solid var(--sks-itart-rule);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.sks-itart-deals__card:hover {
  border-color: var(--sks-itart-amber);
  box-shadow: var(--sks-itart-shadow-md);
  transform: translateY(-3px);
}

.sks-itart-deals__card--featured {
  border-color: var(--sks-itart-amber);
  box-shadow: 0 0 0 1px var(--sks-itart-amber), var(--sks-itart-shadow-md);
}

.sks-itart-deals__ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--sks-itart-amber);
  color: var(--sks-itart-ivory);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 2px;
  z-index: 2;
}

.sks-itart-deals__visual {
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--sks-itart-parch);
  border-bottom: 1px solid var(--sks-itart-rule);
  position: relative;
}

.sks-itart-deals__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.sks-itart-deals__card:hover .sks-itart-deals__visual img {
  transform: scale(1.04);
}

.sks-itart-deals__visual-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, var(--sks-itart-parch) 0%, var(--sks-itart-parch-d) 100%);
}

.sks-itart-deals__body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sks-itart-deals__tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sks-itart-amber);
  font-weight: 600;
  margin-bottom: 6px;
}

.sks-itart-deals__card--featured .sks-itart-deals__tag {
  color: var(--sks-itart-amber-d);
}

.sks-itart-deals__title {
  font-family: var(--sks-itart-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--sks-itart-slate);
  margin: 0 0 10px;
  line-height: 1.2;
}

.sks-itart-deals__desc {
  font-size: 14px;
  color: var(--sks-itart-slate-3);
  line-height: 1.55;
  margin: 0 0 16px;
}

.sks-itart-deals__items {
  list-style: none;
  padding: 14px 0;
  margin: 0 0 20px;
  border-top: 1px solid var(--sks-itart-rule);
  border-bottom: 1px solid var(--sks-itart-rule);
}

.sks-itart-deals__items li {
  padding: 4px 0;
  font-size: 13px;
  color: var(--sks-itart-slate-3);
  position: relative;
  padding-left: 18px;
}

.sks-itart-deals__items li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sks-itart-moss);
  font-weight: 700;
  font-size: 14px;
}

.sks-itart-deals__pricing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.sks-itart-deals__was {
  font-size: 14px;
  color: var(--sks-itart-muted);
  text-decoration: line-through;
  margin-bottom: 2px;
}

.sks-itart-deals__now {
  font-family: var(--sks-itart-serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--sks-itart-slate);
  line-height: 1;
}

.sks-itart-deals__save {
  background: var(--sks-itart-crimson);
  color: var(--sks-itart-ivory);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 2px;
  white-space: nowrap;
}

.sks-itart-deals__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--sks-itart-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all .18s ease;
  text-decoration: none;
  line-height: 1;
  margin-top: auto;
  align-self: flex-start;
}

.sks-itart-deals__cta--amber {
  background: var(--sks-itart-amber);
  color: var(--sks-itart-ivory);
  border-color: var(--sks-itart-amber);
  font-weight: 600;
}

.sks-itart-deals__cta--amber:hover {
  background: var(--sks-itart-amber-d);
  border-color: var(--sks-itart-amber-d);
  color: var(--sks-itart-ivory);
}

.sks-itart-deals__cta--ghost {
  background: transparent;
  color: var(--sks-itart-slate);
  border-color: var(--sks-itart-rule-s);
}

.sks-itart-deals__cta--ghost:hover {
  background: var(--sks-itart-slate);
  color: var(--sks-itart-ivory);
  border-color: var(--sks-itart-slate);
}

@media screen and (max-width: 980px) {
  .sks-itart-deals__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 680px) {
  .sks-itart-deals__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS (reviews.io) — head + summary panel + 3-col grid
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-reviews {
  padding: 72px 0;
  background: var(--sks-itart-reviews-bg, var(--sks-itart-ivory-warm));
}

.sks-itart-reviews__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.sks-itart-reviews__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
  margin-bottom: 40px;
}

.sks-itart-reviews__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sks-itart-amber);
  font-weight: 500;
  margin: 0 0 10px;
}

.sks-itart-reviews__h2 {
  font-family: var(--sks-itart-serif);
  font-size: clamp(29px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sks-itart-slate);
  margin: 14px 0 0;
}

.sks-itart-reviews__h2 em {
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-weight: 600;
}

.sks-itart-reviews__summary {
  background: var(--sks-itart-ivory);
  border: 1px solid var(--sks-itart-rule);
  border-radius: 3px;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 220px;
}

.sks-itart-reviews__stars {
  color: var(--sks-itart-amber);
  letter-spacing: 3px;
  font-size: 18px;
  margin-bottom: 4px;
}

.sks-itart-reviews__rating {
  font-family: var(--sks-itart-serif);
  font-size: 15px;
  color: var(--sks-itart-slate-3);
  margin-bottom: 4px;
}

.sks-itart-reviews__rating strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--sks-itart-slate);
}

.sks-itart-reviews__count {
  font-size: 13px;
  color: var(--sks-itart-muted);
}

.sks-itart-reviews__count strong {
  color: var(--sks-itart-slate);
  font-weight: 600;
}

.sks-itart-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* Each card takes its own content height instead of stretching to the
     tallest card in the row — short reviews no longer get big empty boxes. */
  align-items: start;
}

.sks-itart-reviews__loading,
.sks-itart-reviews__empty {
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
  color: var(--sks-itart-muted);
  font-size: 14px;
  background: var(--sks-itart-ivory);
  border: 1px dashed var(--sks-itart-rule);
  border-radius: 4px;
}

.sks-itart-reviews__card {
  background: var(--sks-itart-ivory);
  border: 1px solid var(--sks-itart-rule);
  border-radius: 4px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
}

.sks-itart-reviews__card:hover {
  border-color: var(--sks-itart-rule-s);
  box-shadow: var(--sks-itart-shadow-sm);
}

.sks-itart-reviews__card-stars {
  color: var(--sks-itart-amber);
  letter-spacing: 3px;
  font-size: 15px;
  margin-bottom: 12px;
}

.sks-itart-reviews__headline {
  font-family: var(--sks-itart-serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: var(--sks-itart-slate);
  line-height: 1.35;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}

.sks-itart-reviews__body {
  font-size: 14px;
  color: var(--sks-itart-slate-3);
  line-height: 1.65;
  margin: 0 0 18px;
  flex: 1;
}
/* Long reviews collapse to 6 lines; JS adds a Read-more button only when the
   text actually overflows. */
.sks-itart-reviews__body.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  margin-bottom: 8px;
}
.sks-itart-reviews__readmore {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 16px;
  color: var(--sks-itart-amber);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sks-itart-reviews__readmore:hover { color: var(--sks-itart-amber-d); }

.sks-itart-reviews__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--sks-itart-rule);
  margin-top: auto;
}

.sks-itart-reviews__author {
  font-size: 14px;
  font-weight: 600;
  color: var(--sks-itart-slate);
  margin-bottom: 2px;
}

.sks-itart-reviews__loc {
  font-size: 12px;
  color: var(--sks-itart-muted);
  letter-spacing: 0.02em;
}

.sks-itart-reviews__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sks-itart-moss);
  background: rgba(74, 93, 58, 0.10);
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sks-itart-reviews__more {
  margin-top: 32px;
  text-align: center;
}

.sks-itart-reviews__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--sks-itart-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--sks-itart-slate);
  border: 1px solid var(--sks-itart-rule-s);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.sks-itart-reviews__more-btn:hover {
  background: var(--sks-itart-slate);
  color: var(--sks-itart-ivory);
  border-color: var(--sks-itart-slate);
}

.sks-itart-reviews__more-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.sks-itart-reviews__footer {
  margin-top: 24px;
  text-align: center;
}

.sks-itart-reviews__all-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--sks-itart-amber-d);
  border-bottom: 1px solid var(--sks-itart-amber);
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}

.sks-itart-reviews__all-link:hover {
  color: var(--sks-itart-slate);
  border-bottom-color: var(--sks-itart-slate);
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT THIS TARTAN — sticky aside (left) + collection description (right)
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-about {
  padding: 72px 0;
  background: var(--sks-itart-about-bg, var(--sks-itart-ivory));
}

.sks-itart-about__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.sks-itart-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  gap: 64px;
  align-items: start;
}

.sks-itart-about__aside {
  position: sticky;
  top: 32px;
  align-self: start;
}

.sks-itart-about__aside-inner {
  padding-right: 8px;
}

.sks-itart-about__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sks-itart-amber);
  font-weight: 500;
  margin: 0 0 10px;
}

.sks-itart-about__h2 {
  font-family: var(--sks-itart-serif);
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--sks-itart-slate);
  margin: 14px 0 18px;
}

.sks-itart-about__h2 em {
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-weight: 600;
}

.sks-itart-about__lede {
  font-size: 16px;
  color: var(--sks-itart-slate-3);
  line-height: 1.65;
  margin: 0 0 20px;
}

.sks-itart-about__faq-link {
  display: inline-block;
  font-size: 14px;
  color: var(--sks-itart-amber-d);
  font-weight: 500;
  border-bottom: 1px solid var(--sks-itart-amber);
  padding-bottom: 2px;
  margin-bottom: 32px;
  transition: color .15s, border-color .15s;
}

.sks-itart-about__faq-link:hover {
  color: var(--sks-itart-slate);
  border-bottom-color: var(--sks-itart-slate);
}

.sks-itart-about__toc {
  border-top: 1px solid var(--sks-itart-rule);
  padding-top: 20px;
}

.sks-itart-about__toc-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sks-itart-muted);
  font-weight: 600;
  margin-bottom: 12px;
}

.sks-itart-about__toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sks-itart-about__toc li {
  margin-bottom: 8px;
}

.sks-itart-about__toc a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px;
  font-size: 14px;
  color: var(--sks-itart-slate-3);
  line-height: 1.4;
  padding: 4px 0;
  transition: color .15s;
}

.sks-itart-about__toc a:hover {
  color: var(--sks-itart-amber-d);
}

.sks-itart-about__toc-num {
  font-family: var(--sks-itart-serif);
  font-style: italic;
  color: var(--sks-itart-amber);
  font-weight: 500;
}

/* Right column — collection description renders here */
.sks-itart-about__content {
  min-width: 0;
}

.sks-itart-about__content>*:first-child {
  margin-top: 0;
}

.sks-itart-about__content>*:last-child {
  margin-bottom: 0;
}

.sks-itart-about__content h2,
.sks-itart-about__content h3,
.sks-itart-about__content h4 {
  font-family: var(--sks-itart-serif);
  font-weight: 600;
  color: var(--sks-itart-slate);
  letter-spacing: -0.01em;
  scroll-margin-top: 32px;
}

.sks-itart-about__content h2 {
  font-size: clamp(22px, 1.8vw, 28px);
  margin: 32px 0 14px;
  line-height: 1.2;
}

.sks-itart-about__content h3 {
  font-size: clamp(20px, 1.6vw, 24px);
  margin: 28px 0 14px;
  line-height: 1.25;
}

.sks-itart-about__content h4 {
  font-size: 18px;
  margin: 24px 0 12px;
  line-height: 1.3;
}

.sks-itart-about__content h2 em,
.sks-itart-about__content h3 em,
.sks-itart-about__content h4 em {
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-weight: 500;
}

.sks-itart-about__content p {
  font-size: 16px;
  color: var(--sks-itart-slate-3);
  line-height: 1.75;
  margin: 0 0 1em;
}

.sks-itart-about__content p strong {
  color: var(--sks-itart-slate);
  font-weight: 600;
}

.sks-itart-about__content p em {
  color: var(--sks-itart-amber-d);
  font-style: italic;
}

.sks-itart-about__content a {
  color: var(--sks-itart-amber-d);
  border-bottom: 1px solid var(--sks-itart-amber);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}

.sks-itart-about__content a:hover {
  color: var(--sks-itart-slate);
  border-bottom-color: var(--sks-itart-slate);
}

.sks-itart-about__content ul,
.sks-itart-about__content ol {
  padding-left: 24px;
  margin: 0 0 1em;
}

.sks-itart-about__content li {
  font-size: 16px;
  color: var(--sks-itart-slate-3);
  line-height: 1.7;
  margin-bottom: 6px;
}

.sks-itart-about__content img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  margin: 20px 0;
}

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

  .sks-itart-about__aside {
    position: static;
    top: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FAQ — accordion list, no tabs
   ═══════════════════════════════════════════════════════════════ */
.sks-itart-faq {
  padding: 72px 0;
  background: var(--sks-itart-faq-bg, var(--sks-itart-ivory));
}

.sks-itart-faq__wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 28px;
}

.sks-itart-faq__head {
  margin-bottom: 36px;
}

.sks-itart-faq__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sks-itart-amber);
  font-weight: 500;
  margin: 0 0 10px;
}

.sks-itart-faq__h2 {
  font-family: var(--sks-itart-serif);
  font-size: clamp(29px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sks-itart-slate);
  margin: 14px 0 0;
}

.sks-itart-faq__h2 em {
  font-style: italic;
  color: var(--sks-itart-amber-d);
  font-weight: 600;
}

.sks-itart-faq__list {
  border-top: 1px solid var(--sks-itart-rule);
}

.sks-itart-faq__item {
  border-bottom: 1px solid var(--sks-itart-rule);
}

.sks-itart-faq__q {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  background: transparent;
  border: none;
  font-family: var(--sks-itart-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--sks-itart-slate);
  cursor: pointer;
  transition: color .15s;
}

.sks-itart-faq__q:hover {
  color: var(--sks-itart-amber-d);
}

.sks-itart-faq__q::after {
  content: "+";
  font-family: var(--sks-itart-sans);
  font-weight: 300;
  font-size: 24px;
  color: var(--sks-itart-amber);
  transition: transform .25s ease;
  flex-shrink: 0;
  line-height: 1;
}

.sks-itart-faq__item.is-open .sks-itart-faq__q::after {
  transform: rotate(45deg);
}

.sks-itart-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  font-size: 15px;
  color: var(--sks-itart-slate-3);
  line-height: 1.75;
}

.sks-itart-faq__item.is-open .sks-itart-faq__a {
  max-height: 2000px;
  padding: 0 0 22px;
}

.sks-itart-faq__a-inner p {
  margin: 0 0 0.9em;
}

.sks-itart-faq__a-inner p:last-child {
  margin-bottom: 0;
}

.sks-itart-faq__a-inner strong {
  color: var(--sks-itart-slate);
  font-weight: 600;
}

.sks-itart-faq__a-inner a {
  color: var(--sks-itart-amber-d);
  border-bottom: 1px solid var(--sks-itart-amber);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}

.sks-itart-faq__a-inner a:hover {
  color: var(--sks-itart-slate);
  border-bottom-color: var(--sks-itart-slate);
}

.sks-itart-faq__a-inner em {
  color: var(--sks-itart-amber-d);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1020px) {
  .sks-itart-vars__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 980px) {
  .sks-itart-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 920px) {
  .sks-itart-card__body {
    grid-template-columns: 1fr;
  }

  .sks-itart-showcase__swatch {
    border-right: none;
    border-bottom: 1px solid var(--sks-itart-rule);
    border-radius: 0;
  }
}

@media screen and (max-width: 720px) {
  .sks-itart-hero {
    padding: 24px 0 56px;
  }

  .sks-itart-hero__wrap,
  .sks-itart-prod__wrap,
  .sks-itart-vars__wrap,
  .sks-itart-reviews__wrap,
  .sks-itart-deals__wrap,
  .sks-itart-about__wrap,
  .sks-itart-faq__wrap {
    padding: 0 20px;
  }

  .sks-itart-about {
    padding: 48px 0;
  }

  .sks-itart-deals {
    padding: 48px 0;
  }

  .sks-itart-reviews {
    padding: 48px 0;
  }

  .sks-itart-reviews__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sks-itart-reviews__summary {
    align-items: flex-start;
    text-align: left;
    min-width: 0;
  }

  .sks-itart-reviews__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sks-itart-faq {
    padding: 48px 0;
  }

  .sks-itart-faq__q {
    font-size: 15px;
    padding: 16px 0;
  }

  .sks-itart-prod {
    padding: 48px 0;
  }

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

  .sks-itart-prod__name {
    font-size: 15px;
  }

  .sks-itart-prod__cta {
    font-size: 11px;
    padding: 5px 10px;
  }

  .sks-itart-card__dropdown-bar {
    padding: 14px 18px;
  }

  .sks-itart-info {
    padding: 28px 24px;
  }

  .sks-itart-dd__btn-swatch {
    width: 40px;
    height: 40px;
  }

  .sks-itart-dd__btn-price {
    display: none;
  }

  .sks-itart-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .sks-itart-btn {
    justify-content: center;
  }

  .sks-itart-hero__redirect {
    display: flex;
    font-size: 13px;
    padding: 10px 14px;
    gap: 8px;
  }

  .sks-itart-vars {
    padding: 48px 0;
  }

  .sks-itart-vars__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}

@media screen and (max-width: 540px) {
  .sks-itart-dd__share-default {
    display: none;
  }

  .sks-itart-dd__share svg {
    width: 16px;
    height: 16px;
  }

  .sks-itart-dd__share-success {
    font-size: 11px;
  }

  .sks-itart-specs {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media screen and (max-width: 420px) {
  .sks-itart-vars__grid {
    grid-template-columns: 1fr;
  }
}

/* App-block row (Reviews.io text banner between hero and Step 2) */
.sks-itart-app-row {
  background: #ffffff;
  padding: 28px 0 20px 0;
}

.sks-itart-app-row__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}

.sks-itart-app-row__block {
  display: block;
}

@media (max-width: 749px) {
  .sks-itart-app-row {
    padding: 20px 0;
  }

  .sks-itart-app-row__wrap {
    padding: 0 16px;
  }
}