/* Frontend Carousel Styles */
/* Default brand variables; JS will override from settings */
:root {
  /* default carousel gap can be overridden via inline style */

  --ea-ivory-cream: #DAC0A7;
  --ea-ivory-cream-dark: #C9AD91;
  --ea-rosy-pink: #D88CBD;
  --ea-ivory-black: #231F20;
  --ea-brand-blue: #275A78;
  --ea-white: #FFFFFF;
  --ea-card-radius: 10px;
  --ea-gap: 16px;
}

.ea-carousel-title {
  color: var(--ea-ivory-black);
  margin: 0 0 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Container */
.ea-swiper { position: relative; overflow: hidden;
  width: 100%;
  overflow: hidden;
  --swiper-navigation-color: var(--ea-white); /* arrow color */
}

/* Cards */
.ea-swiper .swiper-wrapper { align-items: stretch; }
.ea-card {
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--ea-white);
  border-radius: var(--ea-card-radius);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.ea-card a { text-decoration: none; color: inherit; display: block; padding: 8px; }
.ea-card__media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: calc(var(--ea-card-radius) - 2px);
  display: block;
}
.ea-card__name { margin-top: .5rem; font-size: .95rem; line-height: 1.25; color: var(--ea-ivory-black); }
.ea-card__price { color: var(--ea-ivory-black); font-weight: 600; margin-top: .25rem; }

/* Navigation buttons: Ivory Cream background + White arrows */
.ea-swiper .swiper-button-next,
.ea-swiper .swiper-button-prev {
  width: 42px;
  height: 42px;
  background: var(--ea-ivory-cream);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.ea-swiper .swiper-button-next:hover,
.ea-swiper .swiper-button-prev:hover {
  background: var(--ea-ivory-cream-dark);
}

/* Make sure arrow icons are visible (white) */
.ea-swiper .swiper-button-next:after,
.ea-swiper .swiper-button-prev:after {
  font-size: 16px;
  color: var(--ea-white);
  font-weight: 700;
}

/* Responsive tweak */
@media (min-width: 1024px) {
  .ea-card { width: 250px; }
  .ea-card__media img { height: 240px; }
}


/* Grid-like widths to mimic Woo [products columns="4"] */
.ea-card { 
  width: calc((100% - var(--ea-gap)) / 2); /* 2 columns by default */
}
@media (min-width: 768px) {
  .ea-card { width: calc((100% - (2 * var(--ea-gap))) / 3); } /* 3 columns */
}
@media (min-width: 1024px) {
  .ea-swiper.columns-4 .ea-card { width: calc((100% - (3 * var(--ea-gap))) / 4); } /* 4 columns */
}
/* Compact visual scale */
.ea-card { background: var(--ea-white); border-radius: var(--ea-card-radius); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.ea-card__link { text-decoration: none; color: inherit; display: block; padding: 8px; }
.ea-card__media img { width: 100%; height: 220px; object-fit: cover; border-radius: calc(var(--ea-card-radius) - 2px); }
.ea-card__name { margin-top: .5rem; font-size: .95rem; line-height: 1.25; color: var(--ea-ivory-black); min-height: 2.4em; }
.ea-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 8px; }
.ea-card__price { color: var(--ea-ivory-black); font-weight: 600; }
.ea-card__actions .button { padding: 6px 10px; font-size: 13px; line-height: 1; border-radius: 999px; }

/* Ensure nested UL in slides doesn't add extra margins */
.ea-swiper .products { margin: 0; }
.ea-swiper .products li { list-style: none; }

/* Slider uses Woo UL.products as wrapper and LI.product as slides */
.ea-swiper ul.products { display: flex; flex-wrap: nowrap; gap: var(--ea-gap,0px); margin: 0; padding: 0; }
.ea-swiper ul.products > li.product { list-style: none; }

/* Match [products columns="4"] sizing while keeping a single horizontal row */
.ea-swiper ul.products.columns-4 > li.product { flex: 0 0 calc((100% - 3*var(--ea-gap,16px)) / 4); }
@media (max-width: 1024px) {
  .ea-swiper ul.products.columns-4 > li.product { flex-basis: calc((100% - 2*var(--ea-gap,16px)) / 3); }
}
@media (max-width: 768px) {
  .ea-swiper ul.products.columns-4 > li.product { flex-basis: calc((100% - 1*var(--ea-gap,16px)) / 2); }
}

/* Arrows: hidden by default, appear on hover; fade during drag */
.ea-swiper .swiper-button-next,
.ea-swiper .swiper-button-prev { opacity: 0; transition: opacity .2s ease; }
.ea-swiper.ea-hover .swiper-button-next,
.ea-swiper.ea-hover .swiper-button-prev { opacity: 1; }
.ea-swiper.swiper-grab-cursor .swiper-button-next,
.ea-swiper.swiper-grab-cursor .swiper-button-prev { opacity: .15; } /* while dragging */

/* Allow arrows to sit outside container */
.ea-swiper { position: relative; overflow: hidden; position: relative; overflow: visible; }

/* Use measured width from theme */
.ea-swiper ul.products > li.product { flex: 0 0 var(--ea-product-width, auto); margin-right: 0 !important; }

/* Arrows outside edges, pointer on top */
.ea-swiper .swiper-button-prev,
.ea-swiper .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: auto;
}
.ea-swiper .swiper-button-prev { left: -26px; }
.ea-swiper .swiper-button-next { right: -26px; }

/* Progress underline */
.ea-progress {
  position: relative;
  height: 6px;
  margin-top: 10px;
}
.ea-progress__track {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: color-mix(in srgb, var(--ea-ivory-cream), transparent 40%);
  border-radius: 999px;
}
.ea-progress__thumb {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 6px;
  border-radius: 999px;
  background: var(--ea-ivory-black);
  cursor: ew-resize;
}

/* Keep it subtle on mobile */
@media (max-width: 480px) {
  .ea-progress__thumb { width: 28px; }
}

/* Hide arrows by default; reveal on hover */
.ea-swiper .swiper-button-next,
.ea-swiper .swiper-button-prev { opacity: 0; transition: opacity .2s ease; }
.ea-swiper.ea-hover .swiper-button-next,
.ea-swiper.ea-hover .swiper-button-prev { opacity: 1; }

/* Ensure products align exactly side-by-side with slider gap */
.ea-swiper ul.products { gap: 24px; margin: 0 !important; padding: 0; }
.ea-swiper ul.products > li.product { margin: 0 !important; } /* remove theme margins that cause extra gaps */

/* Keep content contained to the viewport width (4 items at desktop via Swiper) */
.ea-swiper { position: relative; overflow: hidden; overflow: hidden; position: relative; }

/* Softer, more discreet arrows */
.ea-swiper .swiper-button-next,
.ea-swiper .swiper-button-prev {
  background: rgba(218, 192, 167, 0.55); /* Ivory Cream translucent */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.ea-swiper .swiper-button-next:hover,
.ea-swiper .swiper-button-prev:hover {
  background: rgba(218, 192, 167, 0.8);
}

/* Progress underline only on hover, subtler colors */
.ea-progress { opacity: 0; transition: opacity .2s ease; }
.ea-swiper.ea-hover .ea-progress { opacity: 1; }
.ea-progress__track { background: rgba(218, 192, 167, 0.35); }
.ea-progress__thumb { background: rgba(35,31,32,0.65); }

/* v0.3.4 adjustments */
.ea-swiper .swiper-button-prev { left: 8px !important; }
.ea-swiper .swiper-button-next { right: 8px !important; }
.ea-swiper .swiper-button-next,
.ea-swiper .swiper-button-prev { background: rgba(218,192,167,0.45); }
.ea-swiper .swiper-button-next:hover,
.ea-swiper .swiper-button-prev:hover { background: rgba(218,192,167,0.75); }

/* Ensure no extra indent: remove UL padding and rely on Swiper gap */
.ea-swiper ul.products { padding-left: 0 !important; padding-right: 0 !important; }

/* v0.3.5: stabilize product widths to avoid hover gap */
.ea-swiper ul.products > li.product {
  box-sizing: border-box;
  border: 1px solid transparent; /* reserve space if theme adds border on hover */
}

/* Arrow feedback */
.ea-swiper .swiper-button-next:hover,
.ea-swiper .swiper-button-prev:hover { background: rgba(218,192,167,0.95) !important; }
.ea-swiper .swiper-button-next.is-pressing,
.ea-swiper .swiper-button-prev.is-pressing { background: rgba(218,192,167,1) !important; }

/* v4.0.0: default to no gap between products */
.ea-swiper { position: relative; overflow: hidden; --ea-gap: 0px; }

/* v4.0.0: ensure arrows sit above images and are clickable */
.ea-swiper .swiper-button-prev, .ea-swiper .swiper-button-next { z-index: 50; pointer-events: auto; }

/* v4.0.0: tablet shows 4 columns */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ea-swiper ul.products.columns-4 > li.product { flex: 0 0 calc(100% / 4); }
}

/* v4.0.0: remove any theme margins around product cards inside carousel */
.ea-swiper ul.products > li.product { margin: 0 !important; }

/* v4.0.1: force no gaps/margins inside carousel */
.ea-swiper ul.products { gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.ea-swiper ul.products > li.product { margin: 0 !important; flex: 0 0 auto !important; }

/* v4.0.1: arrows inside edges & always clickable */
.ea-swiper .swiper-button-prev { left: 8px !important; }
.ea-swiper .swiper-button-next { right: 8px !important; }
.ea-swiper .swiper-button-prev, .ea-swiper .swiper-button-next { z-index: 100 !important; pointer-events: auto !important; }


/* v4.0.3: keep nav on top and clickable regardless of theme rules */
.ea-swiper { position: relative; }
.ea-swiper .ea-progress { position: relative; z-index: 2; }
.ea-swiper .swiper-button-prev,
.ea-swiper .swiper-button-next { z-index: 50 !important; pointer-events: auto !important; }
.ea-swiper .swiper-button-disabled { pointer-events: auto !important; opacity: .6; }


/* v4.0.6: Mobile tuning to match Shoptimizer scale */
@media (max-width: 480px){
  .ea-swiper ul.products > li.product img.wp-post-image,
  .ea-swiper ul.products > li.product img.attachment-woocommerce_thumbnail {
    height: 170px !important;
    width: 100% !important;
    object-fit: cover;
    border-radius: 8px;
  }
  .ea-swiper ul.products > li.product { padding: 6px !important; }
  .ea-swiper ul.products > li.product .woocommerce-loop-product__title {
    font-size: 14px; line-height: 1.25; margin-top: .35rem;
  }
  .ea-swiper ul.products > li.product .price { font-size: 14px; }
  .ea-swiper ul.products > li.product .button { padding: 8px 10px; font-size: 13px; }
  .ea-swiper .ea-progress { margin-top: 8px; }
}

/* === Ever After v4.0.7 overrides ===
   - Respect WooCommerce/Shoptimizer image sizes in carousel
   - Always show nav arrows on touch/mobile (hover: none; pointer: coarse)
*/
.ea-swiper .swiper-button-prev,
.ea-swiper .swiper-button-next {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 5;
}
.ea-swiper:hover .swiper-button-prev,
.ea-swiper:hover .swiper-button-next {
  opacity: 1;
  visibility: visible;
}

/* Touch/mobile: arrows ALWAYS visible */
@media (hover: none) and (pointer: coarse) {
  .ea-swiper .swiper-button-prev,
  .ea-swiper .swiper-button-next {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Fallback when JS adds .ea--touch on <html> */
html.ea--touch .ea-swiper .swiper-button-prev,
html.ea--touch .ea-swiper .swiper-button-next {
  opacity: 1;
  visibility: visible;
}

/* Comfortable hit area and positions */
.ea-swiper .swiper-button-prev,
.ea-swiper .swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  backdrop-filter: saturate(1.1) blur(3px);
}
.ea-swiper .swiper-button-prev { left: .5rem; }
.ea-swiper .swiper-button-next { right: .5rem; }

/* Respect theme/Woo image sizes: avoid fixed heights/object-fit in carousel */
.ea-swiper .ea-card__media img,
.ea-swiper ul.products > li.product img.wp-post-image,
.ea-swiper ul.products > li.product img.attachment-woocommerce_thumbnail {
  height: auto !important;
  width: 100%;
  object-fit: initial !important;
}

/* === Ever After v4.0.8 brand + UI refinements === */
.ea-swiper{
  --ea-ivory-cream: #DAC0A7;
  --ea-ivory-black: #231F20;
}
/* Arrow background uses brand Ivory Cream; icon uses Ivory Black */
.ea-swiper .swiper-button-prev,
.ea-swiper .swiper-button-next{
  background: var(--ea-ivory-cream);
  border: 1px solid rgba(0,0,0,.06);
}
.ea-swiper .swiper-button-prev::after,
.ea-swiper .swiper-button-next::after{
  color:#FFFFFF;
  font-size: 18px; /* a bit subtler */
  font-weight: 600;
}
.ea-swiper .swiper-button-prev:hover,
.ea-swiper .swiper-button-next:hover{
  background: #CBAF8F; /* darker ivory cream */
}
.ea-swiper .swiper-button-prev:active,
.ea-swiper .swiper-button-next:active{
  background: #BFA17E; /* even darker for click */
  transform: scale(.96);
}
/* Mobile: trim button size a touch to avoid covering image focal point */
@media (hover: none) and (pointer: coarse){
  .ea-swiper .swiper-button-prev,
  .ea-swiper .swiper-button-next{
    width: 40px;
    height: 40px;
  }
}
/* Square image corners to match shop grid */
.ea-swiper .ea-card__media img,
.ea-swiper ul.products > li.product img.wp-post-image,
.ea-swiper ul.products > li.product img.attachment-woocommerce_thumbnail{
  border-radius: 0 !important;
}

/* === Ever After v4.0.10: fix arrow icon jump on click === */
.ea-swiper .swiper-button-prev,
.ea-swiper .swiper-button-next{
  display: grid;
  place-items: center;
  transform: none;            /* ensure no inherited transforms */
  transform-origin: center;
}
.ea-swiper .swiper-button-prev::after,
.ea-swiper .swiper-button-next::after{
  line-height: 1;             /* stable vertical centering */
  display: block;
  transform: none;            /* no nudge on click */
}
/* Remove scale on :active to avoid perceptual jump */
.ea-swiper .swiper-button-prev:active,
.ea-swiper .swiper-button-next:active{
  /* keep active color only */
  background: #BFA17E;
}
/* Accessible focus ring without layout shift */
.ea-swiper .swiper-button-prev:focus-visible,
.ea-swiper .swiper-button-next:focus-visible{
  outline: 2px solid var(--ea-ivory-black);
  outline-offset: 2px;
}