/** Shopify CDN: Minification failed

Line 579:1 Expected "}" to go with "{"

**/
/* Swatch base */
label.color-swatch{
  width: 42px;
  height: 42px;
  border-radius: var(--swatch-border-radius, 16px);
  border: 1px solid #ddd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The visible circle */
label.color-swatch::before{
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
/* Don’t use background: ... because it wipes background-image */
.product-form__controls-group label.color-swatch,
.product-form__controls-group--zero-gap label.color-swatch {
  background-color: var(--swatch-color, transparent) !important;
  background-image: var(--swatch-image) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Selected = outline only */
.product-form__controls-group input[type="radio"]:checked + label.color-swatch,
.product-form__controls-group--zero-gap input[type="radio"]:checked + label.color-swatch{
  border: 2px solid #000 !important;
}

/* =========================================================
   FORCE FABRIC SWATCHES to match COLOUR swatch sizing/layout
   Targets by input name="Fabric Option(s)" so it WILL match.
   ========================================================= */

.product-form__controls-group input[type="radio"][name*="Fabric Option"] + label.color-swatch,
.product-form__controls-group input[type="radio"][name*="Fabric Options"] + label.color-swatch {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 70px !important;              /* MATCH your colour tile width */
  margin: 0 10px 18px !important;      /* MATCH spacing */
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* the actual circle */
.product-form__controls-group input[type="radio"][name*="Fabric Option"] + label.color-swatch::before,
.product-form__controls-group input[type="radio"][name*="Fabric Options"] + label.color-swatch::before {
  content: "" !important;
  display: block !important;

  width: 44px !important;              /* MATCH your colour circle size */
  height: 44px !important;

  border-radius: 50% !important;
  overflow: hidden !important;

  background-color: var(--swatch-color, transparent) !important;
  background-image: var(--swatch-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  border: 1px solid rgba(0,0,0,0.12) !important;
}

/* label text under circle (uses title="...") */
.product-form__controls-group input[type="radio"][name*="Fabric Option"] + label.color-swatch::after,
.product-form__controls-group input[type="radio"][name*="Fabric Options"] + label.color-swatch::after {
  content: attr(title) !important;
  display: block !important;
  margin-top: 6px !important;

  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;

  color: rgba(var(--color-foreground), 0.75) !important;
}

/* selected ring */
.product-form__controls-group input[type="radio"][name*="Fabric Option"]:checked + label.color-swatch::before,
.product-form__controls-group input[type="radio"][name*="Fabric Options"]:checked + label.color-swatch::before {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
}

/* =========================================================
   FABRIC OPTION — make identical sizing/layout to colour tiles
   (targets the Fabric Option(s) radio group inside --zero-gap)
   Paste at END of base.css
   ========================================================= */

.product-form__controls-group--zero-gap input[type="radio"][name*="Fabric Option"] + label.color-swatch,
.product-form__controls-group--zero-gap input[type="radio"][name*="Fabric Options"] + label.color-swatch {
  /* match the “tile” layout used by your colour buttons */
  width: 70px !important;
  height: auto !important;
  min-height: 70px !important;
  margin: 0 10px 18px !important;
  padding: 0 !important;

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* the actual circle (image stays inside circle) */
.product-form__controls-group--zero-gap input[type="radio"][name*="Fabric Option"] + label.color-swatch::before,
.product-form__controls-group--zero-gap input[type="radio"][name*="Fabric Options"] + label.color-swatch::before {
  content: "" !important;
  display: block !important;

  width: 42px !important;   /* match your colour circle size */
  height: 42px !important;
  border-radius: 50% !important;
  overflow: hidden !important;

  background-color: transparent !important;
  background-image: var(--swatch-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  border: 1px solid #ddd !important;
  margin-bottom: 6px !important;
}

/* the name under the circle */
.product-form__controls-group--zero-gap input[type="radio"][name*="Fabric Option"] + label.color-swatch::after,
.product-form__controls-group--zero-gap input[type="radio"][name*="Fabric Options"] + label.color-swatch::after {
  content: attr(title) !important;
  display: block !important;

  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;

  color: rgba(var(--color-foreground), 0.75) !important;
}

/* selected outline (same behaviour as colours) */
.product-form__controls-group--zero-gap input[type="radio"][name*="Fabric Option"]:checked + label.color-swatch::before,
.product-form__controls-group--zero-gap input[type="radio"][name*="Fabric Options"]:checked + label.color-swatch::before {
  border: 2px solid #000 !important;
}

/* Make BOTH colour + fabric swatches use the same “tile” layout */
.product-form__controls-group--zero-gap input[type="radio"] + label.color-swatch {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 70px !important;              /* same as your colour tiles */
  margin: 0 10px 18px !important;      /* same spacing */
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* The caption under the circle (applies to BOTH) */
.product-form__controls-group--zero-gap label.color-swatch .swatch-label {
  display: block !important;
  margin-top: 6px !important;
  font-size: 0.95rem !important;       /* same as colour */
  font-weight: 500 !important;         /* same as colour */
  line-height: 1.2 !important;
  text-align: center !important;
  color: rgba(var(--color-foreground), 0.75) !important;

  width: 70px !important;              /* match tile width */
  white-space: normal !important;      /* allow wrapping */
  overflow-wrap: anywhere !important;  /* prevents ugly overflow */
  word-break: normal !important;
}

/* Keep rows aligned even when names wrap to 2 lines */
.product-form__controls-group--zero-gap label.color-swatch .swatch-label {
  min-height: 2.4em; /* ~2 lines */
}

.product-form__controls-group--zero-gap label.color-swatch .swatch-label {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

/* Make swatch + label behave the same for BOTH colour + fabric */
.product-form__controls-group input[type="radio"] + label.color-swatch {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 6px !important;            /* spacing between circle and text */
  width: 70px !important;         /* match your colour swatch column width */
}

/* The actual circle */
.product-form__controls-group input[type="radio"] + label.color-swatch::before {
  width: 44px !important;         /* match whatever your colour size is */
  height: 44px !important;
}

/* The label text under the circle (if you're using ::after / title method) */
.product-form__controls-group input[type="radio"] + label.color-swatch::after {
  width: 100% !important;
  white-space: normal !important; /* allow wrapping */
  line-height: 1.15 !important;
  margin-top: 0 !important;       /* gap handles spacing */
  text-align: center !important;
  font-size: 0.95rem !important;  /* match colour label font-size */
  font-weight: 500 !important;    /* match colour label weight */
}

/* Force swatch labels (colour + fabric) to stack vertically */
.product-form__controls-group input[type="radio"] + label.color-swatch {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 70px !important;        /* same column width as colours */
  gap: 8px !important;           /* space between circle and text */
}

/* The swatch circle itself */
.product-form__controls-group input[type="radio"] + label.color-swatch::before {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}

/* Move the title UNDER the circle */
.product-form__controls-group input[type="radio"] + label.color-swatch::after {
  position: static !important;   /* ⬅️ THIS is the key line */
  transform: none !important;
  margin-top: 0 !important;

  display: block !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.15 !important;

  font-size: 0.95rem !important; /* match colour labels */
  font-weight: 500 !important;
}

/* Make ALL swatches use identical vertical layout */
.product-form__controls-group label.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px; /* controls distance between circle and text */
  text-align: center;
}

/* Swatch circle (colour + fabric) */
.product-form__controls-group label.color-swatch::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  background-color: var(--swatch-color);
  background-image: var(--swatch-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Swatch label text */
.product-form__controls-group label.color-swatch span {
  margin-top: 0;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 400;
  display: block;
}

/* ================================
   SWATCH OVERRIDE (FORCE MATCHING)
   Put this at the very bottom of base.css
================================== */

/* 1) Force the swatch label layout to match for BOTH colour + fabric */
.product-form__controls-group .product-form__controls-group--zero-gap label.color-swatch,
.product-form__controls-group label.color-swatch {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;                 /* spacing between circle and text */
  text-align: center !important;
  width: 70px !important;              /* match your colour ones */
  margin: 0 10px 18px !important;      /* match your colour ones */
  padding: 0 !important;
  height: auto !important;
}

/* 2) Force the circle size + image behaviour */
.product-form__controls-group .product-form__controls-group--zero-gap label.color-swatch::before,
.product-form__controls-group label.color-swatch::before {
  content: "" !important;
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: var(--swatch-color) !important;
  background-image: var(--swatch-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Kill any weird extra pseudo-elements that can push spacing */
.product-form__controls-group .product-form__controls-group--zero-gap label.color-swatch::after,
.product-form__controls-group label.color-swatch::after {
  content: none !important;
  display: none !important;
}

/* 4) Force the text under the swatch to sit the same for fabric + colour */
.product-form__controls-group .product-form__controls-group--zero-gap label.color-swatch span,
.product-form__controls-group label.color-swatch span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  text-align: center !important;
  max-width: 70px !important;
  white-space: normal !important;
}

/* 5) If your theme uses visually-hidden spans inside swatches, stop them affecting spacing */
.product-form__controls-group .product-form__controls-group--zero-gap label.color-swatch .visually-hidden,
.product-form__controls-group label.color-swatch .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================
   Fabric swatch zoom modal
   ========================= */

.fabric-zoom-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 999999;
  padding: 20px;
}

.fabric-zoom-modal.is-open{ display: flex; }

.fabric-zoom-panel{
  position: relative;
  width: min(520px, calc(100vw - 40px)); /* fallback size */
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.25);
}

.fabric-zoom-panel img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.fabric-zoom-close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  cursor: pointer;
}
.fabric-zoom-close:hover{ background: #000; }

/* =========================
   Fabric swatch zoom modal
   ========================= */
.fabric-zoom-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 999999;
  padding: 20px;
}

.fabric-zoom-modal.is-open{ display: flex; }

.fabric-zoom-panel{
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.25);
}

.fabric-zoom-panel img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.fabric-zoom-close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  cursor: pointer;
}
.fabric-zoom-close:hover{ background: #000; }

/* =========================
   Fabric swatch zoom modal
   ========================= */
.fabric-zoom-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 999999;
  padding: 20px;
}

.fabric-zoom-modal.is-open{ display: flex; }

.fabric-zoom-panel{
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.25);
  width: min(520px, calc(100vw - 40px));
}

.fabric-zoom-panel img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.fabric-zoom-close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  cursor: pointer;
}
.fabric-zoom-close:hover{ background: #000; }

.fabric-zoom-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 999999;
  padding: 20px;
}
.fabric-zoom-modal.is-open{ display:flex; }

.fabric-zoom-panel{
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.25);
  width: min(520px, calc(100vw - 40px));
}
.fabric-zoom-panel img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 10px;
}

.fabric-zoom-close{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:none;
  background: rgba(0,0,0,0.75);
  color:#fff;
  font-size:20px;
  line-height:30px;
  cursor:pointer;
}
.fabric-zoom-close:hover{ background:#000; }

/* Fabric preview beside thumbnail */

.fabric-preview-box {
  width: 120px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 6px;
  margin-top: 10px;
}

.fabric-preview-box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}