/* Glo Little Luxury — single product page (PDP)
 * v3 — 12 Sep 2026.
 *
 * The PDP was never designed in Framer, so this is built to the system the
 * homepage and archive established rather than traced from a comp: Cream media
 * grounds, White panels, Fraunces for display, Plus Jakarta for everything
 * operational, Teal 600 for actions, Rouge for price and savings.
 */

div#product-0, div[id^="product-"] { background: transparent; }

.glo-pdp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 52px); padding: 20px 0 48px; }
.glo-pdp > * { min-width: 0; }

/* ---------- Gallery ---------- */
.glo-pdp .woocommerce-product-gallery { float: none; width: 100%; max-width: 100%; margin: 0; overflow: hidden; }
.woocommerce-product-gallery__wrapper { margin: 0; padding: 0; list-style: none; }
.glo-pdp .woocommerce-product-gallery .flex-viewport { height: auto !important; }
.glo-pdp .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; height: auto; max-height: min(78vw, 540px); background: var(--glo-cream); border-radius: var(--glo-radius-lg); overflow: hidden; margin-bottom: 14px !important; }
.glo-pdp .woocommerce-product-gallery__image img { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; padding: 24px; }
.woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.woocommerce-product-gallery .flex-control-thumbs li { width: 72px; height: 72px; }
.woocommerce-product-gallery .flex-control-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 6px; border-radius: var(--glo-radius-sm); background: var(--glo-cream); box-shadow: inset 0 0 0 2px transparent; cursor: pointer; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active { box-shadow: inset 0 0 0 2px var(--glo-teal-bright); }

/* ---------- Summary ---------- */
.glo-brand-tag { font-size: 12px; font-weight: 600; color: var(--glo-teal-bright); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; }
.glo-pname { font-family: var(--glo-font-display); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 14px; font-weight: 600; }
.glo-rating-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--glo-ink-soft); margin-bottom: 18px; flex-wrap: wrap; }
.glo-rating-row .star-rating { font-size: 13px; }

.glo-price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.glo-price-now { font-family: var(--glo-font-body); font-size: 32px; font-weight: 700; color: var(--glo-coral); letter-spacing: -.01em; }
.glo-price-old { font-size: 17px; color: var(--glo-stone); text-decoration: line-through; }
/* Rouge on Rouge 50, matching the card's Save badge rather than a solid red chip. */
.glo-price-save { background: var(--glo-rouge-50); color: var(--glo-coral); font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--glo-radius-xs); }
.glo-stock-note { font-size: 13px; color: var(--glo-coral); font-weight: 600; margin-bottom: 22px; }
.glo-stock-ok { font-size: 13px; color: var(--glo-success); font-weight: 600; margin-bottom: 22px; }

/* ---------- Add to cart (WooCommerce's own form, restyled) ---------- */
.glo-pdp .cart.woocommerce-cart-form,
.glo-pdp form.cart { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.glo-pdp form.cart .quantity { display: flex; }
.glo-pdp form.cart .quantity input.qty { width: 72px; min-height: 48px; height: 48px; text-align: center; border: 1px solid var(--glo-border); border-radius: var(--glo-radius-sm); background: var(--glo-surface); font-family: var(--glo-font-body); font-weight: 600; font-size: 15px; color: var(--glo-ink); }
.glo-pdp form.cart button.single_add_to_cart_button { background: var(--glo-teal-bright) !important; color: #fff !important; border: none !important; border-radius: var(--glo-radius-sm) !important; min-height: 48px; padding: 0 36px !important; font-weight: 600 !important; font-size: 15px !important; cursor: pointer; font-family: var(--glo-font-body) !important; box-shadow: none !important; text-shadow: none !important; }
.glo-pdp form.cart button.single_add_to_cart_button:hover { opacity: .92; }
.glo-pdp form.cart .reset_variations { font-size: 12px; color: var(--glo-ink-soft); margin-left: 6px; }
.glo-pdp form.cart table.variations { width: 100%; }
.glo-pdp form.cart table.variations td, .glo-pdp form.cart table.variations th { padding: 6px 0; }
.glo-pdp form.cart select { min-height: 48px; border: 1px solid var(--glo-border); border-radius: var(--glo-radius-sm); background: var(--glo-surface); padding: 0 12px; font-family: var(--glo-font-body); font-size: 14px; }

/* ---------- Reassurance + specs ---------- */
.glo-trust-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--glo-cream); border-radius: var(--glo-radius-md); padding: 18px; margin-bottom: 22px; }
.glo-trust-mini div { text-align: center; font-size: 12px; font-weight: 500; color: var(--glo-ink-soft); }
.glo-trust-mini div svg { width: 20px; height: 20px; color: var(--glo-teal-bright); margin: 0 auto 6px; display: block; }

.glo-spec-box { background: var(--glo-cream); border-radius: var(--glo-radius-md); padding: 22px; margin-bottom: 22px; }
.glo-spec-box h3 { font-family: var(--glo-font-display); font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.glo-spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.glo-spec-list div { font-size: 13px; color: var(--glo-ink-soft); display: flex; gap: 8px; }
.glo-spec-list div b { color: var(--glo-ink); font-weight: 600; min-width: 104px; }

/* ---------- Tabs ---------- */
.glo-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--glo-border); margin-bottom: 22px; flex-wrap: wrap; }
.glo-tabs button { background: none; border: none; min-height: 48px; font-family: var(--glo-font-body); font-size: 14px; font-weight: 600; padding: 0 2px; color: var(--glo-ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.glo-tabs button:hover { color: var(--glo-ink); }
.glo-tabs button.active { color: var(--glo-ink); border-color: var(--glo-teal-bright); }
.glo-tab-panel { display: none; }
.glo-tab-panel.active { display: block; }

.glo-desc { font-size: 15px; color: var(--glo-ink-soft); line-height: 1.75; margin-bottom: 12px; max-width: 68ch; }
/* The product description is the copy a shopper actually reads before
   deciding, so on a phone it takes the 16px floor. */
@media (max-width: 600px) { .glo-desc { font-size: 16px; } }
.glo-desc h4 { font-family: var(--glo-font-display); font-size: 17px; color: var(--glo-ink); margin: 20px 0 8px; font-weight: 600; }
.glo-desc p { margin: 0 0 10px; }

.glo-routine { background: var(--glo-teal-deep); color: #fff; border-radius: var(--glo-radius-md); padding: 26px; }
.glo-routine h3 { font-family: var(--glo-font-display); font-size: 18px; font-weight: 600; margin-bottom: 14px; color: #fff; }
.glo-routine ol { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.glo-routine li { display: flex; gap: 12px; font-size: 14px; color: var(--glo-teal-100); }
.glo-routine li b { background: var(--glo-teal-bright); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }

/* ---------- Reviews ---------- */
.glo-reviews-wrap { background: var(--glo-cream); border-radius: var(--glo-radius-md); padding: 24px; }
.glo-reviews-wrap .comment-text { font-size: 14px; color: var(--glo-ink-soft); }
.glo-reviews-wrap .woocommerce-Reviews-title { font-family: var(--glo-font-display); font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.glo-reviews-wrap .commentlist { list-style: none; margin: 0; padding: 0; }
.glo-reviews-wrap .comment { border-top: 1px solid var(--glo-border); padding: 16px 0; list-style: none; }
.glo-reviews-wrap .comment_container { display: flex; flex-direction: column; }
.glo-reviews-wrap input[type="text"], .glo-reviews-wrap input[type="email"], .glo-reviews-wrap textarea { width: 100%; min-height: 48px; border: 1px solid var(--glo-border); border-radius: var(--glo-radius-sm); background: var(--glo-surface); padding: 12px 14px; font-family: var(--glo-font-body); font-size: 14px; }
.glo-reviews-wrap textarea { min-height: 120px; }
.glo-reviews-wrap .comment-form-rating select { min-height: 48px; border-radius: var(--glo-radius-sm); border: 1px solid var(--glo-border); background: var(--glo-surface); padding: 0 12px; }
.glo-reviews-wrap #submit,
.glo-reviews-wrap button[type="submit"] { background: var(--glo-teal-bright) !important; color: #fff !important; border: none !important; border-radius: var(--glo-radius-sm) !important; min-height: 48px; padding: 0 28px !important; font-weight: 600 !important; font-family: var(--glo-font-body) !important; cursor: pointer; }
.glo-reviews-wrap .star-rating { color: #E0A32E; }
.glo-reviews-wrap p.stars a { color: var(--glo-teal-bright); }

.glo-related { padding: 0 0 48px; }
.glo-related .glo-section-head h2 { font-size: clamp(24px, 3vw, 34px); }

@media (max-width: 900px) {
  .glo-pdp { grid-template-columns: 1fr; }
  .glo-spec-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .glo-pdp { padding-top: 12px; }
  .glo-pdp .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { max-height: 92vw; }
  .glo-pdp .woocommerce-product-gallery__image img { padding: 16px; }
  /* Add to cart must not end up as a 40%-width button next to the qty field. */
  .glo-pdp form.cart button.single_add_to_cart_button { flex: 1 1 100%; }
  .glo-trust-mini { padding: 14px; gap: 8px; }
  .glo-trust-mini div { font-size: 11px; }
}

/* ---------------------------------------------------------------------------
 * This install does NOT use WooCommerce's own gallery. The parent theme ships
 * RT Product Variation Gallery (.rtwpvg-*), so every
 * .woocommerce-product-gallery__* rule above is inert here. Kept as a fallback
 * in case the plugin is ever disabled; the rules that actually apply are below.
 *
 * Left unstyled the plugin renders the image at its intrinsic ~218px inside a
 * ~520px column, so the product sits tiny in a sea of white.
 * ------------------------------------------------------------------------- */
.glo-pdp .rtwpvg-wrapper,
.glo-pdp .rtwpvg-container { width: 100%; max-width: 100%; }
/* The plugin ships .rtwpvg-images { max-width: 46% } — sized for WooCommerce's
   default two-column float layout. Inside our grid column that resolved to
   46% of 473px = 218px, which is why the product looked lost on the page. */
.glo-pdp .rtwpvg-images { max-width: 100% !important; width: 100%; }

.glo-pdp .rtwpvg-slider-wrapper {
  background: var(--glo-cream);
  border-radius: var(--glo-radius-lg) !important;
  overflow: hidden;
}
.glo-pdp .rtwpvg-slider { width: 100%; }
.glo-pdp .rtwpvg-slider img,
.glo-pdp .rtwpvg-single-image-container img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 24px;
}
/* The zoom trigger is a white circle on Cream — give it a real edge. */
.glo-pdp .rtwpvg-trigger { box-shadow: 0 1px 3px rgba(23,24,26,.12); }

.glo-pdp .rtwpvg-thumbnail-wrapper { margin-top: 12px; }
.glo-pdp .rtwpvg-thumbnail-slider img {
  border-radius: var(--glo-radius-sm);
  background: var(--glo-cream);
  padding: 6px;
  object-fit: contain;
  cursor: pointer;
}
.glo-pdp .rtwpvg-thumbnail-slider .swiper-slide-thumb-active img,
.glo-pdp .rtwpvg-thumbnail-slider .rtwpvg-thumbnail-active img {
  box-shadow: inset 0 0 0 2px var(--glo-teal-bright);
}

/* ---------------------------------------------------------------------------
 * "Buy Now" comes from a direct-checkout plugin (.wsb-button) and rendered in
 * its own violet, before Add to cart — so the plugin's button read as the
 * primary action and ours as the alternative.
 *
 * Add to cart stays the filled primary: it is WooCommerce's own control and the
 * one that must always work. Buy Now becomes a clear secondary. Flip the two if
 * the shop wants the express path to lead.
 * ------------------------------------------------------------------------- */
.glo-pdp form.cart button.wsb-button,
.glo-pdp form.cart .wsb-button {
  background: transparent !important;
  color: var(--glo-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--glo-border) !important;
  border: none !important;
  border-radius: var(--glo-radius-sm) !important;
  min-height: 48px;
  padding: 0 28px !important;
  font-family: var(--glo-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  order: 2;
  cursor: pointer;
}
.glo-pdp form.cart button.wsb-button:hover { background: var(--glo-cream) !important; }
/* Keep source order from deciding hierarchy: qty, Add to cart, then Buy Now. */
.glo-pdp form.cart .quantity { order: 0; }
.glo-pdp form.cart button.single_add_to_cart_button { order: 1; }

/* ---------------------------------------------------------------------------
 * Sections benchmarked from shop.shajgoj.com (12 Sep 2026): Available Offers,
 * Ingredients, How to use, FAQ, and the SKU/category meta row.
 *
 * Not copied: their "No #4 Best Seller in Hair Care" rank badges and
 * "Frequently Bought Together" — both need sales data this store does not have.
 * ------------------------------------------------------------------------- */

/* ---------- Offers / delivery ---------- */
.glo-offers { display: grid; gap: 10px; margin-bottom: 22px; }
.glo-offer { display: flex; align-items: flex-start; gap: 12px; background: var(--glo-cream); border-radius: var(--glo-radius-md); padding: 14px 16px; }
.glo-offer svg { width: 20px; height: 20px; color: var(--glo-teal-bright); flex-shrink: 0; margin-top: 2px; }
.glo-offer b { display: block; font-size: 13.5px; font-weight: 600; color: var(--glo-ink); margin-bottom: 2px; }
.glo-offer span { display: block; font-size: 12.5px; color: var(--glo-ink-soft); line-height: 1.5; }
/* Met threshold reads as achieved, not as another thing still to do. */
.glo-offer.is-met { background: var(--glo-teal-50); }
.glo-offer.is-met svg { color: var(--glo-success); }

/* ---------- FAQ ----------
   Native <details>/<summary>: keyboard operable and screen-reader correct with
   no JS, which a div-based accordion never is. */
.glo-faq { display: grid; gap: 8px; margin-bottom: 20px; }
.glo-faq-item { background: var(--glo-cream); border-radius: var(--glo-radius-md); padding: 0 18px; }
.glo-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; font-size: 14.5px; font-weight: 600; color: var(--glo-ink); }
.glo-faq-item summary::-webkit-details-marker { display: none; }
.glo-faq-item summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--glo-ink-soft); line-height: 1; flex-shrink: 0; }
.glo-faq-item[open] summary::after { content: "\2212"; }
.glo-faq-item summary:focus-visible { outline: 2px solid var(--glo-teal-bright); outline-offset: 3px; border-radius: var(--glo-radius-sm); }
.glo-faq-a { font-size: 14px; color: var(--glo-ink-soft); line-height: 1.7; padding: 0 0 16px; max-width: 66ch; }

.glo-faq-ask { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--glo-teal-deep); border-radius: var(--glo-radius-md); padding: 18px 20px; }
.glo-faq-ask b { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.glo-faq-ask span { font-size: 13px; color: var(--glo-teal-100); }
.glo-faq-ask .glo-btn { background: var(--glo-surface); color: var(--glo-ink); }

/* ---------- Empty description ---------- */
.glo-desc--empty { color: var(--glo-stone); font-style: normal; }

/* ---------- SKU / category meta ---------- */
.glo-prod-meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--glo-border); }
.glo-prod-meta div { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.glo-prod-meta span { color: var(--glo-stone); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; }
.glo-prod-meta b { color: var(--glo-ink); font-weight: 500; }
.glo-prod-meta a { color: var(--glo-teal-bright); }
.glo-prod-meta a:hover { text-decoration: underline; }

/* The tab strip gains three more tabs — let it scroll rather than wrap into a
   two-line strip that pushes the panel down the page. */
@media (max-width: 600px) {
  .glo-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  .glo-tabs::-webkit-scrollbar { display: none; }
  .glo-tabs button { flex: 0 0 auto; }
  .glo-faq-ask { align-items: stretch; }
  .glo-faq-ask .glo-btn { width: 100%; }
}

/* ---------- Bundle ("Complete the routine") ---------- */
.glo-bundle-wrap { padding: 0 0 40px; }
.glo-bundle { background: var(--glo-cream); border-radius: var(--glo-radius-lg); padding: clamp(20px, 3vw, 32px); }
.glo-bundle .glo-section-head { margin-bottom: 20px; }
.glo-bundle .glo-section-head h2 { font-size: clamp(22px, 2.6vw, 30px); }
.glo-bundle__row { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.glo-bundle__item { flex: 1 1 180px; min-width: 150px; background: var(--glo-surface); border-radius: var(--glo-radius-md); padding: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.glo-bundle__item.is-current { box-shadow: inset 0 0 0 1.5px var(--glo-teal-bright); }
.glo-bundle__img { display: block; aspect-ratio: 1; background: var(--glo-cream); border-radius: var(--glo-radius-sm); overflow: hidden; }
.glo-bundle__img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.glo-bundle__tag { align-self: flex-start; background: var(--glo-teal-50); color: var(--glo-teal-ink); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--glo-radius-xs); }
.glo-bundle__name { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--glo-ink); }
.glo-bundle__name:hover { color: var(--glo-teal-bright); }
.glo-bundle__price { font-size: 15px; font-weight: 700; color: var(--glo-coral); margin-top: auto; }
.glo-bundle__plus { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--glo-stone); flex: 0 0 auto; width: 20px; }
.glo-bundle__total { flex: 1 1 190px; min-width: 170px; background: var(--glo-surface); border-radius: var(--glo-radius-md); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.glo-bundle__total-label { font-size: 12.5px; color: var(--glo-ink-soft); }
.glo-bundle__total-price { font-family: var(--glo-font-body); font-size: 26px; font-weight: 700; color: var(--glo-ink); margin-bottom: 10px; }

/* ---------- Reviews list ----------
   Benchmarked from the Shajgoj reviews tab: avatar, name and date on one line,
   body beneath, rating right-aligned.

   One deliberate difference: no inner scrollbar. Shajgoj scrolls the list
   inside a fixed-height box, which hides content from in-page search, breaks
   mobile scrolling and keeps review text out of the page for SEO. WooCommerce's
   own pagination does the same job without any of that. */
.glo-reviews-wrap .commentlist { display: flex; flex-direction: column; gap: 0; }
.glo-reviews-wrap .comment { border-top: 1px solid var(--glo-border); padding: 18px 0; }
.glo-reviews-wrap .comment:first-child { border-top: 0; padding-top: 4px; }
.glo-reviews-wrap .comment_container { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; }
.glo-reviews-wrap .comment_container img.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--glo-linen); flex-shrink: 0; margin: 0; position: static; float: none; }
.glo-reviews-wrap .comment-text { flex: 1; min-width: 0; position: relative; padding-right: 104px; margin: 0; border: 0; }
.glo-reviews-wrap .comment-text .star-rating { position: absolute; top: 2px; right: 0; float: none; margin: 0; font-size: 13px; }
.glo-reviews-wrap .comment-text p.meta { font-size: 14px; margin: 0 0 4px; color: var(--glo-ink-soft); }
.glo-reviews-wrap .woocommerce-review__author { font-weight: 600; color: var(--glo-ink); }
.glo-reviews-wrap .woocommerce-review__published-date { color: var(--glo-stone); }
.glo-reviews-wrap .comment-text .description { font-size: 14px; color: var(--glo-ink-soft); line-height: 1.65; }
.glo-reviews-wrap .comment-text .description p { margin: 0 0 6px; }

/* Review pagination, matching the archive's */
.glo-reviews-wrap .woocommerce-pagination ul { display: flex; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; justify-content: center; flex-wrap: wrap; }
.glo-reviews-wrap .woocommerce-pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--glo-radius-sm); background: var(--glo-surface); color: var(--glo-ink); font-size: 13px; font-weight: 500; }
.glo-reviews-wrap .woocommerce-pagination .page-numbers.current { background: var(--glo-teal-deep); color: #fff; font-weight: 600; }

/* Empty state — an invitation, not a blank panel. */
.glo-reviews-wrap .woocommerce-noreviews { background: var(--glo-surface); border-radius: var(--glo-radius-sm); padding: 18px; margin: 0 0 18px; font-size: 14px; color: var(--glo-ink-soft); }

@media (max-width: 600px) {
  /* The rating would collide with the body text in a 104px gutter on a phone. */
  .glo-reviews-wrap .comment-text { padding-right: 0; }
  .glo-reviews-wrap .comment-text .star-rating { position: static; margin: 0 0 6px; }
  .glo-bundle__row { flex-direction: column; }
  .glo-bundle__plus { width: 100%; height: 18px; }
  .glo-bundle__item { flex: 1 1 auto; }
  .glo-bundle__img { max-width: 120px; }
}

/* glo-responsive.css zeroes #primary's horizontal padding at this width, and
   .glo-pdp sits directly in #primary rather than inside .glo-wrap — so without
   this the whole product summary runs flush to both screen edges with no
   gutter, which reads as text being cut off. Matches .glo-wrap's 16px here. */
@media (max-width: 600px) {
  .glo-pdp { padding-left: 16px; padding-right: 16px; }
  .glo-prod-meta { padding-left: 0; padding-right: 0; }
}