/* CG3 scoped exceptions - loaded with filemtime() versioning so edits bust
   browser and CDN caches. Divi enqueues style.css with the parent theme
   version, which never changes, so CSS edits there are invisible until the
   cache expires. */

/* CG3 exception #3a - all breakpoints.
   FlexSlider writes its own inline pixel height on .flex-viewport and does not
   commit the taller value when a portrait slide becomes active, so the image is
   cut by overflow:hidden. !important is required to beat that inline style.
   Not desktop-specific - applies at every breakpoint. */
.cg3-pcard .woocommerce-product-gallery .flex-viewport {
  height: auto !important;
}

/* CG3 exception #3b - consistent media canvas, all breakpoints.
   The slide is the only element FlexSlider never writes a height on, so it is
   safe as a fixed-height canvas; its horizontal maths is width-based only.
   The flex centring goes on the anchor because the slide carries an inline
   display:block. The image is never resized or cropped - only the space it is
   presented in is normalised. */
.cg3-pcard .woocommerce-product-gallery__image {
  height: 320px;
}
.cg3-pcard .woocommerce-product-gallery__image > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.cg3-pcard .woocommerce-product-gallery__image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* ===== CG3 CSS exception #3 - product overview cards only =====
   The Woo/FlexSlider thumbnail row is internal markup inside
   divi/woocommerce-product-images and cannot be targeted by any
   native Divi setting. Desktop pointer devices only; touch keeps
   the native Woo layout untouched. */
@media (hover: hover) and (pointer: fine) {
  .cg3-pcard .woocommerce-product-gallery .flex-control-thumbs {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    width: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
  }
  .cg3-pcard:hover .woocommerce-product-gallery .flex-control-thumbs,
  .cg3-pcard:focus-within .woocommerce-product-gallery .flex-control-thumbs {
    opacity: 1;
    visibility: visible;
  }
}

/* CG3 exception #5 - form placeholder colour.
   Divi renders the field label inside the placeholder (the real <label> is
   display:none), so the browser default placeholder grey washes the labels out.
   field.advanced.placeholder.font.font exists in the module schema but emits
   nothing on this install, so the colour is set here instead. */
.cg3-form ::placeholder {
  color: var(--gcid-cg3-color-text-muted);
  opacity: 1;
}

/* CG3 exception #6 - real flag images instead of emoji.
   Windows has no font for regional-indicator flag emoji, so they fall back to
   two letters (DK, IS, NO). The country terms already carry flag images; they
   are injected as <img class='cg3-flag'> in the module content. Fixed box plus
   object-fit:cover so sources with different aspect ratios all match. */
.cg3-flag {
  width: 20px;
  height: 13px;
  object-fit: contain;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 8px;
  border-radius: 2px;
}

/* Flag position on the country pills. Divi's background image position token
   was not honoured (it fell back to 50% 50%), so the offset is set here. */
.cg3-pilloff,
.cg3-pillon {
  background-position: 16px center !important;
}