/* ==========================================================================
   Ouidoo Gym — Single product page

   Appearance is set in the Divi and DiviMerch module settings. This file is
   deliberately small: it holds only what those settings cannot express, so
   nothing here silently overrides a change made in the builder.

   The page is a Divi Theme Builder body built from two vendors' modules:

     Divi native   et_pb_wc_breadcrumb / _title / _rating / _price / _meta
     DiviMerch     divimerc_product_gallery / _variation_swatches
                   divimerc_add_to_cart / _product_tabs

   Anything about type, colour, spacing, the gallery, the tabs or the button
   belongs in the module settings, not here.
   ========================================================================== */

:root {
  --ogs-p-black: var(--acc-black, #000000);
  --ogs-p-green: var(--acc-green, #0f6a37);
  --ogs-p-grey: var(--acc-grey, #6b6b6b);
  --ogs-p-grey-light: var(--acc-grey-light, #9a9a9a);
  --ogs-p-red: #b3261e;
  --ogs-p-grey-bg: var(--acc-grey-bg, #f5f5f5);
  --ogs-p-heading: var(--font-heading, "Montserrat", Helvetica, Arial, sans-serif);
  --ogs-p-body: var(--font-body, "Poppins", Helvetica, Arial, sans-serif);
  --ogs-p-line: var(--acc-line, #e7e7e7);
  /* the fallback matters here: filter.css, which declares --acc-star, does
     not load on a product page */
  --ogs-p-star: var(--acc-star, #ffc107);
  --ogs-p-field-h: 52px;
}

/* ==========================================================================
   Brand logo
   A Divi image module tagged .gym_product-brand-logo, whose image the inline
   head script swaps for the current product's brand. The module holds one image chosen in
   the builder, so these states have no equivalent in its settings.
   ========================================================================== */

/* Hidden until the real logo lands, so the builder's placeholder never
   flashes. The swap now runs from the head as the module is parsed, so this
   gate is released almost immediately — the transition is short enough not to
   read as a fade-in, only to take the edge off the switch. */
.gym_product-brand-logo {
  --ogs-brand-logo-h: 20px;
  opacity: 0;
  transition: opacity 0.08s linear;
}

.gym_product-brand-logo.ogs-brand-ready {
  opacity: 1;
}

/* No brand on this product. The head script tags the module so it can be taken
   out of the layout — without this it kept the gate above and sat at opacity 0,
   invisible but still holding its full height and the margins either side, so
   the title below was pushed down by a logo that was never coming. */
.gym_product-brand-logo.ogs-brand-empty {
  display: none;
}

/* An SVG carries no intrinsic width or height — only a viewBox — so there is
   nothing for the image module's size field to scale, and `height: auto`
   resolves to zero. The height therefore has to be stated outright, and the
   width follows the viewBox ratio.

   To resize it, set this custom property rather than the module's size field:

       .gym_product-brand-logo { --ogs-brand-logo-h: 72px; }

   which can go in the module's own Custom CSS box in Divi. */
/* Divi wraps the image in an inline-block, which shrink-wraps its contents.
   Around an SVG there is nothing to shrink-wrap to, so the wrapper collapses.
   Block-level gives the image a box to sit in. */
.gym_product-brand-logo .et_pb_image_wrap {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Forced: WordPress stores width="1" height="1" for some SVG uploads and Divi
   echoes those back, which renders the logo a single pixel. */
.gym_product-brand-logo img {
  width: auto !important;
  max-width: 100% !important;
  height: var(--ogs-brand-logo-h) !important;
  min-height: 0;
  max-height: none !important;
  /* a logo is drawn to its own proportions — never crop one to fit */
  object-fit: contain;
  object-position: left center;
}

/* if the script never runs the module would stay invisible */
.no-js .gym_product-brand-logo {
  opacity: 1;
}

/* ==========================================================================
   Gallery badges
   The same Sale / New / Sold out chips the shop cards use, placed over the
   gallery. Built from the same PHP helper, but the styling has to be repeated
   here: shop.css does not load on a product page.
   ========================================================================== */

.ogs-gallery-badges {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px;
  /* clicks belong to the gallery underneath — zoom, lightbox, arrows */
  pointer-events: none;
}

/* the badges are positioned against this, and DiviMerch leaves it static */
.divimerc-gallery__wrapper {
  position: relative;
}

.ogs-badge {
  display: inline-block;
  padding: 5px 11px;
  font-family: var(--ogs-p-heading);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ogs-p-black);
  border-radius: 0 !important;
}

.ogs-badge.is-sale {
  background: var(--ogs-p-green);
}

.ogs-badge.is-new {
  padding: 5px 10px;
  color: var(--ogs-p-black);
  background: var(--ogs-p-grey-bg);
}

.ogs-badge.is-oos {
  background: var(--ogs-p-grey);
}

@media all and (max-width: 560px) {
  .ogs-gallery-badges {
    gap: 4px;
    padding: 10px;
  }

  .ogs-badge {
    padding: 4px 9px;
    font-size: 10px;
  }

  .ogs-badge.is-new {
    padding: 4px 8px;
  }
}

/* ==========================================================================
   Related products / up-sells
   These render through the plugin's own card template, so the cards, badges,
   variation pills, quick view and add-to-cart button are all styled by
   shop.css, which now loads here too. Only the section wrapper is new.
   ========================================================================== */

.related.products,
.up-sells.products,
.cross-sells.products {
  clear: both;
  margin-top: 56px;
}

.related.products > h2,
.up-sells.products > h2,
.cross-sells.products > h2 {
  margin: 0 0 4px;
  padding: 0 0 16px;
  font-family: var(--ogs-p-heading);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ogs-p-black);
  border-bottom: 1px solid var(--acc-line, #e7e7e7);
}

/* the grid supplies its own top spacing below the heading */
.related.products ul.products,
.up-sells.products ul.products,
.cross-sells.products ul.products {
  margin-top: 22px;
}

@media all and (max-width: 560px) {
  .related.products,
  .up-sells.products,
  .cross-sells.products {
    margin-top: 40px;
  }

  .related.products > h2,
  .up-sells.products > h2,
  .cross-sells.products > h2 {
    font-size: 17px;
  }
}

/* ==========================================================================
   Reviews
   Inside the DiviMerch tab panel. Two star controls appear here — the rating
   on each review, and the picker in the form — and both are drawn by
   WooCommerce with its bundled "star" webfont. Where those stylesheets are not
   loaded the markup falls back to its own text, so a review reads
   "Rated 5 out of 5" and the picker becomes five "N of 5 stars" links.
   Both are redrawn below with ordinary glyphs.
   ========================================================================== */

.divimerc-tabs__panel-content .woocommerce-Reviews {
  font-family: var(--ogs-p-body);
}

.woocommerce-Reviews-title {
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--ogs-p-heading);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ogs-p-black);
}

.woocommerce-Reviews-title span {
  color: var(--ogs-p-grey);
}

/* ---------- the list ---------- */

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

.woocommerce-Reviews ol.commentlist li.review {
  margin: 0;
  padding: 0 0 22px;
  list-style: none;
  border-bottom: 1px solid var(--ogs-p-line);
}

.woocommerce-Reviews ol.commentlist li.review + li.review {
  padding-top: 22px;
}

.woocommerce-Reviews .comment_container {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.woocommerce-Reviews .comment_container img.avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background: var(--ogs-p-grey-bg);
}

.woocommerce-Reviews .comment-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce-Reviews .comment-text p.meta {
  margin: 6px 0 8px;
  font-size: 12px;
  color: var(--ogs-p-grey);
}

.woocommerce-Reviews .woocommerce-review__author {
  font-family: var(--ogs-p-heading);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ogs-p-black);
}

.woocommerce-Reviews .woocommerce-review__dash {
  margin: 0 2px;
  color: var(--ogs-p-grey-light);
}

.woocommerce-Reviews .woocommerce-review__published-date {
  color: var(--ogs-p-grey-light);
}

.woocommerce-Reviews .comment-text .description {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ogs-p-grey);
}

.woocommerce-Reviews .comment-text .description p:last-child {
  margin-bottom: 0;
}

/* ---------- a review\'s star rating ----------
   The sentence lives inside the span; font-size: 0 collapses it while overflow
   clips the gold overlay to the inline width percentage. */

.woocommerce-Reviews .comment-text .star-rating {
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* forced out of Divi's star font and accent colour, both of which outrank a
     plain class on this markup */
  font-family: var(--ogs-p-body) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  white-space: nowrap;
}

.woocommerce-Reviews .comment-text .star-rating::before {
  content: "\2605\2605\2605\2605\2605" !important;
  display: block !important;
  position: static !important;
  float: none !important;
  padding: 0 !important;
  font-family: var(--ogs-p-body) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  color: var(--ogs-p-line) !important;
}

.woocommerce-Reviews .comment-text .star-rating > span {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  float: none !important;
  height: 100% !important;
  margin: 0 !important;
  /* Divi offsets the sentence with padding-top, which would push our glyphs
     out of the clipping box too */
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.woocommerce-Reviews .comment-text .star-rating > span::before {
  content: "\2605\2605\2605\2605\2605" !important;
  display: block !important;
  position: static !important;
  float: none !important;
  padding: 0 !important;
  font-family: var(--ogs-p-body) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  color: var(--ogs-p-star) !important;
}

/* ---------- the form ---------- */

.woocommerce-Reviews #review_form_wrapper {
  padding-top: 4px;
}

.woocommerce-Reviews .comment-reply-title {
  display: block;
  margin: 0 0 18px;
  font-family: var(--ogs-p-heading);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--ogs-p-black);
}

.woocommerce-Reviews .comment-form label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ogs-p-heading);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ogs-p-black);
}

.woocommerce-Reviews .comment-form .required {
  color: var(--ogs-p-red);
}

.woocommerce-Reviews .comment-form-rating {
  margin-bottom: 20px;
}

.woocommerce-Reviews .comment-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--ogs-p-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ogs-p-black);
  background: var(--ogs-p-grey-bg);
  border: 0;
  border-radius: 0 !important;
  outline: none;
  resize: vertical;
  transition: box-shadow 0.15s ease;
}

.woocommerce-Reviews .comment-form textarea:focus {
  box-shadow: inset 0 0 0 1px var(--ogs-p-black) !important;
}

.woocommerce-Reviews .form-submit input#submit,
.woocommerce-Reviews .form-submit .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ogs-p-field-h);
  margin: 0 !important;
  padding: 0 34px !important;
  font-family: var(--ogs-p-heading) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: var(--ogs-p-black) !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.woocommerce-Reviews .form-submit input#submit:hover,
.woocommerce-Reviews .form-submit .submit:hover {
  background: var(--ogs-p-green) !important;
}

/* ---------- the rating picker ----------
   Five <a> elements, each one star. Their own text is hidden and the glyph is
   drawn in ::before, so hover and selection are a matter of colouring the
   siblings rather than swapping font characters. */

.woocommerce-Reviews p.stars {
  display: flex;
  gap: 4px;
  margin: 0;
}

.woocommerce-Reviews p.stars span {
  display: flex;
  gap: 4px;
}

.woocommerce-Reviews p.stars a {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  margin: 0;
  font-size: 24px;
  line-height: 1;
  text-indent: -9999em;
  text-decoration: none;
  overflow: hidden;
}

.woocommerce-Reviews p.stars a::before {
  content: "\2605";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 24px;
  line-height: 1;
  text-indent: 0;
  color: var(--ogs-p-line);
  transition: color 0.12s ease;
}

/* hovering the group fills every star, then the ones past the cursor clear */
.woocommerce-Reviews p.stars:hover a::before {
  color: var(--ogs-p-star);
}

.woocommerce-Reviews p.stars a:hover ~ a::before {
  color: var(--ogs-p-line);
}

/* after a choice, fill up to .active and clear everything after it */
.woocommerce-Reviews p.stars.selected a::before {
  color: var(--ogs-p-star);
}

.woocommerce-Reviews p.stars.selected a.active ~ a::before {
  color: var(--ogs-p-line);
}

.woocommerce-Reviews p.stars a:focus-visible::before {
  outline: 2px solid var(--ogs-p-black);
  outline-offset: 2px;
}

@media all and (max-width: 560px) {
  .woocommerce-Reviews .comment_container {
    gap: 12px;
  }

  .woocommerce-Reviews .comment_container img.avatar {
    width: 38px;
    height: 38px;
  }

  .woocommerce-Reviews-title {
    font-size: 16px;
  }

  .woocommerce-Reviews .form-submit input#submit,
  .woocommerce-Reviews .form-submit .submit {
    width: 100%;
  }
}

/* Safari zooms the page when a focused field is under 16px */
@media (pointer: coarse) {
  .woocommerce-Reviews .comment-form textarea {
    font-size: 16px;
  }

  .woocommerce-Reviews p.stars a,
  .woocommerce-Reviews p.stars a::before {
    font-size: 28px;
  }
}

/* ==========================================================================
   Sale price
   Divi styles the price module as a single block, so it cannot colour the
   struck-through original differently from the sale figure. The spans inside
   <del> need it too: a colour set on <del> alone loses to WooCommerce's own
   rule on .woocommerce-Price-amount.
   ========================================================================== */

.et_pb_wc_price .price del,
.et_pb_wc_price .price del * {
  font-weight: 400 !important;
  color: var(--ogs-p-grey) !important;
  text-decoration: line-through;
}

.et_pb_wc_price .price ins,
.et_pb_wc_price .price ins * {
  text-decoration: none;
}

/* ==========================================================================
   Unavailable variations
   The state for an option the other choices rule out — DiviMerch dims these
   but does not mark them as unselectable.
   ========================================================================== */

.divimerc-vs-option.is-oos,
.divimerc-vs-option[disabled] {
  color: var(--ogs-p-grey-light);
  cursor: not-allowed;
  text-decoration: line-through;
}

.divimerc-atc .woocommerce-variation-availability .out-of-stock {
  color: var(--ogs-p-red);
}

/* ==========================================================================
   Quantity field
   DiviMerch draws its own - / + steppers, so the browser's native number
   spinner would sit on top of them.
   ========================================================================== */

.divimerc-atc-qty input.qty::-webkit-outer-spin-button,
.divimerc-atc-qty input.qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.divimerc-atc-qty input.qty {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ==========================================================================
   Touch
   ========================================================================== */

@media (pointer: coarse) {
  /* Safari zooms the whole page when a focused field is under 16px, which
     would throw the layout off the moment someone taps the quantity box. */
  .divimerc-atc-qty input.qty,
  .divimerc-atc select,
  .divimerc-atc input[type="number"] {
    font-size: 16px;
  }

  /* 44px is the smallest comfortable tap target */
  .divimerc-vs-option {
    min-height: 44px;
  }

  .divimerc-atc-qty__btn {
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gym_product-brand-logo,
  .divimerc-vs-option,
  .divimerc-tabs__tab-inner,
  .divimerc-gallery-arrow,
  .divimerc-atc-qty__btn {
    transition-duration: 0.01ms !important;
  }
}