/* ============================================================
   Lisensio — single-product page bridging rules (issue #44)
   Maps WooCommerce's default single-product markup (gallery, summary,
   variations form, tabs, related products) onto the design system.
   ============================================================ */

/* ---------- Layout ---------- */
.product-detail{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:start;padding:20px 0 80px}
.product-detail .woocommerce-tabs,
.product-detail .upsells,
.product-detail .related{grid-column:1/-1}

@media(max-width:900px){
  .product-detail{grid-template-columns:1fr;gap:44px}
}

/* ---------- Gallery ---------- */
.product-detail .woocommerce-product-gallery{padding:20px;background:var(--bg-tint);border:1px solid var(--border);border-radius:24px;min-height:380px;display:flex;align-items:center;justify-content:center}
.product-detail .woocommerce-product-gallery__wrapper{margin:0;width:100%}
.product-detail .woocommerce-product-gallery__image img,
.product-detail .woocommerce-product-gallery__image--placeholder img{border-radius:14px;width:100%;height:auto;max-height:340px;object-fit:contain}
.product-detail .flex-control-thumbs{list-style:none;display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.product-detail .flex-control-thumbs li{width:76px;height:60px}
.product-detail .flex-control-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:10px;background:var(--bg-soft);border:1px solid var(--border);cursor:pointer}
.product-detail .flex-control-thumbs img.flex-active{background:var(--bg-tint);border-color:var(--primary)}
.product-detail span.onsale{position:absolute;top:16px;left:16px;background:var(--gradient);color:#fff;font-family:var(--font-head);font-weight:700;font-size:12.5px;padding:6px 14px;border-radius:100px;z-index:1}

/* ---------- Summary ---------- */
.product-detail .summary .product_title{font-size:clamp(28px,3.2vw,38px);margin:14px 0 10px}
.product-detail .summary .woocommerce-product-rating{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13.5px;color:var(--muted)}
.product-detail .summary .star-rating{font-size:14px}
.product-detail .summary .price{font-family:var(--font-head);font-size:34px;font-weight:800;color:var(--ink);margin-bottom:4px;display:block}
.product-detail .summary .price del{opacity:.5;font-size:19px;font-weight:600;margin-right:8px}
.product-detail .summary .price ins{text-decoration:none}
.product-detail .summary .woocommerce-product-details__short-description{color:var(--body);margin:18px 0 26px;font-size:15px;line-height:1.7}

/* ---------- Buy row / assurances ---------- */
/*
 * The buy row is one line of equal-height controls: quantity, Add to cart,
 * Buy now.
 *
 * It used to be none of those things. `form.cart` was a block, so the three
 * sat on a text baseline at three different heights (50, 48 and 58px) with
 * their tops 21px apart, and the 28px top margin was applied to the two
 * buttons but not to the quantity, which dropped Add to cart below the box
 * beside it. Making the row a flex container aligns them horizontally; a
 * shared control height aligns them vertically; and moving the top margin
 * onto the row itself stops the children drifting relative to each other.
 *
 * The row is the form for a simple product and the variation wrapper for a
 * variable one, so both are addressed. `form.cart` is deliberately not
 * targeted wholesale: on a variable product it also wraps the variations
 * table, which must stay stacked above the row rather than beside it.
 */
.product-detail{--buy-control-h:52px}

.product-detail form.cart:not(.variations_form),
.product-detail .woocommerce-variation-add-to-cart{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}

.product-detail .single_add_to_cart_button,
.product-detail .lisensio-buy-now{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--buy-control-h);
  margin:0;
  padding:0 34px;
  font-size:16px;
  line-height:1;
}

.product-detail .lisensio-buy-now.loading{opacity:.65;pointer-events:none}
.product-detail .product-assurances{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--border)}
.product-detail .product-assurances span{font-size:13.5px;color:var(--body);display:flex;align-items:center;gap:8px}

/* ---------- Variations form ---------- */
.product-detail form.cart{margin-bottom:22px}
.product-detail table.variations{width:100%;border:none;margin-bottom:20px}
.product-detail table.variations tr{display:block;margin-bottom:16px}
.product-detail table.variations th.label{display:block;text-align:left;padding:0 0 8px;font-weight:700;font-size:13.5px;font-family:var(--font-head);color:var(--ink)}
.product-detail table.variations td.value{display:block;padding:0}
.product-detail table.variations select{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:12px;font-size:14.5px;font-family:var(--font-body);color:var(--ink);background:#fff}
.product-detail table.variations select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(43,163,119,.12)}
.product-detail a.reset_variations{display:inline-block;margin-top:8px;font-size:13px;font-weight:600}

/* ---------- Variation buttons (JS-built from the real <select>s above) ---------- */
.product-detail .variation{margin:22px 0 0}
.product-detail .variation label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.product-detail .var-options{display:flex;gap:10px;flex-wrap:wrap}
.product-detail .var-options button{padding:11px 18px;border-radius:12px;border:1.5px solid var(--border);background:#fff;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;transition:.2s;font-family:inherit}
.product-detail .var-options button:hover{border-color:var(--primary)}
.product-detail .var-options button.active{border-color:var(--primary);background:var(--bg-tint);color:var(--primary-dark);box-shadow:0 0 0 3px rgba(43,163,119,.15)}

.product-detail .woocommerce-variation-price .price{font-size:24px;margin-bottom:10px}
.product-detail .woocommerce-variation-availability .stock{font-size:13.5px;font-weight:600;color:var(--muted)}
.product-detail .woocommerce-variation-description p{font-size:14.5px;color:var(--body);margin-bottom:10px}

/* Sized from the shared control height so it matches the two buttons beside
   it. The right margin is gone: the row is a flex container with a gap. */
.product-detail .quantity{display:inline-flex;align-items:center;height:var(--buy-control-h);border:1.5px solid var(--border);border-radius:10px;overflow:hidden;margin-right:0}
.product-detail .quantity input.qty{width:56px;height:100%;text-align:center;border:none;font-weight:700;font-size:14.5px;color:var(--ink);font-family:var(--font-head)}

/* ---------- Meta ---------- */
.product-detail .product_meta{margin-top:20px;padding-top:20px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
.product-detail .product_meta > span{display:block;margin-bottom:6px}
.product-detail .product_meta a{color:var(--primary)}

/* ---------- Tabs ---------- */
.woocommerce-tabs{margin-top:10px}
.woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:6px;border-bottom:1.5px solid var(--border);margin-bottom:26px;flex-wrap:wrap}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{display:inline-block;padding:12px 22px;font-weight:700;font-family:var(--font-head);font-size:15px;color:var(--muted)}
.woocommerce-tabs ul.tabs li.active a{color:var(--primary-dark);box-shadow:inset 0 -2.5px 0 var(--primary)}
.woocommerce-tabs .panel{color:var(--body);font-size:15px;line-height:1.75;padding:30px 4px}
.woocommerce-tabs .panel h2{font-size:20px;margin-bottom:14px}
.woocommerce-tabs table.shop_attributes{width:100%;border-collapse:collapse;font-size:14.5px}
.woocommerce-tabs table.shop_attributes th{text-align:left;font-family:var(--font-head);font-weight:700;color:var(--ink);padding:12px 14px;width:220px;border-bottom:1px solid var(--border)}
.woocommerce-tabs table.shop_attributes td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--body)}

/* ---------- Related products ----------
   Matches the design's .related-grid exactly (3 columns, not the shop
   archive's auto-fill grid) — card box/content styling is shared/global,
   see .product-card and .shop-card in assets/css/woocommerce.css. The
   add-to-cart button is omitted entirely in this context (real
   woocommerce/content-product.php check via is_product()), matching the
   design's price-only related-product cards. */
.related.products{margin-top:20px}
.related.products > .eyebrow{display:block;margin-bottom:14px}
.related.products > h2{font-size:24px;margin-bottom:22px}
.related.products ul.products{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

@media(max-width:1100px){
  .related.products ul.products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .related.products ul.products{grid-template-columns:1fr}
}

/* ---------- Reviews ---------- */
.woocommerce-noreviews{color:var(--muted)}
.woocommerce-Reviews-title{font-size:20px;margin-bottom:18px}

/* Rating summary + per-star breakdown bars (woocommerce/single-product-reviews.php) */
.review-summary{display:flex;gap:40px;align-items:center;flex-wrap:wrap;padding-bottom:26px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.rs-score{text-align:center}
.rs-score strong{display:block;font-family:var(--font-head);font-size:34px;color:var(--ink)}
.rs-score .star-rating{margin:6px auto}
.rs-score small{display:block;color:var(--muted);font-size:12.5px}
.rs-bars{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.rs-bar{display:grid;grid-template-columns:28px 1fr 24px;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.rs-track{height:7px;background:var(--bg-tint);border-radius:100px;overflow:hidden}
.rs-track i{display:block;height:100%;background:#f5a623;border-radius:100px}

/* Review list */
ol.commentlist{list-style:none}
.comment_container{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--border)}
.comment_container .avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.comment-text{flex:1}
.comment-text .meta{font-size:13px;color:var(--muted);margin-bottom:8px}
.comment-text .woocommerce-review__author{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:14.5px}
.comment-text .woocommerce-review__verified{color:var(--primary);font-style:normal;font-weight:600;font-size:12.5px}
.comment-text .star-rating{margin-bottom:8px}
.comment-text .description p{font-size:14.5px;color:var(--body);line-height:1.7}

#review_form_wrapper{margin-top:22px;padding:26px;background:var(--bg-soft);border:1.5px solid var(--border);border-radius:16px}
#review_form_wrapper #reply-title{display:block;font-size:18px;margin-bottom:18px}
.comment-form-rating{margin-bottom:18px}
.comment-form-rating label{display:block;font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:10px;font-family:var(--font-head)}
p.stars span[role="group"]{display:inline-flex;gap:4px}
p.stars a{position:relative;display:inline-block;width:24px;height:24px;font-size:0;line-height:1;color:var(--border);text-decoration:none}
p.stars a::before{content:"★";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:22px}
p.stars a.active,
p.stars a:has(~ a.active){color:#f5a623}
p.stars:hover a{color:var(--border)}
p.stars a:hover,
p.stars a:has(~ a:hover){color:#f5a623}