/* =========================================================================
   Bloom shop — single product page.
   ========================================================================= */

.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
}
/* WooCommerce floats the gallery + summary at width:48%, so inside their grid
   tracks they only fill half — leaving a big gap beside/under the image. Let
   them fill their columns instead. The gallery rule needs !important: Woo sizes
   it via `.woocommerce div.product div.images` (0,3,2), which out-specifies a
   plain `.woocommerce-product-gallery` selector. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary.entry-summary,
.single-product div.product .entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0;
}
.single-product div.product .woocommerce-product-gallery { padding-bottom: 0; }
/* Let the image fill the whole gallery column (flexslider/WC can set narrow
   inline widths on the wrapper + slides — beat them so the preview is large). */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  width: 100% !important;
  max-width: none !important;
}
.single-product div.product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto;
}

/* Gallery — gotcha #4: sticky offset is for the TWO-column desktop layout only.
   WooCommerce forces the gallery position:relative, so leaving `top` on the
   single-column mobile layout shoves the image down over the <h1>. Scope sticky
   to desktop; reset to static on mobile. */
@media (min-width: 861px) {
  .single-product div.product .woocommerce-product-gallery {
    position: sticky;
    top: calc(var(--bloom-header-height) + 20px);
  }
}
@media (max-width: 860px) {
  .single-product div.product { grid-template-columns: 1fr; gap: 22px; }
  .single-product div.product .woocommerce-product-gallery { position: static; top: auto; }
}

.single-product .woocommerce-product-gallery__image img {
  border: 2.5px solid var(--bloom-forest);
  border-radius: var(--bloom-radius);
  box-shadow: var(--bloom-shadow);
  background: var(--bloom-paper);
}
/* Zoom trigger: out of the top-right corner (it covered the LEVEL badge baked
   into the preview) and onto a small on-brand cream button, bottom-right.
   !important beats WooCommerce's high-specificity `.woocommerce div.product
   div.images .woocommerce-product-gallery__trigger` (0,4,2) which pins it
   top-right with a plain white circle. */
.single-product div.product .woocommerce-product-gallery__trigger {
  top: auto !important;
  bottom: .8em !important;
  right: .8em !important;
  width: 38px !important;
  height: 38px !important;
  background: var(--bloom-cream) !important;
  border: 2px solid var(--bloom-forest) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 rgba(0, 73, 44, .18);
  text-decoration: none;
}
/* recolour the magnifier glyph (drawn with ::before/::after borders) to forest */
.single-product div.product .woocommerce-product-gallery__trigger::before { border-color: var(--bloom-forest) !important; }
.single-product div.product .woocommerce-product-gallery__trigger::after { background: var(--bloom-forest) !important; }

/* Summary */
.single-product div.product .product_title {
  font-family: var(--bloom-font-marker);
  color: var(--bloom-forest);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  line-height: 1.08;
}
.single-product div.product p.price,
.single-product div.product .price {
  color: var(--bloom-green-d);
  font-family: var(--bloom-font-hand);
  font-weight: 700;
  font-size: 1.9rem;
  margin: .2rem 0 1rem;
}
.single-product .woocommerce-product-details__short-description {
  font-family: var(--bloom-font-body);
  font-size: 1.02rem;
  margin-bottom: 1.4rem;
}

/* Add-to-cart — qty + button on one tidy, vertically-centred row */
.single-product div.product form.cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin: 1.2rem 0 1.6rem;
}
.single-product div.product form.cart .quantity { margin: 0; }
.single-product div.product form.cart .quantity .qty {
  width: 68px;
  height: 100%;
  min-height: 50px;
  text-align: center;
  font-family: var(--bloom-font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bloom-forest);
  background: var(--bloom-cream);
  border: 2.5px solid var(--bloom-forest);
  border-radius: 999px;
  padding: 8px 6px;
  -moz-appearance: textfield;
}
.single-product div.product form.cart .quantity .qty:focus {
  outline: none;
  border-color: var(--bloom-green);
}
.single-product div.product form.cart .button {
  font-size: 1.1rem;
  padding: 13px 32px;
  margin: 0;
}

/* Meta (sku / categories / level / theme) as little hand-drawn chips */
.single-product .product_meta {
  font-family: var(--bloom-font-body);
  font-size: .9rem;
  color: var(--bloom-green-d);
  border-top: 2px dashed var(--bloom-mist);
  padding-top: 1rem;
  margin-top: 1rem;
}
.single-product .product_meta > span { display: block; margin-bottom: .35rem; }
.single-product .product_meta a {
  color: var(--bloom-forest);
  text-decoration: none;
  background: var(--bloom-cream);
  border: 1.5px solid var(--bloom-forest);
  border-radius: 999px;
  padding: 2px 12px;
  display: inline-block;
  margin: 2px 2px 0;
}

/* Tabs — plain text labels with an underline on the active tab (no pill fill).
   WooCommerce draws default tab corners/underline with li ::before/::after and
   ul.tabs::before; switch those off. Colour/underline rules are scoped under
   `.single-product div.product` to out-specify Woo's defaults. */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 2.6rem; }
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 28px;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid var(--bloom-mist);
}
.woocommerce-tabs ul.tabs::before { content: none; border: 0; }
.woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { content: none !important; }
.single-product div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  font-family: var(--bloom-font-marker);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--bloom-green-d);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 10px 2px;
  margin-bottom: -2px;
  text-decoration: none;
  transition: color .12s ease, border-color .12s ease;
}
.single-product div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--bloom-forest); }
.single-product div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--bloom-forest);
  border-bottom-color: var(--bloom-green);
}
.single-product div.product .woocommerce-tabs .panel {
  font-family: var(--bloom-font-body);
  color: var(--bloom-forest);
  background: #fff;
  border: 2px solid var(--bloom-mist);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  margin: 0;
}
.woocommerce-tabs .panel > :first-child { margin-top: 0; }
.woocommerce-tabs .panel > :last-child { margin-bottom: 0; }
.woocommerce-tabs .panel h2 { font-family: var(--bloom-font-marker); color: var(--bloom-forest); }

/* Related products heading */
.related.products > h2, .upsells.products > h2 {
  font-family: var(--bloom-font-marker);
  color: var(--bloom-forest);
  font-size: 1.6rem;
  margin-top: 2.4rem;
}