/**
 * Gooek Product Gallery — mobile layer stylesheet.
 *
 * Extracted verbatim from autool-header-elements'
 * assets/css/autool/autool-single-product-runtime.css by selector ownership,
 * NOT by line range: the ranges in SEPARATION-PLAN.md 6.2 were approximate and
 * several of them cut a rule mid-brace.
 *
 * Owned selector patterns:
 *   .gooek-single-gallery-*  .gooek-single-sale-badge-*
 *   .gooek-gallery-dot*      .gooek-gallery-counter*
 *
 * Declarations are byte-identical to the source; only indentation inside
 * @media wrappers is re-flowed. Source line numbers are kept in comments so
 * every rule can be traced back. Media-query nesting is preserved exactly --
 * a specificity change here is invisible in review and obvious to a customer.
 *
 * The CSS custom properties these rules read (--gooek-single-gallery-thumbs-*,
 * --gooek-single-gallery-mobile-bottom-gap, --gooek-single-sale-badge-mobile-offset,
 * --gooek-single-gallery-thumb-inner-gap) are emitted by
 * Frontend\MobileGallery::print_css_vars(), not by this file.
 */

/* ---------------------------------------------------------------------------
 * Design tokens — added by the 2026-07-31 port, not present in the extract.
 *
 * Four tokens below are READ by the extracted rules but were DEFINED by
 * autool-header-elements' runtime stylesheet, which is not installed here.
 * Three of the reads carry no fallback:
 *
 *   :144  color-mix(… var(--gooek-single-ink) …)      counter background
 *   :177  font-family: var(--gooek-single-display-font)  counter numerals
 *   :195  color-mix(… var(--gooek-single-border) …)   dots-viewport border
 *   :197  color: var(--gooek-single-ink)              dots-viewport text
 *
 * An undefined custom property makes the whole declaration invalid at
 * computed-value time, so on this site those four silently dropped: the slide
 * counter rendered with no background and the dot viewport with no border.
 * Defining them here restores the source site's appearance.
 *
 * Mapped onto Blocksy's palette (verified in uploads/blocksy/css/global.css on
 * 2026-07-31) with hard fallbacks, so the gallery still renders correctly if
 * the theme is switched or its palette is renamed.
 */
:root {
  --gooek-single-surface: var(--theme-palette-color-8, #ffffff);
  --gooek-single-ink: var(--theme-palette-color-4, #212529);
  --gooek-single-border: var(--theme-border-color, var(--theme-palette-color-5, #e6eaec));
  --gooek-single-display-font: var(--theme-font-family, inherit);
}

/* [runtime.css:533] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery, body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .ct-product-gallery-container, body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy, body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-view {
  min-width: 0;
  max-width: 100%;
}

/* [runtime.css:538] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-view[data-flexy-view="boxed"] {
  overflow: hidden;
  contain: paint;
  isolation: isolate;
}

/* [runtime.css:544] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-items {
  --flexy-items-gap: 0px;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  align-items: stretch;
}

/* [runtime.css:552] */
body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-items {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* [runtime.css:557] */
body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-view, body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"], body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] [data-flexy], body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  contain: layout paint;
}

/* [runtime.css:563] */
body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery[data-gooek-gallery-switching="yes"] .flexy-items, body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery[data-gooek-gallery-switching="yes"] .flexy-pills[data-type="thumbs"] [data-flexy], body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery[data-gooek-gallery-switching="yes"] .flexy-pills[data-type="thumbs"] ol {
  will-change: transform;
}

/* [runtime.css:567] */
body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-items > .flexy-item {
  backface-visibility: hidden;
}

/* [runtime.css:571] */
body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] li, body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] .ct-media-container, body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] img {
  backface-visibility: hidden;
}

/* [runtime.css:575] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-items > .flexy-item {
  box-sizing: border-box;
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  padding-inline: 0;
  overflow: hidden;
}

/* [runtime.css:584] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-items > .flexy-item > .ct-media-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  background: var(--gooek-single-surface, #fff);
  overflow: hidden;
}

/* [runtime.css:594] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-items > .flexy-item > .ct-media-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* [runtime.css:601] */
body.gooek-single-gallery-smooth-switch.single-product .woocommerce-product-gallery .flexy-items > .flexy-item > .ct-media-container img {
  backface-visibility: hidden;
}

/* [runtime.css:605] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] {
  overflow: hidden;
}

/* [runtime.css:609] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol {
  margin: 0;
}

/* [runtime.css:613] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] li {
  box-sizing: border-box;
  padding: var(--gooek-single-gallery-thumb-inner-gap, 4px);
}

/* [runtime.css:618] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] .ct-media-container {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  background: var(--gooek-single-surface, #fff);
  overflow: hidden;
}

/* [runtime.css:626] */
body.gooek-single-gallery-polish-enabled.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* [runtime.css:633] */
body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery {
  --gooek-single-gallery-strip-gap: clamp(8px, 1.1vw, 14px);
  --gooek-single-gallery-counter-bg: color-mix(in srgb, var(--gooek-single-ink) 82%, transparent);
  --gooek-single-gallery-counter-color: var(--gooek-single-surface, #fff);
}

/* [runtime.css:639] */
body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .ct-product-gallery-container {
  position: relative;
}

/* [runtime.css:643] */
body.gooek-single-sale-badge-gallery-fix.single-product .woocommerce-product-gallery .ct-product-gallery-container > :is(.onsale, .out-of-stock-badge, [class*="ct-woo-badge-"]) {
  z-index: 18;
  pointer-events: none;
}

/* [runtime.css:648] */
body.gooek-single-gallery-main-click-lightbox.single-product .woocommerce-product-gallery .flexy-items > .flexy-item > .ct-media-container {
  cursor: zoom-in;
}

/* [runtime.css:652] */
body.gooek-single-gallery-anker-style.single-product .gooek-gallery-counter {
  display: none;
  position: absolute;
  z-index: 12;
  right: 12px;
  bottom: 12px;
  min-width: 48px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--gooek-single-display-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--gooek-single-gallery-counter-color);
  background: var(--gooek-single-gallery-counter-bg);
  pointer-events: none;
}

/* [runtime.css:673] */
body.gooek-single-gallery-lightbox-simple.single-product .woocommerce-product-gallery__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 0;
  line-height: 0;
  border: 1px solid color-mix(in srgb, var(--gooek-single-border) 80%, transparent);
  border-radius: 999px;
  color: var(--gooek-single-ink);
  background: color-mix(in srgb, var(--gooek-single-surface) 94%, transparent);
  text-decoration: none;
  backdrop-filter: blur(10px);
}

/* [runtime.css:689] */
body.gooek-single-gallery-lightbox-simple.single-product .woocommerce-product-gallery__trigger::before {
  font-size: 16px;
  line-height: 1;
}

/* [runtime.css:694] */
body.gooek-single-gallery-lightbox-simple.single-product .pswp__button--share, body.gooek-single-gallery-lightbox-simple.single-product .pswp__button--fs, body.gooek-single-gallery-lightbox-simple.single-product .pswp__button--zoom, body.gooek-single-gallery-lightbox-simple.single-product .pswp__caption {
  display: none !important;
}

/* [runtime.css:698] */
body.gooek-single-gallery-thumb-count-enabled.single-product .woocommerce-product-gallery {
  --gooek-single-gallery-visible-thumbs: var(--gooek-single-gallery-thumbs-desktop, 5);
  --thumbs-width: calc(100% / var(--gooek-single-gallery-visible-thumbs));
}

/* [runtime.css:2939] */
@media (max-width: 689.98px) {
  body.gooek-single-sale-badge-gallery-fix.single-product .woocommerce-product-gallery .ct-product-gallery-container > :is(.onsale, .out-of-stock-badge, [class*="ct-woo-badge-"]) {
    --badge-top: var(--gooek-single-sale-badge-mobile-offset, 16px);
    --badge-left: var(--gooek-single-sale-badge-mobile-offset, 16px);
    top: var(--badge-top);
    inset-inline-start: var(--badge-left);
    max-width: calc(100vw - (var(--gooek-single-sale-badge-mobile-offset, 16px) * 2));
  }
}

/* [runtime.css:2949] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-thumb-count-enabled.single-product .woocommerce-product-gallery {
    --gooek-single-gallery-visible-thumbs: var(--gooek-single-gallery-thumbs-mobile, 5);
  }
}

/* [runtime.css:2955] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] {
    display: none;
  }
}

/* [runtime.css:2961] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-anker-style.gooek-single-gallery-mobile-counter-enabled.single-product .gooek-gallery-counter {
    display: inline-flex;
  }
}

/* [runtime.css:2967] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .flexy-view[data-flexy-view="boxed"] {
    overflow: hidden;
    touch-action: pan-y;
  }
}

/* [runtime.css:2974] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-anker-style.gooek-single-gallery-mobile-switch-fallback.single-product .woocommerce-product-gallery[data-gooek-mobile-gallery-fallback-active="yes"] .flexy-items {
    transform: translate3d(calc(-100% * var(--gooek-mobile-gallery-index, 0)), 0, 0);
    will-change: transform;
  }
}

/* [runtime.css:2981] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-anker-style.gooek-single-gallery-mobile-switch-fallback.single-product .woocommerce-product-gallery[data-gooek-mobile-gallery-fallback-active="yes"] .flexy-items > .flexy-item {
    height: auto !important;
    transform: none !important;
  }
}

/* [runtime.css:2988] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .flexy-items > .flexy-item > .ct-media-container {
    aspect-ratio: 1 / 1 !important;
  }
}

/* [runtime.css:2994] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-anker-style.gooek-single-gallery-mobile-full-bleed.single-product .woocommerce-product-gallery {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-bottom: var(--gooek-single-gallery-mobile-bottom-gap, 0px);
  }
}

/* [runtime.css:3003] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-anker-style.gooek-single-gallery-mobile-full-bleed.single-product .woocommerce-product-gallery .ct-product-gallery-container, body.gooek-single-gallery-anker-style.gooek-single-gallery-mobile-full-bleed.single-product .woocommerce-product-gallery .flexy, body.gooek-single-gallery-anker-style.gooek-single-gallery-mobile-full-bleed.single-product .woocommerce-product-gallery .flexy-view, body.gooek-single-gallery-anker-style.gooek-single-gallery-mobile-full-bleed.single-product .woocommerce-product-gallery .flexy-items {
    width: 100%;
    max-width: 100vw;
  }
}

/* [runtime.css:3010] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-lightbox-simple.single-product .woocommerce-product-gallery__trigger {
    width: 36px;
    height: 36px;
  }
}

/* [runtime.css:3608] */
@media (min-width: 690px) {
  body.gooek-single-gallery-polish-enabled.single-product .product.thumbs-left .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] [data-flexy] {
    max-height: 100%;
  }
}

/* [runtime.css:3614] */
@media (min-width: 690px) {
  body.gooek-single-sale-badge-gallery-fix.single-product .product.thumbs-left .woocommerce-product-gallery .ct-product-gallery-container > :is(.onsale, .out-of-stock-badge, [class*="ct-woo-badge-"]) {
    --badge-left: calc(var(--thumbs-width, 100px) + var(--thumbs-spacing, 15px) + 20px);
  }
}

/* [runtime.css:3620] */
@media (min-width: 690px) {
  body.gooek-single-gallery-thumb-count-enabled.single-product .product.thumbs-left .woocommerce-product-gallery {
    /* First-paint fallback matches the JS fixpoint (thumb = (gallery - spacing) / (count + 1))
       so the gallery no longer jumps when syncGalleryThumbCounts() writes the px value. */
    --thumbs-width: var(--gooek-single-gallery-thumb-size, calc((100% - var(--thumbs-spacing, 15px)) / (var(--gooek-single-gallery-visible-thumbs, 5) + 1)));
  }
}

/* [runtime.css:3628] */
@media (min-width: 690px) {
  body.gooek-single-gallery-thumb-count-enabled.single-product .product.thumbs-left .woocommerce-product-gallery .flexy-pills {
    /* The column needs an explicit width: with a percentage fallback the li can no
       longer size the shrink-wrapped pills column the way the old px value did. */
    width: var(--thumbs-width);
  }
}

/* [runtime.css:3636] */
@media (min-width: 690px) {
  body.gooek-single-gallery-thumb-count-enabled.single-product .product.thumbs-left .woocommerce-product-gallery .flexy-pills li {
    width: 100%;
    height: var(--gooek-single-gallery-thumb-size, auto);
    aspect-ratio: 1 / 1;
  }
}

/* [runtime.css:3644] */
@media (min-width: 690px) and (max-width: 999.98px) {
  body.gooek-single-gallery-thumb-count-enabled.single-product .woocommerce-product-gallery {
    --gooek-single-gallery-visible-thumbs: var(--gooek-single-gallery-thumbs-tablet, 5);
  }
}

/* [runtime.css:3753] */
/* --- Mobile gallery dot navigation (anker style) --- */
.gooek-gallery-dots {
  display: none;
}

/* [runtime.css:3758] */
@media (max-width: 689.98px) {
  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dots {
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    touch-action: none;
  }

  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dots-viewport {
    overflow: hidden;
  }

  /* Fade the dot strip out only toward sides that actually have more images. */
  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dots--fade-start .gooek-gallery-dots-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px);
    mask-image: linear-gradient(to right, transparent, #000 16px);
  }

  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dots--fade-end .gooek-gallery-dots-viewport {
    -webkit-mask-image: linear-gradient(to right, #000, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, #000, #000 calc(100% - 16px), transparent);
  }

  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dots--fade-start.gooek-gallery-dots--fade-end .gooek-gallery-dots-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }

  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dots-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    transition: transform 0.25s ease;
  }

  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dot {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 32, 0.28);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
  }

  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dot.is-small::before {
    width: 4px;
    height: 4px;
  }

  body.gooek-single-gallery-anker-style.single-product .woocommerce-product-gallery .gooek-gallery-dot.active::before {
    width: 16px;
    background: rgba(15, 23, 32, 0.85);
  }
}