/* =========================================================
   Color Jam — single product page
   Gallery, lightbox, variation swatches, spec list.
   Loaded on product pages only, after main.css.
   ========================================================= */

/* ---------- gallery ---------- */
.woocommerce div.product div.images.cj-gallery{background:none;padding:0;min-width:0}
.cj-gallery__stage{
  position:relative;aspect-ratio:1/1;background:var(--cj-panel);overflow:hidden;
  /* Leave room under the fold line for the thumbnail strip. */
  width:100%;max-height:max(420px,calc(100vh - 300px));
}
.cj-gallery__open{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:7%;border:0;background:none;cursor:zoom-in;margin:0;width:100%;height:100%;
}
.woocommerce div.product div.images .cj-gallery__img,
.cj-gallery__img{
  width:100%;height:100%;max-height:none;object-fit:contain;display:block;margin:0;
  mix-blend-mode:multiply;transition:opacity .25s ease;
}
.cj-gallery__img.is-swapping{opacity:.3}
/* Lifestyle photographs fill the frame instead of floating in it. */
.cj-gallery__stage.is-photo .cj-gallery__open{padding:0}
.woocommerce div.product div.images .cj-gallery__stage.is-photo .cj-gallery__img{object-fit:cover;mix-blend-mode:normal}

.cj-gallery__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--cj-rule);
  background:rgba(251,248,244,.94);color:var(--cj-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  opacity:0;transition:opacity .25s ease,background .25s ease;
}
.cj-gallery__arrow[hidden]{display:none}
.cj-gallery__arrow--prev{left:14px}
.cj-gallery__arrow--next{right:14px}
.cj-gallery__stage:hover .cj-gallery__arrow,
.cj-gallery__arrow:focus-visible{opacity:1}
.cj-gallery__arrow:hover{background:var(--cj-cream)}
@media (hover:none){.cj-gallery__arrow{opacity:1;width:40px;height:40px}}
.cj-gallery__count{
  position:absolute;left:16px;bottom:14px;z-index:2;font-size:12px;letter-spacing:.14em;
  color:var(--cj-muted);background:rgba(251,248,244,.9);padding:4px 10px;pointer-events:none;
}
.cj-gallery__count[hidden]{display:none}

.cj-gallery__thumbs{
  display:flex;gap:10px;margin-top:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:4px;
}
.cj-gallery__thumbs[hidden]{display:none}
.cj-gallery__thumb{
  /* Fixed padding: a percentage would resolve against the whole strip's width. */
  flex:0 0 auto;width:clamp(72px,7vw,96px);aspect-ratio:1/1;padding:7px;margin:0;
  background:var(--cj-panel);border:1px solid transparent;cursor:pointer;
  scroll-snap-align:start;opacity:.6;transition:opacity .25s ease,border-color .25s ease;
}
.woocommerce div.product div.images .cj-gallery__thumb img,
.cj-gallery__thumb img{
  width:100%;height:100%;max-height:none;object-fit:contain;display:block;margin:0;mix-blend-mode:multiply;
}
.cj-gallery__thumb.is-photo{padding:0}
.woocommerce div.product div.images .cj-gallery__thumb.is-photo img{object-fit:cover;mix-blend-mode:normal}
.cj-gallery__thumb:hover{opacity:1}
.cj-gallery__thumb.is-active{opacity:1;border-color:var(--cj-ink)}

/* ---------- lightbox ---------- */
.cj-lightbox{
  position:fixed;inset:0;z-index:9999;background:rgba(246,241,235,.985);
  display:flex;align-items:center;justify-content:center;padding:56px 76px;
}
.cj-lightbox[hidden]{display:none}
html.cj-lightbox-open,html.cj-lightbox-open body{overflow:hidden}
.cj-lightbox__figure{margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.cj-lightbox__figure img{max-width:100%;max-height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.cj-lightbox__figure img.is-photo{mix-blend-mode:normal}
.cj-lightbox__close,.cj-lightbox__arrow{
  position:absolute;border:0;background:none;color:var(--cj-ink);cursor:pointer;padding:12px;
}
.cj-lightbox__close{top:12px;right:14px}
.cj-lightbox__arrow{top:50%;transform:translateY(-50%)}
.cj-lightbox__arrow[hidden]{display:none}
.cj-lightbox__arrow--prev{left:12px}
.cj-lightbox__arrow--next{right:12px}
.cj-lightbox__count{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.16em;color:var(--cj-muted);
}

/* ---------- variation swatches ---------- */
/* Each option stacks: label (with the chosen finish beside it), then the dots. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{display:block;width:auto;text-align:left}
.woocommerce div.product form.cart .variations{width:100%;margin:0 0 4px;border:0;border-spacing:0}
.woocommerce div.product form.cart .single_variation_wrap{width:100%}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.woocommerce div.product form.cart .variations tr{padding:0 0 20px}
.woocommerce div.product form.cart .variations th.label{padding:0 0 12px;line-height:1.4}
.woocommerce div.product form.cart .variations td.value{padding:0}
.cj-vlabel{
  font-size:14px;letter-spacing:.02em;text-transform:none;color:var(--cj-ink);margin-left:10px;
}
.woocommerce div.product form.cart .reset_variations{display:none!important}

.cj-vswatches{display:flex;flex-direction:column;gap:9px}
.cj-vswatches__value{font-size:14px;color:var(--cj-muted);min-height:1.2em}
.cj-vswatches.has-label .cj-vswatches__value{display:none}
.cj-vswatches__row{display:flex;gap:14px;flex-wrap:wrap;padding:4px}
.cj-vswatch{
  position:relative;width:36px;height:36px;border-radius:50%;padding:0;cursor:pointer;margin:0;
  border:1px solid rgba(43,35,32,.22);outline:none;
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.cj-vswatch:hover{transform:scale(1.08)}
.cj-vswatch:focus-visible{box-shadow:0 0 0 3px var(--cj-cream),0 0 0 4px var(--cj-blue)}
.cj-vswatch.is-active{box-shadow:0 0 0 3px var(--cj-cream),0 0 0 4px var(--cj-ink)}
/* Made in this finish, but only with a different choice on the other option. */
.cj-vswatch.is-alt{opacity:.45}
.cj-vswatch.is-alt:hover{opacity:1}
/* The select stays for Woo's script and for no-JS visitors. */
.cj-vswatches__select{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.no-js .cj-vswatches__select{position:static;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible}
.no-js .cj-vswatches__row{display:none}
/* Every finish of a piece costs the same, so the per-variation price block
   would only repeat the price shown under the title. */
.woocommerce div.product .woocommerce-variation-price{display:none}

/* ---------- specs ---------- */
.cj-specs-list{
  display:flex;flex-wrap:wrap;gap:12px 48px;
  margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--cj-rule-soft);max-width:52ch;
}
.cj-specs-list div{display:flex;flex-direction:column;gap:5px}
.cj-specs-list dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cj-soft)}
.cj-specs-list dd{margin:0;font-size:15px;color:var(--cj-ink)}

@media (max-width:1100px){
  .cj-gallery__stage{max-height:none}
}
@media (max-width:640px){
  .woocommerce div.product div.images.cj-gallery{margin:0 calc(var(--cj-gutter) * -1)!important}
  .cj-gallery__thumbs{padding:0 var(--cj-gutter) 4px}
  .cj-gallery__thumb{width:68px}
  .cj-lightbox{padding:56px 8px}
  .cj-lightbox__arrow{display:none}
  .cj-specs-list{gap:12px 32px}
}