/* ==========================================================================
   Single Product Page — GamersXchange Rewards Store
   Modern, minimalist product page: no boxed containers around the gallery
   or summary, a ~42/58 image/info split, subtle separators instead of
   heavy borders, and shadows used sparingly (cards only, not every element).
   Uses design tokens defined in gx-layout.css (colors, radius, shadow, spacing)
   ========================================================================== */

   /* ── Content area ─────────────────────────────────────────────────────────
   #content.site-content's sitewide padding: 30px 30px (gx-layout.css) is
   overridden here rather than edited at the source, so every other page
   that relies on that top/bottom breathing room is unaffected — scoped to
   WooCommerce's own body.single-product class. */
body.single-product #content.site-content,
body.single-product .site-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.woocommerce-breadcrumb {
    font-size: 13px !important;
    color: var(--gx-text-muted) !important;
    margin: 0 0 var(--gx-space-6) !important;
    padding: 0 !important;
}

.woocommerce-breadcrumb a {
    color: var(--gx-primary) !important;
    text-decoration: none !important;
    transition: var(--gx-transition) !important;
}

.woocommerce-breadcrumb a:hover {
    color: var(--gx-primary-hover) !important;
    text-decoration: underline !important;
}

/* ── Product row (gallery + summary) ─────────────────────────────────────
   No card/border/shadow around this row — the image and info sit directly
   on the page, side by side, top-aligned. The gallery column is capped at
   560px (matching .woocommerce-product-gallery's own max-width below) rather
   than a percentage — on wide pages a 42% column left a dead gap between
   the (width-capped) image and the summary, since the column reserved far
   more space than the gallery ever actually used. minmax(0, 560px) still
   shrinks fluidly on narrower screens before the 900px breakpoint stacks
   it entirely. */
.woocommerce div.product {
    display: grid !important;
    grid-template-columns: minmax(0, 560px) 1fr !important;
    align-items: start !important;
    gap: var(--gx-space-6) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 var(--gx-space-6) !important;
    position: relative !important;
}

/* .woocommerce-tabs and .related.products are DOM siblings of the gallery
   and summary inside this same div.product (content-single-product.php),
   so without this they'd auto-place into the grid's 2 columns instead of
   stacking full-width below the image/info row like a normal theme layout. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related.products,
.woocommerce div.product > .upsells.products {
    grid-column: 1 / -1 !important;
}

/* .onsale is a sibling of .woocommerce-product-gallery (both direct children
   of div.product, output back-to-back by woocommerce_before_single_product_summary),
   not a descendant of it — so it can't be nested inside the gallery without
   a template override. Instead, overlay it onto the SAME grid cell as the
   gallery and pin it to that cell's top-right corner; no position:absolute
   needed (which would anchor to div.product, i.e. wherever the widest
   ancestor happens to be, not the image). */
.woocommerce div.product > .onsale {
    /* Anything other than position:absolute/fixed here — even `static` with
       explicit grid-column/grid-row — makes this a normal in-flow grid item
       that fully participates in auto-placement. Since .onsale comes BEFORE
       the gallery in the DOM (woocommerce_before_single_product_summary
       outputs the sale flash at priority 10, images at 20), an in-flow
       placement at column 1 gets treated as "occupied" and pushes the
       gallery to column 2 and the summary to row 2 — cascading the entire
       layout apart. position:absolute removes it from grid flow entirely
       (per spec, absolutely-positioned grid items don't participate in
       auto-placement or affect sibling placement at all), so it's the only
       safe way to overlay it on the gallery corner. */
    position: absolute !important;
    top: var(--gx-space-3) !important;
    left: var(--gx-space-3) !important;
    z-index: 2 !important;
    margin: 0 !important;
    background: var(--gx-primary) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 5px 12px !important;
    border-radius: var(--gx-radius-full) !important;
    box-shadow: var(--gx-card-shadow) !important;
}

/* The parent theme gives .images and .summary each their own independent
   border with only the OUTER corners rounded (border-right-width:0 on the
   image half, border-left-width:0 on the summary half) — designed to sit
   flush with no gap so together they read as one seamless pill. Our grid
   gap separates them, so those halves must be fully de-boxed here or they
   render as two disconnected bordered panels instead of one clean row. */
.woocommerce div.product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 560px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Main image on top, thumbnail strip below.
   IMPORTANT — two separate sliders are involved here, and both must be left
   in full control of their own slide/track elements:
   1. WooCommerce's own single-product.js initializes jQuery FlexSlider on
      .woocommerce-product-gallery itself for the MAIN image, wrapping
      .woocommerce-product-gallery__wrapper in a new .flex-viewport div.
   2. The BuddyBoss PARENT theme's own bb-woocommerce.js
      (wcProductSlider/wcProductGallery) then takes the resulting
      ol.flex-control-thumbs (FlexSlider's thumbnail nav) and re-initializes
      THAT as a separate Slick carousel (slidesToShow: 3, with
      .bb-slide-prev/.bb-slide-next arrows — this is where those come from,
      not WooCommerce's directionNav, which the site's flexslider config
      leaves disabled). Slick positions its .slick-slide items via its own
      float/inline-width logic; an earlier version of this rule forced
      `float: none !important` and a fixed `width` on the thumbnail <li>
      elements to build a manual flexbox row, which fought Slick's own
      horizontal layout and made the thumbnails render stacked vertically
      instead. The parent theme already ships complete, working CSS for this
      exact Slick pattern (search woocommerce.css/theme.css for
      `.flex-control-thumbs .slick-arrow` and the base `.slick-arrow` rule)
      — so below we only reorder the CONTAINERS (order, safe: it only
      affects how flex siblings of .woocommerce-product-gallery are
      arranged, not either slider's internal children) and lightly recolor
      the arrows/thumbnail images to match the site's design tokens, without
      touching any float/width/position property either slider manages
      itself. */
.woocommerce-product-gallery {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--gx-space-3) !important;
    position: relative !important;
}

.woocommerce-product-gallery .flex-viewport {
    order: 1 !important;
    width: 100% !important;
    /* Fixed height so the image area is consistent regardless of the current
       slide's native aspect ratio — overrides the height FlexSlider's own JS
       sets inline after each image loads (author !important beats a plain
       inline style). object-fit below centers/scales the image inside it. */
    height: 540px !important;
    overflow: hidden !important;
    border-radius: var(--gx-radius-lg);
}

.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image > a {
    display: block !important;
    height: 100% !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs {
    order: 2 !important;
}

/* Recolor the parent theme's existing arrow buttons to match the site's
   design tokens — position/size/float are already handled by
   woocommerce.css's `.slick-arrow` + `.flex-control-thumbs .slick-arrow`
   rules, so only touch color-related properties here. */
.woocommerce-product-gallery .flex-control-thumbs .slick-arrow {
    background: var(--gx-card-bg) !important;
    box-shadow: var(--gx-card-shadow) !important;
}

.woocommerce-product-gallery .flex-control-thumbs .slick-arrow i {
    color: var(--gx-text-primary) !important;
}

.woocommerce-product-gallery .flex-control-thumbs .slick-arrow:hover {
    background: var(--gx-primary) !important;
}

.woocommerce-product-gallery .flex-control-thumbs .slick-arrow:hover i {
    color: #fff !important;
}

.woocommerce div.product div.summary.entry-summary {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: var(--gx-space-2) 0 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* ── Gallery — clean, unboxed, white background ──────────────────────────
   IMPORTANT: when a product has more than one image, WooCommerce's own
   single-product.js initializes jQuery FlexSlider on
   .woocommerce-product-gallery__wrapper, turning each .woocommerce-product-
   gallery__image div into a slide (one visible at a time, swipeable, with a
   thumbnail strip appended after it) and PhotoSwipe for the zoom lightbox.
   Both manage this wrapper's and each slide's layout/sizing via inline
   styles at runtime. Forcing display:flex/aspect-ratio here would fight
   that JS and break slide switching, so we only size the <img> itself
   (safe — doesn't affect how FlexSlider positions the slide wrappers) and
   cap overall width via .woocommerce-product-gallery above, which WC's own
   CSS leaves alone (position:relative only). */
.woocommerce-product-gallery__wrapper {
    margin: 0 auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.woocommerce-product-gallery__wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Zoom trigger's magnifying-glass icon is drawn with plain ::before/::after
   circles+handle by WooCommerce's own CSS — only touch the button chrome
   around it so the icon itself keeps working. */
.woocommerce-product-gallery__trigger {
    border: 1px solid var(--gx-card-border) !important;
    box-shadow: var(--gx-card-shadow) !important;
}

/* Thumbnail images — Slick (see note above) owns each .slick-slide/<li>'s
   own width/float/position, so only the <img> content inside is styled
   here; nothing that would fight Slick's own horizontal layout math. */
.woocommerce-product-gallery ol.flex-control-thumbs li img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    border-radius: var(--gx-radius-md) !important;
    border: 1px solid var(--gx-card-border) !important;
    background: var(--gx-content-bg) !important;
    cursor: pointer !important;
    transition: var(--gx-transition) !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs li img:hover {
    border-color: var(--gx-primary) !important;
    opacity: 1 !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
    border-color: var(--gx-primary) !important;
    box-shadow: 0 0 0 2px var(--gx-primary-light) !important;
    opacity: 1 !important;
}

/* ── Title / price / add-to-cart ─────────────────────────────────────── */
.woocommerce div.product .summary h1.product_title {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
    color: var(--gx-text-primary) !important;
    line-height: 1.2 !important;
    margin: 0 0 var(--gx-space-3) !important;
}

.woocommerce div.product .summary p.price {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 var(--gx-space-5) !important;
}

.woocommerce div.product .summary p.price .gamipress-points {
    font-size: 24px !important;
}

.woocommerce div.product .summary .woocommerce-product-details__short-description {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--gx-text-secondary) !important;
    margin: 0 0 var(--gx-space-5) !important;
}

.woocommerce div.product .summary .cart {
    margin: 0 0 var(--gx-space-6) !important;
}

.woocommerce div.product .summary .single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 36px !important;
    background: var(--gx-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--gx-radius-full) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(57, 39, 143, 0.28) !important;
    transition: var(--gx-transition) !important;
}

.woocommerce div.product .summary .single_add_to_cart_button:hover {
    background: var(--gx-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(57, 39, 143, 0.34) !important;
}

/* Stock status — reuse the same status tokens as everywhere else on the site. */
.woocommerce div.product .summary .stock {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.woocommerce div.product .summary .stock.in-stock {
    color: var(--gx-status-approved-text) !important;
}

.woocommerce div.product .summary .stock.out-of-stock {
    color: var(--gx-status-rejected-text) !important;
}

.woocommerce div.product .summary .stock.available-on-backorder {
    color: var(--gx-status-pending-text) !important;
}

/* ── SPECS (product meta: Category / Availability / Brand / SKU) ────────
   Category/Availability/SKU rows come from the parent theme's
   woocommerce/single-product/meta.php override (.pr-atts-row/.pr-atts-title).
   The Brand row comes from WooCommerce core's own Brands feature
   (WC_Brands::show_brand()) via a different, unlabeled markup — normalized
   to the same .pr-atts-row/.pr-atts-title shape by a filter in functions.php
   (gx_format_product_brand_meta_row()) rather than duplicating meta.php.
   No card/box here — just a heading and rows with subtle 1px dividers. ── */
.woocommerce div.product .summary h4.pr-sub-heading {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: var(--gx-text-muted) !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin: 0 0 var(--gx-space-3) !important;
}

.woocommerce div.product .summary .product_meta {
    font-size: 13px !important;
    margin: 0 !important;
    border-top: 1px solid var(--gx-card-border) !important;
}

.woocommerce div.product .summary .product_meta > span {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--gx-card-border) !important;
    color: var(--gx-text-secondary) !important;
    font-size: 13px !important;
}

.woocommerce div.product .summary .product_meta .pr-atts-title {
    width: 120px !important;
    flex-shrink: 0 !important;
    color: var(--gx-text-muted) !important;
    font-weight: 600 !important;
}

.woocommerce div.product .summary .product_meta a {
    color: var(--gx-primary) !important;
    text-decoration: none !important;
}

.woocommerce div.product .summary .product_meta a:hover {
    text-decoration: underline !important;
}

/* ── Tabs (Description / Reviews) ────────────────────────────────────── */
.woocommerce-tabs.wc-tabs-wrapper {
    margin: 0 0 var(--gx-space-6) !important;
}

.woocommerce-tabs ul.tabs.wc-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--gx-space-2) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--gx-space-5) !important;
    border-bottom: 1px solid var(--gx-card-border) !important;
    background: none !important;
}

.woocommerce-tabs ul.tabs.wc-tabs li {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
}

.woocommerce-tabs ul.tabs.wc-tabs li a {
    display: block !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gx-text-muted) !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    text-decoration: none !important;
    transition: var(--gx-transition) !important;
}

.woocommerce-tabs ul.tabs.wc-tabs li a:hover {
    color: var(--gx-text-primary) !important;
}

.woocommerce-tabs ul.tabs.wc-tabs li.active {
    background: none !important;
}

.woocommerce-tabs ul.tabs.wc-tabs li.active a {
    color: var(--gx-primary) !important;
    border-bottom-color: var(--gx-primary) !important;
    font-weight: 600 !important;
}

.woocommerce-tabs ul.tabs.wc-tabs li#tab-title-reviews a span {
    background: var(--gx-text-faint) !important;
    color: #fff !important;
    padding: 2px 7px !important;
    border-radius: var(--gx-radius-full) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-left: 4px !important;
}

.woocommerce-tabs ul.tabs.wc-tabs li#tab-title-reviews.active a span {
    background: var(--gx-primary) !important;
}

/* Tab panel — no card/box, just clean text on the page background. */
.woocommerce-tabs .woocommerce-Tabs-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--gx-text-secondary) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--gx-text-primary) !important;
    margin: 0 0 var(--gx-space-4) !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel ul,
.woocommerce-tabs .woocommerce-Tabs-panel ol {
    margin: 0 !important;
    padding-left: 1.25em !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel li {
    margin: 0 0 var(--gx-space-2) !important;
}

/* ── Reviews tab: review list ─────────────────────────────────────────── */
.woocommerce-Reviews-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--gx-text-primary) !important;
    margin: 0 0 var(--gx-space-5) !important;
}

.woocommerce-Reviews-title span {
    color: var(--gx-text-primary) !important;
}

.woocommerce-noreviews,
.woocommerce-verification-required {
    font-size: 14px !important;
    color: var(--gx-text-muted) !important;
    margin: 0 !important;
}

.woocommerce-Reviews ol.commentlist {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-Reviews ol.commentlist li.comment {
    list-style: none !important;
    margin: 0 !important;
    padding: var(--gx-space-5) 0 !important;
    border-bottom: 1px solid var(--gx-card-border) !important;
}

.woocommerce-Reviews ol.commentlist > li.comment:first-child {
    padding-top: 0 !important;
}

.woocommerce-Reviews ol.commentlist li.comment:last-child {
    border-bottom: none !important;
}

.woocommerce-Reviews .comment_container {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--gx-space-4) !important;
}

.woocommerce-Reviews img.avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--gx-radius-full) !important;
    flex-shrink: 0 !important;
}

.woocommerce-Reviews .comment-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-Reviews .star-rating {
    margin: 0 0 6px !important;
}

.woocommerce-Reviews .star-rating span {
    color: var(--gx-warning) !important;
}

.woocommerce-Reviews .meta {
    font-size: 13px !important;
    color: var(--gx-text-muted) !important;
    margin: 0 0 6px !important;
}

.woocommerce-Reviews .woocommerce-review__author {
    color: var(--gx-text-primary) !important;
    font-weight: 600 !important;
}

.woocommerce-Reviews .woocommerce-review__verified {
    color: var(--gx-status-approved-text) !important;
    font-style: normal !important;
    font-size: 12px !important;
}

.woocommerce-Reviews .description p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--gx-text-secondary) !important;
}

.woocommerce-pagination {
    margin: var(--gx-space-5) 0 0 !important;
}

/* ── Reviews tab: leave-a-review form ────────────────────────────────── */
#review_form_wrapper {
    margin-top: var(--gx-space-6) !important;
    padding-top: var(--gx-space-6) !important;
    border-top: 1px solid var(--gx-card-border) !important;
}

.woocommerce-Reviews ol.commentlist ~ #review_form_wrapper {
    margin-top: var(--gx-space-6) !important;
}

#review_form_wrapper .comment-reply-title {
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--gx-text-primary) !important;
    margin: 0 0 var(--gx-space-4) !important;
    text-transform: none !important;
}

#review_form_wrapper .comment-form-rating,
#review_form_wrapper .comment-form-comment,
#review_form_wrapper .comment-notes {
    margin: 0 0 var(--gx-space-4) !important;
}

#review_form_wrapper label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--gx-text-secondary) !important;
    margin-bottom: 6px !important;
}

#review_form_wrapper .required {
    color: var(--gx-danger) !important;
}

#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"],
#review_form_wrapper select,
#review_form_wrapper textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-radius-md) !important;
    font-size: 14px !important;
    color: var(--gx-text-primary) !important;
    background: var(--gx-card-bg) !important;
    box-sizing: border-box !important;
    transition: var(--gx-transition) !important;
}

#review_form_wrapper input[type="text"]:focus,
#review_form_wrapper input[type="email"]:focus,
#review_form_wrapper select:focus,
#review_form_wrapper textarea:focus {
    outline: none !important;
    border-color: var(--gx-primary) !important;
    box-shadow: 0 0 0 3px var(--gx-primary-light) !important;
}

#review_form_wrapper textarea {
    resize: vertical !important;
    min-height: 120px !important;
}

#review_form_wrapper p.form-submit {
    margin: 0 !important;
}

#review_form_wrapper p.form-submit input#submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 32px !important;
    background: var(--gx-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--gx-radius-full) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--gx-transition) !important;
}

#review_form_wrapper p.form-submit input#submit:hover {
    background: var(--gx-primary-hover) !important;
}

/* ── Related products ─────────────────────────────────────────────────
   Modern recommendation grid: no borders, subtle shadow only, rounded
   corners, 5-per-row with the same breakpoints used for the brand/category
   product grid (#tax-products in shop.css) for site-wide consistency. */
.related.products {
    margin: 0 0 var(--gx-space-6) !important;
    padding-top: var(--gx-space-6) !important;
    border-top: 1px solid var(--gx-card-border) !important;
}

.related.products > h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    color: var(--gx-text-primary) !important;
    margin: 0 0 var(--gx-space-5) !important;
}

.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: var(--gx-space-5) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

@media (max-width: 1100px) {
    .related.products ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 991px) {
    .related.products ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 668px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 365px) {
    .related.products ul.products {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* WooCommerce's own float-era clearfix (content:" "; display:table on
   ::before/::after) still generates real boxes since display isn't none —
   inside a grid container those boxes become actual grid items and steal
   the first/last cell, shoving every real li.product over by one slot. */
.related.products ul.products::before,
.related.products ul.products::after {
    content: none !important;
    display: none !important;
}

/* Matches .product-slide in shop.css (the card used on the shop/brand/
   category pages) property-for-property, so related products look like the
   same card everywhere on the site — just applied to WooCommerce's own
   default related-products loop markup (li.product) instead of the custom
   render_product_slide() markup those other pages use. */
.related.products ul.products li.product {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: var(--gx-card-bg) !important;
    border: 1px solid var(--gx-card-border) !important;
    border-radius: var(--gx-card-radius) !important;
    box-shadow: var(--gx-card-shadow) !important;
    padding: var(--gx-space-4) !important;
    text-align: left !important;
    overflow: hidden !important;
    transition: var(--gx-transition-slow) !important;
}

.related.products ul.products li.product:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.related.products ul.products li.product a.woocommerce-LoopProduct-link {
    display: block !important;
    text-decoration: none !important;
}

.related.products ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    border-radius: var(--gx-radius-md) !important;
    background: var(--gx-content-bg) !important;
    margin: 0 0 var(--gx-space-3) !important;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gx-text-primary) !important;
    margin: 0 0 var(--gx-space-2) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    min-height: 38px !important;
}

.related.products ul.products li.product .price {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gx-primary) !important;
    margin: 0 0 var(--gx-space-3) !important;
}

.related.products ul.products li.product a.button.add_to_cart_button {
    display: block !important;
    text-align: center !important;
    padding: 9px 16px !important;
    background: var(--gx-primary) !important;
    color: #fff !important;
    border-radius: var(--gx-radius-full) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: var(--gx-transition) !important;
    line-height: 1.2;
}

.related.products ul.products li.product a.button.add_to_cart_button:hover {
    background: var(--gx-primary-hover) !important;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .woocommerce div.product {
        grid-template-columns: 1fr !important;
    }

    .woocommerce div.product .woocommerce-product-gallery {
        max-width: 480px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 600px) {
    /* Base layout is already image-on-top/thumbnails-below at every width —
       only shrink the fixed image height for smaller screens. */
    .woocommerce-product-gallery .flex-viewport {
        height: 320px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce div.product .summary h1.product_title {
        font-size: 24px !important;
    }

    .woocommerce div.product .summary p.price {
        font-size: 20px !important;
    }

    .woocommerce div.product .summary p.price .gamipress-points {
        font-size: 20px !important;
    }

    .woocommerce div.product .summary .single_add_to_cart_button {
        width: 100% !important;
    }

    .woocommerce-tabs ul.tabs.wc-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .woocommerce-tabs ul.tabs.wc-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .woocommerce-tabs ul.tabs.wc-tabs li {
        flex-shrink: 0 !important;
    }
}