/* ==============================================
   ME3MARGI — WOOCOMMERCE SINGLE PRODUCT
   Matches the Tutor LMS single-course template look:
   banner strip (categories + title) + sticky sidebar card + tab nav.
   Reuses the site's shared --mmg-* tokens defined in style.css.
   ============================================== */

/* ---- Banner ---- */
/* This page template has no boxed container of its own (see the
   .mmg-product-body comment below) — .site-main is already ~viewport-width
   with only 20px side padding, so the banner just needs to fill that,
   no viewport-width/negative-margin breakout needed (that trick also
   doesn't account for scrollbar width and was causing an 8px horizontal
   scroll on desktop). */
.mmg-product-banner {
  background: var(--mmg-soft);
  border-bottom: 1px solid var(--mmg-border);
  padding: 28px 20px;
  margin-bottom: 32px;
}
.mmg-product-banner__inner {
  max-width: 1140px;
  margin: 0 auto;
}
.mmg-product-categories a {
  display: inline-block;
  padding: 4px 12px;
  margin: 0 6px 6px 0;
  border-radius: var(--mmg-pill);
  background: #fff;
  border: 1px solid var(--mmg-border);
  color: var(--mmg-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.mmg-product-categories a:hover {
  background: var(--mmg-dark);
  color: #fff;
  border-color: var(--mmg-dark);
}
.mmg-product-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  color: var(--mmg-dark);
  margin: 8px 0 0;
}

/* ---- Body: gallery + sticky sidebar ---- */
.mmg-product-body {
  display: flex;
  /* nowrap, not wrap: there are always exactly 2 items (gallery + sidebar),
     both fit comfortably above the 900px breakpoint where the layout below
     switches to a stacked column instead -- wrapping was never needed, and
     flex-wrap:wrap turned out to break align-items:stretch's cross-size calc
     in this Chromium build (the sidebar card kept coming up short of the
     gallery image's height by amounts that tracked the gap value, on some
     products but not others -- switching to column-gap-only "fixed" it only
     by coincidence on one product and it came back on the next). nowrap
     removes the bug at the source instead of patching around it. */
  flex-wrap: nowrap;
  gap: 32px;
  align-items: stretch;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
.mmg-product-gallery-col {
  flex: 1 1 420px;
  min-width: 280px;
}
.mmg-product-gallery-col .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
}
.mmg-product-sidebar.summary.entry-summary {
  float: none !important;
  width: auto !important;
  flex: 0 0 360px;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--mmg-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  position: sticky;
  top: 20px;
  /* .mmg-product-body uses align-items:stretch so this card matches the
     gallery image's height exactly (same top + bottom edges); center its
     content vertically instead of leaving it pinned to the top with empty
     space below on tall images. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch !important;
  /* align-self:stretch only takes effect while the item's own height computes
     to auto -- Astra/WooCommerce CSS sets an explicit height on .summary
     elsewhere, which silently blocks the stretch calc without this. */
  height: auto !important;
}

/* ---- Quantity input: unstyled on this page (the cart page has its own
   .woocommerce-cart-scoped rule in style.css, but nothing covers the single-
   product form), so it fell back to a borderless/invisible default that only
   picked up a visible box on :hover/:focus. Same visual language as the cart
   page's quantity pill. ---- */
.mmg-product-sidebar .quantity input.qty {
  box-sizing: border-box;
  width: 76px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  line-height: normal;
  text-align: center;
  border: 1px solid var(--mmg-border);
  border-radius: 8px;
  background: #fff;
  color: var(--mmg-dark);
}
.mmg-product-sidebar .quantity input.qty:focus {
  border-color: var(--mmg-dark);
  box-shadow: 0 0 0 3px rgba(45, 40, 39, .12);
  outline: 0;
}

/* ---- Non-member price badge (.mmg-price-wrap / .mmg-badge--join / .mmg-price /
   .mmg-hint markup comes from the WPCode snippet, not this theme). .mmg-badge's
   base styling in style.css is built for a *header* pill (has a stray
   margin-left meant to space it from other inline header text) and its
   --join variant has no color styling at all, so here it rendered indented
   and washed-out. Re-styled + re-aligned for the sidebar card context only. ---- */
.mmg-product-sidebar .mmg-price-wrap {
  display: block;
  margin: 4px 0 6px;
}
.mmg-product-sidebar .mmg-badge {
  margin-left: 0;
}
.mmg-product-sidebar .mmg-badge--join {
  color: #a66d00;
  background: #fff6e6;
  border-color: #f1dfb3;
  margin-bottom: 8px;
}
.mmg-product-sidebar .mmg-price {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--mmg-dark);
  margin-top: 4px;
}
.mmg-product-sidebar .mmg-hint {
  display: block;
  color: var(--mmg-muted);
  font-size: 13px;
  margin-top: 4px;
}
.mmg-product-sidebar .me3-member-cta {
  color: var(--mmg-muted);
  font-size: 13px;
}
/* The badge/price/hint are now block-level with their own margins, so the
   snippet's <br> separators would just add extra blank space on top --
   suppressed. The core .price paragraph the snippet leaves empty (its own
   .mmg-price-wrap replaces it) is hidden the same way. */
.mmg-product-sidebar .mmg-price-wrap br {
  display: none;
}
.mmg-product-sidebar p.price:empty {
  display: none;
}

/* Same .mmg-badge--join / .mmg-price-wrap fix, scoped for the related/upsells
   product cards instead -- same unstyled badge + stray header margin-left,
   sized down to fit the card instead of the sidebar's larger price. */
.related.products .mmg-price-wrap,
.upsells.products .mmg-price-wrap {
  display: block;
  margin: 6px 0;
}
.related.products .mmg-badge,
.upsells.products .mmg-badge {
  margin-left: 0;
}
.related.products .mmg-badge--join,
.upsells.products .mmg-badge--join {
  color: #a66d00;
  background: #fff6e6;
  border-color: #f1dfb3;
  font-size: 11px;
  margin-bottom: 4px;
}
.related.products .mmg-price,
.upsells.products .mmg-price {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--mmg-dark);
}
.related.products .mmg-hint,
.upsells.products .mmg-hint {
  display: block;
  color: var(--mmg-muted);
  font-size: 12px;
  margin-top: 2px;
}
.related.products .mmg-price-wrap br,
.upsells.products .mmg-price-wrap br {
  display: none;
}

/* ---- Sidebar meta list (SKU / category / stock) ---- */
.mmg-product-meta-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--mmg-border);
}
.mmg-product-meta-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mmg-muted);
  margin-bottom: 8px;
}
.mmg-product-meta-list li:last-child { margin-bottom: 0; }
.mmg-product-meta-list .mmg-meta-icon::before {
  content: "\25CF";
  color: var(--mmg-orange);
  font-size: 8px;
}

/* ---- Tab nav (Product Info / Reviews), pill style like course tabs ---- */
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid var(--mmg-border);
}
.woocommerce-tabs ul.tabs li {
  margin: 0;
}
.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 10px 18px;
  color: var(--mmg-muted);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--mmg-dark);
  border-bottom: 2px solid var(--mmg-orange);
}

/* ---- Content width: this page template has no boxed container of its own
   (full-width/no-sidebar layout), so the tabs and related-products blocks
   below .mmg-product-body would otherwise stretch edge-to-edge. Mirror the
   exact same max-width + padding recipe used on .mmg-product-body so every
   section lines up on the same 1140px column. ---- */
.woocommerce-tabs,
.related.products,
.upsells.products {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.woocommerce-tabs {
  margin-top: 40px;
}
.related.products,
.upsells.products {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--mmg-border);
}
.related.products > h2,
.upsells.products > h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--mmg-dark);
  margin: 0 0 20px;
}

/* Card buttons weren't aligned across a row: Astra's card (li.product) is a
   column flexbox with equal-height rows (via the grid), but its inner
   .astra-shop-summary-wrap is plain block, so a longer/wrapped title pushes
   that card's price+button down independently of its neighbors -- visible
   now that the narrower 1140px column wraps titles more than the old
   near-full-width layout did. Making the wrap a column flexbox too and
   pushing the button down with margin-top:auto pins every card's button to
   the same bottom edge regardless of title length.
   Same markup (.astra-shop-thumbnail-wrap/.astra-shop-summary-wrap) is used
   by the shop/category/tag archive grids too (bare ul.products, no
   .related/.upsells wrapper), so this stylesheet is now also enqueued there
   (see functions.php) and the selectors cover plain ul.products as well. */
ul.products .astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
  /* Grow to fill the card's remaining height (li.product is itself a column
     flexbox with an equal-height row from the grid) -- without this the wrap
     just shrink-wraps its own content, leaving margin-top:auto on the button
     nothing to push into. */
  flex: 1 1 auto;
}
ul.products .astra-shop-summary-wrap > a.button {
  margin-top: auto !important;
}

/* Unify "Add to cart" button color with the Tutor course card CTA (#FFA300,
   hover #2D2926) across the product sidebar and every card grid (related,
   upsells, shop/category/tag archives) -- was Astra's default blue. */
.mmg-product-sidebar .single_add_to_cart_button,
ul.products .astra-shop-summary-wrap > a.button {
  background-color: #ffa300 !important;
  border-color: #ffa300 !important;
  color: #fff !important;
}
.mmg-product-sidebar .single_add_to_cart_button:hover,
ul.products .astra-shop-summary-wrap > a.button:hover {
  background-color: #2d2926 !important;
  border-color: #2d2926 !important;
  color: #fff !important;
}

/* Arabic/RTL tab content: the editor sets text-align:right per paragraph,
   but the block's *direction* stays ltr (site default), which strands
   list bullets on the left and can reorder mixed number/Latin fragments
   inside RTL sentences. unicode-bidi:plaintext makes each block resolve
   its own direction from its own first strong character instead, so this
   self-corrects without touching the post content. No effect on plain
   English tab content (resolves to ltr as before). */
.woocommerce-tabs p,
.woocommerce-tabs li,
.woocommerce-tabs h1,
.woocommerce-tabs h2,
.woocommerce-tabs h3,
.woocommerce-tabs h4 {
  unicode-bidi: plaintext;
}

/* ---- Responsive: stack sidebar under gallery, drop sticky ---- */
/* Mobile order is image -> Product Info tabs -> sidebar buy-box -> related,
   not DOM order (image+sidebar, then tabs, then related). .mmg-product-body
   becomes display:contents so its two children (gallery, sidebar) drop out
   of their own nested flex box and join the banner/tabs/related as direct
   flex items of #product-<id> (class "mmg-product") instead, where `order`
   can interleave them freely. This also means .mmg-product-body's own
   gap/flex-direction stop applying (there's no box left to apply them to) --
   spacing between the reordered sections comes from each section's own
   margin instead (banner already had margin-bottom; sidebar gets one added
   below; tabs/related already had margin-top). */
@media (max-width: 900px) {
  .mmg-product {
    display: flex;
    flex-direction: column;
  }
  .mmg-product-body {
    display: contents;
  }
  .mmg-product-banner {
    order: 1;
  }
  .mmg-product-gallery-col {
    order: 2;
    /* The base rule's flex:1 1 420px sets a 420px flex-basis meant as a
       *width* hint for the desktop row layout. With flex-direction now
       column, the main axis is vertical, so that same 420px gets read as a
       height instead -- forcing a tall box around a much shorter image.
       Reset to auto so it just sizes to its actual content height. */
    flex: 0 1 auto;
  }
  .woocommerce-tabs {
    order: 3;
  }
  .mmg-product-sidebar.summary.entry-summary {
    order: 4;
    position: static;
    flex: 0 1 auto;
    max-width: 100%;
    margin-top: 32px;
  }
  .related.products,
  .upsells.products {
    order: 5;
  }
}