/* ============================================================
   CHALK — WooCommerce product page styling
   Layered on top of assets/css/style.css. Targets WooCommerce's
   markup (gallery, price, add-to-cart, attributes, related) and
   dresses it in the CHALK documentation-minimal language.
   ========================================================== */

.wc-page { max-width: 100%; }

/* ---- product hero: gallery | summary split (like .feature) ---- */
.product-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 86vh;
  border-bottom: .5px solid var(--line);
}
.product-hero__gallery {
  position: relative;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px, 5vw, 80px);
  border-right: .5px solid var(--line);
  overflow: hidden;
}
.product-hero__summary {
  display: flex; flex-direction: column; justify-content: center;
  gap: 22px;
  padding: clamp(48px, 7vw, 110px) var(--gut);
}
.crumb {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px; transition: color .2s, gap .2s;
}
.crumb:hover { color: var(--ink); gap: 12px; }
.product-hero__title { font-size: clamp(34px, 5vw, 64px); line-height: .98; letter-spacing: -.02em; }
.product-hero__price,
.product-hero__price .price,
.product-hero__price .amount { font-family: var(--mono); font-size: clamp(20px, 2.2vw, 26px); color: var(--ink); }
.product-hero__price del { color: var(--faint); margin-right: 10px; }
.product-hero__price ins { text-decoration: none; }
.product-hero__excerpt { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 46ch; }
.product-hero__excerpt p { margin: 0 0 .6em; }
.product-hero__meta { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.product-hero__explore { margin-top: 4px; }

/* ---- WooCommerce product gallery ---- */
.woocommerce-product-gallery { width: 100%; max-width: 560px; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image { position: relative; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }
.woocommerce-product-gallery .flex-control-thumbs {
  list-style: none; display: flex; gap: 10px; padding: 14px 0 0; margin: 0; flex-wrap: wrap;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 64px; }
.woocommerce-product-gallery .flex-control-thumbs img { width: 100%; cursor: pointer; opacity: .55; transition: opacity .2s; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

/* ---- add to cart (style WooCommerce's form like the CHALK .btn) ---- */
.product-hero__cart { display: flex; flex-direction: column; gap: 16px; }
.product-hero__cart form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.product-hero__cart .quantity { display: inline-flex; }
.product-hero__cart .quantity input.qty {
  width: 64px; font-family: var(--mono); font-size: 14px; text-align: center;
  background: none; border: .5px solid var(--line-2); color: var(--ink); padding: 13px 8px; outline: none;
}
.product-hero__cart .single_add_to_cart_button,
.product-hero__cart button.button {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 14px 28px; border: .5px solid var(--ink);
  transition: background .2s, color .2s;
}
.product-hero__cart .single_add_to_cart_button:hover,
.product-hero__cart button.button:hover { background: transparent; color: var(--ink); }
.product-hero__cart .variations_form .variations { width: 100%; border: none; margin: 0 0 6px; }
.product-hero__cart .variations td, .product-hero__cart .variations th { padding: 6px 0; }
.product-hero__cart .stock { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.woocommerce-variation-price { font-family: var(--mono); }

/* ---- specifications (WooCommerce attributes table) on the dark band ---- */
.product-specs .woocommerce-product-attributes {
  width: 100%; border-collapse: collapse; font-family: var(--mono);
  border-top: .5px solid rgba(240,239,233,.3);
}
.product-specs .woocommerce-product-attributes-item {
  display: grid; grid-template-columns: 1fr 2fr; gap: 18px;
  padding: 16px 4px; border-bottom: .5px solid rgba(240,239,233,.14); font-size: 13px;
}
.product-specs .woocommerce-product-attributes-item th {
  text-align: left; font-weight: 400; text-transform: uppercase; letter-spacing: .08em;
  font-size: 10px; color: rgba(240,239,233,.45); padding-top: 3px;
}
.product-specs .woocommerce-product-attributes-item td { margin: 0; color: #F0EFE9; }
.product-specs .woocommerce-product-attributes-item td p { margin: 0; }

/* ---- long description ---- */
.product-detail__body { max-width: 62ch; }
.product-detail__body p { color: var(--muted); font-size: clamp(15px,1.5vw,18px); line-height: 1.55; margin: 0 0 1em; }
.product-detail__body h2, .product-detail__body h3 { margin: 1.4em 0 .5em; }

/* ---- related products grid (reuse the catalogue card look) ---- */
.related.products { padding: clamp(64px,9vw,128px) var(--gut); max-width: var(--maxw); margin: 0 auto; }
.related.products > h2 { font-size: clamp(22px,3vw,32px); margin-bottom: 28px; }
.related.products ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: .5px solid var(--line); border-left: .5px solid var(--line);
}
.related.products ul.products li.product {
  border-right: .5px solid var(--line); border-bottom: .5px solid var(--line);
  display: flex; flex-direction: column; transition: background .25s; margin: 0;
}
.related.products ul.products li.product:hover { background: var(--surface); }
.related.products li.product a { color: inherit; display: flex; flex-direction: column; height: 100%; }
.related.products li.product img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .45s ease; }
.related.products li.product:hover img { transform: scale(1.04); }
.related.products li.product .woocommerce-loop-product__title { font-size: 17px; padding: 18px 18px 4px; }
.related.products li.product .price { font-family: var(--mono); font-size: 13px; color: var(--muted); padding: 0 18px 22px; }
.related.products li.product .button,
.related.products li.product .added_to_cart { display: none; } /* keep the loop clean; click into the product */

/* ---- WooCommerce notices ---- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  font-family: var(--mono); font-size: 12px; letter-spacing: .03em;
  border: .5px solid var(--line-2); padding: 12px 16px; list-style: none; margin: 0 0 6px;
}
.woocommerce-message { border-color: var(--signal); color: var(--ink); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .product-hero { grid-template-columns: 1fr; min-height: 0; }
  .product-hero__gallery { border-right: none; border-bottom: .5px solid var(--line); min-height: 60vh; }
  .related.products ul.products { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .related.products ul.products { grid-template-columns: 1fr; }
}