/* ── SKS Tartan Picker + Options Form — matches reference UI ──
   BUILD v17 (Filter chip active state bulletproof — hardcoded amber !important)
   Fonts (Playfair Display + Jost) loaded via <link> in sks-tartan-picker.liquid */

#sks-tartan-picker,
#sks-options-form,
.tm-overlay {
  --sks-ivory: #F5F0E8;
  --sks-parch: #E8DFD0;
  --sks-white: #FFFFFF;
  --sks-slate: #2C3E50;
  --sks-amber: #B8520A;
  --sks-amber-l: #D4681A;
  --sks-amber-p: #FEF3EC;
  --sks-onyx: #1A1A1A;
  --sks-body: #4A4440;
  --sks-muted: #9A9088;
  --sks-rule: rgba(74, 68, 64, .14);
  --sks-rule2: rgba(74, 68, 64, .22);
  --sks-crimsn: #8B1F1F;
  --sks-r: 6px;
  --sks-rl: 10px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--sks-body);
}

/* ── Tartan block ── */
.tartan-block {
  margin-bottom: 24px;
}

/* ── Dual-tartan tabs (slot switcher) ──
   Sits between the swatch grid and the chosen panel for products with the
   `dual-tartan` tag. Two tabs side-by-side: "1st tartan" + "2nd tartan".
   The ACTIVE tab visually merges with the chosen-panel below — same peach
   background as .tartan-chosen, same border colour, no bottom border — so
   the two read as a single connected card. The inactive tab is plain. */
.tartan-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 -1px;
  /* -1px so the active tab's bottom edge overlaps the chosen panel's border */
  position: relative;
  z-index: 2;
}

/* The HTML `hidden` attribute resolves to display:none by default, but the
   .tartan-tabs rule above forces display:flex which would override it.
   This rule restores the hidden behaviour so the Liquid's initial
   `<div class="tartan-tabs" hidden>` actually hides until JS reveals it
   on first selection. */
.tartan-tabs[hidden] {
  display: none !important;
}

.tartan-tab {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--sks-r, 8px) var(--sks-r, 8px) 0 0;
  padding: 9px 14px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--sks-muted, #6F6760);
  transition: color .15s, border-color .15s, background .15s;
}

.tartan-tab:hover {
  background: rgba(184, 82, 10, 0.04);
}

/* Active tab uses the same peach background + border as the .tartan-chosen
   panel below it (defined as #FEF3EC at the top of this file) so the two
   read as one connected card. Hardcoded hex (not var) because at least
   one theme bundle skips this CSS file and the variable would resolve to
   transparent — falling back to a literal here keeps the visual correct
   even if scoping ever breaks. !important defeats the theme's button
   reset that sets background: none on bare <button> elements. */
.tartan-tab.tartan-tab.active {
  color: #1A1A1A !important;
  background: #FEF3EC !important;
  border: 1px solid rgba(184, 82, 10, .25) !important;
  border-bottom: none !important;
}

.tartan-tab-num {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sks-muted, #9A9088);
}

.tartan-tab.active .tartan-tab-num {
  color: var(--sks-amber, #B8520A);
}

.tartan-tab-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--sks-onyx, #2A2620);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tartan-tab--empty .tartan-tab-name {
  color: var(--sks-muted, #9A9088);
  font-style: italic;
  font-weight: 400;
}

.tartan-tab--empty.active .tartan-tab-name {
  color: var(--sks-amber, #B8520A);
  /* draw attention to the slot that needs filling */
  font-style: normal;
  font-weight: 500;
}

/* Empty-state placeholder shown in the chosen-panel slot when the active
   tab points at a slot that hasn't been picked yet. Uses the same peach
   background as .tartan-chosen so the active-tab → panel connection
   reads as one continuous card. */
.tartan-chosen-empty {
  padding: 22px 18px;
  background: var(--sks-amber-p);
  border: 1px solid rgba(184, 82, 10, .15);
  border-radius: var(--sks-r, 8px);
  color: var(--sks-muted, #6F6760);
  font-size: 13px;
  text-align: center;
}

/* Required-field invalid state — set by sks-tartan-picker.js when the user
   hits Add to Cart / Buy Now without picking a tartan. The class now
   PERSISTS until a tartan is selected (cleared in the JS on the
   sks:tartan-selected event), so the cue stays visible while the customer
   is still figuring out what to do — it doesn't quietly disappear after
   a few seconds like before. */
.sks-tartan-picker--invalid .tartan-block {
  outline-offset: 4px;
  border-radius: 6px;
  animation: sks-tartan-shake 0.4s ease-in-out;
}

.sks-tartan-picker--invalid .tartan-lbl {
  color: #B91C1C;
  font-weight: 600;
}

/* Prominent red border around the row of tartan options themselves so the
   customer's eye lands on where to click. `outline` (not `border`) so the
   row doesn't shift its layout when the state toggles on/off. */
.sks-tartan-picker--invalid .tartan-grid {
  outline: 2px solid #B91C1C;
  outline-offset: 6px;
  border-radius: 8px;
}

@keyframes sks-tartan-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  75% {
    transform: translateX(6px);
  }
}

.tartan-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.tartan-lbl {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sks-body);
  font-weight: 500;
}

.tartan-browse {
  font-size: 11.5px;
  color: var(--sks-amber);
  letter-spacing: .04em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.tartan-browse:hover {
  color: var(--sks-amber-l);
}

/* ── Search ── */
.tartan-search-wrap {
  position: relative;
  margin-bottom: 14px;
}

.tartan-search {
  position: relative;
}

.tartan-search input {
  width: 100%;
  background: var(--sks-ivory);
  border: 1px solid transparent;
  border-radius: var(--sks-r);
  padding: 13px 38px 13px 40px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--sks-onyx);
  transition: .2s;
}

.tartan-search input:focus {
  outline: none;
  background: var(--sks-white);
  border-color: var(--sks-amber);
  box-shadow: 0 0 0 3px rgba(184, 82, 10, .1);
}

/* Hide the browser's native clear button on <input type="search"> so it
   doesn't render alongside our own custom .tartan-clear button. Without
   this, mobile + some desktop browsers show two ✕ icons side-by-side. */
.tartan-search input::-webkit-search-cancel-button,
.tartan-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* iOS Safari auto-zooms into any input whose computed font-size is below
   16px when the user taps to focus. The tartan search input is 13.5px on
   desktop (matches the design), so on mobile we bump it to 16px to
   prevent the zoom-in behaviour. Desktop is unchanged. */
@media (max-width: 749px) {
  .tartan-search input {
    font-size: 16px;
  }
}

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

.search-i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sks-muted);
  font-size: 16px;
  pointer-events: none;
}

.tartan-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sks-rule);
  color: var(--sks-body);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.tartan-clear.visible {
  display: flex;
}

.tartan-clear:hover {
  background: var(--sks-amber);
  color: #fff;
}

/* ── Autocomplete dropdown ── */
.tartan-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--sks-white);
  border: 1px solid var(--sks-rule2);
  border-radius: var(--sks-r);
  box-shadow: 0 12px 40px rgba(30, 45, 59, .12);
  z-index: 50;
  max-height: 380px;
  overflow-y: auto;
  display: none;
}

.tartan-dropdown.open {
  display: block;
}

/* Mobile: kill the 40px-blur shadow because it extends past the dropdown's
   box edge and triggers horizontal overflow on narrow viewports (the page
   scrolls sideways when the dropdown is open). Desktop keeps the shadow
   for visual depth. */
@media (max-width: 749px) {
  .tartan-dropdown {
    box-shadow: none;
  }
}

.td-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--sks-rule);
  transition: background .15s;
}

.td-row:last-child {
  border-bottom: none;
}

.td-row:hover {
  background: var(--sks-amber-p);
}

.td-sw {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--sks-rule2);
}

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

.td-name {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  color: var(--sks-onyx);
  font-size: 13.5px;
  line-height: 1.2;
}

.td-meta {
  font-size: 11px;
  color: var(--sks-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.td-variants {
  font-size: 10px;
  color: var(--sks-amber);
  background: var(--sks-amber-p);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: .04em;
  margin-left: 6px;
}

/* Search-dropdown per-row surcharge — right-aligned so the eye can scan the
   price column as it moves down the list. Only rendered when the tartan
   carries a price_per_yard > 0. */
.td-price {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sks-amber);
  flex-shrink: 0;
  margin-left: 8px;
  white-space: nowrap;
}

.td-empty {
  padding: 18px 14px;
  text-align: center;
  color: var(--sks-muted);
  font-size: 13px;
}

.td-empty-q {
  color: var(--sks-onyx);
  font-style: italic;
}

.td-browse-cta {
  padding: 11px 14px;
  text-align: center;
  background: var(--sks-ivory);
  color: var(--sks-amber);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-top: 1px solid var(--sks-rule);
  width: 100%;
  display: block;
  border: none;
  font-family: inherit;
}

.td-browse-cta:hover {
  background: var(--sks-amber);
  color: #fff;
}

/* ── Swatch grid ── */
.tartan-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.t-sw {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: .25s;
}

.t-sw:hover {
  transform: scale(1.06);
  border-color: var(--sks-amber);
}

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

.t-sw .check {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  background: var(--sks-amber);
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
}

.t-sw.selected .check {
  display: flex;
}

.t-sw-tip {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  background: var(--sks-slate);
  color: #fff;
  font-size: 10.5px;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, bottom .2s;
  z-index: 5;
}

.t-sw:hover .t-sw-tip {
  opacity: 1;
  bottom: -30px;
}

.tartan-loading {
  grid-column: 1/-1;
  text-align: center;
  padding: 18px;
  color: var(--sks-muted);
  font-size: 13px;
}

/* ── Chosen panel ── */
.tartan-chosen {
  background: var(--sks-amber-p);
  border: 1px solid rgba(184, 82, 10, .15);
  border-radius: var(--sks-r);
  padding: 16px;
  padding-right: 80px;
  /* reserve space for the absolutely-positioned Change button */
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  /* anchor for the absolute Change button */
}

/* The HTML `hidden` attribute is supposed to mean display:none, but a
   class-level display: flex / inline-flex would beat it on specificity.
   These rules ensure hidden truly hides for the picker's toggleable bits. */
.tartan-chosen[hidden],
.tartan-browse[hidden],
.tartan-search-wrap[hidden] {
  display: none !important;
}

/* Selected-tartan swatch — sized large enough to actually read the pattern
   so the customer sees AT A GLANCE which tartan they've chosen. Previously
   48px which left the swatch looking like a thumbnail; bumped to 88px on
   desktop and stepped down on smaller widths so the panel still fits. */
.tartan-chosen-sw {
  width: 88px;
  height: 88px;
  min-width: 88px;
  min-height: 88px;
  border-radius: 6px;
  border: 2px solid var(--sks-amber);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--sks-parch);
  display: block;
  box-shadow: 0 2px 8px rgba(184, 82, 10, .12);
}

/* Make the actual swatch image fill the larger square (object-fit:cover
   guards against any image whose natural aspect ratio isn't 1:1). */
.tartan-chosen-sw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Anchor the fullscreen-preview magnifier to the swatch's bottom-right
   corner. The swatch already has overflow:hidden, so the button is
   inset a hair from the edge to keep it visually distinct from the
   background pattern. */
.tartan-chosen-sw {
  position: relative;

  overflow: visible;
}

.tartan-chosen-zoom {
  /* Every declaration marked !important because inline styles set by
     sks-tartan-picker.js on the parent .tartan-chosen-sw win the cascade
     for background/display etc., and stale CDN-cached CSS on production
     shops has bitten this file before. This makes the button render
     identically regardless of what else the page throws at it. */
  position: absolute !important;
  bottom: -15px !important;
  right: -15px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  /* Solid amber pill with a white icon — reads immediately against
     any tartan pattern (light OR dark), unlike the previous white
     background which washed out on cream/pink swatches. */
  background: var(--sks-amber, #B8520A) !important;
  color: #FFFFFF !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* White ring around the amber pill separates it from the tartan
     pattern behind it — the amber-on-tartan combo alone can blur
     into orange-plaid tartans (Royal Stewart etc.). */
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(28, 39, 51, .5) !important;
  transition: transform .1s ease, box-shadow .15s ease !important;
  z-index: 2 !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

.tartan-chosen-zoom:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 3px 14px rgba(28, 39, 51, .6) !important;
}

.tartan-chosen-zoom:active {
  transform: scale(0.96);
}

.tartan-chosen-zoom:focus-visible {
  outline: 2px solid var(--sks-amber);
  outline-offset: 2px;
}

.tartan-chosen-zoom[hidden] {
  display: none !important;
}

.tartan-chosen-zoom svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: #FFFFFF !important;
}

/* Invisible hit-area expansion — the button visually stays 26px but the
   tap target extends 6px on all sides so mobile taps don't miss. */
.tartan-chosen-zoom::after {
  content: '';
  position: absolute;
  inset: -6px;
}

/* ── Fullscreen swatch lightbox ─────────────────────────────────────
   Modal preview shown when the buyer clicks the magnifier on the
   chosen swatch. Uses a dark backdrop that dims the whole page. */
.tartan-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  animation: sks-tartan-lightbox-fade .18s ease-out;
}

.tartan-lightbox[hidden] {
  display: none !important;
}

@keyframes sks-tartan-lightbox-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Wrapper enforces the image's rendered bounds and clips the
   hover-zoom so the img can scale up INSIDE without spilling
   across the modal. The chrome (border-radius, drop shadow,
   background fallback) moves here so the clip is clean. */
.tartan-lightbox__img-wrap {
  display: inline-block;
  max-width: 90vw;
  max-height: 82vh;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  background: #1a1a1a;
  line-height: 0;
  animation: sks-tartan-lightbox-zoom .22s cubic-bezier(.2, .8, .2, 1);
}

.tartan-lightbox__img {
  display: block;
  max-width: 90vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Hover-zoom: cursor tells buyers the image is inspect-able. The
     scale-up is CLIPPED by the wrapper above — the container never
     grows, only the content inside it zooms. transform-origin is
     updated per-pixel by JS on mousemove so the zoom centers on
     whatever the cursor is over. */
  cursor: zoom-in;
  will-change: transform;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
  transform-origin: center center;
}

.tartan-lightbox__img-wrap:hover .tartan-lightbox__img,
.tartan-lightbox__img.is-zoomed {
  transform: scale(1.8);
  cursor: zoom-out;
}

@keyframes sks-tartan-lightbox-zoom {
  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tartan-lightbox__caption {
  position: absolute;
  bottom: max(20px, 4vh);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .88);
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
  padding: 0 20px;
  max-width: 90vw;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.tartan-lightbox__close {
  position: absolute;
  top: max(16px, 2vh);
  right: max(16px, 2vw);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
  z-index: 1;
}

.tartan-lightbox__close:hover {
  background: rgba(0, 0, 0, .6);
  border-color: rgba(255, 255, 255, .45);
}

.tartan-lightbox__close:focus-visible {
  outline: 2px solid var(--sks-amber);
  outline-offset: 2px;
}

.tartan-lightbox__close svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Body scroll lock while the lightbox is open. JS toggles this class
   on <body> so background pages don't scroll behind the modal. */
body.tartan-lightbox-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .tartan-lightbox {
    padding: 8vh 4vw;
  }

  .tartan-lightbox__img {
    max-width: 92vw;
    max-height: 76vh;
  }

  .tartan-lightbox__caption {
    font-size: 13.5px;
    bottom: 3.5vh;
  }

  .tartan-lightbox__close {
    width: 36px;
    height: 36px;
    top: 14px;
    right: 14px;
  }

  .tartan-chosen-zoom {
    width: 32px !important;
    height: 32px !important;
    bottom: 5px !important;
    right: 5px !important;
  }

  .tartan-chosen-zoom svg {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 600px) {
  .tartan-chosen-sw {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
  }

  /* Keep the info block inline to the RIGHT of the swatch on mobile.
     Desktop rule sets min-width: 160px on the info block, which forces
     it to wrap under the swatch on narrow viewports. Drop the min-width
     and let flex distribute what's left of the row (~viewport − swatch
     − paddings). Change button already floats absolutely at top-right
     so the info block just has to fit around it. */
  .tartan-chosen {
    padding: 14px;
    padding-right: 64px;
    gap: 12px;
    flex-wrap: nowrap;
  }

  .tartan-chosen-info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .tartan-chosen-name {
    font-size: 15px;
    /* Long titles wrap onto a second line — no ellipsis, so the buyer
       still sees the full tartan name. */
    overflow-wrap: anywhere;
  }

  .tartan-chosen-price {
    display: inline-block;
    margin-left: 6px;
    font-size: 12.5px;
  }

  /* Change button pinned to the BOTTOM-right corner on mobile — the
     top-right position collided visually with long tartan names + the
     price chip, and buyers frequently missed it. Bottom-right leaves
     the info block clean and lands the tap target close to the buyer's
     thumb resting position. */
  .tartan-change {
    top: auto !important;
    right: 12px;
    bottom: 10px;
  }
}

/* On mobile, bump the "Browse all N tartans →" button into a real, tappable
   secondary CTA. The 11.5px desktop text is too easy to miss on a phone,
   and customers who don't see it think the 7 visible swatches are the
   entire catalogue. Larger text + a soft amber background + comfortable
   padding makes it read as a clickable secondary action. */
@media (max-width: 749px) {
  .tartan-head {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
  }

  .tartan-browse {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    background: var(--sks-amber-p);
    border-radius: 999px;
    letter-spacing: .03em;
    line-height: 1.2;
  }

  .tartan-browse:hover,
  .tartan-browse:active {
    background: var(--sks-amber);
    color: #fff;
  }
}

.tartan-chosen-info {
  flex: 1 1 auto;
  min-width: 160px;
}

.tartan-chosen-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--sks-onyx);
  font-size: 16px;
  line-height: 1.2;
}

.tartan-chosen-price {
  color: #B8520A;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 13px;
  margin-left: 8px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.tartan-chosen-desc {
  font-size: 11.5px;
  color: var(--sks-body);
  margin-top: 3px;
}

/* Change button pinned to the top-right corner of the panel so a long
   tartan title can't push it onto its own line / under the swatch. */
.tartan-change {
  font-size: 11.5px;
  color: var(--sks-amber);
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  flex-shrink: 0;
  font-family: inherit;
  position: absolute;
  top: 14px;
  right: 14px;
}

.tartan-change:hover {
  color: var(--sks-amber-l);
}

.tartan-variants {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  flex-basis: 100%;
}

.tartan-variants:empty {
  display: none;
}

.tartan-variants .t-variant {
  background-color: #FFFFFF !important;
  color: #4A4440 !important;
  border: 1px solid rgba(74, 68, 64, .22) !important;
  font-size: 11px;
  padding: 5px 11px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  transition: .2s;
  letter-spacing: .04em;
  display: inline-block;
  line-height: 1.2;
}

.tartan-variants .t-variant:hover {
  border-color: #B8520A !important;
  color: #B8520A !important;
}

.tartan-variants .t-variant.selected {
  background-color: #B8520A !important;
  color: #FFFFFF !important;
  border-color: #B8520A !important;
}

/* ── Browse Modal ── */
.tm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 45, 59, .65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2vh 12px;
  overflow-y: auto;
}

.tm-overlay.open {
  display: flex;
}

body.sks-modal-open {
  overflow: hidden;
}

.tm-modal {
  background: var(--sks-white);
  border-radius: var(--sks-rl);
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.tm-head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--sks-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tm-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--sks-onyx);
  letter-spacing: -.01em;
}

.tm-title em {
  font-style: normal;
  color: var(--sks-amber);
  font-weight: 400;
}

.tm-subtitle {
  font-size: 12px;
  color: var(--sks-muted);
  margin-top: 2px;
}

.tm-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #F5F0E8 !important;
  color: #1A1A1A !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  transition: .2s;
  font-family: inherit;
}

.tm-close:hover {
  background-color: #B8520A !important;
  color: #FFFFFF !important;
}

.tm-search {
  padding: 18px 28px 14px;
  position: relative;
}

.tm-search input {
  width: 100%;
  background: var(--sks-ivory);
  border: 1px solid transparent;
  border-radius: var(--sks-r);
  padding: 13px 14px 13px 42px;
  font-family: inherit;
  font-size: 14px;
  color: var(--sks-onyx);
  transition: .2s;
}

.tm-search input:focus {
  outline: none;
  background: var(--sks-white);
  border-color: var(--sks-amber);
  box-shadow: 0 0 0 3px rgba(184, 82, 10, .1);
}

.tm-search-icon {
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sks-muted);
  font-size: 18px;
  pointer-events: none;
}

.tm-filters {
  padding: 14px 28px;
  border-bottom: 1px solid var(--sks-rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tm-flt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tm-flt-lbl {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sks-muted);
  font-weight: 500;
  width: 60px;
  flex-shrink: 0;
}

.tm-chip {
  padding: 5px 11px;
  border: 1px solid rgba(74, 68, 64, .22) !important;
  border-radius: var(--sks-r);
  background-color: transparent !important;
  font-size: 11.5px;
  color: #4A4440 !important;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  transition: .2s;
}

.tm-chip:hover {
  border-color: #B8520A !important;
  color: #B8520A !important;
}

.tm-chip.active {
  background-color: #B8520A !important;
  color: #FFFFFF !important;
  border-color: #B8520A !important;
}

.tm-alphabet {
  padding: 10px 28px;
  border-bottom: 1px solid var(--sks-rule);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--sks-ivory);
}

.tm-letter {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--sks-body);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  background: transparent;
  border: none;
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-letter:hover:not(:disabled),
.tm-letter:focus:not(:disabled),
.tm-letter.active:not(:disabled) {
  background: transparent;
  color: var(--sks-amber);
  outline: none;
}

.tm-letter:disabled {
  opacity: .25;
  cursor: default;
}

.tm-list {
  flex: 1;
  overflow-y: auto;
  padding: 0px 0;
  position: relative;
}

.tm-list::-webkit-scrollbar {
  width: 8px;
}

.tm-list::-webkit-scrollbar-thumb {
  background: var(--sks-rule2);
  border-radius: 4px;
}

.tm-list::-webkit-scrollbar-track {
  background: var(--sks-ivory);
}

.tm-letter-head {
  padding: 10px 28px 6px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--sks-amber);
  border-top: 1px solid var(--sks-rule);
  background: var(--sks-ivory);
  position: sticky;
  top: 0;
  z-index: 2;
}

.tm-letter-head:first-child {
  border-top: none;
}

.tm-row {
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--sks-rule);
  transition: background .15s;
}

/* ── Virtual list (5000-row optimization) ── */
.tm-list.is-virtual .tm-vlist {
  position: relative;
}

.tm-list.is-virtual .tm-letter-head {
  height: 38px;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 4px;
  line-height: 1;
}

.tm-list.is-virtual .tm-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Virtual-list row-height bump for mobile only (chip-swap rules are
   further down the file so they can beat the base rules in the cascade —
   see "Modal mobile refinements" block near the end of this file). */
@media screen and (max-width: 749px) {
  .tm-list.is-virtual .tm-row {
    height: 100px;
  }
}

.tm-list.is-virtual .tm-rows-spacer {
  display: block;
}

/* ── Virtual grid (5000-card optimization) ── */
.tm-list.is-virtual-grid {
  display: block !important;
  padding: 18px 0 !important;
}

.tm-list.is-virtual-grid .tm-vgrid {
  position: relative;
  width: 100%;
}

.tm-list.is-virtual-grid .tm-vgrid-row {
  box-sizing: border-box;
}

.tm-row:hover {
  background: var(--sks-amber-p);
}

.tm-row-sw {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--sks-rule2);
  background-color: var(--sks-parch);
  display: block;
}

.tm-row-info {
  flex: 1;
  min-width: 0;
}

.tm-row-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sks-onyx);
  line-height: 1.2;
}

.tm-row-meta {
  font-size: 12px;
  color: var(--sks-muted);
  margin-top: 2px;
}

.tm-row-pick {
  font-size: 11px;
  color: var(--sks-amber);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: .2s;
}

.tm-row:hover .tm-row-pick {
  opacity: 1;
}

.tm-empty {
  padding: 60px 28px;
  text-align: center;
  color: var(--sks-muted);
}

.tm-empty-h {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--sks-onyx);
  margin-bottom: 6px;
}

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

.tm-esc-hint kbd {
  background: var(--sks-white);
  border: 1px solid var(--sks-rule2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Modal: new header layout with sub-line ── */
.tm-head-info {
  flex: 1;
  min-width: 0;
}

.tm-head-sub {
  font-size: 12px;
  color: var(--sks-muted);
  margin: 2px 0 0;
  line-height: 1.4;
}

.tm-head-request {
  color: var(--sks-amber);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.tm-head-request:hover {
  color: var(--sks-amber-l);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Modal: Star chip for Popular ── */
.tm-chip-star {
  color: var(--sks-amber);
  font-size: 11px;
  margin-right: 1px;
  line-height: 1;
}

.tm-chip.active .tm-chip-star {
  color: #fff;
}

/* ── Modal: "More filters" toggle + view toggle controls ── */
.tm-flt-row-show {
  flex-wrap: wrap;
}

.tm-flt-controls-inline {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tm-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--sks-white);
  border: 1px solid var(--sks-rule2);
  border-radius: var(--sks-r);
  font-family: 'Jost', sans-serif;
  font-size: 11.5px;
  color: var(--sks-body);
  font-weight: 500;
  cursor: pointer;
  transition: .15s;
  letter-spacing: .02em;
}

.tm-more-btn:hover {
  border-color: #B8520A;
  color: #B8520A;
}

.tm-more-btn.open {
  background-color: #B8520A !important;
  border-color: #B8520A !important;
  color: #FFFFFF !important;
}

.tm-more-btn svg {
  display: block;
  flex-shrink: 0;
}

.tm-more-chev {
  transition: transform .25s ease;
}

.tm-more-btn.open .tm-more-chev {
  transform: rotate(180deg);
}

.tm-more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--sks-amber);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.tm-more-btn.open .tm-more-count {
  background: #fff;
  color: var(--sks-slate);
}

.tm-filters-more {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, padding-top .25s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 0;
}

.tm-filters-more.open {
  max-height: 280px;
  opacity: 1;
  padding-top: 10px;
  border-top: 1px dashed var(--sks-rule);
}

.tm-view-toggle {
  display: inline-flex;
  background: var(--sks-ivory);
  border: 1px solid var(--sks-rule2);
  border-radius: var(--sks-r);
  overflow: hidden;
  flex-shrink: 0;
  align-self: center;
}

.tm-view-btn {
  background: transparent;
  border: none;
  padding: 6px 9px;
  color: var(--sks-muted);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}

.tm-view-btn:hover {
  color: var(--sks-amber);
}

.tm-view-btn.active {
  background: var(--sks-amber-p);
  color: var(--sks-amber);
}

.tm-view-btn svg {
  display: block;
}

/* ── Modal: Active filter chips bar ── */
.tm-active-flt {
  padding: 8px 28px;
  border-bottom: 1px solid var(--sks-rule);
  background: var(--sks-amber-p);
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
}

.tm-active-flt.visible {
  display: flex;
}

.tm-active-flt-lbl {
  color: var(--sks-body);
  font-weight: 500;
  letter-spacing: .02em;
}

.tm-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sks-white);
  border: 1px solid var(--sks-amber);
  color: var(--sks-amber);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 4px 3px 9px;
  border-radius: var(--sks-r);
}

.tm-active-chip button {
  background: transparent;
  border: none;
  color: var(--sks-amber);
  font-size: 12px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  line-height: 1;
  transition: .15s;
}

.tm-active-chip button:hover {
  background: var(--sks-amber);
  color: #fff;
}

.tm-active-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--sks-amber);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.tm-active-clear:hover {
  color: var(--sks-amber-l);
}

/* ── Modal: Mobile alphabet dropdown (hidden on ≥641px) ── */
.tm-alphabet-mobile {
  display: none;
}

/* ── Modal: List wrapper (hosts alphabet + list + preview panel) ── */
.tm-list-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tm-list-wrap .tm-list {
  flex: 1;
  overflow-y: auto;
}

/* ── Modal: Per-row Preview button ── */
.tm-row-preview {
  flex-shrink: 0;
  background-color: transparent !important;
  border: 1px solid rgba(184, 82, 10, .35) !important;
  color: #B8520A !important;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  transition: .15s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tm-row-preview:hover {
  background-color: #B8520A !important;
  border-color: #B8520A !important;
  color: #FFFFFF !important;
}

.tm-row-preview svg {
  display: block;
}

@media (max-width: 640px) {
  .tm-row-preview {
    padding: 5px 7px;
    font-size: 10px;
  }

  .tm-row-preview .lbl {
    display: none;
  }
}

/* ── Modal: Preview panel (slides over list) ── */
.tm-preview {
  position: absolute;
  inset: 0;
  background: var(--sks-white);
  z-index: 5;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s ease;
  pointer-events: none;
}

.tm-preview.open {
  transform: translateX(0);
  pointer-events: auto;
}

.tm-preview-head {
  padding: 14px 28px;
  border-bottom: 1px solid var(--sks-rule);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sks-ivory);
  flex-shrink: 0;
}

.tm-preview-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--sks-body);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px 6px 6px;
  border-radius: var(--sks-r);
  transition: .15s;
}

.tm-preview-back:hover {
  background: var(--sks-white);
  color: var(--sks-amber);
}

.tm-preview-back svg {
  display: block;
}

.tm-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
}

.tm-preview-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}

.tm-preview-img {
  width: 300px !important;
  height: 300px !important;
  min-width: 300px;
  min-height: 300px;
  max-width: 300px;
  max-height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #E8DFD0;
  border: 1px solid rgba(74, 68, 64, .22);
  position: relative;
  flex-shrink: 0;
  display: block;
}

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

/* Fullscreen-preview magnifier — mirrors .tartan-chosen-zoom but
   sized up for the 300x300 preview image. Positioned top-right to
   match the user's spec (see product-page mockup); the Popular
   badge is repositioned to top-left below when both are present so
   they don't overlap. Amber pill + white ring + white icon reads
   cleanly against ANY tartan pattern. */
.tm-preview-zoom {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--sks-amber, #B8520A) !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 10px rgba(28, 39, 51, .5) !important;
  transition: transform .1s ease, box-shadow .15s ease !important;
  z-index: 3 !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

.tm-preview-zoom:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 3px 14px rgba(28, 39, 51, .6) !important;
}

.tm-preview-zoom:active {
  transform: scale(0.96) !important;
}

.tm-preview-zoom:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 3px !important;
}

.tm-preview-zoom svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  stroke: #FFFFFF !important;
}

/* Move the Popular badge to top-LEFT when it coexists with the
   zoom button (which owns top-right). Applies whenever the zoom
   button is a sibling of .popular-large inside the img frame. */
.tm-preview-img:has(.tm-preview-zoom) .popular-large {
  right: auto;
  left: 10px;
}

.tm-preview-img .popular-large {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--sks-amber);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--sks-r);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tm-preview-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.tm-preview-name {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--sks-onyx);
  line-height: 1.15;
  margin: 0;
}

.tm-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}

.tm-preview-meta .tm-row-meta-chip {
  font-size: 10px;
  padding: 3px 8px;
}

.tm-preview-section-lbl {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sks-muted);
  font-weight: 500;
  margin-bottom: 6px;
  font-family: 'Jost', sans-serif;
}

.tm-preview-section {
  margin-top: 2px;
}

.tm-preview-desc {
  font-size: 13px;
  color: var(--sks-body);
  font-style: normal;
  line-height: 1.45;
  margin-top: -2px;
}

/* Price + Quick Ship two-cell panel — compact */
.tm-preview-pricetime {
  background: var(--sks-ivory);
  border: 1px solid var(--sks-rule);
  border-radius: var(--sks-r);
  padding: 9px 12px;
  margin-top: 4px;
}

.tm-preview-pt-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
  align-items: center;
}

.tm-preview-pt-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tm-preview-pt-cell+.tm-preview-pt-cell {
  border-left: 1px solid var(--sks-rule);
  padding-left: 10px;
}

.tm-preview-pt-lbl {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sks-muted);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tm-preview-pt-val {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--sks-onyx);
  line-height: 1.1;
  margin-top: 1px;
}

.tm-preview-pt-sub {
  font-size: 10.5px;
  color: var(--sks-muted);
  line-height: 1.35;
  margin-top: 1px;
}

@media (max-width: 640px) {
  .tm-preview-pricetime {
    padding: 8px 11px;
  }

  .tm-preview-pt-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tm-preview-pt-cell+.tm-preview-pt-cell {
    border-left: none;
    border-top: 1px solid var(--sks-rule);
    padding-left: 0;
    padding-top: 8px;
  }

  .tm-preview-pt-val {
    font-size: 15px;
  }
}

.tm-preview-variants {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tm-preview-variant {
  padding: 8px 14px !important;
  background-color: #FFFFFF !important;
  border: 1px solid rgba(74, 68, 64, .22) !important;
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  color: #4A4440 !important;
  cursor: pointer;
  font-weight: 500;
  transition: .15s;
}

.tm-preview-variant:hover {
  border-color: #B8520A !important;
  color: #B8520A !important;
}

.tm-preview-variant.active {
  background-color: #B8520A !important;
  color: #FFFFFF !important;
  border-color: #B8520A !important;
}

.tm-preview-colors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tm-preview-color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--sks-body);
  background: var(--sks-ivory);
  padding: 5px 10px 5px 6px;
  border-radius: 30px;
}

.tm-preview-color .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .1);
}

.tm-preview-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  align-items: stretch;
}

.tm-preview-select {
  flex: 1;
  background-color: #B8520A !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: 'Jost', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 18px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: .2s;
  min-height: 48px;
}

.tm-preview-select:hover {
  background-color: #D4681A !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(184, 82, 10, .3);
}

.tm-preview-select svg {
  display: block;
}

@media (max-width: 640px) {
  .tm-preview-head {
    padding: 12px 16px;
  }

  .tm-preview-body {
    padding: 18px 16px;
  }

  .tm-preview-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tm-preview-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .tm-preview-zoom {
    width: 40px !important;
    height: 40px !important;
    top: 12px !important;
    right: 12px !important;
  }

  .tm-preview-zoom svg {
    width: 22px !important;
    height: 22px !important;
  }

  .tm-preview-name {
    font-size: 22px;
  }

  .tm-preview-clan {
    font-size: 13px;
  }
}

/* ── Modal: Enhanced row (bigger swatch + meta chips) ── */
.tm-row {
  padding: 11px 28px;
  gap: 14px;
}

.tm-row-sw {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px;
  min-height: 56px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #BDB6AC;
  position: relative;
  background-color: #E8DFD0;
  display: block;
}

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

.tm-row-popular {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  background: var(--sks-amber);
  color: #fff;
  border-radius: 50%;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  line-height: 1;
}

.tm-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tm-row-meta-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.tm-row-meta-chip {
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sks-muted);
  background: var(--sks-ivory);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}

.tm-row-meta-chip.variants {
  color: var(--sks-amber);
  background: var(--sks-amber-p);
}

/* Modal desktop-only inline price — sits right after the tartan title so
   the surcharge is at eye level. Hidden on mobile (see media query below);
   there the price appears as a chip beneath instead. */
.tm-row-name .tm-row-price {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sks-amber);
  margin-left: 8px;
  vertical-align: baseline;
}

/* Modal chip-swap between viewports:
   Desktop → material chip visible, price chip hidden.
   Mobile  → price chip visible in the material chip's slot; material chip
             hidden so we don't stack two chips in the narrow column.
   Media queries below flip these on mobile. */
.tm-row-meta-chip.is-price {
  display: none;
  color: var(--sks-amber);
  background: var(--sks-amber-p);
}

.tm-row-meta-chip.woven {
  color: var(--sks-body);
  background: var(--sks-parch);
  text-transform: none;
  letter-spacing: .02em;
  font-size: 9px;
}

/* ── Modal: Grid view ── */
.tm-list.is-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px 28px;
}

.tm-list.is-grid .tm-letter-head {
  display: none;
}

.tm-card {
  background: var(--sks-white);
  border: 1px solid var(--sks-rule);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: .18s;
  position: relative;
  min-height: 280px;
  font-family: 'Jost', sans-serif;
}

.tm-card:hover {
  transform: translateY(-2px);
  border-color: var(--sks-amber);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.tm-card-img {
  width: 100%;
  aspect-ratio: 1;
  background-color: #E8DFD0;
  position: relative;
  overflow: hidden;
}

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

.tm-card-popular {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--sks-amber);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  z-index: 2;
}

.tm-card-woven {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  z-index: 2;
}

.tm-card-body {
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.tm-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sks-onyx);
  line-height: 1.2;
  margin: 0;
  /* Reserve two lines so cards don't overlap when a tartan name wraps */
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tm-card-clan {
  font-size: 11.5px;
  color: var(--sks-muted);
  line-height: 1.3;
}

.tm-card-chips {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.tm-card-chips .tm-row-meta-chip {
  font-size: 9px;
  padding: 2px 5px;
}

.tm-card-actions {
  padding: 0 12px 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.tm-card-select {
  flex: 1;
  background-color: #FFFFFF !important;
  border: 1px solid #B8520A !important;
  color: #B8520A !important;
  font-family: 'Jost', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 8px;
  border-radius: var(--sks-r);
  cursor: pointer;
  transition: .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tm-card-select:hover {
  background-color: #B8520A !important;
  color: #FFFFFF !important;
}

.tm-card-preview {
  flex-shrink: 0;
  background-color: transparent !important;
  border: 1px solid rgba(74, 68, 64, .22) !important;
  color: #4A4440 !important;
  font-family: 'Jost', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 9px;
  border-radius: var(--sks-r);
  cursor: pointer;
  transition: .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tm-card-preview:hover {
  background-color: #2C3E50 !important;
  border-color: #2C3E50 !important;
  color: #FFFFFF !important;
}

.tm-card-preview svg {
  display: block;
}

/* ── Options Form ── */
.sks-options-form {
  margin-bottom: 24px;
  font-family: 'Jost', sans-serif;
}

#sks-options-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  grid-auto-flow: dense;
}

.sks-opt-block {
  margin-bottom: 0;
  grid-column: 1 / -1;
}

.sks-opt-block--measurement {
  grid-column: span 1;
  /* Subgrid: each measurement block spans 2 row tracks from the parent grid,
     putting its label in row N and its input in row N+1. Neighbouring
     measurement blocks share the same two row tracks, so all labels in a
     row size to the tallest label and all inputs align — without reserving
     dead space when labels are short. */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 8px;
}

.sks-opt-head {
  margin-bottom: 10px;
}

.sks-opt-block--measurement .sks-opt-head {
  margin-bottom: 0;
  align-self: start;
}

@media (max-width: 540px) {
  #sks-options-fields {
    grid-template-columns: 1fr;
  }

  .sks-opt-block--measurement {
    grid-column: 1 / -1;
  }
}

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

/* Required-field validation: label turns red+bold, input border turns red */
.sks-opt-block--invalid .sks-opt-head .tartan-lbl,
.sks-opt-block--invalid .sks-opt-head .sks-req {
  color: #B91C1C;
  font-weight: 600;
}

.sks-opt-block--invalid input,
.sks-opt-block--invalid select,
.sks-opt-block--invalid .pleat-opt,
.sks-opt-block--invalid .sks-swatch {
  /* Shorthand `border` (style+width+color), not just border-color. Some
     browsers (older WebKit / inputs with native-appearance fallback) may
     render the default border with style:none, in which case setting
     border-color alone leaves nothing visible. The shorthand guarantees
     a 1px solid red stroke regardless of the prior border-style. */
  border: 1px solid #B91C1C !important;
}

/* Inline "Please fill this field" message that appears under the field on
   failed submit. For text_input blocks the existing .sks-measurement-error
   element is reused; for other types the JS injects a .sks-required-msg div. */
.sks-required-msg {
  margin-top: 6px;
  color: #B91C1C;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

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

/* Short shake — triggered by adding .sks-opt-block--shake. The JS removes
   the class first to restart the animation each submit attempt. */
.sks-opt-block--shake {
  animation: sks-req-shake .42s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes sks-req-shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(3px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-5px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(5px, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sks-opt-block--shake {
    animation: none;
  }
}

/* Global "please fill required fields" message below the cart button */
.sks-required-error {
  display: none;
  margin-top: 10px;
  font-size: 12.5px;
  color: #B91C1C;
  font-weight: 500;
  text-align: center;
}

.sks-required-error.is-visible {
  display: block;
}

.sks-opt-grid--radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ─── Swatch option type (mirrors .t-sw tartan picker style) ─── */
.sks-opt-grid--swatch {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

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

.sks-swatch {
  position: relative;
  border-radius: 4px;
  cursor: pointer;
  /* Subtle resting-state border so unselected swatches read as distinct
     tappable tiles instead of bare images floating on the background. */
  border: 2px solid var(--sks-rule);
  transition: .25s;
  display: block;
}

.sks-swatch:hover {
  border-color: var(--sks-amber);
  z-index: 50;
}

/* Previously the imgbox scaled 1.06 on hover, but the swatch isn't
   overflow:hidden — the scaled image visually bled past the border and
   made the amber hover-border disappear behind the image edge. Hover
   now just colors the border, no zoom. */

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

.sks-swatch-imgbox {
  position: relative;
  display: block;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 2px;
  transition: transform .25s;
}

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

/* Hidden by default — only revealed on mobile */
.sks-swatch-meta {
  display: none;
}

.sks-swatch-img--blank {
  background:
    repeating-linear-gradient(45deg, #e6d8c8 0 6px, #d4c2ab 6px 10px);
}

/* Orange tick badge on selected swatch */
.sks-swatch-check {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  background: var(--sks-amber);
  border-radius: 50%;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.sks-swatch-check svg {
  width: 11px;
  height: 11px;
}

.sks-swatch.selected .sks-swatch-check {
  display: flex;
}

/* Hover tooltip ABOVE the swatch.
   The tooltip MUST sit on .sks-swatch (the <label>), NOT inside the
   imgbox, because .sks-swatch-imgbox gets `transform: scale(1.06)` on
   hover which creates a stacking context that traps z-index. A high
   z-index on the tooltip + a high z-index on the hovered .sks-swatch
   guarantees it floats above all sibling swatches (same row and rows
   above/below). The selector chain lets the tooltip live inside the
   imgbox (where the JS injects it) but still escape stacking issues. */
.sks-swatch-tip {
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  background: var(--sks-slate);
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, top .2s;
  z-index: 100;
}

.sks-swatch:hover .sks-swatch-tip {
  opacity: 1;
  top: -32px;
}

/* The imgbox creates a stacking context (transform on hover) that would
   otherwise trap the tooltip behind sibling swatches whose content
   overlaps the tooltip's horizontal extent. Opting the swatch out of
   overflow clipping and ensuring the imgbox doesn't clip its descendants
   keeps the tooltip free to render over neighbours. */
.sks-swatch,
.sks-swatch-imgbox {
  overflow: visible;
}

/* Dynamic price hint shown after the option label (e.g. "FABRIC  +$10") */
.sks-opt-head-price {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sks-amber);
  letter-spacing: 0.02em;
}

/* ─── Mobile: show name + price under each swatch (no hover on touch) ─── */
@media (max-width: 720px) {
  .sks-swatch:hover .sks-swatch-imgbox {
    transform: none;
  }

  .sks-swatch-tip {
    display: none;
  }

  .sks-swatch-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 2px 3px;
    gap: 1px;
    text-align: center;
    line-height: 1.2;
  }

  .sks-swatch-meta-name {
    font-family: 'Playfair Display', serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sks-onyx);
  }

  .sks-swatch-meta-price {
    font-size: 10.5px;
    color: var(--sks-amber);
    font-weight: 500;
  }
}

.pleat-opt {
  padding: 14px;
  border: 1px solid var(--sks-rule2);
  border-radius: var(--sks-r);
  cursor: pointer;
  transition: .2s;
  text-align: left;
  background: var(--sks-white);
  display: block;
}

.pleat-opt:hover {
  border-color: var(--sks-amber);
}

.pleat-opt.selected {
  border-color: var(--sks-amber);
  background: var(--sks-amber-p);
}

.pleat-name {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--sks-onyx);
  margin-bottom: 3px;
}

.pleat-desc {
  font-size: 11.5px;
  color: var(--sks-body);
}

.sks-price-mod {
  font-size: 11px;
  color: var(--sks-amber);
  font-weight: 500;
  font-family: 'Jost', sans-serif;
  margin-left: 6px;
}

.sks-opt-list--checkbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sks-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sks-rule);
  border-radius: var(--sks-r);
  cursor: pointer;
  transition: .2s;
  background: var(--sks-white);
}

.sks-check-item:hover {
  border-color: var(--sks-amber);
}

.sks-check-item input {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--sks-amber);
}

.sks-check-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sks-onyx);
}

.sks-check-desc {
  display: block;
  font-size: 11.5px;
  color: var(--sks-body);
  margin-top: 2px;
}

.sks-opt-select-wrap {
  position: relative;
  /* Half width so the dropdown lines up with the 2-up option cards above */
  max-width: calc(50% - 5px);
}

@media (max-width: 749px) {
  .sks-opt-select-wrap {
    max-width: 100%;
  }
}

.sks-select {
  width: 100%;
  padding: 14px 42px 14px 14px;
  border: 1px solid var(--sks-rule2);
  border-radius: var(--sks-r);
  background-color: var(--sks-white);
  /* custom chevron (appearance:none removes the native arrow) */
  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;
  color: var(--sks-onyx);
  font-size: 14px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Roomier, even-height rows in the open list (honoured where the browser
   allows option styling; the list scrolls natively when it's this long). */
.sks-select option {
  min-height: 40px;
  padding: 10px 12px;
  line-height: 1.8;
  color: var(--sks-onyx);
  background: var(--sks-white);
}

.sks-select:focus {
  outline: none;
  border-color: var(--sks-amber);
  /* no shadow on click/focus */
  box-shadow: none;
}

/* ── Custom dropdown (JS enhances .sks-select → styled listbox) ──
   The native <select> stays in the DOM (hidden) for form submit/validation;
   this styled overlay mirrors it. Falls back to the native select if JS is off. */
.sks-select.is-csel-hidden {
  display: none !important;
}

.sks-csel {
  position: relative;
  width: 100%;
  font-family: inherit;
}

.sks-csel__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--sks-rule2) !important;
  border-radius: var(--sks-r);
  background: var(--sks-white);
  color: var(--sks-onyx);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease;
}

.sks-csel__trigger:hover,
.sks-csel.is-open .sks-csel__trigger {
  border-color: var(--sks-amber);
}

.sks-csel__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--sks-onyx) !important;
  margin-bottom: 3px;
}

.sks-csel__label.is-placeholder {
  color: var(--sks-body);
}

.sks-csel__chev {
  flex: none;
  display: inline-flex;
  color: #726a5f;
  transition: transform .18s ease;
}

.sks-csel.is-open .sks-csel__chev {
  transform: rotate(180deg);
}

.sks-csel__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 5px;
  background: var(--sks-white);
  border: 1px solid var(--sks-rule2);
  border-radius: var(--sks-r);
  box-shadow: 0 12px 32px rgba(30, 30, 30, .14);
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

.sks-csel__opt {
  padding: 12px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--sks-onyx);
  cursor: pointer;
}

.sks-csel__opt:not(:last-child) {
  border-bottom: 1px solid rgba(74, 68, 64, .09);
}

.sks-csel__opt:hover {
  background: var(--sks-amber-p);
}

.sks-csel__opt.is-sel {
  background: var(--sks-amber-p);
  color: var(--sks-amber);
  font-weight: 600;
}

.sks-csel__opt--ph {
  color: var(--sks-body);
}

/* slim custom scrollbar for the list */
.sks-csel__panel::-webkit-scrollbar {
  width: 9px;
}

.sks-csel__panel::-webkit-scrollbar-track {
  background: transparent;
}

.sks-csel__panel::-webkit-scrollbar-thumb {
  background: var(--sks-rule2);
  border-radius: 5px;
  border: 2px solid var(--sks-white);
}

/* ── Measurement input: inches-only, with inline "in" label and a small "≈ N cm" helper ── */
.sks-measurement-wrap {
  position: relative;
  display: block;
  margin-bottom: 14px;
}

.sks-measurement-input {
  width: 100%;
  padding: 12px 76px 12px 14px;
  /* extra right-padding so "inches" suffix doesn't overlap typed numbers */
  border: 1px solid var(--sks-rule2);
  border-radius: var(--sks-r);
  background: var(--sks-white);
  color: var(--sks-onyx);
  font-size: 13.5px;
  font-family: inherit;
  /* `appearance: none` is required on Safari/macOS — otherwise WebKit draws
     its own native textfield bezel that ignores our `border` declaration,
     so the red invalid-state border never appears. Firefox still gets
     textfield-spinnerless rendering via -moz-appearance below. The actual
     spinner-arrow hiding is handled by the ::-webkit-spin-button rules
     just below, so we don't need `appearance: textfield` for that. */
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

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

.sks-product-section input:focus-visible {
  outline: none !important;
}

.sks-measurement-input:focus,
.sks-measurement-input:focus-visible {
  outline: none;
  border-color: var(--sks-amber);
  box-shadow: none;
}

/* Inline "in" label sitting at the right edge of the input (purely visual) */
.sks-measurement-unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--sks-muted);
  letter-spacing: .04em;
  pointer-events: none;
  line-height: 1;
}

/* Auto-updating "≈ N cm" helper.
   Default placement is bottom-right of the input wrapper (legacy use).
   When rendered inside the option head (--head modifier), it sits on the
   RIGHT of the label and renders a touch larger. */
.sks-measurement-cm {
  position: absolute;
  right: 4px;
  bottom: -16px;
  font-size: 11px;
  color: var(--sks-muted);
  line-height: 1;
  pointer-events: none;
  font-family: inherit;
}

/* In-head variant — used for the new layout where the cm helper sits to
   the right of the option label rather than below the input. */
.sks-opt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sks-measurement-cm--head {
  position: static;
  /* override default absolute positioning */
  right: auto;
  bottom: auto;
  font-size: 11px;
  /* understated — sits next to label without competing with it */
  font-weight: 500;
  color: var(--sks-body);
  white-space: nowrap;
  letter-spacing: .01em;
}

/* Hide the head cm hint when it's empty so the head row doesn't render with
   a phantom gap before the user has typed anything. */
.sks-measurement-cm--head:empty {
  display: none;
}

/* ── Error state ── */
.sks-measurement-input.sks-input-error {
  border-color: #C0392B;
}

.sks-measurement-input.sks-input-error:focus,
.sks-measurement-input.sks-input-error:focus-visible {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

.sks-measurement-error {
  margin-top: 6px;
  color: #C0392B;
  font-size: 12px;
  line-height: 1.35;
}

.sks-measurement-addon {
  margin-top: 6px;
  color: #B8520A;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .tartan-grid {
    /* minmax(0, 1fr) so tracks can shrink below their intrinsic content size
       — without it, swatches push past the viewport edge on narrow screens. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tm-overlay {
    padding: 0;
    align-items: stretch;
  }

  .tm-modal {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .tm-head,
  .tm-search,
  .tm-filters,
  .tm-alphabet,
  .tm-foot,
  .tm-letter-head,
  .tm-row {
    padding-left: 18px;
    padding-right: 18px;
  }

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

  .tm-filters {
    padding: 10px 16px;
    gap: 8px;
  }

  .tm-flt-row {
    /* Wrap chips onto multiple lines instead of horizontal-scrolling —
       the scroll UI was hiding the "More filters" button and cropping
       row labels ("REGION" → "GION" mid-scroll). Chip counts per row
       (max 5 for Region) are small enough to wrap cleanly on narrow
       viewports without pushing the modal too tall. */
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 2px;
  }

  /* Put the row label on its own line so it never competes with chip
     wrapping. `flex-basis: 100%` forces a wrap after the label so all
     chips flow underneath. */
  .tm-flt-lbl {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    letter-spacing: .14em;
    margin-bottom: 2px;
  }

  .tm-chip {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Hide the "SELECT →" chip on touch viewports — it's opacity 0 on
     desktop (revealed on hover) but touch has no hover, so it was
     rendering visible on any row that happened to trigger a hover-ish
     state (search match, focus). Tap-on-row already selects; the chip
     is redundant on mobile. */
  .tm-row-pick {
    display: none !important;
  }

  .tm-alphabet {
    display: none;
  }

  .tm-alphabet-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sks-rule);
    background: var(--sks-ivory);
    font-size: 12px;
  }

  .tm-alphabet-mobile select {
    background: var(--sks-white);
    border: 1px solid var(--sks-rule2);
    border-radius: 4px;
    padding: 6px 28px 6px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--sks-onyx);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%234A4440' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
  }

  .tm-active-flt {
    padding: 8px 16px;
  }

  .tm-row {
    padding: 10px 16px;
    gap: 10px;
  }

  .tm-row-sw {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px;
    min-height: 64px;
  }

  /* Show-row rules moved out to a wider @media block below so they
     also apply to landscape / tablet-ish viewports (750–899px) where
     the modal max-width (880px) means the same content-width constraint
     as narrow mobile. */

  .tm-list.is-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 14px 16px;
  }

  .tm-card-name {
    font-size: 14px;
  }

  .tm-card-clan {
    font-size: 11px;
  }

  .tm-card-body {
    padding: 9px 10px 10px;
  }

  .tm-card-actions {
    padding: 0 10px 10px;
  }

  .tm-card-select {
    font-size: 10px;
    padding: 6px 6px;
  }
}

@media (max-width: 380px) {
  .tm-list.is-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Modal filter Show-row: keep on one line across a wider range ─────
   Applies at 899px and below so tablet/landscape phones (where the
   modal takes near-full-width but the viewport is >749px) still get
   the compact single-line Show row. */
@media (max-width: 899px) {
  .tm-flt-row-show {
    position: relative;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .tm-flt-row-show .tm-flt-lbl {
    display: none;
  }

  .tm-flt-controls-inline {
    margin-left: auto;
    width: auto;
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    gap: 6px;
    flex-shrink: 0;
  }

  .tm-more-btn {
    flex: 0 0 auto;
    justify-content: center;
    padding: 5px 8px;
    font-size: 11px;
  }

  .tm-view-toggle {
    flex-shrink: 0;
  }
}

/* ── Narrow phones: shorten "More filters" to just "filters" ─────────
   At ≤499px the show row runs out of horizontal room — dropping just
   the word "More " (kept inside a dedicated .tm-more-word span in the
   liquid) shaves ~35px while leaving the label meaningful. The count
   pill stays visible so buyers still see how many extra filters are
   active. */
@media (max-width: 499px) {
  .tm-more-btn .tm-more-word {
    display: none;
  }

  .tm-more-btn {
    padding: 5px 7px;
    gap: 4px;
  }

  .tm-chip {
    padding: 4px 9px;
    font-size: 11px;
  }

  .tm-view-btn {
    padding: 5px 7px;
  }
}

/* ═════════════════════════════════════════════════════════════════
   SIZE GUIDE — measurements section header + modal
   sks-options-form.js inserts .sks-meas-head as a full-width grid row
   immediately before the first .sks-opt-block--measurement. Layout:
   "Your measurements" on the left, "View guide →" on the right
   (only when product has a custom.size_guide page metafield).
   Modal reuses the .tm-overlay / .tm-modal shell for visual consistency
   with the tartan-browse modal.
   ═════════════════════════════════════════════════════════════════ */

.sks-meas-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 -2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sks-rule);
}

.sks-meas-head-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sks-onyx);
  letter-spacing: -.01em;
}

.sks-size-guide-link {
  margin-left: auto;
  white-space: nowrap;
}

/* Modal body — scrolls when content is taller than the card */
.sks-size-guide-modal {
  max-width: 920px;
}

.sks-size-guide-body {
  padding: 24px 28px 28px;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  flex: 1;
  color: var(--sks-onyx);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
}

.sks-size-guide-body h1,
.sks-size-guide-body h2,
.sks-size-guide-body h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--sks-onyx);
  letter-spacing: -.01em;
  margin: 28px 0 12px;
}

.sks-size-guide-body h1 {
  font-size: 22px;
  margin-top: 0;
}

.sks-size-guide-body h2 {
  font-size: 18px;
}

.sks-size-guide-body h3 {
  font-size: 16px;
}

.sks-size-guide-body p {
  margin: 0 0 12px;
}

.sks-size-guide-body strong {
  font-weight: 600;
}

.sks-size-guide-body a {
  color: var(--sks-amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sks-size-guide-body ul,
.sks-size-guide-body ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.sks-size-guide-body li {
  margin: 4px 0;
}

.sks-size-guide-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 10px 0;
}

/* Tables — the size-guide pages are mostly tables of measurements */
.sks-size-guide-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 18px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--sks-rule);
  border-radius: 8px;
  overflow: hidden;
}

.sks-size-guide-body thead {
  background: #F5F0E8;
}

.sks-size-guide-body th,
.sks-size-guide-body td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--sks-rule);
  border-right: 1px solid var(--sks-rule);
  vertical-align: middle;
}

.sks-size-guide-body th:last-child,
.sks-size-guide-body td:last-child {
  border-right: none;
}

.sks-size-guide-body tr:last-child td {
  border-bottom: none;
}

.sks-size-guide-body th {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--sks-onyx);
}

.sks-size-guide-body tbody tr:nth-child(even) td {
  background: #FAF6EE;
}

@media (max-width: 640px) {
  .sks-size-guide-body {
    padding: 18px 18px 22px;
    font-size: 13px;
  }

  .sks-size-guide-body h1 {
    font-size: 19px;
  }

  .sks-size-guide-body h2 {
    font-size: 16px;
  }

  /* Tables on mobile — let them scroll horizontally INSIDE the modal body
     rather than pushing the whole page sideways. The page record's HTML
     has inline `style="width: 593px"` on the <table> and explicit pixel
     widths on every <td> (from Shopify's rich-text editor) — override
     those with !important so the table can actually shrink + scroll. */
  .sks-size-guide-body table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sks-size-guide-body th,
  .sks-size-guide-body td {
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
    /* Override the inline widths the rich-text editor sets so cells size to content */
    width: auto !important;
    height: auto !important;
  }
}

/* ── Modal chip-swap on mobile ────────────────────────────────────────
   Placed at end-of-file so this media query wins over the base
   `.tm-row-name .tm-row-price` (~L1817) and `.tm-row-meta-chip.is-price`
   (~L1832) rules which both come AFTER the earlier mobile media block.
   Cascade order: same specificity + later position = later wins. Without
   this, mobile ends up showing the inline title price AND hiding the
   price chip, exactly the opposite of what we want.

   Mobile layout target:
     [swatch]  Tartan name
               Family or Clan
               [CLAN] [+$30] [MADE TO WEAVE]     [preview]

   Desktop layout target:
     [swatch]  Tartan name  +$30
               Family or Clan
               [CLAN] [ACRYLIC YARN] [MADE TO WEAVE]     [preview] */
@media screen and (max-width: 749px) {
  .tm-row-name .tm-row-price {
    display: none;
  }

  .tm-row-meta-chip.is-material {
    display: none;
  }

  .tm-row-meta-chip.is-price {
    display: inline-block;
  }
}

/* ── Fabric chosen panel ────────────────────────────────────────────────
   Mirrors the tartan-chosen amber card, sized down to sit inline under
   the fabric swatch grid. Only rendered for the `fabric` and
   `tweed_fabric_outfit` metaobjects — see CHOSEN_PANEL_KEYS in
   sks-options-form.js. */
.sks-fabric-chosen {
  background: var(--sks-amber-p);
  border: 1px solid rgba(184, 82, 10, .15);
  border-radius: var(--sks-r);
  padding: 16px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.sks-fabric-chosen-sw {
  width: 88px;
  height: 88px;
  min-width: 88px;
  min-height: 88px;
  border-radius: 6px;
  border: 2px solid var(--sks-amber);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--sks-parch);
  display: block;
  box-shadow: 0 2px 8px rgba(184, 82, 10, .12);
}

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

.sks-fabric-chosen-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.sks-fabric-chosen-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--sks-onyx);
  font-size: 16px;
  line-height: 1.2;
}

.sks-fabric-chosen-price {
  color: #B8520A;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .sks-fabric-chosen {
    padding: 14px;
    gap: 14px;
  }

  .sks-fabric-chosen-sw {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
  }
}