/* =========================================================================
   Tair Haim — SHOP showcase (22/10/2026)
   Clean visual grid of real products; product pages with external purchase
   buttons, tracklist and a COMING SOON merch display. Loaded after woo.css
   (inc/shop.php). Uses the same tokens, so the pastel preview restyles it too.
   ========================================================================= */

/* ---------- page frame ---------- */
.woocommerce-shop .woo-main .woocommerce-products-header { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.4rem); }
.woocommerce-shop .woo-main .woocommerce-products-header__title.page-title {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* ---------- grid + cards ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { padding: 0 0 1.5rem !important; }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  position: relative;
}
.woocommerce ul.products li.product a img {
  margin: 0 0 1.3rem;
  filter: none;
}
.woocommerce ul.products li.product:hover a img { filter: none; transform: scale(1.015); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.6rem; margin-bottom: .35rem; }

.th-card-sub {
  display: block;
  padding: 0 1.2rem;
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--wc-ivory-dim, #b9b3a6);
}
.th-card-cue {
  display: inline-block;
  margin: 1.1rem 1.2rem 0;
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wc-gold, #c9a84c);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  align-self: flex-start;
  transition: letter-spacing .4s var(--wc-ease);
}
.woocommerce ul.products li.product:hover .th-card-cue { letter-spacing: .36em; }

.th-soon-badge {
  /* Top centre, just inside the image (client request 02/11/2026). Not on
     the edge: the card (li.product) has overflow:hidden, which cut the top
     half of the label (client 03/11/2026). */
  position: absolute;
  top: .9rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
  padding: .5rem .85rem;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  background: var(--wc-black, #05060a);
  color: var(--wc-gold, #c9a84c);
  border: 1px solid var(--wc-gold, #c9a84c);
}

/* ---------- single product ---------- */
.th-back {
  display: inline-block;
  margin: 1.2rem 0 2rem;
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wc-ivory-dim, #b9b3a6) !important;
}
.th-back:hover { color: var(--wc-gold, #c9a84c) !important; }

.woocommerce div.product .summary { padding-top: .4rem; }
.th-single-sub,
.th-soon-tag {
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--wc-gold, #c9a84c);
  margin: 0 0 1.6rem;
}
.th-soon-tag {
  display: inline-block;
  padding: .7rem 1.2rem;
  border: 1px solid var(--wc-gold, #c9a84c);
  font-size: .78rem;
}
.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 2rem; }

.th-buy-row { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0 0 2.6rem; }
.woo-main a.btn.th-buy { color: var(--wc-gold, #c9a84c); z-index: 0; }
.woo-main a.btn.th-buy:hover { color: var(--wc-black, #05060a); }
.woo-main a.btn.th-buy-primary { background: var(--wc-gold, #c9a84c); color: var(--wc-black, #05060a); }
.woo-main a.btn.th-buy-primary::before { background: var(--wc-gold-soft, #d9bd6e); }

.th-tracklist { border-top: 1px solid var(--wc-line, rgba(201, 168, 76, .2)); padding-top: 1.8rem; }
.woo-main .th-tracklist h2.th-tl-title {
  font-size: .66rem;
  font-family: "Archivo", sans-serif;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--wc-gold, #c9a84c);
  margin: 0 0 1.2rem;
}
.th-tl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; }
.th-tl-label {
  display: block;
  font-size: .56rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--wc-ivory-dim, #b9b3a6);
  margin-bottom: .5rem;
}
.th-tracklist ol { list-style: none; margin: 0; padding: 0; }
.th-tracklist li {
  display: flex;
  gap: .8rem;
  padding: .5rem 0;
  font-size: .95rem;
  color: var(--wc-ivory, #efe9dc);
  border-bottom: 1px solid var(--wc-line-soft, rgba(239, 233, 220, .08));
}
.th-tracklist li .num { font-family: "Cormorant Garamond", serif; color: var(--wc-gold, #c9a84c); min-width: 1.6rem; }

/* coming soon: plain image + full grid of the designs */
.th-plain-image img { width: 100%; height: auto; border: 1px solid var(--wc-line, rgba(201, 168, 76, .2)); }
.th-showcase { grid-column: 1 / -1; margin-top: clamp(2rem, 6vh, 4rem); }
.th-showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.th-showcase-item { display: block; overflow: hidden; background: #fff; border: 1px solid var(--wc-line, rgba(201, 168, 76, .2)); }
.th-showcase-item img { width: 100%; height: auto; display: block; transition: transform .8s var(--wc-ease); }
.th-showcase-item:hover img { transform: scale(1.03); }

@media (max-width: 780px) {
  .th-tl-cols { grid-template-columns: 1fr; gap: 1.4rem; }
  .th-showcase-grid { grid-template-columns: 1fr; gap: 1rem; }
  .th-buy-row .btn { flex: 1 1 100%; justify-content: center; }
}