/* ================================================================
   Category Gallery Carousel  —  frontend.css
   All rules use high-specificity selectors + !important to beat
   any WooCommerce / theme button or grid styles.
================================================================ */

/* ---------- root ---------- */
body #cgc-gallery-root {
  --cgc-accent : #2596be;
  --cgc-radius : 10px;
  font-family  : inherit;
  padding      : 12px 0 32px;
  width        : 100%;
  box-sizing   : border-box;
}

/* ---------- 6-column grid ---------- */
body #cgc-gallery-root .cgc-grid {
  display               : grid !important;
  grid-template-columns : repeat(6, 1fr) !important;
  gap                   : 10px !important;
  width                 : 100% !important;
  box-sizing            : border-box !important;
  list-style            : none !important;
  margin                : 0 !important;
  padding               : 0 !important;
  float                 : none !important;
}

/* ---------- card ---------- */
body #cgc-gallery-root .cgc-card {
  background     : #fff !important;
  border-radius  : var(--cgc-radius) !important;
  box-shadow     : 0 4px 16px rgba(0,0,0,.08) !important;
  display        : flex !important;
  flex-direction : column !important;
  text-decoration: none !important;
  color          : inherit !important;
  cursor         : pointer !important;
  position       : relative !important;
  overflow       : hidden !important;
  width          : 100% !important;
  box-sizing     : border-box !important;
  margin         : 0 !important;
  padding        : 0 !important;
  transition     : transform .25s, box-shadow .25s !important;
  border         : none !important;
  float          : none !important;
}
body #cgc-gallery-root .cgc-card:hover {
  transform  : translateY(-3px) !important;
  box-shadow : 0 8px 24px rgba(37,150,190,.18) !important;
}

/* full-card link overlay */
body #cgc-gallery-root .cgc-card-link {
  position        : absolute !important;
  top:0;left:0;right:0;bottom:0 !important;
  z-index         : 10 !important;
  display         : block !important;
  text-decoration : none !important;
}

/* ---------- SQUARE image box ----------
   padding-top:100% creates a 1:1 square.
   All children are position:absolute inside it.
---------------------------------------- */
body #cgc-gallery-root .cgc-carousel {
  position    : relative !important;
  width       : 100% !important;
  padding-top : 100% !important;   /* ← square */
  overflow    : hidden !important;
  background  : #f5f5f5 !important;
  flex-shrink : 0 !important;
  height      : 0 !important;      /* padding-top drives the height */
}

body #cgc-gallery-root .cgc-slides {
  position   : absolute !important;
  top        : 0 !important;
  left       : 0 !important;
  width      : 100% !important;
  height     : 100% !important;
  display    : flex !important;
  flex-wrap  : nowrap !important;
  margin     : 0 !important;
  padding    : 0 !important;
  transition : transform .42s cubic-bezier(.4,0,.2,1) !important;
}

body #cgc-gallery-root .cgc-slide {
  position   : relative !important;
  min-width  : 100% !important;
  width      : 100% !important;
  height     : 100% !important;
  flex-shrink: 0 !important;
  overflow   : hidden !important;
  background : #f5f5f5 !important;
  display    : flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body #cgc-gallery-root .cgc-slide img {
  position   : absolute !important;
  top        : 0 !important;
  left       : 0 !important;
  width      : 100% !important;
  height     : 100% !important;
  object-fit : contain !important;   /* full image, no crop */
  display    : block !important;
  padding    : 4px !important;
  box-sizing : border-box !important;
  margin     : 0 !important;
  max-width  : none !important;
  max-height : none !important;
}

/* ---------- counter badge ---------- */
body #cgc-gallery-root .cgc-count-badge {
  position      : absolute !important;
  top           : 6px !important;
  right         : 6px !important;
  background    : rgba(0,0,0,.45) !important;
  color         : #fff !important;
  font-size     : 9px !important;
  padding       : 2px 6px !important;
  border-radius : 20px !important;
  z-index       : 20 !important;
  pointer-events: none !important;
  line-height   : 1.5 !important;
}

/* ---------- dots ---------- */
body #cgc-gallery-root .cgc-dots {
  position  : absolute !important;
  bottom    : 5px !important;
  left      : 50% !important;
  transform : translateX(-50%) !important;
  display   : flex !important;
  gap       : 3px !important;
  z-index   : 20 !important;
  padding   : 0 !important;
  margin    : 0 !important;
}
body #cgc-gallery-root .cgc-dot {
  all           : unset !important;
  display       : block !important;
  width         : 5px !important;
  height        : 5px !important;
  border-radius : 50% !important;
  background    : rgba(255,255,255,.5) !important;
  cursor        : pointer !important;
  transition    : background .2s !important;
  padding       : 0 !important;
  margin        : 0 !important;
}
body #cgc-gallery-root .cgc-dot.active {
  background : var(--cgc-accent) !important;
  transform  : scale(1.4) !important;
}

/* ---------- card footer ---------- */
body #cgc-gallery-root .cgc-card-body {
  padding        : 8px 10px !important;
  display        : flex !important;
  align-items    : center !important;
  justify-content: space-between !important;
  border-top     : 1px solid #f0f0f0 !important;
  background     : #fff !important;
  gap            : 4px !important;
  flex-shrink    : 0 !important;
  margin         : 0 !important;
}

body #cgc-gallery-root .cgc-cat-name {
  font-size  : 11px !important;
  font-weight: 700 !important;
  color      : #1a1a2e !important;
  transition : color .2s !important;
  line-height: 1.3 !important;
  flex       : 1 !important;
  margin     : 0 !important;
  padding    : 0 !important;
}
body #cgc-gallery-root .cgc-card:hover .cgc-cat-name {
  color : var(--cgc-accent) !important;
}

body #cgc-gallery-root .cgc-arrow {
  width      : 20px !important;
  height     : 20px !important;
  flex-shrink: 0 !important;
  display    : block !important;
  transition : transform .2s !important;
}
body #cgc-gallery-root .cgc-card:hover .cgc-arrow {
  transform : translateX(2px) !important;
}

/* ---------- skeleton ---------- */
body #cgc-gallery-root .cgc-skeleton .cgc-carousel {
  background      : linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%) !important;
  background-size : 200% 100% !important;
  animation       : cgc-shimmer 1.4s infinite !important;
}
body #cgc-gallery-root .cgc-skeleton .cgc-cat-name {
  background    : #e8e8e8 !important;
  height        : 11px !important;
  width         : 70px !important;
  border-radius : 4px !important;
  animation     : cgc-shimmer 1.4s infinite !important;
  color         : transparent !important;
}
@keyframes cgc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- error ---------- */
body #cgc-gallery-root .cgc-error {
  text-align : center;
  padding    : 40px;
  color      : #c0392b;
  font-size  : 14px;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  body #cgc-gallery-root .cgc-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) {
  body #cgc-gallery-root .cgc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  body #cgc-gallery-root .cgc-cat-name { font-size: 10px !important; }
}